:root{
/* 4px base, generous upper end — whitespace is a brand asset */
--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;--space-11:160px;
/* layout */
--page-gutter:clamp(20px,3.2vw,48px); /* @kind spacing */
--page-max:1440px;
--grid-gap:var(--space-4);
--grid-cols:12; /* @kind other */
--section-gap:var(--space-9);
--header-height:64px;
/* geometry — the master brand is square. no radii. */
--radius-none:0;
--radius-control:0;
--radius-pill:999px;
--hairline:1px;
--rule-weight:1px;
/* shadows — none in master UI; imagery carries depth */
--shadow-none:none;
--shadow-dialog:0 0 0 1px var(--near-black);
/* motion — short, linear-ish, never bouncy */
--ease-out:cubic-bezier(.2,0,0,1); /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur-base:200ms; /* @kind other */
--dur-slow:400ms; /* @kind other */
/* controls */
--control-h-sm:36px;--control-h-md:44px;--control-h-lg:52px;
--control-px:20px;
/* image aspect ratios */
--ratio-product:4/5; /* @kind other */
--ratio-portrait:3/4; /* @kind other */
--ratio-landscape:3/2; /* @kind other */
--ratio-hero:4/3; /* @kind other */
}