/* ==========================================================================
   Utilities CSS - Helper Classes, Margin/Padding, Text Alignment, Display
   ========================================================================== */

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

/* Margin - All sides */
.m-0 {
    margin: 0;
}
.m-xs {
    margin: var(--spacing-xs);
}
.m-sm {
    margin: var(--spacing-sm);
}
.m-md {
    margin: var(--spacing-md);
}
.m-lg {
    margin: var(--spacing-lg);
}
.m-xl {
    margin: var(--spacing-xl);
}
.m-2xl {
    margin: var(--spacing-2xl);
}
.m-3xl {
    margin: var(--spacing-3xl);
}
.m-4xl {
    margin: var(--spacing-4xl);
}
.m-5xl {
    margin: var(--spacing-5xl);
}
.m-6xl {
    margin: var(--spacing-6xl);
}
.m-auto {
    margin: auto;
}

/* Margin - Top */
.mt-0 {
    margin-top: 0;
}
.mt-xs {
    margin-top: var(--spacing-xs);
}
.mt-sm {
    margin-top: var(--spacing-sm);
}
.mt-md {
    margin-top: var(--spacing-md);
}
.mt-lg {
    margin-top: var(--spacing-lg);
}
.mt-xl {
    margin-top: var(--spacing-xl);
}
.mt-2xl {
    margin-top: var(--spacing-2xl);
}
.mt-3xl {
    margin-top: var(--spacing-3xl);
}
.mt-4xl {
    margin-top: var(--spacing-4xl);
}
.mt-5xl {
    margin-top: var(--spacing-5xl);
}
.mt-6xl {
    margin-top: var(--spacing-6xl);
}
.mt-auto {
    margin-top: auto;
}

/* Margin - Right */
.mr-0 {
    margin-right: 0;
}
.mr-xs {
    margin-right: var(--spacing-xs);
}
.mr-sm {
    margin-right: var(--spacing-sm);
}
.mr-md {
    margin-right: var(--spacing-md);
}
.mr-lg {
    margin-right: var(--spacing-lg);
}
.mr-xl {
    margin-right: var(--spacing-xl);
}
.mr-2xl {
    margin-right: var(--spacing-2xl);
}
.mr-3xl {
    margin-right: var(--spacing-3xl);
}
.mr-4xl {
    margin-right: var(--spacing-4xl);
}
.mr-5xl {
    margin-right: var(--spacing-5xl);
}
.mr-6xl {
    margin-right: var(--spacing-6xl);
}
.mr-auto {
    margin-right: auto;
}

/* Margin - Bottom */
.mb-0 {
    margin-bottom: 0;
}
.mb-xs {
    margin-bottom: var(--spacing-xs);
}
.mb-sm {
    margin-bottom: var(--spacing-sm);
}
.mb-md {
    margin-bottom: var(--spacing-md);
}
.mb-lg {
    margin-bottom: var(--spacing-lg);
}
.mb-xl {
    margin-bottom: var(--spacing-xl);
}
.mb-2xl {
    margin-bottom: var(--spacing-2xl);
}
.mb-3xl {
    margin-bottom: var(--spacing-3xl);
}
.mb-4xl {
    margin-bottom: var(--spacing-4xl);
}
.mb-5xl {
    margin-bottom: var(--spacing-5xl);
}
.mb-6xl {
    margin-bottom: var(--spacing-6xl);
}
.mb-auto {
    margin-bottom: auto;
}

/* Margin - Left */
.ml-0 {
    margin-left: 0;
}
.ml-xs {
    margin-left: var(--spacing-xs);
}
.ml-sm {
    margin-left: var(--spacing-sm);
}
.ml-md {
    margin-left: var(--spacing-md);
}
.ml-lg {
    margin-left: var(--spacing-lg);
}
.ml-xl {
    margin-left: var(--spacing-xl);
}
.ml-2xl {
    margin-left: var(--spacing-2xl);
}
.ml-3xl {
    margin-left: var(--spacing-3xl);
}
.ml-4xl {
    margin-left: var(--spacing-4xl);
}
.ml-5xl {
    margin-left: var(--spacing-5xl);
}
.ml-6xl {
    margin-left: var(--spacing-6xl);
}
.ml-auto {
    margin-left: auto;
}

