/* =========================================================
   UTILITY EXTENSION LAYER (Bootstrap 5 Companion)
   Prefix: u-
   ========================================================= */

/* ================================
   DESIGN TOKENS
   ================================ */

:root {
  --u-space-0: 0;
  --u-space-1: 0.25rem;
  --u-space-2: 0.5rem;
  --u-space-3: 0.75rem;
  --u-space-4: 1rem;
  --u-space-5: 1.25rem;
  --u-space-6: 1.5rem;
  --u-space-7: 2rem;
  --u-space-8: 3rem;

  --u-radius-sm: 0.25rem;
  --u-radius-md: 0.5rem;
  --u-radius-lg: 1rem;

  --u-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --u-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --u-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
}

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

.u-gap-1 {
  gap: var(--u-space-1);
}

.u-gap-2 {
  gap: var(--u-space-2);
}

.u-gap-3 {
  gap: var(--u-space-3);
}

.u-gap-4 {
  gap: var(--u-space-4);
}

.u-gap-5 {
  gap: var(--u-space-5);
}

.u-gap-6 {
  gap: var(--u-space-6);
}

.u-gap-x-3 {
  column-gap: var(--u-space-3);
}

.u-gap-y-3 {
  row-gap: var(--u-space-3);
}

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

  .u-w-auto {
    width: auto !important;
  }

  .u-w-full {
    width: 100% !important;
  }

  .u-w-10 {
    width: 10% !important;
  }

  .u-w-20 {
    width: 20% !important;
  }

  .u-w-30 {
    width: 30% !important;
  }

  .u-w-33 {
    width: 33.3333% !important;
  }

  .u-w-40 {
    width: 40% !important;
  }

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

  .u-w-60 {
    width: 60% !important;
  }

  .u-w-66 {
    width: 66.6667% !important;
  }

  .u-w-70 {
    width: 70% !important;
  }

  .u-w-80 {
    width: 80% !important;
  }

  .u-w-90 {
    width: 90% !important;
  }

  /* Max widths (content-friendly) */
  .u-maxw-sm {
    max-width: 40rem !important;
  }

  .u-maxw-md {
    max-width: 48rem !important;
  }

  .u-maxw-lg {
    max-width: 64rem !important;
  }

  .u-maxw-xl {
    max-width: 80rem !important;
  }

  /* Width utilities for medium screens and above */
  @media print, screen and (min-width: 40em) {
    .u-medium-w-10 { width: 10% !important; }
    .u-medium-w-25 { width: 25% !important; }
    .u-medium-w-33 { width: 33.3333% !important; }
    .u-medium-w-40 { width: 40% !important; }
    .u-medium-w-50 { width: 50% !important; }
    .u-medium-w-60 { width: 60% !important; }
    .u-medium-w-66 { width: 66.6667% !important; }
    .u-medium-w-75 { width: 75% !important; }
    .u-medium-w-90 { width: 90% !important; }
    .u-medium-w-full { width: 100% !important; }
  }

  /* Width utilities for large screens and above */
  @media print, screen and (min-width: 64em) {
    .u-large-w-10 { width: 10% !important; }
    .u-large-w-25 { width: 25% !important; }
    .u-large-w-33 { width: 33.3333% !important; }
    .u-large-w-40 { width: 40% !important; }
    .u-large-w-50 { width: 50% !important; }
    .u-large-w-60 { width: 60% !important; }
    .u-large-w-66 { width: 66.6667% !important; }
    .u-large-w-75 { width: 75% !important; }
    .u-large-w-90 { width: 90% !important; };
    .u-large-w-full { width: 100% !important; }
  }

/* ================================
   TYPOGRAPHY ENHANCEMENTS
   ================================ */

.u-fs-xs {
  font-size: 0.75rem;
}

.u-fs-sm {
  font-size: 0.875rem;
}

.u-fs-lg {
  font-size: 1.25rem;
}

.u-fs-xl {
  font-size: 1.5rem;
}

.u-fs-xxl {
  font-size: 2rem;
}

.u-fw-medium {
  font-weight: 500;
}

.u-fs-var { 
  font-size: var(--u-fs) !important; 
}

