/* Atomic utilities. Used sparingly where a one-off doesn't deserve a class. */

/* Spacing */
.mt-0  { margin-top: 0; }
.mt-1  { margin-top: 4px; }
.mt-2  { margin-top: 8px; }
.mt-3  { margin-top: 12px; }
.mt-4  { margin-top: 16px; }
.mt-6  { margin-top: 24px; }
.mt-8  { margin-top: 32px; }
.mt-10 { margin-top: 40px; }
.mt-12 { margin-top: 48px; }
.mt-16 { margin-top: 64px; }

.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: 8px; }
.mb-3  { margin-bottom: 12px; }
.mb-4  { margin-bottom: 16px; }
.mb-6  { margin-bottom: 24px; }
.mb-8  { margin-bottom: 32px; }
.mb-12 { margin-bottom: 48px; }

/* Text */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-balance { text-wrap: balance; }
.text-ink   { color: var(--sg-ink); }
.text-steel { color: var(--sg-steel); }
.text-blue  { color: var(--sg-hero-blue); }
.text-red   { color: var(--sg-hero-red); }
.text-white { color: var(--sg-white); }

.text-lg { font-size: var(--sg-size-body-lg); }
.text-md { font-size: var(--sg-size-body); }
.text-sm { font-size: var(--sg-size-body-sm); }
.text-xs { font-size: var(--sg-size-meta); }

.font-bold     { font-weight: var(--sg-w-bold); }
.font-semibold { font-weight: var(--sg-w-semibold); }
.font-medium   { font-weight: var(--sg-w-medium); }

/* Flex */
.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2  { gap: 8px; }
.gap-3  { gap: 12px; }
.gap-4  { gap: 16px; }
.gap-6  { gap: 24px; }
.gap-8  { gap: 32px; }
.gap-12 { gap: 48px; }

/* Block */
.block       { display: block; }
.inline-block { display: inline-block; }
.relative    { position: relative; }
.overflow-hidden { overflow: hidden; }

/* Width */
.w-full { width: 100%; }
.max-w-narrow { max-width: var(--sg-max-narrow); }
.max-w-content { max-width: var(--sg-max-content); }
.mx-auto { margin-left: auto; margin-right: auto; }