/* Источник: проект Claude Design, tokens/spacing.css. Срез 14 августа 2026. Ритм, контейнер, цели нажатия. Шаг 4. */ :root{ --sc-space-2:2px; --sc-space-4:4px; --sc-space-8:8px; --sc-space-12:12px; --sc-space-16:16px; --sc-space-24:24px; --sc-space-32:32px; --sc-space-48:48px; --sc-space-64:64px; --sc-space-96:96px; --sc-space-128:128px; --sc-space-160:160px; --sc-section-y:clamp(3rem,6vw,5rem); /* Внутри блока 8-12, между блоками 32-36, между разделами 48-64. */ --sc-gap-inside:var(--sc-space-12); --sc-gap-block:var(--sc-space-32); --sc-gap-section:var(--sc-space-64); --sc-container-max:1208px; --sc-container-pad:32px; --sc-container-pad-mobile:20px; /* Псевдонимы кросс-проектного правила «единый контейнер»: хедер = контент = футер. */ --container-max:var(--sc-container-max); --container-pad:var(--sc-container-pad); /* Цель нажатия содержимого. 44px - WCAG 2.2 критерий 2.5.5 Enhanced, уровень AAA. Для содержимого, которое читает клиент, и для всех полей форм держим его. */ --sc-tap-min:44px; --sc-control-h-sm:44px; /* ОБОЛОЧКА ИНСТРУМЕНТА. Верхняя полоса, боковая полоса, органы листов и панелей. Обязательный минимум - критерий 2.5.8 Minimum, уровень AA: 24x24, и он здесь соблюдён с запасом. Минимального кегля в WCAG нет вовсе; 16px нужны ПОЛЯМ ВВОДА на телефоне, иначе iOS зумит страницу, а не органам оболочки. Числа сняты с рабочего кабинета-образца на ширине 1444. */ --sc-ui-h:28px; /* высота органа оболочки */ --sc-ui-icon:20px; /* значок в органе оболочки */ --sc-ui-radius:8px; /* органы оболочки - то же, что --sc-radius-ctl (04.10.2026) */ --sc-ui-gap:4px; --sc-ui-row-h:28px; /* строка навигации */ --sc-ui-group-h:32px; /* заголовок группы в навигации */ --sc-rail-w:240px; /* боковая полоса развёрнута */ --sc-rail-w-min:60px; /* она же свёрнута - число эталона, 29.09.2026 */ --sc-ui-bar-h:44px; /* верхняя полоса */ /* ОРГАН МЕНЬШЕ ЦЕЛИ. Есть места, где РИСУНОК обязан быть меньше 44: капсула лежит на самой картинке и отбирает у неё место, пилюля стоит в плотной шапке высотой 56. Рост при этом уменьшается, а цель нажатия - нет: её добирает невидимое поле ::after. Это способ ВЫПОЛНИТЬ критерий 2.5.5, а не исключение из него. Поле считается из цели, а не вписано числом: сменится --sc-tap-min - поля поедут следом, и ни одно из них не придётся искать глазами. */ --sc-organ-28:var(--sc-ui-h); /* пилюля шапки: счётчик, тариф */ --sc-organ-32:32px; /* капсула на плитке, чип и кнопка в подвале поля */ --sc-organ-36:36px; /* кнопка в полосе просмотрщика */ --sc-organ-40:40px; /* стрелка листания, кнопка под картинкой на узком */ --sc-tap-pad-28:calc((var(--sc-tap-min) - var(--sc-organ-28)) / 2); --sc-tap-pad-32:calc((var(--sc-tap-min) - var(--sc-organ-32)) / 2); --sc-tap-pad-36:calc((var(--sc-tap-min) - var(--sc-organ-36)) / 2); --sc-tap-pad-40:calc((var(--sc-tap-min) - var(--sc-organ-40)) / 2); /* ПОЛ. Ниже этого ни одна цель не опускается нигде: это уровень AA, а не пожелание. Проверка обязана падать на всём, что мельче. */ --sc-tap-floor:24px; --sc-control-h-md:48px; --sc-control-h-lg:56px; --sc-control-h-xl:64px; /* Кнопка: поле по высоте и кегль. Рост кнопки задают ОНИ, а не min-block-size: при 12 сверху и снизу кнопка выходила 46 при объявленных 40. */ --sc-btn-pad-block:var(--sc-space-12); --sc-btn-text:var(--sc-text-body-sm); --sc-header-h:64px; --sc-sidebar-w:264px; /* Приклеенная к низу строка действий резервирует под собой место: прокручиваемая область заканчивается на её высоте плюс зазор, а не под ней. */ --sc-sticky-actions-h:72px; --sc-sticky-reserve:calc(var(--sc-sticky-actions-h) + var(--sc-space-24)); /* Поле первого экрана лендинга и его липкая ипостась. Высота липкой панели перезаписывается из JS наблюдателем размера: тумблеры кегля в виджете доступности растят панель, и константа перестала бы быть правдой. */ --sc-field-w:720px; --sc-field-h-min:200px; --sc-field-h-sticky:64px; --sc-field-reserve:calc(var(--sc-field-h-sticky) + var(--sc-space-24)); /* ЯЩИК И ЛИСТ узкой ветки кабинета. Ящик поднимает ТУ ЖЕ боковую полосу, а не копию списка, поэтому ширина у него своя, а содержимое общее. Доля рядом с точками нужна, чтобы на 360 у ширмы оставалась полоса для нажатия «мимо». */ --sc-drawer-w:min(320px, 86%); --sc-grab-w:40px; /* ручка захвата листа */ --sc-grab-h:4px; /* СТУДИЯ КАРТИНОК. Числа сняты замером в кадрах кита на 1440x900 и 390x844. Основа карточки входа 150, а НЕ её предел 320: основа считается до сжатия, и с крупной три карточки уходили на вторую строку уже на 621, хотя помещались по 196. */ --sc-st-entry-w:240px; /* карточка входа в узкой ленте */ --sc-st-entry-max:320px; /* её предел на широком */ --sc-st-entry-basis:150px; /* её основа во флексе */ --sc-st-pop-w:220px; /* поповер меню картинки на широком */ --sc-st-biz-w:256px; /* список переключения дела на широком */ /* Текстовая область композера растёт ВВЕРХ до потолка, дальше прокручивается внутри себя: композер приклеен низом, поэтому длинный запрос поднимает верхний край, а чип и отправка остаются на месте. */ --sc-st-field-min:44px; --sc-st-field-max:184px; --sc-st-field-min-narrow:36px; --sc-st-field-max-narrow:144px; /* Поле композера ЛОГОТИПА - своё: там лежит написанный моделью абзац, а не фраза пожелания, и вмещать он должен больше. Место освободили переезд образца в чип над полем и круглая кнопка вместо кнопки со словами. */ --sc-lg-field-min:120px; --sc-lg-field-max:240px; } /* ТЕЛЕФОН: ОРГАНЫ УПРАВЛЕНИЯ 40 (решение владельца 04.10.2026: «почему всё такое огромное, особенно кнопки»). 40 - нижняя граница нормы Material (40-48); цель нажатия при этом не ниже пола AA (24). Кегль полей ввода НЕ опускается ниже 16: иначе iOS зумит страницу при фокусе. Медиазапрос к окну здесь законен - это оболочка кабинета, а не вёрстка сайта клиента (там узость решает контейнер бумаги). */ @media (max-width:760px){ :root{ --sc-tap-min:40px; --sc-control-h-sm:40px; /* малая кнопка на телефоне той же высоты: одна высота органов */ --sc-control-h-md:40px; --sc-control-h-lg:44px; --sc-control-h-xl:48px; --sc-btn-pad-block:var(--sc-space-4); /* рост держит min-block-size 40: значок 24 + 4 + 4 + рамка в него входят */ --sc-btn-text:0.9375rem; /* 15 */ } }