/* ============================================================ tokens.css - дизайн-система сайта услуг Виталия Волкова Светлая тема. B2B: дорого, но честно. Один акцент - глубокий синий. Без свечений, без градиентного текста, без бесконечных анимаций, без пружинящих кривых. ============================================================ */ :root { /* ---------- 1. ПАЛИТРА ---------------------------------- Нейтраль холодная, один акцент. Смешивать тёплую и холодную нейтраль в проекте запрещено. Контраст считан по WCAG 2.1 (формула относительной яркости), значения в комментариях - фактические. Минимум для текста - 4,5:1, все пары ниже проходят. --------------------------------------------------------- */ /* Фоны и поверхности */ --c-bg: #F5F6F7; /* фон страницы */ --c-surface: #FFFFFF; /* карточка, таблица, поле формы */ --c-surface-alt: #EDEFF2; /* чередующаяся секция, шапка таблицы */ /* Текст */ --c-text: #14181F; /* основной на --c-bg 16,44:1 AAA на --c-surface 17,79:1 AAA на --c-surface-alt 15,45:1 AAA */ --c-text-muted: #525C68; /* приглушённый: подписи, метки, сноски на --c-bg 6,28:1 AAA на --c-surface 6,80:1 AAA на --c-surface-alt 5,90:1 AAA (для мелкого 14px это уже AA+) */ /* Акцент - глубокий синий. Насыщенность ниже 80%, без неона. */ --c-accent: #0B4F9E; /* на --c-bg 7,39:1 AAA на --c-surface 8,00:1 AAA на --c-surface-alt 6,94:1 AAA */ --c-accent-hover: #093C79; /* белый текст на нём 10,86:1 AAA */ --c-on-accent: #FFFFFF; /* на --c-accent 8,00:1 AAA */ --c-accent-soft: #E7EEF7; /* подложка выделенного блока; --c-text на ней 16,0:1 AAA */ /* Линии. Не текст - к ним требование 4,5:1 не применяется, для нетекстовых границ ориентир 3:1 против соседней поверхности выполняется у --c-line-strong. */ --c-line: #DFE3E8; /* хайрлайн между блоками */ --c-line-strong: #A8B1BC; /* граница поля ввода, фокус-контур */ /* Служебные цвета статуса. Используются ТОЛЬКО в таблицах и метках, кнопки и ссылки ими не красятся. */ --c-ok: #1F6F43; /* на --c-surface 6,15:1 AAA */ --c-warn: #8A4B12; /* на --c-surface 6,78:1 AAA */ --c-stop: #98301F; /* на --c-surface 7,56:1 AAA */ /* ---------- 2. ТИПОГРАФИКА ------------------------------ PT Serif - только заголовки h1-h3 и крупные цифры. Golos Text - весь остальной текст и весь интерфейс. Шкала 1,20 (малая терция) от базовых 17px. --------------------------------------------------------- */ --font-text: "Golos Text", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-head: "PT Serif", Georgia, "Times New Roman", serif; /* Размеры. clamp() - только на display и h1, остальное фиксировано и переопределяется в медиазапросе. */ --fs-display: clamp(2.125rem, 1.35rem + 3.4vw, 3.5rem); /* 34 → 56 */ --fs-h1: clamp(1.875rem, 1.35rem + 2.3vw, 2.75rem); /* 30 → 44 */ --fs-h2: 1.875rem; /* 30 */ --fs-h3: 1.375rem; /* 22 */ --fs-lead: 1.1875rem; /* 19 - подзаголовок первого экрана */ --fs-body: 1.0625rem; /* 17 - основной */ --fs-sm: 0.9375rem; /* 15 - подписи, поля формы */ --fs-xs: 0.8125rem; /* 13 - метки, сноски, юртекст */ --fs-num: 2.75rem; /* 44 - цифра доказательства */ /* Межстрочные. Заголовки плотнее, текст свободнее. */ --lh-display: 1.12; --lh-head: 1.2; --lh-lead: 1.5; --lh-body: 1.65; --lh-tight: 1.35; /* подписи, ячейки таблицы */ /* Насыщенность */ --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; /* Межбуквенное. Разрядка надзаголовков запрещена - отрицательный трекинг только на крупном кегле. */ --ls-display: -0.02em; --ls-head: -0.01em; --ls-body: 0; /* Мера строки */ --measure: 66ch; --measure-narrow: 54ch; /* ---------- 3. СЕТКА И ОТСТУПЫ -------------------------- Шаг 8px. Значения вне шага не заводить. --------------------------------------------------------- */ --space-1: 0.5rem; /* 8 */ --space-2: 1rem; /* 16 */ --space-3: 1.5rem; /* 24 */ --space-4: 2rem; /* 32 */ --space-5: 2.5rem; /* 40 */ --space-6: 3rem; /* 48 */ --space-7: 3.5rem; /* 56 */ --space-8: 4rem; /* 64 */ --space-10: 5rem; /* 80 */ --space-12: 6rem; /* 96 */ --container: 1200px; /* максимальная ширина контента */ --container-pad: var(--space-3); /* 24 на десктопе */ --container-pad-sm: var(--space-2); /* 16 на мобильном */ --section-y: var(--space-7); /* вертикальный ритм секции */ --section-y-sm: var(--space-6); --grid-gap: var(--space-3); /* ---------- 4. РАДИУСЫ ---------------------------------- Одна шкала на весь сайт: мягкая, 4 / 8 / 12. Кнопки-таблетки и острые углы в одной странице не смешивать. --------------------------------------------------------- */ --r-sm: 4px; /* метка, чекбокс */ --r-md: 8px; /* кнопка, поле ввода */ --r-lg: 12px; /* карточка, таблица, плеер */ /* ---------- 5. ТЕНИ ------------------------------------- Только вертикальное смещение, нулевое горизонтальное. Оттенок тени взят от фона (синевато-серый), чистый чёрный на светлом фоне запрещён. Свечения нет. --------------------------------------------------------- */ --shadow-1: 0 1px 2px rgba(20, 24, 31, 0.06); --shadow-2: 0 2px 6px rgba(20, 24, 31, 0.07); --shadow-3: 0 6px 16px rgba(20, 24, 31, 0.08); /* ---------- 6. ПЕРЕХОДЫ -------------------------------- Только ease-семейство. cubic-bezier с overshoot (пружина, отскок) запрещён. Бесконечных анимаций нет: ни бегущего блика, ни пульсации, ни маркизы. --------------------------------------------------------- */ --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 240ms; --ease: ease; --ease-out: ease-out; --t-fast: var(--dur-fast) var(--ease); --t-base: var(--dur-base) var(--ease); --t-slow: var(--dur-slow) var(--ease-out); /* Контур фокуса - один на весь сайт */ --focus-ring: 2px solid var(--c-accent); --focus-offset: 2px; } /* Мобильная шкала: сбиваем крупные кегли и вертикальный ритм */ @media (max-width: 640px) { :root { --fs-h2: 1.5rem; /* 24 */ --fs-h3: 1.1875rem; /* 19 */ --fs-lead: 1.0625rem; /* 17 */ --fs-num: 2.125rem; /* 34 */ --section-y: var(--space-6); --section-y-sm: var(--space-5); --container-pad: var(--container-pad-sm); } } /* Уважение к системной настройке движения */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; } }