/* ============================================================
   themes.css — Light / Dark / Parchment for the reading app
   Applied via `body.theme-<name>` set by main.js on boot + toggle.
   ============================================================ */

/* ── LIGHT (default) ──
 * Three-level visual hierarchy when characters are selected:
 *   - others (dimmed):  --dim-opacity   (24%)  → background voices, barely-there
 *   - cue line:         --cue-opacity   (48%)  → trigger line, half-bright
 *   - mine:             100%                   → fully saturated, your turn
 * The two-step gap (24 → 48 → 100) is wide enough that cue lines no
 * longer feel "almost mine" at a glance.
 */
body.theme-light {
  --bg:           #fafafa;
  --fg:           #1a1a1a;
  --fg-muted:     #6b7280;
  --topbar-bg:    #ffffff;
  --topbar-fg:    #111827;
  --topbar-border:#e5e7eb;
  --accent:       #1F3B6B;
  --card-bg:      #ffffff;
  --card-border:  #e5e7eb;
  --card-shadow:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --verse-num:    #C0223A;
  --dim-opacity:  0.24;
  --cue-opacity:  0.48;
}

/* ── DARK ──
 * Tuned for studios: deep neutral background so the speakers' palette
 * colors still read well. Verse numbers stay reddish but lighter so they
 * don't disappear into the background.
 */
body.theme-dark {
  --bg:           #15171b;
  --fg:           #e8e8e8;
  --fg-muted:     #9ca3af;
  --topbar-bg:    #1d2026;
  --topbar-fg:    #f3f4f6;
  --topbar-border:#2b3038;
  --accent:       #6699FF;
  --card-bg:      #1d2026;
  --card-border:  #2b3038;
  --card-shadow:  0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --verse-num:    #FF6680;
  --dim-opacity:  0.30;
  --cue-opacity:  0.55;
}

/* ── PARCHMENT ──
 * Warm sepia tuned to user's preferred #F1E9D2. Lift card surfaces
 * slightly above the bg so the chips/drawer stand out, and harmonize
 * borders / topbar in the same hue family.
 */
body.theme-parchment {
  --bg:           #F1E9D2;   /* user-picked 2026-06-05 */
  --fg:           #3B2C16;
  --fg-muted:     #8A7758;
  --topbar-bg:    #E8E0C5;   /* a touch darker than bg for separation */
  --topbar-fg:    #3B2C16;
  --topbar-border:#D5C9A3;
  --accent:           #6B3A1C;
  --card-bg:      #F7EFD8;   /* a touch lighter than bg for card lift */
  --card-border:  #D5C9A3;
  --card-shadow:  0 1px 3px rgba(50,30,10,0.08);
  --verse-num:    #8B1E2D;
  --dim-opacity:  0.24;
  --cue-opacity:  0.48;
}

/* ── Re-apply variables that main.css sets at :root ──
 * Override the :root defaults so theme switching takes effect.
 */
body[class*="theme-"] #topbar       { background: var(--topbar-bg); color: var(--topbar-fg); border-color: var(--topbar-border); }
body[class*="theme-"] .topbar-btn   { color: var(--topbar-fg); }
body[class*="theme-"] #view         { background: var(--bg); }
body[class*="theme-"] body          { background: var(--bg); color: var(--fg); }
body[class*="theme-"] .book-card    { background: var(--card-bg); border-color: var(--card-border); color: var(--fg); }
body[class*="theme-"] .book-card .book-stats,
body[class*="theme-"] .book-card .book-num,
body[class*="theme-"] .charpicker .subhead,
body[class*="theme-"] .opt-row label,
body[class*="theme-"] .opt-hint     { color: var(--fg-muted); }
body[class*="theme-"] #options-drawer  { background: var(--card-bg); }
body[class*="theme-"] #options-drawer .drawer-header { border-color: var(--card-border); }
body[class*="theme-"] .reader .ch-header { color: var(--fg-muted); border-color: var(--card-border); }
body[class*="theme-"] .reader.script-format .verse-num { color: var(--verse-num); }
body[class*="theme-"] .top-pill     { background: var(--card-bg); color: var(--fg); border-color: var(--card-border); }
body[class*="theme-"] .chapter-overlay-card { background: var(--card-bg); }
body[class*="theme-"] .chapter-btn  { background: var(--bg); color: var(--fg); border-color: var(--card-border); }
/* Chip colors are driven entirely by main.css's color-mix() outlined-box
 * pattern — DO NOT override .char-chip background/color from theme files,
 * or the highlight breaks. (Earlier override caused white-on-white when
 * selected.) Only tweak per-theme contrast knobs.
 *
 * DARK MODE — character palette is tuned for light backgrounds and reads
 * dimly against #15171b. Brighten the chip outline + count pill so the
 * selection state pops, and lighten the unselected chip-name text so
 * non-highlighted chips don't disappear into the background. */
