:root {
  --font-display: 'VT323', 'Courier New', monospace;
  --font-body: 'Space Grotesk', 'Segoe UI', sans-serif;

  --color-bg: oklch(11% 0.02 262);
  --color-bg-raised: oklch(16% 0.03 262);
  --color-bg-inset: oklch(8% 0.02 262);
  --color-bezel: oklch(20% 0.02 262);
  --color-bezel-edge: oklch(28% 0.02 262);

  --color-text: oklch(93% 0.02 90);
  --color-text-dim: oklch(62% 0.03 262);
  --color-text-faint: oklch(42% 0.02 262);

  --color-amber: oklch(74% 0.18 55);
  --color-amber-dim: oklch(45% 0.1 55);
  --color-cyan: oklch(76% 0.14 195);
  --color-live: oklch(60% 0.21 25);

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: clamp(1rem, 0.94rem + 0.3vw, 1.1rem);
  --text-lg: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --text-display: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  --text-osd: clamp(3rem, 2rem + 4vw, 6rem);

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.875rem;
  --space-md: 1.5rem;
  --space-lg: clamp(1.5rem, 1rem + 2vw, 3rem);
  --space-xl: clamp(2.5rem, 1.5rem + 4vw, 5rem);

  --radius-set: 22px;
  --radius-screen: 10px;
  --radius-tile: 8px;

  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 900ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-set: 0 40px 80px -20px oklch(0% 0 0 / 0.6), 0 0 0 1px oklch(0% 0 0 / 0.4);
  --glow-amber: 0 0 18px oklch(74% 0.18 55 / 0.55);
  --glow-cyan: 0 0 14px oklch(76% 0.14 195 / 0.5);
}