/* ТОМОКО — дизайн-токены. Выгружены 27.08.2026 из коллекции переменных «ТОМОКО × WHOOP» файла Figma U5M0ihzdUI9upBTwUAHZ42. Значения точные, не подбирались. Менять только вслед за Figma, иначе макет и сайт разъедутся. */ :root { /* ── Цвет ─────────────────────────────────────────── */ --c-ink-green: #0b1a10; /* основной текст на светлом */ --c-forest: #12301c; /* тёмная поверхность, подвал */ --c-brand-green: #237e33; /* основное действие, зелёные полосы */ --c-green-deep: #1c6529; /* ховер основного действия */ --c-orange: #f39314; /* единственный акцент: анонс, метки, цифры */ --c-paper: #ffffff; /* полотно и текст на тёмном */ --c-mist: #f2f7f3; /* плоская элевация карточек */ --c-hairline: #e2ebe4; /* бордюры и разделители */ --c-fog: #7c8a81; /* приглушённый текст */ --c-ash: #9aa79f; /* третичный текст и метаданные */ /* Состояния из UI-kit (раздел 05). В переменные Figma не заводились. */ --c-disabled-bg: #dce7df; --c-disabled-ink: #93a79a; --c-error: #d64545; /* Обводка полей ввода. Отдельный цвет, темнее --c-hairline; замерен на компоненте «Поле» (345:34310), в переменные не заведён. */ --c-field-border: #c9dbce; /* ── Скругления ───────────────────────────────────── */ --r-card: 24px; --r-pill: 300px; --r-small: 8px; /* Замерено на компонентах 27.08.2026. В UI-KIT-AND-TEMPLATES.md для полей значилось 5px — это неверно, на макете 12. Обложки скруглены на 20, а не на 24: «карточки и изображения 24» относится только к карточкам. */ --r-input: 12px; --r-image: 20px; /* ── Ритм ─────────────────────────────────────────── */ --s-section: 92px; /* вертикальный отступ секции */ --s-card: 32px; /* внутренний отступ карточки */ --s-gutter: 24px; /* просвет сетки */ /* Шаг 4px — базовая сетка макета */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; /* ── Раскладка ────────────────────────────────────── */ --l-max-width: 1200px; --l-page-padding: 120px; /* ── Типографика ──────────────────────────────────── */ --font: "Montserrat", "Helvetica Neue", Arial, sans-serif; /* Восемь ступеней шкалы. Интерлиньяж в Figma задан процентами, здесь — безразмерным множителем: это одно и то же. Трекинг переведён из пикселей в em делением на кегль, чтобы шкала не ломалась при адаптиве. */ --t-display-size: 116px; --t-display-lh: 0.79; --t-display-ls: -0.0397em; --t-heading-lg-size: 50px; --t-heading-lg-lh: 0.88; --t-heading-lg-ls: -0.04em; --t-heading-size: 35px; --t-heading-lh: 1.0; --t-heading-ls: -0.03em; --t-subheading-size: 24px; --t-subheading-lh: 1.13; --t-subheading-ls: -0.03em; --t-body-lg-size: 20px; --t-body-lg-lh: 1.29; --t-body-lg-ls: -0.03em; --t-body-size: 16px; --t-body-lh: 1.33; --t-body-ls: -0.03em; --t-label-14-size: 14px; --t-label-14-lh: 1.59; --t-label-14-ls: 0.1em; --t-label-12-size: 12px; --t-label-12-lh: 1.40; --t-label-12-ls: 0.1em; --w-regular: 400; --w-medium: 500; --w-semibold: 600; /* Три ступени сверх кита: в UI-kit объявлено восемь, но макет использует ещё три. Значения замерены на артбордах 28.08.2026, не подобраны. 92 — заголовок героя главной (345:33478). 76 — заголовки каталогов и посадочных: Услуги, Врачи, Акции, О клинике. 64 — заголовки информационных страниц: ОМС, ДМС, Памятка, Вычет. Последние два яруса — намеренно разные, а не разнобой: у них отличаются и интерлиньяж, и трекинг. */ --t-display-md-size: 92px; --t-display-md-lh: 0.79; --t-display-md-ls: -0.05em; --t-display-sm-size: 76px; --t-display-sm-lh: 0.92; --t-display-sm-ls: -0.0395em; --t-page-title-size: 64px; --t-page-title-lh: 0.96; --t-page-title-ls: -0.039em; /* ── Прочее, чему в Figma переменных не завели ─────── */ /* Толщина обводки вторичных кнопок и вкладок. Замерена: 1.5px. */ --bw-outline: 1.5px; /* Белый с прозрачностью на тёмных поверхностях. Проценты замерены на макете финального блока и подвала. */ --c-paper-75: rgb(255 255 255 / 0.75); --c-paper-66: rgb(255 255 255 / 0.66); --c-paper-55: rgb(255 255 255 / 0.55); --c-paper-40: rgb(255 255 255 / 0.40); --c-paper-28: rgb(255 255 255 / 0.28); --c-paper-20: rgb(255 255 255 / 0.20); --c-paper-14: rgb(255 255 255 / 0.14); --c-paper-10: rgb(255 255 255 / 0.10); /* Зелёный градиент финального блока и карточки оборудования. Три стопа замерены на макете; средние оттенки в палитру не входят, поэтому градиент объявлен целиком одной переменной. */ --g-green: linear-gradient(180deg, #268034 0%, #17532a 45%, var(--c-forest) 100%); --g-green-x: linear-gradient(90deg, #268034 0%, #17532a 45%, var(--c-forest) 100%); } /* Планшет: полей меньше, дисплейные кегли сжимаются. В Figma этой ширины нет — значения выведены интерполяцией между 1440 и 375, при вёрстке сверять глазами. */ @media (max-width: 1100px) { :root { --l-page-padding: 48px; --s-section: 72px; --t-display-size: 72px; --t-display-md-size: 60px; --t-display-sm-size: 52px; --t-page-title-size: 46px; --t-heading-lg-size: 40px; --t-heading-size: 30px; } } /* Мобильные: поля 20, шкала по мобильным макетам 375. */ @media (max-width: 680px) { :root { --l-page-padding: 20px; --s-section: 56px; --s-card: 20px; --t-display-size: 38px; --t-display-lh: 0.94; --t-display-md-size: 34px; --t-display-md-lh: 1.05; --t-display-sm-size: 32px; --t-display-sm-lh: 1.05; --t-page-title-size: 30px; --t-page-title-lh: 1.08; --t-heading-lg-size: 30px; --t-heading-lg-lh: 1.0; --t-heading-size: 26px; --t-subheading-size: 20px; --t-body-lg-size: 17px; --t-body-size: 15px; } }