/* ===========================================================================
   Тёмная тема, «Ночь». Включается переключателем в шапке: атрибут
   data-theme="dark" на <html>, выбор запоминается в браузере.

   Вся страница на чёрном: фотографии сукна и дерева так читаются лучше
   всего, а зелёный работает подсветкой. Карточки не белые, а чуть светлее
   фона, с волосяной границей, которая зеленеет при наведении.

   Правила уведены под атрибут, поэтому светлая тема остаётся темой по
   умолчанию и ничего про тёмную не знает.
   =========================================================================== */

:root[data-theme="dark"] {
  --ink: #f2f3f2; --ink-2: #b9bdb9; --muted: #8a8f8a;
  /* Зелёный текст на тёмной теме остаётся ярким: затемнённый #007A56 на
     #0d0f0e даёт 3,4:1, а сам --accent 8,4:1. */
  --accent-text: #00c88c;
  --line: rgba(255, 255, 255, .12); --bg-soft: #141715;
  /* --bg здесь не переопределялся, и это была мина: всё, что красилось им,
     на тёмной теме оставалось белым. Лист фильтров, плашки подборок и
     пункты блока про регион выходили белыми прямоугольниками со светлым
     текстом поверх, то есть пустыми. */
  --bg: #0d0f0e;
}

[data-theme="dark"] body {
  background: #0d0f0e; color: var(--ink);
}

[data-theme="dark"] .section {
  background: #0d0f0e;
}

[data-theme="dark"] .section--soft {
  background: #141715;
}

[data-theme="dark"] .section--dark {
  background: #0d0f0e;
}

[data-theme="dark"] .site-head {
  background: rgba(13, 15, 14, .92); border-bottom: 1px solid var(--line);
}

[data-theme="dark"] .site-head a,
[data-theme="dark"] .site-nav a {
  color: var(--ink);
}

[data-theme="dark"] .site-head__phone {
  color: #fff;
}

[data-theme="dark"] .megamenu {
  background: #141715; border-top-color: var(--line);
}

[data-theme="dark"] .megamenu__section:hover,
[data-theme="dark"] .megamenu__section.is-active {
  background: #1d211e; color: #fff;
}

[data-theme="dark"] .card,
[data-theme="dark"] .reason,
[data-theme="dark"] .step,
[data-theme="dark"] .pay__item,
[data-theme="dark"] .person,
[data-theme="dark"] .material,
[data-theme="dark"] .faq__item,
[data-theme="dark"] .cat,
[data-theme="dark"] .cattile,
[data-theme="dark"] .cathero {
  background: #171a18; border: 1px solid var(--line); box-shadow: none; color: var(--ink);
}

[data-theme="dark"] .card:hover {
  border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}

[data-theme="dark"] .reason--dark {
  background: #0a0c0b;
}

[data-theme="dark"] .card__media,
[data-theme="dark"] .card__noimg {
  background: #0d0f0e;
}

[data-theme="dark"] .card__title,
[data-theme="dark"] .card__price,
[data-theme="dark"] .reason__title,
[data-theme="dark"] .step__title,
[data-theme="dark"] .service__title,
[data-theme="dark"] .pay__title,
[data-theme="dark"] .h2,
[data-theme="dark"] .h1 {
  color: var(--ink);
}

[data-theme="dark"] .reason__text,
[data-theme="dark"] .step__text,
[data-theme="dark"] .service__desc,
[data-theme="dark"] .pay__text,
[data-theme="dark"] .card__note {
  color: var(--ink-2);
}

[data-theme="dark"] .reason__badge,
[data-theme="dark"] .step__badge,
[data-theme="dark"] .pay__badge,
[data-theme="dark"] .warranty__badge {
  background: rgba(0, 200, 140, .16); color: var(--accent);
}
/* У полосы этапов кружок рисует ::before, а сама плашка квадратная и должна
   остаться прозрачной. С заливкой на тёмной теме за каждым значком появлялся
   зелёный квадрат. */
[data-theme="dark"] .stagebar__badge { background: none; color: var(--ink); }

[data-theme="dark"] .stagebar {
  background: #171a18; box-shadow: none; border: 1px solid var(--line);
}

/* background-color, а не background: сокращённая запись сбрасывает и
   background-image, а на нём держится градиент кнопки «Подобрать стол».
   С ней кнопка на тёмной теме становилась пустой белой рамкой. */
/* Скругление тут не задаётся. Оно у кнопок своё: 20 у градиентной, 30 у
   «позвонить мне», 999 у остальных, и общее правило темы равняло их все под
   таблетку. Тема меняет цвет, а не форму. */
[data-theme="dark"] .btn {
  border: 1px solid var(--line); background-color: transparent; color: var(--ink);
}
/* У градиентной кнопки рамки нет совсем: overflow: hidden режет слой вспышки
   по внутреннему краю, и оставленный пиксель показывал бы зелёную кайму. */
[data-theme="dark"] .btn--shine { border: 0; }

[data-theme="dark"] .btn:hover {
  border-color: var(--accent); color: #fff;
}

[data-theme="dark"] .btn--primary,
[data-theme="dark"] .btn--consult,
[data-theme="dark"] .btn--buy,
[data-theme="dark"] .btn--call {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}

/* Кнопки со своей светлой заливкой держат тёмную подпись и на тёмной теме.
   Общее правило .btn выше красит подпись в --ink, а он на тёмной теме
   светлый: по жёлтому концу градиента «Подобрать стол» выходило 1,29:1,
   то есть ровно то, с чего начинался разбор, только в другой теме. */
