/* Design tokens — SPEC §8. Change values here, never inline. */
:root {
  --ink: #111418;
  --ink-2: #2A3039;
  --ink-muted: #454C57;
  --ink-faint: #5A6472;
  --blue: #1668C7;      /* fills, buttons */
  --blue-text: #1264BE; /* links + small type on white */
  --blue-dark: #0F52A0; /* hover on blue fills */
  --blue-wash: rgba(26, 128, 230, .1);
  --surface: #FFFFFF;
  --tint: #F1F4F9;
  --tint-2: #E4EBF5;
  --ok: #1A6B54;
  --ok-fill: #EEF7F3;
  --warn-text: #8A6716;
  --warn-rule: #C9A227;
  --warn-fill: #FFFDF5;
  --warn-chip: rgba(230, 176, 40, .2);
  --err-text: #A12A1B;
  --err-fill: #FDF3F1;
  --rule: rgba(17, 20, 24, .13);
  --rule-strong: rgba(17, 20, 24, .22);
  --rule-faint: rgba(17, 20, 24, .08);

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif; /* 600/700 — headings, scores, times, points */
  --font-body: Archivo, system-ui, sans-serif;                   /* 400/500/600 */
  --font-mono: ui-monospace, Menlo, monospace;                   /* file names */

  --r-control: 8px;
  --r-card: 12px;
  --r-chip: 999px;

  --hit: 44px;           /* minimum touch target */
  --gutter: 20px;        /* page side padding — 56px at desktop */
  --page-max: 1328px;    /* 1440 minus 2 × 56 */
  --read-max: 720px;     /* content pages */
  --header-h: 64px;
}

@media (min-width: 900px) {
  :root { --gutter: 40px; --header-h: 84px; }
}
@media (min-width: 1200px) {
  :root { --gutter: 56px; }
}