/* The existing blackboard remains the default. Only the writing surface and
   its inscriptions change; illustrations, magnets and game engines do not. */
:root {
  --theme-paper: #1b1e1c;
  --theme-ink: #f4f1e6;
  --theme-hover: #303833;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  flex: 0 0 auto;
  min-width: 48px;
  min-height: 48px;
  padding: .35rem .55rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--theme-ink);
  font: 400 1rem/1.3 "Patrick Hand", sans-serif;
  text-decoration: none;
  text-underline-offset: .25em;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}
.theme-toggle[hidden] { display: none !important; }
.theme-toggle:hover { background: transparent; border-color: transparent; text-decoration: underline; text-decoration-thickness: 1px; }
.theme-toggle[aria-pressed="true"] { background: transparent; color: var(--theme-ink); text-decoration: underline dotted; text-decoration-thickness: 1px; }
.theme-toggle[aria-pressed="true"]:hover { background: transparent; text-decoration-style: solid; }
.theme-toggle:focus-visible { outline: 2px solid var(--theme-ink); outline-offset: 2px; }
.site-header, .game-header, .policy-nav { flex-wrap: wrap; }
.site-header > .theme-toggle, .game-header > .theme-toggle { margin-left: auto; }
.topbar > .theme-toggle { margin-left: 0; }

html[data-theme="light"] {
  --theme-paper: #f4f1e6;
  --theme-ink: #1b1e1c;
  --theme-hover: #dedfd4;
  --craie-paper: #f4f1e6;
  --craie-ink: #1b1e1c;
  --craie-accent: #1b1e1c;
  --craie-ink-soft: #48524a;
  --craie-line: #69746b;
  --craie-sage: #dedfd4;
  --craie-clay: #e7e3d7;
  --craie-accent-hover: #364139;
  --board: #f4f1e6;
  --chalk: #1b1e1c;
  --chalk-soft: #48524a;
  --raised: #dedfd4;
  --bg: #f4f1e6;
  --panel: #f7f4ed;
  --ink: #1b1e1c;
  --muted: #48524a;
  --line: #69746b;
  --accent: #1b1e1c;
  --accent-soft: #dedfd4;
  --lime: #dedfd4;
  --hint: #73520e;
  --ok: #27613c;
  --warn: #73520e;
  --state-warm: #ece0ca;
  --state-green: #d8e5d7;
  --state-blue: #dce2ee;
  --state-red: #eedbd7;
  --state-purple: #67438a;
  color-scheme: light;
}
html[data-theme="light"] body::before { filter: invert(1); opacity: .32; }

/* Game pieces keep their colored plastic. Only standalone green writing
   changes so completed steps remain legible on the light writing surface. */
html[data-theme="light"] .church-stop.is-passed,
html[data-theme="light"] .sentence-reading.is-validated { color: #27613c; }
html[data-theme="light"] .cargo-unit--fixed { background: #d1d3c9; }

/* Algorythme: light panels and contrasting inscriptions, with the meanings of
   red/black nodes and the geometry of the scene preserved. */
html[data-theme="light"] .prompt-row,
html[data-theme="light"] .stage-wrap,
html[data-theme="light"] .hint-box,
html[data-theme="light"] .log-box,
html[data-theme="light"] .topics { background: rgb(247 244 237 / 90%); }
html[data-theme="light"] .btn.primary:hover:not(:disabled),
html[data-theme="light"] .cta-small:hover,
html[data-theme="light"] .btn-practice:hover { background: #364139; border-color: #364139; color: #f4f1e6; }
html[data-theme="light"] .node.db,
html[data-theme="light"] .swatch.db {
  color: #f4f1e6;
  box-shadow: 0 0 0 2px #f4f1e6, 0 0 0 4px var(--black), 0 0 0 5px #f4f1e6, 0 3px 10px rgb(0 0 0 / 25%);
}
html[data-theme="light"] .black,
html[data-theme="light"] .swatch.black { border-color: #69746b; }
html[data-theme="light"] .r,
html[data-theme="light"] body.is-dragging .trash { color: #9d2932; }
html[data-theme="light"] body.is-dragging .trash { border-color: #9d2932; }
html[data-theme="light"] .edges line,
html[data-theme="light"] .edges line.gedge,
html[data-theme="light"] .edges line.null-edge { stroke: #69746b; }
html[data-theme="light"] .edges line.tree,
html[data-theme="light"] .edges line.chosen { stroke: #1b1e1c; }
html[data-theme="light"] .edges line.cut { stroke: #9d2932; }
html[data-theme="light"] .edges .cut-mark { fill: #9d2932; }
html[data-theme="light"] .edges .pivot-mark { fill: #864516; }
html[data-theme="light"] .node.cell,
html[data-theme="light"] .node.gleaf,
html[data-theme="light"] .node.gvert { border-color: #69746b; }
html[data-theme="light"] .node.cell.sorted,
html[data-theme="light"] .cell-mini.done,
html[data-theme="light"] .node.gvert.done { border-color: var(--ok); }
html[data-theme="light"] .node.cell.pivot { border-color: #864516; }
html[data-theme="light"] .article pre { background: #e7e3d7; color: #1b1e1c; }
html[data-theme="light"] .brand .logo path { stroke: #1b1e1c; }
html[data-theme="light"] .brand .logo circle { stroke: #69746b; }
html[data-theme="light"] .article figure svg circle { stroke: #69746b; }
html[data-theme="light"] .article figure svg [stroke="#9aa2b1"] { stroke: #69746b; }
html[data-theme="light"] .article figure svg circle[fill="#23272f"] + text,
html[data-theme="light"] .article figure svg circle[fill="#111613"] + text,
html[data-theme="light"] .article figure svg circle[fill="#d63a3a"] + text,
html[data-theme="light"] .article figure svg circle[fill="#b13a40"] + text,
html[data-theme="light"] .article figure svg circle[fill="#3f51d6"] + text { fill: #ffffff; }
html[data-theme="light"] .sort-role { color: #22302b; }
html[data-theme="light"] .sort-piece.has-role .sort-stick { border-color: #864516; }
html[data-theme="light"] .sort-piece.is-sorted .sort-stick { background: #a7d3ad; border-color: var(--ok); }
html[data-theme="light"] .sort-piece.is-sorted .sort-role { background: #a7d3ad; color: #22302b; }
html[data-theme="light"] .sort-controls button[data-action="play"]:hover { background: #364139; color: #f4f1e6; }
html[data-theme="light"] select,
html[data-theme="light"] input,
html[data-theme="light"] textarea { color: #1b1e1c; background-color: #f7f4ed; border-color: #69746b; }

@media (max-width: 600px) {
  .game-header > .theme-toggle { margin-left: 0; }
  .site-header > .theme-toggle { margin-left: 0; }
}
@media (forced-colors: active) {
  .theme-toggle { border-color: ButtonText; }
  .theme-toggle[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: 2px; }
}