/* Тёмная тема. Включается классом dark на <html> — его ставит js/theme.js до первой отрисовки.

   Классы в шаблонах не меняются: Tailwind v4 берёт каждый цвет из переменной --color-*,
   и тёмная тема переопределяет эти переменные. Серая шкала переворачивается (gray-50 — тёмный фон,
   gray-900 — светлый текст), белые поверхности получают цвет карточки, светлые оттенки цветных
   (50/100/200) становятся тёмными, а тёмный цветной текст (600–900) — светлым.

   Tailwind выводит только те переменные, что встречаются в коде, поэтому нужные оттенки
   прописаны здесь явно. Новый цвет (например, purple) в шаблонах — добавить его в оба списка ниже.
   Файл обычный, не через Tailwind: работает и с готовым app.css, и с браузерной сборкой */

/* ---------- палитра «Графит» ---------- */

html.dark {
	color-scheme: dark;
	/* Фон страницы и карточек (bg-white) */
	--page: #111113;
	--surface: #19191c;

	--color-gray-50: #141416;
	--color-gray-100: #222226;
	--color-gray-200: #2d2d32;
	--color-gray-300: #3f3f46;
	--color-gray-400: #71717a;
	--color-gray-500: #9f9fa9;
	--color-gray-600: #b4b4bc;
	--color-gray-700: #d0d0d6;
	--color-gray-800: #e2e2e6;
	--color-gray-900: #f2f2f4;
	--color-gray-950: #fafafa;
}

/* ---------- основа ---------- */

/* Перебивает и bg-gray-50 у body, и белый фон главной страницы из index.html */
html.dark body { background-color: var(--page); }

