/* ============================================================
   tokens.css — Design System v2 "Demo DNA" (01-Design-System.md §1-2)
   LinkedIn Riches rebuild · 2026. Palette + fonts + spacing only.
   v2 07-30 (late): dark navy canvas + cream + golds + color pops,
   ported from the Demo deck. v1 paper/ink palette retired.
   ============================================================ */

:root{
  /* §1 DARK CANVAS */
  --navy:#06121d;    /* default dark section background */
  --ink:#04111d;     /* deepest dark — footer, exhibit screens, page bg */
  --ink2:#06192b;    /* panels and cards on dark */
  --navy2:#012547;   /* blob gradient depth only — never a text surface */
  --cream:#F6F0E4;   /* headlines + primary text on dark; light canvas bg */
  --dim:#b9c6d2;     /* body text on dark */
  --mute:#7e93a6;    /* captions on dark (18px+ only) */
  --gold:#D39548;    /* credential moments ONLY */
  --gold2:#E3AF59;   /* gold gradient top */
  --line:rgba(211,149,72,.26);      /* gold hairline */
  --gold-soft:rgba(211,149,72,.20); /* mark highlighter */

  /* §1 LIGHT CANVAS */
  --cream2:#EDE4CF;  /* alternate light section */
  --kraft:#F4E6C7;   /* the 5.17 "what happens next" card */
  --inkbody:#182b3a; /* body on cream */
  --inkhead:#04111d; /* headlines on cream */
  --mutel:#5b6f80;   /* captions on cream */

  /* §1 COLOR POPS — accents, never body text */
  --coral:#f0937c; --coral2:#e0674a;
  --mint:#67d6a0; --ice:#cfe0ee; --teal:#128197; --li:#0A66C2;

  /* §7 SPACING — 8px base */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:40px; --s-5:64px; --s-6:96px; --s-7:144px;

  /* content widths */
  --w-prose:720px;
  --w-wide:1140px;

  /* type */
  --font-sans:"Manrope",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:"Roboto Mono",ui-monospace,Menlo,Consolas,monospace;
  --font-num:"Sora","Manrope",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; /* stat numerals ONLY — the Demo deck's numeral face (John, 07-30) */
}

/* §2 FONTS — free, self-hosted, variable. The ONLY two families —
   Manrope is ALSO the wordmark's face (E2), one language everywhere.
   The Demo deck's Sora / Inter / Playfair are NOT used. */
@font-face{
  font-family:"Manrope";
  src:url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  /* Sora 800 — STAT NUMERALS ONLY (the Demo's numeral face; John 07-30:
     "find a better font" for the numbers row). Everything else stays Manrope. */
  font-family:"Sora";
  src:url("../fonts/sora-latin-800-normal.woff2") format("woff2");
  font-weight:800;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Roboto Mono";
  src:url("../fonts/roboto-mono-latin-wght-normal.woff2") format("woff2");
  font-weight:100 700;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}