/* Токены нового направления. Единственный источник цвета, шрифта и размера.
*
* Собрано из двух утверждённых эталонов: docs/design/landing_reference.html
* (тёмный космос) и docs/design/chat_reference.html (светлый по умолчанию,
* ночной кнопкой). Значения взяты оттуда буквально — если здесь и в эталоне
* расходится цифра, прав эталон, и это дефект здесь.
*
* Чем это НЕ эталон:
* 1. шрифты локальные. Эталоны тянут Google Fonts по ; на боевых
* страницах это запрещено с R-19 — внешний в блокирует
* разбор страницы, и шрифт приходит с чужого домена. Те же три
* начертания лежат в assets/fonts подмножествами;
* 2. кириллица и грузинский. Fraunces не содержит кириллицы вовсе, поэтому
* заголовки на ru/uk получают Literata, а на ka — Noto Serif Georgian;
* латиница остаётся Fraunces. Правило из E-F, проверено по cmap шрифтов;
* 3. темы разделены по НАЗНАЧЕНИЮ, а не по вкусу. Решение основателя
* 2026-10-15 было «сайт только тёмный», и 2026-10-16 он его изменил:
* светлая тема возвращается на сайт переключателем в шапке, тёмная
* остаётся по умолчанию. Чат и отчёт при этом НЕ ТРОГАЕМ: у чата своя
* светлая палитра по системе (.n2-chat ниже), у отчёта — лист бумаги.
* Поэтому светлых палитр здесь две, и это не дубль: сайт переключается
* атрибутом на , чат — системной темой, и смешивать их нельзя.
*
* Как цвет светлой темы сайта выбран: не на глаз. Медь эталона
* (#b8693a/#a85d34) на светлом фоне даёт 3.6:1 и 4.3:1 — а ею написаны метки
* и мелкие подписи, то есть текст, которому нужно 4.5:1 по WCAG AA. Поэтому
* медь здесь ТЕМНЕЕ эталонной, с посчитанным контрастом (цифры у каждой
* строки), и это осознанное расхождение с рисунком, а не вольность.
*/
/* ── шрифты ──────────────────────────────────────────────────────────────── */
/* font-display: swap — текст виден сразу системным, потом подменяется. */
@font-face {
font-family: 'Fraunces'; font-style: normal; font-weight: 300 400;
font-display: swap; src: url('../fonts/fraunces-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2070-209F, U+20A0-20BF, U+2212, U+2215;
}
@font-face {
font-family: 'Fraunces'; font-style: italic; font-weight: 300 400;
font-display: swap; src: url('../fonts/fraunces-latin.woff2') format('woff2');
/* У подмножества нет истинного курсива: браузер наклонит сам. Заголовок с
в эталоне один, и наклон там читается как акцент, а не как ошибка. */
unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
font-family: 'Literata'; font-style: normal; font-weight: 300 400;
font-display: swap; src: url('../fonts/literata-cyr.woff2') format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Noto Serif Georgian'; font-style: normal; font-weight: 400 600;
font-display: swap; src: url('../fonts/georgian.woff2') format('woff2');
unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F;
}
@font-face {
font-family: 'Inter'; font-style: normal; font-weight: 400 600;
font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20A0-20BF, U+2212;
}
@font-face {
font-family: 'Inter'; font-style: normal; font-weight: 400 600;
font-display: swap; src: url('../fonts/inter-cyr.woff2') format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400 500;
font-display: swap; src: url('../fonts/plex-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20BF;
}
/* ── тёмный космос: сайт ─────────────────────────────────────────────────── */
:root {
/* цвет — буквально из landing_reference.html */
--void: #07060b;
--night: #110f19;
--ink: #ece6dc;
--muted: #a59d93;
--cu-1: #f3c9a0;
--cu-2: #d98f5c;
--cu-3: #a85d34;
--violet: #6e5bb8;
--line: rgba(236,230,220,.12);
/* R-127a (04.11): ГРАНИЦА ОРГАНА УПРАВЛЕНИЯ — не то же, что разделитель.
`--line` рисует волосяные линии между блоками, и для них 1.3:1 законно:
разделитель — украшение. Но тем же токеном были обведены чипы выбора,
поля ввода и кнопки дверей, а это органы управления: WCAG 1.4.11 требует
для них 3:1, и у нас было 1.3:1 в ОБЕИХ темах. Текст на них при этом
читался (15:1), поэтому на глаз дефект выглядел как «блёкло», а на деле
человек не видел, что по этому можно нажать. Значения посчитаны, не
подобраны: 0.40 даёт 3.2-3.3:1 на тёмной, 0.52 — 3.3-3.4:1 на светлой.
Проверка — ops/design/test_system.py. */
--control-line: rgba(236,230,220,.40);
/* каналы тех же цветов — для прозрачностей, которые иначе пришлось бы
вписывать готовой rgba() в каждом месте */
--cu-1-rgb: 243 201 160;
--cu-2-rgb: 217 143 92;
--violet-rgb: 110 91 184;
--ink-rgb: 236 230 220;
--void-rgb: 7 6 11;
/* типографика */
--display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
--body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
/* размеры, которые повторяются больше одного раза */
--wrap: 1180px;
--radius: 18px;
--radius-sm: 6px;
--pill: 999px;
--gutter: 20px;
/* поверхности. Раньше эти четыре rgba() стояли готовыми числами в
components.css — и светлая тема означала бы второй экземпляр каждого
правила. Теперь тема меняет значение, а правило остаётся одно. */
--surf-1: rgba(28,24,38,.82); /* карточка, верх градиента */
--surf-2: rgba(14,12,20,.82); /* карточка, низ градиента */
--panel: rgba(17,15,25,.72); /* тариф, облачко навигатора */
--panel-soft: rgba(17,15,25,.6); /* выноска в тексте */
--field-bg: rgba(17,15,25,.8); /* поле ввода */
--on-cu: #1a0f08; /* текст на медной кнопке */
--paper-shadow: rgba(0,0,0,.5);
color-scheme: dark;
}
/* ── светлая тема сайта: по кнопке, не по системе ─────────────────────────
* Включается атрибутом html[data-theme="light"], который ставит
* assets/design/theme.js ДО первой отрисовки. Тёмная остаётся по умолчанию:
* ни один посетитель не получает светлую, пока сам не попросит.
*
* Контраст на --void (#f4efe6), посчитан, а не на глаз:
* --cu-1 #9e5530 → 4.83:1 --cu-2 #8a4724 → 6.10:1 --cu-3 #6e3a1e → 8.02:1
* --ink #211b16 → 14.9:1 --muted #6b6158 → 5.28:1
* Все пять проходят AA для мелкого текста (4.5:1), потому что медью здесь
* написаны именно метки и подписи. Белый #fff8f0 на медной кнопке:
* на светлом конце градиента 5.25:1, на тёмном 7.63:1.
*
* :not(.n2-chat) — не украшение. У чата свой светлый лист и свой атрибут
* data-theme на том же , а селектор html[data-theme] сильнее класса
* .n2-chat: без этой оговорки палитра сайта перебила бы палитру чата, как
* только чат переедет на эти токены. Решение основателя — «чат не трогаем».
*/
html[data-theme="light"]:not(.n2-chat) {
--void: #f4efe6;
--night: #ebe4d7;
--ink: #211b16;
--muted: #6b6158;
--cu-1: #9e5530;
--cu-2: #8a4724;
--cu-3: #6e3a1e;
--violet: #5a49a0;
--line: rgba(33,27,22,.16);
--control-line: rgba(33,27,22,.52);
--cu-1-rgb: 158 85 48;
--cu-2-rgb: 138 71 36;
--violet-rgb: 90 73 160;
--ink-rgb: 33 27 22;
--void-rgb: 244 239 230;
--surf-1: rgba(255,252,246,.88);
--surf-2: rgba(246,240,230,.88);
--panel: rgba(255,252,246,.78);
--panel-soft: rgba(255,252,246,.66);
--field-bg: rgba(255,252,246,.86);
--on-cu: #fff8f0;
--paper-shadow: rgba(60,40,20,.18);
color-scheme: light;
}
/* Кириллица и грузинский: заголовки другим шрифтом, текст тем же. */
html[data-lang="ru"], html[data-lang="uk"] { --display: 'Literata', Georgia, serif; }
html[data-lang="ka"] {
--display: 'Noto Serif Georgian', Georgia, serif;
--body: 'Noto Serif Georgian', system-ui, sans-serif;
}
/* ── лист бумаги: отчёт внутри тёмного сайта ────────────────────────────── */
:root {
--paper: #f6f1e8;
--paper-ink: #231d18;
--paper-mid: #6f655b;
--paper-rule: rgba(35,29,24,.12);
/* Медь НА БУМАГЕ. Эталонная #a85d34 даёт на листе 4.36 при нужных 4.5, а ею
подписаны номера разделов и подписи под цитатами — мелкий текст. Здесь
4.92 и 7.14, посчитано (ops/design/test_report.py). Светлый текст на
медной кнопке: 5.25. Лист бумажный в ЛЮБОЙ теме, поэтому у этих цветов
нет ночного варианта — его не бывает у бумаги. */
--paper-cu: #9e5530;
--paper-cu-2: #7c4022;
--paper-on-cu: #fff8f0;
/* Ошибка на бумаге: 7.6:1, читается и не кричит. Красный нужен именно
здесь — это единственное место на листе, где цвет несёт смысл, а не
оформление. */
--paper-err: #8a2b1e;
}
/* ── светлая палитра: чат ────────────────────────────────────────────────
* Чат — единственная страница с переключателем. Светлая по умолчанию,
* ночная по системе либо по кнопке. Значения из chat_reference.html.
* Класс .n2-chat на включает эту палитру, чтобы она не протекала
* на остальные страницы, где тема одна. */
.n2-chat {
--bg: #f4eee4;
--surface: #fbf8f2;
--ink: #231d18;
/* Медь и приглушённый серый ТЕМНЕЕ эталона chat_reference.html, и это та же
поправка, что на сайте: эталонные #776c61, #c97c49 и #a85d34 дают на
светлом фоне 4.44, 2.82 и 4.25 — а ими написаны подписи, метки реплик и
мелкий текст, которому нужно 4.5 по WCAG AA. Здесь 5.2, 4.8 и 6.1,
посчитано, а не на глаз (ops/design/test_system.py, проверки 23). */
--muted: #6b6158;
--line: rgba(35,29,24,.14);
--control-line: rgba(35,29,24,.52);
--cu-1: #9e5530;
--cu-2: #8a4724;
--cu-soft: rgba(138,71,36,.10);
--star: #9e5530;
/* Текст на медной кнопке: днём светлый на тёмной меди (5.25 и 6.63), ночью
тёмный на светлой (12.25 и 7.20) — одно имя, два значения. */
--on-cu: #fff8f0;
--user: #fbf8f2;
--user-ink: #231d18;
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
.n2-chat:not([data-theme="light"]) {
--bg: #08070c; --surface: rgba(22,19,30,.82); --ink: #ece6dc; --muted: #a59d93;
--line: rgba(236,230,220,.12); --control-line: rgba(236,230,220,.40);
--cu-1: #f3c9a0; --cu-2: #d98f5c;
--cu-soft: rgba(243,201,160,.10); --star: #f3c9a0; --on-cu: #1a0f08;
--user: #e9d3bd; --user-ink: #1a120c; color-scheme: dark;
}
}
.n2-chat[data-theme="dark"] {
--bg: #08070c; --surface: rgba(22,19,30,.82); --ink: #ece6dc; --muted: #a59d93;
--line: rgba(236,230,220,.12); --control-line: rgba(236,230,220,.40);
--cu-1: #f3c9a0; --cu-2: #d98f5c;
--cu-soft: rgba(243,201,160,.10); --star: #f3c9a0; --on-cu: #1a0f08;
--user: #e9d3bd; --user-ink: #1a120c; color-scheme: dark;
}