/* ══════════════════════════════════════════════════════════════════════════
   SITE — what the existing public pages need in order to stop transcribing the
   design system.

   Load order: this file, then `tokens.css`, then the page's own <style>.
   It carries only the two things `tokens.css` deliberately does not:

     1. The `@font-face` rules, so the faces every page already *asks* for are
        actually loaded. Before this, all eight public pages declared
        `--serif: "Source Serif 4"` and none of them loaded a font — so every one
        silently fell back to Georgia, and `--sans` was plain Helvetica with no
        Inter anywhere.

     2. Aliases for the token names those pages use that the canonical set
        renamed. Transitional, and marked as such: each one exists so a page can
        be moved onto the shared tokens without rewriting its component CSS in the
        same commit.

   ── Why this file exists at all ───────────────────────────────────────────
   Audited 2026-07-30: eight public pages each declared their own `:root` block of
   15–20 tokens. That is `CLAUDE.md`'s "anything that appears in two places will
   diverge", eight times over, and it had already produced two live defects:

     · `--warn` was `#b4472c` on one page and `#c07c3a` on another, so "warning"
       rendered in two different colours. Those turned out to be two different
       *meanings* wearing one name — caution, and the amber "we could not see" of
       the verdict palette — so they now have two names (see below).
     · `index.html` used `var(--paper)` while declaring `--bg`, so the breach
       chips' background resolved to nothing and was silently dropped.

   `packages/api/src/tokens.test.ts` now fails the build if a public page
   re-declares a token this file or `tokens.css` provides.
   ══════════════════════════════════════════════════════════════════════════ */

/* Self-hosted, subset, woff2. No CDN, no Google Fonts — see fonts/README.md.
   `font-display: swap` so a slow face never blocks the scan form. */
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url("/fonts/source-serif-4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+2190-21BB, U+2212;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+2190-21BB, U+2212;
}

:root {
  /* ── Transitional aliases ───────────────────────────────────────────────
     The canonical names are on the right. These exist so the existing pages
     keep working while their component CSS still says `var(--bg)`; new work
     should use the canonical name. Deleting an alias is safe once nothing
     references it, and `tokens.test.ts` will tell you. */
  --bg:      var(--paper);     /* was #fdfdfc — now the warmer paper, so a black bar has ground */
  --bg-warm: var(--paper-2);
  --danger:        var(--v-found);
  --danger-bright: var(--v-found-bright);

  /* ── Two meanings that shared one name ─────────────────────────────────
     `--warn` is the amber of the verdict palette: *we could not see*, a warning
     rather than a finding. That is how `index.html` and `coverage.html` used it.
     `privacy.html` used the same name for a red-orange caution callout, which is
     a different thing — so caution now has its own name and the divergence is
     gone rather than hidden behind a local override. */
  --warn:      var(--v-blocked);
  --warn-wash: var(--v-blocked-wash);
  --caution:      #b4472c;
  --caution-wash: #fdf2ee;

  /* Amber, as `coverage.html` names it. Same family as `--warn`, darker for
     small text on a wash. */
  --amber:      #8a6320;
  --amber-wash: #fdf6e9;
}