:root {
  --bg: #0d0d0f;
  --surface: #141417;
  --surface2: #1c1c21;
  --border: #2a2a32;
  --accent: #e8ff47;
  --accent2: #47c8ff;
  --text: #e8e8ee;
  --muted: #6b6b7a;
  --waveform: #3a3a48;
  --waveform-progress: #e8ff47;
  --waveform-hover: rgba(255, 255, 255, 0.85);

  /* Semantic alpha variants */
  --accent-faint: rgba(232, 255, 71, 0.06);
  --accent-subtle: rgba(232, 255, 71, 0.08);
  --accent-border: rgba(232, 255, 71, 0.35);
  --accent2-faint: rgba(71, 200, 255, 0.1);
  --accent2-border: rgba(71, 200, 255, 0.25);

  /* Status colors */
  --danger: #ff7777;
  --success: #47ff8a;

  /* Typography */
  --font-mono: 'IBM Plex Mono', monospace;
}

/* Light theme values — applied for explicit 'light' or when auto + OS prefers light */
[data-theme="light"] {
  --bg: #e2e2ea;
  --surface: #eaeaf0;
  --surface2: #e5e5ec;
  --border: #ccccda;
  --accent: #7a7800;
  --accent2: #0077cc;
  --text: #1a1a2a;
  --muted: #7878a0;
  --waveform: #b8b8cc;
  --waveform-progress: #7a7800;
  --waveform-hover: rgba(0, 0, 0, 0.75);

  --accent-faint: rgba(122, 120, 0, 0.07);
  --accent-subtle: rgba(122, 120, 0, 0.12);
  --accent-border: rgba(122, 120, 0, 0.35);
  --accent2-faint: rgba(0, 119, 204, 0.08);
  --accent2-border: rgba(0, 119, 204, 0.25);

  --danger: #cc2222;
  --success: #1a8a4a;
}

@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    --bg: #e2e2ea;
    --surface: #eaeaf0;
    --surface2: #e5e5ec;
    --border: #ccccda;
    --accent: #7a7800;
    --accent2: #0077cc;
    --text: #1a1a2a;
    --muted: #7878a0;
    --waveform: #b8b8cc;
    --waveform-progress: #7a7800;
    --waveform-hover: rgba(0, 0, 0, 0.75);

    --accent-faint: rgba(122, 120, 0, 0.07);
    --accent-subtle: rgba(122, 120, 0, 0.12);
    --accent-border: rgba(122, 120, 0, 0.35);
    --accent2-faint: rgba(0, 119, 204, 0.08);
    --accent2-border: rgba(0, 119, 204, 0.25);

    --danger: #cc2222;
    --success: #1a8a4a;
  }
}