/* ========================================
   Utilities
   ======================================== */

.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }

.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-danger  { color: var(--color-danger); }
.text-muted   { color: var(--color-neutral-300); }

.fw-bold { font-weight: 600; }

.mt-0  { margin-top: 0; }
.mt-2  { margin-top: var(--sp-2); }
.mt-4  { margin-top: var(--sp-4); }
.mt-6  { margin-top: var(--sp-6); }
.mt-8  { margin-top: var(--sp-8); }
.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: var(--sp-2); }
.mb-4  { margin-bottom: var(--sp-4); }
.mb-6  { margin-bottom: var(--sp-6); }

.gap-2 { gap: var(--sp-2); }
.gap-4 { gap: var(--sp-4); }

.flex-row {
  display: flex;
  align-items: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-wrap { flex-wrap: wrap; }

.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }

.items-center { align-items: center; }

.w-full { width: 100%; }

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visually hidden but focusable */
.sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: var(--sp-2) var(--sp-4);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}