/* =====================================================================
   skin.css — site-wide "Marquee Glass" skin (loaded by /theme.js on every page)
   ---------------------------------------------------------------------
   One file re-points the shared CSS variables every page already uses
   (--bg --panel --panel-2 --card --border --text --muted --accent
    --accent-soft --gold --good) and restyles the handful of chrome classes
   that recur across the views (header.page, .topbar, .pill-btn, .hub-card,
   .card, .tab, inputs, buttons).  Per-page layout is untouched; only
   colour, type and surface treatment change.

   Palette (dark, default): true black + warm gold #e4b348, glass panels
   rgba(22,22,24,.82) with a faint gold hairline, gold glow on hover.
   Palette (light): warm cream paper + deep gold #9F7A2D, white glass cards.

   Cascade: everything is scoped to :root[data-theme=…] (specificity 0,1,1)
   so it beats each page's inline `:root { … }` block (0,1,0) regardless of
   load order. `!important` is used ONLY where pages hard-code hex colours
   for chrome (header gradients, body bg) — never on layout.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

/* ---------- 1. Tokens ---------- */
:root[data-theme="dark"] {
  --bg: #050505;
  --panel: rgba(22, 22, 24, 0.82);
  --panel-2: rgba(38, 36, 32, 0.9);
  --card: rgba(22, 22, 24, 0.82);
  --border: rgba(228, 179, 72, 0.22);
  --text: #f7f3ea;
  --muted: #b9b2a3;
  --accent: #e4b348;
  --accent-soft: rgba(228, 179, 72, 0.14);
  --gold: #e4b348;
  --gold-soft: rgba(228, 179, 72, 0.14);
  --good: #7fe0a8;
  --good-soft: rgba(127, 224, 168, 0.14);
  --warn: #f2b25c;
  --bad: #ff6b6b;
  --red: #ff6b6b;
  /* skin-only helpers */
  --sk-gold-dim: #9F7A2D;
  --sk-glow: 0 0 0 1px rgba(228,179,72,.18), 0 10px 32px rgba(0,0,0,.55), 0 0 28px rgba(228,179,72,.10);
  --sk-glow-hover: 0 0 0 1px rgba(228,179,72,.45), 0 14px 40px rgba(0,0,0,.6), 0 0 36px rgba(228,179,72,.22);
  --sk-on-accent: #141008;
  --sk-input: rgba(0,0,0,.45);
  --sk-scroll: rgba(228,179,72,.35);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f3eee2;
  --panel: rgba(255, 253, 248, 0.92);
  --panel-2: #f6f0e1;
  --card: rgba(255, 253, 248, 0.92);
  --border: rgba(159, 122, 45, 0.30);
  --text: #1a160f;
  --muted: #625a48;
  --accent: #9F7A2D;
  --accent-soft: rgba(159, 122, 45, 0.12);
  --gold: #9F7A2D;
  --gold-soft: rgba(159, 122, 45, 0.12);
  --good: #1f8f52;
  --good-soft: rgba(31, 143, 82, 0.12);
  --warn: #b0670b;
  --bad: #c9303c;
  --red: #c9303c;
  --sk-gold-dim: #7a5d20;
  --sk-glow: 0 1px 2px rgba(60,40,0,.06), 0 6px 20px rgba(60,40,0,.08);
  --sk-glow-hover: 0 0 0 1px rgba(159,122,45,.5), 0 10px 28px rgba(60,40,0,.14);
  --sk-on-accent: #fff;
  --sk-input: #ffffff;
  --sk-scroll: rgba(159,122,45,.45);
  color-scheme: light;
}

/* ---------- 2. Base ---------- */
:root[data-theme] body {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  background-color: var(--bg) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
}
/* Ambient stage lighting — two soft gold pools like the ReelOnes hero stage.
   Fixed so it doesn't scroll away on long pages; sits behind everything. */
