:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #151e1a;
  --card: #202c25;
  --ink: #e4ebdf;
  --muted: #adbba7;
  --green: #a1c9ad;
  --pale: #2d3d31;
  --line: #435446;
  --copper: #e5ad82;
  --dark-warning: #453329;
  --dark-warning-ink: #f0c3a0;
}

/* Surfaces and feedback share the same palette in both course runners. */
[data-theme="dark"] button:hover:not(:disabled) { background: #334838; border-color: #94b19a; }
[data-theme="dark"] :is(button,a,input,textarea,select):focus-visible { outline-color: #edb78c; }
[data-theme="dark"] .primary { background: var(--green); color: #14241a; border-color: var(--green); }
[data-theme="dark"] .primary:hover:not(:disabled) { background: #badbc2; color: #14241a; border-color: #badbc2; }
[data-theme="dark"] .stage-tabs [aria-pressed="true"]:hover { background: #badbc2; color: var(--paper); }
[data-theme="dark"] :is(input,textarea,select) { color: var(--ink); background-color: var(--card); border-color: var(--line); accent-color: var(--green); }
[data-theme="dark"] ::placeholder { color: var(--muted); opacity: 1; }
[data-theme="dark"] .seal { color: var(--copper); border-color: var(--copper); }
[data-theme="dark"] .skip-link { background: var(--card); }
[data-theme="dark"] :is(.secondary,.chip,.unit-number,.stage,.board-context,.hint-text,.legacy-notice,.independent-intro,.variation-observations p) { background: var(--pale); color: var(--ink); }
[data-theme="dark"] :is(.unit-intro,.lesson-link) { border-bottom-color: var(--line); }
[data-theme="dark"] :is(.unit-number,.lesson-num) { color: var(--muted); }
[data-theme="dark"] .lesson-status { color: var(--green); }
[data-theme="dark"] :is(.lesson-link.current,.choice[aria-pressed="true"],.import-preview) { background: var(--pale); border-color: #8aac87; }
[data-theme="dark"] .choice[aria-pressed="true"] .radio { background: var(--green); box-shadow: inset 0 0 0 3px var(--pale); }
[data-theme="dark"] .choice .radio { border-color: var(--muted); }
[data-theme="dark"] :is(.feedback,.guided-response) { background: #2b4031; color: var(--ink); }
[data-theme="dark"] :is(.save-status.error,.chip.independent,.lesson-link.challenge,.feedback.retry,.guided-response.trial,.guided-response.diagonal,.guided-response.occupied,.guided-response.distant,.guided-response.incorrect) { background: var(--dark-warning); color: var(--dark-warning-ink); }
[data-theme="dark"] :is(.import-error,.danger-zone summary) { color: var(--dark-warning-ink); }
[data-theme="dark"] :is(.response-state,.board-context,.site-footer) { color: var(--muted); }
[data-theme="dark"] .preview-note { color: var(--copper); }
[data-theme="dark"] .stone-icon { border: 1px solid #9aab92; }
[data-theme="dark"] .progress-dot { background: var(--line); }
[data-theme="dark"] .progress-dot.done { background: var(--green); }
[data-theme="dark"] .progress-dot.active { background: var(--copper); }
[data-theme="dark"] .complete-flower { color: var(--green); }
[data-theme="dark"] dialog { border-color: var(--line); box-shadow: 0 22px 80px #0008; }
[data-theme="dark"] dialog::backdrop { background: #030b08b3; }

/* Keep the illustration legible over a quiet, dark garden. */
[data-theme="dark"] .hero { background: #17231e; }
[data-theme="dark"] .hero-art { mix-blend-mode: normal; filter: brightness(.58) saturate(.8); opacity: .85; }
[data-theme="dark"] .hero-copy { background: linear-gradient(90deg,#17231efa 55%,#17231e00); }
[data-theme="dark"] .hero p { color: #c0cdb7; }
[data-theme="dark"] .quiet .hero-art { opacity: .4; }
[data-theme="dark"] .panda { mix-blend-mode: normal; background-color: #dcd2ba; background-blend-mode: multiply; border-radius: 12px; }

/* A softer wood board preserves the meaning of black/white stones and markers. */
[data-theme="dark"] .board-wrap { background: #393225; border-color: #87734f; box-shadow: 0 8px 25px #0003; }
[data-theme="dark"] .goban:not(.high-contrast) { background: linear-gradient(115deg,#b99b6e,#c8ad82 43%,#bfa073); }
[data-theme="dark"] .goban:not(.high-contrast) .grid path { stroke: #695439; }
[data-theme="dark"] .goban:not(.high-contrast) .grid text { fill: #362d21; }
[data-theme="dark"] .goban:not(.high-contrast) .stars { fill: #564329; }
[data-theme="dark"] .point:focus-visible { outline-color: #482c1c; }
[data-theme="dark"] .point:hover:not(:disabled) { background: #2e57382a; border-color: #385e3e75; }

.header-controls { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.theme-switch { display: flex; gap: 2px; padding: 3px; background: var(--pale); border: 1px solid var(--line); border-radius: 28px; flex-shrink: 0; }
.theme-switch button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 7px 11px; border: 0; border-radius: 23px; background: transparent; font-size: 12px; white-space: nowrap; }
.theme-switch svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:root .theme-switch button[aria-pressed="true"] { background: var(--green); color: var(--paper); }
.theme-switch button:focus-visible { outline-offset: 2px; }
@media (max-width: 1080px) {
  .header-controls { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 760px) {
  .site-header { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px 10px; }
  .brand { font-size: 18px; gap: 9px; min-width: 0; }
  .header-controls { display: contents; }
  .theme-switch { grid-column: 2; grid-row: 1; }
  .theme-switch button { min-height: 44px; padding: 7px 9px; gap: 4px; }
  .theme-switch svg { width: 14px; height: 14px; }
  .site-header nav { grid-column: 1 / -1; grid-row: 2; max-width: none; width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 2px; }
  [data-theme="dark"] .hero-copy { background: linear-gradient(180deg,#17231e 53%,#17231e00); }
}