/* design-base/scale.css — шкала отступов, типографики, радиусов, теней, motion. НЕ МЕНЯЕТСЯ под проект. Общая на все проекты. Источник: research/design-layout-hierarchy.md (пересечение Tailwind/Carbon/Atlassian/Polaris/Radix). */ :root { /* Шкала отступов. База 4px. Только эти ступени — произвольные px запрещены. */ --space-2: 2px; /* иконки, бордеры */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px; --space-96: 96px; /* секции лендинга */ --space-128: 128px; /* Типо-шкала. line-height кратен 4px — высоты текста попадают в ту же шкалу, что отступы. */ --text-xs: 12px; --lh-xs: 16px; --text-sm: 14px; --lh-sm: 20px; --text-base: 16px; --lh-base: 24px; --text-lg: 20px; --lh-lg: 28px; --text-xl: 24px; --lh-xl: 32px; --text-2xl: 32px; --lh-2xl: 40px; /* Мера строки (физиология чтения, Butterick 45-90ch). */ --measure: 65ch; /* основной текст */ --measure-tight: 45ch; /* подписи */ /* Радиусы: структура фиксирована, корень --radius задаётся в brand.css (shadcn: sm=60%, md=80%, lg=100%). */ --radius-sm: calc(var(--radius) * 0.6); --radius-md: calc(var(--radius) * 0.8); --radius-lg: var(--radius); /* Тени: уровни фиксированы (восприятие времени/глубины не брендируется). */ --shadow-1: 0 1px 2px rgb(0 0 0 / 0.06); --shadow-2: 0 2px 8px rgb(0 0 0 / 0.08); --shadow-3: 0 8px 24px rgb(0 0 0 / 0.12); /* Motion. */ --dur-fast: 120ms; --dur-base: 200ms; --ease: cubic-bezier(0.2, 0, 0, 1); /* Плотность по умолчанию (переопределяется data-density на ). */ --row-h: 44px; --pad-cell: var(--space-12); } /* Режим плотности: механика общая, ВЫБОР — в проекте (атрибут на ). */ [data-density="compact"] { --row-h: 32px; --pad-cell: var(--space-8); } /* дашборды, таблицы */ [data-density="cozy"] { --row-h: 56px; --pad-cell: var(--space-16); } /* лендинги, формы */ /* Базовая типографика текста. */ body { font-size: var(--text-base); line-height: var(--lh-base); } /* Числа в таблицах — моноцифры, БЕЗ подмены моноширинным шрифтом. */ table { font-variant-numeric: lining-nums tabular-nums; }