/* Margin - Horizontal (left + right) */
.mx-0 {
    margin-left: 0;
    margin-right: 0;
}
.mx-xs {
    margin-left: var(--spacing-xs);
    margin-right: var(--spacing-xs);
}
.mx-sm {
    margin-left: var(--spacing-sm);
    margin-right: var(--spacing-sm);
}
.mx-md {
    margin-left: var(--spacing-md);
    margin-right: var(--spacing-md);
}
.mx-lg {
    margin-left: var(--spacing-lg);
    margin-right: var(--spacing-lg);
}
.mx-xl {
    margin-left: var(--spacing-xl);
    margin-right: var(--spacing-xl);
}
.mx-2xl {
    margin-left: var(--spacing-2xl);
    margin-right: var(--spacing-2xl);
}
.mx-3xl {
    margin-left: var(--spacing-3xl);
    margin-right: var(--spacing-3xl);
}
.mx-4xl {
    margin-left: var(--spacing-4xl);
    margin-right: var(--spacing-4xl);
}
.mx-5xl {
    margin-left: var(--spacing-5xl);
    margin-right: var(--spacing-5xl);
}
.mx-6xl {
    margin-left: var(--spacing-6xl);
    margin-right: var(--spacing-6xl);
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Margin - Vertical (top + bottom) */
.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}
.my-xs {
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}
.my-sm {
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}
.my-md {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}
.my-lg {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}
.my-xl {
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}
.my-2xl {
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
}
.my-3xl {
    margin-top: var(--spacing-3xl);
    margin-bottom: var(--spacing-3xl);
}
.my-4xl {
    margin-top: var(--spacing-4xl);
    margin-bottom: var(--spacing-4xl);
}
.my-5xl {
    margin-top: var(--spacing-5xl);
    margin-bottom: var(--spacing-5xl);
}
.my-6xl {
    margin-top: var(--spacing-6xl);
    margin-bottom: var(--spacing-6xl);
}
.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

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

/* Padding - All sides */
.p-0 {
    padding: 0;
}
.p-xs {
    padding: var(--spacing-xs);
}
.p-sm {
    padding: var(--spacing-sm);
}
.p-md {
    padding: var(--spacing-md);
}
.p-lg {
    padding: var(--spacing-lg);
}
.p-xl {
    padding: var(--spacing-xl);
}
.p-2xl {
    padding: var(--spacing-2xl);
}
.p-3xl {
    padding: var(--spacing-3xl);
}
.p-4xl {
    padding: var(--spacing-4xl);
}
.p-5xl {
    padding: var(--spacing-5xl);
}
.p-6xl {
    padding: var(--spacing-6xl);
}

/* Padding - Top */
.pt-0 {
    padding-top: 0;
}
.pt-xs {
    padding-top: var(--spacing-xs);
}
.pt-sm {
    padding-top: var(--spacing-sm);
}
.pt-md {
    padding-top: var(--spacing-md);
}
.pt-lg {
    padding-top: var(--spacing-lg);
}
.pt-xl {
    padding-top: var(--spacing-xl);
}
.pt-2xl {
    padding-top: var(--spacing-2xl);
}
.pt-3xl {
    padding-top: var(--spacing-3xl);
}
.pt-4xl {
    padding-top: var(--spacing-4xl);
}
.pt-5xl {
    padding-top: var(--spacing-5xl);
}
.pt-6xl {
    padding-top: var(--spacing-6xl);
}

