/* ==========================================================================
   ☀️ LIGHT THEME - Cyberpunk Light Edition
   Für die 1% die Light Mode bevorzugen - aber stylisch!
   ========================================================================== */

html:not(.dark-mode) {
  /* Light Space Background */
  --bg-void: #f0f4f8;
  --bg-deep: #e8eef5;
  --bg-surface: #ffffff;
  --bg-elevated: #f8fafc;
  --bg-card: #ffffff;
  --bg-hover: #f1f5f9;
  
  /* Text Colors */
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-glow: rgba(30, 41, 59, 0.9);
  
  /* Neon Colors - bleiben gleich krass! */
  --neon-cyan: #0891b2;
  --neon-cyan-glow: rgba(8, 145, 178, 0.4);
  --neon-cyan-dim: rgba(8, 145, 178, 0.1);
  
  --neon-magenta: #c026d3;
  --neon-magenta-glow: rgba(192, 38, 211, 0.4);
  --neon-magenta-dim: rgba(192, 38, 211, 0.1);
  
  --neon-green: #16a34a;
  --neon-green-glow: rgba(22, 163, 74, 0.4);
  
  --neon-red: #dc2626;
  --neon-orange: #ea580c;
  
  /* Borders */
  --border-glow: rgba(8, 145, 178, 0.3);
  --border-subtle: rgba(148, 163, 184, 0.3);
  
  /* Shadows */
  --shadow-glow: 0 0 20px var(--neon-cyan-glow);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.12);
  
  /* Gradients */
  --gradient-cyber: linear-gradient(135deg, var(--neon-cyan) 0%, var(--neon-magenta) 100%);
  --gradient-dark: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-deep) 100%);
}

/* Light Mode Specific Styles */
html:not(.dark-mode) body {
  background-color: var(--bg-void);
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(8, 145, 178, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(192, 38, 211, 0.08) 0%, transparent 50%);
}

/* Header in Light Mode */
html:not(.dark-mode) .header {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--border-glow);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Cards in Light Mode */
html:not(.dark-mode) .card,
html:not(.dark-mode) .main-content > section,
html:not(.dark-mode) .gq-dashboard,
html:not(.dark-mode) .gq-quiz-container,
html:not(.dark-mode) .gq-quest-card {
  background: var(--bg-card);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-card);
}

html:not(.dark-mode) .card:hover,
html:not(.dark-mode) .main-content > section:hover {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 30px var(--neon-cyan-glow), var(--shadow-card);
}

/* Tables in Light Mode */
html:not(.dark-mode) .comparison-table-container {
  background: var(--bg-card);
  border-color: var(--border-glow);
}

html:not(.dark-mode) th {
  background: var(--neon-cyan-dim);
  color: var(--neon-cyan);
}

html:not(.dark-mode) td {
  color: var(--text-secondary);
}

/* Code Blocks in Light Mode */
html:not(.dark-mode) pre {
  background: #1e293b;
  color: #e2e8f0;
  border-color: var(--neon-cyan);
}

html:not(.dark-mode) code {
  background: var(--neon-cyan-dim);
  color: var(--neon-cyan);
}

/* XP Bar in Light Mode */
html:not(.dark-mode) .gq-xp-bar-container {
  background: rgba(255, 255, 255, 0.98);
  border-bottom-color: var(--neon-cyan);
}

/* Achievement in Light Mode */
html:not(.dark-mode) .gq-achievement {
  background: var(--bg-card);
  box-shadow: 0 0 40px var(--neon-magenta-glow), 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Skill Tree in Light Mode */
html:not(.dark-mode) .gq-skill-tree,
html:not(.dark-mode) .gq-skill-branch,
html:not(.dark-mode) .gq-stat-card,
html:not(.dark-mode) .gq-module-item {
  background: var(--bg-elevated);
}

/* Hint Box in Light Mode */
html:not(.dark-mode) .gq-hint {
  background: rgba(8, 145, 178, 0.08);
}

/* Buttons in Light Mode */
html:not(.dark-mode) button,
html:not(.dark-mode) .nav-button {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
}

html:not(.dark-mode) button:hover,
html:not(.dark-mode) .nav-button:hover {
  background: var(--neon-cyan);
  color: white;
}

/* Secondary Button */
html:not(.dark-mode) .btn-secondary {
  border-color: var(--neon-magenta);
  color: var(--neon-magenta);
}

html:not(.dark-mode) .btn-secondary:hover {
  background: var(--neon-magenta);
  color: white;
}

/* Links in Light Mode */
html:not(.dark-mode) a {
  color: var(--neon-cyan);
}

html:not(.dark-mode) a:hover {
  color: var(--neon-magenta);
}

/* Navigation Links */
html:not(.dark-mode) .nav-link {
  color: var(--text-secondary);
}

html:not(.dark-mode) .nav-link:hover {
  color: var(--neon-cyan);
  background: var(--neon-cyan-dim);
  border-color: var(--neon-cyan);
}

/* Dropdown in Light Mode */
html:not(.dark-mode) .dropdown-menu {
  background: var(--bg-card);
  border-color: var(--border-glow);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

html:not(.dark-mode) .dropdown-menu a {
  color: var(--text-secondary);
}

html:not(.dark-mode) .dropdown-menu a:hover {
  background: var(--neon-cyan-dim);
  color: var(--neon-cyan);
}

/* Mobile Menu in Light Mode */
html:not(.dark-mode) .nav-wrapper {
  background: var(--bg-surface);
  border-left-color: var(--neon-cyan);
}

/* Scrollbar in Light Mode */
html:not(.dark-mode) ::-webkit-scrollbar-track {
  background: var(--bg-deep);
}

html:not(.dark-mode) ::-webkit-scrollbar-thumb {
  background: var(--neon-cyan-dim);
  border-color: var(--bg-deep);
}

html:not(.dark-mode) ::-webkit-scrollbar-thumb:hover {
  background: var(--neon-cyan);
}

/* Selection in Light Mode */
html:not(.dark-mode) ::selection {
  background: var(--neon-cyan);
  color: white;
}

/* Footer in Light Mode */
html:not(.dark-mode) .footer {
  background: var(--bg-deep);
  border-top-color: var(--border-subtle);
}