/* Moduł theme repozytorium assets (kopia w projekcie: public/assets/theme – nie edytować, zmiany w assets).
   Przełącznik motywu (.theme-switch z Theme::switcher()) na zmiennych CSS projektu. Projekt dopasowuje wygląd
   zmiennymi --theme-switch-* (np. w :root albo .site-header), bez nadpisywania reguł:
     --theme-switch-size       przycisk (28px)           --theme-switch-icon       ikona (16px)
     --theme-switch-bg         tło pigułki (--surface)   --theme-switch-border     obwódka (--line-2)
     --theme-switch-fg         ikona (--muted)           --theme-switch-fg-active  ikona wybranego i po najechaniu (--ink)
     --theme-switch-active     tło wybranego (--surface-3)
     --theme-switch-gap-left   odstęp od elementu obok (.6rem; telefon: --theme-switch-gap-left-compact .4rem)
     --theme-switch-compact-icon  ikona na telefonie (16px)
     --theme-switch-focus      obwódka fokusu (--accent)
   Klasa .sr-only (tekst dla czytników ekranu) jest w module, gdyby projekt jej nie miał. */

.theme-switch {
  display: inline-flex; margin-left: var(--theme-switch-gap-left, .6rem); padding: 2px; gap: 2px; border-radius: 999px;
  border: 1px solid var(--theme-switch-border, var(--line-2, #c9c9c3)); background: var(--theme-switch-bg, var(--surface, transparent));
}
.theme-switch button {
  display: grid; place-items: center; width: var(--theme-switch-size, 28px); height: var(--theme-switch-size, 28px); padding: 0; border: 0; border-radius: 999px;
  background: none; color: var(--theme-switch-fg, var(--muted, #6b6964)); cursor: pointer;
}
.theme-switch svg {
  width: var(--theme-switch-icon, 16px); height: var(--theme-switch-icon, 16px);
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.theme-switch button:hover { color: var(--theme-switch-fg-active, var(--ink, #0b0b0b)); }
.theme-switch button[aria-pressed='true'] { color: var(--theme-switch-fg-active, var(--ink, #0b0b0b)); background: var(--theme-switch-active, var(--surface-3, #ecebe6)); }
.theme-switch button:focus-visible { outline: 2px solid var(--theme-switch-focus, var(--accent, currentColor)); outline-offset: 1px; }
/* Na wąskim ekranie jeden przycisk z bieżącym trybem – dotknięcie przełącza na następny (theme.js) */
@media (max-width: 480px) {
  .theme-switch { margin-left: var(--theme-switch-gap-left-compact, .4rem); padding: 0; border: 0; background: none; }
  .theme-switch button[aria-pressed='false'] { display: none; }
  .theme-switch button[aria-pressed='true'] {
    width: 34px; height: 34px; background: var(--theme-switch-bg-compact, var(--surface, transparent));
    border: 1px solid var(--theme-switch-border, var(--line-2, #c9c9c3));
  }
  .theme-switch svg { width: var(--theme-switch-compact-icon, var(--theme-switch-icon, 16px)); height: var(--theme-switch-compact-icon, var(--theme-switch-icon, 16px)); }
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }