/* Z-Index Management System 
   This file should be loaded AFTER variables.css but BEFORE all other CSS files
   
   LAYER STRUCTURE:
   - Background (-10 to -1): Decorative elements behind content
   - Base (0-99): Regular page content
   - Fixed UI (100-299): Navigation, dropdowns
   - Overlays (300-599): Semi-transparent overlays
   - Modals (600-899): Modal dialogs and their controls
   - Critical UI (900-9999): Notifications, tooltips
   - Special (10000+): Preloader, cursor, accessibility
*/

:root {
    /* Layer 0: Background Elements (-10 to -1) */
    --z-deep-background: -10;
    --z-background-particles: -2;
    --z-background-gradient: -1;
    --z-behind-2: -2; /* Alias for compatibility */
    --z-behind-1: -1; /* Alias for compatibility */
    
    /* Layer 1: Base Content (0-99) */
    --z-base: 0;
    --z-above-base: 1;
    --z-slightly-above: 2;
    --z-elevated: 5;
    --z-card-hover: 10;
    --z-floating-elements: 20;
    --z-above-content: 30;
    
    /* Layer 2: Fixed UI Elements (100-299) */
    --z-dropdown: 100;
    --z-sticky-header: 200;
    --z-navbar: 200; /* Alias for sticky-header - IMPORTANT for compatibility */
    --z-sticky: 200; /* Keep this for navbar and other sticky elements */
    --z-navbar-dropdown: 250;
    
    /* Layer 3: Overlays (300-599) */
    --z-overlay-backdrop: 300;
    --z-overlay-low: 300; /* Alias for compatibility */
    --z-overlay-content: 400;
    --z-overlay-medium: 400; /* Alias for compatibility */
    --z-overlay-high: 500;
    
    /* Layer 4: Modals (600-899) */
    --z-modal-backdrop: 600;
    --z-modal-content: 700;
    --z-modal: 700; /* Alias for modal-content - IMPORTANT for compatibility */
    --z-modal-controls: 750;
    --z-modal-top: 800;
    
    /* Layer 5: Critical UI (900-9999) */
    --z-notification: 900;
    --z-tooltip: 950;
    --z-critical: 999;
    --z-back-to-top: 1020; /* Renamed to avoid conflict with --z-sticky */
    --z-fixed: 1030;
    --z-popover: 1060;
    
    /* Layer 6: Special Elements (10000+) */
    --z-preloader: 9999;
    --z-custom-cursor: 10000;
    --z-skip-link: 10000;
}

/* Debug mode - uncomment to visualize z-index layers during development */
/* 
@media (prefers-color-scheme: dark) and (max-width: 9999px) {
    [style*="z-index"] {
        outline: 2px dashed red !important;
        position: relative;
    }
    [style*="z-index"]::after {
        content: "z: " attr(style);
        position: absolute;
        top: 0;
        left: 0;
        background: red;
        color: white;
        font-size: 10px;
        padding: 2px 4px;
        pointer-events: none;
        z-index: 999999;
    }
}
*/