:root {
  /* Colors — Classic Millionaire palette */
  --bg-primary:    #0a0a1a;
  --bg-secondary:  #0d1b3e;
  --bg-card:       #111a3a;
  --bg-card-hover: #1a2550;

  --gold:          #f0b429;
  --gold-light:    #f9d87a;
  --gold-dark:     #b8860b;

  --white:         #ffffff;
  --text-primary:  #e8e8f0;
  --text-muted:    #8892b0;

  --blue-btn:      #1a3a6e;
  --blue-btn-hover:#2251a0;
  --blue-active:   #1e50a2;

  --correct:       #27ae60;
  --incorrect:     #c0392b;
  --safe-haven:    #f39c12;
  --current-rung:  #f0b429;

  --danger:        #e74c3c;
  --success:       #2ecc71;

  /* Typography */
  --font-main:    'Segoe UI', 'Arial', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl:2rem;
  --font-size-3xl:2.5rem;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Borders */
  --border-radius-sm: 4px;
  --border-radius:    8px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  --border-color:     rgba(240, 180, 41, 0.25);

  /* Shadows */
  --shadow-glow:   0 0 20px rgba(240, 180, 41, 0.3);
  --shadow-card:   0 4px 24px rgba(0, 0, 0, 0.6);
  --shadow-btn:    0 2px 8px rgba(0, 0, 0, 0.4);

  /* Transitions */
  --transition:    all 0.25s ease;
  --transition-slow: all 0.5s ease;

  /* Z-indexes */
  --z-modal:   1000;
  --z-overlay: 999;
  --z-toast:   1100;
}