/* * Китовоз — веб-токены. Источник: design_handoff_kitovoz_site/README.md + * kitovoz-tokens.css + тёмная палитра, зашитая в оба .dc.html-прототипа * (объект D в themeVals() — идентичен в Home и Article, взят как есть). * * Имена переменных совпадают с теми, что буквально использованы в разметке * прототипов (var(--surface,#fff) и т.п.) — не переименовано, чтобы верстка * могла быть перенесена почти дословно, без риска рассинхрона имён. * * Переключение темы — data-theme на (см. assets/main.js): нет * атрибута → системная тема (prefers-color-scheme); light/dark — явный * выбор пользователя, сохранён в localStorage. */ :root { --page: #F7F4EE; --surface: #FFFFFF; --panel: #221E6E; --tint: #EDEBF7; --secondary: #EFEBE3; --zebra: #FBFAF7; --footer: #1A1840; --text: #1A1840; --text2: #4A4868; --muted: #6A6788; --accent: #221E6E; --accent-line: #221E6E; --link: #02268E; --line: #E2DDD2; --line2: #C9C3B5; --cta: #221E6E; --cta-h: #02268E; --on-cta: #FFFFFF; --btn-disabled-bg: #CFCCE0; --btn-disabled-fg: #8E8BA8; --focus-ring: 0 0 0 3px rgba(2, 38, 142, .28); --s-bg: #E5F2EA; --s-fg: #2F7F55; /* success */ --r-bg: #FBE5DD; --r-fg: #B0432A; /* risk */ --w-bg: #F7EDD3; --w-fg: #8A6410; /* warning */ --i-bg: #E4E9F6; /* info */ --font-display: "Unbounded", sans-serif; --font-text: "Golos Text", sans-serif; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --radius-s: 6px; --radius-m: 12px; --radius-l: 16px; --radius-pill: 999px; --container: 1160px; } /* Системная тёмная тема — только если пользователь НЕ выбрал явно светлую */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } :root:not([data-theme="light"]) { --page: #13112E; --surface: #1E1B45; --panel: #2A2663; --tint: #2A2660; --secondary: #191739; --zebra: #232050; --footer: #0C0A20; --s-bg: #1C3A34; --r-bg: #45253A; --w-bg: #3D3526; --i-bg: #232A5E; --cta: #6EC0EF; --cta-h: #9DD3F5; --on-cta: #13112E; --text: #F2F0FA; --text2: #C4C1DE; --muted: #A9A6C8; --accent: #C9C5FF; --link: #6EC0EF; --s-fg: #7FD1A3; --r-fg: #F4A58C; --w-fg: #E8C877; --line: #2E2A5E; --line2: #3E3A72; --accent-line: #A9A6C8; } } /* Явный выбор пользователя (кнопка-переключатель в шапке) — побеждает системную */ :root[data-theme="dark"] { color-scheme: dark; --page: #13112E; --surface: #1E1B45; --panel: #2A2663; --tint: #2A2660; --secondary: #191739; --zebra: #232050; --footer: #0C0A20; --s-bg: #1C3A34; --r-bg: #45253A; --w-bg: #3D3526; --i-bg: #232A5E; --cta: #6EC0EF; --cta-h: #9DD3F5; --on-cta: #13112E; --text: #F2F0FA; --text2: #C4C1DE; --muted: #A9A6C8; --accent: #C9C5FF; --link: #6EC0EF; --s-fg: #7FD1A3; --r-fg: #F4A58C; --w-fg: #E8C877; --line: #2E2A5E; --line2: #3E3A72; --accent-line: #A9A6C8; } :root[data-theme="light"] { color-scheme: light; } @media (max-width: 767px) { :root { --gutter: 16px; } }