/* ==========================================================================
   LEHS Math — shared theme layer (dark mode overrides)
   --------------------------------------------------------------------------
   This file's ONLY job is to define the DARK theme. Light-mode values keep
   coming from wherever they already live: each tool's own inline <style>
   block, or /assets/styles.css for the top-level pages. Nothing in here
   should set light-mode colors — this is purely an additive override layer
   that activates when <html data-theme="dark"> is present (set by
   assets/theme.js / the inline FOUC snippet in <head>).

   Because every tool defines its own local :root custom properties (with
   inconsistent naming — --gray-soft vs --gs, --maroon-dark vs --maroon-dk,
   etc.), we override ALL known aliases below. A tool that doesn't define a
   given alias simply never reads it — harmless.
   ========================================================================== */

html[data-theme="dark"] {
  --bg: #0f1115;
  --card: #1a1d23;
  --ink: #e6e8eb;
  --muted: #9aa0a8;
  --line: #2a2e37;
  --gray-soft: #3a3f49;
  --gs: #3a3f49;
  --gray: #8a9099;

  /* Brand maroon — kept recognizable but lightened a touch for contrast
     against the dark background. */
  --maroon: #a83a4e;
  --maroon-dark: #8f2f40;
  --maroon-dk: #8f2f40;

  /* Status colors, when a tool defines them. */
  --ok: #4ade80;
  --no: #f87171;
}

/* ---------- Core surfaces ---------- */
html[data-theme="dark"] body {
  background: var(--bg);
  color: var(--ink);
}
html[data-theme="dark"] .card {
  background: var(--card);
}

/* ---------- Canvas exception ----------
   Canvas plot areas (grapher, quadratic, slope-explorer, stats, systems,
   transformations) draw hardcoded light-mode colors onto their bitmap and
   are NOT re-themed. Give them an explicit light "tile" treatment so they
   read as an intentional light plot surface sitting on a dark card, rather
   than a broken/undithered element. */
html[data-theme="dark"] canvas {
  background: #fff;
  border-radius: 8px;
}

/* ---------- Theme toggle button ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: 8px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.theme-toggle:hover {
  background: rgba(255, 255, 255, .15);
  border-color: #fff;
}
.theme-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ---------- Reduced-motion-safe transition ---------- */
@media (prefers-reduced-motion: no-preference) {
  body,
  .card {
    transition: background-color .15s ease, color .15s ease;
  }
}

/* ==========================================================================
   Per-tool special cases
   ========================================================================== */

/* MCAS item bank (tools/mcas/styles.css) uses the standard token names for
   most chrome, but several "chip" surfaces (sticky toolbar, filter panel,
   multi-select popovers, the worksheet tray, inputs) are hardcoded to
   literal #fff rather than var(--card). Without this, the MCAS dashboard
   would go half-dark: dark page background with bright white toolbars. */
html[data-theme="dark"] .toolbar,
html[data-theme="dark"] .filterpanel,
html[data-theme="dark"] .ms-trigger,
html[data-theme="dark"] .ms-pop,
html[data-theme="dark"] .ms-grp,
html[data-theme="dark"] .tray,
html[data-theme="dark"] #search,
html[data-theme="dark"] .tb-btn,
html[data-theme="dark"] .f select,
html[data-theme="dark"] select,
html[data-theme="dark"] .tray-foot button {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] .tb-btn[aria-pressed="true"] {
  background: var(--maroon);
  color: #fff;
  border-color: var(--maroon);
}

/* ==========================================================================
   Per-tool dark-mode surface overrides
   --------------------------------------------------------------------------
   Most tools hardcode LITERAL light hex backgrounds (#fff, #faf8f7, #f5f0f1,
   #f1ecec, #ece7e6, #fdf4f5, #fff8e5, #eef7ee, #e8f5ec, #fde8ea, #fef3c7,
   etc.) on buttons/boxes/inputs while the TEXT color uses var(--ink) /
   var(--maroon) / var(--ok) / var(--no), which DO flip in dark mode. Result:
   a light surface with near-invisible flipped-light text. Each block below
   re-surfaces one tool's literal-light elements to the dark palette:
     - raised control surface: #242832
     - input surface:          #1a1d23  (= var(--card))
     - borders:                var(--line)/#2a2e37 or var(--gray-soft)/#3a3f49
     - success tint:           bg #12351f / text #4ade80
     - warning tint:           bg #3a2e12 / text #fbbf24
     - error tint:             bg #3a1518 / text #f87171
   Canvas plot areas are intentionally NOT touched (handled above). Question/
   figure <img> containers (.fig, .q-image) are also left with a light
   background on purpose — they hold external light-background image assets,
   same rationale as canvas.
   ========================================================================== */

/* ---------- Shared local accent token used by systems + transformations ---------- */
html[data-theme="dark"] {
  --teal: #4fd1d9;
}

/* ---------- Global: every tool's inputs/selects/textareas ---------- */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] math-field {
  background: #1a1d23;
  color: var(--ink);
  border-color: #3a3f49;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #7a808a;
}

/* ---------- calc: keypad (worst offender — white digit keys, faint text) ---------- */
html[data-theme="dark"] .btn.fn,
html[data-theme="dark"] .btn.ctrl,
html[data-theme="dark"] .btn.op,
html[data-theme="dark"] .btn.num {
  background: #242832;
}

/* ---------- converter ---------- */
html[data-theme="dark"] .bar-track {
  background: #2a2e37;
}
html[data-theme="dark"] .btn.secondary {
  background: #242832;
}
html[data-theme="dark"] .result-box {
  background: #242832;
}

/* ---------- core-skills ---------- */
html[data-theme="dark"] .pills button {
  background: #242832;
}
html[data-theme="dark"] .reveal {
  background: #242832;
}

