/* ================================================
   ZMCOR Design System v3.0 - 2025 Edition
   Cutting-edge design tokens and components
   ================================================ */

/* ===== 2025 Design Tokens ===== */
:root {
    /* ===== Modern Color Palette 2025 ===== */
    /* Primary Brand Colors - Enhanced for 2025 */
    --color-brand-primary: #2563eb;         /* Modern Blue - Deeper, more sophisticated */
    --color-brand-primary-50: #eff6ff;      /* Ultra light blue for backgrounds */
    --color-brand-primary-100: #dbeafe;     /* Light blue for hover states */
    --color-brand-primary-200: #bfdbfe;     /* Soft blue */
    --color-brand-primary-300: #93c5fd;     /* Medium blue */
    --color-brand-primary-400: #60a5fa;     /* Bright blue */
    --color-brand-primary-500: #2563eb;     /* Base primary */
    --color-brand-primary-600: #1d4ed8;     /* Darker blue */
    --color-brand-primary-700: #1e40af;     /* Deep blue */
    --color-brand-primary-800: #1e3a8a;     /* Very deep blue */
    --color-brand-primary-900: #1e293b;     /* Darkest blue */

    /* Secondary Brand - Success/Growth Green */
    --color-brand-secondary: #16a34a;       /* Modern Success Green */
    --color-brand-secondary-50: #f0fdf4;
    --color-brand-secondary-100: #dcfce7;
    --color-brand-secondary-200: #bbf7d0;
    --color-brand-secondary-300: #86efac;
    --color-brand-secondary-400: #4ade80;
    --color-brand-secondary-500: #16a34a;
    --color-brand-secondary-600: #059669;
    --color-brand-secondary-700: #047857;
    --color-brand-secondary-800: #065f46;
    --color-brand-secondary-900: #064e3b;

    /* Accent Color - Warm Orange */
    --color-brand-accent: #ea580c;          /* Warm, inviting accent */
    --color-brand-accent-50: #fff7ed;
    --color-brand-accent-100: #ffedd5;
    --color-brand-accent-200: #fed7aa;
    --color-brand-accent-300: #fdba74;
    --color-brand-accent-400: #fb923c;
    --color-brand-accent-500: #ea580c;
    --color-brand-accent-600: #dc2626;
    --color-brand-accent-700: #b91c1c;
    --color-brand-accent-800: #991b1b;
    --color-brand-accent-900: #7f1d1d;

    /* Purple for Enterprise/Premium features */
    --color-brand-purple: #7c3aed;
    --color-brand-purple-50: #faf5ff;
    --color-brand-purple-100: #f3e8ff;
    --color-brand-purple-200: #e9d5ff;
    --color-brand-purple-300: #d8b4fe;
    --color-brand-purple-400: #c084fc;
    --color-brand-purple-500: #7c3aed;
    --color-brand-purple-600: #7c2d12;
    --color-brand-purple-700: #6b21a8;
    --color-brand-purple-800: #581c87;
    --color-brand-purple-900: #4c1d95;

    /* ===== Sophisticated Neutral Scale ===== */
    /* Light Theme Neutrals - High contrast, modern */
    --color-neutral-0: #ffffff;             /* Pure white */
    --color-neutral-50: #fafafa;            /* Softest gray */
    --color-neutral-100: #f4f4f5;           /* Very light gray */
    --color-neutral-200: #e4e4e7;           /* Light gray */
    --color-neutral-300: #d4d4d8;           /* Medium light gray */
    --color-neutral-400: #a1a1aa;           /* Medium gray */
    --color-neutral-500: #71717a;           /* True middle gray */
    --color-neutral-600: #52525b;           /* Medium dark gray */
    --color-neutral-700: #3f3f46;           /* Dark gray */
    --color-neutral-800: #27272a;           /* Very dark gray */
    --color-neutral-900: #18181b;           /* Near black */
    --color-neutral-950: #09090b;           /* Deepest black */

    /* ===== Semantic Color System ===== */
    --color-success: var(--color-brand-secondary-500);
    --color-success-light: var(--color-brand-secondary-100);
    --color-success-dark: var(--color-brand-secondary-700);

    --color-warning: #f59e0b;               /* Amber warning */
    --color-warning-light: #fef3c7;
    --color-warning-dark: #d97706;

    --color-error: #dc2626;                 /* Clear red error */
    --color-error-light: #fee2e2;
    --color-error-dark: #b91c1c;

    --color-info: var(--color-brand-primary-500);
    --color-info-light: var(--color-brand-primary-100);
    --color-info-dark: var(--color-brand-primary-700);

    /* ===== Modern Gradients 2025 ===== */
    --gradient-brand-primary: linear-gradient(135deg, var(--color-brand-primary-500) 0%, var(--color-brand-primary-600) 100%);
    --gradient-brand-hero: linear-gradient(135deg, var(--color-brand-primary-500) 0%, var(--color-brand-purple-600) 100%);
    --gradient-brand-accent: linear-gradient(135deg, var(--color-brand-accent-400) 0%, var(--color-brand-accent-600) 100%);
    --gradient-success: linear-gradient(135deg, var(--color-brand-secondary-400) 0%, var(--color-brand-secondary-600) 100%);
    
    /* Glass Morphism Gradients */
    --gradient-glass-light: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 100%);
    --gradient-glass-dark: linear-gradient(135deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.1) 100%);
    
    /* Mesh Gradients for Hero Sections */
    --gradient-mesh-1: radial-gradient(ellipse 800px 400px at 0% 50%, rgba(37, 99, 235, 0.15), transparent),
                       radial-gradient(ellipse 600px 300px at 100% 80%, rgba(124, 58, 237, 0.1), transparent),
                       radial-gradient(ellipse 400px 200px at 50% 20%, rgba(22, 163, 74, 0.1), transparent);
    
    --gradient-mesh-2: radial-gradient(ellipse 1000px 500px at 20% 80%, rgba(234, 88, 12, 0.12), transparent),
                       radial-gradient(ellipse 800px 400px at 80% 20%, rgba(37, 99, 235, 0.1), transparent),
                       radial-gradient(ellipse 600px 300px at 50% 50%, rgba(124, 58, 237, 0.08), transparent);

    /* ===== Advanced Typography 2025 ===== */
    --font-family-sans: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-family-display: 'Inter Variable', 'Inter', system-ui, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Monaco', 'Inconsolata', monospace;

    /* Fluid Typography Scale - Responsive design */
    --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8rem);      /* 12-13px */
    --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 0.95rem);   /* 14-15px */
    --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);      /* 16-18px */
    --font-size-md: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);     /* 18-20px */
    --font-size-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);      /* 20-24px */
    --font-size-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);            /* 24-32px */
    --font-size-2xl: clamp(2rem, 1.7rem + 1.5vw, 2.75rem);        /* 32-44px */
    --font-size-3xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);           /* 40-64px */
    --font-size-4xl: clamp(3rem, 2.5rem + 3vw, 5rem);             /* 48-80px */

    /* Font Weights - Modern Variable Font Support */
    --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 - Optimized for readability */
    --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;

    /* ===== Sophisticated Spacing System ===== */
    /* 8px base system with golden ratio progression */
    --space-0: 0;
    --space-px: 1px;
    --space-0_5: 0.125rem;     /* 2px */
    --space-1: 0.25rem;        /* 4px */
    --space-1_5: 0.375rem;     /* 6px */
    --space-2: 0.5rem;         /* 8px */
    --space-2_5: 0.625rem;     /* 10px */
    --space-3: 0.75rem;        /* 12px */
    --space-3_5: 0.875rem;     /* 14px */
    --space-4: 1rem;           /* 16px */
    --space-5: 1.25rem;        /* 20px */
    --space-6: 1.5rem;         /* 24px */
    --space-7: 1.75rem;        /* 28px */
    --space-8: 2rem;           /* 32px */
    --space-9: 2.25rem;        /* 36px */
    --space-10: 2.5rem;        /* 40px */
    --space-11: 2.75rem;       /* 44px */
    --space-12: 3rem;          /* 48px */
    --space-14: 3.5rem;        /* 56px */
    --space-16: 4rem;          /* 64px */
    --space-20: 5rem;          /* 80px */
    --space-24: 6rem;          /* 96px */
    --space-28: 7rem;          /* 112px */
    --space-32: 8rem;          /* 128px */

    /* ===== Modern Border Radius ===== */
    --radius-none: 0;
    --radius-sm: 0.125rem;      /* 2px */
    --radius-base: 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-4xl: 2rem;         /* 32px */
    --radius-full: 9999px;

    /* ===== Advanced Shadow System ===== */
    /* Layered shadows for depth and hierarchy */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-2xl: 0 50px 100px -20px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);

    /* Colored Shadows for Brand Elements */
    --shadow-brand-sm: 0 4px 6px -1px rgba(37, 99, 235, 0.1), 0 2px 4px -2px rgba(37, 99, 235, 0.05);
    --shadow-brand-md: 0 10px 15px -3px rgba(37, 99, 235, 0.15), 0 4px 6px -4px rgba(37, 99, 235, 0.1);
    --shadow-brand-lg: 0 20px 25px -5px rgba(37, 99, 235, 0.2), 0 8px 10px -6px rgba(37, 99, 235, 0.1);

    --shadow-success-sm: 0 4px 6px -1px rgba(22, 163, 74, 0.1), 0 2px 4px -2px rgba(22, 163, 74, 0.05);
    --shadow-accent-sm: 0 4px 6px -1px rgba(234, 88, 12, 0.1), 0 2px 4px -2px rgba(234, 88, 12, 0.05);

    /* ===== Glass Morphism Effects ===== */
    --glass-backdrop-blur: blur(20px);
    --glass-backdrop-saturate: saturate(180%);
    --glass-background-light: rgba(255, 255, 255, 0.75);
    --glass-background-dark: rgba(0, 0, 0, 0.25);
    --glass-border-light: 1px solid rgba(255, 255, 255, 0.2);
    --glass-border-dark: 1px solid rgba(255, 255, 255, 0.1);

    /* ===== Modern Transitions ===== */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Spring-based animations */
    --transition-spring: 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Easing functions */
    --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* ===== Z-Index Management ===== */
    --z-index-hide: -1;
    --z-index-auto: auto;
    --z-index-base: 0;
    --z-index-docked: 10;
    --z-index-dropdown: 1000;
    --z-index-sticky: 1100;
    --z-index-banner: 1200;
    --z-index-overlay: 1300;
    --z-index-modal: 1400;
    --z-index-popover: 1500;
    --z-index-skipLink: 1600;
    --z-index-toast: 1700;
    --z-index-tooltip: 1800;

    /* ===== Focus Management ===== */
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-color: var(--color-brand-primary-500);
    --focus-ring-opacity: 0.5;

    /* ===== Container System ===== */
    --container-xs: 20rem;      /* 320px */
    --container-sm: 24rem;      /* 384px */
    --container-md: 28rem;      /* 448px */
    --container-lg: 32rem;      /* 512px */
    --container-xl: 36rem;      /* 576px */
    --container-2xl: 42rem;     /* 672px */
    --container-3xl: 48rem;     /* 768px */
    --container-4xl: 56rem;     /* 896px */
    --container-5xl: 64rem;     /* 1024px */
    --container-6xl: 72rem;     /* 1152px */
    --container-7xl: 80rem;     /* 1280px */
    --container-full: 100%;

    /* Legacy container for backward compatibility */
    --container-max-width: var(--container-7xl);
    --container-padding: var(--space-4);

    /* ===== Grid System ===== */
    --grid-cols-1: repeat(1, minmax(0, 1fr));
    --grid-cols-2: repeat(2, minmax(0, 1fr));
    --grid-cols-3: repeat(3, minmax(0, 1fr));
    --grid-cols-4: repeat(4, minmax(0, 1fr));
    --grid-cols-5: repeat(5, minmax(0, 1fr));
    --grid-cols-6: repeat(6, minmax(0, 1fr));
    --grid-cols-12: repeat(12, minmax(0, 1fr));

    /* ===== Breakpoints ===== */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* ===== Dark Mode Support - Enhanced for 2025 ===== */
