/* Erik Rask — design tokens. Mirrors the Claude Design system (tokens/*.css) verbatim. */

:root {
  /* colors.css — base, sampled from 1970s exploitation one-sheets and degraded VHS chroma */
  --ink: #12100F; --ink-lift: #1E1A18; --stock: #CFC3AC; --stock-dim: #8C8371;
  --oxide: #8E1B14; --flare: #E03323; --bleed-m: #C4287A; --bleed-c: #1F7A8C; --phosphor: #6FE36F;

  /* semantic — surfaces */
  --surface-ground: var(--ink); --surface-raised: var(--ink-lift); --surface-field: var(--oxide);
  --surface-inverse: var(--stock);

  /* semantic — text */
  --text-body: var(--stock); --text-meta: var(--stock-dim); --text-accent: var(--flare);
  --text-machine: var(--phosphor); --text-inverse: var(--ink);

  /* semantic — lines */
  --line-hairline: color-mix(in srgb, var(--stock-dim) 30%, transparent);
  --line-structural: var(--oxide); --line-accent: var(--flare);

  /* semantic — interaction */
  --focus-ring: var(--flare); --state-hover-fill: var(--flare); --state-hover-text: var(--ink);

  /* aberration layer only — never fills, text, or backgrounds */
  --ghost-m: var(--bleed-m); --ghost-c: var(--bleed-c); --ghost-opacity: 0.6;

  /* texture */
  --grain-opacity: 0.11;

  /* fonts.css */
  --font-display: "Anton", "League Gothic", "Oswald", Impact, sans-serif;
  --font-body: "Newsreader", "Crimson Pro", "Source Serif 4", Georgia, serif;
  --font-utility: "Space Mono", "JetBrains Mono", "Courier New", monospace;
  --font-mono: var(--font-utility);

  /* typography.css */
  --t-hero: clamp(44px, 11vw, 160px); --t-hero-lh: 0.86;
  --t-h1: clamp(30px, 5vw, 56px); --t-h1-lh: 0.9;
  --t-h2: clamp(24px, 3vw, 34px); --t-h2-lh: 0.95;
  --t-lead: 21px; --t-lead-lh: 1.45;
  --t-body: 17px; --t-body-lh: 1.55;
  --t-meta: 12px; --t-meta-lh: 1.3;
  --track-display: -0.02em; --track-utility: 0.12em;
  --measure: 62ch;

  /* spacing.css */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-40: 160px;
  --edge: clamp(24px, 4vw, 80px);
  --gutter: 24px;
  --section-loose: clamp(64px, 10vw, 160px);
  --section-tight: 24px;

  /* borders.css — no shadow tokens exist by design */
  --radius: 0;
  --border-hairline: 1px solid var(--line-hairline);
  --border-structural: 3px solid var(--oxide);
  --border-accent: 2px solid var(--flare);
  --band-h: 14px; --band-divider-h: 3px; --band-offset: 6px;

  /* motion.css — splice, don't dissolve */
  --ease-cut: steps(2, end);
  --dur-state: 120ms; --dur-sweep: 400ms;
  --transition-state: var(--dur-state) var(--ease-cut);
  --jitter: 2px;
  --grain-fps: 7;
}