/* 🎨 SHAMAN Theme System */

/* 🌊 Default Theme (Dark/Deep Sea) */
.theme-default {
  --bg-primary: var(--deep-sea-blue);
  --bg-secondary: var(--deep-sea-blue-light);
  --bg-overlay: rgba(0, 31, 45, 0.9);
  --text-primary: var(--terminal-green);
  --text-secondary: var(--terminal-green-light);
  --text-accent: var(--electric-surf-blue);
  --text-highlight: var(--offshore-yellow);
  --text-alert: var(--rip-current-pink);
}

/* 🏄 Surf Mode (High Contrast) */
.theme-surf {
  --bg-primary: #000;
  --bg-secondary: var(--deep-sea-blue-dark);
  --bg-overlay: rgba(0, 0, 0, 0.95);
  --text-primary: var(--terminal-green);
  --text-secondary: var(--electric-surf-blue);
  --text-accent: var(--offshore-yellow);
  --text-highlight: var(--rip-current-pink);
  --text-alert: #ff3366;
}

/* 🌅 Dawn Patrol (Light Theme) */
.theme-dawn {
  --bg-primary: #f0f8ff;
  --bg-secondary: #e6f3ff;
  --bg-overlay: rgba(240, 248, 255, 0.95);
  --text-primary: var(--deep-sea-blue);
  --text-secondary: var(--deep-sea-blue-light);
  --text-accent: var(--electric-surf-blue-dark);
  --text-highlight: #ff6600;
  --text-alert: #cc0066;

  /* Invert shadows for light theme */
  --shadow-sm: 0 1px 2px rgba(0, 31, 45, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 31, 45, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 31, 45, 0.15);
  --shadow-xl: 0 20px 25px rgba(0, 31, 45, 0.2);
}

/* 🌙 Night Session (Ultra Dark) */
.theme-night {
  --bg-primary: #000;
  --bg-secondary: #001122;
  --bg-overlay: rgba(0, 0, 0, 0.98);
  --text-primary: var(--terminal-green);
  --text-secondary: var(--terminal-green-dark);
  --text-accent: var(--electric-surf-blue);
  --text-highlight: var(--offshore-yellow);
  --text-alert: var(--rip-current-pink);

  /* Enhanced glow effects for night theme */
  --shadow-terminal: 0 0 30px var(--terminal-green);
  --shadow-electric: 0 0 30px var(--electric-surf-blue);
}

/* 🧙‍♂️ Shaman Mode (Mystical) */
.theme-shaman {
  --bg-primary: linear-gradient(135deg, #001122 0%, #002244 50%, #001122 100%);
  --bg-secondary: linear-gradient(135deg, #002244 0%, #003366 50%, #002244 100%);
  --bg-overlay: rgba(0, 17, 34, 0.95);
  --text-primary: var(--terminal-green);
  --text-secondary: var(--electric-surf-blue);
  --text-accent: var(--rip-current-pink);
  --text-highlight: var(--offshore-yellow);
  --text-alert: #ff6666;

  /* Mystical effects */
  --shadow-mystical: 0 0 20px var(--rip-current-pink);
  --glow-intensity: 1.5;
}

/* 🎯 Theme Toggle Animations */
.theme-transition {
  transition:
    background-color var(--transition-slow),
    color var(--transition-slow),
    border-color var(--transition-slow),
    box-shadow var(--transition-slow);
}

/* 🌈 Theme-specific Component Overrides */

/* Shaman Theme Enhancements */
.theme-shaman .auth-logo,
.theme-shaman .loading-logo {
  animation: glitch 2s linear infinite, float 3s ease-in-out infinite;
  filter: drop-shadow(0 0 10px var(--rip-current-pink));
}

.theme-shaman .btn:hover {
  box-shadow:
    var(--shadow-lg),
    0 0 20px currentColor;
}

.theme-shaman .terminal-window {
  background: linear-gradient(135deg,
    rgba(0, 17, 34, 0.8) 0%,
    rgba(0, 34, 68, 0.8) 50%,
    rgba(0, 17, 34, 0.8) 100%);
  backdrop-filter: blur(10px);
}

/* Night Theme Enhancements */
.theme-night .loading-screen {
  background: radial-gradient(ellipse at center, #001122 0%, #000000 100%);
}

.theme-night .card,
.theme-night .auth-container {
  box-shadow:
    var(--shadow-xl),
    inset 0 1px 0 rgba(102, 255, 204, 0.1);
}

/* Dawn Theme Enhancements */
.theme-dawn .loading-screen {
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
}

.theme-dawn .auth-container {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

.theme-dawn .btn {
  color: white;
}

.theme-dawn .btn-secondary {
  color: var(--deep-sea-blue);
}

.theme-dawn .btn-secondary:hover {
  color: white;
}

/* 🎮 Theme Selector */
.theme-selector {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  z-index: var(--z-tooltip);
  background: var(--bg-overlay);
  backdrop-filter: blur(10px);
  border: 1px solid var(--terminal-green-dark);
  border-radius: var(--border-radius-lg);
  padding: var(--space-sm);
  box-shadow: var(--shadow-lg);
  display: none; /* Hidden by default, can be enabled via JS */
}

.theme-selector.open {
  display: block;
  animation: slideInUp 0.3s ease-out;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.theme-option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
  font-family: var(--font-secondary);
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.theme-option:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.theme-option.active {
  background: var(--electric-surf-blue);
  color: var(--deep-sea-blue);
}

.theme-preview {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--terminal-green-dark);
}

.theme-preview.default {
  background: linear-gradient(45deg, var(--deep-sea-blue) 50%, var(--terminal-green) 50%);
}

.theme-preview.surf {
  background: linear-gradient(45deg, #000 50%, var(--offshore-yellow) 50%);
}

.theme-preview.dawn {
  background: linear-gradient(45deg, #f0f8ff 50%, var(--electric-surf-blue) 50%);
}

.theme-preview.night {
  background: linear-gradient(45deg, #000 50%, var(--terminal-green) 50%);
}

.theme-preview.shaman {
  background: linear-gradient(45deg, var(--deep-sea-blue) 25%, var(--rip-current-pink) 25%, var(--rip-current-pink) 50%, var(--terminal-green) 50%, var(--terminal-green) 75%, var(--offshore-yellow) 75%);
  animation: rainbow 2s linear infinite;
}

@keyframes rainbow {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* 🎯 Accessibility Enhancements */
@media (prefers-reduced-motion: reduce) {
  .theme-transition,
  .glitch,
  .wave-effect,
  .animate-float,
  .animate-pulse,
  .animate-bounce {
    animation: none !important;
  }

  .btn:hover,
  .card:hover {
    transform: none !important;
  }
}

@media (prefers-contrast: high) {
  :root {
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --border-width: 2px;
  }

  .btn,
  .form-input,
  .card {
    border-width: 2px;
  }
}

/* 🌟 Special Effects for Themes */
.theme-shaman .ascii-banner {
  animation: glitch 3s linear infinite;
}

.theme-night .spinner {
  box-shadow: 0 0 20px var(--terminal-green);
}

.theme-surf .btn:hover {
  text-shadow: 0 0 10px currentColor;
}

/* 💾 Theme Persistence */
.theme-saved::after {
  content: '💾 Theme saved';
  position: fixed;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  background: var(--terminal-green);
  color: var(--deep-sea-blue);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius-md);
  font-family: var(--font-secondary);
  font-size: var(--font-sm);
  z-index: var(--z-tooltip);
  animation: slideInUp 0.5s ease-out, fadeOut 0.5s ease-out 2s forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
}