/* ============================================================
   theme.css — дизайн-токены тем оформления.
   Спека: docs/superpowers/specs/2026-07-26-light-theme-design.md
   Подключается ПОСЛЕ tailwind.min.css / mobile.css / blog.css.
   Тёмная тема — значения по умолчанию в :root.
   Светлая — только на десктопе: @media (min-width: 1024px).
   Формат "R G B" нужен для opacity-модификаторов Tailwind.
   ============================================================ */

:root {
  --c-background: 16 15 13;    /* #100F0D */
  --c-surface: 23 21 18;       /* #171512 */
  --c-raised: 29 26 22;        /* #1D1A16 */
  --c-foreground: 236 231 222; /* #ECE7DE */
  --c-secondary: 156 150 140;  /* #9C968C */
  --c-accent: 201 162 75;      /* #C9A24B */
  --c-accent-deep: 143 115 49; /* #8F7331 */
  --c-border: 39 35 30;        /* #27231E */
  --c-on-accent: 20 18 15;     /* #14120F */
  --c-muted: 58 53 46;         /* #3A352E (quote-btn, декоративные линии) */
  --c-header-bg: rgba(16, 15, 13, 0.88);
}

@media (min-width: 1024px) {
  [data-theme="light"] {
    --c-background: 246 243 236; /* #F6F3EC */
    --c-surface: 252 250 245;    /* #FCFAF5 */
    --c-raised: 237 234 221;     /* #EDE8DD */
    --c-foreground: 27 24 19;    /* #1B1813 */
    --c-secondary: 92 85 74;     /* #5C554A — темнее для читаемости описаний */
    --c-accent: 143 115 49;      /* #8F7331 — золото, затемнённое для контраста */
    --c-accent-deep: 110 89 38;  /* #6E5926 */
    --c-border: 226 220 207;     /* #E2DCCF */
    --c-on-accent: 253 251 246;  /* #FDFBF6 */
    --c-muted: 220 213 196;      /* #DCD5C4 */
    --c-header-bg: rgba(246, 243, 236, 0.88);
  }

  /* Hero в светлой теме: видео остаётся видимым, скрим ослаблен */
  [data-theme="light"] .hero-bg { opacity: 0.75; }
  [data-theme="light"] .hero-scrim { opacity: 0.5; }
}

/* Плавный переход между темами */
body,
#site-header,
.request-strip,
.quote-btn,
#theme-toggle {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  body,
  #site-header,
  .request-strip,
  .quote-btn,
  #theme-toggle {
    transition: none;
  }
}

/* ── Переключатель темы: pill-свитч с золотым ползунком ─────── */
.theme-switch {
  position: relative;
  flex: none;
  align-items: center;
  justify-content: space-between;
  width: 4.25rem;
  height: 2rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--c-foreground) / 0.25);
  cursor: pointer;
  background: transparent;
  transition: border-color 0.3s ease;
}
.theme-switch:hover { border-color: rgb(var(--c-accent)); }
.theme-switch:focus-visible { outline: 2px solid rgb(var(--c-accent)); outline-offset: 2px; }

.theme-switch svg {
  width: 13px;
  height: 13px;
  color: rgb(var(--c-secondary));
  transition: color 0.3s ease;
}

/* Активная сторона подсвечена */
#theme-toggle:not(.is-light) .theme-icon-moon { color: rgb(var(--c-foreground)); }
#theme-toggle.is-light .theme-icon-sun { color: rgb(var(--c-foreground)); }

.theme-knob {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgb(var(--c-accent));
  box-shadow: 0 1px 5px rgb(0 0 0 / 0.3);
  transform: translate(2.25rem, -50%); /* тёмная тема: ползунок у луны */
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
}
#theme-toggle.is-light .theme-knob { transform: translate(0, -50%); }

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