/* Spacing. THE STRIPE WIDTH IS THE LAYOUT RHYTHM UNIT.
   --stripe-w = 48px. Gutters, section padding and the scallop radius all derive from it,
   so the awning and the grid are literally the same measurement. Mobile drops the unit to
   28px (patterns.css) so the scallop simplifies instead of squashing. */
:root {
  /* 1u */
  --stripe-w: 48px; /* @kind spacing */
  /* u/8 */
  --sp-1: 6px; /* @kind spacing */
  /* u/4 */
  --sp-2: 12px; /* @kind spacing */
  --sp-3: 18px; /* @kind spacing */
  /* u/2 */
  --sp-4: 24px; /* @kind spacing */
  --sp-5: 36px; /* @kind spacing */
  /* 1u */
  --sp-6: 48px; /* @kind spacing */
  /* 1.5u */
  --sp-7: 72px; /* @kind spacing */
  /* 2u */
  --sp-8: 96px; /* @kind spacing */
  /* 3u */
  --sp-9: 144px; /* @kind spacing */
  /* 4u */
  --sp-10: 192px; /* @kind spacing */

  --gutter: var(--sp-6); /* @kind spacing */
  --gutter-wide: var(--sp-8); /* @kind spacing */
  --section-y: var(--sp-8); /* @kind spacing */
  --section-y-tight: var(--sp-7); /* @kind spacing */
  /* 25u */
  --container: 1200px; /* @kind spacing */
  /* 17u */
  --container-narrow: 816px; /* @kind spacing */

  --radius-0: 0;
  --radius-1: 2px;               /* inputs, frames — the printed-collateral radius */
  --radius-2: 4px;               /* buttons */
  --radius-pill: 999px;          /* chips only */

  --z-base: 0; /* @kind other */
  --z-raised: 10; /* @kind other */
  --z-sticky: 100; /* @kind other */
  --z-nav: 200; /* @kind other */
  --z-overlay: 300; /* @kind other */
  --z-dialog: 400; /* @kind other */
  /* the awning wipe sits above everything */
  --z-transition: 500; /* @kind other */
}
@media (max-width: 640px) {
  :root { --gutter: var(--sp-4); --section-y: var(--sp-7); --section-y-tight: var(--sp-6); }
}