:root {
  --z-space-4: 4px;
  --z-space-8: 8px;
  --z-space-12: 12px;
  --z-space-16: 16px;
  --z-space-20: 20px;
  --z-space-24: 24px;
  --z-space-32: 32px;
  --z-space-40: 40px;
  --z-space-48: 48px;
  --z-space-64: 64px;
  --z-radius-6: 6px;
  --z-radius-8: 8px;
  --z-radius-10: 10px;
  --z-radius-12: 12px;
  --z-radius-16: 16px;
  --z-shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --z-shadow-2: 0 2px 8px rgba(0,0,0,.08);
  --z-font-base: 16px;
  --z-line-base: 1.5;
  --z-h1: 32px;
  --z-h2: 24px;
  --z-h3: 20px;
  --z-container-max: 1270px;
  --z-gutter: 16px;
}

.u-mt-8 { margin-top: 8px; }
.u-mt-12 { margin-top: 12px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-24 { margin-top: 24px; }
.u-mt-32 { margin-top: 32px; }
.u-mt-40 { margin-top: 40px; }

.u-mb-8 { margin-bottom: 8px; }
.u-mb-12 { margin-bottom: 12px; }
.u-mb-16 { margin-bottom: 16px; }
.u-mb-24 { margin-bottom: 24px; }
.u-mb-32 { margin-bottom: 32px; }
.u-mb-40 { margin-bottom: 40px; }

.u-pt-8 { padding-top: 8px; }
.u-pt-12 { padding-top: 12px; }
.u-pt-16 { padding-top: 16px; }
.u-pt-24 { padding-top: 24px; }
.u-pt-32 { padding-top: 32px; }

.u-pb-8 { padding-bottom: 8px; }
.u-pb-12 { padding-bottom: 12px; }
.u-pb-16 { padding-bottom: 16px; }
.u-pb-24 { padding-bottom: 24px; }
.u-pb-32 { padding-bottom: 32px; }

.u-p-12 { padding: 12px; }
.u-p-16 { padding: 16px; }
.u-p-24 { padding: 24px; }

.u-gap-8 { gap: 8px; }
.u-gap-12 { gap: 12px; }
.u-gap-16 { gap: 16px; }
.u-gap-24 { gap: 24px; }

.u-maxw {
  max-width: var(--z-container-max);
  margin: 0 auto;
  padding: 0 var(--z-gutter);
}