/* ===========================================================
   Utilities
   - Small, single-purpose helpers (opt-in only)
   - Keep these side-effect free: they should not alter styles
     unless the class is explicitly applied in markup
   =========================================================== */

/* ---- Accessibility / Visibility ---- */
.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Common alias */
.hidden { display: none !important; }

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

/* Muted/secondary text (matches your theme tokens) */
.text-muted { color: var(--muted) !important; }

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

.items-center { align-items: center !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.flex-col { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.gap-2 { gap: .5rem !important; }
.gap-4 { gap: 1rem !important; }

/* Width helpers */
.w-full { width: 100% !important; }
.max-w-wrap { max-width: var(--wrap-max) !important; }

/* ---- Spacing (minimal set to avoid bloat) ---- */
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: .75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.p-2 { padding: .5rem !important; }
.p-4 { padding: 1rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }

/* ---- Radius / Shadows ---- */
.rounded { border-radius: var(--radius) !important; }
.rounded-sm { border-radius: 8px !important; }
.rounded-lg { border-radius: 16px !important; }

.shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,.12) !important; }
.shadow { box-shadow: 0 4px 10px rgba(0,0,0,.15) !important; }

/* ---- Theme utility you already use (moved here) ---- */
.gradient-text {
  position: relative;
  font-weight: 600;
  font-size: 1rem;
  background: linear-gradient(to right, #2563eb, #9333ea);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background 0.3s ease;
}
.gradient-text:hover {
  background: linear-gradient(to right, #1d4ed8, #7e22ce);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}