/* Shared dark-mode toggle + logo swap. Pages color the button through
   --tt-fg / --tt-line / --tt-hover (defaults follow the surrounding text). */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

.theme-toggle {
  flex: none; display: inline-grid; place-items: center;
  width: 40px; height: 40px; padding: 0; margin: 0;
  border-radius: 999px; border: 1px solid var(--tt-line, currentColor);
  background: transparent; color: var(--tt-fg, currentColor);
  cursor: pointer; font: inherit; line-height: 0;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.theme-toggle:hover { background: var(--tt-hover, rgba(127, 127, 127, 0.14)); }
.theme-toggle:focus-visible { outline: 2px solid var(--tt-focus, currentColor); outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .theme-toggle-sun { display: none; }
html[data-theme="dark"] .theme-toggle .theme-toggle-sun { display: block; }
html[data-theme="dark"] .theme-toggle .theme-toggle-moon { display: none; }
@media (pointer: coarse) { .theme-toggle { width: 44px; height: 44px; } }

/* Logo pairs: <img class="logo-light"> + <img class="logo-dark"> */
html[data-theme="dark"] .logo-light { display: none !important; }
html:not([data-theme="dark"]) .logo-dark { display: none !important; }

@media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } }