/* Shared light/dark tokens. Original colours remain the light-theme fallbacks. */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e5eee9;
  --paper: #101b19;
  --deep: #75dec0;
  --teal: #65dfc0;
  --mint: #19382f;
  --line: #395347;
  --muted: #b1c5bd;
  --white: #172823;
  --violet: #c6d0ff;
  --brand-surface: #0c1f19;
  --on-brand: #f6f8f5;
  --action: #087f72;
  --action-hover: #05685e;
  --header-surface: rgba(16, 27, 25, .97);
  --surface: #172823;
  --surface-soft: #12251e;
  --surface-muted: #1b3028;
  --surface-green: #19382f;
  --surface-purple: #22283c;
  --surface-warm: #302c24;
  --surface-note: #39321e;
  --surface-hover: #24463a;
  --text-secondary: #b1c5bd;
  --text-green: #a3e8ca;
  --text-purple: #c6d0ff;
  --note-text: #f6e7b6;
  --deleted-text: #aebbb5;
  --danger: #ffaaa6;
  --detail-line: #395347;
  --control-line: #6b957e;
  --purple-line: #4e5779;
  --note-line: #806d35;
  --highlight: #49451d;
  --highlight-text: #fff3b0;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: transparent;
  line-height: 1;
}
.theme-toggle:hover { background: var(--mint); }
.theme-toggle svg { width: 22px; height: 22px; flex: none; }
.theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: block; }
.theme-toggle:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
:root[data-theme="dark"] :focus-visible { outline-color: var(--violet); }
:root[data-theme="dark"] :is(input:not([type="checkbox"]), select, textarea,
  .button.secondary, .quote-controls button, .theme-toggle, .topic-links a) {
  border-color: var(--control-line);
}

@media (max-width: 1000px) {
  .nav-wrap .theme-toggle { order: 1; }
  .nav-wrap .language { order: 2; }
  .nav-wrap .menu-toggle { order: 3; }
  .header nav { order: 4; }
}
@media (max-width: 380px) {
  .nav-wrap { gap: 2px; }
  .nav-wrap .wordmark { gap: 6px; }
  .wordmark img { width: 34px; }
}