:root {
  /* Background — dark brushed steel */
  --bg-primary: #18191e;
  --bg-secondary: #1f2128;
  --bg-tertiary: #1b1d24;
  --bg-surface: #25272e;
  --bg-surface-hover: #2e3038;
  --bg-overlay: rgba(24, 25, 30, 0.88);

  /* Accent — polished chrome blue */
  --accent: #6ea8d7;
  --accent-hover: #8ec0ea;
  --accent-dim: rgba(110, 168, 215, 0.15);

  /* Text — silver tones */
  --text-primary: #d4d8e0;
  --text-secondary: #8c92a4;
  --text-muted: #585e70;
  --text-on-accent: #ffffff;

  /* Border — steel edges */
  --border-color: #33363f;
  --border-focus: var(--accent);

  /* Sizing */
  --sidebar-width: 260px;
  --header-height: 52px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Shadows — subtle metallic depth */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.36);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.44);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;

  /* Z-index layers */
  --z-sidebar: 100;
  --z-header: 200;
  --z-modal: 500;
  --z-toast: 600;
  --z-controls: 50;

  /* Player */
  --controls-height: 48px;
}