/* ========================================
   Admin Design Token System v2.0.0
   设计令牌系统 - S+ 级
   
   架构分层:
   1. Primitive Tokens (基础令牌) - 原始色彩/尺寸值
   2. Semantic Tokens (语义令牌) - 基于用途命名
   3. Component Tokens (组件令牌) - 组件级别变量
   ======================================== */

/* CSS Layer 声明 - 定义层级优先级顺序 */
@layer reset, element-plus, admin-base, admin-components, admin-themes;

:root {
    /* ==================== 颜色系统 ==================== */
    
    /* 主色调 */
    --admin-color-primary: #4f46e5;
    --admin-color-primary-light: #6366f1;
    --admin-color-primary-lighter: #f5f3ff;
    --admin-color-primary-dark: #4338ca;
    
    /* 功能色 */
    --admin-color-success: #10b981;
    --admin-color-success-light: #dcfce7;
    --admin-color-success-dark: #16a34a;
    --admin-color-warning: #f59e0b;
    --admin-color-warning-light: #fef3c7;
    --admin-color-warning-dark: #d97706;
    --admin-color-danger: #ef4444;
    --admin-color-danger-light: #fee2e2;
    --admin-color-danger-dark: #dc2626;
    --admin-color-info: #3b82f6;
    --admin-color-info-light: #dbeafe;
    --admin-color-info-dark: #2563eb;
    
    /* 状态色 */
    --admin-color-purple: #a855f7;
    --admin-color-purple-light: #f3e8ff;
    --admin-color-cyan: #06b6d4;
    --admin-color-orange: #f97316;
    --admin-color-orange-light: #ffedd5;
    
    /* 文字色 */
    --admin-color-text-primary: #1e293b;
    --admin-color-text-secondary: #475569;
    --admin-color-text-muted: #64748b;
    --admin-color-text-light: #94a3b8;
    --admin-color-text-white: #ffffff;
    
    /* 背景色 */
    --admin-color-bg-white: #ffffff;
    --admin-color-bg-light: #f8fafc;
    --admin-color-bg-lighter: #f1f5f9;
    --admin-color-bg-gray: #e2e8f0;
    --admin-color-bg-transparent: transparent;
    
    /* 边框色 */
    --admin-color-border: #e2e8f0;
    --admin-color-border-light: #f1f5f9;
    --admin-color-border-dark: #cbd5e1;
    
    /* 扩展色板 - Indigo */
    --admin-color-indigo-50: #eef2ff;
    --admin-color-indigo-50-30: #f5f7ff;
    --admin-color-indigo-100: #e0e7ff;
    --admin-color-indigo-200: #c7d2fe;
    
    /* 扩展色板 - Blue */
    --admin-color-blue-50: #eff6ff;
    --admin-color-blue-100: #dbeafe;
    --admin-color-blue-200: #bfdbfe;
    --admin-color-blue-700: #1d4ed8;
    --admin-color-blue-800: #1e40af;
    --admin-color-blue-900: #f0f9ff;
    
    /* 扩展色板 - Rose/Pink */
    --admin-color-rose-50: #fff1f2;
    --admin-color-rose-100: #ffe4e6;
    --admin-color-rose-600: #e11d48;
    --admin-color-pink-600: #db2777;
    
    /* 扩展色板 - Amber/Yellow */
    --admin-color-amber-400: #fbbf24;
    
    /* 扩展色板 - Green/Emerald */
    --admin-color-green-50: #f0fdf4;
    --admin-color-green-100: #dcfce7;
    --admin-color-green-200: #bbf7d0;
    --admin-color-green-300: #86efac;
    --admin-color-green-400: #4ade80;
    --admin-color-emerald-100: #d1fae5;
    --admin-color-emerald-200: #a7f3d0;
    --admin-color-emerald-600: #059669;
    
    /* 扩展色板 - Teal/Cyan */
    --admin-color-teal-100: #ccfbf1;
    --admin-color-teal-200: #99f6e4;
    --admin-color-cyan-600: #0891b2;
    
    /* 扩展色板 - Orange/Amber/Yellow */
    --admin-color-orange-600: #ea580c;
    --admin-color-amber-100: #fef3c7;
    --admin-color-amber-200: #fde68a;
    --admin-color-amber-300: #fcd34d;
    --admin-color-amber-400: #fbbf24;
    --admin-color-yellow-100: #fef9c3;
    
    /* 扩展色板 - Red/Rose */
    --admin-color-red-100: #fee2e2;
    --admin-color-red-200: #fecaca;
    --admin-color-red-300: #fca5a5;
    --admin-color-red-600: #dc2626;
    
    /* 扩展色板 - Purple/Violet */
    --admin-color-purple-50: #faf5ff;
    --admin-color-purple-100: #f3e8ff;
    --admin-color-purple-200: #e9d5ff;
    --admin-color-violet-100: #ede9fe;
    --admin-color-violet-200: #c4b5fd;
    --admin-color-violet-600: #7c3aed;
    
    /* 扩展色板 - Gray */
    --admin-color-slate-50: #f8fafc;
    --admin-color-slate-100: #fafbfc;
    --admin-color-black: #000000;
    
    /* 渐变色 - 基础 */
    --admin-gradient-primary: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    --admin-gradient-primary-hover: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    --admin-gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --admin-gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --admin-gradient-purple: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --admin-gradient-login-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    /* 渐变色 - 统计卡片图标 */
    --admin-gradient-icon-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --admin-gradient-icon-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --admin-gradient-icon-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --admin-gradient-icon-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --admin-gradient-icon-info: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    --admin-gradient-icon-gray: linear-gradient(135deg, #64748b 0%, #475569 100%);
    
    /* 渐变色 - 状态卡片背景 */
    --admin-gradient-success-light: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    --admin-gradient-warning-light: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    --admin-gradient-danger-light: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
    --admin-gradient-info-light: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    --admin-gradient-purple-light: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    --admin-gradient-teal-light: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
    --admin-gradient-indigo-light: linear-gradient(135deg, #fafaff 0%, #f5f3ff 100%);
    
    /* 工具栏/表头渐变 */
    --admin-gradient-toolbar: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    --admin-gradient-empty: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    
    /* ==================== 圆角系统 ==================== */
    --admin-radius-xs: 4px;
    --admin-radius-sm: 10px;
    --admin-radius-md: 12px;
    --admin-radius-lg: 14px;
    --admin-radius-xl: 16px;
    --admin-radius-2xl: 20px;
    --admin-radius-3xl: 24px;
    --admin-radius-pill: 26px;
    --admin-radius-full: 9999px;
    
    /* ==================== 间距系统 ==================== */
    --admin-spacing-xs: 4px;
    --admin-spacing-sm: 8px;
    --admin-spacing-md: 12px;
    --admin-spacing-lg: 16px;
    --admin-spacing-xl: 20px;
    --admin-spacing-2xl: 24px;
    --admin-spacing-3xl: 32px;
    --admin-spacing-4xl: 40px;
    --admin-spacing-5xl: 48px;
    
    /* ==================== 字重系统 ==================== */
    --admin-font-weight-normal: 400;
    --admin-font-weight-medium: 500;
    --admin-font-weight-semibold: 600;
    --admin-font-weight-bold: 700;
    --admin-font-weight-extrabold: 800;
    
    /* ==================== 字号系统 ==================== */
    --admin-font-size-xs: 11px;
    --admin-font-size-sm: 12px;
    --admin-font-size-md: 13px;
    --admin-font-size-base: 14px;
    --admin-font-size-lg: 15px;
    --admin-font-size-xl: 16px;
    --admin-font-size-2xl: 18px;
    --admin-font-size-3xl: 20px;
    --admin-font-size-4xl: 22px;
    --admin-font-size-5xl: 26px;
    
    /* ==================== 高度系统 ==================== */
    --admin-height-xs: 26px;
    --admin-height-sm: 36px;
    --admin-height-md: 44px;
    --admin-height-lg: 48px;
    --admin-height-xl: 52px;
    --admin-height-2xl: 72px;
    --admin-height-menu-item: 30px;
    --admin-height-header: 80px;
    
    /* ==================== 阴影系统 ==================== */
    --admin-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --admin-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --admin-shadow-lg: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
    --admin-shadow-xl: 0 8px 16px -4px rgba(79, 70, 229, 0.4);
    --admin-shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.3);
    --admin-shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
    --admin-shadow-button-primary: 0 8px 16px -4px rgba(79, 70, 229, 0.4);
    --admin-shadow-button-primary-hover: 0 10px 15px -3px rgba(79, 70, 229, 0.4);
    --admin-shadow-button-danger: 0 8px 16px -4px rgba(225, 29, 72, 0.3);
    --admin-shadow-dialog: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --admin-shadow-login-card: 0 20px 60px rgba(0, 0, 0, 0.3);
    --admin-shadow-logo: 0 8px 16px -4px rgba(79, 70, 229, 0.4);
    --admin-shadow-input-focus: 0 0 0 3px rgba(99, 102, 241, 0.1);
    --admin-shadow-none: none;
    
    /* ==================== 过渡动画系统 ==================== */
    --admin-transition-fast: 0.2s ease;
    --admin-transition-normal: 0.3s ease;
    --admin-transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --admin-transition-none: none;
    
    /* ==================== 尺寸系统 ==================== */
    --admin-width-sidebar: 280px;
    --admin-width-full: 100%;
    --admin-width-logo: 44px;
    --admin-width-logo-lg: 72px;
    
    /* ==================== Element Plus 覆盖变量 ==================== */
    --el-color-primary: var(--admin-color-primary);
    --el-color-primary-light-3: var(--admin-color-primary-light);
    --el-color-primary-light-5: var(--admin-color-primary-lighter);
    --el-color-primary-light-7: var(--admin-color-indigo-50);
    --el-color-primary-light-9: var(--admin-color-indigo-50);
    --el-color-primary-dark-2: var(--admin-color-primary-dark);
    
    --el-color-success: var(--admin-color-success);
    --el-color-warning: var(--admin-color-warning);
    --el-color-danger: var(--admin-color-danger);
    --el-color-info: var(--admin-color-info);
    
    --el-border-radius-base: var(--admin-radius-md);
    --el-border-radius-small: var(--admin-radius-sm);
    --el-border-radius-round: var(--admin-radius-full);
    
    --el-border-color: var(--admin-color-border);
    --el-border-color-light: var(--admin-color-border-light);
    --el-border-color-lighter: var(--admin-color-border-light);
    
    --el-fill-color-blank: var(--admin-color-bg-white);
    --el-fill-color-light: var(--admin-color-bg-light);
    --el-fill-color-lighter: var(--admin-color-bg-lighter);
    
    --el-text-color-primary: var(--admin-color-text-primary);
    --el-text-color-regular: var(--admin-color-text-secondary);
    --el-text-color-secondary: var(--admin-color-text-muted);
    --el-text-color-placeholder: var(--admin-color-text-light);
    
    --el-font-weight-primary: var(--admin-font-weight-medium);
    
    --el-transition-duration: var(--admin-transition-normal);
    --el-transition-duration-fast: var(--admin-transition-fast);
    
    /* ==================== 语义化变量层 (Semantic Tokens) ==================== */
    
    /* 按钮语义 */
    --button-primary-bg: var(--admin-gradient-primary);
    --button-primary-bg-hover: var(--admin-gradient-primary-hover);
    --button-primary-shadow: var(--admin-shadow-button-primary);
    --button-primary-shadow-hover: var(--admin-shadow-button-primary-hover);
    --button-danger-bg: var(--admin-gradient-danger);
    --button-danger-shadow: var(--admin-shadow-button-danger);
    
    /* 表单语义 */
    --input-bg: var(--admin-color-bg-light);
    --input-bg-focus: var(--admin-color-bg-white);
    --input-border: var(--admin-color-border);
    --input-border-focus: var(--admin-color-primary);
    --input-height: var(--admin-height-xl);
    --input-radius: var(--admin-radius-md);
    
    /* 卡片语义 */
    --card-bg: var(--admin-color-bg-white);
    --card-shadow: var(--admin-shadow-card);
    --card-radius: var(--admin-radius-2xl);
    --card-border: var(--admin-color-border-light);
    
    /* 弹窗语义 */
    --dialog-bg: var(--admin-color-bg-white);
    --dialog-shadow: var(--admin-shadow-dialog);
    --dialog-radius: 15px;
    --dialog-header-padding: var(--admin-spacing-xl) var(--admin-spacing-2xl);
    
    /* 侧边栏语义 */
    --sidebar-bg: var(--admin-color-bg-white);
    --sidebar-width: var(--admin-width-sidebar);
    --sidebar-border: var(--admin-color-border-light);
    
    /* 菜单语义 */
    --menu-item-height: var(--admin-height-menu-item);
    --menu-item-radius: var(--admin-radius-lg);
    --menu-item-color: var(--admin-color-text-muted);
    --menu-item-active-bg: var(--admin-color-primary-lighter);
    --menu-item-active-color: var(--admin-color-primary);
    
    /* 头部语义 */
    --header-height: var(--admin-height-header);
    --header-bg: rgba(255, 255, 255, 0.85);
    
    /* 表格语义 */
    --table-header-bg: var(--admin-color-bg-light);
    --table-border: var(--admin-color-border-light);
    
    /* 登录页语义 */
    --login-bg: var(--admin-gradient-login-bg);
    --login-card-shadow: var(--admin-shadow-login-card);
    
    /* ==================== 组件令牌 (Component Tokens) ==================== */
    
    /* 标签组件 */
    --tag-free-bg: var(--admin-color-text-light);
    --tag-premium-bg: var(--admin-color-primary);
    --tag-vip-bg: var(--admin-color-blue-700);
    --tag-exclusive-bg: var(--admin-color-emerald-600);
    --tag-quarterly-bg: var(--admin-color-cyan-600);
    --tag-monthly-bg: var(--admin-color-pink-600);
    --tag-permanent-bg: var(--admin-color-orange-600);
    --tag-weekly-bg: var(--admin-color-primary-light);
    
    /* 消息框组件 */
    --message-box-title-color: var(--admin-color-black);
    --message-box-icon-color: var(--admin-color-amber-400);
    --message-box-content-color: var(--admin-color-text-secondary);
}

/* ==================== 浏览器基础重置 ==================== */
@layer reset {
    body {
        background-color: var(--admin-color-bg-light);
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        margin: 0;
        width: 100%;
        overflow-x: hidden;
    }
}

/* ==================== 全局强制覆盖（layer 外优先级最高） ==================== */
/* [v-cloak] 必须在 layer 外才能覆盖 Vue 组件的 display */
[v-cloak] {
    display: none;
}