/* Default Theme (Original) */
:root {
  --bg-color: #1e3a8a;
  --bg-secondary: #1e40af;
  --nav-color: #1e3a8a;
  --accent-color: #60a5fa;
  --accent-secondary: #3b82f6;
  --text-color: #ffffff;
  --text-muted: #bfdbfe;
  --border-color: #3b82f6;
  --hover-bg: #1e40af;
  --btn-bg: #2563eb;
  --btn-hover-bg: #60a5fa;
  
  --glass-bg: rgba(30, 58, 138, 0.7);
  --glass-border: rgba(96, 165, 250, 0.3);
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px rgba(96, 165, 250, 0.3);
  
  /* Sidebar Colors - Lighter than background */
  --sidebar-bg-start: rgba(30, 64, 175, 0.98);
  --sidebar-bg-mid: rgba(37, 99, 235, 0.98);
  --sidebar-bg-end: rgba(30, 64, 175, 0.98);
  --sidebar-text: rgba(255, 255, 255, 0.9);
  --sidebar-text-hover: #ffffff;
  --sidebar-border: rgba(96, 165, 250, 0.3);
  --sidebar-border-hover: rgba(96, 165, 250, 0.6);
  --sidebar-hover-bg: rgba(96, 165, 250, 0.15);
  --sidebar-active-bg: linear-gradient(135deg, rgba(96, 165, 250, 0.35) 0%, rgba(59, 130, 246, 0.3) 100%);
  --sidebar-accent: #60a5fa;
  --sidebar-accent-secondary: #3b82f6;
}

/* Dark Theme - Background darker, sidebar lighter */
[data-theme="dark"] {
  --bg-color: #000000;
  --bg-secondary: #0d0d0d;
  --nav-color: #1a1a1a;
  --accent-color: #5c5c5c;
  --accent-secondary: #8f8f8f;
  --text-color: #ffffff;
  --text-muted: #a0a0a0;
  --border-color: #8f8f8f;
  --hover-bg: #1a1a1a;
  --btn-bg: #2a2a2a;
  --btn-hover-bg: #5c5c5c;
  
  --glass-bg: rgba(26, 26, 26, 0.7);
  --glass-border: rgba(255, 255, 255, 0.15);
  --shadow-glow: 0 0 20px rgba(92, 92, 92, 0.3);
  
  /* Sidebar - Much lighter than background */
  --sidebar-bg-start: rgba(79, 79, 79, 0.98);
  --sidebar-bg-mid: rgba(95, 95, 95, 0.98);
  --sidebar-bg-end: rgba(79, 79, 79, 0.98);
  --sidebar-text: rgba(220, 220, 220, 0.9);
  --sidebar-text-hover: #ffffff;
  --sidebar-border: rgba(143, 143, 143, 0.4);
  --sidebar-border-hover: rgba(171, 171, 171, 0.6);
  --sidebar-hover-bg: rgba(92, 92, 92, 0.3);
  --sidebar-active-bg: linear-gradient(135deg, rgba(92, 92, 92, 0.4) 0%, rgba(143, 143, 143, 0.35) 100%);
  --sidebar-accent: #5c5c5c;
  --sidebar-accent-secondary: #8f8f8f;
}

/* Light Theme - Background lighter, sidebar slightly darker */
[data-theme="light"] {
  --bg-color: #f8fafc;
  --bg-secondary: #ffffff;
  --nav-color: #ffffff;
  --accent-color: #3b82f6;
  --accent-secondary: #2563eb;
  --text-color: #0f172a;
  --text-muted: #64748b;
  --border-color: #cbd5e1;
  --hover-bg: #f1f5f9;
  --btn-bg: #e2e8f0;
  --btn-hover-bg: #3b82f6;
  
  --glass-bg: rgba(248, 250, 252, 0.8);
  --glass-border: rgba(203, 213, 225, 0.5);
  --shadow-glow: 0 0 15px rgba(59, 130, 246, 0.2);
  
  /* Sidebar - Slightly darker than background */
  --sidebar-bg-start: rgba(226, 232, 240, 0.98);
  --sidebar-bg-mid: rgba(241, 245, 249, 0.98);
  --sidebar-bg-end: rgba(226, 232, 240, 0.98);
  --sidebar-text: rgba(30, 41, 59, 0.85);
  --sidebar-text-hover: #0f172a;
  --sidebar-border: rgba(203, 213, 225, 0.6);
  --sidebar-border-hover: rgba(59, 130, 246, 0.5);
  --sidebar-hover-bg: rgba(59, 130, 246, 0.12);
  --sidebar-active-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(37, 99, 235, 0.2) 100%);
  --sidebar-accent: #3b82f6;
  --sidebar-accent-secondary: #2563eb;
}

