/* ==============================================
   统一设计令牌 (Design Tokens)
   所有页面共享的颜色/字体/间距/圆角变量
   ============================================== */

:root {
    /* ===== 颜色 ===== */
    --color-primary: #0ea5e9;
    --color-primary-dark: #0284c7;
    --color-primary-light: #7dd3fc;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-premium: #d97706;
    --color-expiring: #ea580c;

    /* ===== 字体 ===== */
    --font-brand: 'ZCOOL QingKe HuangTi', cursive;
    --font-data: 'Orbitron', monospace;
    --font-body: 'Plus Jakarta Sans', 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* ===== 间距 ===== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* ===== 圆角 ===== */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* ===== 触摸目标 ===== */
    --touch-target-min: 44px;

    /* ===== Header 高度 ===== */
    --header-height: 56px;

    /* ===== Z-Index 层级规范 ===== */
    --z-base: 1;
    --z-header: 10;
    --z-dropdown: 50;
    --z-bottom-nav: 90;       /* 低于 modal(100+)，避免覆盖弹窗 */
    --z-modal: 100;           /* modal 基础层级，逐级递增 */
    --z-modal-overlay: 10000; /* 全屏遮罩层 */
    --z-toast: 9999;          /* toast 通知 */
}

/* 深色模式覆盖 */
[data-theme="dark"] {
    --color-primary: #22d3ee;
    --color-primary-dark: #7dd3fc;
}

/*
 * Tailwind 工具类补丁 — .hidden
 * 原因：tailwind-input.css 中的 @tailwind 指令未被 PostCSS 编译，
 *       浏览器无法解析 @tailwind 指令，导致 .hidden { display: none } 等工具类缺失。
 *       所有依赖 hidden 类隐藏的模态框/抽屉/面板都会可见，污染页面。
 */
.hidden {
    display: none !important;
}