/* =============================================================================
   KilusNa — DARK THEME OVERRIDES
   -----------------------------------------------------------------------------
   Scoped to [data-theme="dark"] only — never a media query, so a manual
   override always beats the OS preference. The inline <head> script guarantees
   the attribute exists on <html> before any stylesheet parses (no FOUC).

   Colour-level dark values live in tokens.css; this file only carries the
   component decisions that cannot be expressed as a single token swap.
   ============================================================================= */

/* Hero eyebrow: it sits on --accent-soft in BOTH themes. Light's --accent-dark
   only reaches 1.95:1 on the pale plate, so components.css colours the eyebrow
   --accent-text globally; on the dark theme's deep olive plate the same token
   reads 9.14:1, and the value is pinned here with the rest of the dark
   component decisions. */
[data-theme="dark"] .hero-eyebrow {
  color: var(--accent-text);
}

/* Theme toggle shows the opposite glyph */
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* The dark values for --thumb-streak-opacity and --hero-glow are token
   overrides, so they live in tokens.css with the rest of the dark palette. */

/* Native <select> options paint with system colours unless told otherwise */
[data-theme="dark"] option {
  background: var(--card);
  color: var(--text);
}

/* Fallback plate behind a missing/broken thumbnail image (gradient
   placeholders and photos render their own artwork on top) */
[data-theme="dark"] .report-thumb {
  background-color: var(--hover);
}