/* ═══════════════════════════════════════════════════════════════════════════
   EXANAUT UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════
   Single-purpose classes for spacing, layout, text, and loading shimmers.
   Use these INSTEAD of inline styles in division templates.
   Spacing values map to tokens.css --space-* tokens.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── MARGIN TOP ──────────────────────────────────────────────────────────── */

.mt-xxs { margin-top: 2px !important; }                /* micro */
.mt-xs  { margin-top: var(--space-xs) !important; }   /* 4px  */
.mt-sm  { margin-top: var(--space-sm) !important; }   /* 8px  */
.mt-10  { margin-top: 10px !important; }               /* bridge value */
.mt-md  { margin-top: var(--space-md) !important; }   /* 16px */
.mt-lg  { margin-top: var(--space-lg) !important; }   /* 24px */
.mt-xl  { margin-top: var(--space-xl) !important; }   /* 32px */


/* ── MARGIN BOTTOM ───────────────────────────────────────────────────────── */

.mb-xs  { margin-bottom: var(--space-xs) !important; } /* 4px  */
.mb-6   { margin-bottom: 6px !important; }             /* bridge value */
.mb-sm  { margin-bottom: var(--space-sm) !important; } /* 8px  */
.mb-10  { margin-bottom: 10px !important; }             /* bridge value */
.mb-md  { margin-bottom: var(--space-md) !important; } /* 16px */
.mb-lg  { margin-bottom: var(--space-lg) !important; } /* 24px */


/* ── TEXT / COLOR ────────────────────────────────────────────────────────── */

.text-gold    { color: var(--gold) !important; }
.text-center  { text-align: center !important; }
.font-mono    { font-family: var(--font-data) !important; }
.ws-pre-wrap  { white-space: pre-wrap !important; }


/* ── LAYOUT ──────────────────────────────────────────────────────────────── */

.d-none          { display: none !important; }
.d-flex          { display: flex !important; }
.flex-col        { flex-direction: column !important; }
.flex-wrap       { flex-wrap: wrap !important; }
.items-center    { align-items: center !important; }
.items-end       { align-items: flex-end !important; }
.justify-center  { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.gap-xs          { gap: var(--space-xs) !important; }
.gap-sm          { gap: var(--space-sm) !important; }
.gap-12          { gap: 12px !important; }
.gap-md          { gap: var(--space-md) !important; }


/* ── OPACITY ─────────────────────────────────────────────────────────────── */

.opacity-30 { opacity: 0.3 !important; }


/* ── SHIMMER LOADING PLACEHOLDER HEIGHTS ─────────────────────────────────── */
/* Apply alongside .loading-shimmer for skeleton placeholders */

.shimmer-h-xs   { height: 16px; }
.shimmer-h-sm   { height: 20px; }
.shimmer-h-md   { height: 42px; }
.shimmer-h-lg   { height: 80px; }


/* ── MIN HEIGHT ──────────────────────────────────────────────────────────── */

.min-h-100 { min-height: 100px; }
.min-h-120 { min-height: 120px; }


/* ── ICON / EMOJI FONT SIZE ──────────────────────────────────────────────── */

.text-icon-xl { font-size: calc(32px * var(--font-scale)); }