/* ─── THEME VARIANTS ─── */
[data-theme="dark"] {
  /* Default electric violet theme */
  --canvas: #08080d;
  --canvas-alt: #0c0c14;
  --surface: #12121c;
  --surface-raised: #1a1a28;
  --surface-hover: #222236;
  --primary: #7c3aed;
  --primary-light: #a855f7;
  --primary-bright: #c084fc;
  --primary-glow: rgba(124, 58, 237, 0.4);
  --primary-surface: rgba(124, 58, 237, 0.15);
  --accent: #06b6d4;
  --accent-light: #22d3ee;
  --accent-glow: rgba(6, 182, 212, 0.35);
  --border-subtle: rgba(124, 58, 237, 0.2);
  --border-default: rgba(124, 58, 237, 0.35);
  --mesh-1: rgba(124, 58, 237, 0.4);
  --mesh-2: rgba(6, 182, 212, 0.3);
  --mesh-3: rgba(251, 191, 36, 0.15);
}

[data-theme="midnight"] {
  --canvas: #03030a;
  --canvas-alt: #06060f;
  --surface: #0a0a18;
  --surface-raised: #0f0f22;
  --surface-hover: #161632;
  --primary: #6366f1;
  --primary-light: #818cf8;
  --primary-bright: #a5b4fc;
  --primary-glow: rgba(99, 102, 241, 0.45);
  --primary-surface: rgba(99, 102, 241, 0.18);
  --accent: #ec4899;
  --accent-light: #f472b6;
  --accent-glow: rgba(236, 72, 153, 0.4);
  --border-subtle: rgba(99, 102, 241, 0.22);
  --border-default: rgba(99, 102, 241, 0.38);
  --mesh-1: rgba(99, 102, 241, 0.4);
  --mesh-2: rgba(236, 72, 153, 0.3);
  --mesh-3: rgba(139, 92, 246, 0.15);
}

[data-theme="sunset"] {
  --canvas: #0f0808;
  --canvas-alt: #140c0c;
  --surface: #1e1212;
  --surface-raised: #281818;
  --surface-hover: #362222;
  --primary: #f43f5e;
  --primary-light: #fb7185;
  --primary-bright: #fda4af;
  --primary-glow: rgba(244, 63, 94, 0.45);
  --primary-surface: rgba(244, 63, 94, 0.18);
  --accent: #f59e0b;
  --accent-light: #fbbf24;
  --accent-glow: rgba(245, 158, 11, 0.4);
  --warm: #fb923c;
  --warm-light: #fdba74;
  --border-subtle: rgba(244, 63, 94, 0.22);
  --border-default: rgba(251, 146, 60, 0.38);
  --mesh-1: rgba(244, 63, 94, 0.4);
  --mesh-2: rgba(245, 158, 11, 0.3);
  --mesh-3: rgba(251, 146, 60, 0.15);
}

[data-theme="forest"] {
  --canvas: #060b09;
  --canvas-alt: #091210;
  --surface: #0f1a16;
  --surface-raised: #152420;
  --surface-hover: #1e332e;
  --primary: #10b981;
  --primary-light: #34d399;
  --primary-bright: #6ee7b7;
  --primary-glow: rgba(16, 185, 129, 0.45);
  --primary-surface: rgba(16, 185, 129, 0.18);
  --accent: #06b6d4;
  --accent-light: #22d3ee;
  --accent-glow: rgba(6, 182, 212, 0.4);
  --border-subtle: rgba(16, 185, 129, 0.22);
  --border-default: rgba(20, 184, 166, 0.38);
  --mesh-1: rgba(16, 185, 129, 0.4);
  --mesh-2: rgba(6, 182, 212, 0.3);
  --mesh-3: rgba(52, 211, 153, 0.15);
}

[data-theme="light"] {
  --canvas: #f8f9fc;
  --canvas-alt: #eef0f5;
  --surface: #ffffff;
  --surface-raised: #f4f6fa;
  --surface-hover: #e8ebf2;
  --text-primary: #0f0f18;
  --text-secondary: #2a2a3e;
  --text-muted: #5a5a78;
  --text-subtle: #8a8aa8;
  --border-subtle: rgba(124, 58, 237, 0.12);
  --border-default: rgba(124, 58, 237, 0.22);
  --primary: #7c3aed;
  --primary-light: #a855f7;
  --primary-bright: #c084fc;
  --primary-glow: rgba(124, 58, 237, 0.25);
  --primary-surface: rgba(124, 58, 237, 0.08);
  --accent: #0891b2;
  --accent-light: #06b6d4;
  --accent-glow: rgba(8, 145, 178, 0.25);
  --shadow: rgba(0, 0, 0, 0.08);
  --overlay: rgba(255, 255, 255, 0.92);
  --skeleton: #e8ebf2;
  --mesh-1: rgba(124, 58, 237, 0.2);
  --mesh-2: rgba(8, 145, 178, 0.15);
  --mesh-3: rgba(251, 191, 36, 0.08);
}

[data-theme="light"] .top-nav,
[data-theme="light"] .mobile-tabs {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(1.8);
  border-color: rgba(124, 58, 237, 0.12);
}

[data-theme="light"] .nav-links a:hover,
[data-theme="light"] .section-header h2,
[data-theme="light"] .hero-content h1,
[data-theme="light"] .content-card .info h3 {
  color: #0f0f18;
}

[data-theme="light"] .hero-play-btn {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35);
}

[data-theme="light"] .content-card {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(124, 58, 237, 0.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .content-card:hover {
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.2);
}