/* ============================================================================================
   Тёмная тема (решение владельца 22.10.2026). Включается сама по настройке устройства посетителя
   (prefers-color-scheme: dark), переключателя на сайте нет. Подключается ТОЛЬКО на сайте и последним из стилей
   темы (после ds-shell.css): в редакторе блоков остаётся светлая тема.

   Как это работает. Все цвета сайта идут от переменных --wp--preset--color--* и --wp--custom--color--* (их выводит
   WordPress из theme.json на :root), а псевдонимы style.css (--surface, --ink, --accent …) на :root ссылаются на них.
   Поэтому достаточно переопределить сами переменные палитры на :root: пересчитаются и псевдонимы, и разметка родителя.
   Селектор :root:root (специфичность 0,2,0) перебивает вывод ядра (0,1,0) при любом порядке подключения, без принудительных приоритетов.
   Значения — колонка «dark» tokens.json дизайн-системы; сверяются с tests/fixtures/ds-tokens.json тестом ds-theme-test.php.

   Что остаётся светлым: плашки логотипов производителей и логотип РОЛТЭК (раздел 3) и подписи размеров на картинках калькулятора (раздел 2).
   Калькулятор в остальном следует теме сайта.
   ============================================================================================ */

/* Нативные элементы (поля форм, прокрутка, выпадающие списки) выбирают оформление по теме устройства. */
:root { color-scheme: light dark; }

@media (prefers-color-scheme: dark) {
  /* ---------- 1. Палитра, тени и кольцо фокуса ---------- */
  :root:root {
    --wp--preset--color--paper: #121315;            /* surface */
    --wp--preset--color--white: #1c1e21;            /* surface-raised: карточки темнеют, как фон; текст на плашках — только через on-slab / on-ink / on-accent */
    --wp--preset--color--surface-sunken: #0c0d0e;
    --wp--preset--color--fill-tag: #26292d;
    --wp--preset--color--line: #2c2f33;
    --wp--preset--color--line-soft: #24272a;
    --wp--preset--color--line-strong: #3e4247;
    --wp--preset--color--rail: #3a3d42;
    --wp--preset--color--ink: #f1f0ed;
    --wp--preset--color--ink-body: #d4d5d8;
    --wp--preset--color--ink-soft: #c2c4c8;
    --wp--preset--color--ink-muted: #9fa3aa;
    --wp--preset--color--on-ink: #17191c;
    --wp--preset--color--pine: #2a2d31;             /* slab: тёмная плашка светлее страницы, чтобы читалась границей */
    --wp--preset--color--on-slab: #ffffff;           /* плашка остаётся тёмной: текст на ней белый и в тёмной теме, не инвертируется вместе с on-ink */
    --wp--preset--color--on-slab-muted: #b9bcc2;
    --wp--preset--color--lime: #f26b47;             /* accent */
    --wp--preset--color--on-accent: #17191c;
    --wp--preset--color--accent-on-slab: #f26b47;
    --wp--preset--color--disabled-fill: #3a3d42;
    --wp--preset--color--on-disabled: #9fa3aa;

    --wp--custom--color--hero-scrim: rgba(12, 13, 14, 0.94);
    --wp--custom--color--bar-glass: rgba(18, 19, 21, 0.96);
    /* Ошибки: в дизайн-системе тёмных значений нет, взяты парные тёмные (тёмный фон, светлые линия и текст, контраст текста выше 4,5:1). */
    --wp--custom--color--error-surface: #2e1614;
    --wp--custom--color--error-line: #f97066;
    --wp--custom--color--error-ink: #fda29b;

    --wp--custom--shadow--segment: 0 1px 3px rgba(0, 0, 0, 0.6);
    --wp--custom--shadow--focus-ring: 0 0 0 2px #121315, 0 0 0 4px #f1f0ed;
  }

  /* ---------- 2. Конфигуратор: следует теме сайта ----------
     Переменные плагина --ag-* в style.css (раздел 18) считаются от токенов ДС, поэтому фон, карточки, поля, кнопки-варианты,
     выбранные состояния, ползунки, флажки, тумблер звонка, панель цены, форма заявки и ошибки темнеют вместе с палитрой выше.
     Ниже (только вид classic: корень без data-layout="ds"; у вида ds свой файл стилей плагина) — то, что токенами не решается: светлые образцы поверх картинок и различимость цветовых плашек. */
  /* Выноски и подписи размеров лежат поверх фото-визуализации, а она светлая в обеих темах: пара «подложка + текст» остаётся светлой. */
  .avtogates-configurator:not([data-layout="ds"]) .avtogates-configurator__scene :is(.avtogates-configurator__dim-line, .avtogates-configurator__dim-label, .avtogates-configurator__dim-direction, .avtogates-configurator__scene-note-overlay) {
    --ag-surface: #ffffff;
    --ag-ink: #17191c;
  }
  /* Цветовые плашки RAL: тёмный образец (антрацит, чёрный) иначе сливается с тёмным фоном, поэтому у каждого образца тонкая светлая рамка. */
  .avtogates-configurator:not([data-layout="ds"]) .avtogates-configurator__swatch { border: 1px solid var(--ink-muted); }
  /* Выключенный тумблер звонка: ручка светлее дорожки, иначе обе почти одного тона. */
  .avtogates-configurator:not([data-layout="ds"]) .avtogates-configurator__toggle:not(.avtogates-configurator__toggle--on) .avtogates-configurator__toggle-knob { background: var(--ink-muted); }

  /* ---------- 3. Логотипы производителей: светлые плашки ----------
     Картинки логотипов с тёмными надписями на тёмном фоне не читаются, поэтому каждый логотип лежит на плашке цвета
     surface-raised светлой темы; текст названия (пока нет файла логотипа) и рамка при наведении — графит светлой темы.
     Локальные --ds-ink / --ink задают цвета только внутри плашки. Фото работ не затрагиваются. */
  .brand-logo-frame.brand-logo-frame {
    --ds-ink: #17191c;
    --ink: #17191c;
    --pine: #17191c;
    --line: #e2e0db;
    background: #ffffff;
    border-color: #e2e0db;
    padding: 0 var(--sp-8);
  }

  /* Логотип РОЛТЭК (карточка «Официальный дилер» и остальные места) — картинка с тёмными надписями на прозрачном фоне, на тёмной карточке почти не видна.
     Кладём её на такую же светлую плашку, как у производителей. Плашка по размеру картинки (fit-content + justify-self), а не на всю колонку:
     в .why-dealer колонка minmax(0, 84px), поэтому рамка и отступ входят в ширину (border-box), а картинка сжимается внутри (max-width: 100%). */
  .roltek-logo.roltek-logo {
    background: #ffffff;
    border: 1px solid #e2e0db;
    border-radius: var(--radius-md);
    box-sizing: border-box;
    justify-self: start;
    max-width: 100%;
    padding: var(--sp-8);
    width: fit-content;
  }
  .roltek-logo.roltek-logo img { max-width: 100%; }
}