@import './dark-palette.css';

/* Shared control: same geometry and palette on React and SSR. */
button.theme-toggle {
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; gap:8px;
  min-width:44px; min-height:44px; padding:10px 12px; border:1px solid #7b8e7f;
  border-radius:7px; background:#fffefa; color:#20392f;
  font-size:13px; font-weight:600; line-height:20px; box-shadow:none;
}
button.theme-toggle:hover { background:#e9eee7; }
html.dark button.theme-toggle { border-color:rgb(var(--vo-dark-strong-line)); background:rgb(var(--vo-dark-surface)); color:rgb(var(--vo-dark-text)); }
html.dark button.theme-toggle:hover { background:rgb(var(--vo-dark-soft)); }
button.theme-toggle:focus-visible { outline:3px solid #a1492e; outline-offset:3px; }
html.dark button.theme-toggle:focus-visible { outline-color:rgb(var(--vo-dark-focus)); }
button.theme-toggle svg { width:20px; height:20px; flex-shrink:0; }
.theme-toggle .theme-sun, html.dark .theme-toggle .theme-moon { display:none; }
html.dark .theme-toggle .theme-sun { display:block; }
@media(max-width:639px) { .theme-toggle-label { display:none; } }