/* ========================================
   CSS UTILITIES - Ready to Use
   Add this to your CSS or create utilities.css
======================================== */

/* ========== SHADOWS ========== */
:root {
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);

    --backdrop-blur-sm: blur(4px);
    --backdrop-blur-md: blur(10px);
    --backdrop-blur-lg: blur(30px);
}

.shadow-xs {
    box-shadow: var(--shadow-xs);
}

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

/* ========== BACKDROP FILTERS ========== */
.backdrop-blur-sm {
    backdrop-filter: var(--backdrop-blur-sm);
    -webkit-backdrop-filter: var(--backdrop-blur-sm);
}

.backdrop-blur-md {
    backdrop-filter: var(--backdrop-blur-md);
    -webkit-backdrop-filter: var(--backdrop-blur-md);
}

.backdrop-blur-lg {
    backdrop-filter: var(--backdrop-blur-lg);
    -webkit-backdrop-filter: var(--backdrop-blur-lg);
}

/* ========== GRADIENTS ========== */
.gradient-primary {
    background: linear-gradient(223deg, var(--accent-hover-color), var(--primary-color)) !important;
}

.gradient-primary-text {
    background: linear-gradient(223deg, var(--accent-hover-color), var(--primary-color));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-to-right {
    background: linear-gradient(to right, var(--bg-light), var(--bg-light));
}

/* ========== CARD BASE ========== */
.card-base {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: var(--surface);
}

.card-base:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* ========== FLEX UTILITIES ========== */

.flex {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-md);
}

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

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

.flex-col {
    display: flex;
    flex-direction: column;
}

.gap-sm {
    gap: var(--gap-sm);
}

.gap-md {
    gap: var(--gap-md);
}

.gap-lg {
    gap: var(--gap-lg);
}

.gap-xl {
    gap: var(--gap-xl);
}

/* ========== PADDING UTILITIES ========== */
.p-sm {
    padding: var(--gap-sm);
}

.p-md {
    padding: var(--gap-md);
}

.p-lg {
    padding: var(--gap-lg);
}

.p-xl {
    padding: var(--gap-xl);
}

.px-sm {
    padding-left: var(--gap-sm);
    padding-right: var(--gap-sm);
}

.px-md {
    padding-left: var(--gap-md);
    padding-right: var(--gap-md);
}

.px-lg {
    padding-left: var(--gap-lg);
    padding-right: var(--gap-lg);
}

.px-xl {
    padding-left: var(--gap-xl);
    padding-right: var(--gap-xl);
}

.py-sm {
    padding-top: var(--gap-sm);
    padding-bottom: var(--gap-sm);
}

.py-md {
    padding-top: var(--gap-md);
    padding-bottom: var(--gap-md);
}

.py-lg {
    padding-top: var(--gap-lg);
    padding-bottom: var(--gap-lg);
}

.py-xl {
    padding-top: var(--gap-xl);
    padding-bottom: var(--gap-xl);
}

/* ========== MARGIN UTILITIES ========== */
.m-sm {
    margin: var(--gap-sm);
}

.m-md {
    margin: var(--gap-md);
}

.m-lg {
    margin: var(--gap-lg);
}

.m-xl {
    margin: var(--gap-xl);
}

.m-auto {
    margin: auto;
}

.mx-sm {
    margin-left: var(--gap-sm);
    margin-right: var(--gap-sm);
}

.mx-md {
    margin-left: var(--gap-md);
    margin-right: var(--gap-md);
}

.mx-lg {
    margin-left: var(--gap-lg);
    margin-right: var(--gap-lg);
}

.mx-xl {
    margin-left: var(--gap-xl);
    margin-right: var(--gap-xl);
}

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

.my-sm {
    margin-top: var(--gap-sm);
    margin-bottom: var(--gap-sm);
}

.my-md {
    margin-top: var(--gap-md);
    margin-bottom: var(--gap-md);
}

.my-lg {
    margin-top: var(--gap-lg);
    margin-bottom: var(--gap-lg);
}

.my-xl {
    margin-top: var(--gap-xl);
    margin-bottom: var(--gap-xl);
}

/* ========== BORDER RADIUS UTILITIES ========== */
.rounded-xs {
    border-radius: var(--radius-xs);
}

.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-full {
    border-radius: var(--radius-full);
}

/* ========== TEXT 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-md {
    font-size: var(--font-size-md);
}

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

.fs-10 {
    font-size: 0.625rem;
}

.fs-12 {
    font-size: 0.75rem;
}

.fs-14 {
    font-size: 0.875rem;
}

.fs-16 {
    font-size: 1rem;
}

.fs-1r {
    font-size: 1rem;
}

.fs-15r {
    font-size: 1.5rem;
}

.fs-2r {
    font-size: 2rem;
}

.fs-25r {
    font-size: 2.5rem;
}

.fs-3r {
    font-size: 3rem;
}

.fs-35r {
    font-size: 3.5rem;
}

.fs-4r {
    font-size: 4rem;
}

.fs-45r {
    font-size: 4.5rem;
}

.fs-5r {
    font-size: 5rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.text-success {
    color: var(--success-color);
}

.text-error {
    color: var(--error-color);
}

.text-warning {
    color: var(--warning-color);
}

.text-info {
    color: var(--info-color);
}

.text-light {
    color: var(--bg-white);
}

.text-dark {
    color: var(--bg-black);
}

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

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

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

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

.text-hover-underline:hover {
    text-decoration: underline !important;
}

/* ========== BACKGROUND UTILITIES ========== */
.bg-primary {
    background-color: var(--primary-color) !important;
}

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

