/* ============================================================ DARK THEME — Podlevskikh Design System ------------------------------------------------------------ ПОЧЕМУ ЭТОТ ФАЙЛ СУЩЕСТВУЕТ: main.js всегда умел ставить , но после редизайна 2026-06-26 перестал линковаться main.css — единственное место, где жили правила [data-theme="dark"]. Атрибут менялся, тост показывался, картинка оставалась светлой. Здесь тёмная тема восстановлена в терминах дизайн-системы. КАК ЭТО РАБОТАЕТ: компоненты (profiam.css, screens/*.css) читают цвета ТОЛЬКО через токены — поэтому 95% темы = переопределение токенов ниже. Остаток — секция «точечные фиксы» для мест с захардкоженным светлым цветом. ПОРЯДОК ЗАГРУЗКИ: линковать ПОСЛЕ ds/colors.css (специфичность :root и [data-theme="dark"] одинакова — побеждает более поздний) и после screens/inline.css (чтобы точечные фиксы перебивали [data-s]). ============================================================ */ [data-theme="dark"] { /* нативные контролы, скроллбары, автозаполнение */ color-scheme: dark; /* --- Base ramp: перекрашиваем «бумагу» в тёмный навигационный синь --- */ --paper: #0B1523; /* фон страницы */ --white: #14202F; /* в компонентах используется ТОЛЬКО как background карточек */ --sand-100: #1A2838; /* inset / выделенные полосы */ --stone-200: #22334A; /* хайрлайны */ --stone-400: #7288A2; /* используется как color (faint) */ /* Тёмные поверхности бренда остаются тёмными, но уводим их ГЛУБЖЕ фона страницы, иначе футер и герой сливаются с телом документа. */ --ink-950: #060D18; --ink-900: #0E1B2C; /* --- Текст --- */ --slate-500: #97A9C0; --slate-600: #AFBFD3; --slate-700: #CBD8E8; --slate-800: #EDF2F9; /* --- Navy-ramp: в светлой теме это ЦВЕТ ТЕКСТА на светлых подложках (navy-700 — 16 применений как color против 3 как background). На тёмном фоне тёмно-синий текст нечитаем, поэтому ramp переворачиваем в светлую сторону. Немногочисленные места, где эти же токены служат ФОНОМ под белым текстом (аватары, активные табы, пузыри чата), возвращены к плотному синему в секции точечных фиксов — иначе белым по голубому. --- */ --navy-700: #A7C6EE; --navy-600: #8FB4E6; --navy-500: #6FA5E8; --navy-400: #9CC0EF; --navy-300: #BBD5F6; --navy-200: #3B5A80; /* используется как border-color */ --stone-300: #5D7A99; /* пустые звёзды рейтинга — на тёмном #2E4560 давал 1.9:1 */ /* Плотный синий для «фоновых» применений navy-ramp (белый текст — 6.8:1) */ --navy-solid: #2E5B9C; /* --- Мягкие «пастельные» подложки бейджей: из светлых в тёмные --- */ --navy-100: #24405F; --navy-50: #1B2E48; --gold-100: #4A3A19; --gold-50: #33280F; --success-50: #12301F; --danger-50: #351A17; /* Статусные цвета осветляем — на тёмном фоне тёмно-красный нечитаем */ --success-600: #6FCB98; --success-500: #55B683; --danger-600: #F09184; --danger-500: #E4715F; --gold-700: #E6C57E; --gold-600: #D6A347; /* ============================================================ SEMANTIC ALIASES ============================================================ */ --bg-page: var(--paper); --bg-inset: var(--sand-100); --surface-card: var(--white); --surface-raised: #182739; --surface-dark: #1D3350; --surface-hero: #16283F; --text-strong: #EDF2F9; --text-body: #CBD8E8; --text-muted: #97A9C0; --text-faint: #7288A2; --text-on-dark: #EDF2F9; --text-on-dark-muted: #AFC2DA; --text-on-gold: #0B1523; /* Бренд: как ЦВЕТ ТЕКСТА он должен давать ≥4.5:1 не только на фоне страницы, но и на подложке бейджей (--navy-50 = #1B2E48, там же живёт .pf-lang.active) — это требует светлого синего. Следствие: белый текст ПОВЕРХ brand-фона становится нечитаем, поэтому все brand-фоны получают тёмный текст в секции точечных фиксов (стандартный приём тёмных тем: светлый акцент + тёмный текст на нём). Измерено контраст-аудитом: 4.23 → 6.8 на фоне страницы. */ --brand: #7FB0EA; --brand-hover: #9AC3F1; --brand-active: #B4D3F6; --on-brand: #08111C; /* текст поверх brand-фона */ --accent: #D6A347; --accent-hover: #E6C57E; /* В светлой теме это тёмное золото для текста; на тёмном фоне — наоборот */ --text-gold: #E6C57E; --border-subtle: #22334A; --border-default: #2E4560; --border-strong: #4A6483; --border-ondark: rgba(220, 231, 246, 0.20); --focus-ring: #6FA5E8; --link: #86B4EE; --link-hover: #B0CFF6; --selection-bg: #3F3418; /* --- Тени: на тёмном фоне навигационная полупрозрачность не видна, уходим в чистый чёрный с большей альфой --- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.30); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.50), 0 4px 10px rgba(0, 0, 0, 0.32); --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.55), 0 8px 18px rgba(0, 0, 0, 0.35); --shadow-gold: 0 6px 20px rgba(193, 138, 43, 0.30); --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.35); --ring: 0 0 0 3px rgba(111, 165, 232, 0.40); /* --- Админка держит собственный набор --pf-* с фолбэками --- */ --pf-surface: #14202F; --pf-surface-2: #1A2838; --pf-surface-hover: #1F2F44; --pf-border: #2E4560; --pf-text: #EDF2F9; --pf-text-muted: #97A9C0; --pf-primary: #3E7ACB; --pf-primary-soft: #1B2E48; --pf-success-soft: #12301F; --pf-success-border: #2F7D54; } [data-theme="dark"] ::selection { background: var(--selection-bg); color: #EDF2F9; } /* ============================================================ ТОЧЕЧНЫЕ ФИКСЫ — места с захардкоженным светлым цветом. Каждое правило специфичнее исходного за счёт префикса-атрибута. ============================================================ */ /* Шапка (profiam.css: непрозрачный rgb(250,248,243)) */ [data-theme="dark"] .pf-header { background: rgb(11, 21, 35); } /* Мобильная нижняя навигация (rgba(255,255,255,.96)). Исходное правило — `body.is-authed .pf-bottomnav` (0,2,1), поэтому body.is-authed нужен и здесь, иначе панель остаётся белой поверх тёмной страницы. */ [data-theme="dark"] body.is-authed .pf-bottomnav { background: rgba(14, 27, 44, 0.96); } /* Скелетон-шиммер: белый блик поверх тёмной подложки — в засвет */ [data-theme="dark"] .pf-skel { background: linear-gradient(90deg, var(--sand-100) 0px, #253549 200px, var(--sand-100) 400px); } /* Границы алертов заданы светлыми хексами напрямую */ [data-theme="dark"] .pf-alert--danger { border-color: #5C2A24; } [data-theme="dark"] .pf-alert--success { border-color: #1F4A33; } /* Стрелка