/* ================= СВЕТЛАЯ ТЕМА =================
   Меняем только переменные — остальные стили написаны через них,
   поэтому переопределять правила по одному не нужно. */
:root[data-theme="light"]{
  --black:#F6F5F3;
  --surface:#FFFFFF;
  --surface-2:#F1EFEC;
  --border:#DDD9D4;
  --border-soft:#E8E5E1;
  --white:#171519;
  --grey:#5B5760;
  --grey-dim:#8A858F;
  --red:#D42B22;
  --red-hi:#E8342A;
  --red-dim:#F3C4C0;
  --red-glow:rgba(212,43,34,.25);
  color-scheme: light;
}

:root[data-theme="light"] body{ background:var(--black); color:var(--grey); }

/* Тёмные подложки, заданные вручную, в светлой теме читаются плохо */
:root[data-theme="light"] .nav,
:root[data-theme="light"] .footer{ background:rgba(255,255,255,.92); }
:root[data-theme="light"] .post-body pre,
:root[data-theme="light"] .code-out,
:root[data-theme="light"] .fb-key{ background:#F1EFEC; }
:root[data-theme="light"] .skeleton{
  background:linear-gradient(90deg, #E8E5E1 25%, #F3F1EE 50%, #E8E5E1 75%);
  background-size:200% 100%;
}
:root[data-theme="light"] .mc-preview,
:root[data-theme="light"] .dm-chest{ filter:none; }

/* ================= ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ =================
   Живёт в нижней строке подвала, рядом с копирайтом: там его ищут
   и там он не спорит с основными ссылками. */
.footer-bottom{ position:relative; }
.theme-box{ display:inline-flex; align-items:center; margin-left:16px; vertical-align:middle; }

.theme-toggle{
  position:relative; width:58px; height:28px; padding:0; cursor:pointer;
  border-radius:999px; border:1px solid var(--border); background:var(--surface-2);
  display:flex; align-items:center; justify-content:space-between;
  transition:background-color .18s ease, border-color .18s ease;
}
.theme-toggle:hover{ border-color:var(--grey-dim); }

.theme-ico{
  position:relative; z-index:2; width:28px; display:grid; place-items:center;
  color:var(--grey-dim); transition:color .18s ease;
}
.theme-ico svg{
  width:14px; height:14px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}

/* бегунок под активной иконкой */
.theme-knob{
  position:absolute; top:2px; left:2px; width:24px; height:22px; z-index:1;
  border-radius:999px; background:var(--red);
  transition:transform .2s cubic-bezier(.4,0,.2,1);
}
.theme-toggle.light .theme-knob{ transform:translateX(28px); }

/* активная иконка светлеет, вторая гаснет */
.theme-toggle .theme-moon{ color:#FFF; }
.theme-toggle.light .theme-moon{ color:var(--grey-dim); }
.theme-toggle.light .theme-sun{ color:#FFF; }

@media (prefers-reduced-motion: reduce){
  .theme-knob{ transition:none; }
}

@media (max-width: 560px){
  .theme-box{ display:flex; margin:14px 0 0; justify-content:center; width:100%; }
}