/*!
 * Modern CSS Enhancements for NX-Commerz
 * 
 * Cutting-edge CSS features and enhancements that complement existing styles.
 * All classes prefixed with 'nx-' to avoid conflicts.
 * 
 * Version: 2.0.0
 * Features: Container Queries, Cascade Layers, Modern Functions, Logical Properties
 */

/* ========================================================================
   CSS CASCADE LAYERS (Modern CSS Organization)
   ======================================================================== */

@layer nx-reset, nx-tokens, nx-components, nx-utilities, nx-interactions;

@layer nx-tokens {
    :root {
        /* Modern Color Functions */
        --nx-primary-hsl: 217 91% 60%;
        --nx-primary: hsl(var(--nx-primary-hsl));
        --nx-primary-50: hsl(var(--nx-primary-hsl) / 0.05);
        --nx-primary-100: hsl(var(--nx-primary-hsl) / 0.1);
        --nx-primary-200: hsl(var(--nx-primary-hsl) / 0.2);
        --nx-primary-500: hsl(var(--nx-primary-hsl) / 0.5);
        --nx-primary-900: hsl(var(--nx-primary-hsl) / 0.9);
        
        /* Fluid Typography using clamp() */
        --nx-text-fluid-sm: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);
        --nx-text-fluid-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
        --nx-text-fluid-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
        --nx-text-fluid-xl: clamp(1.25rem, 1rem + 1.25vw, 2rem);
        --nx-text-fluid-2xl: clamp(1.5rem, 1rem + 2.5vw, 3rem);
        --nx-text-fluid-3xl: clamp(1.875rem, 1rem + 4.375vw, 4.5rem);
        
        /* Fluid Spacing using clamp() */
        --nx-space-fluid-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
        --nx-space-fluid-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1.125rem);
        --nx-space-fluid-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
        --nx-space-fluid-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
        --nx-space-fluid-xl: clamp(2rem, 1.6rem + 2vw, 3rem);
        --nx-space-fluid-2xl: clamp(3rem, 2.4rem + 3vw, 4.5rem);
        
        /* Modern Color Palette with P3 Color Gamut Support */
        --nx-emerald-400: color(display-p3 0.34 0.85 0.61);
        --nx-emerald-500: color(display-p3 0.16 0.73 0.51);
        --nx-red-400: color(display-p3 0.96 0.42 0.42);
        --nx-red-500: color(display-p3 0.94 0.27 0.33);
        --nx-amber-400: color(display-p3 0.98 0.75 0.27);
        --nx-amber-500: color(display-p3 0.96 0.62 0.07);
        
        /* Fallbacks for browsers without P3 support */
        --nx-emerald-400: #22d3ee;
        --nx-emerald-500: #10b981;
        --nx-red-400: #f87171;
        --nx-red-500: #ef4444;
        --nx-amber-400: #fbbf24;
        --nx-amber-500: #f59e0b;
        
        /* Modern Easing Functions */
        --nx-ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
        --nx-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
        --nx-ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
        --nx-ease-in-back: cubic-bezier(0.36, 0, 0.66, -0.56);
        --nx-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
        --nx-ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
        
        /* Container Query Breakpoints */
        --nx-container-xs: 20rem;   /* 320px */
        --nx-container-sm: 24rem;   /* 384px */
        --nx-container-md: 28rem;   /* 448px */
        --nx-container-lg: 32rem;   /* 512px */
        --nx-container-xl: 36rem;   /* 576px */
        --nx-container-2xl: 42rem;  /* 672px */
        
        /* Logical Properties Support */
        --nx-block-start: 0;
        --nx-block-end: 0;
        --nx-inline-start: 0;
        --nx-inline-end: 0;
    }
}

/* ========================================================================
   MODERN CSS CONTAINER QUERIES
   ======================================================================== */