/* Padding - Right */
.pr-0 {
    padding-right: 0;
}
.pr-xs {
    padding-right: var(--spacing-xs);
}
.pr-sm {
    padding-right: var(--spacing-sm);
}
.pr-md {
    padding-right: var(--spacing-md);
}
.pr-lg {
    padding-right: var(--spacing-lg);
}
.pr-xl {
    padding-right: var(--spacing-xl);
}
.pr-2xl {
    padding-right: var(--spacing-2xl);
}
.pr-3xl {
    padding-right: var(--spacing-3xl);
}
.pr-4xl {
    padding-right: var(--spacing-4xl);
}
.pr-5xl {
    padding-right: var(--spacing-5xl);
}
.pr-6xl {
    padding-right: var(--spacing-6xl);
}

/* Padding - Bottom */
.pb-0 {
    padding-bottom: 0;
}
.pb-xs {
    padding-bottom: var(--spacing-xs);
}
.pb-sm {
    padding-bottom: var(--spacing-sm);
}
.pb-md {
    padding-bottom: var(--spacing-md);
}
.pb-lg {
    padding-bottom: var(--spacing-lg);
}
.pb-xl {
    padding-bottom: var(--spacing-xl);
}
.pb-2xl {
    padding-bottom: var(--spacing-2xl);
}
.pb-3xl {
    padding-bottom: var(--spacing-3xl);
}
.pb-4xl {
    padding-bottom: var(--spacing-4xl);
}
.pb-5xl {
    padding-bottom: var(--spacing-5xl);
}
.pb-6xl {
    padding-bottom: var(--spacing-6xl);
}

/* Padding - Left */
.pl-0 {
    padding-left: 0;
}
.pl-xs {
    padding-left: var(--spacing-xs);
}
.pl-sm {
    padding-left: var(--spacing-sm);
}
.pl-md {
    padding-left: var(--spacing-md);
}
.pl-lg {
    padding-left: var(--spacing-lg);
}
.pl-xl {
    padding-left: var(--spacing-xl);
}
.pl-2xl {
    padding-left: var(--spacing-2xl);
}
.pl-3xl {
    padding-left: var(--spacing-3xl);
}
.pl-4xl {
    padding-left: var(--spacing-4xl);
}
.pl-5xl {
    padding-left: var(--spacing-5xl);
}
.pl-6xl {
    padding-left: var(--spacing-6xl);
}

/* Padding - Horizontal (left + right) */
.px-0 {
    padding-left: 0;
    padding-right: 0;
}
.px-xs {
    padding-left: var(--spacing-xs);
    padding-right: var(--spacing-xs);
}
.px-sm {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
}
.px-md {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}
.px-lg {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
}
.px-xl {
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
}
.px-2xl {
    padding-left: var(--spacing-2xl);
    padding-right: var(--spacing-2xl);
}
.px-3xl {
    padding-left: var(--spacing-3xl);
    padding-right: var(--spacing-3xl);
}
.px-4xl {
    padding-left: var(--spacing-4xl);
    padding-right: var(--spacing-4xl);
}
.px-5xl {
    padding-left: var(--spacing-5xl);
    padding-right: var(--spacing-5xl);
}
.px-6xl {
    padding-left: var(--spacing-6xl);
    padding-right: var(--spacing-6xl);
}

/* Padding - Vertical (top + bottom) */
.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}
.py-xs {
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
}
.py-sm {
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
}
.py-md {
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
}
.py-lg {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
}
.py-xl {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
}
.py-2xl {
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
}
.py-3xl {
    padding-top: var(--spacing-3xl);
    padding-bottom: var(--spacing-3xl);
}
.py-4xl {
    padding-top: var(--spacing-4xl);
    padding-bottom: var(--spacing-4xl);
}
.py-5xl {
    padding-top: var(--spacing-5xl);
    padding-bottom: var(--spacing-5xl);
}
.py-6xl {
    padding-top: var(--spacing-6xl);
    padding-bottom: var(--spacing-6xl);
}

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

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

/* ==========================================================================
   Text Color Utilities
   ========================================================================== */

.text-primary {
    color: var(--color-text-primary);
}
.text-secondary {
    color: var(--color-text-secondary);
}
.text-inverse {
    color: var(--color-text-inverse);
}
.text-blue {
    color: var(--color-primary-blue);
}
.text-orange {
    color: var(--color-secondary-orange);
}
.text-green {
    color: var(--color-accent-green);
}

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

