/* Переносимые переменные. Цвета проекта задавайте через эти токены. */
:root {
  color-scheme: light;
  --theme-bg: #f5f5ef;
  --theme-surface: #ffffff;
  --theme-text: #292e26;
  --theme-muted: #606759;
  --theme-line: #d8dcd1;
  --theme-accent: #485d33;
  --theme-on-accent: #ffffff;
  --theme-track: #e5e9dd;
  --theme-knob: #ffffff;
  --theme-knob-icon: #485d33;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --theme-bg: #191d18;
  --theme-surface: #252b22;
  --theme-text: #f0f3e9;
  --theme-muted: #b7c1ab;
  --theme-line: #48503f;
  --theme-accent: #c2df98;
  --theme-on-accent: #253516;
  --theme-track: #39432f;
  --theme-knob: #c2df98;
  --theme-knob-icon: #253516;
}
/* ОС остаётся источником темы и при отключённом JavaScript. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --theme-bg: #191d18;
    --theme-surface: #252b22;
    --theme-text: #f0f3e9;
    --theme-muted: #b7c1ab;
    --theme-line: #48503f;
    --theme-accent: #c2df98;
    --theme-on-accent: #253516;
    --theme-track: #39432f;
    --theme-knob: #c2df98;
    --theme-knob-icon: #253516;
  }
}
.theme-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 104px;
  height: 54px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: var(--theme-track);
  color: var(--theme-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.theme-switch svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-switch__thumb {
  position: absolute;
  left: 5px;
  top: 5px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--theme-knob);
  color: var(--theme-knob-icon);
  box-shadow: 0 3px 9px #0000001a;
  pointer-events: none;
}
.theme-switch__thumb svg { grid-area: 1 / 1; }
.theme-switch__moon { opacity: 0; transform: rotate(-65deg) scale(.6); }
.theme-switch[aria-checked="true"] .theme-switch__thumb { transform: translateX(50px); }
.theme-switch[aria-checked="true"] .theme-switch__sun { opacity: 0; transform: rotate(65deg) scale(.6); }
.theme-switch[aria-checked="true"] .theme-switch__moon { opacity: 1; transform: rotate(0) scale(1); }
.theme-switch:focus-visible, .theme-system:focus-visible {
  outline: 2px solid var(--theme-accent);
  outline-offset: 5px;
}
.theme-switch:disabled, .theme-system:disabled { opacity: .5; cursor: not-allowed; }
.theme-system {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--theme-line);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  background: transparent;
  color: var(--theme-muted);
  cursor: pointer;
}
.theme-system[aria-pressed="true"] { color: var(--theme-accent); background: var(--theme-track); }
@media (hover: hover) {
  .theme-switch:hover { filter: brightness(.97); }
  .theme-system:hover { color: var(--theme-text); }
}
.theme-ready .theme-switch,
.theme-ready .theme-system {
  transition: background-color 240ms ease-out, color 240ms ease-out, border-color 240ms ease-out;
}
.theme-ready .theme-switch__thumb {
  transition: transform 380ms cubic-bezier(.16, 1, .3, 1), background-color 240ms ease-out, color 240ms ease-out;
}
.theme-ready .theme-switch__thumb svg {
  transition: transform 380ms cubic-bezier(.16, 1, .3, 1), opacity 180ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .theme-ready .theme-switch,
  .theme-ready .theme-switch__thumb,
  .theme-ready .theme-switch__thumb svg,
  .theme-ready .theme-system { transition: none; }
}