/* Light / dark theme for the whole site.
   The light theme is the site's original look (main.css and player.css as they are).
   The dark theme takes its palette from the stage player demo: near-black surfaces, cream
   text, the show's green and yellow. theme.js sets <html data-theme="light|dark"> before the
   first paint. Most of the site is token-based, so the dark theme is mostly new token values;
   the rest are the places main.css spells a colour out. */

/* ── The toggle in the header ───────────────────────────────────────────── */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 38px; height: 38px; margin-left: auto; margin-right: .35rem; padding: 0;
    background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 50%;
    cursor: pointer;
}
.theme-toggle:hover { border-color: var(--text-link); color: var(--text-link); }
.theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: block; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }
@media (min-width: 640px) { .theme-toggle { margin-right: .75rem; } }

/* The wordmark has a dark and a cream version. */
.logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: inline; }

/* ── Dark theme ─────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg:        #1b1819;
    --card:      #252122;
    --subtle:    #2f2a2b;
    --text:      #f5f0e8;
    --text-mid:  #d6cfc5;
    --text-link: #7ee08c;
    --border:    #4b4547;
    --border-lt: #3a3536;
    --focus:     #7ee08c;
    --amber:     #ffb454;
}
:root[data-theme="light"] { color-scheme: light; }

/* Surfaces main.css writes as white */
:root[data-theme="dark"] .site-header,
:root[data-theme="dark"] .site-nav { background: var(--bg); }
:root[data-theme="dark"] .site-footer { border-top: 1px solid var(--border-lt); }
:root[data-theme="dark"] .chap { background: var(--card); }
:root[data-theme="dark"] .chap:hover { color: #fff; }

/* Text main.css sets to the dark brand colour, which is a background colour in this theme */
:root[data-theme="dark"] .feed-head,
:root[data-theme="dark"] .trail-section .section-label { border-bottom-color: var(--text); }
:root[data-theme="dark"] .feed-head h1,
:root[data-theme="dark"] .about-walk h3,
:root[data-theme="dark"] .host-name,
:root[data-theme="dark"] .contact-card h3,
:root[data-theme="dark"] .involve-card h3,
:root[data-theme="dark"] .error-page h1,
:root[data-theme="dark"] .page h1,
:root[data-theme="dark"] .search-results h1,
:root[data-theme="dark"] .search-h1 { color: var(--text); }
:root[data-theme="dark"] .xcard--quote,
:root[data-theme="dark"] .xcard--gallery { border-left-color: var(--text-mid); }

/* The pale green chips and cards, and their dark-green text */
:root[data-theme="dark"] .chap.playing, :root[data-theme="dark"] .chap.highlighted,
:root[data-theme="dark"] .seeker:not(.trail-btn):not(.chap).playing {
    background: rgba(59,181,74,.18); border-color: var(--text-link); color: var(--text-link);
}
:root[data-theme="dark"] .trail-item:has(.seeker.playing) .trail-title,
:root[data-theme="dark"] .trail-item:has(.seeker.playing) .trail-time,
:root[data-theme="dark"] .xcard--photo .xcard-type,
:root[data-theme="dark"] .xcard--note .xcard-type,
:root[data-theme="dark"] .search-hit-badge--chapter,
:root[data-theme="dark"] .search-hit-badge--note,
:root[data-theme="dark"] .search-hit-badge--comment,
:root[data-theme="dark"] .search-hit-badge--question { color: var(--text-link); }
:root[data-theme="dark"] .xcard--photo,
:root[data-theme="dark"] .xcard--note { background: rgba(59,181,74,.1); }
:root[data-theme="dark"] .contact-icon { background: rgba(59,181,74,.18); }
:root[data-theme="dark"] mark { background: rgba(59,181,74,.28); color: #d6f5dc; }
:root[data-theme="dark"] .search-hit-badge--quote { color: #c9a8f0; }
:root[data-theme="dark"] .search-hit-badge--photo,
:root[data-theme="dark"] .search-hit-badge--art,
:root[data-theme="dark"] .search-hit-badge--short { color: var(--amber); }
:root[data-theme="dark"] .gal-tool, :root[data-theme="dark"] .gal-btn, :root[data-theme="dark"] .kw,
:root[data-theme="dark"] .hit-open, :root[data-theme="dark"] .tx-time, :root[data-theme="dark"] .listen-on-btn { border-color: rgba(126,224,140,.35); }
:root[data-theme="dark"] .gal-btn:hover, :root[data-theme="dark"] .kw:hover, :root[data-theme="dark"] .hit-open:hover,
:root[data-theme="dark"] .tx-time:hover { color: #0f1f12; }
:root[data-theme="dark"] .search-dialog::backdrop { background: rgba(0,0,0,.65); }

/* About page cards and the dark hero keep their own backgrounds; only soften the shadows */
:root[data-theme="dark"] .ep-cover-link:hover { box-shadow: 0 4px 16px rgba(0,0,0,.5); }

/* Separators, the highlight flash and green buttons that carried a light-only colour */
:root[data-theme="dark"] .ep-sep, :root[data-theme="dark"] .bc-sep, :root[data-theme="dark"] .eyebrow-sep { color: var(--text-mid); }
:root[data-theme="dark"] .hl-flash { animation-name: hl-pulse-dark; }
@keyframes hl-pulse-dark { 0%, 100% { background: rgba(59,181,74,.28); } 30% { background: rgba(59,181,74,.55); } }
:root[data-theme="dark"] .btn-short, :root[data-theme="dark"] .filter-chip.is-active,
:root[data-theme="dark"] .btn-short:hover { color: #0f1f12; }