/* ============================================================================ R31 «Рассвет» · ТОКЕНЫ ---------------------------------------------------------------------------- Первый подключаемый файл. Здесь только `:root` и переопределения шкалы в `@media` — ни одного правила для элемента или класса. ⚠️ ТОКЕНЫ ИМЕНУЮТСЯ ПО РОЛИ, А НЕ ПО ЦВЕТУ (ТЗ-R31 §1). `--ink`, а не `--dark-purple`. Это не косметика: тёмная тема, когда её закажут, станет одним блоком с переопределением значений — компоненты не переписываются. Литеральный hex в файле компонента = дефект, ловится тестом. ========================================================================== */ :root { /* --- Поверхности ------------------------------------------------------- */ --bg: #FAF7F2; /* тёплый почти-белый, фон страницы */ --bg-sunk: #F2EEE7; /* вложенные плашки внутри белых карточек */ --surface: #FFFFFF; /* карточка контента, длинный текст */ --surface-soft: rgba(255,255,255,.86); /* карточка поверх градиента */ --surface-glass: rgba(255,255,255,.66); /* хром интерфейса, см. §1.6 */ /* --- Чернила ------------------------------------------------------------ Не чистый чёрный: тёплый графит-слива держит контраст и снимает жёсткость, ради которой всё направление и затевалось. */ --ink: #2B2440; /* заголовки, основной текст */ --ink-body: #3A3448; /* длинные абзацы (мягче на светлом) */ --ink-muted: #5C5468; /* подписи, второстепенное */ --ink-faint: #776D83; /* надзаголовки, мета — только ≥14px */ --ink-disabled: #938CA0; /* плейсхолдеры и disabled, и больше нигде */ /* --- Акцент ------------------------------------------------------------- ⚠️ ДВА РАЗНЫХ ЦВЕТА, И ЭТО ГЛАВНОЕ ПРАВИЛО ПАЛИТРЫ (ТЗ-R31 §1.1). `--accent` — рассветный коралл, он красивый и он НЕ ЧИТАЕТСЯ: с белым даёт 2,55:1. Под текстом любого кегля он запрещён и живёт только в градиентах, точках, обводках и декоративной геометрии. Любое действие — кнопка, ссылка-акцент, активное состояние — берёт `--accent-strong`. Проверяется тестом test_design_tokens.py. */ --accent: #E8896B; --accent-strong: #A8452A; --accent-wash: rgba(168,69,42,.10); /* подложка бейджа, круг замка */ /* Наведение и нажатие на действии: акцент, затемнённый на ~6%. Отдельным токеном, а не числом в правиле, — иначе правка палитры чинит одну кнопку и оставляет вторую прежнего цвета. */ --accent-press: #943D25; /* --- Границы ----------------------------------------------------------- */ --line: rgba(43,36,64,.10); --line-strong: rgba(43,36,64,.18); --line-glass: rgba(255,255,255,.92); /* --- Семантика --------------------------------------------------------- */ --ok: #2F6B4F; --warn: #8A6210; --error: #A32C2C; --error-wash: rgba(163,44,44,.08); /* --- Атмосфера (§1.7) --------------------------------------------------- Значения для radial-градиентов. Картинок в атмосфере нет вообще: нулевой вес, работает в SSR, переносится в PDF и OG-рендер. */ --grad-peach: rgba(232,137,107,.30); --grad-lavender: rgba(190,170,225,.28); --grad-amber: rgba(255,214,170,.32); /* --- Типографика -------------------------------------------------------- Unbounded — ТОЛЬКО заголовки и крупные числа. Onest — весь остальной текст и UI. Заголовок отличается от текста кеглем, а не жирностью. */ --font-display: 'Unbounded', ui-sans-serif, system-ui, sans-serif; --font-text: 'Onest', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* Шкала мобильная; десктопная — ниже, в @media (min-width: 900px). ⚠️ --fs-body НИКОГДА меньше 16px: ниже этого iOS зумит поле при фокусе, а у нас блоки отчёта по 900–1200 знаков. */ --fs-hero: 31px; --fs-h1: 26px; --fs-h2: 22px; --fs-h3: 18px; --fs-lead: 17px; --fs-body: 17px; --fs-ui: 15px; --fs-meta: 14px; --fs-micro: 13px; /* нижняя граница для любого текста, кроме знака 18+ */ --lh-tight: 1.1; /* hero, h1 */ --lh-head: 1.25; /* h2, h3 */ --lh-body: 1.66; /* абзацы 900–1200 знаков */ --lh-ui: 1.5; --tracking-hero: -0.02em; --tracking-caps: 0.12em; /* надзаголовки uppercase */ /* --- Отступы, радиусы, тени --------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --r-field: 12px; --r-card: 18px; --r-panel: 20px; --r-pill: 999px; --shadow-card: 0 1px 3px rgba(43,36,64,.05), 0 10px 26px rgba(43,36,64,.06); --shadow-glass: 0 2px 5px rgba(43,36,64,.06), 0 16px 40px rgba(43,36,64,.12); --shadow-cta: 0 6px 16px rgba(168,69,42,.28); /* ⚠️ --tap — инвариант проекта, а не пожелание: 44×44 CSS-px минимум на всё нажимаемое, включая узлы схемы и кнопки бота (ТЗ-R31 §10 п. 12). */ --tap: 44px; --container: 720px; /* текстовая колонка: 60–70 знаков в строке */ --container-wide: 800px; /* SEO-страница с таблицами */ --container-narrow: 520px;/* воронка квиза: один вопрос на экран */ /* Оболочка страницы с двумя колонками. ⚠️ ЭТО НЕ ШИРИНА ТЕКСТА. Текст внутри остаётся 60–70 знаков в строке; шире становится только рамка, чтобы во вторую колонку было куда уйти схеме и служебному блоку. Без неё правила `@media (min-width:1100px)` считались бы внутри 720px и давали текстовую колонку в 124 пикселя — замер в браузере. */ --container-shell: 1180px; --gutter: 16px; /* --- Состояния и движение ----------------------------------------------- */ --focus-ring: 0 0 0 3px rgba(168,69,42,.35); --t-fast: 150ms; --t-slow: 250ms; --ease: cubic-bezier(.2,.7,.3,1); } /* ⚠️ МЕДИА-ТОЧЕК РОВНО ЧЕТЫРЕ: 600, 900, 1100, 1400 (ТЗ-R31 §3). До редизайна на весь сайт была одна — на 600px, при рабочем диапазоне 320–1440. */ @media (min-width: 600px) { :root { --gutter: 24px; } } @media (min-width: 1000px) { :root { --gutter: 72px; } } @media (min-width: 900px) { :root { --fs-hero: 52px; --fs-h1: 38px; --fs-h2: 26px; --fs-h3: 19px; --fs-lead: 19px; --fs-body: 18px; } } /* ============================================================================ ТЁМНАЯ ТЕМА — В v1 ЕЁ НЕТ, И ЭТО РЕШЕНИЕ, А НЕ НЕДОДЕЛКА. ---------------------------------------------------------------------------- Светлое — суть отстройки: вся ниша тёмно-мистическая, светлый экран опознаётся в выдаче до чтения первого слова. Вторая тема удвоила бы работу по контрасту и стеклу при нулевом замеренном спросе — трафика ещё нет. Структурно всё готово: цвета идут через семантические токены, литеральных hex в компонентах нет. Когда тему закажут, добавляется ОДИН блок ниже — компоненты не трогаются. @media (prefers-color-scheme: dark) { :root { --bg: …; --surface: …; --ink: …; --line: …; } } Запрещено до принятия решения владельцем: `color-scheme: light dark`, дублирование палитры, любые `dark:`-варианты правил. ========================================================================== */