:root {
  --color-bg: #050816;
  --color-panel: rgba(11, 16, 26, 0.78);
  --color-panel-strong: rgba(11, 16, 26, 0.92);
  --color-border: rgba(255, 255, 255, 0.1);
  --color-text: #e5e7eb;
  --color-muted: #9ca3af;
  --color-accent: #0ea5e9;
  --color-accent-soft: rgba(14, 165, 233, 0.2);
  --color-accent-shadow: rgba(14, 165, 233, 0.36);
  --color-spot: #a855f7;
  --color-selection: rgba(168, 85, 247, 0.24);
}

:root[data-theme="citrus-wave"],
:root[data-theme="skyline-glow"] {
  --color-bg: #ffffff;
  --color-panel: rgba(255, 255, 255, 0.94);
  --color-panel-strong: #ffffff;
  --color-border: rgba(15, 23, 42, 0.12);
  --color-text: #0f172a;
  --color-muted: #475569;
  --color-accent: #2563eb;
  --color-accent-soft: rgba(37, 99, 235, 0.16);
  --color-accent-shadow: rgba(37, 99, 235, 0.3);
  --color-spot: #7c3aed;
  --color-selection: rgba(124, 58, 237, 0.14);
  --tag-overlay-bg: #ffffff;
  --tag-overlay-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* Light theme text + border overrides for dark utility classes */
:root[data-theme="citrus-wave"],
:root[data-theme="skyline-glow"] {
  --surface-soft: rgba(255, 255, 255, 0.96);
  --surface-muted: rgba(15, 23, 42, 0.05);
  --border-soft: rgba(15, 23, 42, 0.16);
}

:root[data-theme="citrus-wave"] .text-slate-500,
:root[data-theme="skyline-glow"] .text-slate-500,
:root[data-theme="citrus-wave"] .text-slate-600,
:root[data-theme="skyline-glow"] .text-slate-600 {
  color: var(--color-text) !important;
}

:root[data-theme="citrus-wave"] .text-white,
:root[data-theme="skyline-glow"] .text-white,
:root[data-theme="citrus-wave"] .text-slate-200,
:root[data-theme="skyline-glow"] .text-slate-200,
:root[data-theme="citrus-wave"] .text-slate-300,
:root[data-theme="skyline-glow"] .text-slate-300,
:root[data-theme="citrus-wave"] .text-slate-400,
:root[data-theme="skyline-glow"] .text-slate-400 {
  color: var(--color-text) !important;
}

:root[data-theme="citrus-wave"] .text-slate-500,
:root[data-theme="skyline-glow"] .text-slate-500,
:root[data-theme="citrus-wave"] .text-slate-600,
:root[data-theme="skyline-glow"] .text-slate-600 {
  color: var(--color-muted) !important;
}

:root[data-theme="citrus-wave"] .bg-black\/30,
:root[data-theme="skyline-glow"] .bg-black\/30,
:root[data-theme="citrus-wave"] .bg-black\/40,
:root[data-theme="skyline-glow"] .bg-black\/40,
:root[data-theme="citrus-wave"] .bg-black\/50,
:root[data-theme="skyline-glow"] .bg-black\/50,
:root[data-theme="citrus-wave"] .bg-slate-700\/50,
:root[data-theme="skyline-glow"] .bg-slate-700\/50,
:root[data-theme="citrus-wave"] .bg-slate-800,
:root[data-theme="skyline-glow"] .bg-slate-800,
:root[data-theme="citrus-wave"] .bg-slate-800\/50,
:root[data-theme="skyline-glow"] .bg-slate-800\/50,
:root[data-theme="citrus-wave"] .bg-slate-900\/80,
:root[data-theme="skyline-glow"] .bg-slate-900\/80 {
  background-color: var(--surface-soft) !important;
  color: var(--color-text) !important;
}

:root[data-theme="citrus-wave"] .bg-white\/5,
:root[data-theme="skyline-glow"] .bg-white\/5,
:root[data-theme="citrus-wave"] .bg-white\/10,
:root[data-theme="skyline-glow"] .bg-white\/10 {
  background-color: var(--surface-muted) !important;
}

:root[data-theme="citrus-wave"] .border-white\/5,
:root[data-theme="skyline-glow"] .border-white\/5,
:root[data-theme="citrus-wave"] .border-white\/10,
:root[data-theme="skyline-glow"] .border-white\/10 {
  border-color: var(--border-soft) !important;
}

/* Dropdown styling for dark theme */
.album-select {
  background-color: var(--color-panel);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.album-select:focus {
  border-color: var(--color-accent);
  outline: none;
}

.album-select option {
  background-color: rgba(22, 28, 45, 0.98);
  color: var(--color-text);
}

/* Sliders */
:root[data-theme="citrus-wave"] input[type=range]::-webkit-slider-thumb,
:root[data-theme="skyline-glow"] input[type=range]::-webkit-slider-thumb {
  background: var(--color-accent);
  box-shadow: 0 0 10px var(--color-accent-shadow);
}

:root[data-theme="citrus-wave"] input[type=range]::-webkit-slider-runnable-track,
:root[data-theme="skyline-glow"] input[type=range]::-webkit-slider-runnable-track {
  background: rgba(15, 23, 42, 0.12);
}

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

@media (min-width: 900px) and (max-width: 1180px) and (orientation: landscape) {
  :root {
    font-size: 14px;
  }
}

::selection {
  background: var(--color-selection);
  color: var(--color-text);
}

/* Light theme overrides for dark utility classes */
:root[data-theme="citrus-wave"],
:root[data-theme="skyline-glow"] {
  --surface-soft: rgba(255, 255, 255, 0.9);
  --surface-strong: #ffffff;
  --surface-muted: rgba(15, 23, 42, 0.04);
  --border-soft: rgba(15, 23, 42, 0.12);
}

:root[data-theme="citrus-wave"] .bg-slate-900\/50,
:root[data-theme="citrus-wave"] .bg-slate-900\/60,
:root[data-theme="citrus-wave"] .bg-slate-900\/70,
:root[data-theme="citrus-wave"] .bg-slate-900\/90,
:root[data-theme="citrus-wave"] .bg-slate-900\/95,
:root[data-theme="citrus-wave"] .bg-slate-900\/40,
:root[data-theme="citrus-wave"] .bg-slate-950\/50,
:root[data-theme="citrus-wave"] .bg-slate-950\/90,
:root[data-theme="citrus-wave"] .bg-slate-900,
:root[data-theme="citrus-wave"] .bg-slate-800,
:root[data-theme="skyline-glow"] .bg-slate-900\/50,
:root[data-theme="skyline-glow"] .bg-slate-900\/60,
:root[data-theme="skyline-glow"] .bg-slate-900\/70,
:root[data-theme="skyline-glow"] .bg-slate-900\/90,
:root[data-theme="skyline-glow"] .bg-slate-900\/95,
:root[data-theme="skyline-glow"] .bg-slate-900\/40,
:root[data-theme="skyline-glow"] .bg-slate-950\/50,
:root[data-theme="skyline-glow"] .bg-slate-950\/90,
:root[data-theme="skyline-glow"] .bg-slate-900,
:root[data-theme="skyline-glow"] .bg-slate-800 {
  background-color: var(--surface-soft) !important;
  color: var(--color-text) !important;
}

:root[data-theme="citrus-wave"] .bg-black\/20,
:root[data-theme="citrus-wave"] .bg-black\/30,
:root[data-theme="citrus-wave"] .bg-black\/40,
:root[data-theme="skyline-glow"] .bg-black\/20,
:root[data-theme="skyline-glow"] .bg-black\/30,
:root[data-theme="skyline-glow"] .bg-black\/40 {
  background-color: var(--surface-soft) !important;
  color: var(--color-text) !important;
}

:root[data-theme="citrus-wave"] .bg-white\/5,
:root[data-theme="citrus-wave"] .bg-white\/10,
:root[data-theme="skyline-glow"] .bg-white\/5,
:root[data-theme="skyline-glow"] .bg-white\/10 {
  background-color: var(--surface-muted) !important;
  color: var(--color-text) !important;
}

:root[data-theme="citrus-wave"] .border-white\/5,
:root[data-theme="citrus-wave"] .border-white\/10,
:root[data-theme="skyline-glow"] .border-white\/5,
:root[data-theme="skyline-glow"] .border-white\/10 {
  border-color: var(--border-soft) !important;
}