/* =====================================================================
   tokens.css — design tokens, type scale, utilities, base resets. CORE-OWNED.
   Cream paper / navy ink / terracotta clay / gold. Fraunces display + Manrope UI.
   Two-token caps system (.caps / .caps.xs), tabular numerals (.num), 8px grid.
   ===================================================================== */
:root {
  /* colour */
  --paper: #f4eee3;
  --paper-2: #e8e0d0;
  --ink: #101827;
  --ink-2: #2b3650;
  --ink-3: #5b6478;           /* muted on cream, 5.1:1 */
  --muted: var(--ink-3);
  --night: #0b1220;
  --night-2: #141f33;
  --cream: #f4eee3;
  --cream-60: rgba(244, 238, 227, 0.6);
  --cream-30: rgba(244, 238, 227, 0.3);
  --cream-12: rgba(244, 238, 227, 0.12);
  --clay: #d2684a;            /* wrong, kickers, seal, France */
  --clay-2: #b2533a;
  --gold: #c9a45c;            /* right, points, score, my row */
  --gold-soft: rgba(201, 164, 92, 0.25);
  --scrim: 5, 8, 15;          /* rgb triplet for scrims */

  /* type */
  --display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", "Inter", system-ui, sans-serif;
  --d-1: clamp(27px, 7.4vw, 32px);     /* story text */
  --d-2: clamp(34px, 9.6vw, 42px);     /* .title (opsz 96) */
  --d-3: clamp(44px, 13vw, 58px);      /* .title.xl (opsz 144) */
  --d-4: clamp(64px, 20vw, 84px);      /* lockup (opsz 144) */
  --d-num: clamp(96px, 30vw, 120px);   /* date numerals */
  --t-xs: 12px;   /* links, corners, credits */
  --t-s: 14px;    /* muted, sub, errors */
  --t-m: 16px;    /* choices, bubbles, body */
  --t-l: 18px;    /* inputs */
  --caps: 500 10.5px/1 var(--sans);
  --caps-track: 0.24em;
  --caps-xs: 500 10px/1 var(--sans);
  --caps-xs-track: 0.18em;
  --wonk: "WONK" 1, "SOFT" 30;

  /* space + radii */
  --pad: 24px;
  --r-xs: 6px;
  --r-s: 12px;
  --r-m: 16px;
  --r-l: 24px;
  --r-pill: 999px;
  --hairline: 1px;
  --control: 56px;
  --tap: 44px;

  /* motion (CSS side; GSAP tokens live in core.js M) */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-cine: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --kb: 0px;
}
@media (min-resolution: 2dppx) { :root { --hairline: 0.5px; } }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { margin: 0; font: 15px/1.5 var(--sans); color: var(--cream); background: #05080f; overflow: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button { font: inherit; color: inherit; touch-action: manipulation; }
input, textarea, select { touch-action: manipulation; }
img { display: block; }
p { margin: 0; }

/* ---------- utilities ---------- */
.caps { font: var(--caps); letter-spacing: var(--caps-track); text-transform: uppercase; }
.caps.xs { font: var(--caps-xs); letter-spacing: var(--caps-xs-track); }
.num, .tabular { font-variant-numeric: tabular-nums lining-nums; }
.fr, .amp, .caption, .datecard .month, .italic { font-variation-settings: var(--wonk); }
.title, .story .text, .date-rev { text-wrap: balance; }
.sub, .bubble, .choice, .body { text-wrap: pretty; }
.title { hanging-punctuation: first; }