/* Общий тёмный слой сайта (10.08.2026, задание Di: «некоторые страницы не переключаются на тёмную тему»). Из 152 живых страниц свою тёмную тему имели 37 — остальные оставались белыми, и в приложении это выглядело как вспышка света при переходе из кабинета. Как это работает и почему безопасно: • селектор html[data-theme="dark"] сильнее светлого :root страницы, но равен правилам страниц со своей тёмной темой — а те идут позже в документе и потому побеждают; • подключается первым в через корневой middleware, до стилей страницы; • здесь только переменные. Страницы, где цвета вбиты числом (#fff в разметке), красятся не полностью — такие места правятся точечно в самих страницах. Имена переменных на сайте исторически двух видов: --ink-soft/--ink-faint (кабинет, сезонность) и --soft/--faint (математика, сигналы). Покрыты оба. */ html[data-theme="dark"] { /* полотно и карточки */ --bg: #0B0F16; --surface: #121826; --surface-2: #0E1420; --bg-2: #121826; --bg-3: #0E1420; --card: #121826; --panel: #121826; /* текст */ --ink: #EAF0F8; --ink-soft: #9AA7BC; --ink-faint: #5E6A80; --ink-dim: #9AA7BC; --soft: #9AA7BC; --faint: #5E6A80; --muted: #9AA7BC; /* линии */ --line: #202A3B; --line-strong: #2C3850; --line-soft: #1A2333; --border: #202A3B; /* акценты: на тёмном нужны светлее, иначе не читаются */ --green: #3DD598; --green-deep: #3DD598; --green-wash: rgba(19, 181, 117, .14); --red: #F0556B; --red-wash: rgba(240, 85, 107, .12); --amber: #E5B054; --amber-wash: rgba(229, 176, 84, .15); --acc: hsl(231 90% 72%); --acc-wash: hsl(231 90% 72% / .13); --blue: #6E8BFF; /* «глубокие» варианты цветов задумывались как более тёмные — на тёмном фоне они обязаны становиться светлее, иначе текст предупреждений и меток пропадает (найдено на /trade — красный #B91C1C, и на /school — фиолетовый #5B21B6) */ --red-deep: #F0556B; --amber-deep: #E5B054; --acc-deep: hsl(231 90% 78%); --edu: #A78BFA; --edu-deep: #C4B5FD; --edu-wash: rgba(167, 139, 250, .14); --edu-line: rgba(167, 139, 250, .30); --nav-bg: rgba(11, 15, 22, .82); --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 14px 34px -18px rgba(0, 0, 0, .55); color-scheme: dark; } /* Фон полотна: нулевая специфичность, чтобы собственное правило страницы всегда было сильнее — здесь только подстраховка от белого дефолта браузера. */ :where(html[data-theme="dark"]) body { background: var(--bg, #0B0F16); color: var(--ink, #EAF0F8); } /* Поля ввода в тёмной теме: браузер по умолчанию рисует их белыми */ :where(html[data-theme="dark"]) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), :where(html[data-theme="dark"]) textarea, :where(html[data-theme="dark"]) select { background: var(--surface-2, #0E1420); color: var(--ink, #EAF0F8); border-color: var(--line, #202A3B); } :where(html[data-theme="dark"]) ::placeholder { color: var(--ink-faint, #5E6A80); } /* Липкая шапка: на многих страницах её фон вбит светлым числом с прозрачностью. Специфичность (0,1,2) перебивает голый nav/header, но уступает правилам страниц со своей тёмной темой — они объявлены так же и идут позже. */ html[data-theme="dark"] nav, html[data-theme="dark"] header { background: rgba(11, 15, 22, .82); } /* Тёмная тема меняет смысл слова «яркий»: на светлом фоне зелёный тёмный, на тёмном — светлый. Текст поверх зелёной кнопки должен темнеть, иначе он исчезает. */ html[data-theme="dark"] .gbtn, html[data-theme="dark"] .btn-green, html[data-theme="dark"] button.primary { color: #0B0F16; }