/* =========================================================
              Utility Design Tokens
            ========================================================= */

  :root {
    --u-space-0: 0;
    --u-space-1: 0.25rem;
    /* 4px */
    --u-space-2: 0.5rem;
    /* 8px */
    --u-space-3: 0.75rem;
    /* 12px */
    --u-space-4: 1rem;
    /* 16px */
    --u-space-5: 1.25rem;
    /* 20px */
    --u-space-6: 1.5rem;
    /* 24px */
    --u-space-7: 1.75rem;
    /* 28px */
    --u-space-8: 2rem;
    /* 32px */
    --u-space-9: 2.25rem;
    /* 36px */
    --u-space-10: 2.5rem;
    /* 40px */
    --u-space-11: 2.75rem;
    /* 44px */
    --u-space-12: 3rem;
    /* 48px */
    --u-space-16: 4rem;
    /* 64px */
    --u-space-20: 5rem;
    /* 80px */
    --u-space-24: 6rem;
    /* 96px */
    --u-space-28: 7rem;
    /* 112px */
    --u-space-32: 8rem;
    /* 128px */
  }

  /* =========================================================
              Margin Utilities
            ========================================================= */

  /* All sides */
  .u-m-0 {
    margin: var(--u-space-0) !important;
  }

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

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

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

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

  .u-m-5 {
    margin: var(--u-space-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-9 {
    margin: var(--u-space-9) !important;
  }

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

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

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

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

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

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

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

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

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

  /* Top */
  .u-mt-0 {
    margin-top: var(--u-space-0) !important;
  }

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

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

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

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

  .u-mt-5 {
    margin-top: var(--u-space-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-9 {
    margin-top: var(--u-space-9) !important;
  }

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

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

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

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

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

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

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

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

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

  /* Bottom */
  .u-mb-0 {
    margin-bottom: var(--u-space-0) !important;
  }

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

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

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

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

  .u-mb-5 {
    margin-bottom: var(--u-space-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-9 {
    margin-bottom: var(--u-space-9) !important;
  }

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

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

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

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

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

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

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

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

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

  /* Left / Right */
  .u-ml-1 {
    margin-left: var(--u-space-1) !important;
  }

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

  .u-ml-3 {
    margin-left: var(--u-space-3) !important;
  }

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

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

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

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

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

  .u-ml-9 {
    margin-left: var(--u-space-9) !important;
  }

  .u-ml-10 {
    margin-left: var(--u-space-10) !important;
  }

  .u-ml-11 {
    margin-left: var(--u-space-11) !important;
  }

  .u-ml-12 {
    margin-left: var(--u-space-12) !important;
  }

  .u-ml-16 {
    margin-left: var(--u-space-16) !important;
  }

  .u-ml-20 {
    margin-left: var(--u-space-20) !important;
  }

  .u-ml-24 {
    margin-left: var(--u-space-24) !important;
  }

  .u-ml-28 {
    margin-left: var(--u-space-28) !important;
  }

  .u-ml-32 {
    margin-left: var(--u-space-32) !important;
  }

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

  .u-mr-1 {
    margin-right: var(--u-space-1) !important;
  }

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

  .u-mr-3 {
    margin-right: var(--u-space-3) !important;
  }

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

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

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

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

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

  .u-mr-9 {
    margin-right: var(--u-space-9) !important;
  }

  .u-mr-10 {
    margin-right: var(--u-space-10) !important;
  }

  .u-mr-11 {
    margin-right: var(--u-space-11) !important;
  }

  .u-mr-12 {
    margin-right: var(--u-space-12) !important;
  }

  .u-mr-16 {
    margin-right: var(--u-space-16) !important;
  }

  .u-mr-20 {
    margin-right: var(--u-space-20) !important;
  }

  .u-mr-24 {
    margin-right: var(--u-space-24) !important;
  }

  .u-mr-28 {
    margin-right: var(--u-space-28) !important;
  }

  .u-mr-32 {
    margin-right: var(--u-space-32) !important;
  }

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

  /* Horizontal / Vertical */
  .u-mx-1 {
    margin-left: var(--u-space-1) !important;
    margin-right: var(--u-space-1) !important;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* Auto margins (layout helpers) */
  .u-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* =========================================================
              Padding Utilities
            ========================================================= */

  /* All sides */
  .u-p-0 {
    padding: var(--u-space-0) !important;
  }

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

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

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

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

  .u-p-5 {
    padding: var(--u-space-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-9 {
    padding: var(--u-space-9) !important;
  }

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

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

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

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

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

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

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

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

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

  /* Top / Bottom */
  .u-pt-1 {
    padding-top: var(--u-space-1) !important;
  }

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

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

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

  .u-pt-5 {
    padding-top: var(--u-space-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-9 {
    padding-top: var(--u-space-9) !important;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

  .u-pb-5 {
    padding-bottom: var(--u-space-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-9 {
    padding-bottom: var(--u-space-9) !important;
  }

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

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

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

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

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

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

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

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

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

  /* Horizontal / Vertical */
  .u-px-1 {
    padding-left: var(--u-space-1) !important;
    padding-right: var(--u-space-1) !important;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* =========================================================
            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-50 { width: 50% !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-50 { width: 50% !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; }
  }

  /* =========================================================
              Height Utilities
            ========================================================= */

  .u-h-auto {
    height: auto;
  }

  .u-h-full {
    height: 100%;
  }

  .u-minh-screen {
    min-height: 100vh;
  }

  /* =========================================================
              Utility Helpers
            ========================================================= */

  .u-block {
    display: block;
  }

  .u-inline-block {
    display: inline-block;
  }

  .u-text-center {
    text-align: center;
  }

  .u-text-right {
    text-align: right;
  }

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

  /* ================================
              Margin Utilities
            ========================================================== */

  .u-mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  /* ================================
              Absolute Centering
            ========================================================== */

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

  .u-center-x {
    left: 50%;
    transform: translateX(-50%);
  }

  .u-center-y {
    top: 50%;
    transform: translateY(-50%);
  }

  /* ================================
             Flex Utilities
            ========================================================== */

  .u-flex {
    display: flex;
  }

  .grid-x-u-flex {
    display: flex;
    flex-direction: column;
  }

  .cell-u-flex {
    width: 100%;
  }

  .u-flex-wrap { 
    flex-wrap: wrap; 
  }

  .u-center-flex {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .u-center-x-flex {
    justify-content: center;
  }

  .u-center-y-flex {
    align-items: center;
  }

  .u-cols-var {
    grid-template-columns: repeat(var(--u-cols, 2), 1fr);
  }

  /* Breakpoint for flex cells/columns on medium screens 
  @media print, screen and (min-width: 64em) {
    .grid-x-u-flex { 
      flex-direction: row; 
    }
  } */

  /* Breakpoint for stacking flex cells/columns on small screens */
  @media print, screen and (min-width: 40em) {
    .grid-x-u-flex { 
      flex-direction: row; 
    }
  }

  /* ================================
            Gap Utilities
            ========================================================== */

  /* === GAP (all directions) === */
  .u-gap-0 { gap: 0; }
  .u-gap-1 { gap: 0.25rem; }
  .u-gap-2 { gap: 0.5rem; }
  .u-gap-3 { gap: 1rem; }
  .u-gap-4 { gap: 1.5rem; }
  .u-gap-5 { gap: 2rem; }
  .u-gap-6 { gap: 3rem; }
  .u-gap-var { gap: var(--u-gap) !important; }

  /* === HORIZONTAL / VERTICAL === */
  .u-gap-x-0 { column-gap: 0; }
  .u-gap-x-1 { column-gap: 0.25rem; }
  .u-gap-x-2 { column-gap: 0.5rem; }
  .u-gap-x-3 { column-gap: 1rem; }
  .u-gap-x-4 { column-gap: 1.5rem; }
  .u-gap-x-5 { column-gap: 2rem; }
  .u-gap-x-6 { column-gap: 3rem; }

  .u-gap-y-0 { row-gap: 0; }
  .u-gap-y-1 { row-gap: 0.25rem; }
  .u-gap-y-2 { row-gap: 0.5rem; }
  .u-gap-y-3 { row-gap: 1rem; }
  .u-gap-y-4 { row-gap: 1.5rem; }
  .u-gap-y-5 { row-gap: 2rem; }
  .u-gap-y-6 { row-gap: 3rem; }

  /* ================================
            Screen Reader Utilities
            ========================================================== */

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

  /* ================================
              Z-Index Utilities
              ========================================================== */

  .u-z-0   { z-index: 0; }
  .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; }

  /* ================================
            Position Utilities
            ========================================================== */

  .u-relative { position: relative; }
  .u-absolute { position: absolute; }
  .u-fixed    { position: fixed; }
  .u-sticky   { position: sticky; top: 0; }

  /* ================================
              Z-Index Utilities
              ========================================================== */

  .u-z-0   { z-index: 0; }
  .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; }

  /* ================================
            Font Size Utilities
            ========================================================== */

  .u-fs-1 { font-size: 3rem; }
  .u-fs-2 { font-size: 2rem; }
  .u-fs-3 { font-size: 1.5rem; }
  .u-fs-4 { font-size: 1.25rem; }
  .u-fs-5 { font-size: 1rem; }
  .u-fs-6 { font-size: 0.875rem; }
  .u-fs-var { font-size: var(--u-fs) !important; }

  /* ================================
            Font Weight Utilities
            ========================================================== */

  .u-fw-normal { font-weight: 400; }
  .u-fw-medium { font-weight: 500; }
  .u-fw-bold   { font-weight: 700; }

  /* ================================
            Text Alignment Utilities
            ========================================================== */

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

  /* ================================
            Text Transform Utilities
            ========================================================== */

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

  /* ================================
            Text Spacing Utilities
            ========================================================== */

  .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; }

  /* ================================
            Line Height Utilities
            ========================================================== */

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

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

  .u-shadow-inner-sm {
    box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
  }

  .u-shadow-inner {
    box-shadow: inset 0 2px 4px rgba(0,0,0,.08);
  }

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


     /* =========================================================
    FOUNDATION 6: COLOR UTILITIES
    ========================================================= */

    /* -----------------------------
      COLOR PALETTE (can be customized)
      ----------------------------- */
    :root {
      /* Primary colors */
      --u-primary: #1779ba;
      --u-secondary: #767676;
      --u-success: #3adb76;
      --u-danger: #cc4b37;
      --u-warning: #ffae00;
      --u-info: #0dcaf0;
      --u-light: #f8f9fa;
      --u-dark: #212529;
      --u-dark-gray: #8a8a8a;
      --u-medium-gray: #cacaca;
      --u-light-gray: #e6e6e6;

      /* Text readability helpers */
      --u-white: #ffffff;
      --u-black: #000000;
    }

    /* -----------------------------
      TEXT COLOR UTILITIES
      ----------------------------- */
    .u-text-primary   { color: var(--u-primary) !important; }
    .u-text-secondary { color: var(--u-secondary) !important; }
    .u-text-success   { color: var(--u-success) !important; }
    .u-text-danger    { color: var(--u-danger) !important; }
    .u-text-warning   { color: var(--u-warning) !important; }
    .u-text-info      { color: var(--u-info) !important; }
    .u-text-light     { color: var(--u-light) !important; }
    .u-text-dark      { color: var(--u-dark) !important; }
    .u-text-dark-gray { color: var(--u-dark-gray) !important; }
    .u-text-medium-gray { color: var(--u-medium-gray) !important; }
    .u-text-light-gray { color: var(--u-light-gray) !important; }
    .u-text-white     { color: var(--u-white) !important; }
    .u-text-black     { color: var(--u-black) !important; }

    /* Hover states for text */
    .u-text-primary:hover   { color: var(--u-primary) !important; opacity: 0.85; }
    .u-text-secondary:hover { color: var(--u-secondary) !important; opacity: 0.85; }
    .u-text-success:hover   { color: var(--u-success) !important; opacity: 0.85; }
    .u-text-danger:hover    { color: var(--u-danger) !important; opacity: 0.85; }
    .u-text-warning:hover   { color: var(--u-warning) !important; opacity: 0.85; }
    .u-text-info:hover      { color: var(--u-info) !important; opacity: 0.85; }
    .u-text-light:hover     { color: var(--u-light) !important; opacity: 0.85; }
    .u-text-dark:hover      { color: var(--u-dark) !important; opacity: 0.85; }
    .u-text-dark-gray:hover { color: var(--u-dark-gray) !important; opacity: 0.85; }
    .u-text-medium-gray:hover { color: var(--u-medium-gray) !important; opacity: 0.85; }
    .u-text-light-gray:hover { color: var(--u-light-gray) !important; opacity: 0.85; }
    .u-text-white:hover     { color: var(--u-white) !important; opacity: 0.85; }
    .u-text-black:hover     { color: var(--u-black) !important; opacity: 0.85; }

    /* -----------------------------
      BACKGROUND COLOR UTILITIES
      ----------------------------- */
    .u-bg-primary   { background-color: var(--u-primary) !important; }
    .u-bg-secondary { background-color: var(--u-secondary) !important; }
    .u-bg-success   { background-color: var(--u-success) !important; }
    .u-bg-danger    { background-color: var(--u-danger) !important; }
    .u-bg-warning   { background-color: var(--u-warning) !important; }
    .u-bg-info      { background-color: var(--u-info) !important; }
    .u-bg-light     { background-color: var(--u-light) !important; }
    .u-bg-dark      { background-color: var(--u-dark) !important; }
    .u-bg-dark-gray { background-color: var(--u-dark-gray) !important; }
    .u-bg-medium-gray { background-color: var(--u-medium-gray) !important; }
    .u-bg-light-gray { background-color: var(--u-light-gray) !important; }
    .u-bg-white     { background-color: var(--u-white) !important; }
    .u-bg-black     { background-color: var(--u-black) !important; }

    /* Hover states for backgrounds */
    .u-bg-primary:hover   { background-color: var(--u-primary) !important; opacity: 0.85; }
    .u-bg-secondary:hover { background-color: var(--u-secondary) !important; opacity: 0.85; }
    .u-bg-success:hover   { background-color: var(--u-success) !important; opacity: 0.85; }
    .u-bg-danger:hover    { background-color: var(--u-danger) !important; opacity: 0.85; }
    .u-bg-warning:hover   { background-color: var(--u-warning) !important; opacity: 0.85; }
    .u-bg-info:hover      { background-color: var(--u-info) !important; opacity: 0.85; }
    .u-bg-light:hover     { background-color: var(--u-light) !important; opacity: 0.85; }
    .u-bg-dark:hover      { background-color: var(--u-dark) !important; opacity: 0.85; }
    .u-bg-dark-gray:hover { background-color: var(--u-dark-gray) !important; opacity: 0.85; }
    .u-bg-medium-gray:hover { background-color: var(--u-medium-gray) !important; opacity: 0.85; }
    .u-bg-light-gray:hover { background-color: var(--u-light-gray) !important; opacity: 0.85; }
    .u-bg-white:hover     { background-color: var(--u-white) !important; opacity: 0.85; }
    .u-bg-black:hover     { background-color: var(--u-black) !important; opacity: 0.85; }

    /* -----------------------------
      BORDER COLOR UTILITIES
      ----------------------------- */
    .u-border { border-width: 1px !important; border-style: solid !important; border-color: var(--u-dark) !important; }

    .u-border-primary   { border-color: var(--u-primary) !important; }
    .u-border-secondary { border-color: var(--u-secondary) !important; }
    .u-border-success   { border-color: var(--u-success) !important; }
    .u-border-danger    { border-color: var(--u-danger) !important; }
    .u-border-warning   { border-color: var(--u-warning) !important; }
    .u-border-info      { border-color: var(--u-info) !important; }
    .u-border-light     { border-color: var(--u-light) !important; }
    .u-border-dark      { border-color: var(--u-dark) !important; }
    .u-border-dark-gray { border-color: var(--u-dark-gray) !important; }
    .u-border-medium-gray { border-color: var(--u-medium-gray) !important; }
    .u-border-light-gray { border-color: var(--u-light-gray) !important; }
    .u-border-white     { border-color: var(--u-white) !important; }
    .u-border-black     { border-color: var(--u-black) !important; }

    /* Hover states for borders */
    .u-border-primary:hover   { border-color: var(--u-primary) !important; }
    .u-border-secondary:hover { border-color: var(--u-secondary) !important; }
    .u-border-success:hover   { border-color: var(--u-success) !important; }
    .u-border-danger:hover    { border-color: var(--u-danger) !important; }
    .u-border-warning:hover   { border-color: var(--u-warning) !important; }
    .u-border-info:hover      { border-color: var(--u-info) !important; }
    .u-border-light:hover     { border-color: var(--u-light) !important; }
    .u-border-dark:hover      { border-color: var(--u-dark) !important; }
    .u-border-dark-gray:hover { border-color: var(--u-dark-gray) !important; }
    .u-border-medium-gray:hover { border-color: var(--u-medium-gray) !important; }
    .u-border-light-gray:hover { border-color: var(--u-light-gray) !important; }
    .u-border-white:hover     { border-color: var(--u-white) !important; }
    .u-border-black:hover     { border-color: var(--u-black) !important; }

  /* -----------------------------
    TEXT & BG OPACITY UTILITIES
    ----------------------------- */
    .u-bg-transparent { background-color: transparent !important; }
    .u-bg-color-10 { opacity: 0.1 !important; }
    .u-bg-color-20 { opacity: 0.2 !important; }
    .u-bg-color-30 { opacity: 0.3 !important; }
    .u-bg-color-40 { opacity: 0.4 !important; }
    .u-bg-color-50 { opacity: 0.5 !important; }
    .u-bg-color-60 { opacity: 0.6 !important; }
    .u-bg-color-70 { opacity: 0.7 !important; }
    .u-bg-color-75 { opacity: 0.75 !important; }
    .u-bg-color-80 { opacity: 0.8 !important; }
    .u-bg-color-90 { opacity: 0.9 !important; }
    .u-bg-color-100 { opacity: 1 !important; }
    .u-text-opacity-0 { opacity: 0 !important; }
    .u-text-opacity-10 { opacity: 0.1 !important; }
    .u-text-opacity-20 { opacity: 0.2 !important; }
    .u-text-opacity-30 { opacity: 0.3 !important; }
    .u-text-opacity-40 { opacity: 0.4 !important; }
    .u-text-opacity-50 { opacity: 0.5 !important; }
    .u-text-opacity-60 { opacity: 0.6 !important; }
    .u-text-opacity-70 { opacity: 0.7 !important; }
    .u-text-opacity-75 { opacity: 0.75 !important; }
    .u-text-opacity-80 { opacity: 0.8 !important; }
    .u-text-opacity-90 { opacity: 0.9 !important; }
    .u-text-opacity-100 { opacity: 1 !important; }

/* -----------------------------
   BORDER SIZING UTILITIES
   ----------------------------- */

    /* Border Width */
    .u-border { border: 1px solid currentColor !important; }
    .u-border-var { border-style: solid; border-width: var(--border-width, 1px) !important; }

    .u-border-0 { border-width: 0 !important; }
    .u-border-1 { border-width: 1px !important; }
    .u-border-2 { border-width: 2px !important; }
    .u-border-3 { border-width: 3px !important; }

    /* Border Sides */
    .u-border-t { border-top: 1px solid currentColor !important; }
    .u-border-r { border-right: 1px solid currentColor !important; }
    .u-border-b { border-bottom: 1px solid currentColor !important; }
    .u-border-l { border-left: 1px solid currentColor !important; }

    /* Border Radius */
    .u-rounded-none { border-radius: 0 !important; }
    .u-rounded-sm   { border-radius: 0.125rem !important; }
    .u-rounded      { border-radius: 0.25rem !important; }
    .u-rounded-md   { border-radius: 0.375rem !important; }
    .u-rounded-lg   { border-radius: 0.5rem !important; }
    .u-rounded-xl   { border-radius: 0.75rem !important; }
    .u-rounded-full { border-radius: 9999px !important; }
    .u-radius-var { border-radius: var(--radius); }