/* Theme styles for Disposable.music */

:root {
  /* Dark theme variables (default) */
  --color-bg-primary: #121212;
  --color-bg-secondary: #1a1a1a;
  --color-bg-dark: #0a0a0a;
  --color-text-primary: #f5f5f5;
  --color-text-secondary: #cccccc;
  --color-text-muted: #999999;
  --color-accent-primary: #1DB954;  /* Spotify green */
  --color-accent-secondary: #FF00FF;  /* Restored to neon pink */
  --color-card-bg: rgba(26, 26, 26, 0.8);
  --color-card-border: rgba(255, 255, 255, 0.1);
  --color-input-bg: rgba(255, 255, 255, 0.05);
  --color-input-border: rgba(255, 255, 255, 0.1);
  --color-shadow: rgba(0, 0, 0, 0.3);
}

/* Light theme */
[data-theme="light"] {
  --color-bg-primary: #f9f9f9;
  --color-bg-secondary: #ffffff;
  --color-bg-dark: #e5e5e5;
  --color-text-primary: #121212;
  --color-text-secondary: #333333;
  --color-text-muted: #666666;
  --color-accent-primary: #1DB954;  /* Keep the same accent colors */
  --color-accent-secondary: #FF00FF;
  --color-card-bg: rgba(255, 255, 255, 0.8);
  --color-card-border: rgba(0, 0, 0, 0.1);
  --color-input-bg: rgba(0, 0, 0, 0.05);
  --color-input-border: rgba(0, 0, 0, 0.1);
  --color-shadow: rgba(0, 0, 0, 0.1);
}

/* Base styles that use theme variables */
body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

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

/* Commented out conflicting definition
.bg-secondary {
  background-color: var(--color-bg-secondary) !important;
}
*/

.bg-dark {
  background-color: var(--color-bg-dark) !important;
}

/* Button accent colors */
.bg-secondary, .bg-accent {
  background-color: #1DB954 !important; /* Direct Spotify green hex */
}

/* Specific pricing button overrides */
#pricing .bg-secondary {
  background-color: #1DB954 !important; /* Ensure green buttons in pricing */
}

#pricing .bg-white {
  background-color: white !important; /* Ensure white buttons in pricing */
}

.text-primary {
  color: var(--color-text-primary) !important;
}

.text-secondary {
  color: var(--color-accent-primary) !important;
}

.text-accent {
  color: var(--color-accent-secondary) !important;
}

/* Theme toggle button styles */
.theme-toggle {
  position: relative;
  width: 60px;
  height: 30px;
  border-radius: 15px;
  background-color: var(--color-bg-dark);
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

.theme-toggle:after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color-accent-primary);
  transition: all 0.3s ease;
  transform: translateX(0);
}

[data-theme="light"] .theme-toggle:after {
  transform: translateX(30px);
  background-color: var(--color-accent-primary);
}

.theme-toggle .sun-icon,
.theme-toggle .moon-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  transition: opacity 0.3s ease;
}

.theme-toggle .sun-icon {
  right: 8px;
  opacity: 0;
}

.theme-toggle .moon-icon {
  left: 8px;
  opacity: 1;
}

[data-theme="light"] .theme-toggle .sun-icon {
  opacity: 1;
}

[data-theme="light"] .theme-toggle .moon-icon {
  opacity: 0;
}

/* --- Specific override for category card listen button --- */
/* Targets the specific structure to maximize specificity */
.category-card .content a.play-category-btn.bg-secondary,
.category-card .content a.play-category-btn.bg-secondary\/80 { /* Escaped slash */
    background-color: #1DB954 !important; /* Direct hex */
}

/* Ensure hover is also green */
.category-card .content a.play-category-btn.hover\:bg-secondary:hover { /* Escaped colon */
    background-color: #1DB954 !important; /* Direct hex for hover */
}