:root {
    /* Primary palette */
    --primary: #3b82f6;
    --primary-light: #60a5fa;
    --primary-dark: #1d4ed8;
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6; /* base */
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a; /* very dark */

    /* Secondary palette */
    --secondary: #6b7280;
    --secondary-light: #9ca3af;
    --secondary-dark: #374151;
    --secondary-50: #f9fafb;
    --secondary-100: #f3f4f6;
    --secondary-200: #e5e7eb;
    --secondary-300: #d1d5db;
    --secondary-400: #9ca3af;
    --secondary-500: #6b7280;
    --secondary-600: #4b5563;
    --secondary-700: #374151;
    --secondary-800: #1f2937;
    --secondary-900: #111827;

    /* Background colors */
    --background: whitesmoke;
    --background-light: #f8fafc;
    --background-dark: #0f172a;
    --background-paper: #ffffff;
    --background-overlay: rgba(0, 0, 0, 0.5);
    --background-disabled: #f1f5f9;

    /* Accent colors */
    --accent1: #10b981;
    --accent1-light: #34d399;
    --accent1-dark: #059669;
    --accent2: #f59e0b;
    --accent2-light: #fbbf24;
    --accent2-dark: #d97706;
    --accent3: #ef4444;
    --accent3-light: #f87171;
    --accent3-dark: #dc2626;

    /* Semantic colors */
    --success: #10b981;
    --success-light: #34d399;
    --success-dark: #059669;
    --warning: #f59e0b;
    --warning-light: #fbbf24;
    --warning-dark: #d97706;
    --error: #ef4444;
    --error-light: #f87171;
    --error-dark: #dc2626;
    --info: #3b82f6;
    --info-light: #60a5fa;
    --info-dark: #1d4ed8;

    /* Text colors */
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --text-disabled: #d1d5db;
    --text-inverse: #ffffff;
    --text-success: #065f46;
    --text-warning: #92400e;
    --text-error: #991b1b;
    --text-info: #1e40af;

    /* State colors */
    --hover: rgba(0, 0, 0, 0.1);
    --active: rgba(0, 0, 0, 0.2);
    --focus: #3b82f6;
    --disabled: #d1d5db;
    --selected: #3b82f6;
    --visited: #7c3aed;

    /* Border colors */
    --border-light: #e5e7eb;
    --border-medium: #d1d5db;
    --border-dark: #6b7280;
    --border-focus: #3b82f6;
    --border-error: #ef4444;
    --border-success: #10b981;
    --border-warning: #f59e0b;

    /* Component colors */
    --button-primary: #3b82f6;
    --button-secondary: #6b7280;
    --input-border: #d1d5db;
    --input-focus: #3b82f6;
    --card-background: #ffffff;
    --modal-overlay: rgba(0, 0, 0, 0.5);
    --navbar-background: #ffffff;
    --sidebar-background: #f8fafc;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #3b82f6, #1d4ed8);
    --gradient-secondary: linear-gradient(135deg, #6b7280, #374151);
    --gradient-accent: linear-gradient(135deg, #10b981, #059669);
    --gradient-rainbow: linear-gradient(135deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080);
    --gradient-sunset: linear-gradient(135deg, #ff7e5f, #feb47b);
    --gradient-ocean: linear-gradient(135deg, #667eea, #764ba2);

    /* Font Sizes - Fixed */
    --font-size-xxs: 0.625rem;   /* 10px */
    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-s: 0.875rem;     /* 14px */
    --font-size-m: 1rem;         /* 16px - Base */
    --font-size-l: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-xxl: 1.5rem;     /* 24px */
    --font-size-xxxl: 2rem;      /* 32px */
    --font-size-4xl: 2.25rem;    /* 36px */
    --font-size-5xl: 3rem;       /* 48px */
    --font-size-6xl: 4rem;       /* 64px */

    /* Font Sizes - Fluid (using clamp) */
    --font-size-fluid-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);     /* 12px -> 14px */
    --font-size-fluid-s: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);        /* 14px -> 16px */
    --font-size-fluid-m: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);          /* 16px -> 18px */
    --font-size-fluid-l: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);       /* 18px -> 20px */
    --font-size-fluid-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);       /* 20px -> 24px */
    --font-size-fluid-xxl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);          /* 24px -> 32px */
    --font-size-fluid-xxxl: clamp(2rem, 1.5rem + 2.5vw, 2.5rem);         /* 32px -> 40px */
    --font-size-fluid-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3rem);        /* 36px -> 48px */
    --font-size-fluid-5xl: clamp(3rem, 2rem + 5vw, 4rem);                /* 48px -> 64px */
    --font-size-fluid-6xl: clamp(4rem, 2.5rem + 7.5vw, 6rem);            /* 64px -> 96px */

    /* Font Weights */
    --font-weight-thin: 100;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    /* Line Heights */
    --line-height-none: 1;
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;

    /* Letter Spacing */
    --letter-spacing-tighter: -0.05em;
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;

    /* Spacing Scale (Base: 4px) - Fixed */
    --space-0: 0;
    --space-1: 0.25rem;    /* 4px */
    --space-2: 0.5rem;     /* 8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.25rem;    /* 20px */
    --space-6: 1.5rem;     /* 24px */
    --space-7: 1.75rem;    /* 28px */
    --space-8: 2rem;       /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */
    --space-32: 8rem;      /* 128px */
    --space-40: 10rem;     /* 160px */
    --space-48: 12rem;     /* 192px */
    --space-56: 14rem;     /* 224px */
    --space-64: 16rem;     /* 256px */

    /* Spacing Scale - Fluid (using clamp) */
    --space-fluid-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);       /* 4px -> 8px */
    --space-fluid-s: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);         /* 8px -> 12px */
    --space-fluid-m: clamp(0.75rem, 0.5rem + 1.25vw, 1.5rem);        /* 12px -> 24px */
    --space-fluid-l: clamp(1rem, 0.5rem + 2.5vw, 2rem);              /* 16px -> 32px */
    --space-fluid-xl: clamp(1.5rem, 0.75rem + 3.75vw, 3rem);         /* 24px -> 48px */
    --space-fluid-xxl: clamp(2rem, 1rem + 5vw, 4rem);                /* 32px -> 64px */
    --space-fluid-xxxl: clamp(3rem, 1.5rem + 7.5vw, 6rem);           /* 48px -> 96px */

    /* Container Sizes - Fluid */
    --container-fluid-xs: clamp(16rem, 90vw, 20rem);                  /* 256px -> 320px */
    --container-fluid-s: clamp(20rem, 90vw, 24rem);                   /* 320px -> 384px */
    --container-fluid-m: clamp(24rem, 90vw, 28rem);                   /* 384px -> 448px */
    --container-fluid-l: clamp(28rem, 90vw, 32rem);                   /* 448px -> 512px */
    --container-fluid-xl: clamp(32rem, 90vw, 36rem);                  /* 512px -> 576px */
    --container-fluid-xxl: clamp(36rem, 90vw, 42rem);                 /* 576px -> 672px */
    --container-fluid-full: clamp(42rem, 95vw, 80rem);                /* 672px -> 1280px */

    /* Breakpoints */
    --breakpoint-xs: 0px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-xxl: 1536px;

    /* Border Radius */
    --radius-none: 0;
    --radius-xs: 0.125rem;    /* 2px */
    --radius-sm: 0.25rem;     /* 4px */
    --radius-md: 0.375rem;    /* 6px */
    --radius-lg: 0.5rem;      /* 8px */
    --radius-xl: 0.75rem;     /* 12px */
    --radius-2xl: 1rem;       /* 16px */
    --radius-3xl: 1.5rem;     /* 24px */
    --radius-full: 9999px;    /* Fully rounded */

    /* Animation Duration */
    --duration-fastest: 0.3s;
    --duration-fast: 0.5s;
    --duration-normal: 0.8s;
    --duration-slow: 1s;
    --duration-slower: 1.2s;
    --duration-slowest: 1.4s;

    /* Easing Functions */
    --ease-linear: cubic-bezier(0, 0, 1, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ANIMATIONS */

/* Fade animations */
@keyframes fadeInBottom {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInTop {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInCenter {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* Slide animations */
@keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes slideInTop {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

@keyframes slideInBottom {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes slideOutLeft {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

@keyframes slideOutRight {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

@keyframes slideOutTop {
    from { transform: translateY(0); }
    to { transform: translateY(-100%); }
}

@keyframes slideOutBottom {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}

/* Scale animations */
@keyframes scaleIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

@keyframes scaleOut {
    from { transform: scale(1); }
    to { transform: scale(0); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.1); }
    50% { transform: scale(1); }
    75% { transform: scale(1.1); }
}

/* Rotation animations */
@keyframes rotateIn {
    from { transform: rotate(-180deg) scale(0); }
    to { transform: rotate(0deg) scale(1); }
}

@keyframes rotateOut {
    from { transform: rotate(0deg) scale(1); }
    to { transform: rotate(180deg) scale(0); }
}

@keyframes flipHorizontal {
    from { transform: rotateY(0); }
    to { transform: rotateY(180deg); }
}

@keyframes flipVertical {
    from { transform: rotateX(0); }
    to { transform: rotateX(180deg); }
}

@keyframes rotate360 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rotateBounce {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(10deg); }
    75% { transform: rotate(-10deg); }
}

/* Bounce animations */
@keyframes bounceIn {
    0% { transform: scale(0.3); }
    50% { transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

@keyframes bounceOut {
    0% { transform: scale(1); }
    25% { transform: scale(0.95); }
    50% { transform: scale(1.1); }
    100% { transform: scale(0); }
}

@keyframes bounceLight {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes bounceStrong {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

@keyframes bounceUp {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes bounceDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}

/* Special effects */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes wobble {
    0%, 100% { transform: translateX(0%); }
    15% { transform: translateX(-25%) rotate(-5deg); }
    30% { transform: translateX(20%) rotate(3deg); }
    45% { transform: translateX(-15%) rotate(-3deg); }
    60% { transform: translateX(10%) rotate(2deg); }
    75% { transform: translateX(-5%) rotate(-1deg); }
}

@keyframes flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px rgba(59, 130, 246, 0.5); }
    50% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.8); }
}

@keyframes jello {
    0%, 100% { transform: scale3d(1, 1, 1); }
    30% { transform: scale3d(1.25, 0.75, 1); }
    40% { transform: scale3d(0.75, 1.25, 1); }
    50% { transform: scale3d(1.15, 0.85, 1); }
    65% { transform: scale3d(0.95, 1.05, 1); }
    75% { transform: scale3d(1.05, 0.95, 1); }
}

@keyframes rubberBand {
    0%, 100% { transform: scale3d(1, 1, 1); }
    30% { transform: scale3d(1.25, 0.75, 1); }
    40% { transform: scale3d(0.75, 1.25, 1); }
    50% { transform: scale3d(1.15, 0.85, 1); }
    65% { transform: scale3d(0.95, 1.05, 1); }
    75% { transform: scale3d(1.05, 0.95, 1); }
}

@keyframes swing {
    20% { transform: rotate3d(0, 0, 1, 15deg); }
    40% { transform: rotate3d(0, 0, 1, -10deg); }
    60% { transform: rotate3d(0, 0, 1, 5deg); }
    80% { transform: rotate3d(0, 0, 1, -5deg); }
    100% { transform: rotate3d(0, 0, 1, 0deg); }
}

@keyframes tada {
    0% { transform: scale3d(1, 1, 1); }
    10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
    30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
    40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
    100% { transform: scale3d(1, 1, 1); }
}

/* Animation Classes */
.animation_fade_in_bottom { animation: fadeInBottom var(--duration-normal) var(--ease-out); }
.animation_fade_in_top { animation: fadeInTop var(--duration-normal) var(--ease-out); }
.animation_fade_in_left { animation: fadeInLeft var(--duration-normal) var(--ease-out); }
.animation_fade_in_right { animation: fadeInRight var(--duration-normal) var(--ease-out); }
.animation_fade_in_center { animation: fadeInCenter var(--duration-normal) var(--ease-out); }
.animation_fade_out { animation: fadeOut var(--duration-normal) var(--ease-out); }
.animation_fade_in_scale { animation: fadeInScale var(--duration-normal) var(--ease-out); }

.animation_slide_in_left { animation: slideInLeft var(--duration-normal) var(--ease-out); }
.animation_slide_in_right { animation: slideInRight var(--duration-normal) var(--ease-out); }
.animation_slide_in_top { animation: slideInTop var(--duration-normal) var(--ease-out); }
.animation_slide_in_bottom { animation: slideInBottom var(--duration-normal) var(--ease-out); }
.animation_slide_out_left { animation: slideOutLeft var(--duration-normal) var(--ease-out); }
.animation_slide_out_right { animation: slideOutRight var(--duration-normal) var(--ease-out); }
.animation_slide_out_top { animation: slideOutTop var(--duration-normal) var(--ease-out); }
.animation_slide_out_bottom { animation: slideOutBottom var(--duration-normal) var(--ease-out); }

.animation_scale_in { animation: scaleIn var(--duration-normal) var(--ease-out); }
.animation_scale_out { animation: scaleOut var(--duration-normal) var(--ease-out); }
.animation_pulse { animation: pulse 2s infinite; }
.animation_heartbeat { animation: heartbeat 1s infinite; }

.animation_rotate_in { animation: rotateIn var(--duration-normal) var(--ease-out); }
.animation_rotate_out { animation: rotateOut var(--duration-normal) var(--ease-out); }
.animation_flip_horizontal { animation: flipHorizontal var(--duration-normal) var(--ease-out); }
.animation_flip_vertical { animation: flipVertical var(--duration-normal) var(--ease-out); }
.animation_rotate_360 { animation: rotate360 1s linear infinite; }
.animation_rotate_bounce { animation: rotateBounce var(--duration-normal) var(--ease-out); }

.animation_bounce_in { animation: bounceIn var(--duration-normal) var(--ease-out); }
.animation_bounce_out { animation: bounceOut var(--duration-normal) var(--ease-out); }
.animation_bounce_light { animation: bounceLight 1s infinite; }
.animation_bounce_strong { animation: bounceStrong 1s infinite; }
.animation_bounce_up { animation: bounceUp 1s infinite; }
.animation_bounce_down { animation: bounceDown 1s infinite; }

.animation_shake { animation: shake 0.5s; }
.animation_wobble { animation: wobble 1s; }
.animation_flash { animation: flash 1s infinite; }
.animation_glow { animation: glow 2s infinite; }
.animation_jello { animation: jello 1s; }
.animation_rubber_band { animation: rubberBand 1s; }
.animation_swing { animation: swing 1s; }
.animation_tada { animation: tada 1s; }

/* Duration modifiers */
.animation_duration_fastest { animation-duration: var(--duration-fastest) !important; }
.animation_duration_fast { animation-duration: var(--duration-fast) !important; }
.animation_duration_normal { animation-duration: var(--duration-normal) !important; }
.animation_duration_slow { animation-duration: var(--duration-slow) !important; }
.animation_duration_slower { animation-duration: var(--duration-slower) !important; }
.animation_duration_slowest { animation-duration: var(--duration-slowest) !important; }

/* Delay modifiers */
.animation_delay_1 { animation-delay: 0.1s; }
.animation_delay_2 { animation-delay: 0.2s; }
.animation_delay_3 { animation-delay: 0.3s; }
.animation_delay_4 { animation-delay: 0.4s; }
.animation_delay_5 { animation-delay: 0.5s; }
.animation_delay_10 { animation-delay: 1.0s; }

/* Iteration modifiers */
.animation_infinite { animation-iteration-count: infinite; }
.animation_repeat_1 { animation-iteration-count: 1; }
.animation_repeat_2 { animation-iteration-count: 2; }
.animation_repeat_3 { animation-iteration-count: 3; }
.animation_repeat_5 { animation-iteration-count: 5; }

/* HOVER EFFECTS */

/* Text effects */
.hover-text-underline:hover { text-decoration: underline; }
.hover-text-strikethrough:hover { text-decoration: line-through; }
.hover-text-bold:hover { font-weight: var(--font-weight-bold); }
.hover-text-uppercase:hover { text-transform: uppercase; }
.hover-text-lowercase:hover { text-transform: lowercase; }
.hover-text-capitalize:hover { text-transform: capitalize; }
.hover-text-italic:hover { font-style: italic; }
.hover-text-normal:hover { font-style: normal; }

/* Color switching */
.hover-switch-to-primary:hover { color: var(--primary); }
.hover-switch-to-secondary:hover { color: var(--secondary); }
.hover-switch-to-accent1:hover { color: var(--accent1); }
.hover-switch-to-accent2:hover { color: var(--accent2); }
.hover-switch-to-accent3:hover { color: var(--accent3); }
.hover-switch-to-success:hover { color: var(--success); }
.hover-switch-to-warning:hover { color: var(--warning); }
.hover-switch-to-error:hover { color: var(--error); }
.hover-switch-to-info:hover { color: var(--info); }

/* Movement effects */
.hover-move-up:hover { transform: translateY(-2px); }
.hover-move-down:hover { transform: translateY(2px); }
.hover-move-left:hover { transform: translateX(-2px); }
.hover-move-right:hover { transform: translateX(2px); }
.hover-move-up-left:hover { transform: translate(-2px, -2px); }
.hover-move-up-right:hover { transform: translate(2px, -2px); }
.hover-move-down-left:hover { transform: translate(-2px, 2px); }
.hover-move-down-right:hover { transform: translate(2px, 2px); }

/* Scale effects */
.hover-scale-3:hover { transform: scale(1.03); }
.hover-scale-5:hover { transform: scale(1.05); }
.hover-scale-10:hover { transform: scale(1.1); }
.hover-scale-15:hover { transform: scale(1.15); }
.hover-scale-20:hover { transform: scale(1.2); }
.hover-scale-down-5:hover { transform: scale(0.95); }
.hover-scale-down-10:hover { transform: scale(0.9); }

/* Rotation effects */
.hover-rotate-5:hover { transform: rotate(5deg); }
.hover-rotate-15:hover { transform: rotate(15deg); }
.hover-rotate-45:hover { transform: rotate(45deg); }
.hover-rotate-90:hover { transform: rotate(90deg); }
.hover-rotate-180:hover { transform: rotate(180deg); }
.hover-rotate-negative-5:hover { transform: rotate(-5deg); }
.hover-rotate-negative-15:hover { transform: rotate(-15deg); }

/* Border effects */
.hover-border-add:hover { border: 1px solid var(--border-medium); }
.hover-border-remove:hover { border: none; }
.hover-border-thicken:hover { border-width: 2px; }
.hover-border-color-primary:hover { border-color: var(--primary); }
.hover-border-color-secondary:hover { border-color: var(--secondary); }
.hover-border-color-accent1:hover { border-color: var(--accent1); }
.hover-border-color-accent2:hover { border-color: var(--accent2); }
.hover-border-color-accent3:hover { border-color: var(--accent3); }

/* Shadow effects */
.hover-shadow-s:hover { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.hover-shadow-m:hover { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.hover-shadow-l:hover { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); }
.hover-shadow-xl:hover { box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15); }
.hover-shadow-xxl:hover { box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25); }
.hover-shadow-remove:hover { box-shadow: none; }
.hover-shadow-glow:hover { box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); }

/* Opacity effects */
.hover-opacity-0:hover { opacity: 0; }
.hover-opacity-10:hover { opacity: 0.1; }
.hover-opacity-25:hover { opacity: 0.25; }
.hover-opacity-50:hover { opacity: 0.5; }
.hover-opacity-75:hover { opacity: 0.75; }
.hover-opacity-90:hover { opacity: 0.9; }
.hover-opacity-100:hover { opacity: 1; }

/* Background effects */
.hover-bg-primary:hover { background-color: var(--primary); }
.hover-bg-secondary:hover { background-color: var(--secondary); }
.hover-bg-accent1:hover { background-color: var(--accent1); }
.hover-bg-accent2:hover { background-color: var(--accent2); }
.hover-bg-accent3:hover { background-color: var(--accent3); }
.hover-bg-transparent:hover { background-color: transparent; }
.hover-bg-lighten:hover { filter: brightness(1.1); }
.hover-bg-darken:hover { filter: brightness(0.9); }

/* Filter effects */
.hover-blur:hover { filter: blur(2px); }
.hover-brightness-up:hover { filter: brightness(1.2); }
.hover-brightness-down:hover { filter: brightness(0.8); }
.hover-contrast-up:hover { filter: contrast(1.2); }
.hover-contrast-down:hover { filter: contrast(0.8); }

/* Cursor effects */
.hover-cursor-pointer:hover { cursor: pointer; }
.hover-cursor-grab:hover { cursor: grab; }
.hover-cursor-not-allowed:hover { cursor: not-allowed; }
.hover-cursor-help:hover { cursor: help; }
.hover-cursor-text:hover { cursor: text; }
.hover-cursor-move:hover { cursor: move; }

/* Add transition to all hover effects */
[class*="hover-"] {
    transition: all var(--duration-fast) var(--ease-out);
}

/* BORDERS */

/* Border width */
.border-0 { border-width: 0; }
.border-1 { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-3 { border-width: 3px; }
.border-4 { border-width: 4px; }
.border-5 { border-width: 5px; }
.border-6 { border-width: 6px; }
.border-8 { border-width: 8px; }

/* Border sides */
.border-top { border-top: 1px solid var(--border-medium); }
.border-right { border-right: 1px solid var(--border-medium); }
.border-bottom { border-bottom: 1px solid var(--border-medium); }
.border-left { border-left: 1px solid var(--border-medium); }
.border-x { border-left: 1px solid var(--border-medium); border-right: 1px solid var(--border-medium); }
.border-y { border-top: 1px solid var(--border-medium); border-bottom: 1px solid var(--border-medium); }
.border-all { border: 1px solid var(--border-medium); }
.border-none { border: none; }

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

/* Border radius corners */
.border-radius-top-left { border-top-left-radius: var(--radius-md); }
.border-radius-top-right { border-top-right-radius: var(--radius-md); }
.border-radius-bottom-left { border-bottom-left-radius: var(--radius-md); }
.border-radius-bottom-right { border-bottom-right-radius: var(--radius-md); }
.border-radius-top { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
.border-radius-bottom { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
.border-radius-left { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); }
.border-radius-right { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }

/* Border styles */
.border-solid { border-style: solid; }
.border-dashed { border-style: dashed; }
.border-dotted { border-style: dotted; }
.border-double { border-style: double; }
.border-groove { border-style: groove; }
.border-ridge { border-style: ridge; }
.border-inset { border-style: inset; }
.border-outset { border-style: outset; }

/* Border colors */
.border-primary { border-color: var(--primary); }
.border-secondary { border-color: var(--secondary); }
.border-accent1 { border-color: var(--accent1); }
.border-accent2 { border-color: var(--accent2); }
.border-accent3 { border-color: var(--accent3); }
.border-success { border-color: var(--success); }
.border-warning { border-color: var(--warning); }
.border-error { border-color: var(--error); }
.border-info { border-color: var(--info); }
.border-muted { border-color: var(--text-muted); }
.border-transparent { border-color: transparent; }
.border-current { border-color: currentColor; }

/* STATES */

/* Selection states */
.selected { background-color: var(--selected); color: white; }
.selected-primary { background-color: var(--primary); color: white; }
.selected-secondary { background-color: var(--secondary); color: white; }
.selected-accent1 { background-color: var(--accent1); color: white; }
.selected-accent2 { background-color: var(--accent2); color: white; }
.selected-accent3 { background-color: var(--accent3); color: white; }
.selected-success { background-color: var(--success); color: white; }
.selected-warning { background-color: var(--warning); color: white; }
.selected-error { background-color: var(--error); color: white; }


.active-primary { background-color: var(--primary-600); }
.active-secondary { background-color: var(--secondary-600); }
.active-accent1 { background-color: var(--accent1-dark); }
.active-accent2 { background-color: var(--accent2-dark); }
.active-accent3 { background-color: var(--accent3-dark); }
.active-light { background-color: var(--primary-100); }
.active-dark { background-color: var(--primary-800); }

/* Focus states */
.focus:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.focus-primary:focus { outline: 2px solid var(--primary); outline-offset: 2px; }
.focus-secondary:focus { outline: 2px solid var(--secondary); outline-offset: 2px; }
.focus-accent1:focus { outline: 2px solid var(--accent1); outline-offset: 2px; }
.focus-visible:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.focus-within:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.focus-ring:focus { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); }
.focus-ring-offset:focus { box-shadow: 0 0 0 2px white, 0 0 0 4px var(--focus); }

/* Checked states */
.checked:checked { background-color: var(--primary); }
.checked-primary:checked { background-color: var(--primary); }
.checked-secondary:checked { background-color: var(--secondary); }
.checked-accent1:checked { background-color: var(--accent1); }
.checked-success:checked { background-color: var(--success); }
.checked-indeterminate:indeterminate { background-color: var(--secondary); }

/* Disabled states */
.disabled, .disabled:disabled { opacity: 0.5; cursor: not-allowed; }
.disabled-opacity { opacity: 0.5; }
.disabled-grayscale { filter: grayscale(1); }
.disabled-blur { filter: blur(1px); }
.disabled-cursor { cursor: not-allowed; }

/* Highlighted states */
.highlight { background-color: yellow; }
.highlight-primary { background-color: var(--primary-100); }
.highlight-secondary { background-color: var(--secondary-100); }
.highlight-accent1 { background-color: var(--accent1); color: white; }
.highlight-text { background-color: yellow; }
.highlight-background { background-color: var(--primary-100); }
.highlight-mark { background-color: yellow; padding: 0.1em 0.2em; }
.highlight-selection::selection { background-color: var(--primary); color: white; }

/* Visited states */
.visited:visited { color: var(--visited); }
.visited-primary:visited { color: var(--primary-700); }
.visited-secondary:visited { color: var(--secondary-700); }
.visited-muted:visited { color: var(--text-muted); }

/* TYPOGRAPHY */

/* Text sizes */
.text-size-xxs { font-size: var(--font-size-xxs); }
.text-size-xs { font-size: var(--font-size-xs); }
.text-size-s { font-size: var(--font-size-s); }
.text-size-m { font-size: var(--font-size-m); }
.text-size-l { font-size: var(--font-size-l); }
.text-size-xl { font-size: var(--font-size-xl); }
.text-size-xxl { font-size: var(--font-size-xxl); }
.text-size-xxxl { font-size: var(--font-size-xxxl); }
.text-size-4xl { font-size: var(--font-size-4xl); }
.text-size-5xl { font-size: var(--font-size-5xl); }
.text-size-6xl { font-size: var(--font-size-6xl); }

/* Fluid text sizes (responsive without media queries) */
.text-fluid-xs { font-size: var(--font-size-fluid-xs); }
.text-fluid-s { font-size: var(--font-size-fluid-s); }
.text-fluid-m { font-size: var(--font-size-fluid-m); }
.text-fluid-l { font-size: var(--font-size-fluid-l); }
.text-fluid-xl { font-size: var(--font-size-fluid-xl); }
.text-fluid-xxl { font-size: var(--font-size-fluid-xxl); }
.text-fluid-xxxl { font-size: var(--font-size-fluid-xxxl); }
.text-fluid-4xl { font-size: var(--font-size-fluid-4xl); }
.text-fluid-5xl { font-size: var(--font-size-fluid-5xl); }
.text-fluid-6xl { font-size: var(--font-size-fluid-6xl); }

/* Text types */
.text-type-h1 { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); }
.text-type-h2 { font-size: var(--font-size-xxxl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); }
.text-type-h3 { font-size: var(--font-size-xxl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }
.text-type-h4 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); }
.text-type-h5 { font-size: var(--font-size-l); font-weight: var(--font-weight-medium); line-height: var(--line-height-snug); }
.text-type-h6 { font-size: var(--font-size-m); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); }
.text-type-body { font-size: var(--font-size-m); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); }
.text-type-caption { font-size: var(--font-size-s); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--text-secondary); }
.text-type-overline { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); }
.text-type-subtitle1 { font-size: var(--font-size-m); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); }
.text-type-subtitle2 { font-size: var(--font-size-s); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); }

