/* ═══════════════════════════════════════════════════════
   Neironex — альтернативные темы.

   Подключается после main.css и **ничего не делает**, пока на <html>
   не стоит data-theme. Базовая тёмная тема остаётся по умолчанию,
   файл безопасно лежит в проде.

   Темы:
     light  — белая, стерильная (первый заход, оставлена для сравнения)
     sand   — тёплая бумажная: кремовый фон, мягкие тени
     slate  — холодная графитовая: сине-серый фон, «чертёжная»
     navy   — тёмная, но не чёрная: глубокий индиго вместо угля

   Смотреть: ?theme=sand, ?theme=slate, ?theme=navy, ?theme=dark (сброс).

   Структура файла:
     1) блоки токенов по теме;
     2) заплатки для светлого семейства (light/sand/slate) — там, где
        цвет захардкожен мимо токенов;
     3) отдельные заплатки для navy, потому что она тёмная.
   ═══════════════════════════════════════════════════════ */

/* ═══ 1. ТОКЕНЫ ════════════════════════════════════════ */

/* ─── light: белая ──────────────────────────────────── */
:root[data-theme="light"] {
  --bg: #FFFFFF;
  --bg-1: #F5F6FA;
  --bg-card: #FFFFFF;
  --bg-card2: #F7F8FC;
  --subtle: #EDEFF6;
  --border: rgba(16,18,40,0.10);
  --border-2: rgba(16,18,40,0.20);
  --text: #12142A;
  --muted: #5A6076;
  --accent: #4A5BE0;
  --accent2: #3F4FD4;
  --cyan: #0E9BC4;
  --purple: #7C3AED;
  --green: #0F8A3C;
  --grad: linear-gradient(90deg, #0E9BC4 0%, #4A5BE0 50%, #7C3AED 100%);
  --grad-135: linear-gradient(135deg, #0E9BC4 0%, #4A5BE0 50%, #7C3AED 100%);
}

/* ─── sand: тёплая бумажная ─────────────────────────── */
/* Фон уходит в кремовый, карточки чуть светлее фона — страница
   читается как бумага, а не как интерфейс. Акценты оставлены
   фирменными: тёплый фон и холодный синий дают контраст, а смена
   акцента на терракоту увела бы бренд. */
:root[data-theme="sand"] {
  --bg: #F1E9DA;
  --bg-1: #E8DECB;
  --bg-card: #FBF6EC;
  --bg-card2: #F2EBDC;
  --subtle: #DFD3BC;
  --border: rgba(62,50,34,0.14);
  --border-2: rgba(62,50,34,0.24);
  --text: #241E16;
  --muted: #6A5F50;
  --accent: #4A5BE0;
  --accent2: #3D4CCE;
  --cyan: #0E8FB5;
  --purple: #7C3AED;
  --green: #14713A;
  --grad: linear-gradient(90deg, #0E8FB5 0%, #4A5BE0 50%, #7C3AED 100%);
  --grad-135: linear-gradient(135deg, #0E8FB5 0%, #4A5BE0 50%, #7C3AED 100%);
}

/* ─── slate: холодная графитовая ────────────────────── */
/* Не белый лист, а сине-серое полотно; карточки светлее фона и
   поэтому «всплывают» без тяжёлых теней. */
:root[data-theme="slate"] {
  --bg: #E2E7F0;
  --bg-1: #D6DDEA;
  --bg-card: #F4F7FC;
  --bg-card2: #E9EEF6;
  --subtle: #CBD4E4;
  --border: rgba(20,30,55,0.13);
  --border-2: rgba(20,30,55,0.24);
  --text: #111A2E;
  --muted: #4E596F;
  --accent: #3A4FD8;
  --accent2: #3143C8;
  --cyan: #0B87AC;
  --purple: #6D2FE0;
  --green: #0E7A36;
  --grad: linear-gradient(90deg, #0B87AC 0%, #3A4FD8 50%, #6D2FE0 100%);
  --grad-135: linear-gradient(135deg, #0B87AC 0%, #3A4FD8 50%, #6D2FE0 100%);
}

/* ─── navy: тёмная, но не чёрная ────────────────────── */
/* Базовая тема угольно-чёрная и потому нейтральная до безликости.
   Индиго держит тот же контраст, но у страницы появляется цвет.
   Акценты оставлены исходными — на тёмном они и рассчитаны. */
:root[data-theme="navy"] {
  --bg: #0A0F2B;
  --bg-1: #0E1436;
  --bg-card: #141B45;
  --bg-card2: #1A2252;
  --subtle: #1A2252;
  --border: rgba(255,255,255,0.10);
  --border-2: rgba(255,255,255,0.18);
  --text: #FFFFFF;
  --muted: #98A2CC;
  --accent: #5B6EF5;
  --accent2: #8FA0FF;
  --cyan: #00D4FF;
  --purple: #8B5CF6;
  --green: #22C55E;
}

/* ═══ 2. ЗАПЛАТКИ ДЛЯ СВЕТЛОГО СЕМЕЙСТВА ═══════════════
   Пять мест задают цвет мимо токенов и без этого остались бы
   тёмными. Самое коварное — выделенный тариф: в main.css у него
   фон захардкожен градиентом #0F1120 → #111326, карточка остаётся
   чёрной с нечитаемым тёмным текстом. */

:root[data-theme="light"] .nav,
:root[data-theme="sand"] .nav,
:root[data-theme="slate"] .nav {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom-color: var(--border);
}

:root[data-theme="light"] .nav-links,
:root[data-theme="sand"] .nav-links,
:root[data-theme="slate"] .nav-links {
  background: color-mix(in srgb, var(--bg) 97%, transparent);
}

/* Финальный CTA-блок: инлайн-градиент #0C0E1C → #10122A. */
:root[data-theme="light"] #cta,
:root[data-theme="sand"] #cta,
:root[data-theme="slate"] #cta {
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 7%, var(--bg)) 0%,
      color-mix(in srgb, var(--accent) 13%, var(--bg)) 100%) !important;
  border-top-color: var(--border);
}

/* Тёмные секции на contacts/privacy. */
:root[data-theme="light"] [style*="#0F1018"],
:root[data-theme="light"] [style*="#13151F"],
:root[data-theme="light"] [style*="#1C1F2E"],
:root[data-theme="sand"] [style*="#0F1018"],
:root[data-theme="sand"] [style*="#13151F"],
:root[data-theme="sand"] [style*="#1C1F2E"],
:root[data-theme="slate"] [style*="#0F1018"],
:root[data-theme="slate"] [style*="#13151F"],
:root[data-theme="slate"] [style*="#1C1F2E"] {
  background: var(--bg-1) !important;
  border-color: var(--border) !important;
}

/* Баннер cookie: инлайн rgba(13,15,26,0.97). */
:root[data-theme="light"] #cookie-banner,
:root[data-theme="sand"] #cookie-banner,
:root[data-theme="slate"] #cookie-banner {
  background: color-mix(in srgb, var(--bg) 97%, transparent) !important;
  border-top-color: var(--border) !important;
  box-shadow: 0 -8px 32px rgba(16,18,40,0.10);
}
:root[data-theme="light"] #cookie-banner p,
:root[data-theme="sand"] #cookie-banner p,
:root[data-theme="slate"] #cookie-banner p { color: var(--muted) !important; }
:root[data-theme="light"] #cookie-banner [data-consent-decline],
:root[data-theme="sand"] #cookie-banner [data-consent-decline],
:root[data-theme="slate"] #cookie-banner [data-consent-decline] {
  color: var(--muted) !important;
  border-color: var(--border-2) !important;
}

/* Выделенный тариф — тот самый захардкоженный тёмный градиент. */
:root[data-theme="light"] .pricing-card.featured,
:root[data-theme="sand"] .pricing-card.featured,
:root[data-theme="slate"] .pricing-card.featured {
  background: linear-gradient(160deg,
      color-mix(in srgb, var(--accent) 6%, var(--bg-card)) 0%,
      color-mix(in srgb, var(--accent) 12%, var(--bg-card)) 100%);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 2px 4px rgba(20,25,60,0.06), 0 14px 36px rgba(20,25,60,0.10);
}

/* Карточки на светлом фоне нуждаются в тени, иначе граница между
   секцией и карточкой пропадает. */
:root[data-theme="light"] .prod-card,
:root[data-theme="light"] .pricing-card,
:root[data-theme="light"] .how-step,
:root[data-theme="light"] .faq-item,
:root[data-theme="light"] .work-card,
:root[data-theme="light"] .demo-card,
:root[data-theme="light"] .contact-form-box,
:root[data-theme="sand"] .prod-card,
:root[data-theme="sand"] .pricing-card,
:root[data-theme="sand"] .how-step,
:root[data-theme="sand"] .faq-item,
:root[data-theme="sand"] .work-card,
:root[data-theme="sand"] .demo-card,
:root[data-theme="sand"] .contact-form-box,
:root[data-theme="slate"] .prod-card,
:root[data-theme="slate"] .pricing-card,
:root[data-theme="slate"] .how-step,
:root[data-theme="slate"] .faq-item,
:root[data-theme="slate"] .work-card,
:root[data-theme="slate"] .demo-card,
:root[data-theme="slate"] .contact-form-box {
  box-shadow: 0 1px 2px rgba(30,25,15,0.04), 0 10px 28px rgba(30,25,15,0.07);
}

/* Свечения рассчитаны на чёрный фон — на светлом дают грязные пятна. */
:root[data-theme="light"] .glow,
:root[data-theme="light"] .hero-glow,
:root[data-theme="light"] .page-hero-glow,
:root[data-theme="light"] .hero-visual-glow,
:root[data-theme="sand"] .glow,
:root[data-theme="sand"] .hero-glow,
:root[data-theme="sand"] .page-hero-glow,
:root[data-theme="sand"] .hero-visual-glow,
:root[data-theme="slate"] .glow,
:root[data-theme="slate"] .hero-glow,
:root[data-theme="slate"] .page-hero-glow,
:root[data-theme="slate"] .hero-visual-glow {
  opacity: 0.4;
}

/* Логотип-картинка отрисована под тёмный фон: на светлом её тень
   должна быть цветной, иначе читается как чёрная плашка. */
:root[data-theme="light"] .hero-logo-3d,
:root[data-theme="sand"] .hero-logo-3d,
:root[data-theme="slate"] .hero-logo-3d {
  filter: drop-shadow(0 22px 50px color-mix(in srgb, var(--accent) 28%, transparent));
}

/* Поля формы. */
:root[data-theme="light"] input, :root[data-theme="light"] textarea, :root[data-theme="light"] select,
:root[data-theme="sand"] input, :root[data-theme="sand"] textarea, :root[data-theme="sand"] select,
:root[data-theme="slate"] input, :root[data-theme="slate"] textarea, :root[data-theme="slate"] select {
  background: var(--bg-card);
  border-color: var(--border-2);
  color: var(--text);
}

/* Полупрозрачные подложки считались от тёмного фона. */
:root[data-theme="light"] .badge, :root[data-theme="light"] .chip,
:root[data-theme="sand"] .badge, :root[data-theme="sand"] .chip,
:root[data-theme="slate"] .badge, :root[data-theme="slate"] .chip {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
}

/* Подвал — нижняя поверхность, отделяем от полотна. */
:root[data-theme="light"] .footer,
:root[data-theme="sand"] .footer,
:root[data-theme="slate"] .footer {
  background: var(--bg-1);
  border-top-color: var(--border);
}

/* Тёмная кнопка в шапке: главное действие не должно спорить
   с градиентными кнопками ниже. */
:root[data-theme="light"] .nav-btn,
:root[data-theme="sand"] .nav-btn,
:root[data-theme="slate"] .nav-btn {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

/* Призрачной кнопке на светлом нужна видимая граница. */
:root[data-theme="light"] .btn-ghost, :root[data-theme="light"] .pricing-btn-ghost,
:root[data-theme="sand"] .btn-ghost, :root[data-theme="sand"] .pricing-btn-ghost,
:root[data-theme="slate"] .btn-ghost, :root[data-theme="slate"] .pricing-btn-ghost {
  border-color: var(--border-2);
  color: var(--text);
}
:root[data-theme="light"] .btn-ghost:hover, :root[data-theme="light"] .pricing-btn-ghost:hover,
:root[data-theme="sand"] .btn-ghost:hover, :root[data-theme="sand"] .pricing-btn-ghost:hover,
:root[data-theme="slate"] .btn-ghost:hover, :root[data-theme="slate"] .pricing-btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

:root[data-theme="light"] .pricing-feature.off,
:root[data-theme="sand"] .pricing-feature.off,
:root[data-theme="slate"] .pricing-feature.off {
  color: color-mix(in srgb, var(--muted) 55%, var(--bg));
}

:root[data-theme="light"] .stats,
:root[data-theme="sand"] .stats,
:root[data-theme="slate"] .stats {
  background: var(--bg-1);
  border-color: var(--border);
}

/* ═══ 3. ЗАПЛАТКИ ДЛЯ NAVY ═════════════════════════════
   Тема тёмная, поэтому правок меньше: нужно лишь увести
   захардкоженные угольные пятна в индиго, иначе они выглядят
   грязными провалами на синем. */

:root[data-theme="navy"] .nav {
  background: rgba(10,15,43,0.82);
  border-bottom-color: var(--border);
}
:root[data-theme="navy"] .nav-links { background: rgba(10,15,43,0.97); }

:root[data-theme="navy"] #cta {
  background: linear-gradient(135deg, #111842 0%, #17205A 100%) !important;
  border-top-color: var(--border);
}

:root[data-theme="navy"] [style*="#0F1018"],
:root[data-theme="navy"] [style*="#13151F"],
:root[data-theme="navy"] [style*="#1C1F2E"] {
  background: var(--bg-1) !important;
  border-color: var(--border) !important;
}

:root[data-theme="navy"] #cookie-banner {
  background: rgba(14,20,54,0.97) !important;
  border-top-color: var(--border) !important;
}

:root[data-theme="navy"] .pricing-card.featured {
  background: linear-gradient(160deg, #141B45 0%, #1B2456 100%);
  border-color: rgba(91,110,245,0.5);
}

:root[data-theme="navy"] .stats { background: var(--bg-1); }
:root[data-theme="navy"] .footer { background: var(--bg-1); }