/* Midnight Theme */
[data-theme="midnight"] {
  --bg-color: #0c0a1f;
  --bg-secondary: #1a1535;
  --nav-color: #1a1535;
  --accent-color: #a78bfa;
  --accent-secondary: #8b5cf6;
  --text-color: #e0d8ff;
  --text-muted: #c4b5fd;
  --border-color: #4c1d95;
  --hover-bg: #1a1535;
  --btn-bg: #2a1050;
  --btn-hover-bg: #a78bfa;
  
  --glass-bg: rgba(26, 21, 53, 0.8);
  --glass-border: rgba(167, 139, 250, 0.3);
  --shadow-glow: 0 0 25px rgba(167, 139, 250, 0.4);
  
  /* Sidebar - Lighter than background */
  --sidebar-bg-start: rgba(26, 21, 53, 0.98);
  --sidebar-bg-mid: rgba(42, 16, 80, 0.98);
  --sidebar-bg-end: rgba(26, 21, 53, 0.98);
  --sidebar-text: rgba(224, 216, 255, 0.9);
  --sidebar-text-hover: #ffffff;
  --sidebar-border: rgba(167, 139, 250, 0.3);
  --sidebar-border-hover: rgba(167, 139, 250, 0.6);
  --sidebar-hover-bg: rgba(167, 139, 250, 0.15);
  --sidebar-active-bg: linear-gradient(135deg, rgba(167, 139, 250, 0.35) 0%, rgba(139, 92, 246, 0.3) 100%);
  --sidebar-accent: #a78bfa;
  --sidebar-accent-secondary: #8b5cf6;
}

/* Ocean Theme */
[data-theme="ocean"] {
  --bg-color: #0c4a6e;
  --bg-secondary: #075985;
  --nav-color: #0e7490;
  --accent-color: #22d3ee;
  --accent-secondary: #06b6d4;
  --text-color: #e0f2fe;
  --text-muted: #bae6fd;
  --border-color: #0891b2;
  --hover-bg: #075985;
  --btn-bg: #0891b2;
  --btn-hover-bg: #22d3ee;
  
  --glass-bg: rgba(7, 89, 133, 0.8);
  --glass-border: rgba(34, 211, 238, 0.3);
  --shadow-glow: 0 0 25px rgba(34, 211, 238, 0.4);
  
  /* Sidebar - Lighter than background */
  --sidebar-bg-start: rgba(7, 89, 133, 0.98);
  --sidebar-bg-mid: rgba(14, 116, 144, 0.98);
  --sidebar-bg-end: rgba(7, 89, 133, 0.98);
  --sidebar-text: rgba(224, 242, 254, 0.9);
  --sidebar-text-hover: #ffffff;
  --sidebar-border: rgba(34, 211, 238, 0.3);
  --sidebar-border-hover: rgba(34, 211, 238, 0.6);
  --sidebar-hover-bg: rgba(34, 211, 238, 0.15);
  --sidebar-active-bg: linear-gradient(135deg, rgba(34, 211, 238, 0.35) 0%, rgba(6, 182, 212, 0.3) 100%);
  --sidebar-accent: #22d3ee;
  --sidebar-accent-secondary: #06b6d4;
}

/* Sunset Theme */
[data-theme="sunset"] {
  --bg-color: #7c2d12;
  --bg-secondary: #9a3412;
  --nav-color: #c2410c;
  --accent-color: #fb923c;
  --accent-secondary: #f97316;
  --text-color: #fed7aa;
  --text-muted: #fdba74;
  --border-color: #ea580c;
  --hover-bg: #9a3412;
  --btn-bg: #ea580c;
  --btn-hover-bg: #fb923c;
  
  --glass-bg: rgba(154, 52, 18, 0.8);
  --glass-border: rgba(251, 146, 60, 0.3);
  --shadow-glow: 0 0 25px rgba(251, 146, 60, 0.4);
  
  /* Sidebar - Lighter than background */
  --sidebar-bg-start: rgba(154, 52, 18, 0.98);
  --sidebar-bg-mid: rgba(194, 65, 12, 0.98);
  --sidebar-bg-end: rgba(154, 52, 18, 0.98);
  --sidebar-text: rgba(254, 215, 170, 0.9);
  --sidebar-text-hover: #ffffff;
  --sidebar-border: rgba(251, 146, 60, 0.3);
  --sidebar-border-hover: rgba(251, 146, 60, 0.6);
  --sidebar-hover-bg: rgba(251, 146, 60, 0.15);
  --sidebar-active-bg: linear-gradient(135deg, rgba(251, 146, 60, 0.35) 0%, rgba(249, 115, 22, 0.3) 100%);
  --sidebar-accent: #fb923c;
  --sidebar-accent-secondary: #f97316;
}

