/* Z-Index Layer System
 * ==========================================================================
 * Logical progression of z-index values for consistent layering
 * Each category has a base value with room for sub-layers
 */

:where(html) {
  /* Base Content Layers (1-99)
   * --------------------------------------------------------------------------
   * For elements that need slight elevation within normal content flow
   */
  --layer-base: 1;                    /* Default stacking context */
  --layer-decorative: 2;               /* Decorative elements, badges on avatars */
  --layer-hover: 5;                    /* Hovered items in lists/grids */
  --layer-selected: 10;                /* Selected/active items */
  --layer-sticky: 50;                  /* Sticky headers/footers */

  /* Navigation & Controls (100-199)
   * --------------------------------------------------------------------------
   * UI controls that float above content
   */
  --layer-fab: 100;                    /* Floating action buttons */
  --layer-tabs: 110;                   /* Tab bars */
  --layer-appbar: 120;                 /* App bars, toolbars */
  --layer-sidenav: 150;                /* Side navigation drawers */

  /* Popups & Overlays (200-499)
   * --------------------------------------------------------------------------
   * Temporary UI that appears above controls
   */
  --layer-dropdown: 200;               /* Dropdown menus, select options */
  --layer-popover: 250;                /* Popovers, context menus */
  --layer-tooltip: 300;                /* Tooltips */
  --layer-sheet: 400;                  /* Bottom sheets, side sheets */

  /* Modal Layers (500-899)
   * --------------------------------------------------------------------------
   * Full-attention UI elements with scrim
   */
  --layer-scrim: 500;                  /* Modal backdrop/scrim */
  --layer-modal: 600;                  /* Modal dialogs */
  --layer-modal-popup: 650;            /* Popups within modals */

  /* Notification Layers (900-999)
   * --------------------------------------------------------------------------
   * System-level notifications that appear above everything
   */
  --layer-snackbar: 900;               /* Snackbars/toasts */
  --layer-notification: 950;           /* Important notifications */
  --layer-alert: 990;                  /* Critical alerts */

  /* Special Layers (1000+)
   * --------------------------------------------------------------------------
   * Reserved for special cases
   */
  --layer-overlay-max: 9999;           /* Maximum overlay (use sparingly) */
  --layer-important: 2147483647;       /* Maximum z-index (browser limit) */
}