/* ============================================================
   Тёмная тема FlashFormat.
   Слой-оверрайд ПОВЕРХ скомпилированного Tailwind (style.css).
   Активируется классом html.dark (см. inline-скрипт в header.php).

   Почему так: style.css — это готовый Tailwind с ХАРДКОД-hex в каждом
   классе (.bg-white{background:#fff} и т.п.), пересобирать его из конфига
   мы не будем. Селектор `html.dark .bg-white` специфичнее одиночного
   `.bg-white`, поэтому перебивает цвет БЕЗ !important.

   Палитра вынесена в CSS-переменные — крутить оттенки в одном месте.
   Полупрозрачные тинты (bg-primary/10, ring-primary/10 и т.п.) НЕ трогаем:
   они накладываются на тёмную поверхность и адаптируются сами.
   ============================================================ */

html.dark {
  --d-bg:        #0b0c10; /* фон страницы (был #eeeeee) */
  --d-surface:   #16171d; /* карточки, секции, шапка (bg-white) */
  --d-surface-rgb: 22, 23, 29; /* = #16171d, для полупрозрачных bg-white/XX */
  --d-surface-2: #101116; /* альтернативные секции (bg-ink-100/40) */
  --d-surface-3: #1c1d25; /* сплошной bg-ink-100 */
  --d-footer:    #0e0f13; /* футер (bg-ink-700) */
  --d-border:    #262830; /* границы (border-ink-100 / -200) */
  --d-border-2:  #33363f; /* border-ink-300 */
  --d-fg:        #e6e7ea; /* основной текст (text-ink-700) */
  --d-fg-muted:  #9aa0a8; /* приглушённый (text-ink-500) */
  --d-fg-faint:  #767c85; /* очень приглушённый (text-ink-300) */

  color-scheme: dark; /* нативные скроллбары, поля ввода, календари — тёмные */
}

/* ─── Фон страницы + базовый текст ─── */
html.dark body { background-color: var(--d-bg); color: var(--d-fg); }

/* ─── Поверхности ─── */
html.dark .bg-white       { background-color: var(--d-surface); }
/* Полупрозрачный белый (полосы-секции, sticky-шапка, hero-чипы) — в тёмной теме
   становится полупрозрачным ТЁМНЫМ. Иначе полоса остаётся светлой и текст на ней тонет
   (это и была нечитаемость на главной: bg-white/85 у полос и bg-white/70 у чипов). */
html.dark .bg-white\/70   { background-color: rgba(var(--d-surface-rgb), 0.72); }
html.dark .bg-white\/80   { background-color: rgba(var(--d-surface-rgb), 0.82); }
html.dark .bg-white\/85   { background-color: rgba(var(--d-surface-rgb), 0.9); }
html.dark .bg-white\/90   { background-color: rgba(var(--d-surface-rgb), 0.92); }
/* Полупрозрачный ink-100 (альтернативные секции/полосы) — все доли в один тёмный
   альт-тон. /60 — это и был «серый» финальный CTA на главной. */
html.dark .bg-ink-100\/20 { background-color: var(--d-surface-2); }
html.dark .bg-ink-100\/30 { background-color: var(--d-surface-2); }
html.dark .bg-ink-100\/40 { background-color: var(--d-surface-2); }
html.dark .bg-ink-100\/60 { background-color: var(--d-surface-2); }
html.dark .bg-ink-100     { background-color: var(--d-surface-3); }
html.dark .bg-ink-700     { background-color: var(--d-footer); }
html.dark .bg-ink-800     { background-color: var(--d-footer); }
html.dark .bg-ink-900     { background-color: var(--d-bg); }

/* Логотип в белой «пилюле» (футер) — оставляем СВЕТЛУЮ подложку, иначе
   лого сливается с тёмным фоном. Точечно, только контейнеры с картинкой лого. */
html.dark .bg-white:has(img[src*="logo"]) { background-color: #fff; }

/* ─── Текст ─── */
html.dark .text-ink-700 { color: var(--d-fg); }
html.dark .text-ink-500 { color: var(--d-fg-muted); }
html.dark .text-ink-300 { color: var(--d-fg-faint); }

/* ─── Границы ─── */
html.dark .border-ink-100 { border-color: var(--d-border); }
html.dark .border-ink-200 { border-color: var(--d-border); }
html.dark .border-ink-300 { border-color: var(--d-border-2); }
html.dark .border-ink-700 { border-color: var(--d-border-2); }
html.dark .divide-ink-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--d-border); }

/* Поля ввода формы консультации (border-ink-100 + placeholder) */
html.dark input, html.dark textarea, html.dark select { color: var(--d-fg); }
html.dark ::placeholder { color: var(--d-fg-faint); }

/* Прозрачная тень «в коробке» на светлых карточках в тёмной теме не нужна —
   мягкая тёмная граница читается лучше. Общие card-тени приглушаем. */
html.dark .shadow-sm, html.dark .shadow-md { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }

/* ─── Компонентные классы (цвета «запечены» в класс через @apply, утилитные
   оверрайды их НЕ достают — переопределяем сами классы) ─── */

