/* ═══════════════════════════════════════════════════════════
   IRENACER — Utilities
   Spacing, text alignment, display, visibility.
   ═══════════════════════════════════════════════════════════ */

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

/* ─── Text Colors ─── */
.text-primary   { color: var(--color-primary-500); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-inverse   { color: var(--text-inverse); }
.text-cuerpo    { color: var(--color-cuerpo); }
.text-mente     { color: var(--color-mente); }
.text-ambiente  { color: var(--color-ambiente); }
.text-accent    { color: var(--color-accent); }

/* ─── Background Colors ─── */
.bg-page     { background-color: var(--surface-page); }
.bg-card     { background-color: var(--surface-card); }
.bg-muted    { background-color: var(--surface-muted); }
.bg-dark     { background-color: var(--surface-dark); }
.bg-primary  { background-color: var(--color-primary-500); color: var(--text-inverse); }
.bg-cuerpo   { background-color: var(--color-cuerpo-light); }
.bg-mente    { background-color: var(--color-mente-light); }
.bg-ambiente { background-color: var(--color-ambiente-light); }

/* ─── Font Styles ─── */
.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }
.font-light   { font-weight: var(--weight-light); }
.font-regular { font-weight: var(--weight-regular); }
.font-medium  { font-weight: var(--weight-medium); }
.font-semibold{ font-weight: var(--weight-semibold); }
.font-bold    { font-weight: var(--weight-bold); }

/* ─── Font Sizes ─── */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.text-4xl  { font-size: var(--text-4xl); }

/* ─── Text Transform ─── */
.uppercase  { text-transform: uppercase; }
.lowercase  { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.tracking-wide   { letter-spacing: var(--tracking-wide); }
.tracking-wider  { letter-spacing: var(--tracking-wider); }
.tracking-widest { letter-spacing: var(--tracking-widest); }

/* ─── Margins (top & bottom only — spacing scale) ─── */
.mt-0  { margin-top: 0; }
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

.mx-auto { margin-left: auto; margin-right: auto; }

/* ─── Paddings ─── */
.p-0  { padding: 0; }
.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }
.p-12 { padding: var(--space-12); }

.py-4  { padding-top: var(--space-4);  padding-bottom: var(--space-4); }
.py-8  { padding-top: var(--space-8);  padding-bottom: var(--space-8); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }

.px-4  { padding-left: var(--space-4);  padding-right: var(--space-4); }
.px-6  { padding-left: var(--space-6);  padding-right: var(--space-6); }

/* ─── Width constraints ─── */
.max-w-prose { max-width: 65ch; }
.max-w-sm    { max-width: 640px; }
.max-w-md    { max-width: 768px; }
.max-w-lg    { max-width: 1024px; }
.w-full      { width: 100%; }

/* ─── Border Radius ─── */
.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-full{ border-radius: var(--radius-full); }

/* ─── Overflow ─── */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* ─── Position ─── */
.relative { position: relative; }
.absolute { position: absolute; }

/* ─── Opacity ─── */
.opacity-0   { opacity: 0; }
.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ─── Image utilities ─── */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.img-rounded {
  border-radius: var(--radius-lg);
}

/* ─── Transforms ─── */
.rotate-180 { transform: rotate(180deg); }