/* Yaronski design tokens — generated from tokens.json */
:root, [data-theme="dark"] {
  --ground: #111311;
  --ground-raised: #1a1d1a;
  --ground-sunken: #0b0d0b;
  --ink: #ecebe4;
  --ink-muted: #9c9f96;
  --ink-faint: #6f736b;
  --line: #2c302b;
  --signal: #ff5b24;
  --on-signal: #111311;
  --film: #f2c14e;
  --gaming: #5fd3c6;
  --advertising: #ef8fb9;
  --scrim: rgba(11, 13, 11, 0.72);
}

[data-theme="light"] {
  --ground: #f3f1ea;
  --ground-raised: #fbfaf6;
  --ground-sunken: #e8e5db;
  --ink: #151715;
  --ink-muted: #5a5d56;
  --ink-faint: #6f736b;
  --line: #d6d2c6;
  --signal: #b83a0c;
  --on-signal: #ffffff;
  --film: #7d5600;
  --gaming: #096e65;
  --advertising: #a3335f;
  --scrim: rgba(21, 23, 21, 0.56);
}

@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --ground: #f3f1ea;
  --ground-raised: #fbfaf6;
  --ground-sunken: #e8e5db;
  --ink: #151715;
  --ink-muted: #5a5d56;
  --ink-faint: #6f736b;
  --line: #d6d2c6;
  --signal: #b83a0c;
  --on-signal: #ffffff;
  --film: #7d5600;
  --gaming: #096e65;
  --advertising: #a3335f;
  --scrim: rgba(21, 23, 21, 0.56);
} }

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 160px;
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-pill: 999px;
  --container-max: 1440px;
  --measure-body: 68ch;
  --grid-columns: 12;
  --hairline: 1px;
  --font-display: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.display-xl { font-family: var(--font-display); font-size: 120px; line-height: 0.92; font-weight: 400; letter-spacing: -0.02em; }

.display-l { font-family: var(--font-display); font-size: 80px; line-height: 0.95; font-weight: 400; letter-spacing: -0.015em; }

.display-m { font-family: var(--font-display); font-size: 48px; line-height: 1; font-weight: 400; letter-spacing: -0.01em; }

.heading { font-family: var(--font-sans); font-size: 28px; line-height: 34px; font-weight: 500; letter-spacing: -0.01em; }

.title { font-family: var(--font-sans); font-size: 20px; line-height: 26px; font-weight: 500; }

.body-l { font-family: var(--font-sans); font-size: 20px; line-height: 30px; font-weight: 400; }

.body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }

.small { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }

.label { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; }

.meta { font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 400; }