/* Светлая тема knowlyapps.com — «Слоновая кость и золото».
   Тёмная тема (дефолт) живёт в phraseman.css; здесь только переопределения
   для html[data-theme="light"] + стили кнопки-переключателя.
   Подключать ПОСЛЕ phraseman.css. Тему ставит assets/theme.js (до отрисовки). */

html[data-theme="light"] {
  --bg: #faf7f0;
  --surface: #ffffff;
  --surface-2: #f4efe4;
  --line: rgba(30, 26, 16, 0.09);
  --line-strong: rgba(30, 26, 16, 0.16);
  --text: #1d1a12;
  --muted: #5c5a52;
  --muted-2: #8b887e;
  --gold: #a87a16;
  --gold-deep: #8a6510;
  --gold-grad: linear-gradient(115deg, #d8a832 0%, #b8871e 48%, #8a6510 100%);
}

/* Фон: тёплое светлое свечение вместо чёрного */
html[data-theme="light"] .bg {
  background:
    radial-gradient(1200px 680px at 50% -180px, rgba(216, 168, 50, 0.2), transparent 62%),
    radial-gradient(900px 560px at 108% 42%, rgba(196, 148, 46, 0.09), transparent 58%),
    linear-gradient(168deg, #fdfaf3 0%, #faf7f0 45%, #f6f1e5 100%);
}
html[data-theme="light"] .bg::before {
  background: radial-gradient(125% 95% at 50% 38%, transparent 55%, rgba(120, 92, 24, 0.12) 100%);
}
html[data-theme="light"] .bg::after {
  opacity: 0.25;
}
html[data-theme="light"] .bg .orb-a {
  background: radial-gradient(circle at 50% 50%, rgba(216, 168, 50, 0.16), rgba(216, 168, 50, 0.05) 42%, transparent 66%);
}
html[data-theme="light"] .bg .orb-b {
  background: radial-gradient(circle at 50% 50%, rgba(196, 148, 46, 0.11), rgba(196, 148, 46, 0.04) 40%, transparent 62%);
}

/* Тени мягче: чёрные тени тёмной темы на светлом фоне выглядят грязно */
html[data-theme="light"] .brand img {
  box-shadow: 0 6px 20px rgba(120, 90, 20, 0.18);
}
html[data-theme="light"] .nav a:hover {
  background: rgba(30, 26, 16, 0.05);
}
html[data-theme="light"] .nav .cta,
html[data-theme="light"] .btn-gold,
html[data-theme="light"] .russia-step-num,
html[data-theme="light"] .qplan-badge,
html[data-theme="light"] .qbuild-line.done .check {
  color: #fffdf7;
}
html[data-theme="light"] .nav .cta:hover {
  color: #fffdf7;
}
html[data-theme="light"] .nav .cta,
html[data-theme="light"] .btn-gold {
  box-shadow: 0 10px 28px rgba(168, 122, 22, 0.28);
}

/* Кнопки сторов остаются тёмными (фирменный вид Apple/Google) — только рамка */
html[data-theme="light"] .store-badge {
  background: #101012;
  border-color: rgba(30, 26, 16, 0.2);
}
html[data-theme="light"] .store-badge:hover {
  box-shadow: 0 14px 34px rgba(30, 26, 16, 0.22);
}

/* iPhone НЕ перекрашиваем: настоящий корпус — тёмный титан в любой теме.
   Только тень под ним мягче на светлом фоне. */
html[data-theme="light"] .iph-shadow {
  background: radial-gradient(50% 50% at 50% 50%, rgba(90, 70, 20, 0.32), rgba(216, 168, 50, 0.08) 62%, transparent 75%);
}
html[data-theme="light"] .hero-rays {
  opacity: 0.22;
}
html[data-theme="light"] .topbar.scrolled {
  background: rgba(250, 247, 240, 0.82);
  box-shadow: 0 18px 46px rgba(90, 70, 20, 0.12);
}
html[data-theme="light"] .nav a.active {
  background: rgba(30, 26, 16, 0.06);
}
html[data-theme="light"] .trust-chips li {
  background: rgba(30, 26, 16, 0.035);
}
html[data-theme="light"] .mcta {
  background: rgba(250, 247, 240, 0.92);
}
html[data-theme="light"] .mcta .mcta-dl {
  background: rgba(30, 26, 16, 0.04);
}
html[data-theme="light"] .dock {
  background: rgba(250, 247, 240, 0.85);
  box-shadow: 0 24px 60px rgba(90, 70, 20, 0.18);
}
html[data-theme="light"] .dock a {
  background: rgba(30, 26, 16, 0.04);
}
html[data-theme="light"] .dock a.dock-cta {
  background: var(--gold-grad);
}
html[data-theme="light"] .dock a.dock-cta svg {
  stroke: #fffdf7;
}
html[data-theme="light"] .dock .dock-label {
  background: rgba(250, 247, 240, 0.95);
}
html[data-theme="light"] .lanyard .badge {
  box-shadow: 0 18px 44px rgba(90, 70, 20, 0.25);
  border-color: rgba(168, 122, 22, 0.4);
}
html[data-theme="light"] .lanyard .clip {
  border-color: #b7ae99;
}
html[data-theme="light"] .ribbon-seg {
  color: rgba(30, 26, 16, 0.13);
}
html[data-theme="light"] .fcard::before,
html[data-theme="light"] .gcard::before {
  background: linear-gradient(105deg, transparent 42%, rgba(120, 90, 20, 0.05) 50%, transparent 58%);
}
html[data-theme="light"] .final::before {
  background: conic-gradient(
    from var(--ang, 0deg),
    transparent 0turn 0.68turn,
    rgba(168, 122, 22, 0.75) 0.82turn,
    transparent 0.94turn
  );
}

html[data-theme="light"] .proof div {
  background: var(--bg);
}
html[data-theme="light"] .step {
  background: linear-gradient(180deg, rgba(30, 26, 16, 0.025), transparent);
}
html[data-theme="light"] .final {
  background:
    radial-gradient(700px 320px at 50% -80px, rgba(216, 168, 50, 0.18), transparent 65%),
    var(--surface-2);
  border-color: rgba(168, 122, 22, 0.3);
}
html[data-theme="light"] .final img.icon {
  box-shadow: 0 14px 44px rgba(90, 70, 20, 0.25);
}

html[data-theme="light"] .field input,
html[data-theme="light"] .field textarea,
html[data-theme="light"] .field select {
  background: #ffffff;
  border-color: var(--line-strong);
  color: var(--text);
}
html[data-theme="light"] .toast.ok {
  background: rgba(168, 122, 22, 0.1);
  border-color: rgba(168, 122, 22, 0.4);
  color: #6d5310;
}
html[data-theme="light"] .toast.err,
html[data-theme="light"] .qerr {
  background: rgba(190, 40, 40, 0.08);
  border-color: rgba(190, 40, 40, 0.35);
  color: #a12626;
}
html[data-theme="light"] .russia-note,
html[data-theme="light"] .qguarantee {
  background: rgba(168, 122, 22, 0.08);
  border-color: rgba(168, 122, 22, 0.25);
}

/* Квиз-воронка */
html[data-theme="light"] .qplan-card {
  background:
    radial-gradient(420px 200px at 50% -60px, rgba(216, 168, 50, 0.16), transparent 65%),
    var(--surface-2);
  border-color: rgba(168, 122, 22, 0.35);
}
html[data-theme="light"] .qplan-opt.selected {
  box-shadow: 0 0 0 3px rgba(168, 122, 22, 0.18);
}

/* ── Кнопка-переключатель темы (вставляет theme.js) ── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  transition: border-color 0.18s, color 0.18s, transform 0.18s;
}
.theme-toggle:hover {
  border-color: var(--gold);
  color: var(--text);
  transform: translateY(-1px);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}