[data-theme="dark"],
@media (prefers-color-scheme: dark) {
    :root {
        /* Dark Theme Color Overrides */
        --color-neutral-0: #09090b;           /* Deep black background */
        --color-neutral-50: #18181b;          /* Very dark gray */
        --color-neutral-100: #27272a;         /* Dark gray */
        --color-neutral-200: #3f3f46;         /* Medium dark gray */
        --color-neutral-300: #52525b;         /* Medium gray */
        --color-neutral-400: #71717a;         /* True middle gray */
        --color-neutral-500: #a1a1aa;         /* Light gray */
        --color-neutral-600: #d4d4d8;         /* Very light gray */
        --color-neutral-700: #e4e4e7;         /* Near white */
        --color-neutral-800: #f4f4f5;         /* Very light */
        --color-neutral-900: #fafafa;         /* Almost white */
        --color-neutral-950: #ffffff;         /* Pure white */

        /* Adjusted brand colors for better dark mode contrast */
        --color-brand-primary-500: #3b82f6;   /* Brighter blue */
        --color-brand-secondary-500: #22c55e; /* Brighter green */
        --color-brand-accent-500: #f97316;    /* Brighter orange */
        --color-brand-purple-500: #8b5cf6;    /* Brighter purple */

        /* Enhanced shadows for dark mode */
        --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.8);
        --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.8), 0 1px 2px -1px rgba(0, 0, 0, 0.8);
        --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.8), 0 2px 4px -2px rgba(0, 0, 0, 0.8);
        --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.8), 0 4px 6px -4px rgba(0, 0, 0, 0.8);
        --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
        --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.9);
        --shadow-2xl: 0 50px 100px -20px rgba(0, 0, 0, 0.9);

        /* Glass morphism adjustments */
        --glass-background-light: rgba(0, 0, 0, 0.25);
        --glass-background-dark: rgba(255, 255, 255, 0.05);
        --glass-border-light: 1px solid rgba(255, 255, 255, 0.1);
        --glass-border-dark: 1px solid rgba(255, 255, 255, 0.05);

        /* Dark gradients */
        --gradient-mesh-1: radial-gradient(ellipse 800px 400px at 0% 50%, rgba(59, 130, 246, 0.1), transparent),
                           radial-gradient(ellipse 600px 300px at 100% 80%, rgba(139, 92, 246, 0.08), transparent),
                           radial-gradient(ellipse 400px 200px at 50% 20%, rgba(34, 197, 94, 0.08), transparent);
        
        --gradient-mesh-2: radial-gradient(ellipse 1000px 500px at 20% 80%, rgba(249, 115, 22, 0.08), transparent),
                           radial-gradient(ellipse 800px 400px at 80% 20%, rgba(59, 130, 246, 0.08), transparent),
                           radial-gradient(ellipse 600px 300px at 50% 50%, rgba(139, 92, 246, 0.06), transparent);
    }
}

