/* Theme Definitions for Groove Catalog */

/* Default theme (applied via :root, can be overridden by any theme) */
:root {
  --bg-primary: #1c1410;
  --bg-surface: #3a2a20;
  --rgb-bg-surface: 58, 42, 32;
  --bg-overlay: rgba(58, 42, 32, 0.55);
  --accent-primary: #e8a857;
  --accent-secondary: #d4763a;
  --success: #7cb342;
  --error: #e53935;
  --text-primary: #f5e6d3;
  --text-secondary: #a89080;
  --box-inactive: #4a3a30;
  --box-border: rgba(232, 168, 87, 0.2);
  --shadow-glow-primary: 0 0 20px rgba(232, 168, 87, 0.4);
  --shadow-glow-success: 0 0 15px rgba(124, 179, 66, 0.5);
  --shadow-glow-accent: 0 0 20px rgba(212, 118, 58, 0.6);
  --shadow-glow-error: 0 0 15px rgba(229, 57, 53, 0.5);
  --grid-color: rgba(232, 168, 87, 0.04);
  --track-color-1: #4a3a30;
  --track-color-2: #4d3528;
  --track-color-3: #3d3a2a;
  --track-color-4: #453530;
  --notation-bg: #fdfcf5;
  --notation-text: #1a1a1a;
  --color-flam: #f59e0b;
  --color-flam-shadow: rgba(245, 158, 11, 0.5);
  --color-roll: #3b82f6;
  --color-roll-shadow: rgba(59, 130, 246, 0.5);
  --color-pedal: #9b59b6;
  --color-pedal-shadow: rgba(155, 89, 182, 0.5);
}

/* Dark Synth */
html[data-theme="dark-synth"] {
  --bg-primary: #1a1a2e;
  --bg-surface: #16213e;
  --rgb-bg-surface: 22, 33, 62;
  --bg-overlay: rgba(22, 33, 62, 0.55);
  --accent-primary: #00fff5;
  --accent-secondary: #ff9f1c;
  --success: #08f26e;
  --error: #ff4757;
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --box-inactive: #2d3748;
  --box-border: rgba(0, 255, 245, 0.15);
  --shadow-glow-primary: 0 0 20px rgba(0, 255, 245, 0.4);
  --shadow-glow-success: 0 0 15px rgba(8, 242, 110, 0.5);
  --shadow-glow-accent: 0 0 20px rgba(255, 159, 28, 0.6);
  --shadow-glow-error: 0 0 15px rgba(255, 71, 87, 0.5);
  --grid-color: rgba(255, 255, 255, 0.03);
  --track-color-1: #2d3748;
  --track-color-2: #2d3040;
  --track-color-3: #253545;
  --track-color-4: #323848;
  --notation-bg: #1e2a3e;
  --notation-text: #ffffff;
  --color-flam: #fbbf24;
  --color-flam-shadow: rgba(251, 191, 36, 0.5);
  --color-roll: #60a5fa;
  --color-roll-shadow: rgba(96, 165, 250, 0.5);
  --color-pedal: #c084fc;
  --color-pedal-shadow: rgba(192, 132, 252, 0.5);
}

/* Retrowave - 80s sunset vibes */
html[data-theme="retrowave"] {
  --bg-primary: #1a0a2e;
  --bg-surface: #2d1b4e;
  --rgb-bg-surface: 45, 27, 78;
  --bg-overlay: rgba(45, 27, 78, 0.55);
  --accent-primary: #ff6ec7;
  --accent-secondary: #ff9a56;
  --success: #ff6ec7;
  --error: #ff4757;
  --text-primary: #ffffff;
  --text-secondary: #b0a0c0;
  --box-inactive: #3d2b5e;
  --box-border: rgba(255, 110, 199, 0.2);
  --shadow-glow-primary: 0 0 20px rgba(255, 110, 199, 0.4);
  --shadow-glow-success: 0 0 15px rgba(255, 110, 199, 0.5);
  --shadow-glow-accent: 0 0 20px rgba(255, 154, 86, 0.6);
  --shadow-glow-error: 0 0 15px rgba(255, 71, 87, 0.5);
  --grid-color: rgba(255, 110, 199, 0.06);
  --track-color-1: #3d2b5e;
  --track-color-2: #402b50;
  --track-color-3: #352b55;
  --track-color-4: #3a2860;
  --notation-bg: #2d1b4e;
  --notation-text: #ffffff;
  --color-flam: #fbbf24;
  --color-flam-shadow: rgba(251, 191, 36, 0.5);
  --color-roll: #818cf8;
  --color-roll-shadow: rgba(129, 140, 248, 0.5);
  --color-pedal: #ff6ec7;
  --color-pedal-shadow: rgba(255, 110, 199, 0.5);
}