/* Fluid text types (responsive typography) */
.text-type-fluid-h1 { font-size: var(--font-size-fluid-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); }
.text-type-fluid-h2 { font-size: var(--font-size-fluid-xxxl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); }
.text-type-fluid-h3 { font-size: var(--font-size-fluid-xxl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }
.text-type-fluid-h4 { font-size: var(--font-size-fluid-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); }
.text-type-fluid-h5 { font-size: var(--font-size-fluid-l); font-weight: var(--font-weight-medium); line-height: var(--line-height-snug); }
.text-type-fluid-h6 { font-size: var(--font-size-fluid-m); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); }
.text-type-fluid-body { font-size: var(--font-size-fluid-m); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); }
.text-type-fluid-caption { font-size: var(--font-size-fluid-s); font-weight: var(--font-weight-normal); line-height: var(--line-height-normal); color: var(--text-secondary); }
.text-type-fluid-overline { font-size: var(--font-size-fluid-xs); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); }
.text-type-fluid-subtitle1 { font-size: var(--font-size-fluid-m); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); }
.text-type-fluid-subtitle2 { font-size: var(--font-size-fluid-s); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); }

/* Font weights */
.text-weight-thin { font-weight: var(--font-weight-thin); }
.text-weight-extralight { font-weight: var(--font-weight-extralight); }
.text-weight-light { font-weight: var(--font-weight-light); }
.text-weight-normal { font-weight: var(--font-weight-normal); }
.text-weight-medium { font-weight: var(--font-weight-medium); }
.text-weight-semibold { font-weight: var(--font-weight-semibold); }
.text-weight-bold { font-weight: var(--font-weight-bold); }
.text-weight-extrabold { font-weight: var(--font-weight-extrabold); }
.text-weight-black { font-weight: var(--font-weight-black); }

