@charset "UTF-8";

/**
 * Modern Utility Classes - Apple-Inspired
 * 
 * Purpose: Utility-first CSS helpers for rapid development
 * Approach: Composable, single-purpose classes
 * 
 * Features:
 * - Flexbox & Grid utilities
 * - Spacing utilities (margin, padding)
 * - Display & visibility utilities
 * - Position utilities
 * - Size & dimension utilities
 * - Background & border utilities
 * - Interaction utilities
 * - Responsive variants
 * 
 * Load this file LAST in the core CSS stack
 * 
 * @charset UTF-8
 * @version 1.0.0
 * @date 2026-01-21
 */


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

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }
.d-inline-grid { display: inline-grid !important; }

/* Responsive display utilities */
@media (min-width: 576px) {
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-flex { display: flex !important; }
    .d-sm-grid { display: grid !important; }
}

@media (min-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
    .d-md-grid { display: grid !important; }
}

@media (min-width: 1024px) {
    .d-lg-none { display: none !important; }
    .d-lg-block { display: block !important; }
    .d-lg-flex { display: flex !important; }
    .d-lg-grid { display: grid !important; }
}


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

/* Direction */
.flex-row { flex-direction: row !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column { flex-direction: column !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }

/* Wrap */
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

/* Justify content */
.justify-start { justify-content: flex-start !important; }
.justify-end { justify-content: flex-end !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.justify-evenly { justify-content: space-evenly !important; }

/* Align items */
.align-start { align-items: flex-start !important; }
.align-end { align-items: flex-end !important; }
.align-center { align-items: center !important; }
.align-baseline { align-items: baseline !important; }
.align-stretch { align-items: stretch !important; }

/* Align self */
.align-self-start { align-self: flex-start !important; }
.align-self-end { align-self: flex-end !important; }
.align-self-center { align-self: center !important; }
.align-self-baseline { align-self: baseline !important; }
.align-self-stretch { align-self: stretch !important; }

/* Align content */
.align-content-start { align-content: flex-start !important; }
.align-content-end { align-content: flex-end !important; }
.align-content-center { align-content: center !important; }
.align-content-between { align-content: space-between !important; }
.align-content-around { align-content: space-around !important; }
.align-content-stretch { align-content: stretch !important; }

/* Flex grow/shrink */
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }

/* Flex */
.flex-1 { flex: 1 1 0% !important; }
.flex-auto { flex: 1 1 auto !important; }
.flex-initial { flex: 0 1 auto !important; }
.flex-none { flex: none !important; }

/* Gap */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }
.gap-6 { gap: var(--space-6) !important; }
.gap-8 { gap: var(--space-8) !important; }


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

/* Grid columns */
.grid-cols-1 { grid-template-columns: repeat(1, 1fr) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr) !important; }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr) !important; }

/* Responsive grid */
@media (min-width: 768px) {
    .grid-cols-md-2 { grid-template-columns: repeat(2, 1fr) !important; }
    .grid-cols-md-3 { grid-template-columns: repeat(3, 1fr) !important; }
    .grid-cols-md-4 { grid-template-columns: repeat(4, 1fr) !important; }
}

@media (min-width: 1024px) {
    .grid-cols-lg-3 { grid-template-columns: repeat(3, 1fr) !important; }
    .grid-cols-lg-4 { grid-template-columns: repeat(4, 1fr) !important; }
    .grid-cols-lg-5 { grid-template-columns: repeat(5, 1fr) !important; }
}

/* Grid column span */
.col-span-1 { grid-column: span 1 / span 1 !important; }
.col-span-2 { grid-column: span 2 / span 2 !important; }
.col-span-3 { grid-column: span 3 / span 3 !important; }
.col-span-4 { grid-column: span 4 / span 4 !important; }
.col-span-full { grid-column: 1 / -1 !important; }


/* ============================================================
   SPACING UTILITIES - Margin
   ============================================================ */

/* Margin all sides */
.m-0 { margin: 0 !important; }
.m-1 { margin: var(--space-1) !important; }
.m-2 { margin: var(--space-2) !important; }
.m-3 { margin: var(--space-3) !important; }
.m-4 { margin: var(--space-4) !important; }
.m-6 { margin: var(--space-6) !important; }
.m-8 { margin: var(--space-8) !important; }
.m-auto { margin: auto !important; }

/* Margin top */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mt-8 { margin-top: var(--space-8) !important; }
.mt-auto { margin-top: auto !important; }

/* Margin bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.mb-8 { margin-bottom: var(--space-8) !important; }
.mb-auto { margin-bottom: auto !important; }

/* Margin left */
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: var(--space-1) !important; }
.ml-2 { margin-left: var(--space-2) !important; }
.ml-3 { margin-left: var(--space-3) !important; }
.ml-4 { margin-left: var(--space-4) !important; }
.ml-6 { margin-left: var(--space-6) !important; }
.ml-8 { margin-left: var(--space-8) !important; }
.ml-auto { margin-left: auto !important; }