/* Карточки .card / .card-hover: белые + светлый градиент → тёмная поверхность.
   Это была причина «вырвиглазных белых блоков» (напр. карточки гарантий):
   фон оставался белым, а текст уже стал светлым. */
html.dark .card,
html.dark .card-hover {
  background-color: var(--d-surface);
  background-image: none;
  border-color: var(--d-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
html.dark .card-hover:hover {
  border-color: rgba(236, 27, 37, 0.5);
  background-color: rgba(236, 27, 37, 0.04);
  box-shadow:
    0 24px 48px -16px rgba(0, 0, 0, 0.5),
    0 12px 32px -16px rgba(236, 27, 37, 0.12);
}

/* Вторичная и ghost-кнопки: bg-white/80 и тёмный текст запечены — инвертируем. */
html.dark .btn-secondary {
  background-color: var(--d-surface-3);
  border-color: var(--d-border);
  color: var(--d-fg);
}
html.dark .btn-secondary:hover { border-color: var(--d-border-2); }
html.dark .btn-ghost { color: var(--d-fg); }
html.dark .btn-ghost:hover { background-color: var(--d-surface-3); }

/* Тёмная карточка CTA (cta.dark = .rounded-card.bg-ink-900) — чтобы не сливалась
   с тёмным фоном страницы, даём лёгкую границу и чуть приподнятый тон. */
html.dark .rounded-card.bg-ink-900 {
  background-color: #101218;
  border: 1px solid var(--d-border);
}

/* ─── Ховер/фокус-варианты — ОТДЕЛЬНЫЕ классы (.hover\:bg-ink-100:hover и т.п.),
   базовые оверрайды их НЕ достают. Без этого на ховере фон становился светлым,
   а текст уже был светлым → пункт меню «исчезал» под ховером. ─── */
html.dark .hover\:bg-ink-100:hover     { background-color: var(--d-surface-3); }
html.dark .hover\:bg-white:hover       { background-color: var(--d-surface); }
html.dark .focus\:bg-white:focus       { background-color: var(--d-surface); }
html.dark .hover\:text-ink-700:hover   { color: var(--d-fg); }
html.dark .hover\:border-ink-700:hover { border-color: var(--d-border-2); }
html.dark .hover\:border-ink-300:hover { border-color: var(--d-border-2); }

/* ─── Статьи экспертизы (.prose-article): цвета «запечены» hex-ом прямо в
   селекторы (color:#212529, background:#fff у карточек-шагов) — тут нет утилитных
   классов, базовые оверрайды text-ink и bg-white их НЕ достают. Переопределяем
   сами prose-селекторы. Это была нечитаемость тела статьи + белые карточки-шаги. ─── */

/* Текст статьи (база, абзацы, h2/h3, списки, strong, галочки-takeaways, callout) */
html.dark .prose-article,
html.dark .prose-article > p,
html.dark .prose-article section > p,
html.dark .prose-article > section > h2,
html.dark .prose-article h3,
html.dark .prose-article ul > li,
html.dark .prose-article ol > li,
html.dark .prose-article ol > li > h3,
html.dark .prose-article strong,
html.dark .prose-article > blockquote > ul > li,
html.dark .prose-article section blockquote > p {
  color: var(--d-fg);
}

/* Приглушённый текст: лид-em и описание под заголовком шага */
html.dark .prose-article section > p > em,
html.dark .prose-article ol > li > p {
  color: var(--d-fg-muted);
}

/* Карточки-шаги «дорожной карты» (ol > li c вложенным h3): белый фон → поверхность */
html.dark .prose-article ol > li:has(> h3) {
  background: var(--d-surface);
  border-color: var(--d-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Блок «О чём вы узнаете» (takeaways = корневой blockquote): светлый тинт → тёмная
   приподнятая поверхность, иначе rgba(33,37,41,.04) на тёмном фоне почти пропадает. */
html.dark .prose-article > blockquote {
  background: var(--d-surface-3);
}

/* ─── Популярный тариф: карточка несёт .card + border-primary/bg-primary/5/ring-primary.
   Базовый `html.dark .card` (нейтральные border/box-shadow/background) специфичнее
   одиночных модификаторов и убивал подсветку. Возвращаем красную рамку, кольцо и тинт
   более специфичным `.card.<модификатор>`. ─── */
html.dark .card.border-primary { border-color: #EC1B25; }
html.dark .card.bg-primary\/5  { background-color: rgba(236, 27, 37, 0.08); }
html.dark .card.ring-primary   { box-shadow: 0 0 0 1px #EC1B25, 0 8px 30px -12px rgba(236, 27, 37, 0.45); }

/* ─── Иконка тумблера: луна в светлой теме, солнце в тёмной ─── */
[data-theme-icon="dark"] { display: none; }
html.dark [data-theme-icon="light"] { display: none; }
html.dark [data-theme-icon="dark"] { display: inline-block; }

/* ─── Плавный переход при переключении (не при загрузке) ─── */
html.theme-anim body,
html.theme-anim .bg-white,
html.theme-anim .bg-ink-100,
html.theme-anim .card,
html.theme-anim .btn-secondary,
html.theme-anim .bg-ink-100\/40 {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}