:root {
  color-scheme: light;
  --canvas: #f5f7f5;
  --surface: #fff;
  --text: #17251f;
  --muted: #51645a;
  --line: #d6ded8;
  --subline: #e3e9e4;
  --strong-line: #bac8be;
  --soft: #eef3ef;
  --soft-text: #42564a;
  --hover: #e8f0e9;
  --accent: #155a43;
  --action: #194b38;
  --action-text: #fff;
  --tint: #e5eee5;
  --tint-line: #c4d7c7;
  --tint-text: #154530;
  --focus: #bd620d;
  --header: #162c24;
  --header-text: #eff8f2;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #101815;
  --surface: #19231e;
  --text: #e8f0e9;
  --muted: #b0c2b6;
  --line: #35463b;
  --subline: #2e4035;
  --strong-line: #526b59;
  --soft: #213127;
  --soft-text: #d0dfd4;
  --hover: #2b4134;
  --accent: #91deb2;
  --action: #a4e0bc;
  --action-text: #10291a;
  --tint: #203b2b;
  --tint-line: #426b50;
  --tint-text: #bef0cc;
  --focus: #ffc081;
  --header: #13261d;
  --header-text: #eff8f2;
}
#theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 5px 9px; background: transparent; color: var(--header-text);
  font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; border: 0;
  border-radius: 8px;
}
#theme-toggle:hover { background: #294738; }
#theme-toggle:focus-visible { outline: 3px solid #ffc081; outline-offset: 1px; }
.switch-track {
  display: flex; align-items: center; width: 29px; height: 17px; padding: 2px;
  border: 1px solid #accaaf; border-radius: 999px;
}
.switch-track::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: #d5e2d8; }
[data-theme="dark"] .switch-track { justify-content: flex-end; background: #a4e0bc; border-color: #a4e0bc; }
[data-theme="dark"] .switch-track::after { background: #153322; }