:root {
  --page-background: radial-gradient(circle at 20% 10%,
      rgba(255, 63, 214, 0.14),
      transparent 55%),
    radial-gradient(circle at 85% 15%, rgba(33, 213, 255, 0.2), transparent 60%),
    radial-gradient(circle at 12% 80%, rgba(124, 77, 255, 0.2), transparent 55%),
    #040410;
  --brand-logo: url('../img/lfm-audio-logo.svg');
  --bg-panel: rgba(10, 12, 32, 0.85);
  --bg-panel-soft: rgba(16, 18, 44, 0.9);
  --border: rgba(255, 255, 255, 0.08);
  --primary: #ff3fd6;
  --secondary: #21d5ff;
  --accent: #7c4dff;
  --text: #f5f6ff;
  --text-muted: rgba(245, 246, 255, 0.7);
  --heading-muted: rgba(255, 255, 255, 0.5);
  --tag-border: rgba(255, 255, 255, 0.18);
  --tag-bg: rgba(255, 255, 255, 0.08);
  --badge-border: rgba(255, 255, 255, 0.14);
  --badge-bg: rgba(14, 16, 36, 0.72);
  --btn-base-bg: rgba(255, 255, 255, 0.06);
  --btn-outline-border: rgba(255, 255, 255, 0.18);
  --btn-ghost-bg: rgba(255, 255, 255, 0.05);
  --btn-ghost-hover: rgba(255, 255, 255, 0.1);
  --btn-primary-shadow: rgba(255, 63, 214, 0.4);
  --btn-primary-shadow-hover: rgba(255, 63, 214, 0.45);
  --logo-shadow: rgba(255, 63, 214, 0.25);
  --track-bg: linear-gradient(135deg, rgba(10, 12, 32, 0.82), rgba(16, 18, 44, 0.9));
  --track-border: rgba(255, 255, 255, 0.04);
  --panel-shadow: 0 18px 55px rgba(5, 7, 27, 0.4);
  --toggle-border: rgba(255, 255, 255, 0.24);
  --toggle-bg: rgba(255, 255, 255, 0.05);
  --play-border: rgba(255, 255, 255, 0.24);
  --play-bg: rgba(255, 255, 255, 0.08);
  --chip-border: rgba(255, 255, 255, 0.2);
  --chip-bg: rgba(255, 255, 255, 0.12);
  --chip-text: #ffffff;
  --track-wave-bg: linear-gradient(180deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.02));
  --wave-highlight: rgba(255, 255, 255, 0.08);
  --wave-fill: rgba(255, 255, 255, 0.32);
  --wave-stroke: rgba(255, 255, 255, 0.58);
  --wave-progress: linear-gradient(90deg,
      rgba(33, 213, 255, 0.3),
      rgba(255, 63, 214, 0.45));
  --footer-text: rgba(255, 255, 255, 0.45);
  --toast-bg: rgba(10, 12, 32, 0.92);
  --scrollbar-thumb: rgba(255, 255, 255, 0.18);
  --radius-lg: 22px;
  --radius-md: 14px;
  --transition: 0.2s ease;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --page-background: radial-gradient(circle at 10% 10%,
      rgba(255, 63, 214, 0.12),
      transparent 52%),
    radial-gradient(circle at 85% 10%, rgba(33, 213, 255, 0.16), transparent 58%),
    radial-gradient(circle at 20% 78%, rgba(124, 77, 255, 0.14), transparent 62%),
    #f7f8ff;
  --bg-panel: rgba(255, 255, 255, 0.94);
  --bg-panel-soft: rgba(255, 255, 255, 0.9);
  --border: rgba(20, 24, 50, 0.08);
  --text: #151634;
  --text-muted: rgba(21, 22, 52, 0.65);
  --heading-muted: rgba(21, 22, 52, 0.5);
  --tag-border: rgba(124, 77, 255, 0.22);
  --tag-bg: rgba(124, 77, 255, 0.12);
  --badge-border: rgba(21, 22, 52, 0.12);
  --badge-bg: rgba(237, 240, 255, 0.85);
  --btn-base-bg: rgba(21, 22, 52, 0.06);
  --btn-outline-border: rgba(21, 22, 52, 0.16);
  --btn-ghost-bg: rgba(21, 22, 52, 0.06);
  --btn-ghost-hover: rgba(21, 22, 52, 0.12);
  --btn-primary-shadow: rgba(124, 77, 255, 0.28);
  --btn-primary-shadow-hover: rgba(124, 77, 255, 0.32);
  --logo-shadow: rgba(124, 77, 255, 0.22);
  --track-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(237, 241, 255, 0.92));
  --track-border: rgba(20, 24, 50, 0.09);
  --panel-shadow: 0 18px 45px rgba(15, 20, 60, 0.12);
  --toggle-border: rgba(21, 22, 52, 0.18);
  --toggle-bg: rgba(255, 255, 255, 0.9);
  --play-border: rgba(21, 22, 52, 0.18);
  --play-bg: rgba(21, 22, 52, 0.08);
  --chip-border: rgba(124, 77, 255, 0.3);
  --chip-bg: rgba(124, 77, 255, 0.18);
  --chip-text: #1f1242;
  --track-wave-bg: linear-gradient(180deg,
      rgba(124, 77, 255, 0.12),
      rgba(33, 213, 255, 0.08));
  --wave-highlight: rgba(21, 22, 52, 0.08);
  --wave-fill: rgba(124, 77, 255, 0.28);
  --wave-stroke: rgba(33, 213, 255, 0.65);
  --wave-progress: linear-gradient(90deg,
      rgba(33, 213, 255, 0.32),
      rgba(255, 63, 214, 0.35));
  --footer-text: rgba(21, 22, 52, 0.55);
  --toast-bg: rgba(255, 255, 255, 0.92);
  --scrollbar-thumb: rgba(21, 22, 52, 0.12);
  color-scheme: light;
}