:root[data-theme="dark"] body {
  background-image:
    radial-gradient(ellipse 70% 45% at 50% -10%, rgba(228,179,72,.13), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 115%, rgba(228,179,72,.08), transparent 60%),
    linear-gradient(#050505, #050505) !important;
  background-attachment: fixed, fixed, fixed !important;
  background-repeat: no-repeat !important;
}
:root[data-theme="light"] body {
  background-image:
    radial-gradient(ellipse 70% 45% at 50% -10%, rgba(228,179,72,.22), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 115%, rgba(228,179,72,.14), transparent 60%),
    linear-gradient(#f3eee2, #f3eee2) !important;
  background-attachment: fixed, fixed, fixed !important;
  background-repeat: no-repeat !important;
}
:root[data-theme] a { color: var(--accent); }
:root[data-theme] ::selection { background: rgba(228,179,72,.35); color: inherit; }
:root[data-theme] * { scrollbar-width: thin; scrollbar-color: var(--sk-scroll) transparent; }
:root[data-theme] ::-webkit-scrollbar { width: 10px; height: 10px; }
:root[data-theme] ::-webkit-scrollbar-thumb { background: var(--sk-scroll); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
:root[data-theme] ::-webkit-scrollbar-track { background: transparent; }
:root[data-theme] :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* [hidden] must win over `.pill-btn{display:inline-flex}` etc. */
[hidden] { display: none !important; }

/* ---------- 3. Page header (header.page / index.html header) ---------- */
:root[data-theme] header.page,
:root[data-theme] body > header:not(.login-header) {
  background: linear-gradient(180deg, rgba(228,179,72,.10) 0%, rgba(228,179,72,0) 100%) !important;
  border-bottom: 1px solid var(--border) !important;
}
:root[data-theme] header.page h1,
:root[data-theme] body > header > h1,
:root[data-theme] .login-header h1 {
  color: var(--accent) !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
  text-shadow: 0 0 24px rgba(228,179,72,.25);
}
:root[data-theme="light"] header.page h1,
:root[data-theme="light"] body > header > h1 { text-shadow: none; }
:root[data-theme] header.page .sub,
:root[data-theme] .tagline { color: var(--muted) !important; }

/* ---------- 4. Pills / buttons ---------- */
:root[data-theme] .pill-btn,
:root[data-theme] .logout-btn,
:root[data-theme] .admin-link,
:root[data-theme] .exams-cta,
:root[data-theme] .pill {
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(22,22,24,.55);
  color: var(--muted);
  font-family: inherit;
  transition: background 140ms, color 140ms, border-color 140ms, box-shadow 140ms, transform 140ms;
}
:root[data-theme="light"] .pill-btn,
:root[data-theme="light"] .logout-btn,
:root[data-theme="light"] .admin-link,
:root[data-theme="light"] .exams-cta,
:root[data-theme="light"] .pill { background: rgba(255,255,255,.7); }
@media (hover: hover) {
  :root[data-theme] .pill-btn:hover,
  :root[data-theme] .logout-btn:hover,
  :root[data-theme] .admin-link:hover,
  :root[data-theme] .exams-cta:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 18px rgba(228,179,72,.18);
  }
}
/* Active / primary pills → solid gold pill, dark text (Marquee Glass primary) */
:root[data-theme] .pill-btn.active,
:root[data-theme] .pill-btn.is-active,
:root[data-theme] .pill-btn[aria-pressed="true"],
:root[data-theme] .pill-btn.primary,
:root[data-theme] .tab.active,
:root[data-theme] .tab.is-active,
:root[data-theme] .tab[aria-selected="true"],
:root[data-theme] .formula-tab.is-active,
:root[data-theme] .rp-tab.is-active,
:root[data-theme] .rp-paper-tab.is-active,
:root[data-theme] .paper-tab.is-active,
:root[data-theme] .exams-cta:hover {
  background: var(--accent) !important;
  color: var(--sk-on-accent) !important;
  border-color: var(--accent) !important;
  font-weight: 700;
  box-shadow: 0 0 22px rgba(228,179,72,.35);
}
:root[data-theme] .exams-cta { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
/* Generic <button> that a page hasn't styled as something else */
:root[data-theme] button:not([class]),
:root[data-theme] button.primary,
:root[data-theme] button[type="submit"]:not([class]) {
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--sk-on-accent);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(228,179,72,.25);
  transition: transform 120ms, box-shadow 120ms, filter 120ms;
}
:root[data-theme] button:not([class]):hover,
:root[data-theme] button.primary:hover { filter: brightness(1.06); box-shadow: 0 0 26px rgba(228,179,72,.4); }
:root[data-theme] button:not([class]):active { transform: translateY(1px); }
:root[data-theme] button.secondary { border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text); font-family: inherit; }
:root[data-theme] button.secondary:hover { border-color: var(--accent); color: var(--accent); }
:root[data-theme] button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; filter: none; }

/* ---------- 5. Cards / panels ---------- */
:root[data-theme] .hub-card,
:root[data-theme] .card,
:root[data-theme] .callout,
:root[data-theme] form:not(.login-form):not([class*="inline"]) {
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--sk-glow);
}
:root[data-theme] .hub-card { border-radius: 18px; }
@media (hover: hover) {
  :root[data-theme] .hub-card:hover {
    background: var(--panel-2) !important;
    border-color: rgba(228,179,72,.6) !important;
    box-shadow: var(--sk-glow-hover) !important;
    transform: translateY(-3px);
  }
}
:root[data-theme] .hub-card-tag { color: var(--accent); }
:root[data-theme] .hub-card h2 { color: var(--text); font-weight: 900; }
:root[data-theme] .tag { border-color: var(--border); }

