:root {
  /* Paper tones (warm, magazine-stock) */
  --paper: #f3e6cc;
  --paper-warm: #ead7b2;
  --paper-dark: #d9c194;

  /* Wood (cabinet) */
  --wood-dark: #2c1810;
  --wood: #4a2c1a;
  --wood-mid: #6b4423;

  /* Brass / amber accents */
  --brass: #b8862a;
  --brass-light: #d9a847;
  --amber: #e89a3c;
  --amber-glow: #ffb84d;

  /* Red — single live/on-air accent */
  --red: #b8312a;
  --red-glow: #e84838;

  /* Ink (text on paper) */
  --ink: #1a1410;
  --ink-soft: #3d2e1f;
  --cream-shadow: rgba(74, 44, 26, 0.15);

  /* Compatibility shims used in older code paths */
  --bg: var(--paper);
  --bg-alt: var(--paper-warm);
  --bg-soft: rgba(74, 44, 26, 0.06);
  --bg-card: rgba(255, 255, 255, 0.4);
  --rule: rgba(74, 44, 26, 0.25);
  --rule-strong: rgba(74, 44, 26, 0.45);
  --accent: var(--red);
  --accent-2: var(--brass);
  --accent-soft: rgba(184, 49, 42, 0.08);
  --accent-2-soft: rgba(184, 134, 42, 0.08);

  /* Fonts (loaded from Google Fonts in base.html) */
  --font-display: 'Bungee Inline', 'Impact', sans-serif;
  --font-serif: 'Source Serif 4', Georgia, serif;
  --font-mono: 'VT323', 'Courier New', monospace;
  --font-mono-tight: 'Inconsolata', ui-monospace, monospace;
  --font-sans: var(--font-serif);

  --gradient-text: linear-gradient(180deg, var(--red-glow), var(--red));
  --gradient-glow: radial-gradient(ellipse at 50% 50%, rgba(232, 154, 60, 0.15) 0, transparent 70%);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --container: 1200px;
  --header-h: 80px;
  --player-h: 92px;
  --player-h-mobile: 76px;

  --radius-1: 2px;
  --radius-2: 4px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}