.u-tracking-tighter { letter-spacing: -0.05em; }
.u-tracking-tight   { letter-spacing: -0.025em; }
.u-tracking-normal  { letter-spacing: 0; }
.u-tracking-wide    { letter-spacing: 0.025em; }
.u-tracking-wider   { letter-spacing: 0.05em; }
.u-tracking-widest  { letter-spacing: 0.1em; }

.u-leading-tight { line-height: 1.2; }
.u-leading-normal { line-height: 1.5; }
.u-leading-loose { line-height: 1.75; }

/* ================================
   BORDER RADIUS EXTENSIONS
   ================================ */

.u-rounded-md {
  border-radius: var(--u-radius-md);
}

.u-rounded-lg {
  border-radius: var(--u-radius-lg);
}

.u-rounded-xl {
  border-radius: 1.5rem;
}

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

.u-shadow-none {
  box-shadow: none;
}

.u-shadow-sm {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 1px 1px rgba(0, 0, 0, 0.04);
}

.u-shadow {
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.06);
}

.u-shadow-lg {
  box-shadow:
    0 10px 15px rgba(0, 0, 0, 0.12),
    0 4px 6px rgba(0, 0, 0, 0.08);
}

.u-shadow-xl {
  box-shadow:
    0 10px 15px rgba(0, 0, 0, 0.12),
    0 8px 10px rgba(0, 0, 0, 0.3);
}

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

.u-hover-darken:hover {
  filter: brightness(0.9);
}

.u-hover-lighten:hover {
  filter: brightness(1.08);
}

.u-hover-opacity-90:hover {
  opacity: 0.9;
}

.u-hover-opacity-80:hover {
  opacity: 0.8;
}

.u-hover-opacity-70:hover {
  opacity: 0.7;
}

.u-hover-shadow:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.u-hover-shadow-lg:hover {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.18);
}

.u-hover-lift:hover {
  transform: translateY(-3px);
}

.u-hover-lift-lg:hover {
  transform: translateY(-6px);
}

.u-hover-scale-sm:hover {
  transform: scale(1.02);
}

.u-hover-scale:hover {
  transform: scale(1.05);
}

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

.u-gradient-y-soft {
  --g-alpha: 0.03;
  background-image: linear-gradient(to top,
      rgba(0, 0, 0, var(--g-alpha)),
      rgba(0, 0, 0, 0));
}

.u-gradient-y {
  --g-alpha: 0.05;
  background-image: linear-gradient(to top,
      rgba(0, 0, 0, var(--g-alpha)),
      rgba(0, 0, 0, 0));
}

.u-gradient-y-medium {
  --g-alpha: 0.07;
  background-image: linear-gradient(to top,
      rgba(0, 0, 0, var(--g-alpha)),
      rgba(0, 0, 0, 0));
}

.u-gradient-y-strong {
  --g-alpha: 0.1;
  background-image: linear-gradient(to top,
      rgba(0, 0, 0, var(--g-alpha)),
      rgba(0, 0, 0, 0));
}

.u-gradient-y-strongest {
  --g-alpha: 0.15;
  background-image: linear-gradient(to top,
      rgba(0, 0, 0, var(--g-alpha)),
      rgba(0, 0, 0, 0));
}

.u-gradient-x-soft {
  --g-alpha: 0.03;
  background-image: linear-gradient(to right,
      rgba(0, 0, 0, var(--g-alpha)),
      rgba(0, 0, 0, 0));
}

.u-gradient-x {
  --g-alpha: 0.05;
  background-image: linear-gradient(to right,
      rgba(0, 0, 0, var(--g-alpha)),
      rgba(0, 0, 0, 0));
}

.u-gradient-x-medium {
  --g-alpha: 0.07;
  background-image: linear-gradient(to right,
      rgba(0, 0, 0, var(--g-alpha)),
      rgba(0, 0, 0, 0));
}

.u-gradient-x-strong {
  --g-alpha: 0.1;
  background-image: linear-gradient(to right,
      rgba(0, 0, 0, var(--g-alpha)),
      rgba(0, 0, 0, 0));
}

.u-gradient-x-strongest {
  --g-alpha: 0.15;
  background-image: linear-gradient(to right,
      rgba(0, 0, 0, var(--g-alpha)),
      rgba(0, 0, 0, 0));
}

