/* 4px base grid. Layout gutters and component padding both come from here. */
:root{
  --sp-0:0; /* @kind spacing */
  --sp-1:2px;
  --sp-2:4px;
  --sp-3:6px;
  --sp-4:8px;
  --sp-5:12px;
  --sp-6:16px;
  --sp-7:20px;
  --sp-8:24px;
  --sp-9:32px;
  --sp-10:40px;
  --sp-11:48px;
  --sp-12:64px;
  --sp-13:80px;
  --sp-14:96px;

  --gutter-mobile:16px;
  --gutter-tablet:24px;
  --gutter-desktop:32px;
  --container-max:1200px; /* @kind spacing */
  --container-prose:720px; /* @kind spacing */

  --control-h-sm:32px;
  --control-h-md:40px;
  --control-h-lg:48px;
  --tap-min:44px;   /* never smaller, on any touch surface */
}