/* ==========================================================================
   Dark Theme - Cyberpunk Enhanced
   Default theme with maximum cyberpunk aesthetics
   ========================================================================== */

[data-theme="dark"] {
  /* Enhanced dark theme variables */
  --bg-primary: var(--cyber-black);
  --bg-secondary: var(--cyber-dark);
  --bg-tertiary: var(--cyber-darker);
  
  --text-primary: #ffffff;
  --text-secondary: #e0e0e0;
  --text-tertiary: #b0b0b0;
  
  --border-primary: var(--neon-cyan);
  --border-secondary: var(--neon-pink);
}

[data-theme="dark"] body {
  background: 
    radial-gradient(circle at 20% 20%, rgba(0, 255, 255, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 0, 128, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(128, 0, 255, 0.08) 0%, transparent 70%),
    linear-gradient(135deg, var(--cyber-black) 0%, var(--cyber-dark) 50%, var(--cyber-darker) 100%);
  background-attachment: fixed;
}

/* Enhanced dark mode effects */
[data-theme="dark"] .quiz-card:hover {
  box-shadow: 
    var(--glow-xl) var(--neon-cyan),
    0 25px 50px rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .glass-bg {
  background: rgba(0, 255, 255, 0.05);
}

[data-theme="dark"] .loading-screen {
  background: 
    radial-gradient(circle at center, rgba(0, 255, 255, 0.3) 0%, transparent 70%),
    var(--cyber-black);
}

/* Cyberpunk grid enhancement for dark theme */
[data-theme="dark"] body::before {
  background-image: 
    linear-gradient(rgba(0, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Enhanced glow effects in dark theme */
[data-theme="dark"] .option-item:hover {
  background: rgba(0, 255, 255, 0.1);
  box-shadow: var(--glow-md) var(--neon-cyan);
}

[data-theme="dark"] .stat-card:hover {
  background: rgba(0, 255, 255, 0.08);
  box-shadow: var(--glow-lg) var(--neon-cyan);
}