/* =========================================================================
 * The Ink Ledger: colour and type tokens.
 *
 * Vercel's Geist system applied the way a ledger is kept: ink on a near-white
 * sheet, one grey ramp, hairline rules, Geist for words and Geist Mono for
 * figures, sources and state. DESIGN.md holds the full system.
 *
 * WHY THIS FILE EXISTS. These tokens used to sit on the Engine tab's panel
 * (`.tab-panel[data-tab="parameters"]` in style.css), which was correct while
 * that tab was the only surface using them. The public legal pages are the
 * second surface, and they do not load style.css at all, so the set lifted to
 * `:root` here. DESIGN.md names that lift as the first step of each migration.
 *
 * Loaded by `index.html` (before style.css, so the legacy tokens can still
 * override anything they need to) and by both pages under `public/legal/`.
 *
 * Every text colour clears 4.5:1 on the ground in both themes and the scale
 * line, a UI boundary, clears 3:1. Lines are translucent ink rather than fixed
 * greys so those ratios hold on whatever ground a surface uses.
 *
 * FONT COST. Two variable woff2 files, about 70 KB each, self-hosted under
 * vendor/geist (see vendor/README.md). `font-display: swap`, so text renders
 * in the system stack first and never waits on the font.
 * ========================================================================= */

@font-face {
  font-family: "Geist";
  src: url("vendor/geist/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("vendor/geist/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --il-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --il-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --il-ground: #fafafa;
  /* Floating surfaces (the definition popover, the notice card) sit one step above. */
  --il-raised: #ffffff;
  --il-ink: #171717;
  --il-body: #4d4d4d;
  --il-mute: #666666;
  --il-rule: rgba(23, 23, 23, 0.10);
  --il-rule-strong: rgba(23, 23, 23, 0.50);
  --il-link: #0761d1;
  --il-warn: #a1510a;
  --il-alert: #b3261e;
  --il-focus: #0761d1;
  --il-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.10);
}

:root[data-theme="dark"] {
  --il-ground: #0a0a0a;
  --il-raised: #161616;
  --il-ink: #ededed;
  --il-body: #c7c7c7;
  --il-mute: #a3a3a3;
  --il-rule: rgba(237, 237, 237, 0.12);
  --il-rule-strong: rgba(237, 237, 237, 0.50);
  --il-link: #6cb4ff;
  --il-warn: #f5a623;
  --il-alert: #ff8f80;
  --il-focus: #6cb4ff;
  --il-shadow: 0 1px 2px rgba(0, 0, 0, 0.40), 0 10px 28px rgba(0, 0, 0, 0.55);
}