:root {
  /* Base palette */
  --color-bg: #08070e;
  --color-bg-alt: #0d0c18;
  --color-surface: rgba(255, 255, 255, 0.04);
  --color-surface-hover: rgba(255, 255, 255, 0.07);
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-subtle: rgba(255, 255, 255, 0.04);

  /* Text */
  --color-text-primary: rgba(255, 255, 255, 0.92);
  --color-text-secondary: rgba(255, 255, 255, 0.5);
  --color-text-muted: rgba(255, 255, 255, 0.28);

  /* Station accent — updated via JS */
  --color-accent: #7c6fcd;
  --color-accent-secondary: #c9a96e;
  --color-accent-glow: rgba(124, 111, 205, 0.2);

  /* Typography */
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Layout */
  --max-width: 680px;
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 20px;
  --border-radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 600ms ease;
  --transition-ambient: 1800ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index layers */
  --z-bg: 0;
  --z-orbs: 1;
  --z-content: 10;
  --z-controls: 20;
  --z-overlay: 100;
}