/**
 * Road To Kickoff — design tokens
 * Canonical source. Drop in via:
 *   <link rel="stylesheet" href="brand-book/tokens.css">
 * See BRAND_BOOK.md for usage guidance.
 *
 * Section map:
 *   1. Color
 *   2. Type — families
 *   3. Type — numeric scale (--fs-*)
 *   4. Type — fluid display sizes (--fs-fluid-*)
 *   5. Type — letter-spacing scale (--ls-*)
 *   6. Type — paired size/leading (legacy --type-* pairs)
 *   7. Spacing
 *   8. Radii
 *   9. Motion
 *  10. Legacy aliases (kept so the inline :root in index.html keeps working
 *      during the migration; safe to delete once the inline block is removed)
 */

:root {
  /* ─── 1. COLOR ──────────────────────────────────────────── */

  /* Pitch greens (chrome) */
  --pitch-deep:   #1F4D1D;
  --pitch:        #2F6B2C;
  --pitch-bright: #357330;
  --pitch-line:   #3A6B38;

  /* Chalk (page) */
  --chalk:    #F4EFE5;
  --paper:    #FAF6EC;
  --paper-2:  #EBE5D8;   /* second paper tone — panel insets */
  --hairline: #D9D2C2;
  --ink:      #0F1422;
  --muted:    #7A7468;
  --muted-2:  #A8A096;   /* lighter muted — disabled / tertiary */

  /* Accents */
  --postbox-red:  #C8102E;
  --red-on-pitch: #FF5C5C;
  --red-tint:     #F4D5DA;
  --kit-navy:     #0F2138;
  --cream:        #F2C75C;
  --amber:        #B86E0E;

  /* ─── 2. TYPE — families ────────────────────────────────── */
  --font-sans:  'Inter Tight', 'Noto Sans JP', system-ui, sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
  --font-mono:  'JetBrains Mono', ui-monospace, monospace;

  /* ─── 3. TYPE — numeric scale ───────────────────────────── */
  --fs-50:  11px;   /* caption · mono eyebrow · fine print */
  --fs-75:  13px;   /* mono labels · small UI text · pill copy */
  --fs-100: 15px;   /* body default · form input · nav */
  --fs-200: 17px;   /* long-form body · article paragraphs */
  --fs-300: 20px;   /* lede · large list label · stat value */
  --fs-500: 32px;   /* section headline (non-fluid) · results hed */

  /* ─── 4. TYPE — fluid display sizes ─────────────────────── */
  /* These names are canonical. The earlier HANDOFF.md §0 draft
     called them --type-fluid-* — that naming is retired. */
  --fs-fluid-h2:      clamp(28px, 4vw, 44px);   /* wiz hed · sub-display */
  --fs-fluid-display: clamp(48px, 9vw, 112px);  /* guide hero hed · hero */

  /* ─── 5. TYPE — letter-spacing scale ────────────────────── */
  --ls-snug:   -0.015em;  /* large serif display heds */
  --ls-wide:    0.04em;   /* small-caps · tab labels */
  --ls-wider:   0.08em;   /* mono UI labels · meta */
  --ls-widest:  0.12em;   /* eyebrows · TOC heds */

  /* ─── 6. TYPE — paired size/leading (legacy) ────────────── */
  /* Kept for any existing CSS that uses these specific pairs.
     New work should reach for the --fs-* / --ls-* tokens instead. */
  --type-display-size:  56px;  --type-display-leading:  58px;  /* Inter Tight 700 — hero */
  --type-headline-size: 22px;  --type-headline-leading: 25px;  /* Newsreader 500 — fixtures */
  --type-mono-size:     13px;  --type-mono-leading:     17px;  /* JetBrains Mono 500 — data */
  --type-eyebrow-size:  11px;  --type-eyebrow-leading:  13px;  /* Inter Tight 500 — labels */

  /* ─── 7. SPACING ────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;

  /* ─── 8. RADII ──────────────────────────────────────────── */
  --radius-sm: 2px;
  --radius:    4px;   /* default — chips, inputs, buttons */
  --radius-md: 8px;   /* cards, modals, popovers */
  --radius-lg: 16px;  /* feature panels */
  --radius-pill: 999px;

  /* ─── 9. MOTION ─────────────────────────────────────────── */
  --dur-fast:   120ms;
  --dur-normal: 220ms;
  --dur-slow:   360ms;
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:    cubic-bezier(0.5, 0, 0.9, 0.5);
  --ease-inout: cubic-bezier(0.5, 0, 0.5, 1);

  /* ─── 10. LEGACY ALIASES ────────────────────────────────── */
  /* These exist so index.html's inline :root block can be deleted
     incrementally without breaking any existing selector. Safe to
     remove once the inline block is gone and no CSS references the
     short names below. */
  --mono:        var(--font-mono);
  --sans:        var(--font-sans);
  --serif:       var(--font-serif);
  --paper-warm:  var(--paper);          /* live site name → canonical */
  --paper2:      var(--paper-2);        /* live site spelled it without the hyphen */
  --ink-deep:    var(--ink);
  --ink2:        var(--muted);
  --ink3:        var(--muted-2);
  --muted-light: var(--muted-2);        /* live site name → canonical */
  --rule:        var(--hairline);
  --red:         var(--postbox-red);
}

/* Japanese locale uses Noto Sans JP first — kept here so the rule
   travels with the tokens it depends on. */
html[lang="ja"] body { font-family: 'Noto Sans JP', 'Inter Tight', system-ui, sans-serif; }