/**
 * Utility Classes
 * Single-purpose helper classes for common styling patterns
 */

/* ==========================================================================
   Display
   ========================================================================== */

.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

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

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

/* ==========================================================================
   Flexbox
   ========================================================================== */

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

.flex-wrap {
    flex-wrap: wrap !important;
}

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

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

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

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

.gap-sm {
    gap: 8px !important;
}

.gap-md {
    gap: 16px !important;
}

.gap-lg {
    gap: 24px !important;
}

/* ==========================================================================
   Spacing
   ========================================================================== */

.m-0 {
    margin: 0 !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mt-1 {
    margin-top: 8px !important;
}

.mt-2 {
    margin-top: 16px !important;
}

.mt-3 {
    margin-top: 24px !important;
}

.mt-4 {
    margin-top: 32px !important;
}

.mb-1 {
    margin-bottom: 8px !important;
}

.mb-2 {
    margin-bottom: 16px !important;
}

.mb-3 {
    margin-bottom: 24px !important;
}

.mb-4 {
    margin-bottom: 32px !important;
}

.p-0 {
    padding: 0 !important;
}

.pt-1 {
    padding-top: 8px !important;
}

.pt-2 {
    padding-top: 16px !important;
}

.pt-3 {
    padding-top: 24px !important;
}

.pb-1 {
    padding-bottom: 8px !important;
}

.pb-2 {
    padding-bottom: 16px !important;
}

.pb-3 {
    padding-bottom: 24px !important;
}

/* ==========================================================================
   Typography
   ========================================================================== */

.text-xs {
    font-size: var(--fs-12) !important;
}

.text-sm {
    font-size: var(--fs-14) !important;
}

.text-base {
    font-size: var(--fs-16) !important;
}

.text-lg {
    font-size: var(--fs-18) !important;
}

.text-xl {
    font-size: var(--fs-20) !important;
}

.text-2xl {
    font-size: var(--fs-24) !important;
}

.text-3xl {
    font-size: var(--fs-36) !important;
}

.text-4xl {
    font-size: var(--fs-50) !important;
}

.text-5xl {
    font-size: var(--fs-64) !important;
}

.font-normal {
    font-weight: 400 !important;
}

.font-medium {
    font-weight: 500 !important;
}

.font-semibold {
    font-weight: 600 !important;
}

.font-bold {
    font-weight: 700 !important;
}

.text-left {
    text-align: left !important;
}

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

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

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

.text-lowercase {
    text-transform: lowercase !important;
}

.text-capitalize {
    text-transform: capitalize !important;
}

/* ==========================================================================
   Colors
   ========================================================================== */

.text-primary {
    color: var(--brand-primary-main) !important;
}

.text-secondary {
    color: var(--brand-secondry-main) !important;
}

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

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

.bg-primary {
    background-color: var(--brand-primary-main) !important;
}

.bg-secondary {
    background-color: var(--brand-secondry-main) !important;
}

.bg-white {
    background-color: var(--neutral-white) !important;
}

.bg-light {
    background-color: var(--neutral-50) !important;
}

/* ==========================================================================
   Visibility
   ========================================================================== */

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

@media (max-width: 960px) {
    .d-md-none {
        display: none !important;
    }
}

@media (max-width: 600px) {
    .d-sm-none {
        display: none !important;
    }
}