/* Text alignment */
.text-align-left { text-align: left; }
.text-align-center { text-align: center; }
.text-align-right { text-align: right; }
.text-align-justify { text-align: justify; }
.text-align-start { text-align: start; }
.text-align-end { text-align: end; }

/* Text transform */
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }
.text-normal-case { text-transform: none; }

/* Text decoration */
.text-underline { text-decoration: underline; }
.text-strikethrough { text-decoration: line-through; }
.text-overline { text-decoration: overline; }
.text-no-underline { text-decoration: none; }
.text-decoration-dotted { text-decoration-style: dotted; }
.text-decoration-dashed { text-decoration-style: dashed; }
.text-decoration-wavy { text-decoration-style: wavy; }

/* Text style */
.text-italic { font-style: italic; }
.text-oblique { font-style: oblique; }
.text-normal { font-style: normal; }

/* Line height */
.text-leading-none { line-height: var(--line-height-none); }
.text-leading-tight { line-height: var(--line-height-tight); }
.text-leading-snug { line-height: var(--line-height-snug); }
.text-leading-normal { line-height: var(--line-height-normal); }
.text-leading-relaxed { line-height: var(--line-height-relaxed); }
.text-leading-loose { line-height: var(--line-height-loose); }

/* Letter spacing */
.text-tracking-tighter { letter-spacing: var(--letter-spacing-tighter); }
.text-tracking-tight { letter-spacing: var(--letter-spacing-tight); }
.text-tracking-normal { letter-spacing: var(--letter-spacing-normal); }
.text-tracking-wide { letter-spacing: var(--letter-spacing-wide); }
.text-tracking-wider { letter-spacing: var(--letter-spacing-wider); }
.text-tracking-widest { letter-spacing: var(--letter-spacing-widest); }

/* Text overflow */
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.text-clip { text-overflow: clip; }
.text-break-words { word-break: break-word; }
.text-break-all { word-break: break-all; }
.text-nowrap { white-space: nowrap; }
.text-wrap { white-space: normal; }

/* Text colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-disabled { color: var(--text-disabled); }
.text-success { color: var(--text-success); }
.text-warning { color: var(--text-warning); }
.text-error { color: var(--text-error); }
.text-info { color: var(--text-info); }
.text-inverse { color: var(--text-inverse); }
.text-current { color: currentColor; }

/* Text direction */
.text-direction-ltr { direction: ltr; }
.text-direction-rtl { direction: rtl; }

/* SPACING */

/* Margin */
.margin-0 { margin: var(--space-0); }
.margin-1 { margin: var(--space-1); }
.margin-2 { margin: var(--space-2); }
.margin-3 { margin: var(--space-3); }
.margin-4 { margin: var(--space-4); }
.margin-5 { margin: var(--space-5); }
.margin-6 { margin: var(--space-6); }
.margin-8 { margin: var(--space-8); }
.margin-10 { margin: var(--space-10); }
.margin-12 { margin: var(--space-12); }
.margin-16 { margin: var(--space-16); }
.margin-20 { margin: var(--space-20); }
.margin-24 { margin: var(--space-24); }
.margin-auto { margin: auto; }

/* Margin directional */
.margin-x-0 { margin-left: var(--space-0); margin-right: var(--space-0); }
.margin-x-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.margin-x-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.margin-x-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.margin-x-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
.margin-x-5 { margin-left: var(--space-5); margin-right: var(--space-5); }
.margin-x-6 { margin-left: var(--space-6); margin-right: var(--space-6); }

.margin-y-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); }
.margin-y-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.margin-y-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.margin-y-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.margin-y-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.margin-y-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }
.margin-y-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }

.margin-top-0 { margin-top: var(--space-0); }
.margin-top-1 { margin-top: var(--space-1); }
.margin-top-2 { margin-top: var(--space-2); }
.margin-top-3 { margin-top: var(--space-3); }
.margin-top-4 { margin-top: var(--space-4); }
.margin-top-5 { margin-top: var(--space-5); }

.margin-right-0 { margin-right: var(--space-0); }
.margin-right-1 { margin-right: var(--space-1); }
.margin-right-2 { margin-right: var(--space-2); }
.margin-right-3 { margin-right: var(--space-3); }
.margin-right-4 { margin-right: var(--space-4); }
.margin-right-5 { margin-right: var(--space-5); }

.margin-bottom-0 { margin-bottom: var(--space-0); }
.margin-bottom-1 { margin-bottom: var(--space-1); }
.margin-bottom-2 { margin-bottom: var(--space-2); }
.margin-bottom-3 { margin-bottom: var(--space-3); }
.margin-bottom-4 { margin-bottom: var(--space-4); }
.margin-bottom-5 { margin-bottom: var(--space-5); }

.margin-left-0 { margin-left: var(--space-0); }
.margin-left-1 { margin-left: var(--space-1); }
.margin-left-2 { margin-left: var(--space-2); }
.margin-left-3 { margin-left: var(--space-3); }
.margin-left-4 { margin-left: var(--space-4); }
.margin-left-5 { margin-left: var(--space-5); }

/* Margin negative */
.margin-negative-1 { margin: calc(-1 * var(--space-1)); }
.margin-negative-2 { margin: calc(-1 * var(--space-2)); }
.margin-negative-3 { margin: calc(-1 * var(--space-3)); }
.margin-negative-4 { margin: calc(-1 * var(--space-4)); }

.margin-x-negative-1 { margin-left: calc(-1 * var(--space-1)); margin-right: calc(-1 * var(--space-1)); }
.margin-x-negative-2 { margin-left: calc(-1 * var(--space-2)); margin-right: calc(-1 * var(--space-2)); }
.margin-x-negative-3 { margin-left: calc(-1 * var(--space-3)); margin-right: calc(-1 * var(--space-3)); }
.margin-x-negative-4 { margin-left: calc(-1 * var(--space-4)); margin-right: calc(-1 * var(--space-4)); }

.margin-y-negative-1 { margin-top: calc(-1 * var(--space-1)); margin-bottom: calc(-1 * var(--space-1)); }
.margin-y-negative-2 { margin-top: calc(-1 * var(--space-2)); margin-bottom: calc(-1 * var(--space-2)); }
.margin-y-negative-3 { margin-top: calc(-1 * var(--space-3)); margin-bottom: calc(-1 * var(--space-3)); }
.margin-y-negative-4 { margin-top: calc(-1 * var(--space-4)); margin-bottom: calc(-1 * var(--space-4)); }

/* Fluid margin (responsive without media queries) */
.margin-fluid-xs { margin: var(--space-fluid-xs); }
.margin-fluid-s { margin: var(--space-fluid-s); }
.margin-fluid-m { margin: var(--space-fluid-m); }
.margin-fluid-l { margin: var(--space-fluid-l); }
.margin-fluid-xl { margin: var(--space-fluid-xl); }
.margin-fluid-xxl { margin: var(--space-fluid-xxl); }
.margin-fluid-xxxl { margin: var(--space-fluid-xxxl); }

