/* ============================================================================ МедГраф · дизайн-токены v1.0 · 23.07.2026 БОЕВАЯ КОПИЯ design/system/tokens.css (design/ на VPS не выкладывается). Правки вносить в design/system/tokens.css, затем копировать сюда 1:1. Источник истины: site/design/concepts/концепт_итог.html (утверждён Павлом). Имена переменных совпадают с эталоном концепта — вёрстка переносится 1:1. Три зоны продукта: · ТЬМА («терминал») — главная (хиро, B2B-блок), кабинет организатора, лендинги организаторов и фармы, тарифы, футер. Чернила + янтарь + mono. · СВЕТ («журнал») — вся врачебная зона: лента, карточка, трекер, онбординг, регистрация, SEO-страницы. Бумага + чернила, мягкие карточки. · ЭКГ-линия — сигнатура на границе тьма/свет (компонент, см. components). Подключение шрифтов (в каждой страницы): Inter Tight 600–800 · Inter 400–600 · JetBrains Mono 400–700 https://fonts.googleapis.com/css2?family=Inter+Tight:wght@600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap ========================================================================== */ :root{ /* ========================================================================== 1. ПАЛИТРА · ТЁМНАЯ ЗОНА («терминал») ======================================================================== */ --bg:#0B0E13; /* фон страницы тёмной зоны */ --bg2:#0D1118; /* фон футера, тикера, чуть светлее базы */ --panel:#12161D; /* панели, инпуты, карточки на тёмном */ --panel2:#161C25; /* верх градиента панелей-дашбордов */ --line:#232B36; /* базовые разделители тёмной зоны */ --line2:#2C3542; /* границы интерактивных элементов (инпут, ghost-кнопка) */ --text:#E9E4D8; /* основной текст на тёмном (тёплый белый) */ --mut:#8B93A0; /* вторичный текст · контраст 6,2:1 — можно мелким */ --mut2:#6A7280; /* третичный · 4,0:1 — ТОЛЬКО подписи ≥12px или декор, не для несущего мелкого текста */ --amber:#F5B942; /* фирменный янтарь · на чернилах 10,9:1 — можно любым кеглем */ --amber-dim:rgba(245,185,66,.12); /* янтарная подложка (активная роль, алерт) */ --amber-line:rgba(245,185,66,.38); /* янтарная граница (hover, активное) */ --amber-hover:#FFC85A; /* hover янтарной кнопки */ --on-amber:#171204; /* текст на янтарной заливке (кнопки) */ /* ========================================================================== 2. ПАЛИТРА · СВЕТЛАЯ ЗОНА («журнал», врачебная) ======================================================================== */ --paper:#F2EFE6; /* фон страницы светлой зоны (тёплая бумага) */ --card:#FBF9F4; /* карточки на бумаге */ --ink:#12161D; /* основной текст светлой зоны = чернила */ --ink-mut:#5F6672; /* вторичный текст · 5,0:1 — можно мелким */ --ink-mut2:#8B8574; /* тёплый третичный · ТОЛЬКО декор (даты-теги, крошки, /go/-бейджи) — НЕ для секционных лейблов (правка Павла 23.07: на бумаге всего ~2,9:1) */ --ink-lbl:#59616E; /* секционные mono-uppercase лейблы светлой зоны («УЧАСТИЕ», «ОПИСАНИЕ…») · 5,4:1 на бумаге, 6,3:1 на белом — читаются сразу */ --line-l:#E0DACB; /* разделители и границы карточек на бумаге */ --line-l2:#CFC7B0; /* граница hover-состояния карточек */ --paper-dim:#EBE6D8; /* приглушённая плашка на бумаге (обложки, зебра таблиц) */ /* Янтарь в светлой зоне — затемнённые ступени (сам #F5B942 на бумаге не читается, использовать ТОЛЬКО как заливку/декор, не как цвет текста): */ --amber-ink:#8A6410; /* янтарный текст на бумаге · 4,7:1 — можно мелким ≥12px */ --amber-hot:#B07D10; /* акцентный янтарь · 3,2:1 — ТОЛЬКО крупный (≥18px) или жирный (≥14px bold) текст, ссылки «Читать →» */ --amber-dot:#E8A61A; /* пинг-точка свежести, ЭКГ-линия, декор (не текст) */ --amber-wash:rgba(232,166,26,.09); /* заливка дата-блока */ --amber-wash2:rgba(232,166,26,.14); /* заливка бейджа ЗЕТ */ --amber-edge:rgba(200,146,26,.26); /* граница дата-блока */ --amber-edge2:rgba(200,146,26,.35); /* граница бейджа ЗЕТ */ /* ========================================================================== 2а. ПАЛИТРА · СВЕТЛЫЙ ДАШБОРД (кабинет организатора) Правка Павла 23.07: лендинг тёмный → личный кабинет контрастно-светлый. Подложка — белая (не «бумага» врачебной зоны), стиль «чистый дашборд». Текст на белом — те же --ink / --ink-mut / --ink-lbl (контраст выше, чем на бумаге). Тёмную зону эти токены не трогают. ======================================================================== */ --white:#FFFFFF; /* подложка светлого дашборда */ --white2:#F6F7F9; /* вторичная поверхность на белом (сайдбар, плашки) */ --white-warm:#F8F5EC; /* тёплая тонировка секций дашборда (чередование блоков; отличается и от белого, и от серого сайдбара --white2) */ --line-w:#E7E9EE; /* разделители на белом */ --line-w2:#D6DAE1; /* границы интерактивных элементов на белом */ --bar-mk:#C9CFD8; /* приглушённые серые бары графиков на белом (фон/рынок) */ --sh-card-w:0 6px 18px rgba(18,22,29,.06); /* лёгкая тень карточек дашборда */ /* ========================================================================== 3. СЕМАНТИКА И СТАТУСЫ ======================================================================== */ /* Изумруд = ТОЛЬКО «бесплатно для врача». Не использовать как декоративный акцент, цвет графиков или success-состояние интерфейса. */ --free:#17705B; /* текст «бесплатно» на бумаге · 5,7:1 */ --free-dark:#46D68C; /* «бесплатно» на чернилах (тёмный хиро/футер) */ /* Рост/падение данных (графики, дельты). В тёмной зоне: */ --up:#46D68C; /* рост · 8,7:1 на чернилах */ --down:#F0655A; /* падение · 5,4:1 на чернилах */ --down-dim:rgba(240,101,90,.12); /* подложка бейджа падения */ --down-line:rgba(240,101,90,.35); /* граница бейджа падения */ /* В светлой зоне: */ --up-ink:#1B7A4B; /* рост на бумаге · 4,7:1 */ --down-ink:#C0392B; /* падение на бумаге · 4,7:1 */ /* Служебные статусы интерфейса (модерация, предупреждения, ошибки форм): */ --warn-ink:#8A6410; /* предупреждение на бумаге (= amber-ink) */ --warn-wash:rgba(232,166,26,.12); --err:#F0655A; /* ошибка на тёмном */ --err-ink:#C0392B; /* ошибка на бумаге */ --ok-ink:#1B7A4B; /* успех формы на бумаге (не изумруд «бесплатно» — совпадение оттенка допустимо, роли разные) */ /* ========================================================================== 4. ТИПОГРАФИКА ======================================================================== */ --disp:'Inter Tight',Inter,system-ui,sans-serif; /* дисплей: заголовки */ --body:'Inter',system-ui,-apple-system,sans-serif;/* текст */ --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; /* mono — ВСЕ данные: цифры, метки, теги, даты, бейджи. Числа — с font-variant-numeric:tabular-nums, чтобы столбцы не плясали. */ /* Шкала размеров (rem не используем — макеты в px, как эталон): */ --fs-h1:clamp(33px,4.5vw,56px); /* H1 хиро · Inter Tight 800 · 1.06 · -0.018em */ --fs-h2d:clamp(27px,3.4vw,42px); /* H2 тёмной зоны · 800 · 1.08 · -0.016em */ --fs-h2:clamp(26px,3vw,38px); /* H2 светлой зоны · 800 · 1.1 · -0.015em */ --fs-h3:clamp(20px,2.2vw,24px); /* H3 подраздела · 700 · 1.25 · -0.01em */ --fs-title:17.5px; /* заголовок статьи/плитки · Inter Tight 700 · 1.32 */ --fs-card:16.5px; /* заголовок карточки мероприятия · Inter 600 · 1.38 */ --fs-body:16px; /* базовый текст · Inter 400 · 1.62 */ --fs-s:14.5px; /* вторичный текст · 1.5 */ --fs-xs:13px; /* мета, подписи · 1.5 */ --fs-num-xl:clamp(44px,5.4vw,74px); /* главная цифра · mono 700 · 1 · -0.03em */ --fs-num-l:38px; /* цифра дашборда · mono 700 · 1 · -0.02em */ --fs-num-m:21px; /* цифра плитки · mono 700 · 1.2 */ --fs-num-s:13px; /* цифра в строке · mono 700 */ --fs-tag:11px; /* теги-«шапки» · mono 500 · .16em · uppercase */ --fs-meta:12px; /* mono-мета (свежесть, слаги) · mono 500 */ /* ========================================================================== 5. ОТСТУПЫ · 8px-СЕТКА ======================================================================== */ --s-1:4px; /* внутри составных элементов */ --s-2:8px; /* базовый шаг: зазоры чипов, иконка-текст */ --s-3:12px; /* внутренние отступы мелких элементов */ --s-4:16px; /* стандартный внутренний отступ */ --s-5:24px; /* паддинг панелей и карточек */ --s-6:32px; /* боковой паддинг .wrap, зазор колонок */ --s-7:48px; /* между блоками внутри секции */ --s-8:64px; /* вертикальный паддинг секций */ --s-9:96px; /* паддинг крупных секций (B2B) */ --wrap:1200px; /* максимальная ширина контента */ --wrap-narrow:760px; /* ширина текстовых страниц/онбординга */ /* ========================================================================== 6. РАДИУСЫ ======================================================================== */ --r-xs:7px; /* бейджи, mono-метки */ --r-s:9px; /* кнопки, инпуты, алерты */ --r-m:11px; /* дата-блок, вложенные плитки */ --r-l:14px; /* карточки, панели, дашборды */ --r-pill:999px; /* чипы специальностей, пилюли */ --r-focus:4px; /* скругление focus-обводки */ /* ========================================================================== 7. ТЕНИ ======================================================================== */ --sh-panel:0 24px 60px rgba(0,0,0,.35); /* панель «Рынок в цифрах» на тьме */ --sh-dash:0 30px 70px rgba(0,0,0,.4); /* дашборд-виджет на тьме */ --sh-card:0 14px 32px rgba(31,26,12,.1); /* hover карточки на бумаге */ --sh-btn:0 4px 18px rgba(245,185,66,.18); /* янтарная кнопка */ --sh-nav:0 -6px 24px rgba(31,26,12,.08); /* мобильная нижняя навигация */ /* ========================================================================== 8. ДВИЖЕНИЕ (длительности/изинги; полный motion-гайд — следующий этап) ======================================================================== */ --t-fast:.18s ease; /* hover, микро-переходы */ --t-swap:.5s ease; /* смена контента, появление бейджа */ --e-reveal:cubic-bezier(.25,.5,.2,1); /* появление блоков */ --d-reveal:.7s; /* длительность появления */ --e-draw:cubic-bezier(.4,0,.2,1); /* отрисовка линий графика */ --d-count:2.1s; /* счётчик главной цифры */ --d-ping:2.4s; /* пульс точки свежести */ --d-ecg:6s; /* пробег ЭКГ-луча */ /* Константы канона (motion-гайд, токенизированы 23.07 — бэклог УИ закрыт): */ --d-draw:1.7s; /* отрисовка линии графика (P02) */ --d-draw-late:1.5s; /* подписи и точка «сейчас» после старта линии */ --stagger:.08s; /* шаг stagger появления (.d1/.d2/.d3, P08) */ --d-ticker:38s; /* полупроход тикера, ≈55 px/с (P05) */ --d-skeleton:1.4s; /* период блика скелетона (P09) */ /* Все анимации обязаны гаснуть при prefers-reduced-motion:reduce. */ /* ========================================================================== 9. СЛОИ ======================================================================== */ --z-sticky:40; /* мини-трекер, sticky-CTA */ --z-header:50; /* шапка */ --z-overlay:60; /* оверлей blur-заглушки */ --z-modal:80; /* модальные окна */ } /* ============================================================================ БАЗОВЫЙ СЛОЙ (общий для всех страниц; не компоненты — только фундамент) ========================================================================== */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ background:var(--bg);color:var(--text); font:400 var(--fs-body)/1.62 var(--body); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } ::selection{background:rgba(245,185,66,.32)} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} input,select,textarea{font:inherit;color:inherit} img,svg{display:block;max-width:100%} /* Видимый фокус — везде, обе зоны (WCAG 2.4.7): */ :focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:var(--r-focus)} .light :focus-visible{outline-color:var(--amber-hot)} /* Контейнер: */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s-6)} @media (max-width:600px){.wrap{padding:0 18px}} /* Утилиты типографики: */ .mono{font-family:var(--mono)} .tnum{font-variant-numeric:tabular-nums} .tag{font:500 var(--fs-tag)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)} .tag--amber{color:var(--amber)} .light .tag{color:var(--ink-lbl)} /* Светлая зона — модификатор контейнера зоны: */ .light{background:var(--paper);color:var(--ink)} /* Скрытый пропуск к контенту: */ .skip{position:absolute;left:-9999px;top:0;background:var(--amber);color:var(--on-amber);padding:10px 16px;z-index:99;font-weight:600} .skip:focus{left:16px;top:12px} /* Глушение анимаций (дублируется в компонентах на конкретных классах): */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} } /* скрытый для глаз, доступный скринридеру (иерархия заголовков) */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}