/* ==========================================================================
   UTILITIES
   ========================================================================== */

/* TYPOGRAPHY */
.font-mono { font-family: var(--font-mono); }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-normal { font-weight: 400; }

.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.capitalize { text-transform: capitalize; }
.uppercase { text-transform: uppercase; }

/* COLORS */
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }
.text-white { color: white; }
.text-gray-300 { color: #d1d5db; }
.text-gray-500 { color: #888; }
.text-gray-600 { color: #666; }

.bg-primary { background-color: var(--color-primary); }
.bg-gray-50 { background: rgba(255, 255, 255, 0.05); }
.bg-gray-100 { background: rgba(255, 255, 255, 0.1); }

/* SPACING */
.m-0 { margin: 0; }
.m-auto { margin: auto; }

.mt-xs { margin-top: var(--space-xs); }
.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-xs { margin-bottom: var(--space-xs); }
.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); }

.ml-sm { margin-left: var(--space-sm); }
.mr-sm { margin-right: var(--space-sm); }

.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-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

/* BORDERS */
.border { border: 1px solid rgba(100, 100, 255, 0.3); }
.border-b { border-bottom: 1px solid rgba(100, 100, 255, 0.1); }
.border-none { border: none; }

.rounded { border-radius: var(--radius-md); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

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

/* SIZING */
.w-full { width: 100%; }
.h-full { height: 100%; }

.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-3xl { max-width: 48rem; }

.min-h-screen { min-height: 100vh; }

/* POSITIONING */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.top-0 { top: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

/* Z-INDEX */
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.z-100 { z-index: 100; }

/* INTERACTIONS */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

.transition-all { transition: all var(--transition-base); }
.transition-fast { transition: all var(--transition-fast); }

.hover\:opacity-80:hover { opacity: 0.8; }
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:translate-y--2:hover { transform: translateY(-2px); }

/* OVERFLOW */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }

/* OPACITY */
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-100 { opacity: 1; }

/* EFFECTS */
.shadow { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.shadow-lg { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); }

.backdrop-blur { backdrop-filter: blur(10px); }