/* Reckon spacing. One base unit (4px) multiplied; half-steps are used freely
   (control heights land on 30/34/38px, i.e. an odd number, because every
   bordered control subtracts its 1px border from the padding). */
:root{
  --spacing:0.25rem;
  --space-0-5:0.125rem;
  --space-1:0.25rem;
  --space-1-5:0.375rem;
  --space-2:0.5rem;
  --space-2-5:0.625rem;
  --space-3:0.75rem;
  --space-3-5:0.875rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-10:2.5rem;
  --space-12:3rem;
  --space-16:4rem;
  --space-20:5rem;

  /* control heights — desktop (sm:) first, touch value in --*-touch */
  --control-h-xs:1.5rem;   --control-h-xs-touch:1.75rem;
  --control-h-sm:1.75rem;  --control-h-sm-touch:2rem;
  --control-h:2rem;        --control-h-touch:2.25rem;
  --control-h-lg:2.25rem;  --control-h-lg-touch:2.5rem;
  --control-h-xl:2.5rem;   --control-h-xl-touch:2.75rem;

  --container-max:1416px;
  --header-height:4rem;
  --sidebar-width:16rem;
  --sidebar-width-icon:3rem;
}

/* Below the sm breakpoint every control steps up to its touch height. The
   --*-touch tokens were declared but never consumed, so controls stayed at
   their desktop heights on touch widths. */
@media(max-width:767px){:root{--control-h-xs:var(--control-h-xs-touch);--control-h-sm:var(--control-h-sm-touch);--control-h:var(--control-h-touch);--control-h-lg:var(--control-h-lg-touch);--control-h-xl:var(--control-h-xl-touch)}}