/* Analog Warmth */
html[data-theme="analog-warmth"] {
  --bg-primary: #1c1410;
  --bg-surface: #3a2a20;
  --rgb-bg-surface: 58, 42, 32;
  --bg-overlay: rgba(58, 42, 32, 0.55);
  --accent-primary: #e8a857;
  --accent-secondary: #d4763a;
  --success: #7cb342;
  --error: #e53935;
  --text-primary: #f5e6d3;
  --text-secondary: #a89080;
  --box-inactive: #4a3a30;
  --box-border: rgba(232, 168, 87, 0.2);
  --shadow-glow-primary: 0 0 20px rgba(232, 168, 87, 0.4);
  --shadow-glow-success: 0 0 15px rgba(124, 179, 66, 0.5);
  --shadow-glow-accent: 0 0 20px rgba(212, 118, 58, 0.6);
  --shadow-glow-error: 0 0 15px rgba(229, 57, 53, 0.5);
  --grid-color: rgba(232, 168, 87, 0.04);
  --track-color-1: #4a3a30;
  --track-color-2: #4d3528;
  --track-color-3: #3d3a2a;
  --track-color-4: #453530;
  --notation-bg: #fdfcf5;
  --notation-text: #1a1a1a;
  --color-flam: #f59e0b;
  --color-flam-shadow: rgba(245, 158, 11, 0.5);
  --color-roll: #3b82f6;
  --color-roll-shadow: rgba(59, 130, 246, 0.5);
  --color-pedal: #9b59b6;
  --color-pedal-shadow: rgba(155, 89, 182, 0.5);
}

/* Neon Club - High contrast club lighting */
html[data-theme="neon-club"] {
  --bg-primary: #0a0a0f;
  --bg-surface: #1a1a25;
  --rgb-bg-surface: 26, 26, 37;
  --bg-overlay: rgba(26, 26, 37, 0.55);
  --accent-primary: #ff0080;
  --accent-secondary: #00d4ff;
  --success: #39ff14;
  --error: #ff0040;
  --text-primary: #ffffff;
  --text-secondary: #666680;
  --box-inactive: #252530;
  --box-border: rgba(0, 212, 255, 0.15);
  --shadow-glow-primary: 0 0 20px rgba(255, 0, 128, 0.5);
  --shadow-glow-success: 0 0 15px rgba(57, 255, 20, 0.6);
  --shadow-glow-accent: 0 0 20px rgba(0, 212, 255, 0.5);
  --shadow-glow-error: 0 0 15px rgba(255, 0, 64, 0.5);
  --grid-color: rgba(255, 0, 128, 0.04);
  --track-color-1: #252530;
  --track-color-2: #252535;
  --track-color-3: #202530;
  --track-color-4: #282530;
  --notation-bg: #1a1a25;
  --notation-text: #ffffff;
  --color-flam: #fbbf24;
  --color-flam-shadow: rgba(251, 191, 36, 0.6);
  --color-roll: #00d4ff;
  --color-roll-shadow: rgba(0, 212, 255, 0.6);
  --color-pedal: #ff0080;
  --color-pedal-shadow: rgba(255, 0, 128, 0.6);
}

/* Studio Light - Clean professional light theme */
html[data-theme="studio-light"] {
  --bg-primary: #f5f5f0;
  --bg-surface: #ffffff;
  --rgb-bg-surface: 255, 255, 255;
  --bg-overlay: rgba(255, 255, 255, 0.75);
  --accent-primary: #d97706;
  --accent-secondary: #ea580c;
  --success: #059669;
  --error: #dc2626;
  --text-primary: #1c1917;
  --text-secondary: #78716c;
  --box-inactive: #e7e5e4;
  --box-border: rgba(217, 119, 6, 0.3);
  --shadow-glow-primary: 0 0 10px rgba(217, 119, 6, 0.2);
  --shadow-glow-success: 0 0 10px rgba(5, 150, 105, 0.3);
  --shadow-glow-accent: 0 0 10px rgba(234, 88, 12, 0.3);
  --shadow-glow-error: 0 0 10px rgba(220, 38, 38, 0.3);
  --grid-color: rgba(120, 113, 108, 0.08);
  --track-color-1: #fafaf9;
  --track-color-2: #f5f5f4;
  --track-color-3: #f8f8f6;
  --track-color-4: #fafaf8;
  --notation-bg: #ffffff;
  --notation-text: #1c1917;
  --color-flam: #ea580c;
  --color-flam-shadow: rgba(234, 88, 12, 0.4);
  --color-roll: #2563eb;
  --color-roll-shadow: rgba(37, 99, 235, 0.4);
  --color-pedal: #9333ea;
  --color-pedal-shadow: rgba(147, 51, 234, 0.4);
}