/* Spacing. --space-N is the raw 4px-step primitive ramp.
   --pad-* / --mar-* / --gap-* are the semantic t-shirt scales product code uses; several of
   them grow at lg (1024px). That responsiveness is the reason to use the token, not the raw px. */
:root{
--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:28px;--space-8:32px;--space-9:36px;--space-10:40px;--space-11:44px;--space-12:48px;--space-13:52px;--space-14:56px;--space-15:60px;--space-16:64px;--space-17:68px;--space-18:72px;--space-19:76px;--space-20:80px;--space-21:84px;--space-22:88px;--space-23:92px;--space-24:96px;--space-25:100px;--space-26:104px;--space-27:108px;--space-28:112px;--space-29:116px;--space-30:120px;--space-31:124px;--space-none:0;

--pad-none:0;--pad-3xs:4px;--pad-2xs:4px;--pad-xs:8px;--pad-sm:16px;--pad-md:16px;--pad-lg:16px;--pad-xl:32px;--pad-2xl:40px;--pad-3xl:44px;--pad-4xl:52px;--pad-5xl:56px;--pad-6xl:64px;--pad-7xl:80px;
--mar-none:0; /* @kind spacing */ --mar-3xs:4px;--mar-2xs:4px;--mar-xs:8px;--mar-sm:16px;--mar-md:16px;--mar-lg:16px;--mar-xl:32px;--mar-2xl:40px;--mar-3xl:44px;--mar-4xl:52px;--mar-5xl:56px;--mar-6xl:64px;--mar-7xl:80px;
--gap-none:0;--gap-3xs:4px;--gap-2xs:8px;--gap-xs:12px;--gap-sm:16px;--gap-md:24px;--gap-lg:32px;--gap-xl:32px;--gap-2xl:32px;--gap-3xl:64px;--gap-4xl:80px;--gap-5xl:80px;

--breakpoint-sm:640px;--breakpoint-md:768px;--breakpoint-lg:1024px;--breakpoint-xl:1280px;

/* Container max widths (UiContainer intents) */
--container-page:1072px;
--container-page-small:672px;
--container-page-checkout:1274px;
--container-flow:404px;
--container-grid-wide:1600px;
--container-grid-page-start:1220px;
--container-grid-product-view:1512px;
}
@media (min-width:1024px){:root{
--pad-2xs:8px;--pad-xs:12px;--pad-md:24px;--pad-lg:32px;--pad-xl:40px;--pad-2xl:44px;--pad-3xl:48px;--pad-5xl:60px;
--mar-2xs:8px;--mar-xs:12px;--mar-md:24px;--mar-lg:32px;--mar-xl:40px;--mar-2xl:44px;--mar-3xl:48px;--mar-5xl:60px;
--gap-xl:40px;--gap-2xl:64px;--gap-3xl:80px;--gap-4xl:100px;--gap-5xl:120px;
}}