/* =========================================================
   40-utilities.css
   Helper / utility classes
   Small reusable one-purpose classes
   ========================================================= */

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

.focus-ring:focus,
.focus-ring:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* =========================
   DISPLAY
   ========================= */
.u-block {
    display: block !important;
}

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

.u-inline-flex {
    display: inline-flex !important;
}

.u-flex {
    display: flex !important;
}

.u-grid {
    display: grid !important;
}

.u-hidden {
    display: none !important;
}

/* =========================
   FLEX HELPERS
   ========================= */
.u-flex-wrap {
    flex-wrap: wrap !important;
}

.u-flex-column {
    flex-direction: column !important;
}

.u-items-center {
    align-items: center !important;
}

.u-items-start {
    align-items: flex-start !important;
}

.u-items-end {
    align-items: flex-end !important;
}

.u-justify-center {
    justify-content: center !important;
}

.u-justify-between {
    justify-content: space-between !important;
}

.u-justify-start {
    justify-content: flex-start !important;
}

.u-justify-end {
    justify-content: flex-end !important;
}

.u-gap-xs {
    gap: var(--gap-xs) !important;
}

.u-gap-sm {
    gap: var(--gap-sm) !important;
}

.u-gap-md {
    gap: var(--gap-md) !important;
}

.u-gap-lg {
    gap: var(--gap-lg) !important;
}

.u-gap-xl {
    gap: var(--gap-xl) !important;
}

/* =========================
   WIDTH / SIZE
   ========================= */
.u-w-full {
    width: 100% !important;
}

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

.u-max-content {
    width: max-content !important;
}

.u-max-w-content {
    max-width: var(--content-max) !important;
}

.u-max-w-narrow {
    max-width: var(--container-narrow) !important;
}

.u-max-w-base {
    max-width: var(--container-base) !important;
}

.u-max-w-wide {
    max-width: var(--container-wide) !important;
}

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

/* =========================
   TEXT ALIGNMENT
   ========================= */
.u-text-left {
    text-align: left !important;
}

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

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

/* =========================
   TEXT COLOR
   ========================= */
.u-text-brand {
    color: var(--color-brand) !important;
}

.u-text-white {
    color: var(--color-text) !important;
}

.u-text-muted {
    color: var(--color-text-muted) !important;
}

.u-text-soft {
    color: var(--color-text-soft) !important;
}

/* =========================
   FONT WEIGHT / STYLE
   ========================= */
.u-bold {
    font-weight: var(--font-weight-bold) !important;
}

.u-semibold {
    font-weight: var(--font-weight-semibold) !important;
}

.u-regular {
    font-weight: var(--font-weight-regular) !important;
}

.u-italic {
    font-style: italic !important;
}

.u-uppercase {
    text-transform: uppercase !important;
}

.u-heading-font {
    font-family: var(--font-heading) !important;
}

.u-body-font {
    font-family: var(--font-body) !important;
}

/* =========================
   BACKGROUNDS
   ========================= */
.u-bg-base {
    background-color: var(--color-bg) !important;
}

.u-bg-surface {
    background-color: var(--color-surface) !important;
}

.u-bg-surface-soft {
    background-color: var(--color-surface-soft) !important;
}

.u-bg-brand-soft {
    background-color: var(--color-brand-soft) !important;
}

/* =========================
   BORDERS
   ========================= */
.u-border {
    border: 1px solid var(--color-border) !important;
}

.u-border-brand {
    border: 1px solid var(--color-brand) !important;
}

.u-border-left-brand {
    border-left: 3px solid var(--color-brand) !important;
}

.u-rounded-sm {
    border-radius: var(--radius-sm) !important;
}

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

.u-rounded-pill {
    border-radius: var(--radius-pill) !important;
}

/* =========================
   SHADOWS
   ========================= */
.u-shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.u-shadow-md {
    box-shadow: var(--shadow-md) !important;
}

.u-shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

/* =========================
   SPACING - MARGIN
   ========================= */
.u-m-0  { margin: 0 !important; }
.u-mt-0 { margin-top: 0 !important; }
.u-mr-0 { margin-right: 0 !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-ml-0 { margin-left: 0 !important; }

.u-mt-1 { margin-top: var(--space-1) !important; }
.u-mt-2 { margin-top: var(--space-2) !important; }
.u-mt-3 { margin-top: var(--space-3) !important; }
.u-mt-4 { margin-top: var(--space-4) !important; }
.u-mt-5 { margin-top: var(--space-5) !important; }
.u-mt-6 { margin-top: var(--space-6) !important; }
.u-mt-8 { margin-top: var(--space-8) !important; }
.u-mt-10 { margin-top: var(--space-10) !important; }

.u-mb-1 { margin-bottom: var(--space-1) !important; }
.u-mb-2 { margin-bottom: var(--space-2) !important; }
.u-mb-3 { margin-bottom: var(--space-3) !important; }
.u-mb-4 { margin-bottom: var(--space-4) !important; }
.u-mb-5 { margin-bottom: var(--space-5) !important; }
.u-mb-6 { margin-bottom: var(--space-6) !important; }
.u-mb-8 { margin-bottom: var(--space-8) !important; }
.u-mb-10 { margin-bottom: var(--space-10) !important; }

.u-ml-auto {
    margin-left: auto !important;
}

.u-mr-auto {
    margin-right: auto !important;
}

/* =========================
   SPACING - PADDING
   ========================= */
.u-p-0  { padding: 0 !important; }
.u-p-1  { padding: var(--space-1) !important; }
.u-p-2  { padding: var(--space-2) !important; }
.u-p-3  { padding: var(--space-3) !important; }
.u-p-4  { padding: var(--space-4) !important; }
.u-p-5  { padding: var(--space-5) !important; }
.u-p-6  { padding: var(--space-6) !important; }
.u-p-8  { padding: var(--space-8) !important; }

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

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

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

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

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

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

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

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

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

/* =========================
   POSITION
   ========================= */
.u-relative {
    position: relative !important;
}

.u-absolute {
    position: absolute !important;
}

/* =========================
   OVERFLOW
   ========================= */
.u-overflow-hidden {
    overflow: hidden !important;
}

/* =========================
   MOBILE UTILITIES
   ========================= */
@media (max-width: 768px) {
    .u-mobile-hidden {
        display: none !important;
    }

    .u-mobile-block {
        display: block !important;
    }

    .u-mobile-text-center {
        text-align: center !important;
    }

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

    .u-mobile-flex-column {
        flex-direction: column !important;
    }
}