/*
 * Тёмная («ночная») тема витрины — палитра «Графит».
 * Спецификация: docs/superpowers/specs/2026-09-23-dark-theme-design.md
 *
 * Правила этого файла:
 * 1. Светлая тема не меняется. Всё тёмное — по :root[data-theme="dark"]:
 *    атрибут на <html> ставит встроенный скрипт выбора темы в <head>
 *    (App\Helpers\ThemeBoot) — по выбору читателя или по системе. Без
 *    JavaScript атрибута нет и сайт светлый (решение владельца, этап 2).
 *    Вне тёмных правил — только обёртки наборов логотипа (display:
 *    block / none), которые светлый рендер не меняют, и color-scheme
 *    светлой темы (:root[data-theme="light"]).
 * 2. Каждое переопределение — исходный селектор с префиксом
 *    ':root[data-theme="dark"] '. Специфичность строго выше исходной,
 *    поэтому порядок подключения CSS-файлов не важен (а он против нас:
 *    этот файл подключается РАНЬШЕ Base/Base.css и части блочных CSS).
 *    Исключение — правила на самом корне (":root"/"html"): префиксом их
 *    не выбрать, поэтому они пишутся как ':root[data-theme="dark"]'.
 *    Ловушка порядка: если исходный CSS меняет то же свойство модификатором
 *    или состоянием той же или чуть большей специфичности (".X[attr]",
 *    ".X.active", ".X:hover", "input:checked ~ .X"…), наше правило перебьёт
 *    и его — такое состояние явно переопределяется в тёмном блоке (примеры:
 *    [data-not-exist], .active, input:checked у трансляции).
 * 3. ВСЯ тёмная тема живёт в этом одном файле. Этап 2 (переключатель
 *    «Авто / Светлая / Тёмная») выполнен: обёртка @media (prefers-color-
 *    scheme: dark) заменена префиксом ':root[data-theme="dark"]'.
 */

/* Наборы логотипа (Header.php, Footer.php): светлый и тёмный. Обёртка —
   блочная, чтобы раскладка шапки/подвала не изменилась. */
.Header--logo-set,
.Footer--logo-set{
    display: block;
}
.Header--logo-set--dark,
.Footer--logo-set--dark{
    display: none;
}

/* Светлая тема: color-scheme корня ставит и сам скрипт (style), мета —
   тоже "only light"; правило — явная декларация на случай, если
   инлайновый стиль корня кто-то снимет. "only" запрещает авто-затемнение
   Chrome («Darken websites»): без него светлая тема на тёмной системе
   инвертировалась бы браузером. */
:root[data-theme="light"]{
    color-scheme: only light;
}

/* Палитра на самом корне: ':root[data-theme="dark"]' — специфичность
   0,2,0 против 0,1,0 у светлого :root в Base.css, который подключается
   ПОСЛЕ этого файла. */
:root[data-theme="dark"]{
    color-scheme: dark;
    /* Вариант A (решение владельца 23.09.2026): структура как в светлой —
       один фон страницы (промежутки и подвал) и блоки-подложки на нём.
       Фон = --site-color-gray, как в светлой (там обе #F3F3F3); блоки
       #1E1E1E темнее фона. Там, где var(--site-background-color) служит
       разделителем или подложкой внутри блока (полоса над меню ☰, рамки
       языка, поле поиска, заглушка под фото), выходит #2A2A2A на #1E1E1E —
       то же соотношение, что #F3F3F3 на белом в светлой. */
    --site-background-color: #2A2A2A;
    --site-background-color-content: #1E1E1E;
    --site-color: #E3E3E3;
    --site-color-name: #F5F5F5;
    --site-color-corporate: #5CC152;
    --site-color-corporate-hover: #7ED474;
    --site-color-hidden: #8C8C8C;
    --site-color-gray: #2A2A2A;
    --site-color-gray-hover: #333333;
}

/* Логотипы: прячем светлый набор, показываем тёмный.
   У тёмного набора оба класса — второе правило объявлено ниже и
   при равной специфичности побеждает. */
:root[data-theme="dark"] .Header--logo-set,
:root[data-theme="dark"] .Footer--logo-set{
    display: none;
}
:root[data-theme="dark"] .Header--logo-set--dark,
:root[data-theme="dark"] .Footer--logo-set--dark{
    display: block;
}

/* Иконки, нарисованные #1A1A1A: светлые копии *-dark.svg
   (генератор: docker/theme-shots/make-dark-svgs.py). */
