/* Non-colour tokens. Colour lives in palette.ts -> themes.css. */
:root {
  /* Type families */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-ui: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-figures: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale: 1.2 ratio, body never below 16px, display sizes fluid between 320px and 1280px viewports */
  --text-xs: 0.8125rem; /* 13px: only for non-essential metadata, never body copy */
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.2rem;
  --text-xl: clamp(1.3rem, 1.15rem + 0.6vw, 1.44rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.728rem);
  --text-3xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.488rem);
  --leading-tight: 1.2;
  --leading-body: 1.5;
  --tracking-stamp: 0.12em;
  --tracking-caps: 0.06em;

  /* Space: 4px base; --line is the ledger row rhythm */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --line: 1.5rem;

  /* Shape: paper has corners */
  --radius: 2px;
  --rule: 1px;
  --rule-thick: 2px;
  --target-min: 2.75rem; /* 44px comfortable target; WCAG 2.5.8 floor is 24px */
  --target-compact: 2rem;

  /* Elevation is an offset sheet, not a glow */
  --sheet-shadow: 3px 3px 0 0 var(--rule-hairline);
  --overlay-shadow: 6px 6px 0 0 color-mix(in srgb, var(--text-primary) 18%, transparent);

  /* Focus: a 2px ring plus a halo band so it reads on any surface (WCAG 2.4.7, 2.4.11) */
  --focus-width: 2px;
  --focus-offset: 2px;
  --focus-shadow: 0 0 0 var(--focus-offset) var(--focus-halo), 0 0 0 calc(var(--focus-offset) + var(--focus-width)) var(--focus-ring);

  /* Layout */
  --measure: 68ch;
  --page-max: 80rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --margin-col: 18rem; /* marginalia column on wide screens */

  /* Motion: only the stamp press and the sheet slide move, and only when motion is welcome */
  --ease-press: cubic-bezier(0.2, 0.9, 0.3, 1.2);
  --dur-press: 140ms;
  --dur-slide: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 0ms;
    --dur-slide: 0ms;
  }
}