/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Layout */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-center { justify-content: center; align-items: center; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

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

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

/* Text Size */
.txt-sm { font-size: var(--font-size-sm); }
.txt-md { font-size: var(--font-size-md); }
.txt-lg { font-size: var(--font-size-lg); }
.txt-xl { font-size: var(--font-size-xl); }
.txt-2xl { font-size: var(--font-size-2xl); }

/* Text Transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

/* Font Weight */
.font-bold { font-weight: 700; }
.font-black { font-weight: 900; }

/* Text Colors */
.txt-primary { color: var(--color-primary); }
.txt-secondary { color: var(--color-secondary); }
.txt-accent { color: var(--color-accent); }
.txt-danger { color: var(--color-danger); }
.txt-success { color: var(--color-success); }

/* Margin */
.m-0 { margin: 0; }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }

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

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

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

/* Padding */
.p-0 { padding: 0; }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }

.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }

/* Width */
.w-full { width: 100%; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-narrow { max-width: 50rem; }
.max-w-medium { max-width: 70rem; }
.max-w-wide { max-width: 1200rem; }

/* Height */
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }

/* Display */
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }

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

/* Cursor */
.pointer { cursor: pointer; }