/* Forest Theme */
[data-theme="forest"] {
  --bg-color: #14532d;
  --bg-secondary: #166534;
  --nav-color: #15803d;
  --accent-color: #4ade80;
  --accent-secondary: #22c55e;
  --text-color: #dcfce7;
  --text-muted: #bbf7d0;
  --border-color: #22c55e;
  --hover-bg: #166534;
  --btn-bg: #22c55e;
  --btn-hover-bg: #4ade80;
  
  --glass-bg: rgba(22, 101, 52, 0.8);
  --glass-border: rgba(74, 222, 128, 0.3);
  --shadow-glow: 0 0 25px rgba(74, 222, 128, 0.4);
  
  /* Sidebar - Lighter than background */
  --sidebar-bg-start: rgba(22, 101, 52, 0.98);
  --sidebar-bg-mid: rgba(21, 128, 61, 0.98);
  --sidebar-bg-end: rgba(22, 101, 52, 0.98);
  --sidebar-text: rgba(220, 252, 231, 0.9);
  --sidebar-text-hover: #ffffff;
  --sidebar-border: rgba(74, 222, 128, 0.3);
  --sidebar-border-hover: rgba(74, 222, 128, 0.6);
  --sidebar-hover-bg: rgba(74, 222, 128, 0.15);
  --sidebar-active-bg: linear-gradient(135deg, rgba(74, 222, 128, 0.35) 0%, rgba(34, 197, 94, 0.3) 100%);
  --sidebar-accent: #4ade80;
  --sidebar-accent-secondary: #22c55e;
}

/* Purple Dream Theme */
[data-theme="purple"] {
  --bg-color: #581c87;
  --bg-secondary: #6b21a8;
  --nav-color: #7e22ce;
  --accent-color: #c084fc;
  --accent-secondary: #a855f7;
  --text-color: #f3e8ff;
  --text-muted: #e9d5ff;
  --border-color: #a855f7;
  --hover-bg: #6b21a8;
  --btn-bg: #a855f7;
  --btn-hover-bg: #c084fc;
  
  --glass-bg: rgba(107, 33, 168, 0.8);
  --glass-border: rgba(192, 132, 252, 0.3);
  --shadow-glow: 0 0 25px rgba(192, 132, 252, 0.4);
  
  /* Sidebar - Lighter than background */
  --sidebar-bg-start: rgba(107, 33, 168, 0.98);
  --sidebar-bg-mid: rgba(126, 34, 206, 0.98);
  --sidebar-bg-end: rgba(107, 33, 168, 0.98);
  --sidebar-text: rgba(243, 232, 255, 0.9);
  --sidebar-text-hover: #ffffff;
  --sidebar-border: rgba(192, 132, 252, 0.3);
  --sidebar-border-hover: rgba(192, 132, 252, 0.6);
  --sidebar-hover-bg: rgba(192, 132, 252, 0.15);
  --sidebar-active-bg: linear-gradient(135deg, rgba(192, 132, 252, 0.35) 0%, rgba(168, 85, 247, 0.3) 100%);
  --sidebar-accent: #c084fc;
  --sidebar-accent-secondary: #a855f7;
}

