:root {
  color-scheme: light;
  /* Design tokens */
  --color-bg: #fbfbfc;
  --color-surface-1: #ffffff;
  --color-surface-2: #f1f3f7;
  --color-surface-3: #e9edf3;
  --color-surface-glass: rgba(255, 255, 255, 0.88);
  --color-border: rgba(15, 23, 42, 0.12);
  --color-divider: rgba(15, 23, 42, 0.08);
  --color-text: #0f172a;
  --color-text-muted: rgb(15 23 42 / 72%);
  --color-heading: #0b1220;
  --brand-primary: #9c69ff;
  --color-link: var(--brand-primary);
  --color-link-hover: color-mix(in srgb, var(--brand-primary) 78%, #000000);
  --brand-accent: #ff6dff;
  --brand-gradient: linear-gradient(135deg, var(--brand-primary), color-mix(in srgb, var(--brand-accent) 70%, var(--brand-primary)));
  --surface-1: var(--color-surface-1);
  --surface-2: var(--color-surface-2);
  --surface-glass: var(--color-surface-glass);
  --input-bg-color: var(--surface-2);
  --input-text-color: var(--color-text);
  --input-border-color: var(--color-border);
  --text-muted-color: var(--color-text-muted);
  --placeholder-color: color-mix(in srgb, var(--color-text-muted) 72%, #ffffff);
  --accent-border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--color-border));
  --shadow-sm: 0 1px 4px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 6px 14px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.16);
  --shadow-none: none;
  --sidebar-width: 240px;
  --genres-panel-width: 320px;
  --genres-panel-gap: 14px;
  --max-content-width: 960px;
  --rail-gap: 32px;
  --rail-width: 300px;
  --footer-height: 180px;
  --topbar-height: clamp(64px, 8vw, 84px);
  --player-height: clamp(64px, 7vw, 88px);
  --font-family-base: "Roboto", "Mulish", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-headings: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --heading-size-h1: 2.2rem;
  --heading-size-h2: clamp(1.45rem, 2.4vw, 2rem);
  --heading-size-h3: clamp(1.25rem, 2vw, 1.7rem);
  --heading-size-h4: clamp(1.1rem, 1.6vw, 1.4rem);
  --heading-size-h5: 1.05rem;
  --heading-size-h6: 0.98rem;
  --line-height-base: 1.6;
  --topbar-btn-size: clamp(44px, 4.8vw, 52px);

  /* Bootstrap variable overrides */
  --bs-body-font-family: var(--font-family-base);
  --bs-body-font-size: 0.95rem;
  --bs-body-line-height: var(--line-height-base);
  --bs-body-bg: var(--color-bg);
  --bs-body-bg-rgb: 246, 247, 251;
  --bs-body-color: var(--color-text);
  --bs-body-color-rgb: 15, 23, 42;
  --bs-heading-color: var(--color-heading);
  --bs-link-color: var(--color-link);
  --bs-link-hover-color: var(--color-link-hover);
  --bs-link-decoration: none;
  --bs-link-hover-decoration: none;
  --bs-border-color: var(--color-border);
  --bs-border-width: 1px;
  --bs-card-bg: var(--color-surface-1);
  --bs-card-border-color: var(--color-divider);
  --bs-card-cap-bg: var(--color-surface-2);
  --bs-dropdown-bg: var(--color-surface-1);
  --bs-dropdown-border-color: var(--color-divider);
  --bs-dropdown-link-color: var(--color-text);
  --bs-dropdown-link-hover-bg: rgba(15, 23, 42, 0.06);
  --bs-dropdown-link-hover-color: var(--color-heading);
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: 156, 105, 255;
  --bs-secondary: var(--brand-accent);
  --bs-secondary-rgb: 255, 109, 255;
  --bs-success: #19c58f;
  --bs-success-rgb: 25, 197, 143;
  --bs-info: #3a9dff;
  --bs-info-rgb: 58, 157, 255;
  --bs-warning: #ffb347;
  --bs-warning-rgb: 255, 179, 71;
  --bs-danger: #ff4d6d;
  --bs-danger-rgb: 255, 77, 109;
  --bs-secondary-color: var(--color-text-muted);
  --bs-secondary-color-rgb: 15, 23, 42;
  --bs-secondary-bg: var(--color-surface-2);
  --bs-tertiary-bg: var(--color-surface-3);
  --bs-btn-padding-y: 0.6rem;
  --bs-btn-padding-x: 1.4rem;
  --bs-btn-border-radius: 999px;
  --bs-btn-font-weight: 700;
  --bs-btn-line-height: 1.1;
}

@media (min-width: 992px) {
  :root {
    --heading-size-h1: 2.2rem;
  }
}