.bg-card {
    background-color: var(--card-bg);
}

.bg-success {
    background-color: var(--success-color);
}

.bg-error {
    background-color: var(--error-color);
}

.bg-warning {
    background-color: var(--warning-color);
}

.bg-info {
    background-color: var(--info-color);
}

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

.bg-dark {
    background-color: var(--bg-dark);
}

.bg-light {
    background-color: var(--bg-light);
}

/* ========== BORDER UTILITIES ========== */
.border {
    border: 1px solid var(--border-color);
}

.border-primary {
    border-color: var(--primary-color);
}

.border-success {
    border-color: var(--success-color);
}

.border-error {
    border-color: var(--error-color);
}

.border-warning {
    border-color: var(--warning-color);
}

.border-dark {
    border-color: #000 !important;
}

.border-t {
    border-top: 1px solid var(--border-color);
}

.border-b {
    border-bottom: 1px solid var(--border-color);
}

.border-l {
    border-left: 1px solid var(--border-color);
}

.border-r {
    border-right: 1px solid var(--border-color);
}

/* ========== DISPLAY UTILITIES ========== */
.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

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

.block {
    display: block;
}

.inline {
    display: inline;
}

.flex {
    display: flex;
}

.grid {
    display: grid;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-auto {
    overflow: auto;
}

.overflow-visible {
    overflow: visible;
}

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

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

.cursor-default {
    cursor: default;
}

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

/* ========== TRANSITIONS ========== */
.transition-all {
    transition: all 0.3s ease;
}

.transition-fast {
    transition: all 0.15s ease;
}

.transition-slow {
    transition: all 0.6s ease;
}

.transition-colors {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.transition-transform {
    transition: transform 0.3s ease;
}

/* ========== WIDTH UTILITIES ========== */

.container {
    width: var(--global-viewport-content-responsive);
    max-width: 1680px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
}

@media (max-width: 575.98px) {
    .container {
        width: 100vw;
    }
}

.w-full {
    width: 100%;
}

.w-1_2 {
    width: 50%;
}

.w-1_3 {
    width: 33.333%;
}

.w-2_3 {
    width: 66.666%;
}

.w-1_4 {
    width: 25%;
}

.w-3_4 {
    width: 75%;
}

.max-w-xs {
    max-width: 20rem;
}

.max-w-sm {
    max-width: 24rem;
}

.max-w-md {
    max-width: 28rem;
}

.max-w-lg {
    max-width: 32rem;
}

.max-w-xl {
    max-width: 36rem;
}

.max-w-2xl {
    max-width: 42rem;
}

.max-w-3xl {
    max-width: 48rem;
}

.max-w-4xl {
    max-width: 56rem;
}

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

.max-w-screen {
    max-width: 100vw;
}

.w-50-variable {
    width: 50%;
}

.w-75-variable {
    width: 75%;
}

@media (max-width: 992px) {
    .w-50-variable {
        width: 50%;
    }

    .w-75-variable {
        width: 75%;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .w-50-variable {
        width: 65%;
    }

    .w-75-variable {
        width: 85%;
    }
}

@media (min-width: 575.99px) and (max-width: 767.98px) {
    .w-50-variable {
        width: 75%;
    }

    .w-75-variable {
        width: 90%;
    }
}

@media (min-width: 0px) and (max-width: 575.98px) {
    .w-50-variable {
        width: 95%;
    }

    .w-75-variable {
        width: 95%;
    }
}

/* ========== HEIGHT UTILITIES ========== */
.h-full {
    height: 100%;
}

.h-screen {
    height: 100vh;
}

.h-auto {
    height: auto;
}

/* ========== POSITION UTILITIES ========== */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

/* ========== Z-INDEX UTILITIES ========== */
.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;
}

.z-auto {
    z-index: auto;
}

/* ========== ASPECT RATIO UTILITIES ========== */
.aspect-square {
    aspect-ratio: 1 / 1;
}

.aspect-video {
    aspect-ratio: 16 / 9;
}

.aspect-3_2 {
    aspect-ratio: 3 / 2;
}

.aspect-4_3 {
    aspect-ratio: 4 / 3;
}

.aspect-3_4 {
    aspect-ratio: 3 / 4;
}

/* ========== RESPONSIVE BREAKPOINTS ========== */
@media (max-width: 575.98px) {
    .hidden-mobile {
        display: none !important;
    }

    .w-1_2 {
        width: 100%;
    }

    .w-1_3 {
        width: 100%;
    }

    .w-2_3 {
        width: 100%;
    }

    .w-3_4 {
        width: 100%;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .hidden-tablet {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .hidden-desktop {
        display: none !important;
    }
}