/* ========== DARK NEON ========== */
[data-theme="dark-neon"] {
  --color-bg-primary: #0a0a1a;
  --color-bg-secondary: #12122a;
  --color-bg-card: rgba(20, 20, 50, 0.8);
  --color-bg-card-hover: rgba(30, 30, 70, 0.9);

  --color-text-primary: #e0e0ff;
  --color-text-secondary: #8888bb;
  --color-text-accent: #00ffaa;

  --color-accent: #00ffaa;
  --color-accent-rgb: 0, 255, 170;
  --color-accent-secondary: #6644ff;
  --color-danger: #ff4466;
  --color-warning: #ffaa00;
  --color-success: #00ffaa;

  --color-gauge-track: #1a1a3a;
  --color-gauge-flat: #ff4466;
  --color-gauge-sharp: #ffaa00;
  --color-gauge-in-tune: #00ffaa;
  --color-gauge-needle: #ffffff;

  --glow-accent: 0 0 20px rgba(0, 255, 170, 0.3);
  --glow-strong: 0 0 40px rgba(0, 255, 170, 0.5);
  --glow-accent-secondary: 0 0 20px rgba(102, 68, 255, 0.3);

  --color-border: rgba(100, 68, 255, 0.3);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.5);

  --font-primary: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 9999px;

  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;

  --color-string-active: #00ffaa;
  --color-string-inactive: #333355;
  --color-string-bg: rgba(0, 255, 170, 0.08);

  --color-btn-bg: rgba(0, 255, 170, 0.15);
  --color-btn-bg-hover: rgba(0, 255, 170, 0.25);
  --color-btn-active-bg: #00ffaa;
  --color-btn-active-text: #0a0a1a;

  --color-select-bg: rgba(20, 20, 50, 0.9);
  --color-select-border: rgba(100, 68, 255, 0.4);

  --body-bg-extra: none;
  --card-backdrop: none;
  --card-border-style: 1px solid var(--color-border);

  --color-strobe-light: rgba(0, 255, 170, 0.35);
  --color-strobe-dark: rgba(10, 10, 26, 0.9);
}

/* ========== MINIMAL / CLEAN ========== */
[data-theme="minimal"] {
  --color-bg-primary: #f5f5f7;
  --color-bg-secondary: #ffffff;
  --color-bg-card: #ffffff;
  --color-bg-card-hover: #f0f0f2;

  --color-text-primary: #1d1d1f;
  --color-text-secondary: #6e6e73;
  --color-text-accent: #0066cc;

  --color-accent: #0066cc;
  --color-accent-rgb: 0, 102, 204;
  --color-accent-secondary: #5856d6;
  --color-danger: #ff3b30;
  --color-warning: #ff9500;
  --color-success: #34c759;

  --color-gauge-track: #e5e5ea;
  --color-gauge-flat: #ff3b30;
  --color-gauge-sharp: #ff9500;
  --color-gauge-in-tune: #34c759;
  --color-gauge-needle: #1d1d1f;

  --glow-accent: none;
  --glow-strong: none;
  --glow-accent-secondary: none;

  --color-border: rgba(0, 0, 0, 0.08);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);

  --font-primary: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;

  --color-string-active: #0066cc;
  --color-string-inactive: #c7c7cc;
  --color-string-bg: rgba(0, 102, 204, 0.06);

  --color-btn-bg: rgba(0, 102, 204, 0.08);
  --color-btn-bg-hover: rgba(0, 102, 204, 0.14);
  --color-btn-active-bg: #0066cc;
  --color-btn-active-text: #ffffff;

  --color-select-bg: #ffffff;
  --color-select-border: rgba(0, 0, 0, 0.12);

  --body-bg-extra: none;
  --card-backdrop: none;
  --card-border-style: 1px solid var(--color-border);

  --color-strobe-light: rgba(0, 102, 204, 0.25);
  --color-strobe-dark: rgba(220, 220, 225, 0.9);
}