.margin-x-fluid-xs { margin-left: var(--space-fluid-xs); margin-right: var(--space-fluid-xs); }
.margin-x-fluid-s { margin-left: var(--space-fluid-s); margin-right: var(--space-fluid-s); }
.margin-x-fluid-m { margin-left: var(--space-fluid-m); margin-right: var(--space-fluid-m); }
.margin-x-fluid-l { margin-left: var(--space-fluid-l); margin-right: var(--space-fluid-l); }
.margin-x-fluid-xl { margin-left: var(--space-fluid-xl); margin-right: var(--space-fluid-xl); }

.margin-y-fluid-xs { margin-top: var(--space-fluid-xs); margin-bottom: var(--space-fluid-xs); }
.margin-y-fluid-s { margin-top: var(--space-fluid-s); margin-bottom: var(--space-fluid-s); }
.margin-y-fluid-m { margin-top: var(--space-fluid-m); margin-bottom: var(--space-fluid-m); }
.margin-y-fluid-l { margin-top: var(--space-fluid-l); margin-bottom: var(--space-fluid-l); }
.margin-y-fluid-xl { margin-top: var(--space-fluid-xl); margin-bottom: var(--space-fluid-xl); }

.margin-top-fluid-xs { margin-top: var(--space-fluid-xs); }
.margin-top-fluid-s { margin-top: var(--space-fluid-s); }
.margin-top-fluid-m { margin-top: var(--space-fluid-m); }
.margin-top-fluid-l { margin-top: var(--space-fluid-l); }
.margin-top-fluid-xl { margin-top: var(--space-fluid-xl); }

.margin-bottom-fluid-xs { margin-bottom: var(--space-fluid-xs); }
.margin-bottom-fluid-s { margin-bottom: var(--space-fluid-s); }
.margin-bottom-fluid-m { margin-bottom: var(--space-fluid-m); }
.margin-bottom-fluid-l { margin-bottom: var(--space-fluid-l); }
.margin-bottom-fluid-xl { margin-bottom: var(--space-fluid-xl); }

/* Padding */
.padding-0 { padding: var(--space-0); }
.padding-1 { padding: var(--space-1); }
.padding-2 { padding: var(--space-2); }
.padding-3 { padding: var(--space-3); }
.padding-4 { padding: var(--space-4); }
.padding-5 { padding: var(--space-5); }
.padding-6 { padding: var(--space-6); }
.padding-8 { padding: var(--space-8); }
.padding-10 { padding: var(--space-10); }
.padding-12 { padding: var(--space-12); }
.padding-16 { padding: var(--space-16); }
.padding-20 { padding: var(--space-20); }
.padding-24 { padding: var(--space-24); }

/* Padding directional */
.padding-x-0 { padding-left: var(--space-0); padding-right: var(--space-0); }
.padding-x-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.padding-x-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.padding-x-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.padding-x-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.padding-x-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.padding-x-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.padding-y-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
.padding-y-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.padding-y-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.padding-y-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.padding-y-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.padding-y-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.padding-y-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

.padding-top-0 { padding-top: var(--space-0); }
.padding-top-1 { padding-top: var(--space-1); }
.padding-top-2 { padding-top: var(--space-2); }
.padding-top-3 { padding-top: var(--space-3); }
.padding-top-4 { padding-top: var(--space-4); }
.padding-top-5 { padding-top: var(--space-5); }

.padding-right-0 { padding-right: var(--space-0); }
.padding-right-1 { padding-right: var(--space-1); }
.padding-right-2 { padding-right: var(--space-2); }
.padding-right-3 { padding-right: var(--space-3); }
.padding-right-4 { padding-right: var(--space-4); }
.padding-right-5 { padding-right: var(--space-5); }

.padding-bottom-0 { padding-bottom: var(--space-0); }
.padding-bottom-1 { padding-bottom: var(--space-1); }
.padding-bottom-2 { padding-bottom: var(--space-2); }
.padding-bottom-3 { padding-bottom: var(--space-3); }
.padding-bottom-4 { padding-bottom: var(--space-4); }
.padding-bottom-5 { padding-bottom: var(--space-5); }

.padding-left-0 { padding-left: var(--space-0); }
.padding-left-1 { padding-left: var(--space-1); }
.padding-left-2 { padding-left: var(--space-2); }
.padding-left-3 { padding-left: var(--space-3); }
.padding-left-4 { padding-left: var(--space-4); }
.padding-left-5 { padding-left: var(--space-5); }

/* Fluid padding (responsive without media queries) */
.padding-fluid-xs { padding: var(--space-fluid-xs); }
.padding-fluid-s { padding: var(--space-fluid-s); }
.padding-fluid-m { padding: var(--space-fluid-m); }
.padding-fluid-l { padding: var(--space-fluid-l); }
.padding-fluid-xl { padding: var(--space-fluid-xl); }
.padding-fluid-xxl { padding: var(--space-fluid-xxl); }
.padding-fluid-xxxl { padding: var(--space-fluid-xxxl); }

.padding-x-fluid-xs { padding-left: var(--space-fluid-xs); padding-right: var(--space-fluid-xs); }
.padding-x-fluid-s { padding-left: var(--space-fluid-s); padding-right: var(--space-fluid-s); }
.padding-x-fluid-m { padding-left: var(--space-fluid-m); padding-right: var(--space-fluid-m); }
.padding-x-fluid-l { padding-left: var(--space-fluid-l); padding-right: var(--space-fluid-l); }
.padding-x-fluid-xl { padding-left: var(--space-fluid-xl); padding-right: var(--space-fluid-xl); }

.padding-y-fluid-xs { padding-top: var(--space-fluid-xs); padding-bottom: var(--space-fluid-xs); }
.padding-y-fluid-s { padding-top: var(--space-fluid-s); padding-bottom: var(--space-fluid-s); }
.padding-y-fluid-m { padding-top: var(--space-fluid-m); padding-bottom: var(--space-fluid-m); }
.padding-y-fluid-l { padding-top: var(--space-fluid-l); padding-bottom: var(--space-fluid-l); }
.padding-y-fluid-xl { padding-top: var(--space-fluid-xl); padding-bottom: var(--space-fluid-xl); }

.padding-top-fluid-xs { padding-top: var(--space-fluid-xs); }
.padding-top-fluid-s { padding-top: var(--space-fluid-s); }
.padding-top-fluid-m { padding-top: var(--space-fluid-m); }
.padding-top-fluid-l { padding-top: var(--space-fluid-l); }
.padding-top-fluid-xl { padding-top: var(--space-fluid-xl); }

.padding-bottom-fluid-xs { padding-bottom: var(--space-fluid-xs); }
.padding-bottom-fluid-s { padding-bottom: var(--space-fluid-s); }
.padding-bottom-fluid-m { padding-bottom: var(--space-fluid-m); }
.padding-bottom-fluid-l { padding-bottom: var(--space-fluid-l); }
.padding-bottom-fluid-xl { padding-bottom: var(--space-fluid-xl); }

/* Fluid gap */
.gap-fluid-xs { gap: var(--space-fluid-xs); }
.gap-fluid-s { gap: var(--space-fluid-s); }
.gap-fluid-m { gap: var(--space-fluid-m); }
.gap-fluid-l { gap: var(--space-fluid-l); }
.gap-fluid-xl { gap: var(--space-fluid-xl); }

.gap-x-fluid-xs { column-gap: var(--space-fluid-xs); }
.gap-x-fluid-s { column-gap: var(--space-fluid-s); }
.gap-x-fluid-m { column-gap: var(--space-fluid-m); }
.gap-x-fluid-l { column-gap: var(--space-fluid-l); }
.gap-x-fluid-xl { column-gap: var(--space-fluid-xl); }

.gap-y-fluid-xs { row-gap: var(--space-fluid-xs); }
.gap-y-fluid-s { row-gap: var(--space-fluid-s); }
.gap-y-fluid-m { row-gap: var(--space-fluid-m); }
.gap-y-fluid-l { row-gap: var(--space-fluid-l); }
.gap-y-fluid-xl { row-gap: var(--space-fluid-xl); }

/* Gap (for flexbox/grid) */
.gap-0 { gap: var(--space-0); }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }
.gap-16 { gap: var(--space-16); }
.gap-20 { gap: var(--space-20); }

.gap-x-0 { column-gap: var(--space-0); }
.gap-x-1 { column-gap: var(--space-1); }
.gap-x-2 { column-gap: var(--space-2); }
.gap-x-3 { column-gap: var(--space-3); }
.gap-x-4 { column-gap: var(--space-4); }
.gap-x-5 { column-gap: var(--space-5); }
.gap-x-6 { column-gap: var(--space-6); }
.gap-x-8 { column-gap: var(--space-8); }
.gap-x-10 { column-gap: var(--space-10); }

.gap-y-0 { row-gap: var(--space-0); }
.gap-y-1 { row-gap: var(--space-1); }
.gap-y-2 { row-gap: var(--space-2); }
.gap-y-3 { row-gap: var(--space-3); }
.gap-y-4 { row-gap: var(--space-4); }
.gap-y-5 { row-gap: var(--space-5); }
.gap-y-6 { row-gap: var(--space-6); }
.gap-y-8 { row-gap: var(--space-8); }
.gap-y-10 { row-gap: var(--space-10); }

/* LAYOUT */

/* Display */
.display-block { display: block; }
.display-inline { display: inline; }
.display-inline-block { display: inline-block; }
.display-flex { display: flex; }
.display-inline-flex { display: inline-flex; }
.display-grid { display: grid; }
.display-inline-grid { display: inline-grid; }
.display-table { display: table; }
.display-table-cell { display: table-cell; }
.display-table-row { display: table-row; }
.display-none { display: none; }
.display-contents { display: contents; }

/* Position */
.position-static { position: static; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }

/* Position coordinates */
.top-0 { top: var(--space-0); }
.top-1 { top: var(--space-1); }
.top-2 { top: var(--space-2); }
.top-3 { top: var(--space-3); }
.top-4 { top: var(--space-4); }
.top-5 { top: var(--space-5); }
.top-auto { top: auto; }

.right-0 { right: var(--space-0); }
.right-1 { right: var(--space-1); }
.right-2 { right: var(--space-2); }
.right-3 { right: var(--space-3); }
.right-4 { right: var(--space-4); }
.right-5 { right: var(--space-5); }
.right-auto { right: auto; }

.bottom-0 { bottom: var(--space-0); }
.bottom-1 { bottom: var(--space-1); }
.bottom-2 { bottom: var(--space-2); }
.bottom-3 { bottom: var(--space-3); }
.bottom-4 { bottom: var(--space-4); }
.bottom-5 { bottom: var(--space-5); }
.bottom-auto { bottom: auto; }

.left-0 { left: var(--space-0); }
.left-1 { left: var(--space-1); }
.left-2 { left: var(--space-2); }
.left-3 { left: var(--space-3); }
.left-4 { left: var(--space-4); }
.left-5 { left: var(--space-5); }
.left-auto { left: auto; }

/* Flexbox direction */
.flex-direction-row { flex-direction: row; }
.flex-direction-row-reverse { flex-direction: row-reverse; }
.flex-direction-column { flex-direction: column; }
.flex-direction-column-reverse { flex-direction: column-reverse; }

/* Flexbox wrap */
.flex-wrap { flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.flex-nowrap { flex-wrap: nowrap; }

/* Flexbox justify content */
.justify-content-start { justify-content: flex-start; }
.justify-content-end { justify-content: flex-end; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-around { justify-content: space-around; }
.justify-content-evenly { justify-content: space-evenly; }
.justify-content-stretch { justify-content: stretch; }

/* Flexbox align items */
.align-items-start { align-items: flex-start; }
.align-items-end { align-items: flex-end; }
.align-items-center { align-items: center; }
.align-items-baseline { align-items: baseline; }
.align-items-stretch { align-items: stretch; }

/* Flexbox align self */
.align-self-auto { align-self: auto; }
.align-self-start { align-self: flex-start; }
.align-self-end { align-self: flex-end; }
.align-self-center { align-self: center; }
.align-self-baseline { align-self: baseline; }
.align-self-stretch { align-self: stretch; }

/* Flexbox grow/shrink */
.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }

/* Grid columns */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.grid-cols-none { grid-template-columns: none; }

/* Grid rows */
.grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }
.grid-rows-none { grid-template-rows: none; }