@layer nx-components {
    /* Container Query Context */
    .nx-container-query {
        container-type: inline-size;
        container-name: product-card;
    }
    
    .nx-sidebar-container {
        container-type: inline-size;
        container-name: sidebar;
    }
    
    .nx-main-container {
        container-type: inline-size;
        container-name: main-content;
    }
    
    /* Responsive Product Card using Container Queries */
    .nx-product-card-responsive {
        padding: var(--nx-space-3);
        border-radius: var(--nx-rounded-lg);
        background: white;
        box-shadow: var(--nx-shadow-sm);
        transition: var(--nx-transition-all);
    }
    
    /* Container Query Rules */
    @container product-card (min-width: 20rem) {
        .nx-product-card-responsive {
            padding: var(--nx-space-4);
        }
        
        .nx-product-title {
            font-size: var(--nx-text-base);
        }
        
        .nx-product-actions {
            flex-direction: row;
            gap: var(--nx-space-3);
        }
    }
    
    @container product-card (min-width: 28rem) {
        .nx-product-card-responsive {
            padding: var(--nx-space-6);
            border-radius: var(--nx-rounded-xl);
        }
        
        .nx-product-title {
            font-size: var(--nx-text-lg);
        }
        
        .nx-product-description {
            display: block;
            margin-top: var(--nx-space-2);
            color: var(--nx-gray-600);
            line-height: 1.5;
        }
    }
    
    /* Sidebar Container Queries */
    @container sidebar (min-width: 16rem) {
        .nx-sidebar-content {
            display: block;
        }
        
        .nx-sidebar-filters {
            grid-template-columns: 1fr;
            gap: var(--nx-space-4);
        }
    }
    
    @container sidebar (min-width: 20rem) {
        .nx-sidebar-filters {
            gap: var(--nx-space-6);
        }
    }
}

/* ========================================================================
   CSS LOGICAL PROPERTIES (Modern Layout)
   ======================================================================== */

@layer nx-utilities {
    /* Logical Margin */
    .nx-margin-block-start-auto { margin-block-start: auto; }
    .nx-margin-block-end-auto { margin-block-end: auto; }
    .nx-margin-inline-start-auto { margin-inline-start: auto; }
    .nx-margin-inline-end-auto { margin-inline-end: auto; }
    
    .nx-m-block-0 { margin-block: 0; }
    .nx-m-block-1 { margin-block: var(--nx-space-1); }
    .nx-m-block-2 { margin-block: var(--nx-space-2); }
    .nx-m-block-3 { margin-block: var(--nx-space-3); }
    .nx-m-block-4 { margin-block: var(--nx-space-4); }
    .nx-m-block-5 { margin-block: var(--nx-space-5); }
    .nx-m-block-6 { margin-block: var(--nx-space-6); }
    
    .nx-m-inline-0 { margin-inline: 0; }
    .nx-m-inline-1 { margin-inline: var(--nx-space-1); }
    .nx-m-inline-2 { margin-inline: var(--nx-space-2); }
    .nx-m-inline-3 { margin-inline: var(--nx-space-3); }
    .nx-m-inline-4 { margin-inline: var(--nx-space-4); }
    .nx-m-inline-5 { margin-inline: var(--nx-space-5); }
    .nx-m-inline-6 { margin-inline: var(--nx-space-6); }
    .nx-m-inline-auto { margin-inline: auto; }
    
    /* Logical Padding */
    .nx-p-block-0 { padding-block: 0; }
    .nx-p-block-1 { padding-block: var(--nx-space-1); }
    .nx-p-block-2 { padding-block: var(--nx-space-2); }
    .nx-p-block-3 { padding-block: var(--nx-space-3); }
    .nx-p-block-4 { padding-block: var(--nx-space-4); }
    .nx-p-block-5 { padding-block: var(--nx-space-5); }
    .nx-p-block-6 { padding-block: var(--nx-space-6); }
    
    .nx-p-inline-0 { padding-inline: 0; }
    .nx-p-inline-1 { padding-inline: var(--nx-space-1); }
    .nx-p-inline-2 { padding-inline: var(--nx-space-2); }
    .nx-p-inline-3 { padding-inline: var(--nx-space-3); }
    .nx-p-inline-4 { padding-inline: var(--nx-space-4); }
    .nx-p-inline-5 { padding-inline: var(--nx-space-5); }
    .nx-p-inline-6 { padding-inline: var(--nx-space-6); }
    
    /* Logical Border */
    .nx-border-block { border-block: 1px solid var(--nx-gray-200); }
    .nx-border-inline { border-inline: 1px solid var(--nx-gray-200); }
    .nx-border-block-start { border-block-start: 1px solid var(--nx-gray-200); }
    .nx-border-block-end { border-block-end: 1px solid var(--nx-gray-200); }
    .nx-border-inline-start { border-inline-start: 1px solid var(--nx-gray-200); }
    .nx-border-inline-end { border-inline-end: 1px solid var(--nx-gray-200); }
    
    /* Logical Text Alignment */
    .nx-text-start { text-align: start; }
    .nx-text-end { text-align: end; }
    
    /* Logical Positioning */
    .nx-inset-block-0 { inset-block: 0; }
    .nx-inset-inline-0 { inset-inline: 0; }
    .nx-start-0 { inset-inline-start: 0; }
    .nx-end-0 { inset-inline-end: 0; }
}