/* Cyberpunk Theme */
[data-theme="cyberpunk"] {
  --bg-color: #1a0b2e;
  --bg-secondary: #2d1b4e;
  --nav-color: #16213e;
  --accent-color: #ff006e;
  --accent-secondary: #fb5607;
  --text-color: #f0f0ff;
  --text-muted: #c0c0e8;
  --border-color: #7b2cbf;
  --hover-bg: #2d1b4e;
  --btn-bg: #7b2cbf;
  --btn-hover-bg: #ff006e;
  
  --glass-bg: rgba(45, 27, 78, 0.8);
  --glass-border: rgba(255, 0, 110, 0.3);
  --shadow-glow: 0 0 30px rgba(255, 0, 110, 0.5);
  
  /* Sidebar - Lighter than background */
  --sidebar-bg-start: rgba(45, 27, 78, 0.98);
  --sidebar-bg-mid: rgba(123, 44, 191, 0.98);
  --sidebar-bg-end: rgba(45, 27, 78, 0.98);
  --sidebar-text: rgba(240, 240, 255, 0.9);
  --sidebar-text-hover: #ffffff;
  --sidebar-border: rgba(255, 0, 110, 0.3);
  --sidebar-border-hover: rgba(255, 0, 110, 0.6);
  --sidebar-hover-bg: rgba(255, 0, 110, 0.18);
  --sidebar-active-bg: linear-gradient(135deg, rgba(255, 0, 110, 0.4) 0%, rgba(251, 86, 7, 0.35) 100%);
  --sidebar-accent: #ff006e;
  --sidebar-accent-secondary: #fb5607;
}

/* Matrix Theme */
[data-theme="matrix"] {
  --bg-color: #0d0d0d;
  --bg-secondary: #000000;
  --nav-color: #1a1a1a;
  --accent-color: #00ff41;
  --accent-secondary: #39ff14;
  --text-color: #00ff41;
  --text-muted: #00cc33;
  --border-color: #003b00;
  --hover-bg: #0a0f0a;
  --btn-bg: #0f1f0f;
  --btn-hover-bg: #00ff41;
  
  --glass-bg: rgba(13, 21, 13, 0.9);
  --glass-border: rgba(0, 255, 65, 0.3);
  --shadow-glow: 0 0 30px rgba(0, 255, 65, 0.5);
  
  /* Sidebar - Lighter than background */
  --sidebar-bg-start: rgba(13, 21, 13, 0.98);
  --sidebar-bg-mid: rgba(26, 47, 26, 0.98);
  --sidebar-bg-end: rgba(13, 21, 13, 0.98);
  --sidebar-text: rgba(0, 255, 65, 0.9);
  --sidebar-text-hover: #00ff41;
  --sidebar-border: rgba(0, 255, 65, 0.25);
  --sidebar-border-hover: rgba(0, 255, 65, 0.6);
  --sidebar-hover-bg: rgba(0, 255, 65, 0.15);
  --sidebar-active-bg: linear-gradient(135deg, rgba(0, 255, 65, 0.35) 0%, rgba(57, 255, 20, 0.3) 100%);
  --sidebar-accent: #00ff41;
  --sidebar-accent-secondary: #39ff14;
}

/* Neon Lights */
[data-theme="neon"] {
  --bg-color: #120458;
  --bg-secondary: #2d1b69;
  --nav-color: #1a0b3a;
  --accent-color: #ff10f0;
  --accent-secondary: #00ffff;
  --text-color: #ffffff;
  --text-muted: #e0c0ff;
  --border-color: #7b2cbf;
  --hover-bg: #2d1b69;
  --btn-bg: #7b2cbf;
  --btn-hover-bg: #ff10f0;
  
  --glass-bg: rgba(45, 27, 105, 0.8);
  --glass-border: rgba(255, 16, 240, 0.3);
  --shadow-glow: 0 0 30px rgba(255, 16, 240, 0.5);
  
  /* Sidebar - Lighter than background */
  --sidebar-bg-start: rgba(45, 27, 105, 0.98);
  --sidebar-bg-mid: rgba(123, 44, 191, 0.98);
  --sidebar-bg-end: rgba(45, 27, 105, 0.98);
  --sidebar-text: rgba(255, 255, 255, 0.9);
  --sidebar-text-hover: #ffffff;
  --sidebar-border: rgba(255, 16, 240, 0.3);
  --sidebar-border-hover: rgba(255, 16, 240, 0.6);
  --sidebar-hover-bg: rgba(255, 16, 240, 0.18);
  --sidebar-active-bg: linear-gradient(135deg, rgba(255, 16, 240, 0.4) 0%, rgba(0, 255, 255, 0.35) 100%);
  --sidebar-accent: #ff10f0;
  --sidebar-accent-secondary: #00ffff;
}

