/* Spacing (4px base), layout, radius, borders */
:root {
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 144px; --space-11: 200px;
  --section-y: clamp(88px, 12vw, 176px); /* @kind spacing */
  --gutter: clamp(16px, 4vw, 56px); /* @kind spacing */
  --max-w: 1440px; /* @kind spacing */
  --measure: 62ch; /* @kind other */
  --grid-cols: 12; /* @kind other */

  /* Radius: sharp. Pills only for nav, buttons, chips */
  --radius-0: 0; /* @kind radius */
  --radius-1: 2px; /* @kind radius */   /* media, inputs, cards */
  --radius-2: 6px; /* @kind radius */   /* dashboard widgets only */
  --radius-pill: 999px; /* @kind radius */

  --hairline: 1px solid var(--line); /* @kind other */
  --control-h: 48px; /* @kind spacing */
  --control-h-sm: 36px; /* @kind spacing */
}