:root[data-theme="dark"] .ArticleItem--views{
    background-image: url("../Block/ArticleItem/views-dark.svg");
}
:root[data-theme="dark"] .Article--views{
    background-image: url("../Page/Article/views-dark.svg");
}
:root[data-theme="dark"] .Article--countComment{
    background-image: url("../Page/Article/messages-dark.svg");
}
:root[data-theme="dark"] .Article--gotoComments{
    background-image: url("../Page/Article/messages-dark.svg"), url("../Page/Article/go_to_messages-dark.svg");
}
:root[data-theme="dark"] .Dashboard-Content-Card--countComments{
    background-image: url("../Block/Dashboard/messages-dark.svg");
}
:root[data-theme="dark"] .BbCode .bb-broadcast-reverse{
    background-image: url("../Block/BbCode/broadcast-reverse-dark.svg");
}
:root[data-theme="dark"] .BbCode .bb-spoiler-title{
    background-image: url("../Block/BbCode/spoiler-open-dark.svg");
}
:root[data-theme="dark"] .BbCode .bb-spoiler.open > .bb-spoiler-title,
:root[data-theme="dark"] .BbCode .bb-spoiler-close{
    background-image: url("../Block/BbCode/spoiler-close-dark.svg");
}
:root[data-theme="dark"] .Paginator--prev{
    background-image: url("../Block/Paginator/prev-dark.svg");
}
:root[data-theme="dark"] .Paginator--next{
    background-image: url("../Block/Paginator/next-dark.svg");
}
:root[data-theme="dark"] .PaginatorDate--today{
    background-image: url("../Block/PaginatorDate/today-dark.svg");
}
:root[data-theme="dark"] .PaginatorDate-Short--yesterday{
    background-image: url("../Block/PaginatorDate/Short/yesterday-dark.svg");
}
:root[data-theme="dark"] .PaginatorDate-Short--tomorrow{
    background-image: url("../Block/PaginatorDate/Short/tomorrow-dark.svg");
}
/* «Завтра» ещё не наступившего дня — серая заглушка, как в Short.css.
   Правило выше (0,3,0) сильнее его [data-not-exist] (0,2,0) и
   перебило бы заглушку — повторяем её явно. Стрелка — в цвет
   подписи (--site-color-hidden), как в светлой, где обе #BBBBBB. */
:root[data-theme="dark"] .PaginatorDate-Short--tomorrow[data-not-exist]{
    background-image: url("../Block/PaginatorDate/Short/tomorrow-not-exist-dark.svg");
}
:root[data-theme="dark"] .Header--menu-socials-item-link--rss{
    background-image: url("../Block/Header/img/social/rss-dark.svg");
}
:root[data-theme="dark"] .Header--menu-socials-item-link--facebook{
    background-image: url("../Block/Header/img/social/facebook-dark.svg");
}
:root[data-theme="dark"] .Header--menu-socials-item-link--youtube{
    background-image: url("../Block/Header/img/social/youtube-dark.svg");
}
:root[data-theme="dark"] .Header--menu-socials-item-link--instagram{
    background-image: url("../Block/Header/img/social/instagram-dark.svg");
}
:root[data-theme="dark"] .Header--menu-socials-item-link--twitter{
    background-image: url("../Block/Header/img/social/twitter2-dark.svg");
}
:root[data-theme="dark"] .Header--menu-socials-item-link--telegram{
    background-image: url("../Block/Header/img/social/telegram-dark.svg");
}
:root[data-theme="dark"] .Header--menu-socials-item-link--tiktok{
    background-image: url("../Block/Header/img/social/tiktok-dark.svg");
}

/* Цветные круги с ВЫРЕЗАННЫМ значком: сквозь вырез виден фон страницы
   (в светлой белый, в тёмной тёмный). Копии *-dark.svg — тот же круг
   с белой подложкой под ним, значок белый, как в светлой (решение
   владельца 24.09.2026). Генератор тот же, вид «белая подложка».
   У этих селекторов исходные :hover/:focus background-image не меняют. */
