/* ============================================================
   PEOPLE ATX — DESIGN TOKENS
   Colors + Type. Import this file first.
   ============================================================ */

/* Webfonts
   - Inter (UI / body): LOCAL variable, opsz + wght axes.
   - Bricolage Grotesque (display / headings): LOCAL variable, opsz + wdth + wght axes.
   - JetBrains Mono (data): Google Fonts CDN until a licensed mono is provided. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/BricolageGrotesque-VariableFont_opsz_wdth_wght.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- THE DEEP OCEAN PALETTE (brand) ---------- */
  --primary-deep:      #00113A;  /* Primary Deep — backgrounds, headers, ink */
  --ocean-container:   #002366;  /* Ocean Container — cards, secondary surfaces on light */
  --strategic-blue:    #00658B;  /* Strategic Blue — CTAs, accents, links */
  --surface-clarity:   #C6E7FF;  /* Surface Clarity — soft tints, highlights */

  /* ---------- EXTENDED NEUTRALS ---------- */
  /* Built off the navy hue so neutrals carry the brand's cool temperature */
  --paper:        #FFFFFF;
  --bone:         #F6F8FB;       /* page background on light */
  --mist:         #EDF1F7;       /* subtle surface, dividers behind cards */
  --fog:          #DCE3ED;       /* borders, hairlines */
  --steel:        #8A95A8;       /* muted text, captions */
  --slate:        #4A5567;       /* secondary text */
  --ink:          #0B1426;       /* body text on light (slightly softer than primary-deep) */
  --abyss:        #000814;       /* deepest dark, used sparingly */

  /* ---------- SEMANTIC TOKENS — LIGHT ---------- */
  --bg:               var(--bone);
  --bg-elevated:      var(--paper);
  --bg-sunken:        var(--mist);
  --bg-brand:         var(--primary-deep);
  --bg-brand-soft:    var(--surface-clarity);

  --fg:               var(--ink);
  --fg-muted:         var(--slate);
  --fg-subtle:        var(--steel);
  --fg-on-brand:      var(--paper);
  --fg-brand:         var(--primary-deep);
  --fg-accent:        var(--strategic-blue);

  --border:           var(--fog);
  --border-strong:    #B8C2D1;
  --border-brand:     var(--ocean-container);

  --link:             var(--strategic-blue);
  --link-hover:       var(--ocean-container);

  /* States are hue-shifted neutrals; brand stays cool throughout */
  --success:          #1F7A5C;
  --warning:          #B8761B;
  --danger:           #B43844;

  /* ---------- ELEVATION ---------- */
  /* Shadows tuned with navy undertone — never pure black */
  --shadow-xs:  0 1px 2px rgba(0, 17, 58, 0.06);
  --shadow-sm:  0 2px 6px rgba(0, 17, 58, 0.08);
  --shadow-md:  0 6px 18px rgba(0, 17, 58, 0.10);
  --shadow-lg:  0 18px 40px rgba(0, 17, 58, 0.14);
  --shadow-xl:  0 32px 80px rgba(0, 17, 58, 0.18);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ---------- RADII ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;     /* default for buttons, inputs */
  --r-lg: 10px;    /* cards */
  --r-xl: 16px;    /* feature panels */
  --r-pill: 999px;

  /* ---------- SPACING (4-pt scale) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- TYPE FAMILIES ---------- */
  /* Display = Fraunces (a confident, lightly editorial serif — gravitas without stuffiness)
     Sans   = Inter (clean, professional, screen-tuned)
     Mono   = JetBrains Mono (data, code, callouts) */
  --font-display: 'Bricolage Grotesque', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE (semantic) ---------- */
  /* Sizes in px to keep slide/print scaling predictable */
  --fs-display:   72px;   /* hero, title slides */
  --fs-h1:        48px;
  --fs-h2:        36px;
  --fs-h3:        24px;
  --fs-h4:        20px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-caption:   12px;
  --fs-eyebrow:   12px;   /* uppercase labels */

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ---------- MOTION ---------- */
  /* Restrained, professional easing — no bounces, no overshoot */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
}

/* ---------- DARK / DEEP MODE ---------- */
/* The brand's natural state. Used for hero sections, decks, slide backgrounds. */
[data-theme="deep"], .theme-deep {
  --bg:               var(--primary-deep);
  --bg-elevated:      var(--ocean-container);
  --bg-sunken:        var(--abyss);
  --bg-brand:         var(--primary-deep);
  --bg-brand-soft:    rgba(198, 231, 255, 0.08);

  --fg:               #E9F0FA;
  --fg-muted:         #A6B4CB;
  --fg-subtle:        #6E7E97;
  --fg-on-brand:      var(--paper);
  --fg-brand:         var(--surface-clarity);
  --fg-accent:        var(--surface-clarity);

  --border:           rgba(198, 231, 255, 0.14);
  --border-strong:    rgba(198, 231, 255, 0.24);
  --border-brand:     var(--strategic-blue);

  --link:             var(--surface-clarity);
  --link-hover:       #FFFFFF;

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-md:  0 6px 18px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 18px 40px rgba(0, 0, 0, 0.55);
  --shadow-xl:  0 32px 80px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   These give plain HTML the brand voice for free.
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  color: var(--fg);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  font-weight: 500;
  letter-spacing: -0.03em;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: 600; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: 600; }

p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  text-wrap: pretty;
  margin: 0 0 var(--s-4);
}

.lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-accent);
}

.caption {
  font-size: var(--fs-caption);
  color: var(--fg-subtle);
  letter-spacing: 0.02em;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); }

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--s-6) 0;
}

::selection {
  background: var(--surface-clarity);
  color: var(--primary-deep);
}