/* ---------- exit-ticket ---------- */
html[data-theme="dark"] .btn.sec {
  background: #242832;
}
html[data-theme="dark"] .btn.dng {
  background: #242832;
  border-color: #5a2530;
}
html[data-theme="dark"] .type-pills button {
  background: #242832;
}
html[data-theme="dark"] .code-big {
  background: #242832;
  border-color: #5a3540;
}
html[data-theme="dark"] .resume-box,
html[data-theme="dark"] .rules-box,
html[data-theme="dark"] .info-box {
  background: #3a2e12;
  border-color: #6b5518;
  color: #fbbf24;
}
html[data-theme="dark"] .resume-box .rb-meta {
  color: #e0c27a;
}
html[data-theme="dark"] .chip {
  background: #242832;
}
html[data-theme="dark"] .card {
  border-color: #3a3f49;
}

/* ---------- geometry ---------- */
html[data-theme="dark"] .shape-btn {
  background: #242832;
}
html[data-theme="dark"] .shape-btn[aria-pressed="true"] {
  background: #3a1520;
}
html[data-theme="dark"] .result-row {
  background: #242832;
}

/* ---------- grapher ---------- */
html[data-theme="dark"] .ro {
  background: #242832;
}

/* ---------- groups / timer: mode + secondary buttons ---------- */
html[data-theme="dark"] .modes button {
  background: #242832;
}
html[data-theme="dark"] .presets button,
html[data-theme="dark"] .iconbtn {
  background: #242832;
}

/* ---------- mcas-practice ---------- */
html[data-theme="dark"] .topicsel {
  background: #1a1d23;
}
html[data-theme="dark"] .nofig {
  background: #3a2e12;
  color: #fbbf24;
}
html[data-theme="dark"] .choice {
  background: #1a1d23;
}
html[data-theme="dark"] .choice.correct {
  background: #12351f;
}
html[data-theme="dark"] .choice.wrong {
  background: #3a1518;
}

/* ---------- quadratic ---------- */
html[data-theme="dark"] .form-row {
  background: #242832;
}
html[data-theme="dark"] .disc-box.two {
  background: #12351f;
}
html[data-theme="dark"] .disc-box.one {
  background: #3a2e12;
  color: #fbbf24;
}
html[data-theme="dark"] .disc-box.none {
  background: #3a1518;
}

/* ---------- stats ---------- */
html[data-theme="dark"] .stepper button,
html[data-theme="dark"] .pills button {
  background: #242832;
}
html[data-theme="dark"] .stepper button:hover,
html[data-theme="dark"] .pills button:hover {
  background: #2f3542;
}
html[data-theme="dark"] #data-err {
  background: #3a1518;
}

/* ---------- systems ---------- */
html[data-theme="dark"] .solution {
  background: #242832;
}
html[data-theme="dark"] .solution.none {
  background: #3a1518;
  color: #f87171;
}
html[data-theme="dark"] .solution.infinite {
  background: #0f3a3d;
  color: #5eead4;
}

/* ---------- transformations ---------- */
html[data-theme="dark"] .mapping .img {
  color: #5eead4;
}

/* ---------- test-builder / test-taker / test-results / exit-ticket shared chrome ---------- */
html[data-theme="dark"] .center-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .resp-card,
html[data-theme="dark"] .recent-row {
  border-color: #3a3f49;
}
html[data-theme="dark"] .preview {
  background: #242832;
}
html[data-theme="dark"] .key-box {
  background: #12351f;
  border-color: #2f7a4a;
}
html[data-theme="dark"] .key-box .klabel {
  color: #4ade80;
}
html[data-theme="dark"] .key-val {
  background: #0f2a18;
  color: #86efac;
}
html[data-theme="dark"] .fx-btn {
  background: #242832;
}
html[data-theme="dark"] .fx-btn:hover {
  background: #2a1c20;
}
html[data-theme="dark"] .src-tag {
  background: #12351f;
  color: #4ade80;
  border-color: #2f7a4a;
}
html[data-theme="dark"] .modal {
  background: #1a1d23;
}
html[data-theme="dark"] .bank-item:hover {
  background: #2a1c20;
}
html[data-theme="dark"] .bank-item.picked {
  background: #331c22;
}

/* ---------- test-taker ---------- */
html[data-theme="dark"] .calc-panel {
  background: #1a1d23;
  border-left-color: #3a3f49;
}
html[data-theme="dark"] .nav-btn {
  background: #242832;
}
html[data-theme="dark"] .progress-bar {
  background: #2a2e37;
}
html[data-theme="dark"] .mc-opt {
  background: #1a1d23;
}
html[data-theme="dark"] .mc-opt:hover {
  background: #2a1c20;
}
html[data-theme="dark"] .mc-opt.selected {
  background: #331c22;
}
html[data-theme="dark"] .warn-box {
  background: #1a1d23;
}
html[data-theme="dark"] .warn-count {
  color: #9aa0a8;
}

/* ---------- test-results ---------- */
html[data-theme="dark"] tr.flagged td {
  background: #2a1519;
}
html[data-theme="dark"] .flag {
  background: #3a1518;
  border-color: #5a2530;
}
html[data-theme="dark"] .score-pill.good {
  background: #12351f;
  color: #4ade80;
}
html[data-theme="dark"] .score-pill.mid {
  background: #3a2e12;
  color: #fbbf24;
}
html[data-theme="dark"] .score-pill.low {
  background: #3a1518;
}
html[data-theme="dark"] .score-pill.na {
  background: #242832;
}
html[data-theme="dark"] .q-bar-track {
  background: #2a2e37;
}
html[data-theme="dark"] .btn.red {
  background: #242832;
  border-color: #5a2530;
}
