/* =========================================================================
 * The Ink Ledger's design tokens: colour, type, radius and spacing.
 *
 * 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; these values
 * implement its frontmatter, so change both together. src/react/tailwind.css
 * maps every token into Tailwind's theme.
 *
 * Loaded by index.html and the legal pages. This file sits in no cascade
 * layer and the legacy stylesheets do, so a legacy :root rule cannot
 * override a token.
 *
 * 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.1);
  --il-rule-strong: rgba(23, 23, 23, 0.5);
  --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.1);

  --il-radius-sm: 4px;
  --il-radius-md: 8px;
  --il-radius-pill: 999px;

  --il-space-xs: 0.35rem;
  --il-space-sm: 0.6rem;
  --il-space-md: 1rem;
  --il-space-lg: 1.25rem;
  --il-space-xl: 1.5rem;
  --il-space-2xl: 2.25rem;

  --il-text-display: 1.75rem;
  --il-text-display-leading: 1.15;
  --il-text-display-tracking: -0.02em;
  --il-text-display-weight: 600;
  --il-text-headline: 1.25rem;
  --il-text-headline-tracking: -0.015em;
  --il-text-headline-weight: 600;
  --il-text-title: 1rem;
  --il-text-title-leading: 1.3;
  --il-text-title-weight: 600;
  --il-text-figure: 1rem;
  --il-text-figure-leading: 1.1;
  --il-text-figure-tracking: -0.02em;
  --il-text-figure-weight: 500;
  --il-text-body: 0.875rem;
  --il-text-body-leading: 1.55;
  --il-text-body-weight: 400;
  --il-text-label: 0.75rem;
  --il-text-label-weight: 400;
  --il-text-data: 0.75rem;
  --il-text-data-leading: 1.5;
  --il-text-data-weight: 500;
}

: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.5);
  --il-link: #6cb4ff;
  --il-warn: #f5a623;
  --il-alert: #ff8f80;
  --il-focus: #6cb4ff;
  --il-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.55);
}