/* ============================================================
   Utilities — Common Utility Classes
   ============================================================
   Background, spacing, display, and general-purpose utilities.
   ============================================================ */

/* ── Background Utilities ─────────────────────────────────── */
.bg-primary     { background-color: var(--color-primary); }
.bg-surface     { background-color: var(--color-surface); }
.bg-background  { background-color: var(--color-background); }
.bg-dark        { background-color: var(--color-dark); }
.bg-glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
}
.bg-primary-gradient { background: var(--gradient-primary); }

.bg-primary-subtle { background-color: var(--color-primary-subtle); }
.bg-success-subtle { background-color: var(--color-success-subtle); }
.bg-warning-subtle { background-color: var(--color-warning-subtle); }
.bg-danger-subtle  { background-color: var(--color-danger-subtle); }
.bg-accent-subtle  { background-color: var(--color-accent-subtle); }

/* ── Spacing Utilities ────────────────────────────────────── */
.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); }
.mt-auto { margin-top: auto; }

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

.ml-auto { margin-left: auto; }

.p-md  { padding: var(--space-md); }
.p-lg  { padding: var(--space-lg); }
.p-xl  { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }

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

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

/* ── Border Utilities ─────────────────────────────────────── */
.rounded-sm  { border-radius: var(--radius-sm); }
.rounded-md  { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-xl  { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-pill { border-radius: var(--radius-pill); }
.rounded-full { border-radius: 50%; }

/* ── Shadow Utilities ─────────────────────────────────────── */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* ── Image Utilities ──────────────────────────────────────── */
.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Opacity ──────────────────────────────────────────────── */
.opacity-75 { opacity: 0.75; }
.opacity-85 { opacity: 0.85; }

/* ── Misc ─────────────────────────────────────────────────── */
.no-select {
  -webkit-user-select: none;
  user-select: none;
}

.pointer { cursor: pointer; }