/* ═══════════════════════════════════════════════════════════
   Utility Classes — The Balance Space
   ═══════════════════════════════════════════════════════════ */

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

.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); }

.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); }

.ml-xs { margin-left: var(--space-xs); }
.ml-sm { margin-left: var(--space-sm); }
.ml-md { margin-left: var(--space-md); }

.mr-xs { margin-right: var(--space-xs); }
.mr-sm { margin-right: var(--space-sm); }
.mr-md { margin-right: var(--space-md); }

/* ─── Spacing: padding ─── */
.p-xs  { padding: var(--space-xs); }
.p-sm  { padding: var(--space-sm); }
.p-md  { padding: var(--space-md); }
.p-lg  { padding: var(--space-lg); }
.p-xl  { padding: var(--space-xl); }

.pt-xs { padding-top: var(--space-xs); }
.pt-sm { padding-top: var(--space-sm); }
.pt-md { padding-top: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }

.pb-xs { padding-bottom: var(--space-xs); }
.pb-sm { padding-bottom: var(--space-sm); }
.pb-md { padding-bottom: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }

.px-md { padding-inline: var(--space-md); }
.px-lg { padding-inline: var(--space-lg); }
.py-md { padding-block: var(--space-md); }
.py-lg { padding-block: var(--space-lg); }

/* ─── Gap ─── */
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

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

/* ─── Text ─── */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-xs     { font-size: var(--font-size-xs); }
.text-sm     { font-size: var(--font-size-sm); }
.text-base   { font-size: var(--font-size-base); }
.text-lg     { font-size: var(--font-size-lg); }
.text-xl     { font-size: var(--font-size-xl); }
.text-2xl    { font-size: var(--font-size-2xl); }
.font-bold   { font-weight: 500; }
.font-medium { font-weight: 500; }
.text-dim    { color: var(--color-on-surface-dim); }
.text-error  { color: var(--color-error); }
.text-success { color: var(--color-success); }

/* ─── Visibility ─── */
.desktop-only {
  display: none;
}
@media (min-width: 1024px) {
  .desktop-only { display: block; }
  .mobile-only  { display: none; }
}

.mobile-only {
  display: block;
}

.tablet-up {
  display: none;
}
@media (min-width: 768px) {
  .tablet-up { display: block; }
}

/* ─── Misc ─── */
.w-full { width: 100%; }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.shadow-sm  { box-shadow: var(--shadow-sm); }
.shadow-md  { box-shadow: var(--shadow-md); }