/* Spacing, radius, layout. 4px base unit. */
:root{
--space-0:0;--space-0-5:2px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;--space-40:160px;
/* Section rhythm (marketing) */
--section-y-s:clamp(24px,3vw,40px) /* @kind spacing */;--section-y:clamp(32px,4.5vw,64px) /* @kind spacing */;--section-y-l:clamp(40px,6vw,80px) /* @kind spacing */;
/* Radius — soft precision */
--radius-xs:6px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-2xl:32px;--radius-full:999px;
--radius-control:var(--radius-md);--radius-card:var(--radius-lg);--radius-surface:var(--radius-xl);
/* Layout grid — 4 / 8 / 12 */
--container-max:1280px;--container-text:720px;
--grid-columns:4 /* @kind other */;--grid-gutter:16px;--grid-margin:20px;
/* Breakpoints (reference — use literal values in media queries): sm 640 · md 768 · lg 1024 · xl 1280 · 2xl 1440 */
--bp-sm:640px /* @kind other */;--bp-md:768px /* @kind other */;--bp-lg:1024px /* @kind other */;--bp-xl:1280px /* @kind other */;--bp-2xl:1440px /* @kind other */;
/* Control sizing — 44px is the default touch target */
--control-h-s:36px /* @kind spacing */;--control-h-m:44px /* @kind spacing */;--control-h-l:52px /* @kind spacing */;
}
@media (min-width:768px){:root{--grid-columns:8 /* @kind other */;--grid-gutter:24px;--grid-margin:40px}}
@media (min-width:1024px){:root{--grid-columns:12 /* @kind other */;--grid-gutter:32px;--grid-margin:64px}}