/* 4px base grid. Layout, radius, containers, breakpoints, z-index. */
:root{
  --space-0:0; --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;

  /* Rhythm aliases */
  --gutter-mobile:16px; --gutter-tablet:24px; --gutter-desktop:32px;
  --section-y-mobile:48px; --section-y-desktop:80px;
  --grid-gap-product-mobile:12px; --grid-gap-product-desktop:24px;

  /* Radius — sharp, functional. Nothing bubbly. */
  --radius-none:0; --radius-xs:2px; --radius-sm:4px; --radius-md:6px;
  --radius-lg:10px; --radius-xl:16px; --radius-pill:999px; --radius-circle:50%;

  /* Containers */
  --container-sm:640px; --container-md:840px; --container-lg:1120px;
  --container-xl:1320px; --container-full:1600px;

  /* Breakpoints (documentation tokens — mirrored in media queries) */
  --bp-mobile:480px; /* @kind other */ --bp-tablet:768px; /* @kind other */ --bp-laptop:1024px; /* @kind other */
  --bp-desktop:1280px; /* @kind other */ --bp-wide:1536px; /* @kind other */

  /* Touch */
  --tap-min:44px; /* @kind other */ --tap-comfortable:48px; /* @kind other */

  /* Z-index */
  --z-base:0; /* @kind other */ --z-raised:10; /* @kind other */ --z-sticky:100; /* @kind other */ --z-header:200; /* @kind other */ --z-dropdown:300; /* @kind other */
  --z-overlay:400; /* @kind other */ --z-drawer:500; /* @kind other */ --z-modal:600; /* @kind other */ --z-toast:700; /* @kind other */ --z-tooltip:800; /* @kind other */
}