/* Grid column span */
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-7 { grid-column: span 7 / span 7; }
.col-span-8 { grid-column: span 8 / span 8; }
.col-span-9 { grid-column: span 9 / span 9; }
.col-span-10 { grid-column: span 10 / span 10; }
.col-span-11 { grid-column: span 11 / span 11; }
.col-span-12 { grid-column: span 12 / span 12; }
.col-span-full { grid-column: 1 / -1; }

/* Grid row span */
.row-span-1 { grid-row: span 1 / span 1; }
.row-span-2 { grid-row: span 2 / span 2; }
.row-span-3 { grid-row: span 3 / span 3; }
.row-span-4 { grid-row: span 4 / span 4; }
.row-span-5 { grid-row: span 5 / span 5; }
.row-span-6 { grid-row: span 6 / span 6; }
.row-span-full { grid-row: 1 / -1; }

/* Grid placement */
.col-start-1 { grid-column-start: 1; }
.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }
.col-start-5 { grid-column-start: 5; }
.col-start-6 { grid-column-start: 6; }

.col-end-1 { grid-column-end: 1; }
.col-end-2 { grid-column-end: 2; }
.col-end-3 { grid-column-end: 3; }
.col-end-4 { grid-column-end: 4; }
.col-end-5 { grid-column-end: 5; }
.col-end-6 { grid-column-end: 6; }

.row-start-1 { grid-row-start: 1; }
.row-start-2 { grid-row-start: 2; }
.row-start-3 { grid-row-start: 3; }
.row-start-4 { grid-row-start: 4; }
.row-start-5 { grid-row-start: 5; }
.row-start-6 { grid-row-start: 6; }

.row-end-1 { grid-row-end: 1; }
.row-end-2 { grid-row-end: 2; }
.row-end-3 { grid-row-end: 3; }
.row-end-4 { grid-row-end: 4; }
.row-end-5 { grid-row-end: 5; }
.row-end-6 { grid-row-end: 6; }

/* SIZING */

/* Width */
.width-auto { width: auto; }
.width-full { width: 100%; }
.width-screen { width: 100vw; }
.width-min { width: min-content; }
.width-max { width: max-content; }
.width-fit { width: fit-content; }
.width-25 { width: 25%; }
.width-50 { width: 50%; }
.width-75 { width: 75%; }
.width-1 { width: var(--space-1); }
.width-2 { width: var(--space-2); }
.width-3 { width: var(--space-3); }
.width-4 { width: var(--space-4); }
.width-5 { width: var(--space-5); }
.width-6 { width: var(--space-6); }
.width-8 { width: var(--space-8); }
.width-10 { width: var(--space-10); }
.width-12 { width: var(--space-12); }

/* Height */
.height-auto { height: auto; }
.height-full { height: 100%; }
.height-screen { height: 100vh; }
.height-min { height: min-content; }
.height-max { height: max-content; }
.height-fit { height: fit-content; }
.height-25 { height: 25%; }
.height-50 { height: 50%; }
.height-75 { height: 75%; }
.height-1 { height: var(--space-1); }
.height-2 { height: var(--space-2); }
.height-3 { height: var(--space-3); }
.height-4 { height: var(--space-4); }
.height-5 { height: var(--space-5); }
.height-6 { height: var(--space-6); }
.height-8 { height: var(--space-8); }
.height-10 { height: var(--space-10); }
.height-12 { height: var(--space-12); }

/* Fluid sizing (responsive without media queries) */
.width-fluid-xs { width: var(--container-fluid-xs); }
.width-fluid-s { width: var(--container-fluid-s); }
.width-fluid-m { width: var(--container-fluid-m); }
.width-fluid-l { width: var(--container-fluid-l); }
.width-fluid-xl { width: var(--container-fluid-xl); }
.width-fluid-xxl { width: var(--container-fluid-xxl); }
.width-fluid-full { width: var(--container-fluid-full); }

.max-width-fluid-xs { max-width: var(--container-fluid-xs); }
.max-width-fluid-s { max-width: var(--container-fluid-s); }
.max-width-fluid-m { max-width: var(--container-fluid-m); }
.max-width-fluid-l { max-width: var(--container-fluid-l); }
.max-width-fluid-xl { max-width: var(--container-fluid-xl); }
.max-width-fluid-xxl { max-width: var(--container-fluid-xxl); }
.max-width-fluid-full { max-width: var(--container-fluid-full); }

/* Fluid container classes */
.container-fluid {
    width: 100%;
    max-width: var(--container-fluid-full);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-fluid-m);
    padding-right: var(--space-fluid-m);
}

.container-fluid-xs {
    width: 100%;
    max-width: var(--container-fluid-xs);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-fluid-s);
    padding-right: var(--space-fluid-s);
}

.container-fluid-s {
    width: 100%;
    max-width: var(--container-fluid-s);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-fluid-s);
    padding-right: var(--space-fluid-s);
}

.container-fluid-m {
    width: 100%;
    max-width: var(--container-fluid-m);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-fluid-m);
    padding-right: var(--space-fluid-m);
}

.container-fluid-l {
    width: 100%;
    max-width: var(--container-fluid-l);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-fluid-m);
    padding-right: var(--space-fluid-m);
}

.container-fluid-xl {
    width: 100%;
    max-width: var(--container-fluid-xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-fluid-l);
    padding-right: var(--space-fluid-l);
}

.container-fluid-xxl {
    width: 100%;
    max-width: var(--container-fluid-xxl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-fluid-l);
    padding-right: var(--space-fluid-l);
}

/* Min/Max width */
.min-width-0 { min-width: 0; }
.min-width-full { min-width: 100%; }
.min-width-min { min-width: min-content; }
.min-width-max { min-width: max-content; }
.min-width-fit { min-width: fit-content; }
.max-width-none { max-width: none; }
.max-width-xs { max-width: 320px; }
.max-width-sm { max-width: 384px; }
.max-width-md { max-width: 448px; }
.max-width-lg { max-width: 512px; }
.max-width-xl { max-width: 576px; }
.max-width-2xl { max-width: 672px; }
.max-width-full { max-width: 100%; }

/* Min/Max height */
.min-height-0 { min-height: 0; }
.min-height-full { min-height: 100%; }
.min-height-screen { min-height: 100vh; }
.max-height-full { max-height: 100%; }
.max-height-screen { max-height: 100vh; }

/* BACKGROUNDS */

/* Background colors */
.bg-transparent { background-color: transparent; }
.bg-current { background-color: currentColor; }
.bg-primary { background-color: var(--primary); }
.bg-primary-light { background-color: var(--primary-light); }
.bg-primary-dark { background-color: var(--primary-dark); }
.bg-secondary { background-color: var(--secondary); }
.bg-secondary-light { background-color: var(--secondary-light); }
.bg-secondary-dark { background-color: var(--secondary-dark); }
.bg-accent1 { background-color: var(--accent1); }
.bg-accent2 { background-color: var(--accent2); }
.bg-accent3 { background-color: var(--accent3); }
.bg-success { background-color: var(--success); }
.bg-warning { background-color: var(--warning); }
.bg-error { background-color: var(--error); }
.bg-info { background-color: var(--info); }
.bg-muted { background-color: var(--text-muted); }
.bg-white { background-color: #ffffff; }
.bg-black { background-color: #000000; }

/* Background size */
.bg-size-auto { background-size: auto; }
.bg-size-cover { background-size: cover; }
.bg-size-contain { background-size: contain; }
.bg-size-50 { background-size: 50%; }
.bg-size-100 { background-size: 100%; }

/* Background position */
.bg-position-center { background-position: center; }
.bg-position-top { background-position: top; }
.bg-position-top-left { background-position: top left; }
.bg-position-top-right { background-position: top right; }
.bg-position-bottom { background-position: bottom; }
.bg-position-bottom-left { background-position: bottom left; }
.bg-position-bottom-right { background-position: bottom right; }
.bg-position-left { background-position: left; }
.bg-position-right { background-position: right; }

/* Background repeat */
.bg-repeat { background-repeat: repeat; }
.bg-no-repeat { background-repeat: no-repeat; }
.bg-repeat-x { background-repeat: repeat-x; }
.bg-repeat-y { background-repeat: repeat-y; }
.bg-repeat-round { background-repeat: round; }
.bg-repeat-space { background-repeat: space; }

/* Background attachment */
.bg-fixed { background-attachment: fixed; }
.bg-local { background-attachment: local; }
.bg-scroll { background-attachment: scroll; }

/* Background clip */
.bg-clip-border { background-clip: border-box; }
.bg-clip-padding { background-clip: padding-box; }
.bg-clip-content { background-clip: content-box; }
.bg-clip-text { background-clip: text; -webkit-background-clip: text; }

/* Background origin */
.bg-origin-border { background-origin: border-box; }
.bg-origin-padding { background-origin: padding-box; }
.bg-origin-content { background-origin: content-box; }

/* SHADOWS */

/* Box shadows */
.shadow-none { box-shadow: none; }
.shadow-xs { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.shadow-sm { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); }
.shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); }
.shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); }
.shadow-xl { box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04); }
.shadow-2xl { box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25); }
.shadow-3xl { box-shadow: 0 35px 60px rgba(0, 0, 0, 0.3); }
.shadow-inner { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06); }

/* Colored shadows */
.shadow-primary { box-shadow: 0 10px 15px rgba(59, 130, 246, 0.4), 0 4px 6px rgba(59, 130, 246, 0.1); }
.shadow-primary-light { box-shadow: 0 10px 15px rgba(96, 165, 250, 0.4), 0 4px 6px rgba(96, 165, 250, 0.1); }
.shadow-primary-dark { box-shadow: 0 10px 15px rgba(29, 78, 216, 0.4), 0 4px 6px rgba(29, 78, 216, 0.1); }
.shadow-secondary { box-shadow: 0 10px 15px rgba(107, 114, 128, 0.4), 0 4px 6px rgba(107, 114, 128, 0.1); }
.shadow-accent1 { box-shadow: 0 10px 15px rgba(16, 185, 129, 0.4), 0 4px 6px rgba(16, 185, 129, 0.1); }
.shadow-accent2 { box-shadow: 0 10px 15px rgba(245, 158, 11, 0.4), 0 4px 6px rgba(245, 158, 11, 0.1); }
.shadow-accent3 { box-shadow: 0 10px 15px rgba(239, 68, 68, 0.4), 0 4px 6px rgba(239, 68, 68, 0.1); }
.shadow-success { box-shadow: 0 10px 15px rgba(16, 185, 129, 0.4), 0 4px 6px rgba(16, 185, 129, 0.1); }
.shadow-warning { box-shadow: 0 10px 15px rgba(245, 158, 11, 0.4), 0 4px 6px rgba(245, 158, 11, 0.1); }
.shadow-error { box-shadow: 0 10px 15px rgba(239, 68, 68, 0.4), 0 4px 6px rgba(239, 68, 68, 0.1); }
.shadow-info { box-shadow: 0 10px 15px rgba(59, 130, 246, 0.4), 0 4px 6px rgba(59, 130, 246, 0.1); }

/* Text shadows */
.text-shadow-none { text-shadow: none; }
.text-shadow-sm { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.text-shadow-md { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.text-shadow-lg { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.text-shadow-xl { text-shadow: 0 4px 8px rgba(0, 0, 0, 0.12); }
.text-shadow-primary { text-shadow: 0 2px 4px rgba(59, 130, 246, 0.5); }
.text-shadow-secondary { text-shadow: 0 2px 4px rgba(107, 114, 128, 0.5); }
.text-shadow-dark { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); }
.text-shadow-light { text-shadow: 0 2px 4px rgba(255, 255, 255, 0.8); }

/* Drop shadows */
.drop-shadow-none { filter: drop-shadow(0 0 transparent); }
.drop-shadow-sm { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); }
.drop-shadow-md { filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)); }
.drop-shadow-lg { filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)); }
.drop-shadow-xl { filter: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)); }
.drop-shadow-2xl { filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15)); }

/* RESPONSIVE */

/* Show/hide at breakpoints */
.hidden { display: none; }
.visible { display: block; }

@media (max-width: 639px) {
    .xs-hidden { display: none !important; }
    .xs-visible { display: block !important; }
}

@media (min-width: 640px) {
    .sm-hidden { display: none !important; }
    .sm-visible { display: block !important; }
}

@media (min-width: 768px) {
    .md-hidden { display: none !important; }
    .md-visible { display: block !important; }
}

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

@media (min-width: 1280px) {
    .xl-hidden { display: none !important; }
    .xl-visible { display: block !important; }
}

