/**
 * themes.css - Theme Variations
 * Different color schemes and theme-specific overrides
 */

/* ==========================================================================
   LIGHT THEME
   ========================================================================== */

[data-theme='light'] {
  /* Backgrounds */
  --bg-primary: linear-gradient(135deg, #f0f2f5 0%, #ffffff 100%);
  --bg-secondary: rgba(0, 0, 0, 0.02);
  --bg-tertiary: rgba(0, 0, 0, 0.04);
  --bg-elevated: rgba(255, 255, 255, 0.95);
  --bg-overlay: rgba(255, 255, 255, 0.9);
  --bg-modal: rgba(255, 255, 255, 0.98);
  --bg-hover: rgba(0, 0, 0, 0.05);
  --bg-active: rgba(0, 0, 0, 0.08);
  --bg-disabled: rgba(0, 0, 0, 0.02);
 
 /* Text Colors */
 --text-primary: #0a0a0a;
 --text-secondary: #525252;
 --text-tertiary: #737373;
 --text-disabled: #a3a3a3;
 --text-inverse: #ffffff;
 
 /* Border Colors */
 --border-primary: rgba(0, 0, 0, 0.08);
 --border-secondary: rgba(0, 0, 0, 0.12);
 --border-tertiary: rgba(0, 0, 0, 0.04);
 
 /* Component Specific */
 --card-bg: rgba(255, 255, 255, 0.8);
 --input-bg: rgba(255, 255, 255, 0.9);
 --sidebar-bg: rgba(248, 248, 250, 0.98);
 --player-bg: rgba(255, 255, 255, 0.98);
 
 /* Shadows - Lighter for light theme */
 --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
 --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
 --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
  NEON THEME
  ========================================================================== */

[data-theme='neon'] {
 /* Brand Colors Override */
 --color-primary: #00ffff;
 --color-primary-light: #66ffff;
 --color-primary-dark: #00cccc;
 --color-secondary: #ff00ff;
 --color-secondary-light: #ff66ff;
 --color-secondary-dark: #cc00cc;
 
 /* Backgrounds */
 --bg-primary: linear-gradient(135deg, #0a0a0f 0%, #1a0a1f 100%);
 --bg-secondary: rgba(0, 255, 255, 0.03);
 --bg-tertiary: rgba(255, 0, 255, 0.03);
 --bg-elevated: rgba(10, 10, 20, 0.95);
 --bg-overlay: rgba(0, 0, 0, 0.85);
 --bg-modal: rgba(10, 10, 20, 0.98);
 --bg-hover: rgba(0, 255, 255, 0.1);
 --bg-active: rgba(0, 255, 255, 0.15);
 
 /* Text Colors */
 --text-primary: #ffffff;
 --text-secondary: #00ffff;
 --text-tertiary: #ff00ff;
 --text-link: #00ffff;
 --text-link-hover: #66ffff;
 
 /* Border Colors */
 --border-primary: rgba(0, 255, 255, 0.2);
 --border-secondary: rgba(255, 0, 255, 0.2);
 --border-focus: #00ffff;
 
 /* Component Specific */
 --button-primary-bg: linear-gradient(135deg, #ff00ff 0%, #00ffff 100%);
 
 /* Neon Glow Effects */
 --glow-cyan: 0 0 20px rgba(0, 255, 255, 0.5);
 --glow-magenta: 0 0 20px rgba(255, 0, 255, 0.5);
 --glow-intense: 0 0 30px rgba(0, 255, 255, 0.8), 0 0 60px rgba(0, 255, 255, 0.4);
 
 /* Shadows with Glow */
 --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5), var(--glow-cyan);
 --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5), var(--glow-cyan);
 --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5), var(--glow-intense);
 --shadow-primary: var(--glow-cyan);
 --shadow-secondary: var(--glow-magenta);
}

/* Neon Theme Specific Styles */
[data-theme='neon'] .btn-primary,
[data-theme='neon'] .player-play-btn,
[data-theme='neon'] .nav-item.active {
 box-shadow: var(--glow-cyan);
 border: 1px solid var(--color-primary);
}

[data-theme='neon'] .song-card:hover {
 box-shadow: var(--glow-cyan);
 border-color: var(--color-primary);
}

[data-theme='neon'] input:focus,
[data-theme='neon'] textarea:focus,
[data-theme='neon'] select:focus {
 box-shadow: 0 0 0 2px var(--color-primary), var(--glow-cyan);
}

/* Neon Text Animations */
@keyframes neon-flicker {
 0%, 100% { opacity: 1; }
 41.99% { opacity: 1; }
 42% { opacity: 0.8; }
 43% { opacity: 0.8; }
 43.01% { opacity: 1; }
 47.99% { opacity: 1; }
 48% { opacity: 0.9; }
 49% { opacity: 1; }
}

[data-theme='neon'] .logo {
 animation: neon-flicker 2s infinite;
 text-shadow: var(--glow-intense);
}

/* ==========================================================================
  LO-FI THEME
  ========================================================================== */

[data-theme='lofi'] {
 /* Warm Color Palette */
 --color-primary: #d4a574;
 --color-primary-light: #e2b896;
 --color-primary-dark: #b58c5a;
 --color-secondary: #c17767;
 --color-secondary-light: #d19489;
 --color-secondary-dark: #a15c4e;
 
 /* Backgrounds - Warm and Muted */
 --bg-primary: linear-gradient(135deg, #2d1b20 0%, #4a2c2a 100%);
 --bg-secondary: rgba(212, 165, 116, 0.05);
 --bg-tertiary: rgba(193, 119, 103, 0.05);
 --bg-elevated: rgba(45, 27, 32, 0.95);
 --bg-overlay: rgba(45, 27, 32, 0.85);
 --bg-modal: rgba(45, 27, 32, 0.98);
 --bg-hover: rgba(212, 165, 116, 0.1);
 --bg-active: rgba(212, 165, 116, 0.15);
 
 /* Text Colors - Softer */
 --text-primary: #f5e6d3;
 --text-secondary: #d4a574;
 --text-tertiary: #a68b6f;
 --text-link: #d4a574;
 --text-link-hover: #e2b896;
 
 /* Border Colors - Warm */
 --border-primary: rgba(212, 165, 116, 0.15);
 --border-secondary: rgba(212, 165, 116, 0.25);
 --border-focus: #d4a574;
 
 /* Component Specific */
 --button-primary-bg: linear-gradient(135deg, #c17767 0%, #d4a574 100%);
 --card-bg: rgba(212, 165, 116, 0.03);
 --sidebar-bg: rgba(45, 27, 32, 0.98);
 --player-bg: rgba(40, 24, 28, 0.98);
 
 /* Soft Shadows */
 --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
 --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.25);
 --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3);
 --shadow-primary: 0 4px 12px rgba(212, 165, 116, 0.2);
 --shadow-secondary: 0 4px 12px rgba(193, 119, 103, 0.2);
 
 /* Lo-fi Specific */
 --noise-opacity: 0.02;
 --paper-texture: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="noise"><feTurbulence baseFrequency="0.9" numOctaves="4" /></filter><rect width="100" height="100" filter="url(%23noise)" opacity="0.02"/></svg>');
}

/* Lo-fi Theme Specific Styles */
[data-theme='lofi'] body::before {
 content: '';
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image: var(--paper-texture);
 pointer-events: none;
 z-index: 1;
 opacity: var(--noise-opacity);
}

[data-theme='lofi'] .song-card,
[data-theme='lofi'] .card {
 position: relative;
 background: var(--card-bg);
}

[data-theme='lofi'] .song-card::before,
[data-theme='lofi'] .card::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-image: var(--paper-texture);
 pointer-events: none;
 border-radius: inherit;
 opacity: 0.05;
}

