/* ==================== UTILITY CLASSES ==================== */
/* Global utility classes for consistent spacing, shadows, and transitions */

/* === Spacing Utilities === */
.util-mt-0 { margin-top: 0; }
.util-mt-1 { margin-top: calc(var(--spacing) * 0.5); }
.util-mt-2 { margin-top: var(--spacing); }
.util-mt-3 { margin-top: calc(var(--spacing) * 1.5); }
.util-mt-4 { margin-top: calc(var(--spacing) * 2); }

.util-mb-0 { margin-bottom: 0; }
.util-mb-1 { margin-bottom: calc(var(--spacing) * 0.5); }
.util-mb-2 { margin-bottom: var(--spacing); }
.util-mb-3 { margin-bottom: calc(var(--spacing) * 1.5); }
.util-mb-4 { margin-bottom: calc(var(--spacing) * 2); }

.util-gap-1 { gap: calc(var(--spacing) * 0.5); }
.util-gap-2 { gap: var(--spacing); }
.util-gap-3 { gap: calc(var(--spacing) * 1.5); }
.util-gap-4 { gap: calc(var(--spacing) * 2); }

/* === Shadow Utilities === */
.util-shadow-light { box-shadow: var(--shadow-light); }
.util-shadow-medium { box-shadow: var(--shadow-medium); }
.util-shadow-heavy { box-shadow: var(--shadow-heavy); }

/* === Transition Utilities === */
.util-transition { transition: var(--transition); }
.util-transition-fast { transition: var(--transition-fast); }
.util-transition-slow { transition: var(--transition-slow); }

/* === Display Utilities === */
.hidden { display: none !important; }
.visible { display: block !important; }
.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }