/* ── Dark mode ──────────────────────────────────── */
:root,
[data-theme="dark"] {
  --color_bg: var(--palette_black);
  --color_surface: hsla(0, 0%, 100%, 0.1);
  --color_surface_hover: hsla(0, 0%, 100%, 0.2);
  --color_badge: hsla(0, 0%, 10%, 1);
  --color_divider: var(--palette_grey_dark);
  --color_text: var(--palette_white);
  --color_text_muted: hsla(0, 0%, 100%, 0.5);
  --color_knob: var(--palette_white);
  --loop_bg_color: hsla(0, 0%, 100%, 0.25);
}

/* ── Light mode ──────────────────────────────────────────── */
[data-theme="light"] {
  --color_bg: #f0ede8;
  --color_surface: hsla(0, 0%, 0%, 0.07);
  --color_surface_hover: hsla(0, 0%, 0%, 0.13);
  --color_badge: hsla(0, 0%, 0%, 0.08);
  --color_divider: hsla(0, 0%, 0%, 0.2);
  --color_text: var(--palette_black);
  --color_text_muted: #555555;
  --color_knob: var(--palette_black);
  --loop_bg_color: var(--palette_black);
}