/* Основия — кнопка смены темы. Нужен tokens.css. */
.theme-toggle{
  display:inline-grid;place-items:center;
  width:44px;height:44px;padding:0;              /* зона нажатия 44×44 */
  background:transparent;color:var(--color-text);
  border:1px solid var(--color-border);border-radius:var(--radius);
  cursor:pointer;flex:none;
  transition:border-color .15s, color .15s, transform .15s;
}
@media (hover:hover){.theme-toggle:hover{border-color:var(--color-border-strong)}}
.theme-toggle:active{transform:scale(.96)}
.theme-toggle:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.theme-ico{display:block;width:24px;height:24px;overflow:visible}
.theme-ico__sun,.theme-ico__moon{transform-box:view-box;transform-origin:12px 12px;
  transition:transform .32s cubic-bezier(.2,.7,.2,1), opacity .2s}
/* светлая тема: солнце над плитой, луна ушла за плиту */
.theme-ico__moon{transform:translateY(12px);opacity:0}
[data-theme="dark"] .theme-ico__sun{transform:translateY(12px);opacity:0}
[data-theme="dark"] .theme-ico__moon{transform:none;opacity:1}
/* плавная смена цветов только в момент переключения (класс ставит theme-toggle.js) */
html.theme-switching, html.theme-switching *{
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, fill .2s ease !important;
}
@media (prefers-reduced-motion: reduce){
  .theme-ico__sun,.theme-ico__moon{transition:none}
  html.theme-switching, html.theme-switching *{transition:none !important}
}