/* ===== Токены дизайн-системы ===== * Источник правды: design-notes/system-v1.1.html («Система безтерапевта.ру», версия 1.1). * Значения здесь и только здесь. В правилах пишем var(--…), а не числа и не hex: * так за два года и набралось семьсот оттенков на четыре десятка реальных цветов. * * Файл подключается ПЕРВЫМ, до page.css. Проверка на самодеятельность — * node gen/check-tokens.js: он ругается на цвет или радиус вне набора. */ :root{ /* --- База --- */ --cream:#FFF8E7; /* фон публичных страниц */ --ink:#24231F; /* основной текст */ --accent:#507665; /* бренд-зелёный: кнопки, ссылки, активные состояния */ /* --- Восемь семейств. У каждого три ступени: база — светлая подложка, mid — средний, dark — насыщенный. --- */ --sage:#E8EFEA; --sage-mid:#688878; --sage-dark:#507665; --mint:#E4EEEC; --mint-mid:#678B84; --mint-dark:#4F726C; --mist:#EEF1ED; --mist-mid:#A8B8AF; --mist-dark:#507665; --rose:#F3E9E4; --rose-mid:#98756B; --rose-dark:#805F56; --sand:#F2ECDF; --sand-mid:#9A805B; --sand-dark:#7D6542; --mauve:#EEE7E9; --mauve-mid:#8C737B; --mauve-dark:#24231F; --peach:#F5E5D8; --peach-mid:#BB7950; --peach-dark:#92583A; --blue:#4E718F; --blue-mid:#6484A0; --blue-soft:#E9F0F5; /* --- Нейтрали. Восьми семейств хватает для поверхностей, но не для текста: система описывает только --ink, а на сайте давно живёт тёплая серая шкала — подписи в подвале, вторичный текст кабинета, разделители. Эти значения не выдуманы сейчас: они уже стоят в общих блоках сотнями объявлений (подписи 430 раз, разделитель 212). Записаны здесь, чтобы гейт показывал настоящие отклонения, а не ругался на согласованный текст. Имена с префиксом neutral, а не привычные --muted и --faint: эти два уже объявлены в page.css, но не на всех страницах. Совпади имена — там, где var(--muted) до сих пор ни к чему не приводил, текст внезапно посветлел бы. Префикс исключает такую подмену. --- */ --neutral-strong:#2B2926; /* заголовки и текст кабинета */ --neutral-soft:#6F675B; /* вторичный текст, описания */ --neutral-faint:#8A8071; /* подписи, мелкие пояснения */ --neutral-muted:#9A917E; /* приглушённая подпись поверх фона */ --neutral-line:#E0D3BA; /* разделитель на песочном фоне */ --neutral-surface:#FCF9F2; /* поверхность карточки на кремовом */ /* --- Метки рубрик блога. Шестнадцать цветов, по одному на рубрику: читатель узнаёт тему по метке, поэтому свести их к восьми семействам нельзя — рубрики перестанут различаться. Это отдельный набор со своей задачей, и он тоже должен лежать в одном месте, а не в разметке каталога. --- */ --tag-panic:#B0402C; --tag-relations:#A03A68; --tag-self-esteem:#6A4C96; --tag-body:#1F7A65; --tag-practice:#2A7590; --tag-mood:#8F6316; --tag-thoughts:#46549B; --tag-work:#6E5A48; --tag-skills:#3D7A3B; --tag-distortions:#843A76; --tag-life:#A2562A; --tag-theory:#5A6685; --tag-test:#3A73A8; --tag-tool:#666B42; --tag-exercise:#4E8440; --tag-guide:#3A73A8; /* --- Тёмная тема. Система описывает светлую, а тёмная два года жила значениями внутри page.css и cabinet-design.css: двадцать одна переменная и сорок три литерала, нигде не собранные вместе. Из-за этого каждая новая тёмная страница заводила свои #18202b с чуть другим оттенком. Значения здесь не придуманы — это то, что уже стоит на сайте. Токены именованные, а не переопределение светлых: тёмная тема включается классом на html, и подмена значений в :root ломала бы страницы, где тема выбирается вручную. --- */ --dark-shell:#0A0E13; /* подложка кабинета, самый нижний слой */ --dark-bg:#10151C; /* фон страницы и панелей */ --dark-surface:#18202B; /* карточка, поднятая поверхность */ --dark-surface-2:#1E2733; /* вложенный блок внутри карточки */ --dark-control:#222D3A; /* поле ввода, кнопка-контрол */ --dark-ink:#F4EFE3; /* основной текст */ --dark-ink-warm:#F1E7D4; /* текст на публичных страницах, теплее */ --dark-muted:#B7C1CD; /* вторичный текст кабинета */ --dark-muted-cool:#A6AEBA; /* вторичный текст публичных страниц */ --dark-faint:#939CAA; /* подписи: 4.15 на приподнятой подложке было ниже нормы 4.5 */ --dark-accent:#78A895; /* акцент кабинета: он светлее дневного */ --dark-accent-2:#6E9A84; /* акцент публичных страниц */ --dark-success:#5BC894; /* положительное состояние */ --dark-line:rgba(233,240,245,.18); /* граница на тёмном */ --dark-line-strong:rgba(233,240,245,.55);/* граница активного поля */ --dark-tint:rgba(80,118,101,.22); /* зелёная подложка на тёмном */ /* --- Цвета состояний в чек-ине. Восьми семейств на одиннадцать эмоций не хватало, и цвета переиспользовались буквально: стыд и вина шли одним --mauve-mid, обида и радость — одним --peach-mid. Плюс три семейства сами по себе неразличимы (rose-mid, mauve-mid, rose-dark — все коричнево-розовые), поэтому половина чипов выглядела одинаково. Здесь одиннадцать значений, подобранных так, чтобы соседние по списку различались тоном, а не оттенком. Порядок тот же, что на экране. --- */ --feel-anxiety:#4E718F; /* тревога — синий */ --feel-sadness:#6A4C96; /* грусть — приглушённый фиолетовый */ --feel-anger:#A2562A; /* злость — охристая терракота */ --feel-shame:#843A76; /* стыд — сливовый */ --feel-guilt:#6E5A48; /* вина — коричневый */ --feel-resentment:#A03A68; /* обида — приглушённая маджента */ --feel-loneliness:#2A7590; /* одиночество — морской */ --feel-panic:#B3352F; /* паника — красный, самый острый в ряду */ --feel-calm:#507665; /* спокойствие — бренд-зелёный */ --feel-joy:#8F6316; /* радость — золотой */ --feel-other:#9A917E; /* другое — нейтральный */ /* --- Шкала интенсивности ответа. Варианты ответа в тестах красятся по позиции: «никогда» спокойнее, «почти каждый день» тревожнее. Первая версия брала подряд идущие значения палитры (accent, sage-mid, sand-mid, peach-mid) ради «ноль новых цветов» — и на четырёхбалльной шкале, которая стоит в большинстве тестов, вышло два зелёных и два коричневых. Ступени неразличимы, шкала перестала читаться. Здесь тот же принцип, что у цветов эмоций: соседние ступени различаются тоном, а не оттенком. Зелёный, золотой, терракота, красный — все четыре уже есть в наборе, гамма остаётся приглушённой. --- */ --scale-1:var(--accent); /* спокойный конец: бренд-зелёный */ --scale-2:var(--feel-joy); /* золотой */ --scale-3:var(--tag-life); /* терракота */ --scale-4:var(--feel-panic); /* красный: обычный конец четырёхбалльной шкалы */ --scale-5:var(--tag-panic); /* пятая ступень у PSS-10 и SAS-SV */ --scale-6:var(--peach-dark); /* шестая: только у SAS-SV */ /* Подложка под лендингами курсов. Кабинет стоит на песочном --cab-shell, но лендинги курсов сделаны в холодной гамме, и песок под стеклянным сайдбаром выбивался из макета. Тёмная тема берёт общий --dark-shell. */ --course-shell:#EDEBF4; /* Подвал сайта. Значения переехали сюда из инлайновых стилей футера, где стояли хексами в каждой из 211 страниц: гейт их не видел, потому что проверяет CSS, а не атрибуты разметки. Песочная подложка темнее кремового фона страниц, кнопки магазинов почти чёрные, подписи — тёплый серый. */ --footer-bg:#F1E7D4; --footer-store:#211C14; --footer-caption:#6F675B; --footer-label:#6F675B; /* Тёмная тема подвала: пара к --footer-* выше. Держим здесь, а не в page.css, потому что часть страниц (главная, гайды) его не подключает. */ /* --- Состояния --- */ --error:#805F56; --success:#507665; /* --- Типографика. Шкала из system-v1.1 со сдвигом на ступень: заголовок страницы берёт размер Section/H2 (38–58), потому что Display/H1 (50–78) на реальных страницах выглядит огромным. Дальше H2 получает размер Card/H3, а H3 остаётся промежуточным — так иерархия из трёх ступеней сохраняется. Веса: Merriweather 300 для заголовков, интерфейсный шрифт 300–500. Жирного начертания в системе нет. --- */ --text-h1:clamp(38px,4vw,50px); --lh-h1:1.06; --text-h2:clamp(22px,3.2vw,27px); --lh-h2:1.18; --text-h3:19px; --lh-h3:1.3; --text-body:17px; --lh-body:1.58; --text-small:15px; --lh-small:1.5; --text-caption:12px; --tracking-caption:.08em; /* --- Раскладка --- */ --container:1280px; /* --- Скругления --- */ --radius-card:30px; /* карточка, крупная поверхность */ --radius-inner:22px; /* вложенный блок внутри карточки */ --radius-control:16px; /* кнопка, поле ввода */ --radius-small:13px; /* чип, метка, мелкий элемент */ --radius-micro:6px; /* полоска прогресса, насечка, точка */ --radius-pill:999px; /* круглые кнопки и пилюли */ --radius:var(--radius-card); /* --- Тени. Три уровня, больше не заводить. --- */ --shadow-raised:0 24px 70px rgba(80,118,101,.13); /* поднятая карточка */ --shadow-soft:0 12px 36px rgba(36,35,31,.08); /* мягкое отделение от фона */ --shadow-control:0 10px 26px rgba(80,118,101,.18); /* кнопка, контрол */ --shadow:var(--shadow-raised); /* Подкрашенная тень: карточки курсов и упражнений роняют тень цветом своей темы, а не серым. Приём осмысленный, но записывался каждый раз заново — двадцать вариаций одного и того же. Цвет берётся из --c, если он задан на карточке, иначе из акцента. */ --shadow-tinted:0 12px 26px -12px color-mix(in srgb,var(--c,var(--oc,var(--accent))) 70%,transparent); /* Кольцо фокуса и выделения. Это не тень поверхности: у неё нет размытия, она рисует обводку вокруг элемента. Отдельный токен, чтобы её не путали с уровнями теней. */ --ring-focus:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent); /* --- Интервалы, шаг 4 px --- */ --space-micro:4px; --space-xs:8px; --space-sm:12px; --space-md:16px; --space-lg:24px; --space-xl:32px; --space-2xl:48px; --space-3xl:64px; /* --- Тинты палитры (colors.pdf) как подложки блоков -------------------- Курс раскрашивает шаги и карточки светлыми тонами семейств: раньше они стояли литералами в разметке и каждый раз считались новым цветом. */ --tint-gold:#F2ECDF; --tint-rose:#F3E9E4; --tint-terra:#F5E5D8; --tint-green:#E8EFEA; --tint-blue:#E9F0F5; --tint-teal:#E4EEEC; --tint-purple:#EFECF3; /* --- Текст на цветных подложках ------------------------------------- Средние тона палитры на своих же тинтах дают контраст 3.6–4.4 при норме 4.5: подпись читается хуже обычного текста. Для набора и меток поверх тинта берём затемнённый вариант того же семейства. Проверено замером на всех экранах курса 29.07.2026. */ --ink-on-blue:#45647F; --ink-on-green:#456859; --ink-on-rose:#8A4E42; --ink-on-indigo:#4C547B; /* --- Движение. Анимация объясняет изменение, а не украшает. --- */ --duration-fast:160ms; /* состояния контролов */ --duration-base:250ms; /* наведение, смена поверхностей */ --duration-slow:480ms; /* тост, шторка, появление блока */ --ease-standard:cubic-bezier(.2,.8,.2,1); } /* Телефонная шкала из DESIGN.md. Раньше clamp упирался в десктопный минимум 38px даже на 320px, из-за чего длинные заголовки занимали по 6–8 строк и отдельные русские слова расширяли документ. */ @media(max-width:720px){ :root{ --text-h1:32px; --text-h2:26px; --text-h3:19px; --text-body:16.5px; --text-small:14.5px; } } @media (prefers-reduced-motion:reduce){ :root{ --duration-fast:0ms; --duration-base:0ms; --duration-slow:0ms; } } html[data-theme="dark"]{ --footer-bg:#141B25; --footer-store:#1B2431; --footer-caption:#A6AEBA; --footer-label:#A6AEBA; --neutral-soft:#A6AEBA; --neutral-faint:#8A93A3; --neutral-muted:#8A93A3; --neutral-line:rgba(233,240,245,.16); --neutral-surface:#18202B; }