:root {
    /* Z-INDEX LAYERS - Ordered from lowest to highest */

    /* Base content layers */
    --z-base: 0;
    --z-content: 1;
    --z-elevated: 10;

    /* Interactive elements */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-popover: 400;

    /* Overlays and modals */
    --z-overlay: 500;
    --z-modal-backdrop: 600;
    --z-modal: 700;
    --z-drawer: 800;
    --z-sidebar: 900;

    /* Navigation and headers */
    --z-header: 1000;
    --z-navigation: 1100;
    --z-mobile-menu: 1200;
    --z-loading-screen: 1250;

    /* Notifications and alerts */
    --z-notification: 1300;
    --z-toast: 1400;
    --z-alert: 1500;

    /* Critical UI elements */
    --z-tooltip: 1600;
    --z-loading: 1700;
    --z-spinner: 1800;

    /* Top-most layers */
    --z-debug: 9000;
    --z-dev-tools: 9100;
    --z-maximum: 9999;

    /* Semantic aliases for common use cases */
    --z-chat-message: var(--z-content);
    --z-chat-overlay: var(--z-overlay);
    --z-file-tree: var(--z-sidebar);
    --z-context-menu: var(--z-popover);
    --z-search-results: var(--z-dropdown);
    --z-resize-handle: 1500;

    /* Negative z-index for backgrounds */
    --z-behind: -1;
    --z-far-behind: -10;
}