/* Light reading mode: the hand-tuned half.
   Load order: css/theme-light-auto.css (generated by scripts/build-uvu-light-theme.py from every dark
   stylesheet: one light counterpart per rule that uses a literal colour), then this file, which sets the
   light palette and the few surfaces that need a designer's call rather than a colour mapping.
   Scoped to :root[data-theme="light"], set by js/theme-boot.js before first paint, toggled by js/theme.js.
   Only the photo lightbox stays dark (it is an image viewer in both themes). */

/* ---- palette: paper, navy ink, deep patriotic red and blue ---- */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f6f7f9;
  --bg-2:#eceff4;
  --panel:#ffffff;
  --panel-2:#f2f4f7;
  --line:#d3dae3;
  --ink:#0f172a;
  --ink-2:#253041;
  --muted:#475569;
  --faint:#a3adba;
  --faint-ink:#5b6778;
  --red:#b91c1c;
  --red-soft:#b42318;
  --blue:#1d4ed8;
  --blue-soft:#1d4ed8;
  --amber:#92400e;
  --white:#0b1220;
  --ok:#15803d;
  /* depth comes from a border and a soft shadow instead of a dark fill */
  --lift:0 1px 2px rgba(15,23,42,.06),0 10px 28px -14px rgba(15,23,42,.18);
}

/* ---- cards and panels get paper depth ---- */
:root[data-theme="light"] :is(.find,.bf,.lane,.recgrp,.alert,.rec-case,.rec-questions,.rec-readnote,.act,.rec,.sub-card,.submit-form,.mn-panel,.mn-lane,.beat,.beat-card){box-shadow:var(--lift)}
:root[data-theme="light"] .lane{background:var(--panel)}
:root[data-theme="light"] .rec-readnote{border-left-color:var(--amber);background:var(--panel)}

/* ---- top bar and hero ---- */
:root[data-theme="light"] .topbar{background:rgba(246,247,249,.97);border-bottom:1px solid var(--line)}
:root[data-theme="light"] .topnav{box-shadow:0 18px 50px rgba(15,23,42,.18)}
:root[data-theme="light"] .topnav a:is(:hover,:focus-visible,:active){background:rgba(15,23,42,.06)}
:root[data-theme="light"] :is(.navtoggle,.share-btn--compact){background:#fff;border-color:var(--line);color:var(--ink)}
:root[data-theme="light"] .hero-grid{background-image:linear-gradient(rgba(29,78,216,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(29,78,216,.06) 1px,transparent 1px)}
:root[data-theme="light"] .hero-glow{background:radial-gradient(circle,rgba(185,28,28,.10),transparent 62%)}
:root[data-theme="light"] .premise{background:#fff}

/* ---- 3D section: the map stays a photo; everything around and over it goes light ---- */
:root[data-theme="light"] #recon{background:radial-gradient(ellipse at 70% 10%,rgba(29,78,216,.05),transparent 55%),var(--bg)}
:root[data-theme="light"] :is(.stage,#reconFrame,.recon-veil){background:#e9edf2}

/* ---- text-message mock-ups read like a phone in light mode ---- */
:root[data-theme="light"] .phone{background:#fff;border-color:#d9dde3;box-shadow:0 24px 60px -20px rgba(15,23,42,.35)}
:root[data-theme="light"] .msg.in{background:#e9e9eb;color:#0f172a}
:root[data-theme="light"] .msg.out{background:#1d6fe0;color:#fff}
:root[data-theme="light"] .msg.sum{background:#f4f5f7;color:#334155;border-color:#c3cad4}

/* ---- inputs and buttons ---- */
:root[data-theme="light"] .chip[aria-pressed="true"]{color:#fff}
:root[data-theme="light"] :is(.submit-form input,.submit-form select,.submit-form textarea,.ask-input){background:#fff;color:var(--ink)}
:root[data-theme="light"] .share-btn:hover{background:#e6ebf1}
:root[data-theme="light"] .share-btn.is-opening,:root[data-theme="light"] .share-btn.is-opening:hover{color:#fff}
:root[data-theme="light"] .share-btn--bar{background:#fff;border-color:var(--line)}
:root[data-theme="light"] .share-btn--bar:hover{background:#e6ebf1;border-color:var(--muted)}
:root[data-theme="light"] .ask-overlay{background:rgba(15,23,42,.35)}
:root[data-theme="light"] :is(.ask-panel,.ask-fab){box-shadow:0 10px 30px rgba(15,23,42,.18)}
:root[data-theme="light"] .bf.both .side{color:#6a3fc9}

/* ---- the lightbox stays a dark image viewer ---- */
:root[data-theme="light"] .lightbox{
  color-scheme:dark;
  --bg:#0a0d13;--panel:#141b26;--panel-2:#1a232f;--line:#26313f;--ink:#eef2f7;--muted:#93a1b3;--white:#f7fafc;
  color:var(--ink);
}

/* ---- the toggle itself ---- */
.theme-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:44px;min-height:44px;padding:0 12px;margin-left:8px;
  border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);
  font:600 12px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
}
.theme-btn svg{width:18px;height:18px;flex:none}
.theme-btn:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
@media (hover:hover){.theme-btn:hover{border-color:var(--muted)}}
.theme-btn .theme-sun{display:none}
:root[data-theme="light"] .theme-btn .theme-sun{display:block}
:root[data-theme="light"] .theme-btn .theme-moon{display:none}
@media (max-width:640px){.theme-btn .theme-btn-t{display:none}.theme-btn{padding:0;margin-left:4px}}