.font-normal {
    font-weight: var(--font-weight-normal);
}
.font-medium {
    font-weight: var(--font-weight-medium);
}
.font-semibold {
    font-weight: var(--font-weight-semibold);
}
.font-bold {
    font-weight: var(--font-weight-bold);
}

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

.text-xs {
    font-size: var(--font-size-xs);
}
.text-sm {
    font-size: var(--font-size-sm);
}
.text-base {
    font-size: var(--font-size-base);
}
.text-lg {
    font-size: var(--font-size-lg);
}
.text-xl {
    font-size: var(--font-size-xl);
}
.text-2xl {
    font-size: var(--font-size-2xl);
}
.text-3xl {
    font-size: var(--font-size-3xl);
}
.text-4xl {
    font-size: var(--font-size-4xl);
}
.text-5xl {
    font-size: var(--font-size-5xl);
}

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

.leading-tight {
    line-height: var(--line-height-tight);
}
.leading-base {
    line-height: var(--line-height-base);
}
.leading-relaxed {
    line-height: var(--line-height-relaxed);
}

/* ==========================================================================
   Background Color Utilities
   ========================================================================== */

.bg-primary {
    background-color: var(--color-background-primary);
}
.bg-secondary {
    background-color: var(--color-background-secondary);
}
.bg-blue {
    background-color: var(--color-primary-blue);
}
.bg-orange {
    background-color: var(--color-secondary-orange);
}
.bg-green {
    background-color: var(--color-accent-green);
}
.bg-transparent {
    background-color: transparent;
}

/* ==========================================================================
   Border Utilities
   ========================================================================== */

.border {
    border: 1px solid var(--color-neutral-light);
}
.border-0 {
    border: 0;
}
.border-t {
    border-top: 1px solid var(--color-neutral-light);
}
.border-r {
    border-right: 1px solid var(--color-neutral-light);
}
.border-b {
    border-bottom: 1px solid var(--color-neutral-light);
}
.border-l {
    border-left: 1px solid var(--color-neutral-light);
}

/* Border radius utilities */
.rounded-none {
    border-radius: 0;
}
.rounded-sm {
    border-radius: var(--radius-sm);
}
.rounded-md {
    border-radius: var(--radius-md);
}
.rounded-lg {
    border-radius: var(--radius-lg);
}
.rounded-xl {
    border-radius: var(--radius-xl);
}
.rounded-2xl {
    border-radius: var(--radius-2xl);
}
.rounded-full {
    border-radius: var(--radius-full);
}

/* ==========================================================================
   Width and Height Utilities
   ========================================================================== */

.w-auto {
    width: auto;
}
.w-full {
    width: 100%;
}
.w-screen {
    width: 100vw;
}
.w-min {
    width: min-content;
}
.w-max {
    width: max-content;
}
.w-fit {
    width: fit-content;
}

.h-auto {
    height: auto;
}
.h-full {
    height: 100%;
}
.h-screen {
    height: 100vh;
}
.h-min {
    height: min-content;
}
.h-max {
    height: max-content;
}
.h-fit {
    height: fit-content;
}

/* Fixed width utilities */
.w-4 {
    width: 1rem;
}
.w-6 {
    width: 1.5rem;
}
.w-8 {
    width: 2rem;
}
.w-10 {
    width: 2.5rem;
}
.w-12 {
    width: 3rem;
}
.w-16 {
    width: 4rem;
}
.w-20 {
    width: 5rem;
}
.w-24 {
    width: 6rem;
}
.w-32 {
    width: 8rem;
}
.w-40 {
    width: 10rem;
}
.w-48 {
    width: 12rem;
}
.w-56 {
    width: 14rem;
}
.w-64 {
    width: 16rem;
}
.w-72 {
    width: 18rem;
}
.w-80 {
    width: 20rem;
}
.w-96 {
    width: 24rem;
}