/* ========== RETRO / SKEUOMORPHIC ========== */
[data-theme="retro"] {
  --color-bg-primary: #2a2a2a;
  --color-bg-secondary: #333333;
  --color-bg-card: #3a3a3a;
  --color-bg-card-hover: #444444;

  --color-text-primary: #e8d5b5;
  --color-text-secondary: #a89070;
  --color-text-accent: #ffbb44;

  --color-accent: #ffbb44;
  --color-accent-rgb: 255, 187, 68;
  --color-accent-secondary: #ff7744;
  --color-danger: #cc3333;
  --color-warning: #ffbb44;
  --color-success: #66bb44;

  --color-gauge-track: #4a4a4a;
  --color-gauge-flat: #cc3333;
  --color-gauge-sharp: #ff7744;
  --color-gauge-in-tune: #66bb44;
  --color-gauge-needle: #ffddaa;

  --glow-accent: 0 0 12px rgba(255, 187, 68, 0.2);
  --glow-strong: 0 0 24px rgba(255, 187, 68, 0.35);
  --glow-accent-secondary: 0 0 12px rgba(255, 119, 68, 0.2);

  --color-border: rgba(255, 255, 255, 0.08);
  --shadow-card: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 12px rgba(0,0,0,0.5), inset 0 -1px 0 rgba(0,0,0,0.3);

  --font-primary: 'Courier New', 'Courier', monospace;
  --font-display: 'DM Serif Display', 'Georgia', serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;

  --color-string-active: #ffbb44;
  --color-string-inactive: #555555;
  --color-string-bg: rgba(255, 187, 68, 0.08);

  --color-btn-bg: linear-gradient(180deg, #4a4a4a 0%, #3a3a3a 100%);
  --color-btn-bg-hover: linear-gradient(180deg, #555555 0%, #444444 100%);
  --color-btn-active-bg: #ffbb44;
  --color-btn-active-text: #2a2a2a;

  --color-select-bg: #3a3a3a;
  --color-select-border: rgba(255, 255, 255, 0.12);

  --body-bg-extra: none;
  --card-backdrop: none;
  --card-border-style: 1px solid rgba(255,255,255,0.06);

  --color-strobe-light: rgba(255, 187, 68, 0.35);
  --color-strobe-dark: rgba(42, 42, 42, 0.9);
}

/* ========== STUDIO V2 VANTA (Topology Animated Background) ========== */
[data-theme="vanta3"] {
  --color-bg-primary: #000000;
  --color-bg-secondary: rgba(12, 12, 14, 0.88);
  --color-bg-card: rgba(18, 18, 20, 0.80);
  --color-bg-card-hover: rgba(28, 28, 32, 0.88);

  --color-text-primary: #e8dcc8;
  --color-text-secondary: #7a7068;
  --color-text-accent: #d4a24e;

  --color-accent: #d4a24e;
  --color-accent-rgb: 212, 162, 78;
  --color-accent-secondary: #b8862e;
  --color-danger: #c0392b;
  --color-warning: #d4a24e;
  --color-success: #5dba5f;

  --color-gauge-track: rgba(37, 37, 40, 0.6);
  --color-gauge-flat: #c0392b;
  --color-gauge-sharp: #d4a24e;
  --color-gauge-in-tune: #5dba5f;
  --color-gauge-needle: #f0e6d4;

  --glow-accent: 0 0 15px rgba(212, 162, 78, 0.25);
  --glow-strong: 0 0 30px rgba(212, 162, 78, 0.4);
  --glow-accent-secondary: 0 0 15px rgba(184, 134, 46, 0.2);

  --color-border: rgba(255, 255, 255, 0.08);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.6);

  --font-primary: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
  --font-display: 'DM Serif Display', 'Georgia', serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;

  --color-string-active: #d4a24e;
  --color-string-inactive: rgba(110, 100, 80, 0.9);
  --color-string-bg: rgba(22, 20, 14, 0.92);

  --color-btn-bg: rgba(22, 20, 14, 0.90);
  --color-btn-bg-hover: rgba(34, 30, 20, 0.95);
  --color-btn-active-bg: #d4a24e;
  --color-btn-active-text: #0c0c0e;

  --color-select-bg: rgba(18, 18, 20, 0.88);
  --color-select-border: rgba(212, 162, 78, 0.2);

  --body-bg-extra: none;
  --card-backdrop: blur(16px) saturate(1.2);
  --card-border-style: 1px solid rgba(255, 255, 255, 0.06);

  --color-strobe-light: rgba(212, 162, 78, 0.35);
  --color-strobe-dark: rgba(0, 0, 0, 0.9);
}

/* ========== GLASSMORPHISM ========== */
[data-theme="glass"] {
  --color-bg-primary: #1a0533;
  --color-bg-secondary: rgba(255, 255, 255, 0.06);
  --color-bg-card: rgba(255, 255, 255, 0.08);
  --color-bg-card-hover: rgba(255, 255, 255, 0.14);

  --color-text-primary: rgba(255, 255, 255, 0.95);
  --color-text-secondary: rgba(255, 255, 255, 0.55);
  --color-text-accent: #a78bfa;

  --color-accent: #a78bfa;
  --color-accent-rgb: 167, 139, 250;
  --color-accent-secondary: #38bdf8;
  --color-danger: #fb7185;
  --color-warning: #fbbf24;
  --color-success: #4ade80;

  --color-gauge-track: rgba(255, 255, 255, 0.1);
  --color-gauge-flat: #fb7185;
  --color-gauge-sharp: #fbbf24;
  --color-gauge-in-tune: #4ade80;
  --color-gauge-needle: #ffffff;

  --glow-accent: 0 0 20px rgba(167, 139, 250, 0.25);
  --glow-strong: 0 0 40px rgba(167, 139, 250, 0.4);
  --glow-accent-secondary: 0 0 20px rgba(56, 189, 248, 0.25);

  --color-border: rgba(255, 255, 255, 0.15);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.3);

  --font-primary: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;

  --color-string-active: #a78bfa;
  --color-string-inactive: rgba(255, 255, 255, 0.2);
  --color-string-bg: rgba(167, 139, 250, 0.1);

  --color-btn-bg: rgba(255, 255, 255, 0.08);
  --color-btn-bg-hover: rgba(255, 255, 255, 0.14);
  --color-btn-active-bg: #a78bfa;
  --color-btn-active-text: #1a0533;

  --color-select-bg: rgba(255, 255, 255, 0.1);
  --color-select-border: rgba(255, 255, 255, 0.18);

  --body-bg-extra: linear-gradient(135deg, #1a0533 0%, #0f172a 30%, #042f2e 60%, #1a0533 100%);
  --card-backdrop: blur(20px) saturate(1.5);
  --card-border-style: 1px solid rgba(255, 255, 255, 0.12);

  --color-strobe-light: rgba(167, 139, 250, 0.3);
  --color-strobe-dark: rgba(26, 5, 51, 0.9);
}

/* ========== STUDIO / PREMIUM HARDWARE ========== */
[data-theme="retro2"] {
  --color-bg-primary: #0c0c0e;
  --color-bg-secondary: #1c1c20;
  --color-bg-card: #161618;
  --color-bg-card-hover: #1e1e22;

  --color-text-primary: #e8dcc8;
  --color-text-secondary: #7a7068;
  --color-text-accent: #d4a24e;

  --color-accent: #d4a24e;
  --color-accent-rgb: 212, 162, 78;
  --color-accent-secondary: #b8862e;
  --color-danger: #c0392b;
  --color-warning: #d4a24e;
  --color-success: #5dba5f;

  --color-gauge-track: #252528;
  --color-gauge-flat: #c0392b;
  --color-gauge-sharp: #d4a24e;
  --color-gauge-in-tune: #5dba5f;
  --color-gauge-needle: #f0e6d4;

  --glow-accent: 0 0 15px rgba(212, 162, 78, 0.2);
  --glow-strong: 0 0 30px rgba(212, 162, 78, 0.35);
  --glow-accent-secondary: 0 0 15px rgba(184, 134, 46, 0.2);

  --color-border: rgba(255, 255, 255, 0.06);
  --shadow-card: 0 2px 4px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);

  --font-primary: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
  --font-display: 'DM Serif Display', 'Georgia', serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;

  --color-string-active: #d4a24e;
  --color-string-inactive: #3a3a3e;
  --color-string-bg: rgba(212, 162, 78, 0.06);

  --color-btn-bg: linear-gradient(180deg, #222224 0%, #1a1a1c 100%);
  --color-btn-bg-hover: linear-gradient(180deg, #2a2a2e 0%, #222224 100%);
  --color-btn-active-bg: #d4a24e;
  --color-btn-active-text: #0c0c0e;

  --color-select-bg: #161618;
  --color-select-border: rgba(212, 162, 78, 0.2);

  --body-bg-extra: none;
  --card-backdrop: none;
  --card-border-style: 1px solid rgba(255, 255, 255, 0.06);

  --color-strobe-light: rgba(212, 162, 78, 0.35);
  --color-strobe-dark: rgba(12, 12, 14, 0.9);
}

/* ========== ARCADE ========== */
[data-theme="arcade"] {
  --color-bg-primary: #1a1030;
  --color-bg-secondary: #221844;
  --color-bg-card: rgba(30, 20, 60, 0.85);
  --color-bg-card-hover: rgba(40, 28, 75, 0.9);

  --color-text-primary: #e0d8f0;
  --color-text-secondary: #8878aa;
  --color-text-accent: #c080ff;

  --color-accent: #c080ff;
  --color-accent-rgb: 192, 128, 255;
  --color-accent-secondary: #60ddff;
  --color-danger: #ff4477;
  --color-warning: #ffcc44;
  --color-success: #44ff88;

  --color-gauge-track: #2a1e4a;
  --color-gauge-flat: #ff4477;
  --color-gauge-sharp: #ffcc44;
  --color-gauge-in-tune: #44ff88;
  --color-gauge-needle: #e0d8f0;

  --glow-accent: 0 0 16px rgba(192, 128, 255, 0.3);
  --glow-strong: 0 0 32px rgba(192, 128, 255, 0.5);
  --glow-accent-secondary: 0 0 16px rgba(96, 221, 255, 0.3);

  --color-border: rgba(192, 128, 255, 0.2);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.5);

  --font-primary: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;

  --color-string-active: #c080ff;
  --color-string-inactive: #3a2a5a;
  --color-string-bg: rgba(192, 128, 255, 0.08);

  --color-btn-bg: rgba(40, 28, 75, 0.8);
  --color-btn-bg-hover: rgba(55, 40, 95, 0.9);
  --color-btn-active-bg: #c080ff;
  --color-btn-active-text: #1a1030;

  --color-select-bg: rgba(30, 20, 60, 0.9);
  --color-select-border: rgba(192, 128, 255, 0.3);

  --body-bg-extra: none;
  --card-backdrop: none;
  --card-border-style: 1px solid rgba(192, 128, 255, 0.15);

  --color-strobe-light: rgba(192, 128, 255, 0.3);
  --color-strobe-dark: rgba(26, 16, 48, 0.9);
}

[data-theme="arcade"] body {
  background: #080510;
}

/* Background image with dot texture */
[data-theme="arcade"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('../assets/arcade-bg.png') center bottom / cover no-repeat;
  opacity: 0.28;
}

[data-theme="arcade"] #app {
  position: relative;
  z-index: 1;
}

/* ========== GLASS DEPTH LAYERS ========== */
[data-theme="glass"] .glass-layer-1 {
  backdrop-filter: blur(8px) saturate(1.6);
  -webkit-backdrop-filter: blur(8px) saturate(1.6);
  background: rgba(255, 255, 255, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

[data-theme="glass"] .glass-layer-2 {
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

[data-theme="glass"] .glass-layer-3 {
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

[data-theme="glass"] .glass-layer-3 .setting-group,
[data-theme="glass"] .glass-layer-3 .step-card,
[data-theme="glass"] .glass-layer-3 .feature-card,
[data-theme="glass"] .glass-layer-3 .tuning-group {
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}