/**
 * VEC Design System - Utility Classes
 * Reusable utility classes for common patterns
 */

/* ========================================
   SPACING UTILITIES (Margin & Padding)
   Usage: .mt-m (margin-top: medium), .p-l (padding: large)
   ======================================== */

/* Margin utilities */
.m-0 { margin: 0 !important; }
.m-2xs { margin: var(--space-2xs) !important; }
.m-xs { margin: var(--space-xs) !important; }
.m-s { margin: var(--space-s) !important; }
.m-m { margin: var(--space-m) !important; }
.m-l { margin: var(--space-l) !important; }
.m-xl { margin: var(--space-xl) !important; }
.m-2xl { margin: var(--space-2xl) !important; }
.m-3xl { margin: var(--space-3xl) !important; }

/* Margin-top utilities */
.mt-0 { margin-top: 0 !important; }
.mt-2xs { margin-top: var(--space-2xs) !important; }
.mt-xs { margin-top: var(--space-xs) !important; }
.mt-s { margin-top: var(--space-s) !important; }
.mt-m { margin-top: var(--space-m) !important; }
.mt-l { margin-top: var(--space-l) !important; }
.mt-xl { margin-top: var(--space-xl) !important; }
.mt-2xl { margin-top: var(--space-2xl) !important; }
.mt-3xl { margin-top: var(--space-3xl) !important; }

/* Margin-bottom utilities */
.mb-0 { margin-bottom: 0 !important; }
.mb-2xs { margin-bottom: var(--space-2xs) !important; }
.mb-xs { margin-bottom: var(--space-xs) !important; }
.mb-s { margin-bottom: var(--space-s) !important; }
.mb-m { margin-bottom: var(--space-m) !important; }
.mb-l { margin-bottom: var(--space-l) !important; }
.mb-xl { margin-bottom: var(--space-xl) !important; }
.mb-2xl { margin-bottom: var(--space-2xl) !important; }
.mb-3xl { margin-bottom: var(--space-3xl) !important; }

/* Margin-left utilities */
.ml-0 { margin-left: 0 !important; }
.ml-2xs { margin-left: var(--space-2xs) !important; }
.ml-xs { margin-left: var(--space-xs) !important; }
.ml-s { margin-left: var(--space-s) !important; }
.ml-m { margin-left: var(--space-m) !important; }
.ml-l { margin-left: var(--space-l) !important; }
.ml-xl { margin-left: var(--space-xl) !important; }

/* Margin-right utilities */
.mr-0 { margin-right: 0 !important; }
.mr-2xs { margin-right: var(--space-2xs) !important; }
.mr-xs { margin-right: var(--space-xs) !important; }
.mr-s { margin-right: var(--space-s) !important; }
.mr-m { margin-right: var(--space-m) !important; }
.mr-l { margin-right: var(--space-l) !important; }
.mr-xl { margin-right: var(--space-xl) !important; }

/* Margin horizontal (left + right) */
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-xs { margin-left: var(--space-xs) !important; margin-right: var(--space-xs) !important; }
.mx-s { margin-left: var(--space-s) !important; margin-right: var(--space-s) !important; }
.mx-m { margin-left: var(--space-m) !important; margin-right: var(--space-m) !important; }

/* Margin vertical (top + bottom) */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-xs { margin-top: var(--space-xs) !important; margin-bottom: var(--space-xs) !important; }
.my-s { margin-top: var(--space-s) !important; margin-bottom: var(--space-s) !important; }
.my-m { margin-top: var(--space-m) !important; margin-bottom: var(--space-m) !important; }
.my-l { margin-top: var(--space-l) !important; margin-bottom: var(--space-l) !important; }


/* Padding utilities */
.p-0 { padding: 0 !important; }
.p-2xs { padding: var(--space-2xs) !important; }
.p-xs { padding: var(--space-xs) !important; }
.p-s { padding: var(--space-s) !important; }
.p-m { padding: var(--space-m) !important; }
.p-l { padding: var(--space-l) !important; }
.p-xl { padding: var(--space-xl) !important; }
.p-2xl { padding: var(--space-2xl) !important; }
.p-3xl { padding: var(--space-3xl) !important; }

