/* ── Light theme ──────────────────────────────────────────────────────
   Shared, site-wide light/white palette. Works on any page as long as it:
   1. Sets data-theme early (see the inline <head> snippet used on every
      converted page - prevents a flash of the wrong theme on first paint).
   2. Loads this stylesheet.
   3. Loads site-theme.js (defines window.PolyPuffTheme.{get,set,toggle}).

   Part 1 below re-themes anything already written as var(--x) - the vast
   majority of every page's own CSS, since --bg/--text/--sky/etc. is the
   established convention site-wide (union of every page's own :root
   block). Part 2 patches the shared nav/sidebar chrome, which app-page.css
   and site-nav.js's runtime-injected <style> both hardcode as literal
   hex/rgba rather than var() - the html[data-theme="light"] attribute
   prefix carries higher specificity than their bare-class rules, so it
   wins regardless of load/injection order without editing either shared
   file directly. See polypuff-website/CLAUDE.md's "Light Theme" section. */

html[data-theme="light"] {
  --bg:#ffffff; --bg2:#f6f7fb; --bg3:#eef0f7;
  --surface: rgba(20,23,44,.035); --surface2: rgba(20,23,44,.06);
  --border: rgba(20,23,44,.09); --border2: rgba(20,23,44,.15);
  --text:#14172c; --muted:#5b6180; --faint:#a2a8c6;
  --sky:#0f8fae; --sky2:#0c7a93; --mint:#0aa87a; --gold:#b8790a;
  --coral:#e0503a; --purple:#7c3aed;
  --amber:#b56a00; --blue:#1d6fd1; --emerald:#0f9960;
  --red:#d1392a; --danger:#d1392a; --pink:#c0298a; --mc:#c0298a;
  --panel:#f6f7fb; --panel2:#eef0f7;
}