body.theme-dark .char-chip:not(.selected) {
  /* Brighter mix in dark mode so chips read against #15171b */
  color: color-mix(in srgb, var(--chip-color, var(--fg)) 75%, var(--fg));
  border-color: color-mix(in srgb, var(--chip-color, var(--fg)) 55%, transparent);
}
body.theme-dark .char-chip:not(.selected) .chip-count {
  color: color-mix(in srgb, var(--chip-color, var(--fg-muted)) 75%, var(--fg-muted));
  background: color-mix(in srgb, var(--chip-color, #888) 18%, transparent);
}
body.theme-dark .char-chip.selected {
  /* Stronger tint in dark mode — 14% mix gets lost against #15171b */
  background: color-mix(in srgb, var(--chip-color, var(--accent)) 28%, var(--card-bg));
  color: color-mix(in srgb, var(--chip-color, var(--fg)) 85%, #ffffff);
}
body.theme-dark .char-chip.selected .chip-name {
  color: color-mix(in srgb, var(--chip-color, var(--fg)) 85%, #ffffff);
}
body.theme-dark .char-chip.selected .chip-count {
  color: color-mix(in srgb, var(--chip-color, var(--fg)) 85%, #ffffff);
  background: color-mix(in srgb, var(--chip-color, #888) 35%, transparent);
}

/* PARCHMENT MODE — most character colors are dark enough to read on
 * sepia. Just bump the selected tint up a notch so it's clearly
 * separated from the cream background. */
body.theme-parchment .char-chip.selected {
  background: color-mix(in srgb, var(--chip-color, var(--accent)) 18%, var(--card-bg));
}

/* ── DARK MODE — invert character text to readable pastels ──
 *
 * The speaker map palette is tuned for white backgrounds. To make it
 * legible on #15171b we use CSS relative-color syntax (Safari 16.4+,
 * iPadOS 16.4+) to force every character color into a high-lightness
 * pastel that keeps the hue but ditches the original darkness.
 *
 * Steps per color (extracted via `hsl(from ...)`):
 *   - hue:        kept
 *   - saturation: dampened to 50% of original so pastels feel soft
 *   - lightness:  forced to 78% (mine: 85%)
 *
 * Result:
 *   - #000000 (Narrator) → ~#c7c7c7 light gray, fully readable
 *   - #1F3B6B (Jesus)    → soft pastel blue
 *   - #8B2D2D (maroon)   → soft pastel pink
 *
 * A color-mix() fallback handles older browsers (still way better
 * than the original dark-on-dark situation).
 */
@supports (color: hsl(from red h s l)) {
  body.theme-dark .reader.script-format .char-label,
  body.theme-dark .reader.script-format .char-text {
    color: hsl(from var(--char-color, var(--fg)) h calc(s * 0.5) 78%);
  }
  body.theme-dark .reader.script-format .span-line.mine .char-label,
  body.theme-dark .reader.script-format .span-line.mine .char-text {
    color: hsl(from var(--char-color, var(--fg)) h calc(s * 0.65) 85%);
  }
  body.theme-dark .reader.script-format .span-line {
    border-left-color: hsl(from var(--char-color, currentColor) h calc(s * 0.7) 70%);
  }
  body.theme-dark .reader.script-format .span-line.mine {
    border-left-color: hsl(from var(--char-color, currentColor) h s 75%);
  }
}
/* Fallback for browsers without relative-color syntax. Mixes very
 * aggressively with white so pure black narrator still ends up at
 * #c7c7c7-ish gray. */
@supports not (color: hsl(from red h s l)) {
  body.theme-dark .reader.script-format .char-label,
  body.theme-dark .reader.script-format .char-text {
    color: color-mix(in srgb, var(--char-color, var(--fg)) 22%, #ffffff);
  }
  body.theme-dark .reader.script-format .span-line.mine .char-label,
  body.theme-dark .reader.script-format .span-line.mine .char-text {
    color: color-mix(in srgb, var(--char-color, var(--fg)) 35%, #ffffff);
  }
  body.theme-dark .reader.script-format .span-line {
    border-left-color: color-mix(in srgb, var(--char-color, currentColor) 50%, #ffffff);
  }
  body.theme-dark .reader.script-format .span-line.mine {
    border-left-color: color-mix(in srgb, var(--char-color, currentColor) 70%, #ffffff);
  }
}

/* Dim/cue opacities in dark mode — bump up so even the dimmed lines
 * stay legible (they're already pastel-tinted, so the multiplicative
 * opacity needs to be higher to avoid black-hole effect). */
body.theme-dark { --dim-opacity: 0.45; --cue-opacity: 0.75; }

/* PARCHMENT MODE — character colors are dark enough to read on sepia.
 * No text brightening needed. */
body[class*="theme-"] .opt-hint     { background: rgba(0,0,0,0.04); }
body.theme-dark      .opt-hint      { background: rgba(255,255,255,0.05); }

/* ── Dim non-mine spans when dimOthers is on AND user has picked chars ─
 * The reader root gets class "dim-on" only when conditions are met. The
 * mine spans stay at full opacity; the rest fade per --dim-opacity.
 * Cue-line preview (the immediately-preceding non-mine line) gets a
 * higher --cue-opacity so the actor sees their trigger line clearly.
 */
.reader.dim-on .span-line:not(.mine):not(.cue) {
  opacity: var(--dim-opacity);
  transition: opacity 0.18s ease;
}
.reader.dim-on .span-line.cue {
  opacity: var(--cue-opacity);
  transition: opacity 0.18s ease;
}
.reader.dim-on .span-line.mine {
  opacity: 1;
  /* Optional emphasis: thicker bar already set in main.css; here we add
     a soft glow on the colored bar so it pops further. */
}
.reader.dim-on .span-line.mine::before {
  content: "";
  position: absolute;
  left: -3px; top: 0; bottom: 0;
  width: 6px;
  border-radius: 6px;
  background: var(--char-color, currentColor);
  filter: blur(8px);
  opacity: 0.35;
  pointer-events: none;
  z-index: -1;
}

/* ── Reader font size — driven by CSS variable, set by JS on body ── */
body { --reader-font-size: 22px; }
body.theme-dark      .reader.script-format .char-text,
body.theme-light     .reader.script-format .char-text,
body.theme-parchment .reader.script-format .char-text {
  font-size: var(--reader-font-size);
}