/* Local learning preview contrast corrections; shared source styles stay owned
   by PY-35. Foregrounds follow the actual surface, including dark mode. */
:root {
  --text: var(--fg);
  --text-subtle: var(--muted);
  --mut: var(--muted);
  --key: var(--math-cyan);
  --bg-subtle: var(--bg);
  --border: var(--control-line);
  --on-accent: #fff;
  --on-danger: #fff;
  --ok-ink: #286d4d;
  --no-ink: #a83e2c;
  --gold-ink: #80521c;
  --math-blue: #1d4ed8;
  --math-cyan: #036a9d;
  --math-orange: #975005;
  --math-pink: #a52668;
  --math-purple: #6d28a8;
  --focus-ring: var(--a);
  --control-line: #778379;
  --info-soft: #e0f2fe;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --on-accent: #141b18;
    --on-danger: #141b18;
    --ok-ink: #81cfa4;
    --no-ink: #f29a87;
    --gold-ink: #e2b65a;
    --math-blue: #9ab8ff;
    --math-cyan: #7dd3fc;
    --math-orange: #f5c075;
    --math-pink: #f3a7d1;
    --math-purple: #c4a0ef;
    --control-line: #788d80;
    --info-soft: #203b4b;
  }
}
:root[data-theme="dark"] {
  --on-accent: #141b18;
  --on-danger: #141b18;
  --ok-ink: #81cfa4;
  --no-ink: #f29a87;
  --gold-ink: #e2b65a;
  --math-blue: #9ab8ff;
  --math-cyan: #7dd3fc;
  --math-orange: #f5c075;
  --math-pink: #f3a7d1;
  --math-purple: #c4a0ef;
  --control-line: #788d80;
  --info-soft: #203b4b;
}

body .btn:not(.ghost),
body .lt-page a.btn:not(.ghost),
body .steps button[aria-selected="true"],
body .hci-steps button[aria-selected="true"] .hci-ck,
body .entry-bar button.on,
body .entry-bar button[aria-pressed="true"],
body .sc-mode button.on,
body .ct-mode button.on,
body .sc-grade .btn.know,
body .ct-grade .btn.yes,
body .lab .ctrl .btn.on,
body .w-pill.on,
body .ctrl button.on,
body a.skip {
  color: var(--on-accent);
}
body.lc-course :is(.btn.active, .btn[aria-pressed="true"], .fns button.on, .ops button.on,
  .route button.on, .seg .btn[aria-pressed="true"], .seg button[aria-pressed="true"],
  .shape-tabs button.on, .tabs button.on, .toggles button.active) {
  color: var(--on-accent);
  background-color: var(--a);
  border-color: var(--a);
}
body .btn.retry-btn:hover,
body .btn.retry-btn:focus-visible {
  color: var(--ok-ink);
  background: var(--ok-soft);
}
body .btn.ghost { color: var(--a); }
/* A pressed ghost toggle in a control row gets the white text above, so it needs a filled background too (PY-365). */
body .ctrl .btn.ghost.on { color: var(--on-accent); background: var(--a); border-color: var(--a); }
body .lf-search button,
body .lf-button:not(.secondary) { color: var(--on-accent); }
body .lp-button:not(.secondary) { color: var(--on-accent) !important; }
body .sc-tabbadge { color: var(--on-danger); }
body .vid-btn .vid-play { color: var(--on-accent); }

