/* Light / dark mode helpers (see shared/theme.js). The colors themselves come from
   design/tokens.css ([data-theme='dark']), this file only adds what our pages need. */

/* Logo rule: dark blue logo on light ground, white logo on dark ground – never recolored */
.logo-on-dark { display: none; }
[data-theme='dark'] .logo-on-light { display: none; }
[data-theme='dark'] .logo-on-dark { display: inline-block; }

/* Pages and cards get the dark page color */
[data-theme='dark'] body { background: var(--bg-1); color: var(--fg-1); }

/* Ghost buttons and inputs stay readable on dark */
[data-theme='dark'] .btn-ghost { color: var(--fg-1); border-color: var(--fg-1); }
[data-theme='dark'] .input { background: var(--bg-2); color: var(--fg-1); }

/* Light/dark button */
.theme-switch {
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border: 1px solid var(--rule-1);
  background: var(--bg-1);
  color: var(--fg-1);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.theme-switch:focus-visible { outline: 2px solid var(--sr-orange); outline-offset: 2px; }