/* ── Shared nav bar (app-page.css) ──────────────────────────────────── */
html[data-theme="light"] nav {
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 12px 30px rgba(20,23,44,.06) !important;
}
html[data-theme="light"] .nav-actions a { color: #4b5170 !important; }
html[data-theme="light"] .nav-actions a:hover { color: var(--text) !important; }
html[data-theme="light"] .lang-selector label { color: var(--muted) !important; }
html[data-theme="light"] .lang-selector select { color: var(--text) !important; }

/* ── Sidebar chrome injected at runtime by site-nav.js ──────────────── */
html[data-theme="light"] .sidebar { background: var(--bg2) !important; border-right-color: var(--border) !important; }
html[data-theme="light"] .pp-sidebar-head { background: var(--bg2) !important; border-bottom-color: var(--border) !important; box-shadow: none !important; }
html[data-theme="light"] .pp-native-label,
html[data-theme="light"] .pp-sidebar-label,
html[data-theme="light"] .sidebar-label { color: var(--muted) !important; }
html[data-theme="light"] .pp-native-dropdown-btn { background: var(--bg3) !important; color: var(--text) !important; border-color: var(--border2) !important; }
html[data-theme="light"] .pp-native-dropdown-chevron { color: var(--muted) !important; }
html[data-theme="light"] .pp-native-dropdown-menu { background: var(--bg2) !important; border-color: var(--border2) !important; box-shadow: 0 8px 32px rgba(20,23,44,.14) !important; }
html[data-theme="light"] .pp-native-dropdown-option { color: var(--muted) !important; }
html[data-theme="light"] .pp-native-dropdown-option:hover { background: var(--surface) !important; color: var(--text) !important; }
html[data-theme="light"] .pp-native-dropdown-option.active { background: rgba(15,143,174,.1) !important; color: var(--sky) !important; }
html[data-theme="light"] .pp-sidebar-toggle { border-color: var(--border2) !important; background: var(--surface) !important; color: var(--text) !important; }
html[data-theme="light"] .pp-sidebar-toggle:hover { background: var(--surface2) !important; }
html[data-theme="light"] body.pp-sidebar-collapsed .pp-sidebar-toggle { background: var(--bg2) !important; }
html[data-theme="light"] .pp-sidebar-dropdown-toggle { background: var(--surface) !important; border-color: var(--border) !important; color: var(--muted) !important; }
html[data-theme="light"] .pp-sidebar-dropdown-toggle:hover { background: var(--surface2) !important; color: var(--text) !important; }
html[data-theme="light"] .pp-sidebar-chevron { color: var(--muted) !important; }
html[data-theme="light"] .pp-sidebar-main .sidebar-item { color: #0a6478 !important; }
html[data-theme="light"] .pp-sidebar-main .sidebar-item:hover,
html[data-theme="light"] .pp-sidebar-main .sidebar-item.active { color: var(--sky) !important; }
html[data-theme="light"] .sidebar-item { color: var(--muted) !important; }
html[data-theme="light"] .sidebar-item:hover { background: var(--surface) !important; color: var(--text) !important; }
html[data-theme="light"] .sidebar-item.active { color: var(--sky) !important; }

/* ── Fixed-dark overlay cards/toasts ─────────────────────────────────
   site-demo-guard.js's paywall lock, prompt-quota-guard.js's quota-block
   card, and vocab-app.js/vault-app.js's save toasts all keep a hardcoded
   near-opaque dark card/toast background (rgba(13,15,26,.9+)) BY DESIGN,
   regardless of page theme - but their text uses var(--text)/var(--muted)/
   var(--gold), which Part 1 above now darkens for the (white) page
   background. Since these cards' own background never changes, pin their
   text back to the original dark-mode-appropriate colors instead of
   letting it follow the page palette - otherwise the text goes
   near-invisible against the still-dark card. */
html[data-theme="light"] .demo-access-lock,
html[data-theme="light"] .demo-access-lock h1,
html[data-theme="light"] .pq-guard-card,
html[data-theme="light"] .pq-guard-card h2 { color: #f0f2ff !important; }
html[data-theme="light"] .demo-access-lock p,
html[data-theme="light"] .pq-guard-card p { color: #8890b0 !important; }
html[data-theme="light"] .demo-access-lock-badge,
html[data-theme="light"] .pq-guard-badge { color: #ffc94a !important; }
html[data-theme="light"] .demo-access-lock-actions .secondary,
html[data-theme="light"] .pq-guard-actions .secondary { color: #f0f2ff !important; }
html[data-theme="light"] .vocab-toast,
html[data-theme="light"] .vault-toast { color: #f0f2ff !important; }
/* Same fixed-dark-card pattern, found in a follow-up sweep of every
   shared script that injects its own <style>: post-signup-tour.js's
   onboarding card, feedback-nudge.js's modal, site-age-gate.js's modal.
   (cookie-consent.js's banner used to be in this group too, but was
   converted to follow the theme instead - see cookie-consent.js's own
   comment for why.) */
html[data-theme="light"] #pp-ob-card,
html[data-theme="light"] #pp-ob-close:hover,
html[data-theme="light"] #pp-ob-body strong,
html[data-theme="light"] .pp-ob-cta-btn.secondary:hover,
html[data-theme="light"] #pp-ob-prev:hover { color: #f0f2ff !important; }
html[data-theme="light"] #pp-ob-body,
html[data-theme="light"] #pp-ob-prev { color: #8890b0 !important; }
html[data-theme="light"] .pp-ob-cta-btn.secondary { color: #c0c7e6 !important; }
html[data-theme="light"] .pp-ob-cta-btn.ghost { color: #7ee8fa !important; }
html[data-theme="light"] .pp-ob-cta-btn.ghost:hover { color: #a8f0ff !important; }
html[data-theme="light"] .pp-feedback-nudge-title { color: #f0f4fb !important; }
html[data-theme="light"] .pp-feedback-nudge-close,
html[data-theme="light"] .pp-feedback-nudge-screenshot-remove { color: #94a0b8 !important; }
html[data-theme="light"] .pp-feedback-nudge-copy { color: #aab5cc !important; }
html[data-theme="light"] .pp-feedback-nudge-tab.active { color: #7ee8fa !important; }
html[data-theme="light"] .pp-feedback-nudge-screenshot-btn:hover { color: #dce4f2 !important; }
html[data-theme="light"] .pp-feedback-nudge-screenshot-remove:hover { color: #ff9a9a !important; }
html[data-theme="light"] .pp-feedback-nudge-check { color: #aeb8cc !important; }
html[data-theme="light"] .pp-feedback-nudge-status { color: #aeb8cc !important; }
html[data-theme="light"] .pp-feedback-nudge-status.err { color: #ff9a9a !important; }
html[data-theme="light"] .pp-feedback-nudge-status.ok { color: #56f0c0 !important; }
html[data-theme="light"] .age-gate-card p { color: #9aa3c7 !important; }
html[data-theme="light"] .age-gate-field label { color: #7ee8fa !important; }
html[data-theme="light"] .age-gate-field input,
html[data-theme="light"] .age-gate-field select { color: #f0f2ff !important; }
html[data-theme="light"] .age-gate-error { color: #ffd2c8 !important; }
html[data-theme="light"] .age-gate-secondary { color: #f0f2ff !important; }

/* ── Nav-bar toolbar controls (site-language.js, site-profile-nav.js,
   session-persistence.js) ────────────────────────────────────────────
   Unlike the fixed-dark cards above, these sit directly on the (now
   light) nav bar / page and should follow the page theme like everything
   else - darkened, not pinned. */
html[data-theme="light"] .site-lang-btn,
html[data-theme="light"] .site-lang-option,
html[data-theme="light"] nav .home-link,
html[data-theme="light"] nav .nav-right > a,
html[data-theme="light"] nav .nav-actions > a,
html[data-theme="light"] .site-lang-btn .flag { color: #14172c !important; }
html[data-theme="light"] .site-lang-btn .chevron { color: #2e439e !important; }
html[data-theme="light"] .pp-logout-btn,
html[data-theme="light"] .pp-logout-btn:hover,
html[data-theme="light"] .pp-progress-btn,
html[data-theme="light"] .pp-help-btn,
html[data-theme="light"] .pp-theme-toggle,
html[data-theme="light"] .pp-cefr-wrap { color: #14172c !important; }
html[data-theme="light"] .pp-progress-btn:hover,
html[data-theme="light"] .pp-help-btn:hover,
html[data-theme="light"] .pp-theme-toggle:hover { color: #0b7183 !important; }
html[data-theme="light"] .pp-cefr-label { color: #4b5170 !important; }
html[data-theme="light"] .pp-cefr-select {
  background-color: var(--bg3) !important;
  color: var(--text) !important;
  border-color: var(--border2) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23334699' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") !important;
}
html[data-theme="light"] .pp-cefr-select option { background: #fff !important; color: var(--text) !important; }
html[dir="rtl"][data-theme="light"] .sidebar-item { color: #2e439e !important; }
html[dir="rtl"][data-theme="light"] .sidebar-item.active { color: var(--sky) !important; }
html[data-theme="light"] .pp-session-notice strong,
html[data-theme="light"] .pp-session-notice button { color: #14172c !important; }
html[data-theme="light"] .pp-session-notice span { color: #2e439e !important; }
