/* Base spacing unit X = 8px (brand guidelines, p.13: X 8px / 2X 16px / 3X 24px).
   Print equivalent: X = 4mm. Layouts use a 12-column grid. */
:root{
  --sp-unit:8px;
  --sp-space-0:0px;
  --sp-space-half:4px;   /* 0.5X */
  --sp-space-1:8px;      /* X   */
  --sp-space-2:16px;     /* 2X  */
  --sp-space-3:24px;     /* 3X  */
  --sp-space-4:32px;     /* 4X  */
  --sp-space-5:40px;     /* 5X  */
  --sp-space-6:48px;     /* 6X  */
  --sp-space-8:64px;     /* 8X  */
  --sp-space-10:80px;    /* 10X */
  --sp-space-12:96px;    /* 12X */
  --sp-space-16:128px;   /* 16X */

  --sp-grid-columns:12; /* @kind other */
  --sp-grid-gutter:24px;
  --sp-grid-margin:24px;
  --sp-container-max:1200px;
  --sp-container-narrow:760px;

  --sp-section-y:96px;
  --sp-section-y-tight:64px;

  --sp-control-h-sm:36px;
  --sp-control-h-md:44px;
  --sp-control-h-lg:52px;
  --sp-tap-min:44px;
}