/* Premium Theme Skins System - DarkWave Pulse V1 */
/* SOLID DARK EDITION - Black and dark gray backgrounds */

/* Default Dark Theme - Solid Black/Gray */
:root, body.theme-dark {
  /* Solid Dark Backgrounds */
  --bg-primary: #0f0f0f;
  --bg-secondary: #1a1a1a;
  --bg-card: #1a1a1a;
  --bg-hover: #2a2a2a;
  --bg-tertiary: #141414;
  --border-color: #333333;
  
  /* Text Colors */
  --text-primary: #ffffff;
  --text-secondary: #b3b3b3;
  --text-dim: #777777;
  
  /* Accent Colors */
  --accent-blue: #00D4FF;
  --accent-glow: #00D4FF;
  --accent-purple: #7C3AED;
  
  /* Status Colors */
  --positive-green: #39FF14;
  --negative-red: #ff4444;
  --warning-yellow: #9D4EDD;
  --text-green: #39FF14;
  --text-red: #ff4444;
  
  /* Dark Theme Tokens */
  --glass-bg: #1a1a1a;
  --glass-border: #333333;
  --glass-glow: #00D4FF;
  --glass-blur: 0;
  
  /* Surface layers */
  --surface-primary: #0f0f0f;
  --surface-elevated: #1a1a1a;
  --surface-overlay: #1a1a1a;
  
  /* Button backgrounds */
  --btn-primary: #1a1a1a;
  --btn-primary-hover: #2a2a2a;
  --btn-secondary: #222222;
  --btn-secondary-hover: #333333;
}

/* Jupiter Theme - Orange/Coral Solid Dark */
body.theme-jupiter {
  --bg-primary: #1a1210;
  --bg-secondary: #251810;
  --bg-card: #201510;
  --bg-hover: #352518;
  --bg-tertiary: #1d1310;
  --border-color: #4a3020;
  
  --text-primary: #fff5f0;
  --text-secondary: #d4a080;
  --text-dim: #9a7050;
  
  --accent-blue: #FFB899;
  --accent-glow: #FF9966;
  --accent-purple: #FF9966;
  
  --positive-green: #FFCC99;
  --negative-red: #FF8866;
  --warning-yellow: #FFE099;
  --text-green: #FFCC99;
  --text-red: #FF8866;
  
  --glass-bg: #201510;
  --glass-border: #4a3020;
  --glass-glow: #FF9966;
  
  --surface-primary: #1a1210;
  --surface-elevated: #251810;
  --surface-overlay: #201510;
  
  --btn-primary: #251810;
  --btn-primary-hover: #352518;
  --btn-secondary: #2a1c12;
  --btn-secondary-hover: #3a2518;
}

/* Pink Blossom Theme - Sakura/Rose Solid Dark */
body.theme-pink-blossom {
  --bg-primary: #1a1018;
  --bg-secondary: #251520;
  --bg-card: #20121a;
  --bg-hover: #352028;
  --bg-tertiary: #1d1118;
  --border-color: #4a2535;
  
  --text-primary: #fff0f8;
  --text-secondary: #d4a0b8;
  --text-dim: #9a6080;
  
  --accent-blue: #FFB3D9;
  --accent-glow: #FF99CC;
  --accent-purple: #FF99CC;
  
  --positive-green: #FFCCE0;
  --negative-red: #FF88B0;
  --warning-yellow: #FFD1DC;
  --text-green: #FFCCE0;
  --text-red: #FF88B0;
  
  --glass-bg: #20121a;
  --glass-border: #4a2535;
  --glass-glow: #FF99CC;
  
  --surface-primary: #1a1018;
  --surface-elevated: #251520;
  --surface-overlay: #20121a;
  
  --btn-primary: #251520;
  --btn-primary-hover: #352028;
  --btn-secondary: #2a1820;
  --btn-secondary-hover: #3a2028;
}

/* Sunny Field Theme - Golden/Warm Solid Dark */
body.theme-sunny-field {
  --bg-primary: #1a1810;
  --bg-secondary: rgba(80, 65, 30, 0.4);
  --bg-card: rgba(70, 55, 25, 0.35);
  --bg-hover: rgba(100, 80, 40, 0.5);
  --bg-tertiary: rgba(75, 60, 28, 0.35);
  --border-color: rgba(255, 220, 140, 0.25);
  
  --text-primary: #fffbf0;
  --text-secondary: rgba(255, 235, 180, 0.9);
  --text-dim: rgba(255, 215, 140, 0.7);
  
  --accent-blue: #FFE099;
  --accent-glow: rgba(255, 200, 100, 0.4);
  --accent-purple: #FFD066;
  
  --positive-green: #FFEE99;
  --negative-red: #FFAA66;
  --warning-yellow: #FFE066;
  --text-green: #FFEE99;
  --text-red: #FFAA66;
  
  --glass-bg: rgba(70, 55, 25, 0.35);
  --glass-border: rgba(255, 220, 140, 0.2);
  --glass-glow: rgba(255, 200, 100, 0.15);
  
  --surface-primary: rgba(60, 50, 20, 0.3);
  --surface-elevated: rgba(80, 65, 30, 0.45);
  --surface-overlay: rgba(70, 55, 25, 0.6);
  
  --btn-primary: rgba(255, 200, 100, 0.25);
  --btn-primary-hover: rgba(255, 200, 100, 0.4);
  --btn-secondary: rgba(255, 220, 140, 0.2);
  --btn-secondary-hover: rgba(255, 220, 140, 0.35);
}

