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

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

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

.inline {
    display: inline !important;
}

.flex {
    display: flex !important;
}

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

.grid {
    display: grid !important;
}

.hidden {
    display: none !important;
}

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

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

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

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

/* ===== TEXT COLORS ===== */
.text-white {
    color: var(--color-white) !important;
}

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

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

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

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

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

/* ===== BACKGROUND COLORS ===== */
.bg-transparent {
    background-color: transparent !important;
}

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

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

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

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

/* ===== SPACING - MARGIN ===== */
.m-0 {
    margin: 0 !important;
}

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

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

.my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

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

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

.ml-0 {
    margin-left: 0 !important;
}

.mr-0 {
    margin-right: 0 !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== SPACING - PADDING ===== */
.p-0 {
    padding: 0 !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.pr-0 {
    padding-right: 0 !important;
}

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

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

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

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

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

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

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

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

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

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

/* ===== TEXT SIZE ===== */
.text-xs {
    font-size: var(--text-xs) !important;
}

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

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

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

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

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

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

/* ===== TEXT TRANSFORM ===== */
.uppercase {
    text-transform: uppercase !important;
}

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

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

.normal-case {
    text-transform: none !important;
}

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

.h-full {
    height: 100% !important;
}

.w-screen {
    width: 100vw !important;
}

.h-screen {
    height: 100vh !important;
}

/* ===== MAX WIDTH ===== */
.max-w-xs {
    max-width: var(--max-w-xs) !important;
}

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

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

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

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

.max-w-2xl {
    max-width: var(--max-w-2xl) !important;
}

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

/* ===== BORDER RADIUS ===== */
.rounded-none {
    border-radius: 0 !important;
}

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

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

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

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

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

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

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

/* ===== OPACITY ===== */
.opacity-0 {
    opacity: 0 !important;
}

.opacity-50 {
    opacity: 0.5 !important;
}

.opacity-75 {
    opacity: 0.75 !important;
}

.opacity-100 {
    opacity: 1 !important;
}

/* ===== SHADOW ===== */
.shadow-none {
    box-shadow: none !important;
}

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

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

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

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

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

/* ===== CURSOR ===== */
.cursor-pointer {
    cursor: pointer !important;
}

.cursor-not-allowed {
    cursor: not-allowed !important;
}

.cursor-default {
    cursor: default !important;
}

/* ===== POINTER EVENTS ===== */
.pointer-events-none {
    pointer-events: none !important;
}

.pointer-events-auto {
    pointer-events: auto !important;
}

/* ===== USER SELECT ===== */
.select-none {
    user-select: none !important;
}

.select-text {
    user-select: text !important;
}

.select-all {
    user-select: all !important;
}

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

.overflow-auto {
    overflow: auto !important;
}

.overflow-visible {
    overflow: visible !important;
}

/* ===== Z-INDEX ===== */
.z-0 {
    z-index: var(--z-0) !important;
}

.z-10 {
    z-index: var(--z-10) !important;
}

.z-20 {
    z-index: var(--z-20) !important;
}

.z-30 {
    z-index: var(--z-30) !important;
}

.z-40 {
    z-index: var(--z-40) !important;
}

.z-50 {
    z-index: var(--z-50) !important;
}

/* ===== RESPONSIVE UTILITIES ===== */
@media (max-width: 768px) {
    .sm\:hidden {
        display: none !important;
    }

    .sm\:block {
        display: block !important;
    }

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

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

    .sm\:text-base {
        font-size: var(--text-base) !important;
    }
}

@media (min-width: 769px) {
    .md\:block {
        display: block !important;
    }

    .md\:hidden {
        display: none !important;
    }

    .md\:flex {
        display: flex !important;
    }
}

@media (min-width: 1024px) {
    .lg\:block {
        display: block !important;
    }

    .lg\:hidden {
        display: none !important;
    }

    .lg\:flex {
        display: flex !important;
    }
}