:root{
  /* 4px module — the grid is strict and visible */
  --sp-0:0; /* @kind spacing */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:40px;
  --sp-8:56px;
  --sp-9:72px;
  --sp-10:96px;
  --sp-11:128px;
  --sp-12:160px;

  /* Layout */
  --grid-columns:12; /* @kind other */
  --grid-gutter:24px;
  --container-max:1320px;
  --container-narrow:760px;
  --gutter-page:32px;
  --gutter-page-sm:20px;

  --section-pad-y:96px;
  --section-pad-y-sm:56px;

  /* Component insets */
  --pad-control-x:20px;
  --pad-control-y:12px;
  --pad-card:24px;
  --pad-card-lg:32px;

  --control-h-sm:32px;
  --control-h:44px;
  --control-h-lg:56px;
}