/* ==========================================================================
   Utilities — Reusable helper classes
   ========================================================================== */

/* ── Display ───────────────────────────────────────────────────────────── */
.u-hidden        { display: none !important; }
.u-block         { display: block; }
.u-inline-block  { display: inline-block; }
.u-flex          { display: flex; }
.u-inline-flex   { display: inline-flex; }

/* ── Visually Hidden (accessible) ──────────────────────────────────────── */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Text Alignment ────────────────────────────────────────────────────── */
.u-text-left    { text-align: left; }
.u-text-center  { text-align: center; }
.u-text-right   { text-align: right; }

@media (min-width: 768px) {
  .u-text-md-left   { text-align: left; }
  .u-text-md-center { text-align: center; }
  .u-text-md-right  { text-align: right; }
}

/* ── Text Styles ───────────────────────────────────────────────────────── */
.u-text-muted   { color: var(--color-text-muted); }
.u-text-accent  { color: var(--color-text-accent); }
.u-text-inverse { color: var(--color-text-inverse); }
.u-text-heading { color: var(--color-text-heading); }

.u-font-heading { font-family: var(--font-family-heading); }
.u-font-body    { font-family: var(--font-family-body); }

.u-weight-normal { font-weight: var(--font-weight-normal); }
.u-weight-medium { font-weight: var(--font-weight-medium); }
.u-weight-semi   { font-weight: var(--font-weight-semi); }
.u-weight-bold   { font-weight: var(--font-weight-bold); }

.u-italic { font-style: italic; }

/* ── Font Sizes ────────────────────────────────────────────────────────── */
.u-text-xs  { font-size: var(--font-size-xs); }
.u-text-sm  { font-size: var(--font-size-sm); }
.u-text-base{ font-size: var(--font-size-base); }
.u-text-md  { font-size: var(--font-size-md); }
.u-text-lg  { font-size: var(--font-size-lg); }
.u-text-xl  { font-size: var(--font-size-xl); }
.u-text-2xl { font-size: var(--font-size-2xl); }
.u-text-3xl { font-size: var(--font-size-3xl); }
.u-text-4xl { font-size: var(--font-size-4xl); }

/* ── Spacing Utilities ─────────────────────────────────────────────────── */
.u-mt-0  { margin-top: 0; }
.u-mt-2  { margin-top: var(--space-2); }
.u-mt-4  { margin-top: var(--space-4); }
.u-mt-6  { margin-top: var(--space-6); }
.u-mt-8  { margin-top: var(--space-8); }
.u-mt-12 { margin-top: var(--space-12); }
.u-mt-16 { margin-top: var(--space-16); }

.u-mb-0  { margin-bottom: 0; }
.u-mb-2  { margin-bottom: var(--space-2); }
.u-mb-4  { margin-bottom: var(--space-4); }
.u-mb-6  { margin-bottom: var(--space-6); }
.u-mb-8  { margin-bottom: var(--space-8); }
.u-mb-12 { margin-bottom: var(--space-12); }
.u-mb-16 { margin-bottom: var(--space-16); }

.u-mx-auto { margin-left: auto; margin-right: auto; }

.u-pt-0  { padding-top: 0; }
.u-pt-4  { padding-top: var(--space-4); }
.u-pt-8  { padding-top: var(--space-8); }
.u-pt-12 { padding-top: var(--space-12); }
.u-pt-16 { padding-top: var(--space-16); }

.u-pb-0  { padding-bottom: 0; }
.u-pb-4  { padding-bottom: var(--space-4); }
.u-pb-8  { padding-bottom: var(--space-8); }
.u-pb-12 { padding-bottom: var(--space-12); }
.u-pb-16 { padding-bottom: var(--space-16); }

.u-py-8  { padding-top: var(--space-8);  padding-bottom: var(--space-8);  }
.u-py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.u-py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.u-py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); }
.u-py-24 { padding-top: var(--space-24); padding-bottom: var(--space-24); }

.u-px-4  { padding-left: var(--space-4);  padding-right: var(--space-4);  }
.u-px-6  { padding-left: var(--space-6);  padding-right: var(--space-6);  }
.u-px-8  { padding-left: var(--space-8);  padding-right: var(--space-8);  }

/* ── Flex Utilities ────────────────────────────────────────────────────── */
.u-flex-center    { display: flex; align-items: center; justify-content: center; }
.u-flex-between   { display: flex; align-items: center; justify-content: space-between; }
.u-flex-column    { flex-direction: column; }
.u-flex-wrap      { flex-wrap: wrap; }
.u-flex-1         { flex: 1; }
.u-gap-2          { gap: var(--space-2); }
.u-gap-4          { gap: var(--space-4); }
.u-gap-6          { gap: var(--space-6); }
.u-gap-8          { gap: var(--space-8); }

/* ── Width ─────────────────────────────────────────────────────────────── */
.u-w-full  { width: 100%; }
.u-w-auto  { width: auto; }
.u-max-w-prose { max-width: 65ch; }
.u-max-w-narrow { max-width: 42rem; }

/* ── Background ────────────────────────────────────────────────────────── */
.u-bg-primary    { background-color: var(--color-primary); }
.u-bg-card       { background-color: var(--color-bg-card); }
.u-bg-alt        { background-color: var(--color-bg-alt); }
.u-bg-secondary  { background-color: var(--color-secondary-bg); }

/* ── Borders ───────────────────────────────────────────────────────────── */
.u-rounded-sm  { border-radius: var(--radius-sm); }
.u-rounded-md  { border-radius: var(--radius-md); }
.u-rounded-lg  { border-radius: var(--radius-lg); }
.u-rounded-xl  { border-radius: var(--radius-xl); }