/* ===== LIGHT THEME (default — always applied) ===== */
:root {
  /* Core palette — clean white/light */
  --bg: #ffffff;
  --bg-card: #ffffff;
  --bg-elevated: #f3f4f6;
  --text: #111827;
  --text-muted: #4b5563;
  --text-dim: #6b7280;
  --border: #e5e7eb;

  /* Game accent colors — WCAG AA on white */
  --accent-interpol: #D63E3D;
  --accent-linkedin: #185FA5;
  --accent-office: #E85A24;
  --accent-cult: #7C3AED;
  --accent-dark-pattern: #B45309;
  --accent-ux: #059669;
  --accent-ai: #0E7490;
  --accent-human: #BE185D;
  --accent-startup: #DC2626;
  --accent-pyramid: #7E22CE;
  --accent-news: #1D4ED8;
  --accent-onion: #4D7C0F;
  --accent-philosopher: #4338CA;
  --accent-nft: #C2410C;
  --accent-biohacker: #0F766E;
  --accent-spy: #475569;
  --accent-legal: #B91C1C;
  --accent-ceo: #A16207;

  /* Feedback */
  --correct: #16a34a;
  --incorrect: #dc2626;
  --warning: #d97706;

  /* Sizing */
  --max-width: 1200px;
  --card-radius: 10px;
  --gap: 20px;
  --header-h: 56px;

  /* Timer */
  --timer-green: #16a34a;
  --timer-amber: #d97706;
  --timer-red: #dc2626;

  /* Fonts — full fallback chain */
  --font-heading: 'Bebas Neue', Impact, 'Arial Black', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', 'Cascadia Mono', 'Courier New', monospace;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Transitions */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration: 0.2s;

  /* Shadows — subtle for light theme */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 10px 25px rgba(0,0,0,0.1);
  --shadow-header: 0 1px 3px rgba(0,0,0,0.05);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.4);

  /* Safe area for mobile notch */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
  --bg: #0f0f0f;
  --bg-card: #1a1a1a;
  --bg-elevated: #262626;
  --text: #f5f5f5;
  --text-muted: #a3a3a3;
  --text-dim: #737373;
  --border: #2e2e2e;

  --correct: #22C55E;
  --incorrect: #EF4444;
  --warning: #F59E0B;
  --timer-green: #22C55E;
  --timer-amber: #F59E0B;
  --timer-red: #EF4444;

  /* Brighter accents for dark bg */
  --accent-interpol: #EF5350;
  --accent-ceo: #FACC15;
  --accent-dark-pattern: #FBBF24;
  --accent-spy: #94A3B8;
  --accent-ux: #34D399;
  --accent-ai: #22D3EE;
  --accent-onion: #A3E635;
  --accent-philosopher: #818CF8;

  --shadow-card: 0 1px 4px rgba(0,0,0,0.4);
  --shadow-card-hover: 0 8px 30px rgba(0,0,0,0.5);
  --shadow-header: 0 1px 4px rgba(0,0,0,0.3);
  --focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.5);
}

/* Auto-detect from OS */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f0f0f;
    --bg-card: #1a1a1a;
    --bg-elevated: #262626;
    --text: #f5f5f5;
    --text-muted: #a3a3a3;
    --text-dim: #737373;
    --border: #2e2e2e;
    --correct: #22C55E;
    --incorrect: #EF4444;
    --warning: #F59E0B;
    --timer-green: #22C55E;
    --timer-amber: #F59E0B;
    --timer-red: #EF4444;
    --accent-interpol: #EF5350;
    --accent-ceo: #FACC15;
    --accent-dark-pattern: #FBBF24;
    --accent-spy: #94A3B8;
    --accent-ux: #34D399;
    --accent-ai: #22D3EE;
    --accent-onion: #A3E635;
    --accent-philosopher: #818CF8;
    --shadow-card: 0 1px 4px rgba(0,0,0,0.4);
    --shadow-card-hover: 0 8px 30px rgba(0,0,0,0.5);
    --shadow-header: 0 1px 4px rgba(0,0,0,0.3);
    --focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.5);
  }
}