:root[data-theme="dark"] .Article--socials-item[data-social="telegram"]{
    background-image: url("../Page/Article/social/telegram-dark.svg");
}
:root[data-theme="dark"] .Article--socials-item[data-social="whatsapp"]{
    background-image: url("../Page/Article/social/whatsapp-dark.svg");
}
:root[data-theme="dark"] .Article--socials-item[data-social="twitter"]{
    background-image: url("../Page/Article/social/twitter-dark.svg");
}
:root[data-theme="dark"] .Article--socials-item[data-social="vkontakte"]{
    background-image: url("../Page/Article/social/vkontakte-dark.svg");
}
:root[data-theme="dark"] .Article--socials-item[data-social="facebook"]{
    background-image: url("../Page/Article/social/facebook-dark.svg");
}
/* WhatsApp/Telegram у мобильного номера — в меню ☰ и в подвале */
:root[data-theme="dark"] .Header--menu-contacts-contact-link--mobile,
:root[data-theme="dark"] .Footer--contacts-contact-link--mobile{
    background-image: url("../Block/Header/img/whatsapp-dark.svg"), url("../Block/Header/img/telegram-dark.svg");
}
@media (max-width: 739px){
    /* На телефоне Footer.css снимает фон со ссылки (background: none,
       0,2,0 — слабее нашего правила выше, 0,3,0) и рисует значки
       в ::after — повторяем оба его правила в тёмном виде. */
    :root[data-theme="dark"] .Footer--contacts-contact-link.Footer--contacts-contact-link--mobile{
        background-image: none;
    }
    :root[data-theme="dark"] .Footer--contacts-contact-link.Footer--contacts-contact-link--mobile::after{
        background-image: url("../Block/Header/img/whatsapp-dark.svg"), url("../Block/Header/img/telegram-dark.svg");
    }
}
/* Страница «Реклама»: WhatsApp/Telegram у телефонов менеджеров */
:root[data-theme="dark"] .Ad--contacts-peoples-people-phones-phone-whatsapp{
    background-image: url("../Page/Ad/contacts/whatsapp-dark.svg");
}
:root[data-theme="dark"] .Ad--contacts-peoples-people-phones-phone-telegram{
    background-image: url("../Page/Ad/contacts/telegram-dark.svg");
}

/* Текст поверх фото: затемнение и белый заголовок — постоянные.
   В исходных правилах они на переменных, которые в тёмной теме
   инвертируются (затемнение стало бы светлым, заголовок — тёмным). */