@media (min-width: 1536px) {
    .xxl-hidden { display: none !important; }
    .xxl-visible { display: block !important; }
}

/* UTILITIES */

/* Loading states */
.loading { opacity: 0.7; pointer-events: none; }
.loading-spinner::after {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--primary);
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-dots::after {
    content: '...';
    animation: dots 1.5s infinite;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

.loading-pulse { animation: pulse 1.5s ease-in-out infinite; }
.loading-bars::after {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: repeating-linear-gradient(90deg, var(--primary) 0, var(--primary) 25%, transparent 25%, transparent 50%);
    animation: bars 1s linear infinite;
}

@keyframes bars {
    0% { background-position: 0 0; }
    100% { background-position: 1rem 0; }
}

.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
    background-size: 400% 100%;
    animation: skeleton 1.5s ease-in-out infinite;
}

@keyframes skeleton {
    0% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.loading-wave::after {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
    animation: wave 1.5s ease-in-out infinite;
}

@keyframes wave {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
}

/* Validation states */
.valid { border-color: var(--success); }
.invalid { border-color: var(--error); }
.required::after { content: '*'; color: var(--error); }
.optional { opacity: 0.8; }
.pristine { }
.dirty { }
.pending { opacity: 0.7; }

/* Data states */
.empty { opacity: 0.5; }
.filled { }
.expanded { }
.collapsed { }
.open { }
.closed { }
.locked { opacity: 0.6; pointer-events: none; }
.unlocked { }

/* Overflow */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-clip { overflow: clip; }
.overflow-x-auto { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-x-visible { overflow-x: visible; }
.overflow-x-scroll { overflow-x: scroll; }
.overflow-x-clip { overflow-x: clip; }
.overflow-y-auto { overflow-y: auto; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-y-visible { overflow-y: visible; }
.overflow-y-scroll { overflow-y: scroll; }
.overflow-y-clip { overflow-y: clip; }

/* Z-index */
.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; }
.z-negative-1 { z-index: -1; }
.z-negative-10 { z-index: -10; }

/* Opacity */
.opacity-0 { opacity: 0; }
.opacity-5 { opacity: 0.05; }
.opacity-10 { opacity: 0.1; }
.opacity-20 { opacity: 0.2; }
.opacity-25 { opacity: 0.25; }
.opacity-30 { opacity: 0.3; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-75 { opacity: 0.75; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.opacity-95 { opacity: 0.95; }
.opacity-100 { opacity: 1; }

/* Cursor */
.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; }
.cursor-none { cursor: none; }
.cursor-context-menu { cursor: context-menu; }
.cursor-progress { cursor: progress; }
.cursor-cell { cursor: cell; }
.cursor-crosshair { cursor: crosshair; }
.cursor-vertical-text { cursor: vertical-text; }
.cursor-alias { cursor: alias; }
.cursor-copy { cursor: copy; }
.cursor-no-drop { cursor: no-drop; }
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }
.cursor-all-scroll { cursor: all-scroll; }
.cursor-col-resize { cursor: col-resize; }
.cursor-row-resize { cursor: row-resize; }
.cursor-n-resize { cursor: n-resize; }
.cursor-e-resize { cursor: e-resize; }
.cursor-s-resize { cursor: s-resize; }
.cursor-w-resize { cursor: w-resize; }
.cursor-ne-resize { cursor: ne-resize; }
.cursor-nw-resize { cursor: nw-resize; }
.cursor-se-resize { cursor: se-resize; }
.cursor-sw-resize { cursor: sw-resize; }
.cursor-ew-resize { cursor: ew-resize; }
.cursor-ns-resize { cursor: ns-resize; }
.cursor-nesw-resize { cursor: nesw-resize; }
.cursor-nwse-resize { cursor: nwse-resize; }
.cursor-zoom-in { cursor: zoom-in; }
.cursor-zoom-out { cursor: zoom-out; }

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

/* Pointer events */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.pointer-events-visible-painted { pointer-events: visiblePainted; }
.pointer-events-visible-fill { pointer-events: visibleFill; }
.pointer-events-visible-stroke { pointer-events: visibleStroke; }
.pointer-events-visible { pointer-events: visible; }
.pointer-events-painted { pointer-events: painted; }
.pointer-events-fill { pointer-events: fill; }
.pointer-events-stroke { pointer-events: stroke; }
.pointer-events-all { pointer-events: all; }

/* Visibility */
.visible { visibility: visible; }
.invisible { visibility: hidden; }
.collapse { visibility: collapse; }

/* Screen reader */
.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;
}
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Object fit */
.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.object-fill { object-fit: fill; }
.object-none { object-fit: none; }
.object-scale-down { object-fit: scale-down; }

/* Object position */
.object-position-bottom { object-position: bottom; }
.object-position-center { object-position: center; }
.object-position-left { object-position: left; }
.object-position-left-bottom { object-position: left bottom; }
.object-position-left-top { object-position: left top; }
.object-position-right { object-position: right; }
.object-position-right-bottom { object-position: right bottom; }
.object-position-right-top { object-position: right top; }
.object-position-top { object-position: top; }

/* Float */
.float-left { float: left; }
.float-right { float: right; }
.float-none { float: none; }
.clear-left { clear: left; }
.clear-right { clear: right; }
.clear-both { clear: both; }
.clear-none { clear: none; }

/* Filter */
.filter-none { filter: none; }
.filter-blur { filter: blur(4px); }
.filter-brightness { filter: brightness(1.25); }
.filter-contrast { filter: contrast(1.25); }
.filter-drop-shadow { filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)); }
.filter-grayscale { filter: grayscale(1); }
.filter-hue-rotate { filter: hue-rotate(90deg); }
.filter-invert { filter: invert(1); }
.filter-saturate { filter: saturate(2); }
.filter-sepia { filter: sepia(1); }

/* Backdrop filter */
.backdrop-filter-none { backdrop-filter: none; }
.backdrop-filter-blur { backdrop-filter: blur(4px); }
.backdrop-filter-brightness { backdrop-filter: brightness(1.25); }
.backdrop-filter-contrast { backdrop-filter: contrast(1.25); }
.backdrop-filter-grayscale { backdrop-filter: grayscale(1); }
.backdrop-filter-hue-rotate { backdrop-filter: hue-rotate(90deg); }
.backdrop-filter-invert { backdrop-filter: invert(1); }
.backdrop-filter-opacity { backdrop-filter: opacity(0.5); }
.backdrop-filter-saturate { backdrop-filter: saturate(2); }
.backdrop-filter-sepia { backdrop-filter: sepia(1); }

/* Transform */
.transform-none { transform: none; }
.transform-gpu { transform: translate3d(0, 0, 0); }

/* Transform rotate */
.transform-rotate-0 { transform: rotate(0deg); }
.transform-rotate-1 { transform: rotate(1deg); }
.transform-rotate-2 { transform: rotate(2deg); }
.transform-rotate-3 { transform: rotate(3deg); }
.transform-rotate-6 { transform: rotate(6deg); }
.transform-rotate-12 { transform: rotate(12deg); }
.transform-rotate-45 { transform: rotate(45deg); }
.transform-rotate-90 { transform: rotate(90deg); }
.transform-rotate-180 { transform: rotate(180deg); }

/* Transform scale */
.transform-scale-0 { transform: scale(0); }
.transform-scale-50 { transform: scale(0.5); }
.transform-scale-75 { transform: scale(0.75); }
.transform-scale-90 { transform: scale(0.9); }
.transform-scale-95 { transform: scale(0.95); }
.transform-scale-100 { transform: scale(1); }
.transform-scale-105 { transform: scale(1.05); }
.transform-scale-110 { transform: scale(1.1); }
.transform-scale-125 { transform: scale(1.25); }
.transform-scale-150 { transform: scale(1.5); }

/* Transform skew */
.transform-skew-0 { transform: skew(0deg); }
.transform-skew-1 { transform: skew(1deg); }
.transform-skew-2 { transform: skew(2deg); }
.transform-skew-3 { transform: skew(3deg); }
.transform-skew-6 { transform: skew(6deg); }
.transform-skew-12 { transform: skew(12deg); }

/* Transform translate */
.transform-translate-x-0 { transform: translateX(0); }
.transform-translate-x-1 { transform: translateX(var(--space-1)); }
.transform-translate-x-2 { transform: translateX(var(--space-2)); }
.transform-translate-x-3 { transform: translateX(var(--space-3)); }
.transform-translate-x-4 { transform: translateX(var(--space-4)); }

.transform-translate-y-0 { transform: translateY(0); }
.transform-translate-y-1 { transform: translateY(var(--space-1)); }
.transform-translate-y-2 { transform: translateY(var(--space-2)); }
.transform-translate-y-3 { transform: translateY(var(--space-3)); }
.transform-translate-y-4 { transform: translateY(var(--space-4)); }

/* TRANSITIONS */
.transition-none { transition: none; }
.transition-all { transition: all var(--duration-normal) var(--ease-out); }
.transition-colors { transition: color var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out); }
.transition-opacity { transition: opacity var(--duration-normal) var(--ease-out); }
.transition-shadow { transition: box-shadow var(--duration-normal) var(--ease-out); }
.transition-transform { transition: transform var(--duration-normal) var(--ease-out); }

/* Transition duration */
.transition-duration-75 { transition-duration: 75ms; }
.transition-duration-100 { transition-duration: 100ms; }
.transition-duration-150 { transition-duration: 150ms; }
.transition-duration-200 { transition-duration: 200ms; }
.transition-duration-300 { transition-duration: 300ms; }
.transition-duration-500 { transition-duration: 500ms; }
.transition-duration-700 { transition-duration: 700ms; }
.transition-duration-1000 { transition-duration: 1000ms; }

/* Transition easing */
.transition-ease-linear { transition-timing-function: var(--ease-linear); }
.transition-ease-in { transition-timing-function: var(--ease-in); }
.transition-ease-out { transition-timing-function: var(--ease-out); }
.transition-ease-in-out { transition-timing-function: var(--ease-in-out); }

/* RESPONSIVE UTILITIES */

/* Responsive text sizes */
@media (max-width: 639px) {
    .xs-text-size-xxs { font-size: var(--font-size-xxs); }
    .xs-text-size-xs { font-size: var(--font-size-xs); }
    .xs-text-size-s { font-size: var(--font-size-s); }
    .xs-text-size-m { font-size: var(--font-size-m); }
    .xs-text-size-l { font-size: var(--font-size-l); }
    .xs-text-size-xl { font-size: var(--font-size-xl); }
    .xs-text-size-xxl { font-size: var(--font-size-xxl); }
    .xs-text-size-xxxl { font-size: var(--font-size-xxxl); }
    .xs-text-size-4xl { font-size: var(--font-size-4xl); }
    .xs-text-size-5xl { font-size: var(--font-size-5xl); }
    .xs-text-size-6xl { font-size: var(--font-size-6xl); }
}

@media (min-width: 640px) {
    .sm-text-size-xxs { font-size: var(--font-size-xxs); }
    .sm-text-size-xs { font-size: var(--font-size-xs); }
    .sm-text-size-s { font-size: var(--font-size-s); }
    .sm-text-size-m { font-size: var(--font-size-m); }
    .sm-text-size-l { font-size: var(--font-size-l); }
    .sm-text-size-xl { font-size: var(--font-size-xl); }
    .sm-text-size-xxl { font-size: var(--font-size-xxl); }
    .sm-text-size-xxxl { font-size: var(--font-size-xxxl); }
    .sm-text-size-4xl { font-size: var(--font-size-4xl); }
    .sm-text-size-5xl { font-size: var(--font-size-5xl); }
    .sm-text-size-6xl { font-size: var(--font-size-6xl); }
}

@media (min-width: 768px) {
    .md-text-size-xxs { font-size: var(--font-size-xxs); }
    .md-text-size-xs { font-size: var(--font-size-xs); }
    .md-text-size-s { font-size: var(--font-size-s); }
    .md-text-size-m { font-size: var(--font-size-m); }
    .md-text-size-l { font-size: var(--font-size-l); }
    .md-text-size-xl { font-size: var(--font-size-xl); }
    .md-text-size-xxl { font-size: var(--font-size-xxl); }
    .md-text-size-xxxl { font-size: var(--font-size-xxxl); }
    .md-text-size-4xl { font-size: var(--font-size-4xl); }
    .md-text-size-5xl { font-size: var(--font-size-5xl); }
    .md-text-size-6xl { font-size: var(--font-size-6xl); }
}

