/* ============================================================
   UTILITIES.CSS — Arihant Fabrics
   Role: Single-purpose helper classes used across all pages.
         These supplement component styles — never replace them.
   ============================================================ */


/* ── Spacing helpers ── */
.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-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); }


/* ── Text helpers ── */
.text-navy   { color: var(--color-navy); }
.text-muted  { color: var(--color-text-muted); }
.text-white  { color: var(--color-white); }
.text-gold   { color: var(--color-gold); }

.text-sm     { font-size: var(--font-size-sm); }
.text-xs     { font-size: var(--font-size-xs); }

.text-center  { text-align: center; }
.text-left    { text-align: left; }

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


/* ── Display helpers ── */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.gap-sm      { gap: var(--space-sm); }
.gap-md      { gap: var(--space-md); }
.gap-lg      { gap: var(--space-lg); }

/* Responsive visibility — used for mobile/desktop form fields */
.desktop-only { display: none; }   /* hidden on mobile, shown at ≥768px below */
.mobile-only  { display: block; }  /* shown on mobile, hidden at ≥768px below */

@media (min-width: 768px) {
  .desktop-only {
    display: block;
  }
  .mobile-only {
    display: none;
  }
}


/* ── Width helpers ── */
.w-full { width: 100%; }
.max-w-prose { max-width: var(--max-width-text); }


/* ── Dividers ── */
.divider {
  height: 1px;
  background: var(--color-border);
  border: none;
  margin: 0;
}

.divider--faint {
  background: rgba(10, 37, 117, 0.06);
}


/* ── End of utilities.css ── */