/* ============================================
   UTILITY CLASSES
   Single-purpose, reusable classes for common inline style patterns
   ============================================ */

/* TEXT ALIGNMENT */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* DISPLAY */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.grid { display: grid; }
.inline-block { display: inline-block; }
.block { display: block; }

/* FLEXBOX */
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

/* GAP (Flexbox/Grid) */
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }
.gap-3xl { gap: var(--space-3xl); }

/* MARGIN */
.m-0 { margin: 0; }
.m-auto { margin: 0 auto; }
.mt-0 { margin-top: 0; }
.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-3xl { margin-top: var(--space-3xl); }
.mb-0 { margin-bottom: 0; }
.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); }
.mb-3xl { margin-bottom: var(--space-3xl); }

/* PADDING */
.p-0 { padding: 0; }
.pt-md { padding-top: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }
.pt-xl { padding-top: var(--space-xl); }
.pt-2xl { padding-top: var(--space-2xl); }
.pt-3xl { padding-top: var(--space-3xl); }
.pt-4xl { padding-top: var(--space-4xl); }
.pb-md { padding-bottom: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }
.pb-xl { padding-bottom: var(--space-xl); }
.pb-2xl { padding-bottom: var(--space-2xl); }
.pb-3xl { padding-bottom: var(--space-3xl); }
.pb-4xl { padding-bottom: var(--space-4xl); }
.py-4xl { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); }

/* MAX-WIDTH (Common content widths) */
.max-w-700 { max-width: 700px; margin-left: auto; margin-right: auto; }
.max-w-800 { max-width: 800px; margin-left: auto; margin-right: auto; }
.max-w-900 { max-width: 900px; margin-left: auto; margin-right: auto; }
.max-w-1000 { max-width: 1000px; margin-left: auto; margin-right: auto; }

/* POSITION */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

/* Z-INDEX */
.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }

/* WIDTH */
.w-full { width: 100%; }
.w-auto { width: auto; }

/* HEIGHT */
.h-full { height: 100%; }
.h-auto { height: auto; }

/* OVERFLOW */
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }

/* POINTER EVENTS */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }