/* ==========================================================================
   UTILITY CLASSES
   ========================================================================= */

/* ==========================================================================
   SPACING UTILITIES (prefixed to avoid Bootstrap collisions)
   ========================================================================= */

.vb-m-4   { margin: var(--space-4); }
.vb-m-8   { margin: var(--space-8); }
.vb-m-12  { margin: var(--space-12); }
.vb-m-16  { margin: var(--space-16); }
.vb-m-24  { margin: var(--space-24); }
.vb-m-32  { margin: var(--space-32); }
.vb-m-40  { margin: var(--space-40); }
.vb-m-48  { margin: var(--space-48); }
.vb-m-56  { margin: var(--space-56); }
.vb-m-64  { margin: var(--space-64); }
.vb-m-80  { margin: var(--space-80); }
.vb-m-120 { margin: var(--space-120); }

.vb-p-4   { padding: var(--space-4); }
.vb-p-8   { padding: var(--space-8); }
.vb-p-12  { padding: var(--space-12); }
.vb-p-16  { padding: var(--space-16); }
.vb-p-24  { padding: var(--space-24); }
.vb-p-32  { padding: var(--space-32); }
.vb-p-40  { padding: var(--space-40); }
.vb-p-48  { padding: var(--space-48); }
.vb-p-56  { padding: var(--space-56); }
.vb-p-64  { padding: var(--space-64); }
.vb-p-80  { padding: var(--space-80); }
.vb-p-120 { padding: var(--space-120); }

.vb-mt-16 { margin-top: var(--space-16); }
.vb-mb-16 { margin-bottom: var(--space-16); }
.vb-pt-24 { padding-top: var(--space-24); }
.vb-pb-24 { padding-bottom: var(--space-24); }

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

.bg-brand-green        { background-color: var(--brand-green) !important; }
.bg-brand-green-light  { background-color: var(--brand-green-light) !important; }
.bg-brand-blue         { background-color: var(--brand-blue) !important; }
.bg-brand-blue-light   { background-color: var(--brand-blue-light) !important; }
.bg-brand-purple       { background-color: var(--brand-purple) !important; }
.bg-brand-purple-light { background-color: var(--brand-purple-light) !important; }
.bg-brand-yellow       { background-color: var(--brand-yellow) !important; }
.bg-brand-yellow-light { background-color: var(--brand-yellow-light) !important; }

.bg-grey-tint         { background-color: var(--grey-tint) !important; }
.bg-grey-ultralight   { background-color: var(--grey-ultralight) !important; }
.bg-grey-light        { background-color: var(--grey-light) !important; }
.bg-grey-medium       { background-color: var(--grey-medium) !important; }
.bg-grey-dark         { background-color: var(--grey-dark) !important; }

.bg-comp-1 { background-color: var(--comp-1) !important; }
.bg-comp-2 { background-color: var(--comp-2) !important; }
.bg-comp-3 { background-color: var(--comp-3) !important; }
.bg-comp-4 { background-color: var(--comp-4) !important; }

.text-brand-blue   { color: var(--brand-blue) !important; }
.text-brand-green  { color: var(--brand-green) !important; }
.text-brand-purple { color: var(--brand-purple) !important; }
.text-brand-yellow { color: var(--brand-yellow) !important; }
.text-grey-dark    { color: var(--grey-dark) !important; }
/*.text-grey-medium  { color: var(--grey-medium) !important; }*/
.text-grey-medium  { color: var(--grey-dark) !important; }

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

.rounded-xl  { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }

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

.hidden { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

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

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

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

.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.align-items-center { align-items: center; }
.align-items-start { align-items: flex-start; }
.align-items-end { align-items: flex-end; }
.justify-content-center { justify-content: center; }
.justify-content-start { justify-content: flex-start; }
.justify-content-end { justify-content: flex-end; }
.justify-content-between { justify-content: space-between; }
.justify-content-around { justify-content: space-around; }

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

.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }

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

.w-100 { width: 100%; }
.h-100 { height: 100%; }
.mw-100 { max-width: 100%; }
.mh-100 { max-height: 100%; }

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

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }

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

.z-1 { z-index: 1; }
.z-10 { z-index: 10; }
.z-100 { z-index: 100; }
.z-1000 { z-index: 1000; }
.z-1100 { z-index: 1100; }
.z-1300 { z-index: 1300; }
.z-9999 { z-index: 9999; }

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

.transition-none { transition: none !important; }
.transition-all { transition: all 0.3s ease; }
.transition-colors { transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; }
.transition-transform { transition: transform 0.3s ease; }
.transition-opacity { transition: opacity 0.3s ease; }

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

.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

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

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

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

.user-select-none { user-select: none; }
.user-select-all { user-select: all; }
.user-select-auto { user-select: auto; }

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

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

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

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

/* ==========================================================================
   FONT WEIGHT UTILITIES
   ========================================================================= */

.fw-normal { font-weight: var(--w-regular); }
.fw-medium { font-weight: var(--w-medium); }
.fw-semibold { font-weight: var(--w-semibold); }
.fw-bold { font-weight: var(--w-bold); }

/* ==========================================================================
   FONT FAMILY UTILITIES
   ========================================================================= */

.font-sans-1 { font-family: var(--font-sans-1); }
.font-sans-2 { font-family: var(--font-sans-2); }

/* ==========================================================================
   FONT SIZE UTILITIES
   ========================================================================= */

.fs-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.fs-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.fs-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.fs-h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.fs-body1 { font-size: var(--fs-body1); line-height: var(--lh-body1); }
.fs-body2 { font-size: var(--fs-body2); line-height: var(--lh-body2); }
.fs-link { font-size: var(--fs-link); line-height: var(--lh-link); }
.fs-button { font-size: var(--fs-button); line-height: var(--lh-button); }

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

/* Mobile first approach - these utilities apply to all screen sizes by default */
.d-mobile-none { display: none; }
.d-mobile-block { display: block; }
.d-mobile-flex { display: flex; }
.d-mobile-inline-flex { display: inline-flex; }

/* Tablet and up */
@media (min-width: 720px) {
  .d-tablet-none { display: none; }
  .d-tablet-block { display: block; }
  .d-tablet-flex { display: flex; }
  .d-tablet-inline-flex { display: inline-flex; }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .d-desktop-none { display: none; }
  .d-desktop-block { display: block; }
  .d-desktop-flex { display: flex; }
  .d-desktop-inline-flex { display: inline-flex; }
}

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

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.sr-only-focusable:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: inherit !important;
  margin: inherit !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

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

@media print {
  .d-print-none { display: none !important; }
  .d-print-block { display: block !important; }
  .d-print-flex { display: flex !important; }
  .d-print-inline-flex { display: inline-flex !important; }
}