/* Spacing — 4px grid with a 2px half-step. */
:root{
  --space-0:0; --space-px:1px; /* @kind spacing */ --space-half:2px;
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-7:32px; --space-8:40px; --space-9:48px; --space-10:64px;
  --space-11:80px; --space-12:96px; --space-13:128px;

  /* Semantic rhythm */
  --gap-inline:var(--space-2);      /* icon to label */
  --gap-field:var(--space-3);       /* label to control */
  --gap-stack:var(--space-4);       /* paragraph rhythm */
  --gap-card:var(--space-5);        /* grid gutter between cards */
  --gap-group:var(--space-7);       /* block groups inside a section */
  --section-y:var(--space-11);      /* vertical section padding, desktop */
  --section-y-compact:var(--space-9);
  --section-y-mobile:var(--space-8);

  --pad-card:var(--space-5);
  --pad-card-tight:var(--space-4);
  --pad-panel:var(--space-7);
  --pad-control-x:var(--space-4);
  --pad-control-y:10px;

  --control-h-sm:32px; --control-h-md:40px; --control-h-lg:48px; --control-h-touch:48px;
}