/* Space Theme - Cosmic Purple/Blue Glassmorphism */
body.theme-space {
  --bg-primary: rgba(30, 25, 60, 0.3);
  --bg-secondary: rgba(45, 40, 80, 0.4);
  --bg-card: rgba(35, 30, 70, 0.35);
  --bg-hover: rgba(55, 50, 100, 0.5);
  --bg-tertiary: rgba(40, 35, 75, 0.35);
  --border-color: rgba(180, 160, 255, 0.25);
  
  --text-primary: #f0f0ff;
  --text-secondary: rgba(200, 190, 255, 0.9);
  --text-dim: rgba(170, 160, 220, 0.7);
  
  --accent-blue: #C4B5FD;
  --accent-glow: rgba(167, 139, 250, 0.4);
  --accent-purple: #A78BFA;
  
  --positive-green: #D8B4FE;
  --negative-red: #C4A5FD;
  --warning-yellow: #E9D5FF;
  --text-green: #D8B4FE;
  --text-red: #C4A5FD;
  
  --glass-bg: rgba(35, 30, 70, 0.35);
  --glass-border: rgba(180, 160, 255, 0.2);
  --glass-glow: rgba(167, 139, 250, 0.15);
  
  --surface-primary: rgba(30, 25, 60, 0.3);
  --surface-elevated: rgba(45, 40, 80, 0.45);
  --surface-overlay: rgba(35, 30, 70, 0.6);
  
  --btn-primary: rgba(167, 139, 250, 0.25);
  --btn-primary-hover: rgba(167, 139, 250, 0.4);
  --btn-secondary: rgba(180, 160, 255, 0.2);
  --btn-secondary-hover: rgba(180, 160, 255, 0.35);
}

/* Ocean Theme - Teal/Aqua Glassmorphism */
body.theme-ocean {
  --bg-primary: rgba(15, 50, 60, 0.3);
  --bg-secondary: rgba(25, 70, 80, 0.4);
  --bg-card: rgba(20, 55, 70, 0.35);
  --bg-hover: rgba(35, 85, 100, 0.5);
  --bg-tertiary: rgba(22, 60, 75, 0.35);
  --border-color: rgba(120, 220, 230, 0.25);
  
  --text-primary: #f0ffff;
  --text-secondary: rgba(180, 240, 245, 0.9);
  --text-dim: rgba(140, 210, 220, 0.7);
  
  --accent-blue: #7DD3FC;
  --accent-glow: rgba(56, 189, 248, 0.4);
  --accent-purple: #38BDF8;
  
  --positive-green: #99F6E4;
  --negative-red: #FDA4AF;
  --warning-yellow: #FDE68A;
  --text-green: #99F6E4;
  --text-red: #FDA4AF;
  
  --glass-bg: rgba(20, 55, 70, 0.35);
  --glass-border: rgba(120, 220, 230, 0.2);
  --glass-glow: rgba(56, 189, 248, 0.15);
  
  --surface-primary: rgba(15, 50, 60, 0.3);
  --surface-elevated: rgba(25, 70, 80, 0.45);
  --surface-overlay: rgba(20, 55, 70, 0.6);
  
  --btn-primary: rgba(56, 189, 248, 0.25);
  --btn-primary-hover: rgba(56, 189, 248, 0.4);
  --btn-secondary: rgba(120, 220, 230, 0.2);
  --btn-secondary-hover: rgba(120, 220, 230, 0.35);
}

