/* TOKENS: every length, colour, duration and font the site uses. No other
   stylesheet writes a raw value (tools/audit-css.mjs enforces it), so the
   whole look is tuned here.

   The system: a calm, light app. Sky grounds, white cards, one ink. The
   Chicago flag survives as its blue (actions, the stripe, the chosen state)
   and its red six-pointed stars (the mark, "best fit"). League Gothic sets
   the questions and the figures; Geist sets everything that is read. */

@font-face {
  font-family: 'League Gothic';
  src: url('../fonts/league-gothic-latin.woff2') format('woff2');
  font-weight: 400; font-stretch: 75% 100%; 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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-latin.woff2') format('woff2');
  font-weight: 100 900; 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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched fallbacks, so the swap moves nothing. */
@font-face { font-family: 'Geist Fallback'; src: local('Arial'), local('ArialMT'), local('Liberation Sans'); size-adjust: 105%; ascent-override: 95.7%; descent-override: 28.1%; line-gap-override: 0%; }
@font-face { font-family: 'League Gothic Fallback'; src: local('Arial Narrow'), local('ArialNarrow'), local('Liberation Sans Narrow'); size-adjust: 82%; ascent-override: 110%; descent-override: 26%; line-gap-override: 0%; }

:root {
  /* --- colour -------------------------------------------------------- */
  --white:      #FFFFFF;
  --sky-50:     #F4F8FB;   /* the plain page */
  --sky-100:    #E8F5FC;   /* the splash and results ground */
  --sky-200:    #D6EEFA;
  --chip:       #EEF3F7;   /* a neutral badge */
  --line:       #DCE7EF;   /* hairlines between things */
  --line-strong:#768C9F;   /* a control's edge: 3:1 on white and sky */

  --ink:        #0B1C2C;   /* 16.9:1 on white */
  --ink-2:      #44576A;   /* secondary text */
  --ink-3:      #56697B;   /* labels; 4.9:1 on the sky ground */

  --blue:       #41B6E6;   /* the flag: fields, stripes, the primary action */
  --blue-deep:  #0A6A96;   /* text and marks in blue: 5.6:1 on sky */
  --blue-ink:   #052D43;   /* text on the flag blue: 7.4:1 */
  --blue-soft:  #CFEAF8;
  --red:        #E4002B;   /* the stars, and nothing else */
  --caution:    #B0102A;   /* cautions: 6.4:1 on white */
  --caution-bg: #FCEEF0;   /* a caution line under the pointer or open */
  --green:      #1B6334;   /* randomized trial */
  --green-bg:   #E1F3E6;
  --green-2:    #25613D;   /* independent study */
  --green-2-bg: #EAF4EE;

  --focus:      var(--blue-deep);
  --scrim:      rgba(11, 28, 44, .42);

  /* --- type ---------------------------------------------------------- */
  --sans:    'Geist', 'Geist Fallback', system-ui, sans-serif;
  --display: 'League Gothic', 'League Gothic Fallback', 'Arial Narrow', sans-serif;

  --t-xs:   0.875rem;    /* 14: labels, captions. The floor. */
  --t-sm:   0.9375rem;   /* 15: secondary lines */
  --t-md:   1rem;        /* 16: controls, card body */
  --t-base: 1.0625rem;   /* 17: reading */
  --t-lg:   1.25rem;     /* 20: a section heading in a panel */
  --t-xl:   1.4375rem;   /* 23: a card's name */
  --t-2xl:  2rem;        /* 32: a panel's name */
  --t-brand: 2rem;       /* the wordmark */
  --t-fig:   2.375rem;   /* 38: a card's figures */
  --t-fig-lg: 3.25rem;   /* 52: the trust strip */
  --t-hero:  clamp(3.5rem, 7.2vw + 0.6rem, 7rem);   /* the splash question */
  --t-view:  clamp(3rem, 5.4vw + 0.9rem, 5.5rem);   /* a view's headline */

  --w-read:  400;
  --w-label: 560;
  --w-strong: 650;
  --w-heavy: 720;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-read:   1.55;
  --lh-display: .92;     /* single-line figures */
  --lh-heading: 1.04;    /* wrapping display headings: League Gothic's ascender + descender is .935 em */
  --tr-display: .004em;
  --tr-tight:  -0.02em;
  --tr-name:   -0.015em;

  --measure:   36em;    /* a paragraph */
  --measure-q: 13ch;    /* the splash question: three lines */
  --measure-note: 28ch; /* a trust-strip caption */
  --underline:  0.25em; /* link underline offset */
  --underline-nav: 0.45em;
  --col-label: 10rem;   /* a definition list's term column */
  --screen:    100vh;

  /* --- space --------------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --s-14: 56px; --s-16: 64px; --s-20: 80px;

  --page:      1040px;    /* the content column */
  --page-wide: 1240px;    /* the header */
  --gutter:    var(--s-7);
  --nav-h:     84px;

  /* --- shape --------------------------------------------------------- */
  --r-pill: 999px;
  --r-card: 24px;
  --r-tile: 20px;
  --r-md:   14px;
  --r-sm:   10px;
  --hair:   1px;
  --ring:   3px;          /* the focus ring */
  --ring-offset: 3px;
  --keel:   4px;          /* the flag's stripe, drawn as a rule */
  --chosen: 2px;          /* the best-fit card's edge */

  --shadow-1: 0 1px 2px rgba(11, 28, 44, .06);
  --shadow-2: 0 1px 2px rgba(11, 28, 44, .05), 0 16px 40px -14px rgba(11, 28, 44, .18);
  --shadow-3: 0 2px 6px rgba(11, 28, 44, .06), 0 30px 80px -20px rgba(11, 28, 44, .30);
  --glow:     radial-gradient(1100px 520px at 50% -8%, var(--white) 0%, transparent 62%);

  /* --- controls ------------------------------------------------------ */
  --ctl-h:    48px;       /* buttons */
  --ctl-h-sm: 40px;       /* pills */
  --tile-min: 148px;
  --tile-min-sm: 124px;
  --tile-col: 9rem;       /* a tile column on a phone; rem, so it grows with text */
  --ico:      30px;
  --ico-sm:   20px;
  --ico-xs:   18px;
  --star:     12px;
  --dot:      7px;
  --chev:     7px;
  --chev-w:   2px;
  --badge-h:  28px;

  /* --- the caution card ---------------------------------------------- */
  --tip-w:     23rem;     /* rem, so it widens with larger text */
  --tip-gap:   10px;      /* between the line and the card */
  --tip-arrow: 12px;
  --tip-in:    140ms;     /* hover intent before it opens */
  --tip-out:   220ms;     /* grace to move the pointer into it */
  --tip-from:  .96;       /* it grows from the arrow */

  /* --- panels -------------------------------------------------------- */
  --panel-w:  600px;      /* the detail and saved panels on a wide screen */

  /* --- motion -------------------------------------------------------- */
  --dur-fast: 150ms;
  --dur:      250ms;
  --dur-slow: 480ms;
  --stagger:  60ms;
  --rise:     18px;
  --lift:     -4px;
  --ease:     cubic-bezier(.2, .7, .2, 1);
  --ease-in:  cubic-bezier(.4, 0, 1, 1);
}

@media (max-width: 900px) {
  :root { --gutter: var(--s-5); --nav-h: 72px; --t-brand: 1.75rem; }
}