:root {
  /* Core palette */
  --bg-body: #0f1117;
  --bg-surface: #161920;
  --bg-surface-hover: #1b1f27;
  --bg-elevated: #1e222c;
  --bg-overlay: rgba(0,0,0,0.65);

  /* Text */
  --text-primary: #e6e8ef;
  --text-secondary: #a3a8b8;
  --text-muted: #6b7280;
  --text-inverse: #0b0d12;

  /* Accent */
  --accent: #5e9eff;
  --accent-hover: #7cb2ff;
  --accent-active: #3d8bf7;
  --accent-soft: rgba(94,158,255,0.18);

  /* Borders */
  --border: #252a36;
  --border-strong: #2e3546;

  /* Feedback */
  --danger: #f25c5c;
  --danger-active: #b91c1c;
  --danger-hover: #e04e4e;
  --danger-soft: rgba(242,92,92,0.18);
  --success: #3ddc84;
  --success-soft: rgba(61,220,132,0.18);
  --warn: #ffb300;

  /* Player */
  --player-bg: #0b0d12;
  --player-stage-bg: #000;
  --player-progress-bg: #2e3546;
  --player-progress-buffered: #4a5367;
  --player-progress-fill: #5e9eff;
  --player-thumb: #7cb2ff;
  --overlay-dim: rgba(0,0,0,0.35);
  --overlay-button-bg: rgba(255,255,255,0.9);
  --overlay-button-color: #000;

  /* Selection */
  --selected-bg: rgba(94,158,255,0.25);
  --selected-border: #5e9eff;
  --playing-bg: rgba(61,220,132,0.18);
  --playing-border: #3ddc84;

  /* Layout */
  --header-height: 3.25rem;
  --sidebar-width: 16rem;
  --gap: 0.75rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.45);
  --shadow-lg: 0 10px 28px rgba(0,0,0,0.55);

  /* Transitions */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}

/* Light theme overrides */
[data-theme="light"] {
  --bg-body: #f4f5f8;
  --bg-surface: #ffffff;
  --bg-surface-hover: #f0f2f7;
  --bg-elevated: #ffffff;
  --bg-overlay: rgba(0,0,0,0.35);

  --text-primary: #12131a;
  --text-secondary: #4a4f5e;
  --text-muted: #8b90a0;
  --text-inverse: #ffffff;

  --accent: #2b6cb0;
  --accent-hover: #1a5490;
  --accent-active: #17447a;
  --accent-soft: rgba(43,108,176,0.14);

  --border: #d6dae4;
  --border-strong: #c3c9d6;

  --danger: #c53030;
  --danger-soft: rgba(197,48,48,0.14);
  --success: #258855;
  --success-soft: rgba(37,136,85,0.14);

  --player-bg: #0b0d12;
  --player-stage-bg: #000;
  --player-progress-bg: #d6dae4;
  --player-progress-buffered: #aab4c4;
  --player-progress-fill: #2b6cb0;
  --player-thumb: #1a5490;
  --overlay-dim: rgba(0,0,0,0.35);
  --overlay-button-bg: rgba(255,255,255,0.9);
  --overlay-button-color: #000;

  --selected-bg: rgba(43,108,176,0.18);
  --selected-border: #2b6cb0;
  --playing-bg: rgba(37,136,85,0.14);
  --playing-border: #258855;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg: 0 10px 28px rgba(0,0,0,0.12);
}