/**
 * Z-Index Management System
 *
 * Centralized z-index values using CSS variables for consistent layering
 * across the entire application. All z-index values should reference these
 * variables to maintain a clear and predictable stacking order.
 *
 * Documentation: /documentation/Z_INDEX_ANALYSIS.md
 */

:root {
    /* ========================================
     * Layer 0: Base Content (0-99)
     * ======================================== */

    --z-base: 0;                    /* Default content layer */
    --z-hover: 10;                  /* Hover effects within content */
    --z-dropdown: 20;               /* Small dropdowns within content */
    --z-sticky: 50;                 /* Sticky elements (headers, footers) */
    --z-footer: 100;                /* Site footer */

    /* ========================================
     * Layer 1: Navigation (1000-1999)
     * ======================================== */

    --z-header: 1000;               /* Site header */
    --z-mobile-menu: 1100;          /* Mobile navigation menu */

    /* ========================================
     * Layer 2: Page Modals (2000-2999)
     * Standard modals that open from page content
     * ======================================== */

    --z-modal-low: 2000;            /* Basic page modals */
    --z-filter-modal: 2100;         /* Filter modal */
    --z-card-modal: 2200;           /* Card detail modal (standalone) */

    /* ========================================
     * Layer 3: Deck Modal Stack (3000-3999)
     * Deck details modal and modals that can open on top of it
     *
     * IMPORTANT: This creates a stacking context where:
     * - Deck modal sits at the base (3000)
     * - Other modals can open on top (3100+)
     * - User can view cards/share/playtest without closing deck modal
     * ======================================== */

    --z-deck-modal: 3000;           /* Deck details modal (BASE LAYER) */
    --z-deck-modal-stacked: 3100;   /* Modals that open on top of deck modal:
                                        - Card modal (when opened from deck)
                                        - Share modal (when opened from deck)
                                        - Playtest modal (when opened from deck) */

    /* ========================================
     * Layer 4: Notifications (9000-9999)
     * Always appear on top of everything else
     * ======================================== */

    --z-toast: 9000;                /* Toast notifications (always on top) */

    /* ========================================
     * Special: Local Stacking Contexts (1-9)
     * For relative positioning within components
     * ======================================== */

    --z-local-1: 1;                 /* First level in local context */
    --z-local-2: 2;                 /* Second level in local context */
    --z-local-3: 3;                 /* Third level in local context */
}

/* ========================================
 * Visual Hierarchy Reference
 * ========================================
 *
 * Layer 4: Toasts (9000)
 *   ↑
 * Layer 3: Deck Stack (3000-3100)
 *   3100: Card/Share/Playtest (on top)
 *   3000: Deck Details (below)
 *   ↑
 * Layer 2: Page Modals (2000-2999)
 *   2200: Card Modal (standalone)
 *   2100: Filter Modal
 *   2000: Basic Modals
 *   ↑
 * Layer 1: Navigation (1000-1999)
 *   1100: Mobile Menu
 *   1000: Header
 *   ↑
 * Layer 0: Content (0-99)
 *   100: Footer
 *    50: Sticky Elements
 *    20: Dropdowns
 *    10: Hover Effects
 *     0: Base Content
 *
 * ======================================== */