/* Forest Theme - Green/Emerald Glassmorphism */
body.theme-forest {
  --bg-primary: rgba(20, 50, 35, 0.3);
  --bg-secondary: rgba(30, 70, 50, 0.4);
  --bg-card: rgba(25, 55, 40, 0.35);
  --bg-hover: rgba(40, 85, 60, 0.5);
  --bg-tertiary: rgba(28, 60, 45, 0.35);
  --border-color: rgba(134, 239, 172, 0.25);
  
  --text-primary: #f0fff4;
  --text-secondary: rgba(180, 245, 200, 0.9);
  --text-dim: rgba(140, 220, 170, 0.7);
  
  --accent-blue: #86EFAC;
  --accent-glow: rgba(74, 222, 128, 0.4);
  --accent-purple: #4ADE80;
  
  --positive-green: #BBF7D0;
  --negative-red: #FCA5A5;
  --warning-yellow: #FDE68A;
  --text-green: #BBF7D0;
  --text-red: #FCA5A5;
  
  --glass-bg: rgba(25, 55, 40, 0.35);
  --glass-border: rgba(134, 239, 172, 0.2);
  --glass-glow: rgba(74, 222, 128, 0.15);
  
  --surface-primary: rgba(20, 50, 35, 0.3);
  --surface-elevated: rgba(30, 70, 50, 0.45);
  --surface-overlay: rgba(25, 55, 40, 0.6);
  
  --btn-primary: rgba(74, 222, 128, 0.25);
  --btn-primary-hover: rgba(74, 222, 128, 0.4);
  --btn-secondary: rgba(134, 239, 172, 0.2);
  --btn-secondary-hover: rgba(134, 239, 172, 0.35);
}

/* Neon Theme - Electric Blue/Magenta Glassmorphism */
body.theme-neon {
  --bg-primary: rgba(25, 15, 50, 0.3);
  --bg-secondary: rgba(40, 25, 70, 0.4);
  --bg-card: rgba(30, 20, 55, 0.35);
  --bg-hover: rgba(50, 35, 85, 0.5);
  --bg-tertiary: rgba(35, 22, 60, 0.35);
  --border-color: rgba(236, 72, 153, 0.25);
  
  --text-primary: #fff0ff;
  --text-secondary: rgba(250, 180, 230, 0.9);
  --text-dim: rgba(220, 140, 200, 0.7);
  
  --accent-blue: #F472B6;
  --accent-glow: rgba(236, 72, 153, 0.4);
  --accent-purple: #EC4899;
  
  --positive-green: #F9A8D4;
  --negative-red: #FB7185;
  --warning-yellow: #FDE68A;
  --text-green: #F9A8D4;
  --text-red: #FB7185;
  
  --glass-bg: rgba(30, 20, 55, 0.35);
  --glass-border: rgba(236, 72, 153, 0.2);
  --glass-glow: rgba(236, 72, 153, 0.15);
  
  --surface-primary: rgba(25, 15, 50, 0.3);
  --surface-elevated: rgba(40, 25, 70, 0.45);
  --surface-overlay: rgba(30, 20, 55, 0.6);
  
  --btn-primary: rgba(236, 72, 153, 0.25);
  --btn-primary-hover: rgba(236, 72, 153, 0.4);
  --btn-secondary: rgba(250, 180, 230, 0.2);
  --btn-secondary-hover: rgba(250, 180, 230, 0.35);
}

/* Midnight Theme - Deep Blue/Indigo Glassmorphism */
body.theme-midnight {
  --bg-primary: rgba(20, 30, 60, 0.3);
  --bg-secondary: rgba(30, 45, 85, 0.4);
  --bg-card: rgba(25, 35, 70, 0.35);
  --bg-hover: rgba(40, 55, 100, 0.5);
  --bg-tertiary: rgba(28, 40, 75, 0.35);
  --border-color: rgba(129, 140, 248, 0.25);
  
  --text-primary: #f0f0ff;
  --text-secondary: rgba(190, 195, 255, 0.9);
  --text-dim: rgba(150, 160, 220, 0.7);
  
  --accent-blue: #A5B4FC;
  --accent-glow: rgba(129, 140, 248, 0.4);
  --accent-purple: #818CF8;
  
  --positive-green: #C7D2FE;
  --negative-red: #FDA4AF;
  --warning-yellow: #FDE68A;
  --text-green: #C7D2FE;
  --text-red: #FDA4AF;
  
  --glass-bg: rgba(25, 35, 70, 0.35);
  --glass-border: rgba(129, 140, 248, 0.2);
  --glass-glow: rgba(129, 140, 248, 0.15);
  
  --surface-primary: rgba(20, 30, 60, 0.3);
  --surface-elevated: rgba(30, 45, 85, 0.45);
  --surface-overlay: rgba(25, 35, 70, 0.6);
  
  --btn-primary: rgba(129, 140, 248, 0.25);
  --btn-primary-hover: rgba(129, 140, 248, 0.4);
  --btn-secondary: rgba(165, 180, 252, 0.2);
  --btn-secondary-hover: rgba(165, 180, 252, 0.35);
}

/* Theme transition effects */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

* {
  transition: border-color 0.2s ease;
}

/* Global Glassmorphism Helper Classes */
.glass-panel {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur, 12px)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur, 12px)) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 4px 20px var(--glass-glow) !important;
}

.glass-card {
  background: var(--bg-card) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid var(--border-color) !important;
}

.glass-button {
  background: var(--btn-primary) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid var(--glass-border) !important;
}

.glass-button:hover {
  background: var(--btn-primary-hover) !important;
}