/* ============================================================
   tokens.css
   Single source of truth for visual variables.
   Loaded FIRST on every page. Documented in
   /docs/DESIGN_SYSTEM.md §2–§4.
   ============================================================ */

:root {
  /* ─── Color: Light (default) ──────────────────────────── */
  --c-paper:    #F2F1EC;   /* page bg */
  --c-paper-2:  #E8E6DF;   /* card bg */
  --c-paper-3:  #D9D6CC;   /* outer bg (around the page card) */
  --c-ink:      #0A0A0A;   /* primary text */
  --c-ink-2:    #1A1A1A;   /* secondary text */
  --c-ink-mute: #6B6B66;   /* tertiary / meta text */
  --c-rule:     #111111;   /* divider lines */

  /* ─── Accent: Orange (default) ────────────────────────── */
  --c-accent:     #FF5B1F;
  --c-accent-ink: #FFFFFF;

  /* ─── Type: families ──────────────────────────────────── */
  --f-serif: 'Instrument Serif', 'Times New Roman', serif;
  --f-grot:  'Space Grotesk', system-ui, sans-serif;
  --f-mono:  'JetBrains Mono', ui-monospace, monospace;

  /* ─── Type: fluid scale ───────────────────────────────── */
  --t-mega: clamp(88px, 17vw, 260px);
  --t-h1:   clamp(40px, 6vw, 96px);
  --t-h2:   clamp(28px, 3.4vw, 56px);
  --t-h3:   clamp(20px, 1.8vw, 28px);
  --t-body: 16px;
  --t-meta: 11px;

  /* ─── Spacing ─────────────────────────────────────────── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;
  --space-2xl: 80px;
  --space-3xl: 120px;

  --pad: clamp(20px, 3vw, 48px);       /* page horizontal padding */
  --space-gutter: 24px;                 /* default content-row gap — the ONLY gap on a 12-col row unless one of the gap-* tokens below applies */

  /* ─── Grid gaps (semantic — see docs/grid-audit-2026-05-15.md) ──── */
  --gap-hero: 80px;                     /* hero rows: big block + side content */
  --gap-cta: 48px;                      /* CTA strip: message + actions */
  --gap-grid-dense: 16px;               /* tighter sub-grids (cards, form rows) */

  /* ─── Borders ─────────────────────────────────────────── */
  --bw:  1.5px;
  --bw2: 3px;

  /* ─── Micro offsets (for hover states, positioning) ───── */
  --offset-xs: 2px;
  --offset-sm: 4px;
  --offset-md: 8px;

  /* ─── Breakpoints (mirror in @media queries) ──────────── */
  --bp-tablet: 960px;
  --bp-mobile: 640px;

  /* ─── Animation ───────────────────────────────────────── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.15s;
  --t-base: 0.3s;
  --t-slow: 0.8s;

  /* ─── Nav heights (used by sticky offsets) ────────────── */
  --nav-h:        56px;
  --nav-h-mobile: 52px;
}

/* ─── Theme: Dark ───────────────────────────────────────── */
[data-theme="dark"] {
  --c-paper:    #0A0A0A;
  --c-paper-2:  #141414;
  --c-paper-3:  #1E1E1E;
  --c-ink:      #F2F1EC;
  --c-ink-2:    #E8E6DF;
  --c-ink-mute: #8A8A84;
  --c-rule:     #F2F1EC;
}

/* ─── Accent variants ───────────────────────────────────── */
[data-accent="orange"] { --c-accent: #FF5B1F; --c-accent-ink: #FFFFFF; }
[data-accent="red"]    { --c-accent: #E63122; --c-accent-ink: #FFFFFF; }
[data-accent="yellow"] { --c-accent: #E8FF3A; --c-accent-ink: #0A0A0A; }