body .lf-nav a[aria-current],
body .top .lf-nav a[aria-current],
body .hci-chap-n,
body .badge-a,
body .w-badge.concept,
body .kg-leg-pill.unl,
body .sc-chip.ok,
body .wk-pill:hover,
body .wk-pill.on,
body .lab-opts button.right { color: var(--ok-ink); }
body .badge-no,
body .w-badge.pitfall,
body .sc-chip.due,
body .wk-pill.pitfall:hover,
body .wk-pill.pitfall.on,
body .lab-opts button.wrong { color: var(--no-ink); }
body .section-route .tag { color: var(--b); border-color: var(--b); }
body .badge-b, body .w-badge.formula { color: var(--gold-ink); }
body.lc-course .chips .chip { color: var(--muted); }
body.lc-course .chips .chip.got { color: var(--ok-ink); }
body.lc-course .badge.t, body.lc-course .tag-acute { color: var(--ok-ink); }
body.lc-course .badge.f { color: var(--no-ink); }
body.lc-course .badge.on-perp { color: var(--ok-ink); }
body.lc-course .badge.on-collinear, body.lc-course .tag-right { color: var(--gold-ink); }
body.lc-course .tag-obtuse { color: var(--no-ink); }
body.lc-course .tag-ok, body.lc-course .badge-green { color: var(--ok-ink); }
body.lc-course .tag-no { color: var(--no-ink); }
body.lc-course .badge.ok { color: var(--ok-ink); }
body.lc-course .badge.bad { color: var(--no-ink); }
body.lc-course .badge-blue { color: var(--math-blue); }
body.lc-course .badge-orange { color: var(--math-orange); }
body.lc-course .badge-purple { color: var(--math-purple); }
body.lc-course .b-imag { color: var(--math-blue); }
body .ca { color: var(--ok-ink); }
body .cb { color: var(--gold-ink); }
body .kg-leg-pill.weak, body .kg-sec-btn.weak, body .kga-step.weak .kga-lbl, body .lab-tpl { color: var(--no-ink); }
body .kg-sec-btn.unlock { color: var(--ok-ink); }
body .kga-step.cur .kga-lbl { color: var(--gold-ink); }
body .kg-node-pill:is(.is-prereq, .is-unlock, .st-weak, .sel) .small { color: var(--fg); }
body[data-sec="b1-5-3"] .rd .why { color: var(--muted); }
body.lc-course #qA[aria-pressed="true"], body.lc-course #qE[aria-pressed="true"] { color: var(--on-accent); }

/* Preserve each mathematical color's meaning while giving it a readable tone
   on the current theme. Named values below come from the lesson source colors;
   equations and the distinctions between color families remain intact. */
body .katex [style*="#2f7a56" i], body .katex [style*="47, 122, 86"] { color: var(--ok-ink) !important; }
body .katex [style*="#966524" i], body .katex [style*="150, 101, 36"] { color: var(--gold-ink) !important; }
body .katex [style*="#3e5c76" i], body .katex [style*="62, 92, 118"] { color: var(--c) !important; }
body .katex [style*="#b5452f" i], body .katex [style*="181, 69, 47"] { color: var(--no-ink) !important; }
body .katex :is([style*="#059669" i], [style*="#2e7d32" i], [style*="#16a34a" i], [style*="#10b981" i]) { color: var(--ok-ink) !important; }
body .katex :is([style*="#2563eb" i], [style*="#1976d2" i]) { color: var(--math-blue) !important; }
body .katex [style*="#0284c7" i] { color: var(--math-cyan) !important; }
body .katex [style*="#d97706" i] { color: var(--math-orange) !important; }
body .katex :is([style*="#dc2626" i], [style*="#ef4444" i]) { color: var(--no-ink) !important; }
body .katex [style*="#ec4899" i] { color: var(--math-pink) !important; }
body .katex [style*="#8b5cf6" i] { color: var(--math-purple) !important; }

/* Field edges carry information; decorative dividers retain the brand line. */
body :is(input, select, textarea):not([type="range"], [type="radio"], [type="checkbox"]) {
  border-color: var(--control-line);
}
body input::placeholder, body textarea::placeholder { color: var(--muted); opacity: 1; }
body.lc-course #selM { border-color: var(--control-line) !important; }
body #q { border-color: var(--control-line); }
body input.hci-name.hci-need, body :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--no); }
body .w-links a.act:hover { color: var(--on-accent); }
body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--focus-ring) !important;
}
body .k-set-token[aria-pressed="true"] { outline-color: var(--focus-ring); }

/* Teaching diagrams need a visible boundary on the current surface. Keep
   explicit fills (including none and masks), and leave primary diagrams alone. */
body:not([data-stage="primary"]) :is(svg.fig, svg.micro-fig, svg.entry-fig, .micro-box svg, svg[id^="m-"]):not(.katex svg) {
  --line: var(--control-line);
}
body:not([data-stage="primary"]) :is(svg.fig, svg.micro-fig, svg.entry-fig, .micro-box svg, svg[id^="m-"]):not(.katex svg):not([fill]) {
  fill: var(--fg);
}