/* ---------- 6. Inputs ---------- */
:root[data-theme] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
:root[data-theme] select,
:root[data-theme] textarea {
  background: var(--sk-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: inherit;
  transition: border-color 140ms, box-shadow 140ms;
}
:root[data-theme] input:not([type="checkbox"]):not([type="radio"]):focus,
:root[data-theme] select:focus,
:root[data-theme] textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 18px rgba(228,179,72,.18);
}
:root[data-theme] input::placeholder,
:root[data-theme] textarea::placeholder { color: var(--muted); opacity: .8; }
:root[data-theme] input[type="checkbox"],
:root[data-theme] input[type="radio"],
:root[data-theme] input[type="range"],
:root[data-theme] progress { accent-color: var(--accent); }

/* ---------- 7. Login page (public/style.css .login-*) ---------- */
:root[data-theme] .login-form {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  box-shadow: var(--sk-glow) !important;
  backdrop-filter: blur(10px);
}
:root[data-theme] .login-form button[type="submit"] {
  border-radius: 999px; border: 0; background: var(--accent); color: var(--sk-on-accent);
  font-weight: 900; letter-spacing: .02em; box-shadow: 0 0 22px rgba(228,179,72,.35); cursor: pointer;
}
:root[data-theme] .login-form button[type="submit"]:hover { filter: brightness(1.06); }

/* ---------- 8. Legacy hard-coded dark sub-panels seen across pages ----------
   Pages sometimes paint #11141a / #14171f / #1a1d24 directly. Re-tone the
   known ones onto the token so they don't sit as blue-black slabs on the
   warm stage. */
:root[data-theme] .day-cell,
:root[data-theme] .week-row,
:root[data-theme] .formula-group,
:root[data-theme] .formula-tab,
:root[data-theme] .rp-tab,
:root[data-theme] .rp-diagram,
:root[data-theme] .rp-paper-tab,
:root[data-theme] .paper-tab,
:root[data-theme] .speak-btn,
:root[data-theme] .rp-card,
:root[data-theme] .sheet-card,
:root[data-theme] .formula-sheet,
:root[data-theme] .case-study,
:root[data-theme] .rp-qa-item,
:root[data-theme] #experiment-form,
:root[data-theme] #case-study-form,
:root[data-theme] #timeline-form {
  background: var(--panel) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
:root[data-theme] .rp-tab-num,
:root[data-theme] .rp-paper-tab-count,
:root[data-theme] .rp-chip,
:root[data-theme] .rp-qa-marks,
:root[data-theme] .formula-item-latex,
:root[data-theme] .day-cell.empty,
:root[data-theme] .day-cell.weekend,
:root[data-theme] .exam-loc,
:root[data-theme] .case-study-location {
  background: var(--panel-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
:root[data-theme] .rp-tab.is-active .rp-tab-num,
:root[data-theme] .rp-paper-tab.is-active .rp-paper-tab-count { background: rgba(0,0,0,.18) !important; color: inherit !important; }
:root[data-theme] form label { color: var(--text); }
:root[data-theme] .exam:hover,
:root[data-theme] .subj-pill:hover { background: var(--accent-soft) !important; }
:root[data-theme] .paper-btn { background: var(--panel) !important; border: 1px solid var(--border) !important; color: var(--text) !important; }
:root[data-theme] .paper-btn:hover,
:root[data-theme] .paper-btn[aria-expanded="true"] { border-color: var(--accent) !important; color: var(--accent) !important; }
:root[data-theme] .paper-btn .paper-btn-sub { color: var(--muted) !important; }
:root[data-theme] body.printing-formula-sheet,
:root[data-theme] #formula-sheet { background: #fff !important; }

/* ---------- 9. Theme toggle button (mounted by theme.js) ---------- */
#theme-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px; padding: 0;
  background: rgba(22,22,24,.6); color: var(--accent, #e4b348);
  border: 1px solid var(--border, rgba(228,179,72,.22));
  font-size: 15px; line-height: 1; cursor: pointer; font-family: inherit;
  transition: transform 120ms, box-shadow 120ms, border-color 120ms;
}
#theme-toggle-btn:hover { transform: scale(1.06); border-color: var(--accent, #e4b348); box-shadow: 0 0 16px rgba(228,179,72,.25); }
:root[data-theme="light"] #theme-toggle-btn { background: rgba(255,255,255,.85); }
.topbar-actions #theme-toggle-btn, .header-actions #theme-toggle-btn, .topbar #theme-toggle-btn { width: 34px; height: 34px; background: transparent; }
body > #theme-toggle-btn.is-floating { position: fixed; top: 14px; right: 14px; z-index: 9999; }
@media print { #theme-toggle-btn { display: none !important; } :root[data-theme] body { background: #fff !important; color: #000 !important; } }