/* ============================================
   Music Space V2 - Theme System
   Light/Dark theme with CSS Variables
   ============================================ */

/* Default Theme (Dark) */
:root {
  /* Colors */
  --bg-primary: #1a1a1a;
  --bg-secondary: #222;
  --bg-tertiary: #2a2a2a;
  --bg-elevated: #333;
  --bg-hover: rgba(255, 255, 255, 0.05);
  --bg-card: #2c2c2c;
  --bg-audio-player: rgba(0, 0, 0, 0.95);
  
  --text-primary: #fff;
  --text-secondary: #aaa;
  --text-tertiary: #888;
  --text-disabled: #666;
  
  --border-primary: #444;
  --border-secondary: #555;
  --border-hover: #666;
  
  --accent-primary: #007bff;
  --accent-hover: #0056b3;
  --accent-active: #004085;
  
  --brand-color: #f1c40f;
  --brand-hover: #f39c12;
  
  --stroke-color: #aaa;
  --stroke-hover: #fff;
  --stroke-active: #007bff;
  --stroke-disabled: #555;
  
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5);

  /* Dropdown surfaces */
  --dropdown-bg: #2f2f2f;
  --dropdown-border: rgba(255, 255, 255, 0.08);
  --dropdown-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* Light Theme */
[data-theme="light"] {
  --bg-primary: #f7f7f7;
  --bg-secondary: #fff;
  --bg-tertiary: #f0f0f0;
  --bg-elevated: #e8e8e8;
  --bg-hover: rgba(0, 0, 0, 0.05);
  --bg-card: #f9f9f9;
  --bg-audio-player: rgba(0, 0, 0, 0.95);
  
  --text-primary: #222;
  --text-secondary: #555;
  --text-tertiary: #777;
  --text-disabled: #aaa;
  
  --border-primary: #ddd;
  --border-secondary: #ccc;
  --border-hover: #999;
  
  --accent-primary: #007bff;
  --accent-hover: #0056b3;
  --accent-active: #004085;
  
  --brand-color: #e6b800;
  --brand-hover: #cc9900;
  
  --stroke-color: #555;
  --stroke-hover: #222;
  --stroke-active: #007bff;
  --stroke-disabled: #ccc;
  
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.2);

  /* Dropdown surfaces */
  --dropdown-bg: #ffffff;
  --dropdown-border: rgba(0, 0, 0, 0.07);
  --dropdown-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

/* Ensure html and body use theme colors - immediately applied when CSS loads */
html {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* Smooth theme transitions */
body,
.main-v2-app-container,
.main-v2-sidebar,
.main-v2-main-content,
.main-v2-top-nav {
  transition: background-color var(--transition-normal),
              color var(--transition-normal),
              border-color var(--transition-normal);
}