/* ==========================================================================
  HIGH CONTRAST THEME
  ========================================================================== */

[data-theme='high-contrast'] {
 /* Maximum Contrast Colors */
 --color-primary: #00ff00;
 --color-secondary: #ffff00;
 
 /* Backgrounds - Pure Black/White */
 --bg-primary: #000000;
 --bg-secondary: #111111;
 --bg-tertiary: #222222;
 --bg-elevated: #000000;
 --bg-overlay: rgba(0, 0, 0, 0.95);
 --bg-modal: #000000;
 --bg-hover: #333333;
 --bg-active: #444444;
 
 /* Text Colors - Maximum Contrast */
 --text-primary: #ffffff;
 --text-secondary: #ffff00;
 --text-tertiary: #00ff00;
 --text-disabled: #666666;
 --text-link: #00ffff;
 --text-link-hover: #ffffff;
 
 /* Border Colors - Thick and Visible */
 --border-primary: #ffffff;
 --border-secondary: #ffff00;
 --border-focus: #00ff00;
 --border-width-1: 2px;
 --border-width-2: 3px;
 
 /* No shadows for clarity */
 --shadow-sm: none;
 --shadow-md: none;
 --shadow-lg: none;
 --shadow-xl: none;
}

/* High Contrast Specific Styles */
[data-theme='high-contrast'] *:focus {
 outline: 3px solid var(--color-primary);
 outline-offset: 2px;
}