/* ===== Advanced Button System 2025 ===== */
.btn {
    /* Base foundation */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-none);
    text-decoration: none;
    white-space: nowrap;
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    user-select: none;
    outline: none;
    overflow: hidden;
    
    /* Modern enhancements */
    backdrop-filter: var(--glass-backdrop-blur);
    box-shadow: var(--shadow-sm);
    transform: perspective(1px) translateZ(0);
    backface-visibility: hidden;
}

/* Hover effect overlay */
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    pointer-events: none;
}

.btn:hover::before {
    transform: translateX(100%);
}

/* Focus states - WCAG 2.1 AA compliant */
.btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    box-shadow: var(--shadow-md), 0 0 0 4px rgba(37, 99, 235, var(--focus-ring-opacity));
}

/* ===== Button Variants ===== */
.btn-primary {
    background: var(--gradient-brand-primary);
    color: var(--color-neutral-0);
    border-color: var(--color-brand-primary-500);
    box-shadow: var(--shadow-brand-sm);
}

.btn-primary:hover {
    background: var(--color-brand-primary-600);
    transform: translateY(-2px);
    box-shadow: var(--shadow-brand-lg);
    border-color: var(--color-brand-primary-600);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-brand-sm);
}

.btn-secondary {
    background: var(--gradient-success);
    color: var(--color-neutral-0);
    border-color: var(--color-brand-secondary-500);
    box-shadow: var(--shadow-success-sm);
}

