/* ==========================================================================
   UTILITIES — Single-purpose helper classes
   u-* naming for new utilities; legacy names preserved for backward compat.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

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


/* --------------------------------------------------------------------------
   Text alignment
   -------------------------------------------------------------------------- */

.text-center,
.u-text-center {
  text-align: center;
}

.text-right,
.u-text-end {
  text-align: right;
}

.text-left,
.u-text-start {
  text-align: left;
}


/* --------------------------------------------------------------------------
    Brand highlight
    -------------------------------------------------------------------------- */

.brand-highlight,
.u-brand-highlight {
   color: var(--color-warning);
   font-weight: 700;
}


/* --------------------------------------------------------------------------
   Spacing — margin top
   -------------------------------------------------------------------------- */

.mt-1 { margin-top: var(--space-1); }   /* 4px  */
.mt-2 { margin-top: var(--space-2); }   /* 8px  */
.mt-3 { margin-top: var(--space-3); }   /* 12px */
.mt-4 { margin-top: var(--space-4); }   /* 16px */
.mt-5 { margin-top: var(--space-5); }   /* 24px */
.mt-6 { margin-top: var(--space-6); }   /* 32px */
.mt-7 { margin-top: var(--space-7); }   /* 48px */
.mt-8 { margin-top: var(--space-8); }   /* 64px */
.mt-9 { margin-top: var(--space-9); }   /* 80px */


/* --------------------------------------------------------------------------
   Spacing — margin bottom
   -------------------------------------------------------------------------- */

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-7 { margin-bottom: var(--space-7); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-9 { margin-bottom: var(--space-9); }


/* --------------------------------------------------------------------------
   Spacing — horizontal center & padding
   -------------------------------------------------------------------------- */

.mx-auto        { margin-left: auto; margin-right: auto; }
.p-4            { padding: var(--space-4); }
.p-5            { padding: var(--space-5); }
.p-6            { padding: var(--space-6); }