/* 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; /* Контур полей и кнопок — нетекстовый контраст не ниже 3:1 к фонам (WCAG 2.1, 1.4.11; владелец 08.10.2026). Разделители и декор остаются мягкими: --line, --line-strong. */ --color-line-control: #82879B; --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-hover-line: #A9AEBB; /* рамка поля при наведении (OTVET-polya, 02.10) */ /* ассистент noneAI — только для него (ответ Claude Design 13.10, задача 2, семейство А) */ --color-ai: #6A3DC0; --color-on-ai: #FFFFFF; --color-ai-soft: #F4F0FC; --color-ai-line: #D6C8F2; 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-line-control: #6A7090; --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-hover-line: #5E6378; --color-ai: #C3A8F5; --color-on-ai: #1B1530; --color-ai-soft: #251E3C; --color-ai-line: #4A3D73; 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-control); --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; /* ПОЛЕ ВВОДА — ЕДИНЫЙ ВИД (ответ Claude Design на опись полей, 02.10.2026, `.claude/dizayn-polya/otvet/OTVET-polya.md`). Владелец: «совсем некрасиво». Подпись · ввод · строка под полем; ширина ввода по смыслу, а не по колонке (дата 152, сумма 208, % 96 …) — обход нашёл «Ставка НДС, %» шириной 1082 px. */ --pole-h: var(--control-md); --setka-n: 1; /* число колонок .setka; задаёт модификатор setka--2/3/4 */ --pole-pad-x: var(--space-3); --pole-gap-label: var(--space-1); --pole-gap-msg: var(--space-1); --pole-ryad-gap: var(--space-4); --pole-kol-gap: var(--space-4); --pole-msg-min: 16px; --pole-type-label: var(--type-label); --pole-type-body: var(--type-body); --pole-type-caption: var(--type-caption); /* Рамка телефона на иллюстрациях витрины v3 (Z-335): это картинка устройства, а не элемент интерфейса, поэтому не 6 px шкалы. */ --radius-telefon: 36px; /* Скругления витрины v3 по макету Claude Design 31.10 (владелец 31.10: «точь в точь»): карточки 20, блоки 16–18, кнопки 12, мелочь 8–10, тёмный блок «Демо» 32. Только витрина — кабинет и панель остаются на 6 px. */ --radius-vitrina-xs: 8px; --radius-vitrina-seg: 9px; --radius-vitrina-s: 10px; --radius-vitrina-m: 12px; --radius-vitrina-ml: 14px; --radius-vitrina-l: 16px; --radius-vitrina-lx: 18px; --radius-vitrina-xl: 20px; --radius-vitrina-xxl: 22px; --radius-vitrina-blok: 32px; --radius-vitrina-ekran: 29px; --radius-vitrina-telefon: 38px; --radius-vitrina-telefon-ekran: 31px; --radius-check: 4px; /* флажок 16 px и переключатель: 6 px на 16 px читается кругом */ --radius-metka: 2px; /* маркер строки списка 6 px (макет jobs v1, «Объекты» компании): 4 px на 6 px — уже кружок */ --w-pct: 96px; --w-days: 96px; --w-qty: 144px; --w-date: 152px; --w-datetime: 208px; /* дата и время: «03.10.2026, 14:30» и значок */ --w-bin: 176px; --w-phone: 192px; --w-money: 208px; --w-code: 288px; --w-short: 320px; --w-hint-text: 400px; /* колонка пояснения в строке настроек */ /* ДВИЖЕНИЕ — ТОКЕНЫ MOTION.md §2 (27.09.2026). Литерал длительности в слое v2 — ошибка ревью (MOTION §7 п. 1); сторож — DvizhenieTokenamiTest. Потолок — 240 мс, выход — примерно 70 % входа (MOTION §1 п. 2). */ --dur-0: 0ms; /* фокус, текст, числа, ошибка */ --dur-1: 80ms; /* hover, нажатие, подсветка строки, подсказка */ --dur-2: 140ms; /* меню, выпадающий, сообщение, «Выбрано N» */ --dur-3: 200ms; /* палитра, модал, сайдбар, группа меню, вкладка */ --dur-4: 240ms; /* шторка и меню на телефоне, шаг прогресса */ --dur-2-out: 100ms; /* выходы — по MOTION §2: 100 / 120 / 170 */ --dur-3-out: 120ms; --dur-4-out: 170ms; /* Индикаторы работы — не переход, а информация (MOTION §6: продолжают двигаться и при reduce). Вращение — MOTION §3 («вращение 800 мс linear»); цикл — бегущая полоса реестра и точки «печатает…». */ --dur-krug: 800ms; --dur-cikl: 1200ms; /* Курсор живого показа справки — S22 §5 (600 мс, --ease-move). Не переход интерфейса, а демонстрация шага: потолок 240 мс к нему не относится. */ --dur-pokaz: 600ms; --ease-out: cubic-bezier(.2, .8, .2, 1); /* вход */ --ease-in: cubic-bezier(.4, 0, 1, 1); /* выход */ --ease-move: cubic-bezier(.4, 0, .2, 1); /* перемещение */ --ease-sheet: cubic-bezier(.32, .72, 0, 1); /* шторка; пружина без перелёта */ --ease-standard: var(--ease-move); /* прежнее имя, под ним ходят полосы Ганта */ } /* prefers-reduced-motion: reduce — ОДНИМ БЛОКОМ (MOTION §6). Сдвиги, масштаб и ширина — мгновенно; смена прозрачности остаётся, не дольше 80 мс. Индикатор загрузки и прогресс продолжают двигаться: это информация, а не украшение. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-property: opacity, background-color, color, border-color !important; transition-duration: var(--dur-1) !important; animation: none !important; } .progress > i, .forma-koltso, .registry-scroll.is-obnovlyaetsya::before { animation: revert !important; } .progress > i { transition: width var(--dur-4) linear !important; } } /* публичный слой: всегда светлый, крупнее контролы и заголовки */ [data-layer="public"] { color-scheme: light; --control-md: 40px; --control-lg: 48px; /* поле в публичном слое крупнее: подпись 14/20, ввод 16/24, флажок 20 */ --check: 20px; --pole-pad-x: var(--space-4); --pole-gap-label: var(--space-2); --pole-ryad-gap: var(--space-6); --pole-msg-min: 18px; --pole-type-label: 500 14px/20px var(--font); --pole-type-body: 400 16px/24px var(--font); --pole-type-caption: 400 13px/18px var(--font); /* ЗАГОЛОВОК ПЕРВОГО ЭКРАНА — ТРИ СТУПЕНИ, ПО МАКЕТУ (§S14 п. 2). Передача дизайнера (`handoff/tokens.css`) давала 52/60 и 32/40 без средней ступени, макет — 56/64, 44/52 (760–1023) и 34/42. Два документа автора спорили между собой; владелец 27.09 выбрал макет. */ --type-hero: 600 56px/64px var(--font); /* средне 44/52, телефон 34/42 */ --tracking-hero: -0.025em; --type-section: 600 40px/48px var(--font); /* телефон: 28px/36px */ --type-lead: 400 18px/28px var(--font); /* телефон: 16px/26px */ --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 34px/42px var(--font); --type-section: 600 28px/36px var(--font); --type-lead: 400 16px/26px var(--font); --section-pad: 48px; --public-nav-h: 60px; } } /* «СРЕДНЕ» — 760–1023 (§S14 п. 2). Своя ступень только у заголовка первого экрана: секции и вводный абзац на средней ширине остаются крупными, так их задаёт макет. */ @media (min-width: 760px) and (max-width: 1023.98px) { [data-layer="public"] { --type-hero: 600 44px/52px var(--font); } } /* Кабинет остаётся на своём пороге: 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); }