@media (min-width: 1024px) {
    .lg-text-size-xxs { font-size: var(--font-size-xxs); }
    .lg-text-size-xs { font-size: var(--font-size-xs); }
    .lg-text-size-s { font-size: var(--font-size-s); }
    .lg-text-size-m { font-size: var(--font-size-m); }
    .lg-text-size-l { font-size: var(--font-size-l); }
    .lg-text-size-xl { font-size: var(--font-size-xl); }
    .lg-text-size-xxl { font-size: var(--font-size-xxl); }
    .lg-text-size-xxxl { font-size: var(--font-size-xxxl); }
    .lg-text-size-4xl { font-size: var(--font-size-4xl); }
    .lg-text-size-5xl { font-size: var(--font-size-5xl); }
    .lg-text-size-6xl { font-size: var(--font-size-6xl); }
}

@media (min-width: 1280px) {
    .xl-text-size-xxs { font-size: var(--font-size-xxs); }
    .xl-text-size-xs { font-size: var(--font-size-xs); }
    .xl-text-size-s { font-size: var(--font-size-s); }
    .xl-text-size-m { font-size: var(--font-size-m); }
    .xl-text-size-l { font-size: var(--font-size-l); }
    .xl-text-size-xl { font-size: var(--font-size-xl); }
    .xl-text-size-xxl { font-size: var(--font-size-xxl); }
    .xl-text-size-xxxl { font-size: var(--font-size-xxxl); }
    .xl-text-size-4xl { font-size: var(--font-size-4xl); }
    .xl-text-size-5xl { font-size: var(--font-size-5xl); }
    .xl-text-size-6xl { font-size: var(--font-size-6xl); }
}

/* Responsive text alignment */
@media (max-width: 639px) {
    .xs-text-align-left { text-align: left; }
    .xs-text-align-center { text-align: center; }
    .xs-text-align-right { text-align: right; }
    .xs-text-align-justify { text-align: justify; }
}

@media (min-width: 640px) {
    .sm-text-align-left { text-align: left; }
    .sm-text-align-center { text-align: center; }
    .sm-text-align-right { text-align: right; }
    .sm-text-align-justify { text-align: justify; }
}

@media (min-width: 768px) {
    .md-text-align-left { text-align: left; }
    .md-text-align-center { text-align: center; }
    .md-text-align-right { text-align: right; }
    .md-text-align-justify { text-align: justify; }
}

@media (min-width: 1024px) {
    .lg-text-align-left { text-align: left; }
    .lg-text-align-center { text-align: center; }
    .lg-text-align-right { text-align: right; }
    .lg-text-align-justify { text-align: justify; }
}

@media (min-width: 1280px) {
    .xl-text-align-left { text-align: left; }
    .xl-text-align-center { text-align: center; }
    .xl-text-align-right { text-align: right; }
    .xl-text-align-justify { text-align: justify; }
}

/* Responsive spacing - Margin */
@media (max-width: 639px) {
    .xs-margin-0 { margin: var(--space-0); }
    .xs-margin-1 { margin: var(--space-1); }
    .xs-margin-2 { margin: var(--space-2); }
    .xs-margin-3 { margin: var(--space-3); }
    .xs-margin-4 { margin: var(--space-4); }
    .xs-margin-5 { margin: var(--space-5); }
    .xs-margin-6 { margin: var(--space-6); }
    .xs-margin-8 { margin: var(--space-8); }
    .xs-margin-10 { margin: var(--space-10); }
    .xs-margin-12 { margin: var(--space-12); }
    .xs-margin-16 { margin: var(--space-16); }
    .xs-margin-20 { margin: var(--space-20); }
    .xs-margin-24 { margin: var(--space-24); }
    .xs-margin-auto { margin: auto; }
}

@media (min-width: 640px) {
    .sm-margin-0 { margin: var(--space-0); }
    .sm-margin-1 { margin: var(--space-1); }
    .sm-margin-2 { margin: var(--space-2); }
    .sm-margin-3 { margin: var(--space-3); }
    .sm-margin-4 { margin: var(--space-4); }
    .sm-margin-5 { margin: var(--space-5); }
    .sm-margin-6 { margin: var(--space-6); }
    .sm-margin-8 { margin: var(--space-8); }
    .sm-margin-10 { margin: var(--space-10); }
    .sm-margin-12 { margin: var(--space-12); }
    .sm-margin-16 { margin: var(--space-16); }
    .sm-margin-20 { margin: var(--space-20); }
    .sm-margin-24 { margin: var(--space-24); }
    .sm-margin-auto { margin: auto; }
}

@media (min-width: 768px) {
    .md-margin-0 { margin: var(--space-0); }
    .md-margin-1 { margin: var(--space-1); }
    .md-margin-2 { margin: var(--space-2); }
    .md-margin-3 { margin: var(--space-3); }
    .md-margin-4 { margin: var(--space-4); }
    .md-margin-5 { margin: var(--space-5); }
    .md-margin-6 { margin: var(--space-6); }
    .md-margin-8 { margin: var(--space-8); }
    .md-margin-10 { margin: var(--space-10); }
    .md-margin-12 { margin: var(--space-12); }
    .md-margin-16 { margin: var(--space-16); }
    .md-margin-20 { margin: var(--space-20); }
    .md-margin-24 { margin: var(--space-24); }
    .md-margin-auto { margin: auto; }
}

@media (min-width: 1024px) {
    .lg-margin-0 { margin: var(--space-0); }
    .lg-margin-1 { margin: var(--space-1); }
    .lg-margin-2 { margin: var(--space-2); }
    .lg-margin-3 { margin: var(--space-3); }
    .lg-margin-4 { margin: var(--space-4); }
    .lg-margin-5 { margin: var(--space-5); }
    .lg-margin-6 { margin: var(--space-6); }
    .lg-margin-8 { margin: var(--space-8); }
    .lg-margin-10 { margin: var(--space-10); }
    .lg-margin-12 { margin: var(--space-12); }
    .lg-margin-16 { margin: var(--space-16); }
    .lg-margin-20 { margin: var(--space-20); }
    .lg-margin-24 { margin: var(--space-24); }
    .lg-margin-auto { margin: auto; }
}

@media (min-width: 1280px) {
    .xl-margin-0 { margin: var(--space-0); }
    .xl-margin-1 { margin: var(--space-1); }
    .xl-margin-2 { margin: var(--space-2); }
    .xl-margin-3 { margin: var(--space-3); }
    .xl-margin-4 { margin: var(--space-4); }
    .xl-margin-5 { margin: var(--space-5); }
    .xl-margin-6 { margin: var(--space-6); }
    .xl-margin-8 { margin: var(--space-8); }
    .xl-margin-10 { margin: var(--space-10); }
    .xl-margin-12 { margin: var(--space-12); }
    .xl-margin-16 { margin: var(--space-16); }
    .xl-margin-20 { margin: var(--space-20); }
    .xl-margin-24 { margin: var(--space-24); }
    .xl-margin-auto { margin: auto; }
}

/* Responsive spacing - Padding */
@media (max-width: 639px) {
    .xs-padding-0 { padding: var(--space-0); }
    .xs-padding-1 { padding: var(--space-1); }
    .xs-padding-2 { padding: var(--space-2); }
    .xs-padding-3 { padding: var(--space-3); }
    .xs-padding-4 { padding: var(--space-4); }
    .xs-padding-5 { padding: var(--space-5); }
    .xs-padding-6 { padding: var(--space-6); }
    .xs-padding-8 { padding: var(--space-8); }
    .xs-padding-10 { padding: var(--space-10); }
    .xs-padding-12 { padding: var(--space-12); }
    .xs-padding-16 { padding: var(--space-16); }
    .xs-padding-20 { padding: var(--space-20); }
    .xs-padding-24 { padding: var(--space-24); }
}

@media (min-width: 640px) {
    .sm-padding-0 { padding: var(--space-0); }
    .sm-padding-1 { padding: var(--space-1); }
    .sm-padding-2 { padding: var(--space-2); }
    .sm-padding-3 { padding: var(--space-3); }
    .sm-padding-4 { padding: var(--space-4); }
    .sm-padding-5 { padding: var(--space-5); }
    .sm-padding-6 { padding: var(--space-6); }
    .sm-padding-8 { padding: var(--space-8); }
    .sm-padding-10 { padding: var(--space-10); }
    .sm-padding-12 { padding: var(--space-12); }
    .sm-padding-16 { padding: var(--space-16); }
    .sm-padding-20 { padding: var(--space-20); }
    .sm-padding-24 { padding: var(--space-24); }
}

@media (min-width: 768px) {
    .md-padding-0 { padding: var(--space-0); }
    .md-padding-1 { padding: var(--space-1); }
    .md-padding-2 { padding: var(--space-2); }
    .md-padding-3 { padding: var(--space-3); }
    .md-padding-4 { padding: var(--space-4); }
    .md-padding-5 { padding: var(--space-5); }
    .md-padding-6 { padding: var(--space-6); }
    .md-padding-8 { padding: var(--space-8); }
    .md-padding-10 { padding: var(--space-10); }
    .md-padding-12 { padding: var(--space-12); }
    .md-padding-16 { padding: var(--space-16); }
    .md-padding-20 { padding: var(--space-20); }
    .md-padding-24 { padding: var(--space-24); }
}

@media (min-width: 1024px) {
    .lg-padding-0 { padding: var(--space-0); }
    .lg-padding-1 { padding: var(--space-1); }
    .lg-padding-2 { padding: var(--space-2); }
    .lg-padding-3 { padding: var(--space-3); }
    .lg-padding-4 { padding: var(--space-4); }
    .lg-padding-5 { padding: var(--space-5); }
    .lg-padding-6 { padding: var(--space-6); }
    .lg-padding-8 { padding: var(--space-8); }
    .lg-padding-10 { padding: var(--space-10); }
    .lg-padding-12 { padding: var(--space-12); }
    .lg-padding-16 { padding: var(--space-16); }
    .lg-padding-20 { padding: var(--space-20); }
    .lg-padding-24 { padding: var(--space-24); }
}

@media (min-width: 1280px) {
    .xl-padding-0 { padding: var(--space-0); }
    .xl-padding-1 { padding: var(--space-1); }
    .xl-padding-2 { padding: var(--space-2); }
    .xl-padding-3 { padding: var(--space-3); }
    .xl-padding-4 { padding: var(--space-4); }
    .xl-padding-5 { padding: var(--space-5); }
    .xl-padding-6 { padding: var(--space-6); }
    .xl-padding-8 { padding: var(--space-8); }
    .xl-padding-10 { padding: var(--space-10); }
    .xl-padding-12 { padding: var(--space-12); }
    .xl-padding-16 { padding: var(--space-16); }
    .xl-padding-20 { padding: var(--space-20); }
    .xl-padding-24 { padding: var(--space-24); }
}

/* Responsive layout - Display */
@media (max-width: 639px) {
    .xs-display-block { display: block; }
    .xs-display-inline { display: inline; }
    .xs-display-inline-block { display: inline-block; }
    .xs-display-flex { display: flex; }
    .xs-display-inline-flex { display: inline-flex; }
    .xs-display-grid { display: grid; }
    .xs-display-inline-grid { display: inline-grid; }
    .xs-display-table { display: table; }
    .xs-display-table-cell { display: table-cell; }
    .xs-display-table-row { display: table-row; }
    .xs-display-none { display: none; }
    .xs-display-contents { display: contents; }
}

@media (min-width: 640px) {
    .sm-display-block { display: block; }
    .sm-display-inline { display: inline; }
    .sm-display-inline-block { display: inline-block; }
    .sm-display-flex { display: flex; }
    .sm-display-inline-flex { display: inline-flex; }
    .sm-display-grid { display: grid; }
    .sm-display-inline-grid { display: inline-grid; }
    .sm-display-table { display: table; }
    .sm-display-table-cell { display: table-cell; }
    .sm-display-table-row { display: table-row; }
    .sm-display-none { display: none; }
    .sm-display-contents { display: contents; }
}

@media (min-width: 768px) {
    .md-display-block { display: block; }
    .md-display-inline { display: inline; }
    .md-display-inline-block { display: inline-block; }
    .md-display-flex { display: flex; }
    .md-display-inline-flex { display: inline-flex; }
    .md-display-grid { display: grid; }
    .md-display-inline-grid { display: inline-grid; }
    .md-display-table { display: table; }
    .md-display-table-cell { display: table-cell; }
    .md-display-table-row { display: table-row; }
    .md-display-none { display: none; }
    .md-display-contents { display: contents; }
}

