/* Spacing — the $spacing component family, and the gaps actually used on screen. */
:root{
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;  /* benefit-card list gutter */
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;

  /* Screen frame */
  --screen-width: 375px; /* @kind spacing */
  --screen-height: 812px; /* @kind spacing */
  --screen-gutter: 16px;      /* default horizontal padding */
  --screen-gutter-cards: 14px;/* the benefit-card list uses 14px */
  --statusbar-height: 44px;
  --appbar-height: 42px;
  --tabbar-height: 84px;      /* 50px bar + 34px home indicator */
  --card-width: 346px;
  --card-height: 190px;
  --control-height: 48px;     /* MUI/Button Size=Large */
  --field-height: 44px;
}