[data-theme="dark"] .btn--shine,
[data-theme="dark"] .btn--shine span,
[data-theme="dark"] .btn--shine:hover,
[data-theme="dark"] .btn--primary:hover,
[data-theme="dark"] .btn--consult:hover,
[data-theme="dark"] .btn--buy:hover,
[data-theme="dark"] .btn--call:hover { color: var(--on-accent); }

[data-theme="dark"] .chip {
  background: transparent; border-color: var(--line); color: var(--ink);
}

[data-theme="dark"] .chip.is-active {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}

[data-theme="dark"] .field__input,
[data-theme="dark"] .leadcard__form .field__input,
[data-theme="dark"] .search__input {
  background: #0d0f0e; border: 1px solid var(--line); color: var(--ink);
}

[data-theme="dark"] .leadcard__form {
  background: #171a18; color: var(--ink);
}

[data-theme="dark"] .leadcard__formhead,
[data-theme="dark"] .leadcard__note {
  color: var(--ink);
}

[data-theme="dark"] .faq__q {
  color: var(--ink);
}

[data-theme="dark"] .faq__a {
  color: var(--ink-2);
}

[data-theme="dark"] .sizes th {
  background: #171a18; color: var(--ink-2);
}

[data-theme="dark"] .sizes td,
[data-theme="dark"] .sizes th {
  border-color: var(--line);
}

[data-theme="dark"] .material__chip {
  background: #0d0f0e; border-color: var(--line); color: var(--ink);
}


[data-theme="dark"] .marquee__item {
  background: #fff;
}

/* ===========================================================================
   Белые поверхности, которые тёмная тема раньше не накрывала. Фон у них
   задан жёстко в общих стилях, а цвет текста берётся из темы: на тёмной он
   светлый, и на белой плашке подпись пропадала. Плашки становятся тёмными,
   как остальные карточки, а значки и текст на них светлеют сами, потому что
   берут переменные темы.
   =========================================================================== */
[data-theme="dark"] .project,
[data-theme="dark"] .production__steps li,
[data-theme="dark"] .stagebar {
  background: #171a18; border-color: var(--line); box-shadow: none;
}
[data-theme="dark"] .project__title,
[data-theme="dark"] .production__steps li { color: var(--ink); }
[data-theme="dark"] .project__facts { color: var(--ink-2); }

/* Плашка с именем на фотографии остаётся белой: она лежит поверх снимка, а
   не на странице. Значит и текст на ней обязан остаться тёмным. */
[data-theme="dark"] .leadcard__badge { background: #fff; color: #151515; }
[data-theme="dark"] .leadcard__badge b { color: #151515; }
[data-theme="dark"] .leadcard__badge span { color: #5a5a5a; }

/* Список разделов слева в каталоге. Фон выбранного пункта берётся из --ink,
   а он на тёмной теме светлый: белая подпись на светлой плашке пропадала.
   Выбранный пункт становится зелёным с тёмным текстом, наведённый — просто
   чуть светлее подложки. Те же грабли у страниц пагинации и у выбранного
   варианта в карточке товара. */
[data-theme="dark"] .sections { background: #141715; }
[data-theme="dark"] .sections__item { color: var(--ink); }
[data-theme="dark"] .sections__item:hover { background: #1d211e; color: var(--ink); }
[data-theme="dark"] .sections__item.is-active { background: var(--accent); color: var(--on-accent); }
/* Без прозрачности: #06231a на #00c88c это 7,59:1, а с альфой 0,6
   остаётся 3,26:1, то есть ниже порога при кегле 12. */
[data-theme="dark"] .sections__item.is-active .sections__n { color: var(--on-accent); }
[data-theme="dark"] .pager__item.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
[data-theme="dark"] .opt input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Сердце на карточке: кружок остаётся белым, он лежит на фотографии. */
[data-theme="dark"] .card__fav { background: rgba(255, 255, 255, .96); color: #1e1e1e; border-color: rgba(0, 0, 0, .28); }

/* Плашка с выводом в блоке «зачем у производителя» на тёмном фоне страницы
   теряется: даём ей границу и чуть светлее тон. */
[data-theme="dark"] .factory__aside { background: #171a18; border: 1px solid var(--line); }

/* Лист фильтров на телефоне: он занимает весь экран, поэтому фон у него свой,
   а не прозрачный. */
[data-theme="dark"] .facets-box[open],
[data-theme="dark"] .facets-box[open] .facets-box__toggle,
[data-theme="dark"] .facets-box[open] .facets__actions {
  background: #0d0f0e;
}


/* Нижняя строка подвала на телефоне подклеена к карточке, значит и фон у неё
   тот же, что у карточки в тёмной теме. */
@media (max-width: 640px) {
}

/* Поля быстрого подбора в тёмной теме: подложка своя, иначе белое поле бьёт
   по глазам на чёрной секции. */
[data-theme="dark"] .pick .field__input {
  background-color: #0d0f0e; border-color: var(--line); color: var(--ink);
}

/* Номера шагов производства: тёмно-зелёный на чёрном тускнеет, берём
   основной акцент. Это тот же случай, что с пилюлями: цвет, подобранный под
   белый фон, на тёмном перестаёт читаться. */
[data-theme="dark"] .process__n { color: var(--accent); }