/* Margin right */
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: var(--space-1) !important; }
.mr-2 { margin-right: var(--space-2) !important; }
.mr-3 { margin-right: var(--space-3) !important; }
.mr-4 { margin-right: var(--space-4) !important; }
.mr-6 { margin-right: var(--space-6) !important; }
.mr-8 { margin-right: var(--space-8) !important; }
.mr-auto { margin-right: auto !important; }

/* Margin horizontal */
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
.mx-2 { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
.mx-3 { margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
.mx-4 { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
.mx-6 { margin-left: var(--space-6) !important; margin-right: var(--space-6) !important; }
.mx-8 { margin-left: var(--space-8) !important; margin-right: var(--space-8) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Margin vertical */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
.my-2 { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
.my-3 { margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
.my-4 { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
.my-6 { margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }
.my-8 { margin-top: var(--space-8) !important; margin-bottom: var(--space-8) !important; }


/* ============================================================
   SPACING UTILITIES - Padding
   ============================================================ */

/* Padding all sides */
.p-0 { padding: 0 !important; }
.p-1 { padding: var(--space-1) !important; }
.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-3) !important; }
.p-4 { padding: var(--space-4) !important; }
.p-6 { padding: var(--space-6) !important; }
.p-8 { padding: var(--space-8) !important; }

/* Padding top */
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: var(--space-1) !important; }
.pt-2 { padding-top: var(--space-2) !important; }
.pt-3 { padding-top: var(--space-3) !important; }
.pt-4 { padding-top: var(--space-4) !important; }
.pt-6 { padding-top: var(--space-6) !important; }
.pt-8 { padding-top: var(--space-8) !important; }

/* Padding bottom */
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: var(--space-1) !important; }
.pb-2 { padding-bottom: var(--space-2) !important; }
.pb-3 { padding-bottom: var(--space-3) !important; }
.pb-4 { padding-bottom: var(--space-4) !important; }
.pb-6 { padding-bottom: var(--space-6) !important; }
.pb-8 { padding-bottom: var(--space-8) !important; }

/* Padding left */
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: var(--space-1) !important; }
.pl-2 { padding-left: var(--space-2) !important; }
.pl-3 { padding-left: var(--space-3) !important; }
.pl-4 { padding-left: var(--space-4) !important; }
.pl-6 { padding-left: var(--space-6) !important; }
.pl-8 { padding-left: var(--space-8) !important; }

/* Padding right */
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: var(--space-1) !important; }
.pr-2 { padding-right: var(--space-2) !important; }
.pr-3 { padding-right: var(--space-3) !important; }
.pr-4 { padding-right: var(--space-4) !important; }
.pr-6 { padding-right: var(--space-6) !important; }
.pr-8 { padding-right: var(--space-8) !important; }

/* Padding horizontal */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
.px-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.px-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
.px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.px-6 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
.px-8 { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }

/* Padding vertical */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.py-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
.py-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }


/* ============================================================
   WIDTH & HEIGHT UTILITIES
   ============================================================ */

/* Width */
.w-auto { width: auto !important; }
.w-full { width: 100% !important; }
.w-screen { width: 100vw !important; }
.w-min { width: min-content !important; }
.w-max { width: max-content !important; }
.w-fit { width: fit-content !important; }

.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }

/* Height */
.h-auto { height: auto !important; }
.h-full { height: 100% !important; }
.h-screen { height: 100vh !important; }
.h-min { height: min-content !important; }
.h-max { height: max-content !important; }
.h-fit { height: fit-content !important; }

/* Min/Max width */
.min-w-0 { min-width: 0 !important; }
.min-w-full { min-width: 100% !important; }
.max-w-full { max-width: 100% !important; }
.max-w-screen { max-width: 100vw !important; }

/* Min/Max height */
.min-h-0 { min-height: 0 !important; }
.min-h-full { min-height: 100% !important; }
.min-h-screen { min-height: 100vh !important; }
.max-h-full { max-height: 100% !important; }
.max-h-screen { max-height: 100vh !important; }


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

.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

/* Positioning offsets */
.top-0 { top: 0 !important; }
.right-0 { right: 0 !important; }
.bottom-0 { bottom: 0 !important; }
.left-0 { left: 0 !important; }

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


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

.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }

