/* ============================================================================
   tokens/z-index.css — Z-Index Design Tokens

   Layer-based scale: 7 semantic tiers with room for calc() offsets.
   Each tier spans ~10 slots (e.g. 100-109) so children can use
   calc(var(--z-header) + 1) without colliding with the next tier.

   For component-internal stacking (table headers, card overlays, etc.)
   use `isolation: isolate` on the container and small z-index values
   (1, 2, 3) inside — they won't leak into the global layer order.

   Layer 0  (1-9)      Base content
   Layer 1  (100-129)  Sticky chrome — headers, FABs, mini-player
   Layer 2  (200-219)  Popups — dropdowns, tooltips, menus
   Layer 3  (300-319)  Overlays — panels, toasts
   Layer 4  (400-419)  Floating windows — WindowViewShell, DialogWindow
   Layer 5  (500-519)  Modals — dialogs, confirms, pickers
   Layer 6  (600-619)  Immersive — full-screen takeover + overlays
   Layer 7  (900-909)  System — loading spinners, crash overlays
   ============================================================================ */

:root {
    /* ── Layer 0: Base content ─────────────────────────── */
    --z-base: 1;
    --z-assistant: 50;         /* Assistant canvas — above base, below chrome */

    /* ── Layer 1: Sticky chrome ────────────────────────── */
    --z-sticky: 100;           /* Sticky rows, sub-headers within scroll */
    --z-header: 110;           /* App header / topbar */
    --z-fab: 120;              /* FABs, floating action buttons */
    --z-mini-player: 125;      /* Persistent mini player */

    /* ── Layer 2: Popups (inside page flow) ────────────── */
    --z-dropdown: 200;         /* Dropdowns, selects, context menus */
    --z-tooltip: 210;          /* Tooltips, field hints */

    /* ── Layer 3: Overlays (cover page) ────────────────── */
    --z-overlay: 300;          /* Slide-over panels, search overlay */
    --z-toast: 310;            /* Toast notifications */

    /* ── Layer 4: Floating windows ──────────────────────── */
    --z-window: 400;           /* WindowViewShell, DialogWindow */

    /* ── Layer 5: Modals (block interaction) ────────────── */
    --z-modal: 500;            /* Modal dialogs, confirms, pickers */
    --z-guided-tour: 510;      /* Guided tour spotlight + tooltip */

    /* ── Layer 6: Immersive (full takeover) ────────────── */
    --z-immersive: 600;        /* ImmersiveViewShell full-screen */
    --z-immersive-overlay: 610; /* Dialogs above immersive view */

    /* ── Layer 6.5: Fullscreen (above immersive, below system) */
    --z-fullscreen: 800;       /* Fullscreen content (e.g. media, presentations) */

    /* ── Layer 7: System critical ──────────────────────── */
    --z-system: 900;           /* Fullscreen spinner, crash overlay */
}