@media (min-width: 1024px) {
    .lg-display-block { display: block; }
    .lg-display-inline { display: inline; }
    .lg-display-inline-block { display: inline-block; }
    .lg-display-flex { display: flex; }
    .lg-display-inline-flex { display: inline-flex; }
    .lg-display-grid { display: grid; }
    .lg-display-inline-grid { display: inline-grid; }
    .lg-display-table { display: table; }
    .lg-display-table-cell { display: table-cell; }
    .lg-display-table-row { display: table-row; }
    .lg-display-none { display: none; }
    .lg-display-contents { display: contents; }
}

@media (min-width: 1280px) {
    .xl-display-block { display: block; }
    .xl-display-inline { display: inline; }
    .xl-display-inline-block { display: inline-block; }
    .xl-display-flex { display: flex; }
    .xl-display-inline-flex { display: inline-flex; }
    .xl-display-grid { display: grid; }
    .xl-display-inline-grid { display: inline-grid; }
    .xl-display-table { display: table; }
    .xl-display-table-cell { display: table-cell; }
    .xl-display-table-row { display: table-row; }
    .xl-display-none { display: none; }
    .xl-display-contents { display: contents; }
}

/* Responsive flexbox */
@media (max-width: 639px) {
    .xs-flex-direction-row { flex-direction: row; }
    .xs-flex-direction-row-reverse { flex-direction: row-reverse; }
    .xs-flex-direction-column { flex-direction: column; }
    .xs-flex-direction-column-reverse { flex-direction: column-reverse; }
    .xs-flex-wrap { flex-wrap: wrap; }
    .xs-flex-wrap-reverse { flex-wrap: wrap-reverse; }
    .xs-flex-nowrap { flex-wrap: nowrap; }
    .xs-justify-content-start { justify-content: flex-start; }
    .xs-justify-content-end { justify-content: flex-end; }
    .xs-justify-content-center { justify-content: center; }
    .xs-justify-content-between { justify-content: space-between; }
    .xs-justify-content-around { justify-content: space-around; }
    .xs-justify-content-evenly { justify-content: space-evenly; }
    .xs-align-items-start { align-items: flex-start; }
    .xs-align-items-end { align-items: flex-end; }
    .xs-align-items-center { align-items: center; }
    .xs-align-items-baseline { align-items: baseline; }
    .xs-align-items-stretch { align-items: stretch; }
}

@media (min-width: 640px) {
    .sm-flex-direction-row { flex-direction: row; }
    .sm-flex-direction-row-reverse { flex-direction: row-reverse; }
    .sm-flex-direction-column { flex-direction: column; }
    .sm-flex-direction-column-reverse { flex-direction: column-reverse; }
    .sm-flex-wrap { flex-wrap: wrap; }
    .sm-flex-wrap-reverse { flex-wrap: wrap-reverse; }
    .sm-flex-nowrap { flex-wrap: nowrap; }
    .sm-justify-content-start { justify-content: flex-start; }
    .sm-justify-content-end { justify-content: flex-end; }
    .sm-justify-content-center { justify-content: center; }
    .sm-justify-content-between { justify-content: space-between; }
    .sm-justify-content-around { justify-content: space-around; }
    .sm-justify-content-evenly { justify-content: space-evenly; }
    .sm-align-items-start { align-items: flex-start; }
    .sm-align-items-end { align-items: flex-end; }
    .sm-align-items-center { align-items: center; }
    .sm-align-items-baseline { align-items: baseline; }
    .sm-align-items-stretch { align-items: stretch; }
}

@media (min-width: 768px) {
    .md-flex-direction-row { flex-direction: row; }
    .md-flex-direction-row-reverse { flex-direction: row-reverse; }
    .md-flex-direction-column { flex-direction: column; }
    .md-flex-direction-column-reverse { flex-direction: column-reverse; }
    .md-flex-wrap { flex-wrap: wrap; }
    .md-flex-wrap-reverse { flex-wrap: wrap-reverse; }
    .md-flex-nowrap { flex-wrap: nowrap; }
    .md-justify-content-start { justify-content: flex-start; }
    .md-justify-content-end { justify-content: flex-end; }
    .md-justify-content-center { justify-content: center; }
    .md-justify-content-between { justify-content: space-between; }
    .md-justify-content-around { justify-content: space-around; }
    .md-justify-content-evenly { justify-content: space-evenly; }
    .md-align-items-start { align-items: flex-start; }
    .md-align-items-end { align-items: flex-end; }
    .md-align-items-center { align-items: center; }
    .md-align-items-baseline { align-items: baseline; }
    .md-align-items-stretch { align-items: stretch; }
}

@media (min-width: 1024px) {
    .lg-flex-direction-row { flex-direction: row; }
    .lg-flex-direction-row-reverse { flex-direction: row-reverse; }
    .lg-flex-direction-column { flex-direction: column; }
    .lg-flex-direction-column-reverse { flex-direction: column-reverse; }
    .lg-flex-wrap { flex-wrap: wrap; }
    .lg-flex-wrap-reverse { flex-wrap: wrap-reverse; }
    .lg-flex-nowrap { flex-wrap: nowrap; }
    .lg-justify-content-start { justify-content: flex-start; }
    .lg-justify-content-end { justify-content: flex-end; }
    .lg-justify-content-center { justify-content: center; }
    .lg-justify-content-between { justify-content: space-between; }
    .lg-justify-content-around { justify-content: space-around; }
    .lg-justify-content-evenly { justify-content: space-evenly; }
    .lg-align-items-start { align-items: flex-start; }
    .lg-align-items-end { align-items: flex-end; }
    .lg-align-items-center { align-items: center; }
    .lg-align-items-baseline { align-items: baseline; }
    .lg-align-items-stretch { align-items: stretch; }
}

@media (min-width: 1280px) {
    .xl-flex-direction-row { flex-direction: row; }
    .xl-flex-direction-row-reverse { flex-direction: row-reverse; }
    .xl-flex-direction-column { flex-direction: column; }
    .xl-flex-direction-column-reverse { flex-direction: column-reverse; }
    .xl-flex-wrap { flex-wrap: wrap; }
    .xl-flex-wrap-reverse { flex-wrap: wrap-reverse; }
    .xl-flex-nowrap { flex-wrap: nowrap; }
    .xl-justify-content-start { justify-content: flex-start; }
    .xl-justify-content-end { justify-content: flex-end; }
    .xl-justify-content-center { justify-content: center; }
    .xl-justify-content-between { justify-content: space-between; }
    .xl-justify-content-around { justify-content: space-around; }
    .xl-justify-content-evenly { justify-content: space-evenly; }
    .xl-align-items-start { align-items: flex-start; }
    .xl-align-items-end { align-items: flex-end; }
    .xl-align-items-center { align-items: center; }
    .xl-align-items-baseline { align-items: baseline; }
    .xl-align-items-stretch { align-items: stretch; }
}

/* Responsive grid */
@media (max-width: 639px) {
    .xs-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .xs-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xs-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .xs-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .xs-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .xs-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .xs-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .xs-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .xs-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .xs-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .xs-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .xs-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .xs-grid-cols-none { grid-template-columns: none; }
}

@media (min-width: 640px) {
    .sm-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .sm-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sm-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .sm-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .sm-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .sm-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .sm-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .sm-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .sm-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .sm-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .sm-grid-cols-none { grid-template-columns: none; }
}

@media (min-width: 768px) {
    .md-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .md-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .md-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .md-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .md-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .md-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .md-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .md-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .md-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .md-grid-cols-none { grid-template-columns: none; }
}

@media (min-width: 1024px) {
    .lg-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .lg-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lg-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lg-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .lg-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .lg-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .lg-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .lg-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .lg-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .lg-grid-cols-none { grid-template-columns: none; }
}

@media (min-width: 1280px) {
    .xl-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .xl-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xl-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .xl-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .xl-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .xl-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .xl-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .xl-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .xl-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .xl-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .xl-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .xl-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .xl-grid-cols-none { grid-template-columns: none; }
}

/* PSEUDO-CLASS UTILITIES */

/* Interactive states */
.hover\:bg-primary:hover { background-color: var(--primary); }
.hover\:bg-secondary:hover { background-color: var(--secondary); }
.hover\:text-primary:hover { color: var(--primary); }
.hover\:text-secondary:hover { color: var(--secondary); }
.hover\:opacity-75:hover { opacity: 0.75; }
.hover\:scale-105:hover { transform: scale(1.05); }

.focus\:bg-primary:focus { background-color: var(--primary); }
.focus\:text-primary:focus { color: var(--primary); }
.focus\:outline-none:focus { outline: none; }
.focus\:ring:focus { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); }

.active\:bg-primary-dark:active { background-color: var(--primary-dark); }
.active\:text-primary-dark:active { color: var(--primary-dark); }
.active\:scale-95:active { transform: scale(0.95); }

.disabled\:opacity-50:disabled { opacity: 0.5; }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
.disabled\:bg-gray:disabled { background-color: var(--secondary-200); }

.visited\:text-purple:visited { color: var(--visited); }

.first\:margin-top-0:first-child { margin-top: 0; }
.last\:margin-bottom-0:last-child { margin-bottom: 0; }
.odd\:bg-gray:nth-child(odd) { background-color: var(--secondary-50); }
.even\:bg-white:nth-child(even) { background-color: white; }

/* Global Styles */
* {
    box-sizing: border-box;
}

html {
    font-family: "DM Sans",-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--background);
    color: var(--text-primary);
    font-size: var(--font-size-m);
    line-height: var(--line-height-normal);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: inherit;
    font-size: inherit;
}

p {
    margin: 0;
}

button {
    background-color: transparent;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Utility Reset */
.reset {
    all: unset;
}

/* Framework Information Comment */
/*
 * Utility CSS Framework with Fluid Responsiveness
 *
 * This framework provides two approaches to responsiveness:
 *
 * 1. TRADITIONAL BREAKPOINT-BASED (using media queries)
 *    - Discrete jumps at specific screen sizes
 *    - More predictable and controllable
 *    - Better for complex layouts and specific design requirements
 *    - Example: .sm-text-size-xl, .md-padding-4, .lg-grid-cols-3
 *
 * 2. FLUID RESPONSIVENESS (using clamp())
 *    - Smooth scaling between minimum and maximum values
 *    - Better performance (no media query evaluation)
 *    - More natural, organic feel
 *    - Less code and maintenance
 *    - Example: .text-fluid-xl, .padding-fluid-m, .container-fluid
 *
 * Benefits of Fluid Approach:
 * ✅ Smooth scaling without breakpoint jumps
 * ✅ Better performance (no media queries to evaluate)
 * ✅ Fewer utility classes needed
 * ✅ More maintainable code
 * ✅ Works great for typography, spacing, and containers
 * ✅ Future-proof approach using modern CSS
 *
 * When to use each:
 * - Use FLUID for: Typography, spacing, containers, content sizing
 * - Use BREAKPOINTS for: Layout changes, grid columns, show/hide elements
 *
 * Usage Examples:
 *
 * Fluid Typography:
 * <h1 class="text-type-fluid-h1">Scales smoothly from mobile to desktop</h1>
 * <p class="text-fluid-m">Body text that scales naturally</p>
 *
 * Fluid Spacing:
 * <div class="padding-fluid-l margin-y-fluid-m">Spacing adapts to screen size</div>
 *
 * Fluid Containers:
 * <div class="container-fluid-l">Content container with fluid width and padding</div>
 *
 * Mixed Approach:
 * <div class="container-fluid-xl display-grid xs-grid-cols-1 md-grid-cols-2 gap-fluid-m">
 *   <div class="padding-fluid-m">Card 1</div>
 *   <div class="padding-fluid-m">Card 2</div>
 * </div>
 *
 * Comprehensive CSS utility framework with:
 * - Extensive color palette with semantic colors
 * - Typography utilities for all text styling needs
 * - Both fluid and breakpoint-based spacing utilities
 * - Layout utilities for flexbox, grid, and positioning
 * - Animation and transition utilities
 * - Hover, focus, and state management
 * - Responsive utilities for all screen sizes
 * - Accessibility utilities
 * - Modern CSS features and best practices
 */