/* ─────────────────────────────────────
   DESIGN TOKENS
   Single source of truth for colors,
   typography, weight, and font stacks.
───────────────────────────────────── */

/* ── COLOR — light (default) ── */
:root {
  --bg:      #FAFAFA;
  --bg-2:    #F2F2F2;
  --surf:    #FFFFFF;
  --ink:     #0A0A0A;
  --ink-2:   #555555;
  --ink-3:   #AAAAAA;
  --border:  rgba(10,10,10,0.08);
  --border-h:rgba(10,10,10,0.16);
  --accent:  #2563EB;           /* electric blue */
  --glow-r:  37, 99, 235;
  --nav-bg:  rgba(250,250,250,0.85);

  /* Warning — yellow/amber (NDA notes, cautions) */
  --warn:        #9A6700;            /* deep amber, legible on light */
  --warn-bg:     #FEF8E7;            /* soft yellow surface */
  --warn-border: rgba(154,103,0,0.28);

  /* Gradient — used for Solution punchline + HMW key words (links question to answer) */
  --grad-solution: linear-gradient(135deg, #2563EB 0%, #7C3AED 52%, #EC4899 100%);

  /* Gradient — HMW band background. Deep indigo top → magenta → pale pink → page bg.
     The lighter stops near the bottom transition smoothly into the light page bg. */
  --grad-hmw: linear-gradient(180deg, #1E1B4B 0%, #1E1B4B 28%, #3730A3 42%, #6D28D9 58%, #A855F7 72%, #F0ABFC 84%, #FBCFE8 93%, var(--bg) 100%);

  /* Spotlight section — always dark, regardless of theme. Apple-style refined dark gray (softer than pure black) */
  --spotlight-bg:        #1D1D1F;
  --spotlight-ink:       #F5F5F5;
  --spotlight-ink-mute:  rgba(245,245,245,0.42);
}

/* ── COLOR — dark ── */
[data-theme="dark"] {
  --bg:      #161616;
  --bg-2:    #242424;
  --surf:    #2C2C2C;
  --ink:     #F5F5F5;
  --ink-2:   #A8A8A8;
  --ink-3:   #7A7A7A;
  --border:  rgba(245,245,245,0.08);
  --border-h:rgba(245,245,245,0.16);
  --accent:  #3B82F6;
  --glow-r:  59, 130, 246;
  --nav-bg:  rgba(22,22,22,0.85);

  /* Warning — yellow/amber for dark surfaces */
  --warn:        #FBBF24;            /* amber-400 */
  --warn-bg:     rgba(251,191,36,0.10);
  --warn-border: rgba(251,191,36,0.26);

  /* Gradient — lighter stops for dark mode legibility */
  --grad-solution: linear-gradient(135deg, #60A5FA 0%, #A78BFA 52%, #F472B6 100%);

  /* Gradient — HMW band in dark mode: stay in deep indigo throughout, fade to near-black page bg.
     No pale pink stops — they'd appear as bright blotches on the dark page. */
  --grad-hmw: linear-gradient(180deg, #1E1B4B 0%, #1E1B4B 30%, #3730A3 50%, #4338CA 72%, #312E81 90%, var(--bg) 100%);
}

/* ── TYPOGRAPHY ── */
:root {
  /* Font stacks */
  --font-body:    'Figtree',-apple-system,'SF Pro Text','SF Pro Display',BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-display: 'Figtree', sans-serif;
  --font-accent:  'Figtree', sans-serif;
  --font-mono:    'SF Mono','Menlo','Consolas',monospace;

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Size scale
     ≤12px: micro labels, off-grid OK
     >12px: strict 8px grid */
  --fs-2xs:        10px;
  --fs-xs:         12px;
  --fs-sm:         14px;
  --fs-base:       18px;
  --fs-md:         24px;
  --fs-lg:         32px;
  --fs-xl:         40px;
  --fs-2xl:        48px;
  --fs-3xl:        56px;
  --fs-4xl:        64px;
  --fs-5xl:        72px;
  --fs-6xl:        80px;
  --fs-display:    96px;
  --fs-display-lg: 144px;
  --fs-display-xl: 224px;

  /* ── PARAGRAPH ROLES ──
     p1 = default body paragraph. Use these tokens for all prose unless
     the paragraph needs explicit emphasis (lead/quote/bold). Change
     these to retune every paragraph across the site at once. */
  --p1-size:        var(--fs-base);     /* 16px */
  --p1-weight:      var(--fw-regular);  /* 400 */
  --p1-line:        1.8;
  --p1-tracking:    -.02em;
  --p1-color:       var(--ink-2);
  --p1-max-width:   680px;
}