/* ========================================================================
   MODERN CSS FUNCTIONS & FLUID DESIGN
   ======================================================================== */

@layer nx-utilities {
    /* Fluid Typography */
    .nx-text-fluid-sm { font-size: var(--nx-text-fluid-sm); }
    .nx-text-fluid-base { font-size: var(--nx-text-fluid-base); }
    .nx-text-fluid-lg { font-size: var(--nx-text-fluid-lg); }
    .nx-text-fluid-xl { font-size: var(--nx-text-fluid-xl); }
    .nx-text-fluid-2xl { font-size: var(--nx-text-fluid-2xl); }
    .nx-text-fluid-3xl { font-size: var(--nx-text-fluid-3xl); }
    
    /* Fluid Spacing */
    .nx-space-fluid-xs { gap: var(--nx-space-fluid-xs); }
    .nx-space-fluid-sm { gap: var(--nx-space-fluid-sm); }
    .nx-space-fluid-md { gap: var(--nx-space-fluid-md); }
    .nx-space-fluid-lg { gap: var(--nx-space-fluid-lg); }
    .nx-space-fluid-xl { gap: var(--nx-space-fluid-xl); }
    .nx-space-fluid-2xl { gap: var(--nx-space-fluid-2xl); }
    
    /* Fluid Padding */
    .nx-p-fluid-xs { padding: var(--nx-space-fluid-xs); }
    .nx-p-fluid-sm { padding: var(--nx-space-fluid-sm); }
    .nx-p-fluid-md { padding: var(--nx-space-fluid-md); }
    .nx-p-fluid-lg { padding: var(--nx-space-fluid-lg); }
    .nx-p-fluid-xl { padding: var(--nx-space-fluid-xl); }
    .nx-p-fluid-2xl { padding: var(--nx-space-fluid-2xl); }
    
    /* Fluid Margin */
    .nx-m-fluid-xs { margin: var(--nx-space-fluid-xs); }
    .nx-m-fluid-sm { margin: var(--nx-space-fluid-sm); }
    .nx-m-fluid-md { margin: var(--nx-space-fluid-md); }
    .nx-m-fluid-lg { margin: var(--nx-space-fluid-lg); }
    .nx-m-fluid-xl { margin: var(--nx-space-fluid-xl); }
    .nx-m-fluid-2xl { margin: var(--nx-space-fluid-2xl); }
    
    /* Fluid Grid Columns */
    .nx-grid-fluid-sm {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
        gap: var(--nx-space-fluid-sm);
    }
    
    .nx-grid-fluid-md {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
        gap: var(--nx-space-fluid-md);
    }
    
    .nx-grid-fluid-lg {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
        gap: var(--nx-space-fluid-lg);
    }
}

/* ========================================================================
   ADVANCED MODERN CSS FEATURES
   ======================================================================== */

