/* A deliberately small set of utilities. Anything bigger becomes a component. */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mt-6 { margin-top: var(--space-6) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }

.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-muted { color: var(--muted) !important; }
.text-small { font-size: 0.875rem !important; }
.text-large { font-size: 1.25rem !important; }
.text-upper { text-transform: uppercase; letter-spacing: 0.06em; }
.text-cranberry { color: var(--cranberry) !important; }
.text-pine { color: var(--pine) !important; }
.fw-bold { font-weight: 800 !important; }
.serif { font-family: var(--font-serif) !important; }
.mono { font-family: var(--font-mono) !important; }
.nowrap { white-space: nowrap !important; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .hide-below-sm { display: none !important; }
}

@media (max-width: 767.98px) {
  .hide-below-md { display: none !important; }
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}