/* ==========================================================
   04-utilities.css
   Small, intentional utility helpers
   Use sparingly and deliberately
   ========================================================== */

/* ------------------------------
   Spacing utilities (margin)
------------------------------ */
.u-mt-0 { margin-top: 0 !important; }
.u-mt-sm { margin-top: var(--space-2, 12px) !important; }
.u-mt-md { margin-top: var(--space-4, 24px) !important; }
.u-mt-lg { margin-top: var(--space-5, 36px) !important; }

.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-sm { margin-bottom: var(--space-2, 12px) !important; }
.u-mb-md { margin-bottom: var(--space-4, 24px) !important; }
.u-mb-lg { margin-bottom: var(--space-5, 36px) !important; }

/* ------------------------------
   Spacing utilities (padding)
------------------------------ */
.u-pt-sm { padding-top: var(--space-2, 12px) !important; }
.u-pt-md { padding-top: var(--space-4, 24px) !important; }
.u-pt-lg { padding-top: var(--space-5, 36px) !important; }

.u-pb-sm { padding-bottom: var(--space-2, 12px) !important; }
.u-pb-md { padding-bottom: var(--space-4, 24px) !important; }
.u-pb-lg { padding-bottom: var(--space-5, 36px) !important; }

/* ------------------------------
   Text alignment
------------------------------ */
.u-text-left { text-align: left !important; }
.u-text-center { text-align: center !important; }
.u-text-right { text-align: right !important; }

/* ------------------------------
   Text weight & transform
------------------------------ */
.u-text-uppercase { text-transform: uppercase !important; }
.u-text-normal { font-weight: 400 !important; }
.u-text-bold { font-weight: 700 !important; }

/* ------------------------------
   Color utilities
   (Use carefully, prefer components)
------------------------------ */
.u-text-muted {
  color: var(--color-muted, #666) !important;
}

.u-text-primary {
  color: var(--color-primary, #000) !important;
}

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

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

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

/* ------------------------------
   Visibility
------------------------------ */
.u-hidden {
  display: none !important;
}

@media (max-width: 768px) {
  .u-hide-mobile {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .u-hide-desktop {
    display: none !important;
  }
}