/* Padding-top utilities */
.pt-0 { padding-top: 0 !important; }
.pt-2xs { padding-top: var(--space-2xs) !important; }
.pt-xs { padding-top: var(--space-xs) !important; }
.pt-s { padding-top: var(--space-s) !important; }
.pt-m { padding-top: var(--space-m) !important; }
.pt-l { padding-top: var(--space-l) !important; }
.pt-xl { padding-top: var(--space-xl) !important; }
.pt-2xl { padding-top: var(--space-2xl) !important; }
.pt-3xl { padding-top: var(--space-3xl) !important; }

/* Padding-bottom utilities */
.pb-0 { padding-bottom: 0 !important; }
.pb-2xs { padding-bottom: var(--space-2xs) !important; }
.pb-xs { padding-bottom: var(--space-xs) !important; }
.pb-s { padding-bottom: var(--space-s) !important; }
.pb-m { padding-bottom: var(--space-m) !important; }
.pb-l { padding-bottom: var(--space-l) !important; }
.pb-xl { padding-bottom: var(--space-xl) !important; }
.pb-2xl { padding-bottom: var(--space-2xl) !important; }
.pb-3xl { padding-bottom: var(--space-3xl) !important; }

/* Padding horizontal (left + right) */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-xs { padding-left: var(--space-xs) !important; padding-right: var(--space-xs) !important; }
.px-s { padding-left: var(--space-s) !important; padding-right: var(--space-s) !important; }
.px-m { padding-left: var(--space-m) !important; padding-right: var(--space-m) !important; }
.px-l { padding-left: var(--space-l) !important; padding-right: var(--space-l) !important; }

/* Padding vertical (top + bottom) */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-xs { padding-top: var(--space-xs) !important; padding-bottom: var(--space-xs) !important; }
.py-s { padding-top: var(--space-s) !important; padding-bottom: var(--space-s) !important; }
.py-m { padding-top: var(--space-m) !important; padding-bottom: var(--space-m) !important; }
.py-l { padding-top: var(--space-l) !important; padding-bottom: var(--space-l) !important; }


/* ========================================
   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; }


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

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

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

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

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

/* Gap utilities */
.gap-2xs { gap: var(--space-2xs) !important; }
.gap-xs { gap: var(--space-xs) !important; }
.gap-s { gap: var(--space-s) !important; }
.gap-m { gap: var(--space-m) !important; }
.gap-l { gap: var(--space-l) !important; }


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

.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-white { background-color: var(--color-background) !important; }
.bg-gray { background-color: var(--color-background-alt) !important; }


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

.border { border: 1px solid var(--color-border) !important; }
.border-top { border-top: 1px solid var(--color-border) !important; }
.border-bottom { border-bottom: 1px solid var(--color-border) !important; }
.border-0 { border: 0 !important; }

.rounded-sm { border-radius: var(--radius-sm) !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-full { border-radius: var(--radius-pill) !important; }


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

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


/* ========================================
   WIDTH & MAX-WIDTH UTILITIES
   ======================================== */

.w-full { width: 100% !important; }
.w-auto { width: auto !important; }
.max-w-sm { max-width: var(--container-sm) !important; }
.max-w-md { max-width: var(--container-md) !important; }
.max-w-lg { max-width: var(--container-lg) !important; }
.max-w-xl { max-width: var(--container-xl) !important; }


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

.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }
.opacity-0 { opacity: 0 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-100 { opacity: 1 !important; }


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

@media (max-width: 768px) {
  .d-mobile-none { display: none !important; }
  .d-mobile-block { display: block !important; }
}

@media (min-width: 769px) {
  .d-desktop-none { display: none !important; }
  .d-desktop-block { display: block !important; }
}