/*
 * CSS Custom Highlight API (word + sentence sync).
 * Kept out of global.css — Tailwind/LightningCSS minify still warns on ::highlight().
 * Uses theme tokens (--voice-highlight-bg / --voice-highlight-fg).
 * Calm/Sepia/Dark use light fg on a darker band; Light/Contrast keep dark fg on a lighter band.
 */
/*
 * CSS Custom Highlight API (word + sentence sync).
 * Kept out of global.css — Tailwind/LightningCSS minify still warns on ::highlight().
 * Uses theme tokens (--voice-highlight-bg / --voice-highlight-fg).
 * Calm/Sepia/Dark use light fg on a darker band; Light/Contrast keep dark fg on a lighter band.
 * Filled CTAs must never receive these ranges — JS glows them instead (see sentenceHighlight).
 */
::highlight(voice-word) {
  background-color: var(--voice-highlight-bg);
  color: var(--voice-highlight-fg, var(--ink));
  text-decoration: none;
  box-shadow: 0 0 0 var(--voice-highlight-ring-width, 2px) var(--voice-highlight-ring);
  border-radius: 0.2em;
}

::highlight(voice-sentence) {
  background-color: var(--voice-highlight-bg);
  color: var(--voice-highlight-fg, var(--ink));
  text-decoration: none;
  box-shadow: 0 0 0 var(--voice-highlight-ring-width, 2px) var(--voice-highlight-ring);
  border-radius: 0.15em;
}