html.dark .bg-white { background-color: var(--surface); }
html.dark .bg-white\/85 { background-color: color-mix(in oklab, var(--surface) 85%, transparent); }
html.dark .bg-white\/70 { background-color: color-mix(in oklab, var(--surface) 70%, transparent); }
html.dark .text-black { color: var(--color-gray-950); }
/* Светлый текст на синем фоне (призыв на главной) остаётся светлым */
html.dark .text-blue-50 { color: #eff6ff; }

/* Затемнения под модальными окнами и тени остаются тёмными, а не превращаются в светлую вуаль */
html.dark .bg-gray-900\/40 { background-color: rgb(0 0 0 / 0.6); }
html.dark .bg-gray-900\/10 { background-color: rgb(0 0 0 / 0.3); }
html.dark [class*="shadow"] { --tw-shadow-color: rgb(0 0 0 / 0.5); }

/* Подсветка совпадений поиска (логи и документация) */
html.dark :is(mark.log-search-hit, .docs-content mark.docs-search-hit) { background-color: #854d0e; color: #fefce8; }

/* Дерево JSON в логах (стили из json-formatter.js) */
html.dark .json-item { border-left-color: var(--color-gray-300); }
html.dark .toggle-icon { color: var(--light-blue-400); }

/* Юридические страницы (static_page.html) */
html.dark .space-y-3 :is(h3, strong) { color: var(--color-gray-900); border-color: var(--color-gray-200); }
html.dark .space-y-3 a { color: var(--light-blue-400); }
html.dark .space-y-3 a:hover { color: var(--light-blue-300); }
html.dark .space-y-3 li::marker { color: var(--color-gray-400); }
html.dark .space-y-3 code { background-color: var(--color-gray-100); }
html.dark .space-y-3 pre { background-color: var(--color-gray-50); border: 1px solid var(--color-gray-200); }

/* ---------- переключатели темы ---------- */

/* Элементы только для одной темы (логотип: тёмный для светлой темы, logo-white.png для тёмной) */
html.dark .only-light,
html:not(.dark) .only-dark { display: none; }

/* Выбранная кнопка в группе из трёх (theme_picker.html): в тёмной теме — светлее дорожки, а не белая */
html.dark .aria-pressed\:bg-white[aria-pressed="true"] { background-color: var(--color-gray-300); }

/* Смена темы без анимаций (класс ставит theme.js на пару кадров) */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after { transition: none !important; }

/* ---------- цветные оттенки ---------- */

/* Светлые подложки (bg-blue-50, border-red-200 …) — тёмные: основной оттенок, подмешанный в цвет карточки */
html.dark {
	--tint-blue: #3b82f6; --light-blue-200: #bfdbfe; --light-blue-300: #93c5fd; --light-blue-400: #60a5fa;
	--color-blue-50: color-mix(in oklab, var(--tint-blue) 12%, var(--surface));
	--color-blue-100: color-mix(in oklab, var(--tint-blue) 20%, var(--surface));
	--color-blue-200: color-mix(in oklab, var(--tint-blue) 34%, var(--surface));
}
html.dark {
	--tint-red: #ef4444; --light-red-200: #fecaca; --light-red-300: #fca5a5; --light-red-400: #f87171;
	--color-red-50: color-mix(in oklab, var(--tint-red) 12%, var(--surface));
	--color-red-100: color-mix(in oklab, var(--tint-red) 20%, var(--surface));
	--color-red-200: color-mix(in oklab, var(--tint-red) 34%, var(--surface));
}
html.dark {
	--tint-green: #22c55e; --light-green-200: #bbf7d0; --light-green-300: #86efac; --light-green-400: #4ade80;
	--color-green-50: color-mix(in oklab, var(--tint-green) 12%, var(--surface));
	--color-green-100: color-mix(in oklab, var(--tint-green) 20%, var(--surface));
	--color-green-200: color-mix(in oklab, var(--tint-green) 34%, var(--surface));
}
html.dark {
	--tint-emerald: #10b981; --light-emerald-200: #a7f3d0; --light-emerald-300: #6ee7b7; --light-emerald-400: #34d399;
	--color-emerald-50: color-mix(in oklab, var(--tint-emerald) 12%, var(--surface));
	--color-emerald-100: color-mix(in oklab, var(--tint-emerald) 20%, var(--surface));
	--color-emerald-200: color-mix(in oklab, var(--tint-emerald) 34%, var(--surface));
}
html.dark {
	--tint-amber: #f59e0b; --light-amber-200: #fde68a; --light-amber-300: #fcd34d; --light-amber-400: #fbbf24;
	--color-amber-50: color-mix(in oklab, var(--tint-amber) 12%, var(--surface));
	--color-amber-100: color-mix(in oklab, var(--tint-amber) 20%, var(--surface));
	--color-amber-200: color-mix(in oklab, var(--tint-amber) 34%, var(--surface));
}
html.dark {
	--tint-yellow: #eab308; --light-yellow-200: #fef08a; --light-yellow-300: #fde047; --light-yellow-400: #facc15;
	--color-yellow-50: color-mix(in oklab, var(--tint-yellow) 12%, var(--surface));
	--color-yellow-100: color-mix(in oklab, var(--tint-yellow) 20%, var(--surface));
	--color-yellow-200: color-mix(in oklab, var(--tint-yellow) 34%, var(--surface));
}
html.dark {
	--tint-orange: #f97316; --light-orange-200: #fed7aa; --light-orange-300: #fdba74; --light-orange-400: #fb923c;
	--color-orange-50: color-mix(in oklab, var(--tint-orange) 12%, var(--surface));
	--color-orange-100: color-mix(in oklab, var(--tint-orange) 20%, var(--surface));
	--color-orange-200: color-mix(in oklab, var(--tint-orange) 34%, var(--surface));
}
html.dark {
	--tint-sky: #0ea5e9; --light-sky-200: #bae6fd; --light-sky-300: #7dd3fc; --light-sky-400: #38bdf8;
	--color-sky-50: color-mix(in oklab, var(--tint-sky) 12%, var(--surface));
	--color-sky-100: color-mix(in oklab, var(--tint-sky) 20%, var(--surface));
	--color-sky-200: color-mix(in oklab, var(--tint-sky) 34%, var(--surface));
}
html.dark {
	--tint-indigo: #6366f1; --light-indigo-200: #c7d2fe; --light-indigo-300: #a5b4fc; --light-indigo-400: #818cf8;
	--color-indigo-50: color-mix(in oklab, var(--tint-indigo) 12%, var(--surface));
	--color-indigo-100: color-mix(in oklab, var(--tint-indigo) 20%, var(--surface));
	--color-indigo-200: color-mix(in oklab, var(--tint-indigo) 34%, var(--surface));
}
html.dark {
	--tint-violet: #8b5cf6; --light-violet-200: #ddd6fe; --light-violet-300: #c4b5fd; --light-violet-400: #a78bfa;
	--color-violet-50: color-mix(in oklab, var(--tint-violet) 12%, var(--surface));
	--color-violet-100: color-mix(in oklab, var(--tint-violet) 20%, var(--surface));
	--color-violet-200: color-mix(in oklab, var(--tint-violet) 34%, var(--surface));
}

/* Тёмный цветной текст плохо читается на тёмном фоне: текст светлеет, фон кнопок (bg-blue-600 …) не меняется */
html.dark :is(.text-blue-600, .hover\:text-blue-600:hover, .group:hover .group-hover\:text-blue-600) { color: var(--light-blue-400); }
html.dark :is(.text-blue-700, .hover\:text-blue-700:hover, .group:hover .group-hover\:text-blue-700) { color: var(--light-blue-300); }
html.dark :is(.text-blue-800, .hover\:text-blue-800:hover, .group:hover .group-hover\:text-blue-800) { color: var(--light-blue-300); }
html.dark :is(.text-blue-900, .hover\:text-blue-900:hover, .group:hover .group-hover\:text-blue-900) { color: var(--light-blue-200); }
html.dark :is(.text-red-600, .hover\:text-red-600:hover, .group:hover .group-hover\:text-red-600) { color: var(--light-red-400); }
html.dark :is(.text-red-700, .hover\:text-red-700:hover, .group:hover .group-hover\:text-red-700) { color: var(--light-red-300); }
html.dark :is(.text-red-800, .hover\:text-red-800:hover, .group:hover .group-hover\:text-red-800) { color: var(--light-red-300); }
html.dark :is(.text-red-900, .hover\:text-red-900:hover, .group:hover .group-hover\:text-red-900) { color: var(--light-red-200); }
html.dark :is(.text-green-600, .hover\:text-green-600:hover, .group:hover .group-hover\:text-green-600) { color: var(--light-green-400); }
html.dark :is(.text-green-700, .hover\:text-green-700:hover, .group:hover .group-hover\:text-green-700) { color: var(--light-green-300); }
html.dark :is(.text-green-800, .hover\:text-green-800:hover, .group:hover .group-hover\:text-green-800) { color: var(--light-green-300); }
html.dark :is(.text-green-900, .hover\:text-green-900:hover, .group:hover .group-hover\:text-green-900) { color: var(--light-green-200); }
html.dark :is(.text-emerald-600, .hover\:text-emerald-600:hover, .group:hover .group-hover\:text-emerald-600) { color: var(--light-emerald-400); }
html.dark :is(.text-emerald-700, .hover\:text-emerald-700:hover, .group:hover .group-hover\:text-emerald-700) { color: var(--light-emerald-300); }
html.dark :is(.text-emerald-800, .hover\:text-emerald-800:hover, .group:hover .group-hover\:text-emerald-800) { color: var(--light-emerald-300); }
html.dark :is(.text-emerald-900, .hover\:text-emerald-900:hover, .group:hover .group-hover\:text-emerald-900) { color: var(--light-emerald-200); }
html.dark :is(.text-amber-600, .hover\:text-amber-600:hover, .group:hover .group-hover\:text-amber-600) { color: var(--light-amber-400); }
html.dark :is(.text-amber-700, .hover\:text-amber-700:hover, .group:hover .group-hover\:text-amber-700) { color: var(--light-amber-300); }
html.dark :is(.text-amber-800, .hover\:text-amber-800:hover, .group:hover .group-hover\:text-amber-800) { color: var(--light-amber-300); }
html.dark :is(.text-amber-900, .hover\:text-amber-900:hover, .group:hover .group-hover\:text-amber-900) { color: var(--light-amber-200); }
html.dark :is(.text-yellow-600, .hover\:text-yellow-600:hover, .group:hover .group-hover\:text-yellow-600) { color: var(--light-yellow-400); }
html.dark :is(.text-yellow-700, .hover\:text-yellow-700:hover, .group:hover .group-hover\:text-yellow-700) { color: var(--light-yellow-300); }
html.dark :is(.text-yellow-800, .hover\:text-yellow-800:hover, .group:hover .group-hover\:text-yellow-800) { color: var(--light-yellow-300); }
html.dark :is(.text-yellow-900, .hover\:text-yellow-900:hover, .group:hover .group-hover\:text-yellow-900) { color: var(--light-yellow-200); }
html.dark :is(.text-orange-600, .hover\:text-orange-600:hover, .group:hover .group-hover\:text-orange-600) { color: var(--light-orange-400); }
html.dark :is(.text-orange-700, .hover\:text-orange-700:hover, .group:hover .group-hover\:text-orange-700) { color: var(--light-orange-300); }
html.dark :is(.text-orange-800, .hover\:text-orange-800:hover, .group:hover .group-hover\:text-orange-800) { color: var(--light-orange-300); }
html.dark :is(.text-orange-900, .hover\:text-orange-900:hover, .group:hover .group-hover\:text-orange-900) { color: var(--light-orange-200); }
html.dark :is(.text-sky-600, .hover\:text-sky-600:hover, .group:hover .group-hover\:text-sky-600) { color: var(--light-sky-400); }
html.dark :is(.text-sky-700, .hover\:text-sky-700:hover, .group:hover .group-hover\:text-sky-700) { color: var(--light-sky-300); }
html.dark :is(.text-sky-800, .hover\:text-sky-800:hover, .group:hover .group-hover\:text-sky-800) { color: var(--light-sky-300); }
html.dark :is(.text-sky-900, .hover\:text-sky-900:hover, .group:hover .group-hover\:text-sky-900) { color: var(--light-sky-200); }
html.dark :is(.text-indigo-600, .hover\:text-indigo-600:hover, .group:hover .group-hover\:text-indigo-600) { color: var(--light-indigo-400); }
html.dark :is(.text-indigo-700, .hover\:text-indigo-700:hover, .group:hover .group-hover\:text-indigo-700) { color: var(--light-indigo-300); }
html.dark :is(.text-indigo-800, .hover\:text-indigo-800:hover, .group:hover .group-hover\:text-indigo-800) { color: var(--light-indigo-300); }
html.dark :is(.text-indigo-900, .hover\:text-indigo-900:hover, .group:hover .group-hover\:text-indigo-900) { color: var(--light-indigo-200); }
html.dark :is(.text-violet-600, .hover\:text-violet-600:hover, .group:hover .group-hover\:text-violet-600) { color: var(--light-violet-400); }
html.dark :is(.text-violet-700, .hover\:text-violet-700:hover, .group:hover .group-hover\:text-violet-700) { color: var(--light-violet-300); }
html.dark :is(.text-violet-800, .hover\:text-violet-800:hover, .group:hover .group-hover\:text-violet-800) { color: var(--light-violet-300); }
html.dark :is(.text-violet-900, .hover\:text-violet-900:hover, .group:hover .group-hover\:text-violet-900) { color: var(--light-violet-200); }