/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* ── Text ── */
.text-center    { text-align: center; }
.text-left      { text-align: left; }
.text-right     { text-align: right; }
.text-primary   { color: var(--color-primary); }
.text-accent    { color: var(--color-primary); }
.text-muted     { color: var(--color-muted); }
.text-white     { color: var(--color-white); }
.text-dark      { color: var(--color-dark); }
.text-sm        { font-size: var(--fs-small); }
.text-lg        { font-size: var(--fs-body-lg); }
.fw-medium      { font-weight: var(--fw-medium); }
.fw-semibold    { font-weight: var(--fw-semibold); }
.fw-bold        { font-weight: var(--fw-bold); }

/* ── Spacing ── */
.mt-0  { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl{ margin-top: var(--space-2xl); }

.mb-0  { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl{ margin-bottom: var(--space-2xl); }

/* ── Display ── */
.d-flex         { display: flex; }
.d-grid         { display: grid; }
.d-block        { display: block; }
.d-inline-block { display: inline-block; }
.d-none         { display: none; }

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-wrap { flex-wrap: wrap; }
.gap-sm    { gap: var(--space-sm); }
.gap-md    { gap: var(--space-md); }
.gap-lg    { gap: var(--space-lg); }
.gap-xl    { gap: var(--space-xl); }

/* ── Width ── */
.w-full     { width: 100%; }
.max-w-narrow { max-width: var(--container-narrow); margin-inline: auto; }

/* ── Visibility ── */
.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;
}

@media (max-width: 768px) {
  .md-hide { display: none; }
  .md-show { display: block; }
}

@media (max-width: 480px) {
  .sm-hide { display: none; }
  .sm-show { display: block; }
}