.overflow-x-auto { overflow-x: auto !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-y-auto { overflow-y: auto !important; }
.overflow-y-hidden { overflow-y: hidden !important; }


/* ============================================================
   Z-INDEX UTILITIES
   ============================================================ */

.z-0 { z-index: 0 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-30 { z-index: 30 !important; }
.z-40 { z-index: 40 !important; }
.z-50 { z-index: 50 !important; }
.z-auto { z-index: auto !important; }

.z-dropdown { z-index: var(--z-dropdown) !important; }
.z-sticky { z-index: var(--z-sticky) !important; }
.z-fixed { z-index: var(--z-fixed) !important; }
.z-modal { z-index: var(--z-modal) !important; }
.z-top { z-index: var(--z-top) !important; }


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

.opacity-0 { opacity: 0 !important; }
.opacity-10 { opacity: 0.1 !important; }
.opacity-20 { opacity: 0.2 !important; }
.opacity-30 { opacity: 0.3 !important; }
.opacity-40 { opacity: 0.4 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-60 { opacity: 0.6 !important; }
.opacity-70 { opacity: 0.7 !important; }
.opacity-80 { opacity: 0.8 !important; }
.opacity-90 { opacity: 0.9 !important; }
.opacity-100 { opacity: 1 !important; }


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

.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }


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

/* Border width */
.border-0 { border-width: 0 !important; }
.border { border-width: 1px !important; }
.border-2 { border-width: 2px !important; }

.border-t { border-top-width: 1px !important; }
.border-r { border-right-width: 1px !important; }
.border-b { border-bottom-width: 1px !important; }
.border-l { border-left-width: 1px !important; }

/* Border style */
.border-solid { border-style: solid !important; }
.border-dashed { border-style: dashed !important; }
.border-dotted { border-style: dotted !important; }
.border-none { border-style: none !important; }

/* Border color */
.border-primary { border-color: var(--modern-border-primary) !important; }
.border-secondary { border-color: var(--modern-border-secondary) !important; }
.border-transparent { border-color: transparent !important; }


/* ============================================================
   BORDER RADIUS UTILITIES
   ============================================================ */

.rounded-none { border-radius: 0 !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded { border-radius: var(--radius-md) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-2xl { border-radius: var(--radius-2xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* Specific corners */
.rounded-t { border-top-left-radius: var(--radius-md) !important; border-top-right-radius: var(--radius-md) !important; }
.rounded-r { border-top-right-radius: var(--radius-md) !important; border-bottom-right-radius: var(--radius-md) !important; }
.rounded-b { border-bottom-left-radius: var(--radius-md) !important; border-bottom-right-radius: var(--radius-md) !important; }
.rounded-l { border-top-left-radius: var(--radius-md) !important; border-bottom-left-radius: var(--radius-md) !important; }


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

.bg-transparent { background-color: transparent !important; }
.bg-white { background-color: var(--modern-white) !important; }
.bg-black { background-color: var(--modern-black) !important; }
.bg-primary { background-color: var(--modern-surface-primary) !important; }
.bg-secondary { background-color: var(--modern-surface-secondary) !important; }
.bg-tertiary { background-color: var(--modern-surface-tertiary) !important; }


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

.shadow-none { box-shadow: none !important; }
.shadow-xs { box-shadow: var(--shadow-xs) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow-md) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-2xl { box-shadow: var(--shadow-2xl) !important; }


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

.cursor-auto { cursor: auto !important; }
.cursor-default { cursor: default !important; }
.cursor-pointer { cursor: pointer !important; }
.cursor-wait { cursor: wait !important; }
.cursor-text { cursor: text !important; }
.cursor-move { cursor: move !important; }
.cursor-not-allowed { cursor: not-allowed !important; }


/* ============================================================
   USER SELECT UTILITIES
   ============================================================ */

.select-none { user-select: none !important; -webkit-user-select: none !important; }
.select-text { user-select: text !important; -webkit-user-select: text !important; }
.select-all { user-select: all !important; -webkit-user-select: all !important; }
.select-auto { user-select: auto !important; -webkit-user-select: auto !important; }


/* ============================================================
   POINTER EVENTS UTILITIES
   ============================================================ */

.pointer-events-none { pointer-events: none !important; }
.pointer-events-auto { pointer-events: auto !important; }


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

.transition-none { transition: none !important; }
.transition-all { transition: var(--transition-all) !important; }
.transition-colors { transition: var(--transition-colors) !important; }
.transition-opacity { transition: var(--transition-opacity) !important; }
.transition-transform { transition: var(--transition-transform) !important; }


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

.transform-none { transform: none !important; }

/* Scale */
.scale-0 { transform: scale(0) !important; }
.scale-50 { transform: scale(0.5) !important; }
.scale-75 { transform: scale(0.75) !important; }
.scale-90 { transform: scale(0.9) !important; }
.scale-95 { transform: scale(0.95) !important; }
.scale-100 { transform: scale(1) !important; }
.scale-105 { transform: scale(1.05) !important; }
.scale-110 { transform: scale(1.1) !important; }

/* Rotate */
.rotate-0 { transform: rotate(0deg) !important; }
.rotate-45 { transform: rotate(45deg) !important; }
.rotate-90 { transform: rotate(90deg) !important; }
.rotate-180 { transform: rotate(180deg) !important; }


/* ============================================================
   ASPECT RATIO UTILITIES
   ============================================================ */

.aspect-square {
    aspect-ratio: 1 / 1 !important;
}

.aspect-video {
    aspect-ratio: 16 / 9 !important;
}

.aspect-auto {
    aspect-ratio: auto !important;
}


/* ============================================================
   OBJECT FIT UTILITIES
   ============================================================ */

.object-contain { object-fit: contain !important; }
.object-cover { object-fit: cover !important; }
.object-fill { object-fit: fill !important; }
.object-none { object-fit: none !important; }
.object-scale-down { object-fit: scale-down !important; }

/* Object position */
.object-center { object-position: center !important; }
.object-top { object-position: top !important; }
.object-bottom { object-position: bottom !important; }
.object-left { object-position: left !important; }
.object-right { object-position: right !important; }


/* ============================================================
   TOUCH ACTION UTILITIES
   ============================================================ */

.touch-auto { touch-action: auto !important; }
.touch-none { touch-action: none !important; }
.touch-pan-x { touch-action: pan-x !important; }
.touch-pan-y { touch-action: pan-y !important; }
.touch-manipulation { touch-action: manipulation !important; }


/* ============================================================
   VERTICAL ALIGN UTILITIES
   ============================================================ */

.align-baseline { vertical-align: baseline !important; }
.align-top { vertical-align: top !important; }
.align-middle { vertical-align: middle !important; }
.align-bottom { vertical-align: bottom !important; }
.align-text-top { vertical-align: text-top !important; }
.align-text-bottom { vertical-align: text-bottom !important; }


/* ============================================================
   WHITE SPACE UTILITIES
   ============================================================ */

.whitespace-normal { white-space: normal !important; }
.whitespace-nowrap { white-space: nowrap !important; }
.whitespace-pre { white-space: pre !important; }
.whitespace-pre-line { white-space: pre-line !important; }
.whitespace-pre-wrap { white-space: pre-wrap !important; }


/* ============================================================
   WORD BREAK UTILITIES
   ============================================================ */

.break-normal { word-break: normal !important; overflow-wrap: normal !important; }
.break-words { overflow-wrap: break-word !important; }
.break-all { word-break: break-all !important; }


/* ============================================================
   MOBILE-SPECIFIC UTILITIES
   ============================================================ */

@media (max-width: 767px) {
    /* Touch-friendly utilities */
    .touch-target {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Prevent zoom on input focus */
    .no-zoom-input {
        font-size: 16px !important;
    }
    
    /* Safe area padding */
    .safe-area-top {
        padding-top: var(--safe-area-inset-top) !important;
    }
    
    .safe-area-bottom {
        padding-bottom: var(--safe-area-inset-bottom) !important;
    }
}


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

.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

@media (min-width: 576px) {
    .container {
        max-width: var(--container-sm);
    }
}

@media (min-width: 768px) {
    .container {
        max-width: var(--container-md);
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: var(--container-lg);
    }
}

@media (min-width: 1440px) {
    .container {
        max-width: var(--container-xl);
    }
}

.container-fluid {
    width: 100%;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}


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

/* High contrast mode support */
@media (prefers-contrast: high) {
    .border {
        border-color: currentColor !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .transition-all,
    .transition-colors,
    .transition-opacity,
    .transition-transform {
        transition: none !important;
    }
}


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

/* Hover states (only on devices that support hover) */
@media (hover: hover) and (pointer: fine) {
    .hover\:opacity-80:hover {
        opacity: 0.8 !important;
    }
    
    .hover\:opacity-90:hover {
        opacity: 0.9 !important;
    }
    
    .hover\:scale-105:hover {
        transform: scale(1.05) !important;
    }
    
    .hover\:shadow-lg:hover {
        box-shadow: var(--shadow-lg) !important;
    }
}

/* Active states */
.active\:opacity-80:active {
    opacity: 0.8 !important;
}

.active\:scale-95:active {
    transform: scale(0.95) !important;
}


/* ============================================================
   GLASSMORPHISM UTILITY
   ============================================================ */

.glass {
    background: var(--modern-glass-bg) !important;
    backdrop-filter: var(--backdrop-blur-lg) !important;
    -webkit-backdrop-filter: var(--backdrop-blur-lg) !important;
    border: 1px solid var(--modern-glass-border) !important;
}


/* ============================================================
   UTILITY COMBINATIONS (Common Patterns)
   ============================================================ */

/* Center flexbox */
.flex-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Full bleed */
.full-bleed {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
}

/* Clickable area expand */
.click-area-expand::after {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
}