/* ============================================================
   tokens.css — the contract. Structure rebuilt 2026-08-05 for
   THE RECORD: a single paper/ink/verm palette with a light/dark
   toggle (html.dark), replacing the old dual SYSTEM(dark)/READING
   (paper) surface split. No fixed chrome — the masthead scrolls
   with the page, broadsheet-style, so there's no --nav-h offset.
   Layer order: tokens < base < chrome < page.
   ============================================================ */
@layer tokens, base, chrome, page;

/* — Self-hosted fonts — latin subset, no CDN request at runtime
   (Constraint 2 / D2: no external dependency; the medium is the proof).
   Archivo and Spline Sans Mono are each one variable file covering their
   full used weight range; Newsreader ships one variable file per style
   (roman, italic), each covering its weight range. unicode-range mirrors
   Google's own latin subset so out-of-range glyphs fall back cleanly to
   a system face. */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url(fonts/archivo-latin.woff2) format('woff2');
  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: 'Newsreader'; font-style: normal; font-weight: 300 600;
  font-display: swap; src: url(fonts/newsreader-latin.woff2) format('woff2');
  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: 'Newsreader'; font-style: italic; font-weight: 300 600;
  font-display: swap; src: url(fonts/newsreader-italic-latin.woff2) format('woff2');
  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: 'Spline Sans Mono'; font-style: normal; font-weight: 400 500;
  font-display: swap; src: url(fonts/spline-sans-mono-latin.woff2) format('woff2');
  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;
}

@layer tokens {
  :root {
    /* — Typefaces — role names stay from the old system; the families
       filling each role swapped with the redesign. --fd (display) was
       serif, is now the grotesk; --fs (body/reading) was sans, is now
       serif — the redesign reads closer to a broadsheet than a manual. */
    --fd: 'Archivo', 'Helvetica Neue', Arial, sans-serif;         /* display: headlines, numerals */
    --fs: 'Newsreader', Georgia, serif;                            /* body / reading */
    --fm: 'Spline Sans Mono', ui-monospace, 'SFMono-Regular', monospace; /* labels / chrome / data */

    /* — Fluid type scale — re-anchored 2026-08-05 to The Record's actual
       component sizes (a hand-set broadsheet ramp, not a strict modular
       scale — the canvas's own sizes don't sit on one ratio). Named steps
       kept for continuity with the rest of the token contract. */
    --t-display: clamp(3.6rem, 1.6rem + 8vw, 9rem);      /* article h1 */
    --t-num:     clamp(2.6rem, 1.3rem + 4.5vw, 5.5rem);  /* big numerals, next-case link */
    --t-sub:     clamp(2.2rem, 1.2rem + 3.2vw, 4rem);    /* infobox figures, interlude line 2 */
    --t-h2:      clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem);  /* section heading */
    --t-mid:     clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem);  /* standfirst, pull-quote */
    --t-h3:      1.35rem;                                 /* subhead */
    --t-deck:    1.35rem;                                 /* lede opening paragraph */
    --t-body:    1.25rem;                                 /* body copy (20px) */
    --t-label:   0.85rem;                                 /* mono labels */
    --t-micro:   0.8rem;                                  /* captions, folio, smallest mono */

    /* — Spacing (rem, 8px rhythm) — unchanged from the prior system */
    --sp-2xs: 0.5rem;
    --sp-xs:  0.75rem;
    --sp-s:   1rem;
    --sp-m:   1.5rem;
    --sp-l:   2rem;
    --sp-xl:  3rem;
    --sp-2xl: 4.5rem;
    --sp-3xl: 7rem;
    /* section rhythm now scales with viewport HEIGHT, matching how the
       canvas actually paces .sec/.a-head/.lede vertically */
    --sp-section: clamp(3rem, 1.6rem + 8vh, 6rem);
    --measure: 66ch;   /* reading-column cap — matches .read */
    --edge: clamp(1.2rem, 4vw, 3.5rem); /* shared page gutter */

    /* — Container scale — */
    --w-page: 88rem;   /* the one .wrap width, home and case pages alike */

    /* — Radii (sharp by default; pill held in reserve for future tags) — */
    --r-0:  0;
    --r-sm: 0.1875rem;
    --r-pill: 100px;

    /* — Palette — light (paper) is the default; html.dark overrides below.
       Contrast checked: verm on paper 4.70:1, ink on paper 16.29:1,
       mut on paper 5.06:1 — all clear WCAG AA without a separate
       small-text accent variant. */
    --paper:    #F5F0E6;
    --ink:      #161310;
    --ink-soft: #3D3830;
    --mut:      #6E6555;
    --verm:     #C33A14;
    --rule:      rgba(22, 19, 16, 0.28);
    --rule-soft: rgba(22, 19, 16, 0.14);

    /* hero point-field colors — kept separate from --verm so the field
       doesn't borrow the running-text accent verbatim */
    --field-dot: #4A4234;
    --field-hot: #C33A14;
  }

  html.dark {
    --paper:    #171412;
    --ink:      #EFE9DC;
    --ink-soft: #CFC7B6;
    --mut:      #93897A;
    --verm:     #E8501F;
    --rule:      rgba(239, 233, 220, 0.3);
    --rule-soft: rgba(239, 233, 220, 0.15);
    --field-dot: #C7BCA6;
    --field-hot: #E8501F;
  }
}

@layer base {
  * { margin: 0; box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--fs);
    font-size: var(--t-body);
    font-weight: 350;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color .4s ease, color .4s ease;
  }
  a { color: inherit; text-decoration: none; }
  a:hover { color: var(--verm); }
  ::selection { background: var(--verm); color: var(--paper); }

  /* — Focus (keyboard): one deliberate, on-brand ring on every interactive
     element. --verm is palette-aware, so the ring adapts light↔dark. */
  :focus-visible { outline: 2px solid var(--verm); outline-offset: 3px; }
  :focus:not(:focus-visible) { outline: none; }

  /* — The motion kill switch. Layered !important: base outranks chrome/page. — */
  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
  }
}