/*
* Слот — токены для вёрстки.
* Источник: дизайн-система v0.1 — «Прототип - Лендинг Desktop — Слот/uploads/_Слот_/Слот.dc.html»
* и её файл токенов tokens.css в той же папке. Значения перенесены без изменений,
* в комментарии — исходный шаг палитры или алиас дизайн-системы.
* Тёмной темы в дизайн-системе нет.
*
* Дополнения к шкалам дизайн-системы (значения, которые прототип использует часто, но в шкалах их не было)
* приняты 2026-10-18 — разбор и обоснование: docs/tokens-audit.md. Такие строки помечены «дополнение».
*/
:root {
/* ---------- Фон ---------- */
--color-bg-page: #FBF6EE; /* neutral-50 · bg/page — фон функциональных экранов */
--color-bg-surface: #FFFDF9; /* neutral-0 · bg/surface — карточки, поля, модалки */
--color-bg-muted: #F5EDDF; /* neutral-100 · bg/cream — плашки, шапка, кнопки на коралле */
--color-bg-brand: #F2552C; /* primary-500 · bg/brand — брендовые зоны */
--color-bg-admin-nav: #262476; /* secondary-800 · bg/admin-nav — меню админки */
--color-accent: #FFC20E; /* accent-500 — только точечно, не фон для текста большой площади */
/* ---------- Текст ---------- */
--color-text: #1E1914; /* neutral-900 · text/primary — основной текст */
--color-text-description: #4A4136; /* neutral-700 — описания и пояснения, темнее вторичного (дополнение) */
--color-text-secondary: #655A4A; /* neutral-600 · text/secondary — подписи, подсказки, плейсхолдеры */
--color-text-disabled: #877A66; /* neutral-500 · text/disabled — неактивные элементы */
--color-text-on-brand: #FFFDF9; /* neutral-0 · text/on-brand — на коралле только ≥24px bold */
--color-text-link: #B23414; /* primary-700 · text/link — ссылки */
--color-text-link-hover: #8A2912; /* primary-800 — a:hover на странице дизайн-системы */
/* ---------- Граница ---------- */
--color-border: #EADFCC; /* neutral-200 · border/default — карточки, разделители */
--color-border-field: #877A66; /* neutral-500 · border/strong — поля ввода (3:1) */
--color-border-field-focus: #3D3FBE; /* secondary-600 — обводка поля в фокусе */
--color-border-ink: #1E1914; /* neutral-900 · border/ink — кнопки, иллюстрации */
--color-border-dashed: #D6C8B2; /* neutral-300 — пунктир: неактивное поле, пустые клетки (дополнение) */
--color-focus-ring: #312F9A; /* secondary-700 · focus/outer — кольцо фокуса */
--color-focus-ring-on-brand: #1E1914; /* neutral-900 — кольцо фокуса на коралловом фоне (дополнение) */
/* ---------- Кнопки ---------- */
/* primary — основное действие, выбранный слот */
--color-button-primary-bg: #D23E18; /* primary-600 · action/primary */
--color-button-primary-bg-hover: #B23414; /* primary-700 · action/primary-hover */
--color-button-primary-bg-pressed: #8A2912; /* primary-800 · action/primary-pressed */
--color-button-primary-text: #FFFDF9; /* neutral-0 */
/* secondary — вторичные действия, админка */
--color-button-secondary-bg: #3D3FBE; /* secondary-600 · action/secondary */
--color-button-secondary-bg-hover: #312F9A; /* secondary-700 */
--color-button-secondary-bg-pressed: #262476; /* secondary-800 */
--color-button-secondary-text: #FFFDF9; /* neutral-0 */
/* outline */
--color-button-outline-bg: #FFFDF9; /* neutral-0 */
--color-button-outline-bg-hover: #F5EDDF; /* neutral-100 */
--color-button-outline-bg-pressed: #EADFCC; /* neutral-200 */
--color-button-outline-text: #1E1914; /* neutral-900 */
/* ghost — без фона и рамки */
--color-button-ghost-text: #B23414; /* primary-700 */
--color-button-ghost-text-pressed: #8A2912; /* primary-800 */
--color-button-ghost-bg-hover: #FFF1EC; /* primary-50 */
--color-button-ghost-bg-pressed: #FFDFD3; /* primary-100 */
/* destructive — отмена записи и другие разрушающие действия */
--color-button-danger-bg: #C92340; /* error-500 · action/destructive */
--color-button-danger-bg-hover: #AD1A35; /* error-600 */
--color-button-danger-bg-pressed: #8C142B; /* error-700 */
--color-button-danger-text: #FFFDF9; /* neutral-0 */
/* danger-outline — «Отменить запись» в карточке записи (дополнение: вида нет в дизайн-системе) */
--color-button-danger-outline-bg: #FFFDF9; /* neutral-0 */
--color-button-danger-outline-bg-hover: #FDECEE; /* error-50 */
--color-button-danger-outline-bg-pressed: #F9CFD5; /* error-100 */
--color-button-danger-outline-text: #AD1A35; /* error-600 */
--color-button-danger-outline-border: #C92340; /* error-500 */
/* рамка primary, secondary, outline и destructive — --color-border-ink */
/* неактивная кнопка (у outline и ghost фон прозрачный) */
--color-button-disabled-bg: #EADFCC; /* neutral-200 */
--color-button-disabled-border: #D6C8B2; /* neutral-300 */
--color-button-disabled-text: #877A66; /* neutral-500 */
/* ---------- Поле ввода, неактивное (рамка — --color-border-dashed) ---------- */
--color-field-disabled-bg: #F5EDDF; /* neutral-100 */
/* ---------- Ошибка ---------- */
--color-error: #C92340; /* error-500 — рамка поля с ошибкой (2px) */
--color-error-text: #AD1A35; /* error-600 — текст ошибки под полем, иконка и текст на --color-error-bg */
--color-error-bg: #FDECEE; /* error-50 — фон сообщения */
--color-error-border: #F2A0AC; /* error-200 — рамка сообщения */
--color-error-title: #400913; /* error-900 — заголовок сообщения */
--color-error-body: #660F20; /* error-800 — текст сообщения */
/* ---------- Успех ---------- */
--color-success: #34974F; /* success-500 — точки «есть время», круг с галочкой (дополнение) */
--color-success-text: #226535; /* success-700 — иконка, статус «Завершена» на --color-success-bg */
--color-success-bg: #EAF6EC; /* success-50 */
--color-success-border: #A3D9B0; /* success-200 */
--color-success-title: #10301A; /* success-900 */
--color-success-body: #1A4D29; /* success-800 */
/* ---------- Предупреждение ---------- */
--color-warning-text: #8F5404; /* warning-700 */
--color-warning-bg: #FFF5E0; /* warning-50 */
--color-warning-border: #FFD27A; /* warning-200 */
--color-warning-bg-hover: #FFE6B3; /* warning-100 — наведение на кнопку внутри сообщения (дополнение) */
--color-warning-title: #3F2402; /* warning-900 */
--color-warning-body: #663B03; /* warning-800 */
/* ---------- Информация ---------- */
--color-info-text: #1C54A8; /* info-600 */
--color-info-bg: #EAF2FD; /* info-50 */
--color-info-border: #9CC1F4; /* info-200 */
--color-info-bg-hover: #CCDFFA; /* info-100 — наведение на синюю ссылку-кнопку (дополнение) */
--color-info-title: #0A1D3A; /* info-900 */
--color-info-body: #102F5E; /* info-800 */
/* ---------- Своя запись (дополнение) ---------- */
/* «ваше время» в календаре и слотах, бейдж «Предстоит», плитка даты будущей записи */
--color-own-bg: #EEEFFD; /* secondary-50 */
--color-own-border: #312F9A; /* secondary-700 */
--color-own-text: #262476; /* secondary-800 */
--color-own-badge-border: #BABDF6; /* secondary-200 — рамка бейджа «Предстоит» */
/* ---------- Теги и аватары (дополнение) ---------- */
--color-tag-bg: #DCDEFB; /* secondary-100 — «Оплата на месте», адрес */
--color-tag-text: #262476; /* secondary-800 */
--color-avatar-bg: #DCDEFB; /* secondary-100 — аватар с инициалами, один цвет для всех */
--color-avatar-text: #262476; /* secondary-800 */
/* ---------- Шрифты ---------- */
/* Подключаются с Google Fonts (решение 2026-10-18) — в каждой страницы до tokens.css:
*/
--font-display: 'Oswald', 'Arial Narrow', sans-serif; /* заголовки, hero, крупные цифры; веса 600, 700 */
--font-text: 'Onest', system-ui, sans-serif; /* текст, интерфейс, формы; веса 400–800, цифры табличные (font-variant-numeric: tabular-nums) */
/* ---------- Размеры текста (desktop; мобильные значения — в @media ниже) ---------- */
/* display-xl — Oswald 700, капс. Высота строки 1, как на лендинге прототипа: при 0.88 из дизайн-системы
хвосты кириллических «У», «Д», «Щ», «Ц» задевают следующую строку (решение 2026-10-18) */
--font-size-display-xl: 128px; --line-height-display-xl: 1; --font-weight-display-xl: 700; --letter-spacing-display-xl: -0.01em;
/* display-l — Oswald 700, капс */
--font-size-display-l: 88px; --line-height-display-l: 0.92; --font-weight-display-l: 700;
/* h1 — Oswald 600, капс */
--font-size-h1: 56px; --line-height-h1: 1; --font-weight-h1: 600;
/* h2 — Oswald 600 */
--font-size-h2: 40px; --line-height-h2: 1.1; --font-weight-h2: 600;
/* h3 — Onest 700 */
--font-size-h3: 24px; --line-height-h3: 1.25; --font-weight-h3: 700; --letter-spacing-h3: -0.005em;
/* h4 — Onest 700 */
--font-size-h4: 18px; --line-height-h4: 1.35; --font-weight-h4: 700;
/* body-l, body-m, body-s — Onest 400 */
--font-size-body-l: 18px; --line-height-body-l: 1.55; --font-weight-body: 400;
--font-size-body-m: 16px; --line-height-body-m: 1.5;
--font-size-body-s: 14px; --line-height-body-s: 1.45;
/* caption — Onest 500, цвет --color-text-secondary */
--font-size-caption: 12px; --line-height-caption: 1.35; --font-weight-caption: 500;
/* overline — Onest 700, капс */
--font-size-overline: 12px; --line-height-overline: 1.2; --font-weight-overline: 700; --letter-spacing-overline: 0.3em;
/* label — Onest 600 */
--font-size-label: 14px; --line-height-label: 1.3; --font-weight-label: 600;
/* button — Onest 700, капс */
--font-size-button: 14px; --line-height-button: 1; --font-weight-button: 700; --letter-spacing-button: 0.06em;
--font-size-button-l: 16px; /* кнопка размера L */
/* дополнения */
/* helper — подсказки и ошибки под полями, вторые строки в карточках; Onest 500 (в карточках 400, в акцентах 600) */
--font-size-helper: 13px; --line-height-helper: 1.35; --font-weight-helper: 500;
/* nav — ссылки меню в шапке, мелкие кнопки; Onest 700, капс */
--font-size-nav: 13px; --line-height-nav: 1; --font-weight-nav: 700; --letter-spacing-nav: 0.14em;
/* title-s — заголовки сообщений, имена в карточках; Onest 700 */
--font-size-title-s: 15px; --line-height-title-s: 1.35; --font-weight-title-s: 700;
/* date-number — число в плитке даты 64×68; Oswald 700 */
--font-size-date-number: 30px; --line-height-date-number: 1; --font-weight-date-number: 700;
/* modal-title — заголовок модального окна; Oswald 600 */
--font-size-modal-title: 28px; --line-height-modal-title: 1.15; --font-weight-modal-title: 600;
/* однострочные подписи, цифры, бейджи — высота строки 1, как у button, nav, h1 (дополнение) */
--line-height-single: 1;
/* ---------- Ссылки ---------- */
/* подчёркивание ссылок — как a{} на странице дизайн-системы (дополнение) */
--link-underline-thickness: 1.5px;
--link-underline-offset: 3px;
/* ---------- Отступы (база 4px; назначения по смыслу в дизайн-системе нет) ---------- */
--space-0-5: 2px;
--space-1: 4px;
--space-1-5: 6px; /* дополнение — иконка↔текст, подпись↔поле */
--space-2: 8px;
--space-2-5: 10px; /* дополнение — отступы бейджей и тегов */
--space-3: 12px;
--space-3-5: 14px; /* дополнение — отступы сообщений, кнопка S */
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px; /* дополнение — кнопка L, поля блоков */
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-14: 56px; /* дополнение — вертикальные поля страниц */
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* ---------- Скругления ---------- */
--radius-badge: 6px; /* xs — бейджи, чекбоксы */
--radius-cell: 10px; /* sm — тултипы, ячейки календаря */
--radius-field: 12px; /* md — поля ввода, слоты, логотип */
--radius-block: 16px; /* дополнение — сообщения, меню, плитки иконок и дат */
--radius-panel: 20px; /* lg — вложенные панели, строки списка */
--radius-card: 24px; /* дополнение — карточки (в дизайн-системе 20px, на экранах — 24px) */
--radius-modal: 28px; /* xl — шапка, модалки */
--radius-hero: 40px; /* 2xl — hero-панели */
--radius-pill: 9999px; /* full — кнопки, чипы, аватары */
/* ---------- Тени (жёсткие — без размытия) ---------- */
--shadow-chip: 2px 2px 0 #1E1914; /* hard-sm — чипы, ячейки, мелкие стикеры */
--shadow-button-pressed: 1px 1px 0 #1E1914; /* дополнение — нажатая кнопка */
--shadow-button: 3px 3px 0 #1E1914; /* дополнение — кнопка в обычном состоянии */
--shadow-raised: 4px 4px 0 #1E1914; /* hard-md — hover кнопок, выбранные карточки */
--shadow-highlight: 8px 8px 0 #1E1914; /* hard-lg — карточка успеха, hero-стикеры */
--shadow-popover: 0 8px 24px rgba(30,25,20,.14), 0 2px 6px rgba(30,25,20,.08); /* pop — выпадающие списки, тултипы, тосты */
--shadow-modal: 0 24px 64px rgba(30,25,20,.22), 0 4px 12px rgba(30,25,20,.1); /* modal — модальные окна */
/* ---------- Кольцо фокуса ---------- */
/* Рисуется обводкой, а не тенью (решение 2026-10-18): не конфликтует с тенями кнопок, видно в режиме
высокой контрастности. Только при управлении с клавиатуры:
:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); }
Кнопки — outline-offset: var(--focus-ring-offset-button); на коралле — цвет --color-focus-ring-on-brand. */
--focus-ring-width: 2px; /* focus-ring — 2px */
--focus-ring-offset: 2px; /* зазор 2px, как кремовое кольцо в дизайн-системе */
--focus-ring-offset-button: 3px; /* дополнение — у кнопок зазор 3px, чтобы кольцо не наезжало на тень */
/* ---------- Толщины рамок ---------- */
--border-width-divider: 1px; /* hairline — разделители таблиц */
--border-width-field: 1.5px; /* default — поля, карточки, слоты */
--border-width-button: 2px; /* strong — кнопки, выбранные элементы; рамка поля с ошибкой */
--border-width-ink: 2.5px; /* ink — иллюстрации, стикеры */
/* ---------- Анимации ---------- */
--duration-instant: 80ms; /* цвет, чекбокс, переключатель */
--duration-fast: 140ms; /* hover и press кнопок, слотов, карточек */
--duration-base: 220ms; /* табы, тосты, раскрытие */
--duration-slow: 360ms; /* модальное окно, экран успеха */
--ease-standard: cubic-bezier(.2, 0, 0, 1);
--ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* hover/press */
--ease-exit: cubic-bezier(.4, 0, 1, 1);
--duration-skeleton: 1.4s; /* дополнение — полоса заглушки загрузки (ss-shimmer в дизайн-системе) */
/* сдвиг при наведении и нажатии: translate(X, X) (дополнение — значения состояний в дизайн-системе) */
--shift-hover: -1px; /* кнопки, слоты — «приподнимается» */
--shift-hover-card: -2px; /* карточки */
--shift-pressed: 2px; /* кнопки — «вдавливается» */
--scale-pressed: .97; /* дополнение — «пилюля» с плиткой при нажатии сжимается (прототип: 7 раз, дизайн-система: 1) */
/* ---------- Размеры иконок ----------
Дизайн-система: «Размеры 16 / 20 / 24». 14 и 18 она сама и прототип используют часто (39 и 32 раза, 34 и 89) —
добавлены; 22 (9 раз) заменено на 24. Иконки внутри иллюстраций — часть иллюстрации, не токен. */
--icon-size-xs: 14px; /* дополнение — бейджи, строки с длительностью, счётчики */
--icon-size-s: 16px; /* чипы, контакты, галочки в слотах и шагах */
--icon-size-m: 18px; /* дополнение — кнопки и ссылки с текстом 13–14px */
--icon-size-l: 20px; /* по умолчанию — плитки 44×44, сообщения */
--icon-size-xl: 24px; /* крупные плитки 52×52 */
/* ---------- Размеры элементов управления (дополнение: «Кнопки · Размеры» в дизайн-системе) ---------- */
--control-height-s: 36px; /* S · 36 */
--control-height-m: 44px; /* M · 44 — и минимальная зона нажатия */
--control-height-l: 56px; /* L · 56 */
--control-height-chip: 40px; /* чип-фильтр — в дизайн-системе 40, не кнопка S */
--control-height-field: 48px; /* дополнение — поле ввода (дизайн-система: 20 раз) и кнопка формы во всю ширину (экраны входа: 12 раз) */
--size-icon-button: 40px; /* дополнение — кнопка-иконка в поле: «показать пароль» */
--size-checkbox: 24px; /* дополнение — чекбокс */
/* ---------- Размеры элементов (дополнение: docs/tokens-audit.md, раздел 6) ---------- */
--size-icon-tile: 44px; /* круг или плитка с иконкой рядом с текстом */
--size-pill-action: 52px; /* «пилюля» с жёлтой плиткой: высота и плитка 52×52 */
--size-marker: 28px; /* кружок с цифрой или галочкой */
--size-progress: 6px; /* высота полосы шага */
--size-badge: 26px; /* высота бейджа и тега */
--size-slot: 60px; /* высота слота времени */
--size-date-tile-w: 64px; /* плитка даты: число над месяцем */
--size-date-tile-h: 68px;
--size-avatar: 40px; /* аватар с инициалами в списках и карточках */
--size-avatar-s: 36px; /* аватар в шапке */
--measure-lead: 520px; /* максимальная ширина вводного абзаца */
/* ---------- Слои (дополнение: в дизайн-системе слоёв нет; порядок — по прототипу) ---------- */
--layer-header: 10; /* закреплённая шапка — над содержимым страницы */
--layer-popover: 20; /* выпадающие меню и списки — над шапкой */
/* ---------- Сетка (дополнение: Grid в tokens.css дизайн-системы) ---------- */
--container-max: 1280px;
/* Границы экранов — для справки: в @media переменные не работают, там пишутся числа.
Телефон — до 767px, планшет — 768–1023px, desktop — от 1024px. */
--bp-sm: 390px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1440px;
}
/* Мобильные размеры текста: до 768px (md в дизайн-системе). Компоненты используют одни и те же
переменные и про ширину экрана не знают. Планшет получает размеры desktop — отдельных в дизайн-системе нет. */
@media (max-width: 767px) {
:root {
--font-size-display-xl: 64px; --line-height-display-xl: 1;
--font-size-display-l: 48px; --line-height-display-l: 0.95;
--font-size-h1: 36px; --line-height-h1: 1.05;
--font-size-h2: 28px; --line-height-h2: 1.15;
--font-size-h3: 20px; --line-height-h3: 1.3;
--font-size-h4: 17px;
--font-size-body-l: 17px; --line-height-body-l: 1.5;
--font-size-overline: 11px;
}
}
/* При prefers-reduced-motion длительности → 0, остаётся только смена цвета */
@media (prefers-reduced-motion: reduce) {
:root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}