@layer nx-components {
    /* CSS Scroll-Driven Animations */
    .nx-scroll-reveal {
        animation: nx-scroll-fade linear;
        animation-timeline: view();
        animation-range: entry 0% cover 50%;
    }
    
    @keyframes nx-scroll-fade {
        from {
            opacity: 0;
            transform: translateY(3rem);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* CSS Color Mix Function (Modern Color Manipulation) */
    .nx-btn-mixed-primary {
        background-color: color-mix(in srgb, var(--primary) 80%, white);
        color: color-mix(in srgb, var(--primary), black 20%);
    }
    
    .nx-btn-mixed-primary:hover {
        background-color: var(--primary);
        color: white;
    }
    
    /* Modern Focus Styles with :focus-visible */
    .nx-focus-modern:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--primary) 80%, transparent);
        outline-offset: 2px;
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent);
    }
    
    /* CSS Nesting Support */
    .nx-card-modern {
        padding: var(--nx-space-6);
        border-radius: var(--nx-rounded-xl);
        background: white;
        box-shadow: var(--nx-shadow-sm);
        transition: var(--nx-transition-all);
        
        &:hover {
            box-shadow: var(--nx-shadow-lg);
            transform: translateY(-2px);
            
            .nx-card-image {
                transform: scale(1.05);
            }
        }
        
        .nx-card-image {
            border-radius: var(--nx-rounded-lg);
            transition: var(--nx-transition-transform);
        }
        
        .nx-card-content {
            padding: var(--nx-space-4);
            
            .nx-card-title {
                font-size: var(--nx-text-lg);
                font-weight: var(--nx-font-semibold);
                color: var(--nx-gray-900);
                margin-block-end: var(--nx-space-2);
            }
            
            .nx-card-description {
                color: var(--nx-gray-600);
                line-height: 1.6;
            }
        }
    }
}

/* ========================================================================
   CSS CUSTOM PROPERTIES ANIMATION
   ======================================================================== */

@layer nx-interactions {
    /* Animated Custom Properties */
    .nx-animated-gradient {
        --nx-gradient-angle: 0deg;
        background: linear-gradient(var(--nx-gradient-angle), var(--primary), var(--primary-hover));
        animation: nx-gradient-rotate 3s linear infinite;
    }
    
    @keyframes nx-gradient-rotate {
        from { --nx-gradient-angle: 0deg; }
        to { --nx-gradient-angle: 360deg; }
    }
    
    /* Dynamic Color Theming */
    .nx-dynamic-theme {
        --nx-hue: 220;
        --nx-saturation: 90%;
        --nx-lightness: 60%;
        
        background-color: hsl(var(--nx-hue) var(--nx-saturation) var(--nx-lightness));
        color: hsl(var(--nx-hue) var(--nx-saturation) calc(var(--nx-lightness) - 40%));
    }
    
    /* Interactive Hover States with Custom Properties */
    .nx-interactive-card {
        --nx-scale: 1;
        --nx-shadow-opacity: 0.1;
        
        transform: scale(var(--nx-scale));
        box-shadow: 0 10px 25px hsla(0, 0%, 0%, var(--nx-shadow-opacity));
        transition: var(--nx-transition-all);
    }
    
    .nx-interactive-card:hover {
        --nx-scale: 1.02;
        --nx-shadow-opacity: 0.2;
    }
}

/* ========================================================================
   MODERN BROWSER FEATURE DETECTION
   ======================================================================== */

/* Container Query Support Detection */
@supports (container-type: inline-size) {
    .nx-supports-container-queries {
        display: grid;
        grid-template-columns: 200px 1fr;
        gap: var(--nx-space-6);
    }
}

@supports not (container-type: inline-size) {
    .nx-supports-container-queries {
        display: block;
    }
    
    .nx-fallback-responsive {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: var(--nx-space-4);
    }
}

