/* tokens.css — единственный источник значений визуальной системы.
TZ-design-system.md, разделы 1–3 (спека 07.08.2026). Подключается ПЕРВЫМ
во всех шаблонах, до собственного CSS страницы (см. _head.html).
Пакет B1: раньше эти значения жили в девяти разных :root по CSS-файлам
(плюс сайдбар-блок в index.css и инлайн-палитра в page.html — итого 11
очагов), и они успевали разъехаться. Теперь — здесь, один раз.
СТАРЫЕ ИМЕНА (--bg, --card, --acc, --line...) остаются как алиасы на
новые токены: в коде 205 использований старых имён (css + app.js), и
массовое переименование — верный способ что-то молча погасить. Значение
живёt в одном месте (новый токен), разметка не переписывается. Таблица
соответствий — в отчёте задачи B1. */
:root{
/* ── раздел 1: поверхности, текст, акцент, зоны, состояние ─────────── */
/* холст → панель → поднятая */
--s0:#0a0c10; --s1:#171c24; --s2:#232a35;
--pl:#333c4a; --pl-soft:#1e2530;
--ink:#eef1f6; --mut:#9ba6b5; --faint:#7b8593;
/* единственное место, где живёт оранжевый — заливка кнопки действия */
--act:#e0623b; --on-act:#131820;
/* данные — спектр зон Z1–Z5 */
--z1:#8ba1b7; --z2:#4f9be0; --z3:#9dc23e; --z4:#e0902e; --z5:#e2545c;
/* --over уведён в красный 10.08: было #de6a52, тон 10° — всего 4° от --act
(#e0623b, 14°). Пока оранжевый значил три вещи (бренд + действие +
«вне коридора»), это терялось в шуме; после решения «оранжевый = только
интерактивное» неотличимый от него --over заставлял бы читать цифру вне
коридора как ссылку. #e35873 — тон 348°, разрыв с --act 334°.
Контраст на панели 4.81 (было 5.12) — в пределах правила: --over и так
только от 18 px, полужирным от 14 px или заливкой. */
--ok:#3fbe83; --warn:#e0a63b; --over:#e35873;
/* Мягкие заливки и кромки состояний — раньше литералами rgba по index.css
(последние очаги захардкоженного цвета после B1). Значение живёт здесь. */
--warn-fill:rgba(224,166,59,.07); --warn-edge:rgba(224,166,59,.28);
--ok-fill:rgba(75,163,110,.10);
/* ── раздел 2: типографика — шкала в rem ────────────────────────────
системная настройка «крупный шрифт» теперь имеет эффект (было 217
объявлений в px, 0 в rem). */
--fs-2xs:.75rem; /* 12px — метки, единицы */
--fs-xs:.8125rem; /* 13px */
--fs-sm:.875rem; /* 14px */
--fs-base:.9375rem; /* 15px — основной текст */
--fs-md:1rem; /* 16px */
--fs-lg:1.125rem; /* 18px — заголовок карточки */
--fs-xl:1.25rem; /* 20px */
--fs-2xl:1.375rem; /* 22px — вывод дня */
--fs-3xl:1.5rem; /* 24px */
--fs-4xl:1.625rem; /* 26px */
--fs-num:2.5rem; /* 40px — крупное число (готовность и т.п.) */
/* ── раздел 3: форма и ритм ──────────────────────────────────────────
было 9/10/11/12/14/99/999 (пять близких значений — следы разных
сессий, не система) → три радиуса. */
--r-sm:8px; /* чипы, поля, мелкие элементы */
--r-md:14px; /* карточки, кнопки */
--r-full:999px;/* пилюли, полосы прогресса */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
--sp-6:24px; --sp-8:32px; --sp-12:48px;
--transition-fast:160ms; /* на состояние, ничего декоративного */
--tap-min:44px; /* минимальный тач-таргет */
/* ── шрифтовые стеки — ТЗ-typography-and-plan, Д1: единственный источник,
раньше 8 копий Onest-стека + 6 моно-стеков в разных css. Решение
ревьюера (Open §1 → A): --font-num равен --font-sans, табличные цифры
через font-variant-numeric. --font-code остаётся только для формул/кода
(why.css/why_en.css, блоки #cfd6df).
⛔ 07.10 — решение владельца (addendum к TZ-today-redesign-en.md):
редизайн шрифтов идёт НА ВСЕ страницы, не только «Сегодня». --font-sans
переведён на Manrope (self-host, /static/fonts/gregarion.css, подключён
из _head.html — единственное место, видно всем шаблонам сразу). Onest
больше НЕ подключается (её снят из всех шаблонов), но файлы
onest-*.woff2/onest.css остаются на диске — откат это просто обратная
правка этой строки + возврат , без скачивания заново. */
--font-sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
--font-num:var(--font-sans);
--font-code:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
/* ── вес/межстрочка/трекинг — Д4: набор именованных токенов, использует
карта ролей Д5–Д7. --fw-heavy только для героических чисел. */
--fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-heavy:800;
--lh-tight:1.1; --lh-snug:1.3; --lh-body:1.5; --lh-prose:1.55;
--ls-display:-0.02em; --ls-num:-0.01em; --ls-caps:0.06em; --ls-normal:0;
--measure-prose:66ch;
/* ── алиасы старых имён → новые токены (не удалять, см. таблицу B1) ─ */
/* --card2:var(--s0) — сознательно, не мехническая ошибка мэппинга при B1.
ИЗМЕРЕНО: до токенов (git log, index.css до d71b6cc) старый --card2 был
#11141a при --bg #0e1014 — контраст к холсту 1.03, уже практически
неотличим от него (тот же порядок, что 1.0 сейчас). Роль не «третья
поднятая поверхность», а «утопленный груз/врезка внутри карточки»:
~75 употреблений в css/ — грувы прогресс-баров (.track/.wbar/.bar),
бейджи-ячейки (.fcell/.wchip/.tc-chip/.pc-stat/.heat-cell), карточка-в-
карточке (.callout, index.css:1801), вторичные/ghost-кнопки и поля ввода
(.tbtn:hover, .wbtn.ghost, input[type=…], passport.css .stat/.rec .box).
Их граница даёт --line, не яркость заливки — те же элементы, что и до
аудита №15. Где нужна настоящая поднятая поверхность (вердикт ИИ,
разбор недели), используется --elev/--s2, не --card2 — см. комментарии
у .briefing-box (index.css:346) и .wreview (index.css:387). Четвёртый
уровень поверхности не заводить (ТЗ Б4, TZ-blocks.md). */
--bg:var(--s0); --card:var(--s1); --card2:var(--s0); --line:var(--pl);
--acc:var(--act); --good:var(--ok); --on-acc:var(--on-act); --bad:var(--over);
/* сайдбар редизайна «командный центр» — та же лестница s0/s1/s2 под
именами, придуманными до появления единой системы токенов. */
--sidebar:var(--s0); --panel:var(--s1); --elev:var(--s2);
/* ── расширение: продуктовые токены вне раздела 1 спеки (нутриенты,
раскладка) — не переименовывались, значения не менялись. ────────── */
--acc-text:#ea7550; /* оранжевый, поднятый по яркости — ТОЛЬКО текст/ссылки на панелях (AA, аудит №14) */
--carb:#9b8cf5; --prot:#5090e6; --kcal:#2faa6a; --fat:#d9b23b;
--sbw:248px; /* ширина сайдбара — раскладка, не цвет */
}
/* ── B1.3 → Д2 (ТЗ-typography-and-plan, решение ревьюера Open §1 = A):
измеренное — та же гарнитура Onest, табличные цифры через
font-variant-numeric, а не отдельная моноширинная. Раньше ui-monospace
давал "терминальный" вид внутри прозы ИИ (другая высота цифр, другой
вес, моно-запятая) — P1 в ТЗ. Onest несёт tnum/pnum в self-hosted
woff2 (проверено fontTools), сеть/вес файла не меняются. Без
tabular-nums цифры всё равно пляшут при обновлении (счётчики, кольцо
готовности), поэтому numeric-variant остаётся. font-weight:inherit —
чтобы .num не сбрасывал жирность текста, в который он вложен. */
.num{
font-family:var(--font-num);
font-variant-numeric:tabular-nums lining-nums;
font-weight:inherit;
}
/* ── раздел 4: экран «Сегодня» + шрифты (TZ-today-redesign-en.md, D1–D2,
D4) ─────────────────────────────────────────────────────────────────
--font-head/--font-text — ГЛОБАЛЬНЫЕ (addendum 07.10: редизайн шрифтов
идёт на все страницы, не только «Сегодня» — см. --font-sans выше). Тип-
шкала --fs-cover/--fs-hero/--fs-hero-s/--fw-head/--fw-brand/--lh-cover/
--tr-cover/--tr-rub и свечение --glow-* ОСТАЮТСЯ по сценарию ТЗ только
для экрана «Сегодня» (body.today в index.css) — верстку других страниц
этот заход не трогает, это отдельные ТЗ (REPORT в отчёте задачи). */
:root{
--font-head:"Source Serif 4",Georgia,serif;
--font-text:"Manrope",var(--font-sans);
/* шкала обложки: 44→76px по вьюпорту, «таблица гонки» 52px/26px */
--fs-cover:clamp(2.75rem, 11vw, 4.75rem);
--fs-hero:3.25rem; /* 52px — длительность в таблице гонки */
--fs-hero-s:1.625rem; /* 26px — дистанция/ккал, вторые числа-герои */
--fw-head:600; /* заголовок-вердикт h1 */
--fw-brand:500; /* бренд-плашка «Gregarion», курсив цифр действий */
--lh-cover:1.02;
--tr-cover:-.02em;
--tr-rub:.14em; /* трекинг капительных рубрик */
/* TZ-redesign-sections-en.md, D1: серийный заголовок раздела (/plan,
/trends, /health, /profile) — меньше обложки «Сегодня» (--fs-cover
44→76px), эти страницы не несут героический вердикт дня. 32→48px. */
--fs-title:clamp(2rem, 8vw, 3rem);
/* свечение по времени суток (ТЗ D4, макет body[data-bg=…] построчно;
решение ревьюера 07.10 п.2: альфа утреннего свечения .22 — выбор
владельца, атмосфера, не элемент интерфейса). Только верх экрана,
≤560px высотой — см. body.today[data-daypart] в index.css. */
--glow-morning:radial-gradient(90% 420px at 10% -90px, rgba(224,98,59,.22) 0%, rgba(224,98,59,.07) 42%, transparent 70%);
--glow-day:radial-gradient(120% 480px at 50% -80px, #1b1e25 0%, transparent 70%);
--glow-evening:radial-gradient(140% 560px at 30% -90px, #1d1a3a 0%, rgba(29,26,58,.5) 40%, transparent 74%);
/* landing, TZ-landing-redesign-en.md (D1): шкала только лендинга — обложка
героя делит экран с живым снимком продукта, поэтому меньше --fs-cover
(44→76px), иначе на 1280 заголовок рвётся на четыре строки. */
--fs-cover-land:clamp(2.75rem, 5.2vw, 4rem); /* 44→64px: обложка в герое-колонке —
замер зонда на 1280 (D8 R8, 5fr-колонка): 68px давал 4 строки RU-заголовку,
64px укладывает в 3 (акцептанс «h1 на ≤3 строки на 1280») */
--fs-deck:clamp(1.125rem, 2.4vw, 1.375rem); /* 18→22px — подзаголовок героя */
--fs-big:clamp(5rem, 18vw, 9rem); /* число-герой секции «закономерность» */
--sec-gap:clamp(64px, 10vw, 128px); /* воздух между разделами лендинга */
--measure:62ch; /* ширина строки проды на лендинге */
}
/* Логотип (09.10): надпись GREGARION капсом, Saira SemiBold в контурах —
из раунда «Gregarion Tornante» (дизайнер). В шапке ТОЛЬКО надпись: знак G
перед ней читался «G Gregarion» (дизайнер сам назвал это слабостью).
Знак живёт там, где на слово нет места: иконки, сайдбар.
Файл static/brand/wordmark.svg красится маской в цвет текста — сам
подстраивается под тему и не тянет шрифт Saira. Текст «Gregarion»
остаётся в разметке (читалки, поиск), уводится за край text-indent'ом. */
:is(.mast-brand, .tc-brand b, .top .mark, .brand b, .brand-mark){
--brand-h:1rem;
display:inline-block; flex:none; vertical-align:middle;
height:var(--brand-h); width:calc(var(--brand-h) * 9); /* пропорции viewBox 687.3×76.4 */
overflow:hidden; white-space:nowrap; text-indent:110%;
/* базовая линия блока = его низ; низ viewBox на 3.8 из 76.4 ниже строки букв —
подтягиваем, чтобы рубрика рядом («Сегодня», «Тренды») встала на строку GREGARION */
margin-bottom:calc(var(--brand-h) * -0.05);
background:var(--ink);
-webkit-mask:url(/static/brand/wordmark.svg) no-repeat left center / contain;
mask:url(/static/brand/wordmark.svg) no-repeat left center / contain;
}
footer .brand b{ --brand-h:.8rem; }
/* Размер надписи по месту (09.10). Внутри приложения бренд тихий — человек
смотрит на свои цифры; на широком экране 1rem теряется, поэтому чуть больше.
Лендинг и вход — первая встреча с продуктом, там бренд должен цеплять глаз.
На телефоне лендинга 1.25rem: рядом «Войти» и RU/EN, 1.5rem не влезает в 390 px. */
@media (min-width:900px){ :is(.mast-brand, .tc-brand b, .top .mark){ --brand-h:1.125rem; } }
header .brand b, .brand-mark{ --brand-h:1.25rem; }
@media (min-width:720px){ header .brand b, .brand-mark{ --brand-h:1.5rem; } }
footer .brand b{ --brand-h:1rem; }