/* ================================
   POSITION HELPERS
   ================================ */

.u-center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

.u-z-10 {
  z-index: 10;
}

.u-z-20 {
  z-index: 20;
}

.u-z-30 {
  z-index: 30;
}

.u-z-40 {
  z-index: 40;
}

.u-z-50 {
  z-index: 50;
}

/* ================================
   OVERFLOW HELPERS
   ================================ */

.u-overflow-hidden {
  overflow: hidden;
}

.u-overflow-auto {
  overflow: auto;
}

/* ================================
   SCREEN READER
   ================================ */

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =========================================================
   EXTENDED SPACING UTILITIES (Bootstrap Companion)
   Only fills gaps + extends scale
   Prefix: u-
   ========================================================= */

:root {
  --u-space-0: 0;
  --u-space-1: 0.25rem;
  /* aligns w/ Bootstrap */
  --u-space-2: 0.5rem;
  --u-space-2-5: 0.75rem;
  /* NEW */
  --u-space-3: 1rem;
  --u-space-4: 1.5rem;
  --u-space-4-5: 2rem;
  /* NEW */
  --u-space-5: 3rem;
  --u-space-6: 4rem;
  /* EXTENDED */
  --u-space-7: 5rem;
  --u-space-8: 6rem;
}

/* ================================
   ALL SIDES
   ================================ */

.u-m-2-5 {
  margin: var(--u-space-2-5) !important;
}

.u-m-4-5 {
  margin: var(--u-space-4-5) !important;
}

.u-m-6 {
  margin: var(--u-space-6) !important;
}

.u-m-7 {
  margin: var(--u-space-7) !important;
}

.u-m-8 {
  margin: var(--u-space-8) !important;
}

.u-m-var {
  margin: var(--u-m) !important;
}

.u-p-2-5 {
  padding: var(--u-space-2-5) !important;
}

.u-p-4-5 {
  padding: var(--u-space-4-5) !important;
}

.u-p-6 {
  padding: var(--u-space-6) !important;
}

.u-p-7 {
  padding: var(--u-space-7) !important;
}

.u-p-8 {
  padding: var(--u-space-8) !important;
}

.u-p-var {
  padding: var(--u-p) !important;
}

/* ================================
   DIRECTIONAL (TOP/BOTTOM/LEFT/RIGHT)
   ================================ */

.u-mt-2-5 {
  margin-top: var(--u-space-2-5) !important;
}

.u-mt-4-5 {
  margin-top: var(--u-space-4-5) !important;
}

.u-mt-6 {
  margin-top: var(--u-space-6) !important;
}

.u-mt-7 {
  margin-top: var(--u-space-7) !important;
}

.u-mt-8 {
  margin-top: var(--u-space-8) !important;
}

.u-mt-var {
  margin-top: var(--u-mt) !important;
}

.u-mb-2-5 {
  margin-bottom: var(--u-space-2-5) !important;
}

.u-mb-4-5 {
  margin-bottom: var(--u-space-4-5) !important;
}

.u-mb-6 {
  margin-bottom: var(--u-space-6) !important;
}

.u-mb-7 {
  margin-bottom: var(--u-space-7) !important;
}

.u-mb-8 {
  margin-bottom: var(--u-space-8) !important;
}

.u-mb-var {
  margin-bottom: var(--u-mb) !important;
}

.u-ms-2-5 {
  margin-left: var(--u-space-2-5) !important;
}

.u-ms-4-5 {
  margin-left: var(--u-space-4-5) !important;
}

.u-ms-6 {
  margin-left: var(--u-space-6) !important;
}

.u-ms-7 {
  margin-left: var(--u-space-7) !important;
}

.u-ms-8 {
  margin-left: var(--u-space-8) !important;
}

.u-ms-var {
  margin-left: var(--u-ms) !important;
}

.u-me-2-5 {
  margin-right: var(--u-space-2-5) !important;
}

.u-me-4-5 {
  margin-right: var(--u-space-4-5) !important;
}

.u-me-6 {
  margin-right: var(--u-space-6) !important;
}

.u-me-7 {
  margin-right: var(--u-space-7) !important;
}