:root[data-theme="dark"] .Dashboard-Content-Card--image:before,
:root[data-theme="dark"] .Dashboard-Content-CardMedia--image:before,
:root[data-theme="dark"] .Dashboard-Content-CardExtend--image:before{
    background: linear-gradient(180deg, rgba(26, 26, 26, 0) 0%, #1A1A1A 100%);
}
@media (min-width: 740px){
    /* Счётчик комментариев поверх фото остаётся белым — как в
       Dashboard.css; иначе правило выше перебило бы его. */
    :root[data-theme="dark"] .Dashboard-Content-CardMedia .Dashboard-Content-Card--countComments{
        background-image: url("../Block/Dashboard/messages-white.svg");
    }
    /* :not(:hover):not(:focus) — чтобы не перебить зелёный hover из CardMedia.css */
    :root[data-theme="dark"] .Dashboard-Content-CardMedia--name:not(:hover):not(:focus){
        color: #FFFFFF;
    }
    :root[data-theme="dark"] .Dashboard-Content-CardMedia *:hover > .Dashboard-Content-Card--countComments{
        color: #FFFFFF;
    }
}
@media (min-width: 740px) and (max-width: 1239px){
    /* Исходное правило ThreeMedia.css (0,3,0) и так сильнее hover — зеркалим как есть */
    :root[data-theme="dark"] .Dashboard-Board----THREE_MEDIA > *:first-child .Dashboard-Content-Card--name{
        color: #FFFFFF;
    }
}

/* Подзаголовки статьи: в BbCode.css цвет задан числом #1A1A1A */
:root[data-theme="dark"] .BbCode h2,
:root[data-theme="dark"] .BbCode h3{
    color: var(--site-color);
}

/* Трансляция. Включённый переключатель (Broadcast.css,
   input:checked ~ …, 0,3,1) слабее нашего правила (0,4,0) — поэтому
   его зелёный повторён ниже явно, иначе он стал бы серым. */
:root[data-theme="dark"] .BbCode .bb-broadcast-reverse:hover{
    background-color: var(--site-color-gray-hover);
}
:root[data-theme="dark"] .BbCode .bb-broadcast-only_important-checkbox-circle-parent{
    background-color: #444444;
}
:root[data-theme="dark"] .BbCode input:checked ~ .bb-broadcast-only_important-checkbox-circle-parent{
    background-color: #8EB838;
}

/* Термин-подсказка в статье */
:root[data-theme="dark"] .Article--tip-word{
    background: var(--site-color-gray);
    box-shadow: inset 1px 0 #555555, inset 0 1px #555555, inset -1px 0 #555555, inset 0 -1px #555555;
}
/* Активный термин — прежняя зелёная подсветка: шорткат background
   выше (0,3,0) сильнее исходного .active в Article.css (0,2,0) и
   перебил бы его. */
:root[data-theme="dark"] .Article--tip-word.active{
    background-color: rgba(79, 174, 71, .2);
}
/* Всплывашка термина: фон совпадает с фоном статьи, а исходная тень
   (чёрная 10%) на тёмном не видна — рамка кольцом #555555, как у термина. */
:root[data-theme="dark"] .Article--tip-word-block{
    background-color: var(--site-background-color-content);
    box-shadow: 0 0 0 1px #555555, 0 5px 20px rgb(0 0 0 / 40%);
}

/* Подсветка фото на hover/focus — белая дымка, как в светлой (там она
   на var(--site-background-color-content) = #FFFFFF). Это поведение,
   а не цвет темы: с тёмным фоном контента фото темнело бы. Меняется
   только цвет; прозрачность по-прежнему задают исходные :hover/:focus. */
:root[data-theme="dark"] .Dashboard-Content-Card--image:after,
:root[data-theme="dark"] .Dashboard-Content-CardMedia--image:after,
:root[data-theme="dark"] .Dashboard-Content-CardExtend--image:after,
:root[data-theme="dark"] .CompanyArticles--article-image:before,
:root[data-theme="dark"] .ArticleItem--image:before,
:root[data-theme="dark"] .BbCode .bb-articles-article-image:before{
    background-color: #FFFFFF;
}

/* Подложка кнопок на :hover/:focus. В исходниках она на
   var(--site-color-hidden): в светлой #BBBBBB под тёмным текстом (9:1),
   в тёмной #8C8C8C под светлым — всего 2.6:1. Поэтому своя подложка:
   - текстовые кнопки — #555555 (5.81:1 с #E3E3E3);
   - стрелки дат (только иконка #4FAE47) — #444444 (3.47:1, для
     не-текста AA требует 3:1; на #555555 было бы 2.65:1);
   - «Все новости» (зелёный жирный 13px) — --site-color-gray-hover #333333
     (5.54:1; на #555555 было бы 3.27:1 — мало для текста такого кегля).
   Текущая страница пагинации исключена: у неё свой зелёный :focus
   (Paginator.css) — зелёной она и должна остаться. */
:root[data-theme="dark"] .Paginator--button:not(.Paginator--current):hover,
:root[data-theme="dark"] .Paginator--button:not(.Paginator--current):focus,
:root[data-theme="dark"] .BbCode .bb-spoiler-title:hover,
:root[data-theme="dark"] .BbCode .bb-spoiler-title:focus,
:root[data-theme="dark"] .BbCode .bb-spoiler-close:hover,
:root[data-theme="dark"] .BbCode .bb-spoiler-close:focus{
    background-color: #555555;
}
:root[data-theme="dark"] .PaginatorDate--navigator-prev:hover,
:root[data-theme="dark"] .PaginatorDate--navigator-prev:focus,
:root[data-theme="dark"] .PaginatorDate--navigator-next:hover,
:root[data-theme="dark"] .PaginatorDate--navigator-next:focus{
    background-color: #444444;
}
:root[data-theme="dark"] .Main--all_news-link:focus,
:root[data-theme="dark"] .Main--all_news-link:hover{
    background-color: var(--site-color-gray-hover);
}

/* Текст на зелёных кнопках и плашках — белый (решение владельца
   23.09.2026: «на зелёном фоне белый лучше смотрится»). В исходниках
   он var(--site-background-color-content), в тёмной это #1E1E1E. Фон
   прежний (#5CC152; у «Все новости» на hover/focus — #4FAE47, см. ниже).
   Белый на #5CC152 — 2.3:1, ниже AA: осознанный выбор владельца.
   Состояния перечислены явно: у [data-today] и :hover/:focus ячейки
   календаря, у :hover/:focus тегов статьи цвет задан именно в них.
   Hover/focus «Все новости» и текущей страницы пагинации цвет не
   меняют — их покрывает базовый селектор (он сильнее исходного). */
:root[data-theme="dark"] .Header--tag[data-id="8"] > .Header--tag-link,
:root[data-theme="dark"] .Paginator--current,
:root[data-theme="dark"] .PaginatorDate--calendar-cell-link[data-today],
:root[data-theme="dark"] .PaginatorDate--calendar-cell-link:hover,
:root[data-theme="dark"] .PaginatorDate--calendar-cell-link:focus,
:root[data-theme="dark"] .Article--tags-tag-link:hover,
:root[data-theme="dark"] .Article--tags-tag-link:focus,
:root[data-theme="dark"] .BbCode .bb-quiz .quiz-send > input{
    color: #FFFFFF;
}
/* «Все новости» на hover/focus затемняется, как в светлой (там
   --site-color-corporate-hover #338C36 темнее основного). Тёмная
   палитра этот оттенок осветляет (#7ED474, белый на нём 1.82:1),
   поэтому здесь фон — #4FAE47: белый 2.81:1, как на зелёном в
   светлой; граница с шапкой #1E1E1E — 5.94:1. Вес 0,6,0 выше
   исходного :hover/:focus (0,4,0). Переменная не меняется. */
:root[data-theme="dark"] .Header--tag[data-id="8"] > .Header--tag-link:hover,
:root[data-theme="dark"] .Header--tag[data-id="8"] > .Header--tag-link:focus{
    background-color: #4FAE47;
}