/* CSS Nesting Support Detection */
@supports (selector(&)) {
    .nx-supports-nesting {
        color: var(--nx-emerald-500);
        
        &::after {
            content: " (CSS Nesting Supported)";
            font-size: var(--nx-text-xs);
        }
    }
}

/* Color Mix Function Support */
@supports (color: color-mix(in srgb, red, blue)) {
    .nx-supports-color-mix {
        background-color: color-mix(in srgb, var(--primary) 90%, white);
    }
}

@supports not (color: color-mix(in srgb, red, blue)) {
    .nx-supports-color-mix {
        background-color: var(--nx-primary-100);
    }
}

/* Scroll-Driven Animations Support */
@supports (animation-timeline: view()) {
    .nx-supports-scroll-animations {
        animation: nx-scroll-fade linear;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }
}

/* P3 Color Gamut Support */
@media (color-gamut: p3) {
    .nx-supports-p3 {
        color: var(--nx-emerald-500);
    }
}

/* High Dynamic Range Display Support */
@media (dynamic-range: high) {
    .nx-supports-hdr {
        color: color(display-p3 0 1 0 / 0.8);
    }
}

/* ========================================================================
   MODERN PERFORMANCE OPTIMIZATIONS
   ======================================================================== */

@layer nx-utilities {
    /* Content Visibility for Performance */
    .nx-content-auto { content-visibility: auto; }
    .nx-content-hidden { content-visibility: hidden; }
    .nx-content-visible { content-visibility: visible; }
    
    /* Contain Layout for Performance */
    .nx-contain-layout { contain: layout; }
    .nx-contain-style { contain: style; }
    .nx-contain-paint { contain: paint; }
    .nx-contain-strict { contain: strict; }
    
    /* View Transitions API Support */
    .nx-view-transition {
        view-transition-name: var(--nx-transition-name, auto);
    }
    
    /* Modern Scroll Behavior */
    .nx-scroll-smooth { scroll-behavior: smooth; }
    .nx-scroll-auto { scroll-behavior: auto; }
    
    /* Modern Overflow Anchor */
    .nx-overflow-anchor-auto { overflow-anchor: auto; }
    .nx-overflow-anchor-none { overflow-anchor: none; }
}

/* ========================================================================
   RESPONSIVE DESIGN WITH MODERN UNITS
   ======================================================================== */

@layer nx-utilities {
    /* Modern Viewport Units */
    .nx-h-svh { height: 100svh; }  /* Small Viewport Height */
    .nx-h-lvh { height: 100lvh; }  /* Large Viewport Height */
    .nx-h-dvh { height: 100dvh; }  /* Dynamic Viewport Height */
    
    .nx-w-svi { width: 100svi; }   /* Small Viewport Inline */
    .nx-w-lvi { width: 100lvi; }   /* Large Viewport Inline */
    .nx-w-dvi { width: 100dvi; }   /* Dynamic Viewport Inline */
    
    /* Container Query Units */
    .nx-text-cqi { font-size: 4cqi; }    /* Container Query Inline size */
    .nx-text-cqb { font-size: 4cqb; }    /* Container Query Block size */
    .nx-text-cqw { font-size: 4cqw; }    /* Container Query Width */
    .nx-text-cqh { font-size: 4cqh; }    /* Container Query Height */
    
    /* Modern rem/em Calculations */
    .nx-text-balance { text-wrap: balance; }
    .nx-text-pretty { text-wrap: pretty; }
}

/* ========================================================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================================================== */

@layer nx-utilities {
    /* Modern Focus Management */
    .nx-focus-within:focus-within {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }
    
    /* Reduced Motion Preferences */
    @media (prefers-reduced-motion: reduce) {
        .nx-respect-motion-preference {
            animation: none !important;
            transition: none !important;
        }
        
        .nx-scroll-reveal {
            animation: none;
            opacity: 1;
            transform: none;
        }
    }
    
    /* High Contrast Preferences */
    @media (prefers-contrast: high) {
        .nx-respect-contrast-preference {
            border: 2px solid currentColor;
            outline-width: 2px;
        }
    }
}