:root {
  /* ── Dark theme (default) ── */
  --bg: #0f0e11;
  --surface: #1a1820;
  --surface2: #252330;
  --accent: #c8a96e;
  --accent2: #9b6fd4;
  --loop-color: #4fc4a0;
  --text: #e8e4f0;
  --muted: #7d7892; /* was #7a7590 — nudged +1% L to clear WCAG AA 4.5:1 on dark bg */
  /* Derived tokens — replaces scattered hardcodes */
  --border: #2e2a3a;
  --border-strong: #3a3550;
  --track-bg: #252330;
  --track-bg-scrub: #2a2838;
  --danger: #e07070;
  --press: #333050;
  --version-color: #3a3550;
  --accent-hover: #d9bc84;
  --accent-press: #b8934e;
  --fs-bg: #111;
  --player-h: 104px;
  --touch-min: 48px;
  /* ── Alpha-variant tokens (replaces repeated rgba literals) ── */
  --accent2-border: rgba(155,111,212,0.5);
  --accent2-text:   rgba(155,111,212,0.85);
  --accent2-bg:     rgba(155,111,212,0.07);
  --accent2-bg-md:  rgba(155,111,212,0.08);
  --accent-bg:      rgba(200,169,110,0.08);
  --loop-bg:        rgba(79,196,160,0.08);
  --loop-bg-md:     rgba(79,196,160,0.1);
  /* ── Button component tokens ── */
  --btn-h:      34px;
  --btn-radius: 8px;
  --btn-border: 1.5px;
}

/* ── Light theme ── */
[data-theme="light"] {
  --bg: #f4f2f8;
  --surface: #ffffff;
  --surface2: #ede9f4;
  --text: #1a1728;
  --muted: #71669a; /* was #7a6fa0 — darkened 3% L to clear WCAG AA 4.5:1 on light bg */
  --border: #d4cce8;
  --border-strong: #bdb4d8;
  --track-bg: #ddd8ec;
  --track-bg-scrub: #ccc5e0;
  --press: #ddd8ec;
  --version-color: #bdb4d8;
  --fs-bg: #f4f2f8;
  /* Accents stay the same — they work on both backgrounds */
  --accent: #b8933a;
  --accent-hover: #a07830;
  --accent-press: #8a6420;
  --accent2: #7b54c4;
  --loop-color: #2aaa88;
  --danger: #c04040;
}

/* ── Light mode visual state overrides ──────────────────────────────────────
   In dark mode, --surface2 is near-black so default buttons read as muted and
   the 7% purple overlay is visible. In light mode --surface2 is lavender so
   the hierarchy inverts. Fix: default contextual buttons use white + light
   border (clearly resting), active state uses a stronger purple tint. ── */

/* Default resting state for contextual buttons in light mode — clearly muted */
[data-theme="light"] .phrase-btn,
[data-theme="light"] .speed-btn,
[data-theme="light"] .speed-step-btn {
  background: var(--surface);
  border-color: var(--border);
  color: var(--muted);
}

/* pdf-tool-btns (scroll, zoom, fullscreen) — always show outline in light mode.
   zoom-step-btn excluded: it keeps its accent2 colour in both themes. */
[data-theme="light"] .pdf-tool-btn:not(.zoom-step-btn) {
  background: var(--surface);
  border-color: var(--border);
}

/* header-btns (refresh, theme toggle) — always show outline in light mode */
[data-theme="light"] .header-btn {
  border-color: var(--border-strong);
  color: var(--muted);
}

/* has-track: zoom/scroll/fullscreen get purple outline (same as dark) */
[data-theme="light"] body.has-track #zoomToggleBtn,
[data-theme="light"] body.has-track #fullscreenBtn,
[data-theme="light"] body.has-track #autoScrollBtn:not(.active),
[data-theme="light"] body.has-track .pdf-toolbar .scroll-speed-step {
  border-color: var(--accent2);
  color: var(--accent2);
  background: rgba(123,84,196,0.08);
}

/* is-playing: phrase/speed get strong purple — clearly active */
[data-theme="light"] body.has-track.is-playing .phrase-btn:not(.capturing):not(.looping),
[data-theme="light"] body.has-track.is-playing .speed-btn {
  border-color: var(--accent2);
  color: var(--accent2);
  background: rgba(123,84,196,0.08);
}

/* Hover states in light mode */
[data-theme="light"] .phrase-btn:hover,
[data-theme="light"] .speed-btn:hover,
[data-theme="light"] .pdf-tool-btn:hover,
[data-theme="light"] .header-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(184,147,58,0.08);
}

/* ── Keyboard focus indicator ────────────────────────────────────────────────
   :focus-visible targets keyboard navigation only — mouse clicks are
   unaffected. Outline uses --accent so it respects the active theme. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}