/* Fire */
[data-theme="fire"] {
  --bg-color: #7f1d1d;
  --bg-secondary: #991b1b;
  --nav-color: #b91c1c;
  --accent-color: #fbbf24;
  --accent-secondary: #f59e0b;
  --text-color: #fef2f2;
  --text-muted: #fecaca;
  --border-color: #f59e0b;
  --hover-bg: #991b1b;
  --btn-bg: #f59e0b;
  --btn-hover-bg: #fbbf24;
  
  --glass-bg: rgba(153, 27, 27, 0.8);
  --glass-border: rgba(251, 191, 36, 0.3);
  --shadow-glow: 0 0 30px rgba(251, 191, 36, 0.5);
  
  /* Sidebar - Lighter than background */
  --sidebar-bg-start: rgba(153, 27, 27, 0.98);
  --sidebar-bg-mid: rgba(185, 28, 28, 0.98);
  --sidebar-bg-end: rgba(153, 27, 27, 0.98);
  --sidebar-text: rgba(254, 242, 242, 0.9);
  --sidebar-text-hover: #ffffff;
  --sidebar-border: rgba(251, 191, 36, 0.3);
  --sidebar-border-hover: rgba(251, 191, 36, 0.6);
  --sidebar-hover-bg: rgba(251, 191, 36, 0.15);
  --sidebar-active-bg: linear-gradient(135deg, rgba(251, 191, 36, 0.4) 0%, rgba(245, 158, 11, 0.35) 100%);
  --sidebar-accent: #fbbf24;
  --sidebar-accent-secondary: #f59e0b;
}

/* Ice */
[data-theme="ice"] {
  --bg-color: #0c4a6e;
  --bg-secondary: #075985;
  --nav-color: #0369a1;
  --accent-color: #7dd3fc;
  --accent-secondary: #0ea5e9;
  --text-color: #e0f2fe;
  --text-muted: #bae6fd;
  --border-color: #0ea5e9;
  --hover-bg: #075985;
  --btn-bg: #0ea5e9;
  --btn-hover-bg: #7dd3fc;
  
  --glass-bg: rgba(7, 89, 133, 0.8);
  --glass-border: rgba(125, 211, 252, 0.3);
  --shadow-glow: 0 0 25px rgba(125, 211, 252, 0.4);
  
  /* Sidebar - Lighter than background */
  --sidebar-bg-start: rgba(7, 89, 133, 0.98);
  --sidebar-bg-mid: rgba(3, 105, 161, 0.98);
  --sidebar-bg-end: rgba(7, 89, 133, 0.98);
  --sidebar-text: rgba(224, 242, 254, 0.9);
  --sidebar-text-hover: #ffffff;
  --sidebar-border: rgba(125, 211, 252, 0.3);
  --sidebar-border-hover: rgba(125, 211, 252, 0.6);
  --sidebar-hover-bg: rgba(125, 211, 252, 0.15);
  --sidebar-active-bg: linear-gradient(135deg, rgba(125, 211, 252, 0.35) 0%, rgba(14, 165, 233, 0.3) 100%);
  --sidebar-accent: #7dd3fc;
  --sidebar-accent-secondary: #0ea5e9;
}

/* Retro */
[data-theme="retro"] {
  --bg-color: #422006;
  --bg-secondary: #713f12;
  --nav-color: #854d0e;
  --accent-color: #fbbf24;
  --accent-secondary: #f59e0b;
  --text-color: #fef3c7;
  --text-muted: #fde68a;
  --border-color: #f59e0b;
  --hover-bg: #713f12;
  --btn-bg: #f59e0b;
  --btn-hover-bg: #fbbf24;
  
  --glass-bg: rgba(113, 63, 18, 0.8);
  --glass-border: rgba(251, 191, 36, 0.3);
  --shadow-glow: 0 0 20px rgba(251, 191, 36, 0.3);
  
  /* Sidebar - Lighter than background */
  --sidebar-bg-start: rgba(113, 63, 18, 0.98);
  --sidebar-bg-mid: rgba(133, 77, 14, 0.98);
  --sidebar-bg-end: rgba(113, 63, 18, 0.98);
  --sidebar-text: rgba(254, 243, 199, 0.9);
  --sidebar-text-hover: #ffffff;
  --sidebar-border: rgba(251, 191, 36, 0.3);
  --sidebar-border-hover: rgba(251, 191, 36, 0.6);
  --sidebar-hover-bg: rgba(251, 191, 36, 0.15);
  --sidebar-active-bg: linear-gradient(135deg, rgba(251, 191, 36, 0.35) 0%, rgba(245, 158, 11, 0.3) 100%);
  --sidebar-accent: #fbbf24;
  --sidebar-accent-secondary: #f59e0b;
}