:root {
  color-scheme: light;
  --page: #f2f5ef;
  --surface: #fffefa;
  --surface-hover: #ffffff;
  --text: #192b21;
  --text-strong: #172a1e;
  --muted: #526759;
  --soft: #697d6f;
  --line: #cbd9cd;
  --line-strong: #a8c0ad;
  --accent: #265f43;
  --accent-hover: #174b33;
  --accent-text: #245c40;
  --accent-soft: #deede0;
  --button-bg: #265f43;
  --button-text: #ffffff;
  --input: #ffffff;
  --error: #a33e34;
  --shadow: 0 10px 32px rgb(22 47 29 / 0.06);
  --shadow-hover: 0 17px 40px rgb(22 47 29 / 0.12);
  --backdrop: rgb(12 27 17 / 0.5);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #111c17;
  --surface: #1b2b22;
  --surface-hover: #24372b;
  --text: #ecf4e9;
  --text-strong: #f5f9ef;
  --muted: #b7c9b8;
  --soft: #9fb4a3;
  --line: #385040;
  --line-strong: #5b7d62;
  --accent: #a3e0b0;
  --accent-hover: #c0f2c8;
  --accent-text: #a3e0b0;
  --accent-soft: #2d4c35;
  --button-bg: #a3e0b0;
  --button-text: #102216;
  --input: #17251d;
  --error: #ffb1a5;
  --shadow: 0 10px 32px rgb(0 0 0 / 0.16);
  --shadow-hover: 0 17px 40px rgb(0 0 0 / 0.24);
  --backdrop: rgb(3 9 6 / 0.7);
}

.theme-toggle {
  flex: none;
  min-height: 38px;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); background: var(--accent-soft); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
main > .theme-toggle { position: absolute; top: 25px; right: 25px; }
@media (max-width: 480px) { main > .theme-toggle { top: 18px; right: 18px; } }