/**
 * 🎯 Z-Index 层级管理系统
 * 
 * 统一管理项目中所有 z-index 值，避免层级混乱
 * 使用 CSS 变量定义，便于维护和调整
 * 
 * 层级划分原则：
 * - 基础层（1-99）：普通页面内容，相对定位元素
 * - 固定层（100-499）：sticky/fixed 导航、工具栏
 * - 浮动层（500-999）：下拉菜单、tooltip、弹出面板
 * - 遮罩层（1000-1999）：遮罩背景
 * - 模态层（2000-2999）：modal、dialog 对话框
 * - 消息层（3000-3999）：toast、message、notification
 * - 最高层（9000+）：调试工具、开发面板
 */

:root {
  /* ========== 基础层（1-99）========== */
  --z-index-base: 1;                    /* 普通内容基础层 */
  --z-index-badge: 2;                   /* 徽章、标记层 */
  --z-index-card-content: 3;            /* 卡片内部内容层 */
  --z-index-card-hover: 5;              /* 卡片悬停效果层 */
  --z-index-sidebar: 10;                /* 侧边栏层 */
  
  /* ========== 固定层（100-499）========== */
  --z-index-category-tabs: 90;          /* 分类标签（低于 header）*/
  --z-index-sticky-indicator: 95;       /* 分类标签活动指示器 */
  --z-index-header: 100;                /* 页面头部（sticky/fixed） */
  
  /* ========== 浮动层（500-999）========== */
  --z-index-dropdown: 500;              /* 下拉菜单容器 */
  --z-index-dropdown-menu: 501;         /* 下拉菜单面板 */
  --z-index-tooltip: 600;               /* 工具提示 */
  --z-index-popover: 700;               /* 气泡弹出框 */
  --z-index-back-to-top: 800;           /* 返回顶部按钮 */
  
  /* ========== 遮罩层（1000-1999）========== */
  --z-index-mask: 1000;                 /* 遮罩背景 */
  --z-index-drawer-mask: 1100;          /* 抽屉遮罩 */
  
  /* ========== 模态层（2000-2999）========== */
  --z-index-modal-backdrop: 1999;       /* 模态对话框背景 */
  --z-index-modal: 2000;                /* 模态对话框 */
  --z-index-drawer: 2100;               /* 抽屉组件 */
  
  /* ========== 消息层（3000-3999）========== */
  --z-index-message: 3000;              /* 全局消息提示 */
  --z-index-notification: 3100;         /* 通知提醒 */
  --z-index-loading: 3200;              /* 全局加载遮罩 */
  
  /* ========== 最高层（9000+）========== */
  --z-index-debug: 9000;                /* 调试工具 */
}

/**
 * 使用说明：
 * 
 * 在 CSS 中使用：
 * .my-element {
 *   z-index: var(--z-index-dropdown);
 * }
 * 
 * 在 JS 中使用：
 * const zIndex = getComputedStyle(document.documentElement)
 *   .getPropertyValue('--z-index-dropdown');
 */