/* Spacing (4px base), grid, radius, elevation, z-index */
:root{
--space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
--grid-columns:12; /* @kind other */ --grid-max:1440px; --grid-content:1280px; --grid-gutter:24px; --grid-margin:48px;
--section-y:var(--space-9);
--header-utility-h:36px; --header-main-h:72px;
--touch-min:44px;
/* Radius — tight and technical. Square by default. */
--radius-0:0; --radius-1:2px; --radius-2:4px; --radius-pill:999px;
--radius-control:var(--radius-1); --radius-card:var(--radius-0); --radius-chip:var(--radius-1);
/* Elevation — on dark, depth comes from surface steps + hairlines; shadows are for floating layers only */
--elev-0:none;
--elev-1:0 1px 0 rgba(255,255,255,.04) inset,0 1px 2px rgba(0,0,0,.4);
--elev-2:0 8px 24px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06);
--elev-3:0 24px 64px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);
--z-sticky:100; /* @kind other */ --z-header:200; /* @kind other */ --z-menu:300; /* @kind other */ --z-tray:400; /* @kind other */ --z-modal:500; /* @kind other */
}
@media (max-width:1023px){:root{--grid-columns:8; /* @kind other */ --grid-margin:32px;}}
@media (max-width:767px){:root{--grid-columns:4; /* @kind other */ --grid-gutter:16px; --grid-margin:20px; --section-y:var(--space-8); --header-main-h:60px; --header-utility-h:0px;}}