:root{
  /* Scale: 4 / 8 / 12 / 16 / 24 / 32 / 40 / 48 / 64 / 80 / 96 / 120 */
  --space-4:4px; --space-8:8px; --space-12:12px; --space-16:16px; --space-24:24px; --space-32:32px;
  --space-40:40px; --space-48:48px; --space-64:64px; --space-80:80px; --space-96:96px; --space-120:120px;

  /* space.* aliases */
  --space-2xs:var(--space-4);
  --space-xs:var(--space-8);    /* very close elements */
  --space-sm:var(--space-12);   /* label ↔ text */
  --space-md:var(--space-16);   /* inside cards */
  --space-lg:var(--space-24);   /* related elements */
  --space-xl:var(--space-32);   /* groups */
  --space-2xl:var(--space-48);  /* medium section spacing */
  --space-3xl:var(--space-64);  /* major spacing */
  --space-4xl:var(--space-96);  /* large sections */
  --space-5xl:var(--space-120); /* hero / very open */

  /* radius.* — Button/Input 10–12, Card/Image 16–20, Large block 20–24 */
  --radius-sm:10px;
  --radius-md:12px;
  --radius-lg:18px;
  --radius-xl:24px;

  /* Layout */
  --container:1200px;
  --gutter:24px; --gutter-tablet:20px; --gutter-mobile:16px;
  --page-pad:32px; --page-pad-mobile:20px;
  --grid-cols:12; /* @kind other */ --grid-cols-tablet:8; /* @kind other */ --grid-cols-mobile:4; /* @kind other */
  --header-h:76px;
  --section-y:var(--space-96);
  --section-y-mobile:var(--space-64);
}