.btn-secondary:hover {
    background: var(--color-brand-secondary-600);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-accent {
    background: var(--gradient-brand-accent);
    color: var(--color-neutral-0);
    border-color: var(--color-brand-accent-500);
    box-shadow: var(--shadow-accent-sm);
}

.btn-accent:hover {
    background: var(--color-brand-accent-600);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Glass morphism button */
.btn-glass {
    background: var(--glass-background-light);
    color: var(--color-neutral-900);
    border: var(--glass-border-light);
    backdrop-filter: var(--glass-backdrop-blur) var(--glass-backdrop-saturate);
    box-shadow: var(--shadow-sm);
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Outline buttons with modern styling */
.btn-outline {
    background: transparent;
    color: var(--color-brand-primary-500);
    border-color: var(--color-brand-primary-300);
    position: relative;
    overflow: hidden;
}

.btn-outline::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-brand-primary);
    opacity: 0;
    transition: opacity var(--transition-base);
    z-index: -1;
}

.btn-outline:hover {
    color: var(--color-neutral-0);
    border-color: var(--color-brand-primary-500);
    transform: translateY(-1px);
    box-shadow: var(--shadow-brand-md);
}

.btn-outline:hover::after {
    opacity: 1;
}

/* Ghost button */
.btn-ghost {
    background: transparent;
    color: var(--color-neutral-600);
    border-color: transparent;
}

.btn-ghost:hover {
    background: var(--color-neutral-100);
    color: var(--color-neutral-900);
    transform: translateY(-1px);
}

/* ===== Button Sizes ===== */
.btn-xs {
    padding: var(--space-1_5) var(--space-3);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-md);
}

.btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-md);
}

.btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-md);
    border-radius: var(--radius-xl);
}

.btn-xl {
    padding: var(--space-5) var(--space-10);
    font-size: var(--font-size-lg);
    border-radius: var(--radius-2xl);
    font-weight: var(--font-weight-semibold);
}

/* Button states */
.btn:disabled,
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
}

.btn-loading {
    color: transparent;
    pointer-events: none;
}

.btn-loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-right-color: transparent;
    animation: btn-spin 0.6s linear infinite;
}

/* ===== Modern Card Component with Glass Effects ===== */
.card {
    position: relative;
    background: var(--color-neutral-0);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-base);
    overflow: hidden;
    transition: all var(--transition-base);
    backdrop-filter: var(--glass-backdrop-blur);
}

.card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-brand-primary-200);
}

.card-glass {
    background: var(--glass-background-light);
    border: var(--glass-border-light);
    backdrop-filter: var(--glass-backdrop-blur) var(--glass-backdrop-saturate);
}

.card-header {
    padding: var(--space-6);
    border-bottom: 1px solid var(--color-neutral-200);
    background: var(--color-neutral-50);
}

.card-body {
    padding: var(--space-6);
}

.card-footer {
    padding: var(--space-6);
    border-top: 1px solid var(--color-neutral-200);
    background: var(--color-neutral-50);
}

/* ===== Advanced Form Components ===== */
.form-group {
    position: relative;
    margin-bottom: var(--space-6);
}

.form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-700);
    letter-spacing: var(--letter-spacing-wide);
}

.form-input,
.form-textarea,
.form-select {
    display: block;
    width: 100%;
    padding: var(--space-4);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-neutral-900);
    background: var(--color-neutral-0);
    border: 2px solid var(--color-neutral-300);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    outline: none;
    box-shadow: var(--shadow-xs);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color: var(--color-brand-primary-500);
    box-shadow: var(--shadow-brand-sm), 0 0 0 4px rgba(37, 99, 235, 0.1);
    transform: translateY(-1px);
}

.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
    background: var(--color-neutral-100);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Floating label effect */
.form-floating {
    position: relative;
}

.form-floating .form-input {
    padding: var(--space-5) var(--space-4) var(--space-3);
}

.form-floating .form-label {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    margin: 0;
    transition: all var(--transition-base);
    pointer-events: none;
    color: var(--color-neutral-500);
}

.form-floating .form-input:focus ~ .form-label,
.form-floating .form-input:not(:placeholder-shown) ~ .form-label {
    top: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-brand-primary-500);
    font-weight: var(--font-weight-medium);
}

/* ===== Glass Morphism Components ===== */
.glass-card {
    background: var(--glass-background-light);
    border: var(--glass-border-light);
    border-radius: var(--radius-2xl);
    backdrop-filter: var(--glass-backdrop-blur) var(--glass-backdrop-saturate);
    box-shadow: var(--shadow-xl);
    padding: var(--space-8);
    transition: all var(--transition-base);
}

.glass-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2xl);
}

.glass-nav {
    background: var(--glass-background-light);
    border-bottom: var(--glass-border-light);
    backdrop-filter: var(--glass-backdrop-blur) var(--glass-backdrop-saturate);
    position: sticky;
    top: 0;
    z-index: var(--z-index-sticky);
}

/* ===== Modern Navigation ===== */
.nav {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-4) 0;
}

.nav-link {
    position: relative;
    padding: var(--space-3) var(--space-4);
    color: var(--color-neutral-700);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    letter-spacing: var(--letter-spacing-wide);
}

.nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-brand-primary);
    border-radius: var(--radius-lg);
    opacity: 0;
    transition: opacity var(--transition-base);
    z-index: -1;
}

.nav-link:hover,
.nav-link:focus-visible {
    color: var(--color-neutral-0);
    transform: translateY(-1px);
}

.nav-link:hover::before,
.nav-link.active::before {
    opacity: 1;
}

.nav-link.active {
    color: var(--color-neutral-0);
}

/* ===== Utility Classes - Enhanced ===== */
/* Text Colors */
.text-primary { color: var(--color-brand-primary-500); }
.text-secondary { color: var(--color-brand-secondary-500); }
.text-accent { color: var(--color-brand-accent-500); }
.text-purple { color: var(--color-brand-purple-500); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }
.text-muted { color: var(--color-neutral-500); }
.text-white { color: var(--color-neutral-0); }
.text-black { color: var(--color-neutral-950); }

/* Background Colors */
.bg-primary { background-color: var(--color-brand-primary-500); }
.bg-secondary { background-color: var(--color-brand-secondary-500); }
.bg-accent { background-color: var(--color-brand-accent-500); }
.bg-purple { background-color: var(--color-brand-purple-500); }
.bg-white { background-color: var(--color-neutral-0); }
.bg-black { background-color: var(--color-neutral-950); }
.bg-light { background-color: var(--color-neutral-100); }
.bg-dark { background-color: var(--color-neutral-800); }

/* Gradient Backgrounds */
.bg-gradient-primary { background: var(--gradient-brand-primary); }
.bg-gradient-hero { background: var(--gradient-brand-hero); }
.bg-gradient-accent { background: var(--gradient-brand-accent); }
.bg-gradient-success { background: var(--gradient-success); }

/* Glass Effects */
.glass { 
    background: var(--glass-background-light);
    border: var(--glass-border-light);
    backdrop-filter: var(--glass-backdrop-blur) var(--glass-backdrop-saturate);
}

/* Shadow Utilities */
.shadow-none { box-shadow: none; }
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-base); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }

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

/* ===== Animations and Keyframes ===== */
@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

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

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

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

/* Animation Utilities */
.animate-fade-in {
    animation: fadeIn 0.5s var(--ease-out-quad);
}

.animate-slide-up {
    animation: slideUp 0.6s var(--ease-out-quad);
}

.animate-scale-in {
    animation: scaleIn 0.4s var(--ease-out-quad);
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

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

.focus-visible-only {
    outline: none;
}

.focus-visible-only:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* Skip links for keyboard navigation */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-brand-primary-500);
    color: var(--color-neutral-0);
    padding: var(--space-2) var(--space-4);
    text-decoration: none;
    border-radius: var(--radius-lg);
    z-index: var(--z-index-skipLink);
    transition: all var(--transition-base);
}

.skip-link:focus {
    top: var(--space-4);
    left: var(--space-4);
    outline: none;
    box-shadow: var(--shadow-lg);
}

/* ===== Responsive Design Utilities ===== */
@media (max-width: 640px) {
    :root {
        --container-padding: var(--space-4);
    }
    
    .btn-xl {
        padding: var(--space-4) var(--space-6);
        font-size: var(--font-size-base);
    }
    
    .card-body,
    .card-header,
    .card-footer {
        padding: var(--space-4);
    }
}

@media (max-width: 768px) {
    .nav {
        gap: var(--space-4);
    }
}

/* ===== Print Styles ===== */
@media print {
    .btn,
    .nav,
    .glass-card,
    .no-print {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: black;
        background: white;
    }
    
    .card {
        border: 1px solid #ccc;
        box-shadow: none;
        page-break-inside: avoid;
    }
}

/* ===== Reduced Motion Support ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .btn::before,
    .nav-link::before {
        display: none;
    }
    
    .btn:hover,
    .card:hover,
    .nav-link:hover {
        transform: none;
    }
}

/* ===== High Contrast Mode Support ===== */
@media (prefers-contrast: high) {
    :root {
        --color-neutral-300: #666;
        --color-neutral-600: #333;
        --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
        --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    }
    
    .btn {
        border-width: 3px;
    }
    
    .form-input:focus,
    .form-textarea:focus,
    .form-select:focus {
        border-width: 3px;
    }
}

/* Legacy class mappings for backward compatibility */
.button { @extend .btn; }
.button-primary { @extend .btn-primary; }
.button-secondary { @extend .btn-secondary; }
.card-component { @extend .card; }