/* Page styles retain their original dark colors as variable fallbacks. */
:root { color-scheme: dark; }
:root[data-theme="light"] {
  color-scheme: light;
  --ink: #ffffff;
  --surface: #f5f7f4;
  --line: rgba(28, 48, 34, .18);
  --text: #18251c;
  --muted: #526157;
  --accent: #466300;
  --theme-accent: #466300;
  --accent-soft: rgba(70, 99, 0, .08);
  --on-accent: #ffffff;
  --accent-hover: #354c00;
  --theme-text: #26382c;
  --theme-muted: #526157;
  --theme-panel: #f5f7f4;
  --theme-input: #ffffff;
  --theme-border: #b6c3b8;
  --theme-grid: #d5dfd7;
  --theme-green: #27633a;
  --theme-red: #a52d2d;
  --theme-amber: #805100;
  --theme-teal: #096b62;
  --theme-blue: #24629a;
  --theme-purple: #803b91;
  --theme-green-soft: #e8f3e5;
  --theme-red-soft: #fbeceb;
  --theme-amber-soft: #faf1de;
  --theme-teal-soft: #e5f3ef;
  --theme-blue-soft: #e9f1f8;
  --theme-purple-soft: #f3eaf7;
  --theme-overlay-rgb: 28, 48, 34;
  --theme-shadow-rgb: 100, 120, 106;
  --heatmap-missing: #e0e7e2;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 9px;
  min-height: 42px;
  margin-left: auto;
  margin-right: clamp(18px, 3vw, 40px);
  padding: 10px 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 500 12px "DM Sans", sans-serif;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .theme-moon { display: none; }
[data-theme="light"] .theme-toggle .theme-sun { display: none; }
[data-theme="light"] .theme-toggle .theme-moon { display: block; }

@media (max-width: 980px) {
  .theme-toggle { margin-right: 12px; }
}
@media (max-width: 540px) {
  .site-header { padding-inline: 16px; gap: 10px; }
  .brand { gap: 8px; font-size: 18px; }
  .brand-icon { width: 36px; height: 36px; }
  .theme-toggle { width: 42px; padding: 10px; margin-right: 0; }
  .theme-toggle span { display: none; }
  .menu-toggle { flex-shrink: 0; }
}