/* theme.css — токены тёмной и светлой темы + тумблер в шапке.
   Подключать ПЕРЕД <style> страницы: page > :root перебивает эти дефолты,
   а светлая тема (html[data-theme="light"]) перебивает и то и другое. */

:root {
  color-scheme: dark;
  --border: #26262F;     /* status.html своего --border не объявляет */
  --ink: #F2F2F7;          /* заголовки */
  --ink2: #D5D5DE;         /* плотный текст в панелях */
  --soft: #8B8B98;         /* подписи, sec-note */
  --nav-link: #B8B8C4;
  --nav-bg: rgba(10,10,14,0.72);
  --hover: #17171F;
  --chip: rgba(21,21,28,0.85);
  --input: #0E0E14;
  --border2: #2A2A36;
  --faint: #6E6E7C;
  --faint2: #55555F;
  --grid: rgba(255,255,255,0.018);
  --shadow: rgba(0,0,0,1);
}

html[data-theme="light"] {
  color-scheme: light;
  --accent: #2E8B3D;
  --bg: #F2F2EE;
  --panel: rgba(255,255,255,0.92);
  --line: #E1E1D9;
  --border: #D2D2C9;
  --text: #1A1A20;
  --muted: #5A5A66;
  --dim: #6E6E7A;
  --green: #2E8B3D;
  --ink: #0C0C12;
  --ink2: #2E2E38;
  --soft: #64646F;
  --nav-link: #3C3C48;
  --nav-bg: rgba(242,242,238,0.78);
  --hover: #E5E5DD;
  --chip: rgba(255,255,255,0.92);
  --input: #FFFFFF;
  --border2: #C9C9C0;
  --faint: #83838D;
  --faint2: #9A9AA3;
  --grid: rgba(0,0,0,0.035);
  --shadow: rgba(60,60,40,0.35);
}

html[data-theme="light"] ::selection { background: rgba(46,139,61,0.25); }

/* во время подмены темы живой DOM спрятан за снимками: любой transition
   стартует в замороженном поддереве и застывает на старом цвете — глушим их */
html.theme-swap, html.theme-swap body, html.theme-swap *,
html.theme-swap *::before, html.theme-swap *::after {
  transition: none !important;
}

/* мягкая смена: класс висит только на время переключения */
html.theming, html.theming body, html.theming *,
html.theming *::before, html.theming *::after {
  transition: background-color .62s cubic-bezier(.4,0,.2,1),
              border-color .62s cubic-bezier(.4,0,.2,1),
              color .62s cubic-bezier(.4,0,.2,1),
              box-shadow .62s cubic-bezier(.4,0,.2,1),
              fill .62s cubic-bezier(.4,0,.2,1) !important;
}
/* ползунок тумблера ездит своим ходом и во время переливания */
html.theming .theme-toggle .knob { transition: transform .5s cubic-bezier(.34,1.2,.4,1) !important; }

/* тумблер */
.theme-toggle {
  --knob: 20px;
  position: relative; flex: none; cursor: pointer;
  width: 52px; height: 26px; padding: 0; margin-left: 10px;
  background: var(--chip); border: 1px solid var(--border2); border-radius: 0;
  transition: border-color .2s, background-color .2s;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle .knob {
  position: absolute; top: 2px; left: 2px;
  width: var(--knob); height: var(--knob);
  background: var(--accent);
  transition: transform .5s cubic-bezier(.34,1.2,.4,1);
  display: grid; place-items: center;
}
html[data-knob="light"] .theme-toggle .knob { transform: translateX(26px); }
.theme-toggle .knob svg { width: 12px; height: 12px; display: block; color: #fff; }
.theme-toggle .knob .sun { display: none; }
html[data-knob="light"] .theme-toggle .knob .sun { display: block; }
html[data-knob="light"] .theme-toggle .knob .moon { display: none; }

@media (max-width: 560px) {
  .theme-toggle { width: 34px; height: 20px; --knob: 14px; margin-left: 3px; }
  html[data-knob="light"] .theme-toggle .knob { transform: translateX(14px); }
  .theme-toggle .knob svg { width: 9px; height: 9px; }
  /* на узких экранах ряд ссылок вместе с тумблером может не помещаться —
     разрешаем сдвигать его пальцем, полосу прокрутки прячем */
  .nav-links { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .nav-links::-webkit-scrollbar { display: none; }
}

/* круговая развёртка новой темы из точки тумблера */
/* браузер по умолчанию растворяет старый кадр за 250 мс — из-за этого конец
   развёртки выглядел рывком. Гасим всю служебную анимацию, двигаем только клип */
::view-transition-group(root),
::view-transition-image-pair(root),
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { opacity: 1; z-index: 0; }
::view-transition-new(root) { opacity: 1; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  html.theming, html.theming body, html.theming * { transition: none !important; }
  .theme-toggle .knob { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}