/* Fixed height utilities */
.h-4 {
    height: 1rem;
}
.h-6 {
    height: 1.5rem;
}
.h-8 {
    height: 2rem;
}
.h-10 {
    height: 2.5rem;
}
.h-12 {
    height: 3rem;
}
.h-16 {
    height: 4rem;
}
.h-20 {
    height: 5rem;
}
.h-24 {
    height: 6rem;
}
.h-32 {
    height: 8rem;
}
.h-40 {
    height: 10rem;
}
.h-48 {
    height: 12rem;
}
.h-56 {
    height: 14rem;
}
.h-64 {
    height: 16rem;
}
.h-72 {
    height: 18rem;
}
.h-80 {
    height: 20rem;
}
.h-96 {
    height: 24rem;
}

/* ==========================================================================
   Shadow Utilities
   ========================================================================== */

.shadow-none {
    box-shadow: none;
}
.shadow-sm {
    box-shadow: var(--shadow-sm);
}
.shadow-md {
    box-shadow: var(--shadow-md);
}
.shadow-lg {
    box-shadow: var(--shadow-lg);
}
.shadow-xl {
    box-shadow: var(--shadow-xl);
}
.shadow-2xl {
    box-shadow: var(--shadow-2xl);
}

/* ==========================================================================
   Opacity Utilities
   ========================================================================== */

.opacity-0 {
    opacity: 0;
}
.opacity-25 {
    opacity: 0.25;
}
.opacity-50 {
    opacity: 0.5;
}
.opacity-75 {
    opacity: 0.75;
}
.opacity-100 {
    opacity: 1;
}

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

.z-auto {
    z-index: auto;
}
.z-0 {
    z-index: 0;
}
.z-10 {
    z-index: 10;
}
.z-20 {
    z-index: 20;
}
.z-30 {
    z-index: 30;
}
.z-40 {
    z-index: 40;
}
.z-50 {
    z-index: 50;
}

/* Using defined z-index scale */
.z-dropdown {
    z-index: var(--z-dropdown);
}
.z-sticky {
    z-index: var(--z-sticky);
}
.z-fixed {
    z-index: var(--z-fixed);
}
.z-modal-backdrop {
    z-index: var(--z-modal-backdrop);
}
.z-modal {
    z-index: var(--z-modal);
}
.z-popover {
    z-index: var(--z-popover);
}
.z-tooltip {
    z-index: var(--z-tooltip);
}

/* ==========================================================================
   Transition Utilities
   ========================================================================== */

.transition-none {
    transition: none;
}
.transition-all {
    transition: all var(--transition-base);
}
.transition-colors {
    transition: color var(--transition-base),
        background-color var(--transition-base),
        border-color var(--transition-base);
}
.transition-opacity {
    transition: opacity var(--transition-base);
}
.transition-transform {
    transition: transform var(--transition-base);
}

.transition-fast {
    transition-duration: var(--transition-fast);
}
.transition-base {
    transition-duration: var(--transition-base);
}
.transition-slow {
    transition-duration: var(--transition-slow);
}

/* ==========================================================================
   Cursor Utilities
   ========================================================================== */

.cursor-auto {
    cursor: auto;
}
.cursor-default {
    cursor: default;
}
.cursor-pointer {
    cursor: pointer;
}
.cursor-wait {
    cursor: wait;
}
.cursor-text {
    cursor: text;
}
.cursor-move {
    cursor: move;
}
.cursor-help {
    cursor: help;
}
.cursor-not-allowed {
    cursor: not-allowed;
}

/* ==========================================================================
   User Select Utilities
   ========================================================================== */

.select-none {
    user-select: none;
}
.select-text {
    user-select: text;
}
.select-all {
    user-select: all;
}
.select-auto {
    user-select: auto;
}

/* ==========================================================================
   Pointer Events Utilities
   ========================================================================== */

.pointer-events-none {
    pointer-events: none;
}
.pointer-events-auto {
    pointer-events: auto;
}

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

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

.not-sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}