[data-theme='high-contrast'] button,
[data-theme='high-contrast'] a,
[data-theme='high-contrast'] .card,
[data-theme='high-contrast'] input,
[data-theme='high-contrast'] select,
[data-theme='high-contrast'] textarea {
 border: var(--border-width-1) solid var(--border-primary);
}

/* ==========================================================================
  THEME TRANSITION ANIMATIONS
  ========================================================================== */

/* Smooth theme transitions */
* {
 transition: background-color var(--duration-normal) var(--ease-in-out),
             border-color var(--duration-normal) var(--ease-in-out),
             color var(--duration-normal) var(--ease-in-out);
}

/* Prevent transition on page load */
.preload * {
 transition: none !important;
}

/* ==========================================================================
  SYSTEM PREFERENCE DETECTION
  ========================================================================== */

/* Auto theme based on system preference */
@media (prefers-color-scheme: light) {
 [data-theme='auto'] {
   /* Apply light theme variables */
   --bg-primary: linear-gradient(135deg, #f0f2f5 0%, #ffffff 100%);
   --bg-secondary: rgba(0, 0, 0, 0.02);
   --text-primary: #0a0a0a;
   --text-secondary: #525252;
   /* ... other light theme variables ... */
 }
}

@media (prefers-color-scheme: dark) {
 [data-theme='auto'] {
   /* Default dark theme is already applied */
 }
}

/* ==========================================================================
  PRINT THEME
  ========================================================================== */

@media print {
 :root {
   --bg-primary: #ffffff;
   --text-primary: #000000;
   --text-secondary: #333333;
   --border-primary: #000000;
 }
 
 * {
   color: var(--text-primary) !important;
   background: transparent !important;
   box-shadow: none !important;
 }
}

/* ==========================================================================
  ACCESSIBILITY PREFERENCES
  ========================================================================== */

/* Reduced Transparency */
@media (prefers-reduced-transparency: reduce) {
 :root {
   --bg-secondary: #1a1a2e;
   --bg-tertiary: #16213e;
   --bg-elevated: #1a1a2e;
   --bg-overlay: #000000;
   --bg-modal: #1a1a2e;
 }
}

/* Increased Contrast */
@media (prefers-contrast: high) {
 :root {
   --text-secondary: #cccccc;
   --text-tertiary: #aaaaaa;
   --border-primary: #ffffff;
   --border-secondary: #cccccc;
 }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
 :root {
   --duration-fast: 0;
   --duration-normal: 0;
   --duration-slow: 0;
   --duration-slower: 0;
   --duration-slowest: 0;
 }
}