/* Tokens */
:root {
  --eigengrau: #16161d;
  --cosmic-latte: #fff8e7;

  --color-ink: var(--eigengrau);
  --color-paper: var(--cosmic-latte);
  --color-panel: #fffdf4;
  --color-muted: #5f5d66;
  --color-border: #ded3ba;
  --color-soft: #f5ecd8;
  --color-page-edge: #f8f1e1;
  --color-topbar: rgba(255, 248, 231, 0.93);
  --color-highlight: #f6dfb8;
  --color-highlight-border: #e3c789;
  --color-accent: #268bd2;
  --color-accent-dark: #1f6f9f;
  --color-on-accent: #fffdf4;
  --color-logo-border: rgba(22, 22, 29, 0.18);
  --color-warning: #b58900;
  --color-decision: #6f7f00;
  --color-youtube: #ff0033;
  --color-youtube-dark: #cc0029;

  --font-body: Inter, "Noto Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ui: var(--font-body);
  --font-reading: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Noto Sans", system-ui, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", "Noto Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-body: 1rem;
  --line-reading: 1.5;
  --line-ui: 1.3;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-pill: 999px;
  --shadow-soft: 0 14px 35px rgba(22, 22, 29, 0.08);

  --content-width: 980px;
  --topbar-height: 66px;

  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --paper: var(--color-paper);
  --panel: var(--color-panel);
  --line: var(--color-border);
  --soft: var(--color-soft);
  --page-edge: var(--color-page-edge);
  --accent: var(--color-accent);
  --accent-dark: var(--color-accent-dark);
  --mark: var(--color-highlight);
  --clay: var(--color-warning);
  --green: var(--color-decision);
  --shadow: var(--shadow-soft);
}