/* none — токены. Источник: BRIEF.md §1–5, MOTION.md. Редакция 1, 25.09.2026. Два слоя: [data-layer="cabinet"] (кабинет, портал соисполнителя, панель вендора — три темы) и [data-layer="public"] (лендинг, публичные, вход, jobs, ошибки — всегда светлая). Тема: data-theme="light|dark" на , пишется всегда явно. ИМЕНА ОТЛИЧАЮТСЯ ОТ ПЕРЕДАЧИ ДИЗАЙНЕРА В ТРЁХ МЕСТАХ — и это не вкус. Старая разметка уже зовёт --text-body (размер, 15px), --border (цвет) и --focus-ring (тень). Имена дизайнера с другим СМЫСЛОМ (шрифт целиком, граница целиком, обводка) сделали бы старые объявления недействительными, и браузер выбросил бы их молча. Поэтому: шкала шрифта — --type-*, граница — --border-line, обводка фокуса — --focus-outline. Сторож V2TokenyTest сверяет значения с handoff/tokens.css по смыслу. */ :root, [data-theme="light"] { /* поверхности */ --color-bg-page: #F6F7F9; --color-surface: #FFFFFF; --color-surface-2: #F0F1F4; --color-line: #E4E6EB; --color-line-strong: #CDD1DA; --color-row-hover: #F7F8FA; /* текст */ --color-text: #14162B; --color-text-2: #464A60; --color-text-3: #656A7F; --color-text-disabled: #A0A3B2; /* акцент — единственный */ --color-accent: #131747; --color-accent-hover: #252A6B; --color-accent-press: #0A0D2E; --color-on-accent: #FFFFFF; --color-accent-soft: #ECEEF8; /* статусы — только бейджи, плашки, просрочка */ --color-danger: #C42F37; --color-danger-soft: #FCEBEC; --color-success: #1B7A4A; --color-success-soft: #E5F4EB; --color-warning: #935700; --color-warning-soft: #FCF1DC; --color-info: #2658A6; --color-info-soft: #E7EEFA; --color-neutral-soft: #EEF0F3; /* марка */ --color-brand-red: #E20613; --shadow-pop: 0 0 0 1px var(--color-line), 0 4px 12px rgb(20 22 43 / .08); --shadow-modal: 0 0 0 1px var(--color-line), 0 12px 32px rgb(20 22 43 / .14); --shadow-float: 0 4px 12px rgb(20 22 43 / .18); --scrim: rgb(20 22 43 / .32); color-scheme: light; } [data-theme="dark"] { --color-bg-page: #0E0F1B; --color-surface: #15172A; --color-surface-2: #1C1F34; --color-line: #262A41; --color-line-strong: #3A3F5D; --color-row-hover: #1A1D31; --color-text: #E8E9F2; --color-text-2: #B3B6C9; --color-text-3: #8D91A8; --color-text-disabled: #585C77; --color-accent: #B9BDF2; --color-accent-hover: #CDD0F7; --color-accent-press: #A3A8EC; --color-on-accent: #131747; --color-accent-soft: #252950; --color-danger: #F07A80; --color-danger-soft: #3A1C23; --color-success: #62C792; --color-success-soft: #16332A; --color-warning: #E6AE52; --color-warning-soft: #392B14; --color-info: #88AAEE; --color-info-soft: #1A2742; --color-neutral-soft: #24273C; --shadow-pop: 0 0 0 1px var(--color-line), 0 4px 12px rgb(0 0 0 / .4); --shadow-modal: 0 0 0 1px var(--color-line), 0 12px 32px rgb(0 0 0 / .5); --shadow-float: 0 4px 12px rgb(0 0 0 / .5); --scrim: rgb(0 0 0 / .56); color-scheme: dark; } :root { /* шрифт — только Montserrat */ --font: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif; /* Моноширинного шрифта нет: правило проекта «Montserrat везде без исключения». Клавиши и коды в вики — Montserrat с цифрами одной ширины (font-variant-numeric: tabular-nums). */ --font-mono: var(--font); /* шкала: размер / интерлиньяж / вес */ --type-display: 600 28px/36px var(--font); /* letter-spacing: -0.01em */ --type-h1: 600 20px/28px var(--font); --type-h2: 600 16px/24px var(--font); --type-h3: 600 14px/20px var(--font); --type-body: 400 14px/20px var(--font); --type-nav: 500 13px/20px var(--font); /* кнопка md — 600 */ --type-cell: 400 13px/20px var(--font); --type-num: 500 13px/20px var(--font); /* + tabular-nums */ --type-label: 500 12px/16px var(--font); /* кнопка sm — 600 */ --type-caption: 400 12px/16px var(--font); --type-micro: 600 11px/16px var(--font); /* отступы, шаг 4 */ --space-0-5: 2px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; /* только публичные */ /* радиус — одно значение */ --radius: 6px; --radius-pill: 999px; --radius-round: 50%; --border-line: 1px solid var(--color-line); --border-control: 1px solid var(--color-line-strong); --focus-outline: 2px solid var(--color-accent); --focus-offset: 2px; /* высоты */ --control-sm: 28px; --control-md: 32px; --control-lg: 40px; --touch: 44px; --row-h: 36px; --topbar-h: 48px; --sidebar-w: 260px; --sidebar-w-collapsed: 80px; --form-footer-h: 56px; --check: 16px; /* движение (MOTION.md) */ --motion-instant: 0ms; --motion-fast: 120ms; /* наведение, нажатие, цвет */ --motion-base: 160ms; /* поповер, меню, палитра */ --motion-slow: 200ms; /* сайдбар, шторка, модал */ --motion-long: 400ms; /* сдвиг полос Ганта, живые показы */ --ease-out: cubic-bezier(.2, 0, 0, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-standard: cubic-bezier(.4, 0, .2, 1); } @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; --motion-long: 0ms; } } /* публичный слой: всегда светлый, крупнее контролы и заголовки */ [data-layer="public"] { color-scheme: light; --control-md: 40px; --control-lg: 48px; --type-hero: 600 52px/60px var(--font); /* телефон: 32px/40px */ --type-section: 600 40px/48px var(--font); /* телефон: 28px/36px */ --type-lead: 400 18px/28px var(--font); /* телефон: 16px/24px */ --type-read: 400 16px/26px var(--font); /* правовые, вики — строка до 72 знаков */ /* АМБРОВЫЙ ДЛЯ ТЁМНЫХ СЕКЦИЙ ВИТРИНЫ. Витрина всегда светлая (§P0), но внутри неё есть тёмные блоки. `--color-warning` (#935700) задан BRIEF для СВЕТЛОГО фона и на тёмном даёт 1,93–2,90. Значение взято из тёмной колонки BRIEF §1, оно же стоит ниже под `[data-theme="dark"]`: цвет не выдуман, а назван. ГДЕ ИМЕННО — ЗДЕСЬ НЕ ПЕРЕЧИСЛЯЕТСЯ. Свой первый список я написала по памяти и ошиблась: первого экрана в нём быть не должно, метки «скоро» там нет. Места считает `AmbrovyyNaTyomnomTest` по отрисованным страницам, и он же краснеет, когда список расходится с разметкой. */ --color-warning-on-dark: #E6AE52; /* ЗЕЛЁНЫЙ ДЛЯ ТЁМНЫХ СЕКЦИЙ — по той же причине и из той же колонки. `--color-success` (#1B7A4A) задан для светлого фона; на навигационно-синем тёмно-зелёный по тёмно-синему не читается. Значение — тёмная колонка BRIEF §1, оно же стоит под `[data-theme="dark"]`. */ --color-success-on-dark: #62C792; --section-pad: 96px; /* телефон: 48px */ --public-nav-h: 68px; /* телефон: 60px (§P0) */ } /* ПОРОГ ПУБЛИЧНОГО СЛОЯ — «МЕНЬШЕ 760», И ОН ОТДЕЛЁН ОТ КАБИНЕТНОГО. §P0 (SPEC.md:1424): «шапка 68 (60); телефон — ширина меньше 760». Стояло 719px и высоты 64/56 — расхождение по трём числам сразу, и ни одно не проверялось: перебор по набору дал ноль совпадений и на `--public-nav-h`, и на `719`, и на `760`. БЛОКИ РАЗДЕЛЕНЫ НАРОЧНО. Прежде публичные токены и кабинетный `--type-body` жили в ОДНОМ медиа-запросе. Сдвинуть порог целиком значило бы заодно сдвинуть кабинет: правка выглядела бы как «поменял одно число», а поехали бы два слоя. Видно это только между 720 и 759: на 1440 и 390 оба порога дают одинаковый ответ, и разницу глазами не поймать. Проверять там. */ @media (max-width: 759.98px) { [data-layer="public"] { --type-hero: 600 32px/40px var(--font); --type-section: 600 28px/36px var(--font); --type-lead: 400 16px/24px var(--font); --section-pad: 48px; --public-nav-h: 60px; } } /* Кабинет остаётся на своём пороге: 760 — решение про ВИТРИНУ. */ @media (max-width: 719px) { [data-layer="cabinet"] { --type-body: 400 16px/22px var(--font); } } :focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }