/* Design-Tokens. Schicht 1: Basiswerte (Rohfarben, Skalen). Schicht 2: semantische Rollen. Bauteile benutzen nur Schicht 2. */
:root {
  /* Schicht 1: Basis */
  --base-night: #1a1033;
  --base-ink: #0b0714;
  --base-paper: #fff7e0;
  --base-post: #ffcc00;
  --base-post-dim: #b8902a;
  --base-rust: #b5532f;
  --base-alert: #ff3b30;
  --base-ok: #3bff7a;
  --base-space-1: 4px;
  --base-space-2: 8px;
  --base-space-3: 12px;
  --base-space-4: 20px;
  --base-space-5: 32px;
  --base-radius-s: 6px;
  --base-radius-m: 12px;
  --base-size-s: 0.8125rem;
  --base-size-m: 1rem;
  --base-size-l: 1.5rem;
  --base-size-xl: clamp(2rem, 5.2vw, 3.2rem);
  --base-font-ui: 'B612', system-ui, sans-serif;
  --base-font-mono: 'B612 Mono', ui-monospace, monospace;
  --base-font-hand: 'La Belle Aurore', cursive;

  /* Schicht 2: Rollen */
  --color-bg: var(--base-night);
  --color-text: var(--base-paper);
  --color-text-dim: color-mix(in srgb, var(--base-paper) 70%, transparent);
  --color-accent: var(--base-post);
  --color-accent-dim: var(--base-post-dim);
  --color-on-accent: var(--base-ink);
  --color-danger: var(--base-alert);
  --color-glow: color-mix(in srgb, var(--base-alert) 78%, transparent);
  --color-glow-rear: color-mix(in srgb, var(--base-alert) 70%, transparent);
  --color-off: color-mix(in srgb, var(--base-paper) 28%, var(--base-night));
  --color-good: var(--base-ok);
  --color-hud-surface: color-mix(in srgb, var(--base-ink) 72%, transparent);
  --color-hud-line: color-mix(in srgb, var(--base-post) 60%, transparent);
  --color-screen: color-mix(in srgb, var(--base-night) 88%, transparent);
  --space-xs: var(--base-space-1);
  --space-s: var(--base-space-2);
  --space-m: var(--base-space-3);
  --space-l: var(--base-space-4);
  --space-xl: var(--base-space-5);
  --radius-s: var(--base-radius-s);
  --radius-m: var(--base-radius-m);
  --font-ui: var(--base-font-ui);
  --font-mono: var(--base-font-mono);
  --font-hand: var(--base-font-hand);
  --size-s: var(--base-size-s);
  --size-m: var(--base-size-m);
  --size-l: var(--base-size-l);
  --size-xl: var(--base-size-xl);
  --z-view: 0;
  --z-fx: 10;
  --z-hud: 20;
  --z-screen: 30;
  --z-lead: 40;
  --focus-ring: 3px solid var(--color-accent);
}