.u-me-8 {
  margin-right: var(--u-space-8) !important;
}

.u-me-var {
  margin-right: var(--u-me) !important;
}

.u-pt-2-5 {
  padding-top: var(--u-space-2-5) !important;
}

.u-pt-4-5 {
  padding-top: var(--u-space-4-5) !important;
}

.u-pt-6 {
  padding-top: var(--u-space-6) !important;
}

.u-pt-7 {
  padding-top: var(--u-space-7) !important;
}

.u-pt-8 {
  padding-top: var(--u-space-8) !important;
}

.u-pt-var {
  padding-top: var(--u-pt) !important;
}

.u-pb-2-5 {
  padding-bottom: var(--u-space-2-5) !important;
}

.u-pb-4-5 {
  padding-bottom: var(--u-space-4-5) !important;
}

.u-pb-6 {
  padding-bottom: var(--u-space-6) !important;
}

.u-pb-7 {
  padding-bottom: var(--u-space-7) !important;
}

.u-pb-8 {
  padding-bottom: var(--u-space-8) !important;
}

.u-pb-var {
  padding-bottom: var(--u-pb) !important;
}

.u-ps-2-5 {
  padding-left: var(--u-space-2-5) !important;
}

.u-ps-4-5 {
  padding-left: var(--u-space-4-5) !important;
}

.u-ps-6 {
  padding-left: var(--u-space-6) !important;
}

.u-ps-7 {
  padding-left: var(--u-space-7) !important;
}

.u-ps-8 {
  padding-left: var(--u-space-8) !important;
}

.u-ps-var {
  padding-left: var(--u-ps) !important;
}

.u-pe-2-5 {
  padding-right: var(--u-space-2-5) !important;
}

.u-pe-4-5 {
  padding-right: var(--u-space-4-5) !important;
}

.u-pe-6 {
  padding-right: var(--u-space-6) !important;
}

.u-pe-7 {
  padding-right: var(--u-space-7) !important;
}

.u-pe-8 {
  padding-right: var(--u-space-8) !important;
}

.u-pe-var {
  padding-right: var(--u-pe) !important;
}


/* ================================
   MARGIN AXIS (X / Y)
   ================================ */

.u-mx-2-5 {
  margin-left: var(--u-space-2-5) !important;
  margin-right: var(--u-space-2-5) !important;
}

.u-mx-4-5 {
  margin-left: var(--u-space-4-5) !important;
  margin-right: var(--u-space-4-5) !important;
}

.u-mx-6 {
  margin-left: var(--u-space-6) !important;
  margin-right: var(--u-space-6) !important;
}

.u-my-2-5 {
  margin-top: var(--u-space-2-5) !important;
  margin-bottom: var(--u-space-2-5) !important;
}

.u-my-4-5 {
  margin-top: var(--u-space-4-5) !important;
  margin-bottom: var(--u-space-4-5) !important;
}

.u-my-6 {
  margin-top: var(--u-space-6) !important;
  margin-bottom: var(--u-space-6) !important;
}

.u-my-var {
  margin-top: var(--u-my) !important;
  margin-bottom: var(--u-my) !important;
}

/* ================================
   PADDING AXIS
   ================================ */

.u-px-2-5 {
  padding-left: var(--u-space-2-5) !important;
  padding-right: var(--u-space-2-5) !important;
}

.u-px-4-5 {
  padding-left: var(--u-space-4-5) !important;
  padding-right: var(--u-space-4-5) !important;
}

.u-py-2-5 {
  padding-top: var(--u-space-2-5) !important;
  padding-bottom: var(--u-space-2-5) !important;
}

.u-py-4-5 {
  padding-top: var(--u-space-4-5) !important;
  padding-bottom: var(--u-space-4-5) !important;
}

.u-py-var {
  padding-top: var(--u-py) !important;
  padding-bottom: var(--u-py) !important;
}

/* ================================
   RESPONSIVE EXTENSIONS
   ================================ */

@media (min-width: 768px) {
  .u-md-shadow-lg {
    box-shadow: var(--u-shadow-lg);
  }
}

@media (min-width: 992px) {
  .u-lg-maxw-lg {
    max-width: 64rem;
  }
}