/* SPACING — 8pt scale with 4px half-steps.
   Token name maps 1:1 to a Tailwind spacing key: --space-1-5 → spacing['1.5'].
   Reference spacing by token only. Raw px in a component is a bug. */
:root{
--space-0:0px;
--space-0-5:4px;
--space-1:8px;
--space-1-5:12px;
--space-2:16px;
--space-2-5:20px;
--space-3:24px;
--space-4:32px;
--space-5:40px;
--space-6:48px;
--space-7:56px;
--space-8:64px;
--space-10:80px;
--space-12:96px;
--space-16:128px;
/* Off-scale. Hairline nudges and optical alignment only — never layout. */
--space-micro:2px;

/* Semantic aliases kept so existing components keep resolving. New work uses the numeric scale. */
--space-xxs:var(--space-micro);--space-xs:var(--space-0-5);--space-sm:var(--space-1);--space-md:var(--space-1-5);--space-base:var(--space-2);--space-lg:var(--space-3);--space-xl:var(--space-4);--space-xxl:var(--space-6);--space-section:var(--space-8);--space-section-editorial:var(--space-10);

/* CONTAINERS — content caps at 1200px; gutters absorb the rest. */
--container-max:1200px;
--container-detail:1080px;
--container-narrow:720px;
--container-wide:1200px;

/* PAGE MARGIN + VERTICAL RHYTHM — fluid per range, set in the media queries below. */
--page-inline:var(--space-2);
--section-y:var(--space-5);
--section-y-editorial:var(--space-6);

/* GRID — 4 / 8 / 12 columns. */
--grid-cols:4; /* @kind other */
--grid-gutter:var(--space-2);
--grid-margin:var(--space-2);

/* CARD + COMPONENT SPACING */
--gutter-card:var(--space-2);
--gutter-footer:var(--space-3);
--card-pad:var(--space-3);

/* TOUCH TARGETS — 44px is the floor, everywhere, at every breakpoint. */
--tap-min:44px;
--tap-comfortable:48px;

/* COMPONENT SIZES — mobile values; scaled up below. */
--nav-height:64px;
--searchbar-height:56px;
--input-height:52px;
--button-height:48px;
--orb-size:48px;
--icon-button-sm:32px;
--icon-button-md:44px;
--daycell:44px;
--sidebar-width:248px;
--tabbar-height:56px;
--sheet-handle:var(--space-0-5);
}

/* 600–767px — wide phone / small tablet. Still 4 columns and the mobile nav,
   but the margin opens up and card grids go 2-up. */
@media (min-width:600px){:root{
--page-inline:var(--space-3);
--grid-margin:var(--space-3);
--section-y:var(--space-6);
--section-y-editorial:var(--space-7);
}}

/* 768px — tablet. 8 columns. */
@media (min-width:768px){:root{
--grid-cols:8; /* @kind other */
--grid-gutter:var(--space-3);
--nav-height:72px;
--searchbar-height:60px;
--input-height:56px;
--icon-button-md:40px;
--daycell:40px;
--section-y:var(--space-6);
--section-y-editorial:var(--space-8);
}}

/* 1024px — laptop. 12 columns, full desktop chrome, margins widen. */
@media (min-width:1024px){:root{
--grid-cols:12; /* @kind other */
--page-inline:var(--space-5);
--grid-margin:var(--space-5);
--nav-height:80px;
--searchbar-height:64px;
--section-y:var(--space-8);
--section-y-editorial:var(--space-10);
}}

/* 1440px+ — container is already capped at 1200; the margin just breathes. */
@media (min-width:1440px){:root{
--page-inline:var(--space-8);
--grid-margin:var(--space-8);
}}