/**
 * 设计令牌系统 - WoW 主题
 * 统一管理颜色、间距、字体等设计变量
 */

:root {
    /* ==================== 颜色系统 ==================== */
    
    /* 品牌主色 - 金色系 */
    --color-primary: #f8d16c;
    --color-primary-light: #ffe9a9;
    --color-primary-dark: #c9a956;
    
    /* 次要色 - 棕色系 */
    --color-secondary: #e0c79f;
    --color-secondary-light: #f0dfc5;
    --color-secondary-dark: #c8a864;
    
    /* 背景色 - 深蓝色系 */
    --color-bg-primary: #0a101a;
    --color-bg-secondary: #141e2d;
    --color-bg-tertiary: #1e2c43;
    --color-bg-overlay: rgba(10, 16, 26, 0.9);
    --color-bg-card: rgba(20, 30, 45, 0.8);
    --color-bg-card-hover: rgba(30, 40, 55, 0.8);
    
    /* 文本色 */
    --color-text-primary: #e0c79f;
    --color-text-secondary: #a1885c;
    --color-text-tertiary: #8a7142;
    --color-text-inverse: #ffffff;
    
    /* 边框色 */
    --color-border-primary: #3d3223;
    --color-border-secondary: #634f2c;
    --color-border-accent: rgba(248, 209, 108, 0.4);
    --color-border-subtle: rgba(99, 79, 44, 0.3);
    
    /* 功能色 */
    --color-success: #00ff98;
    --color-warning: #ff9800;
    --color-error: #ff6b6b;
    --color-info: #3fc7eb;
    
    /* 评级颜色 - Tier 系统 */
    --color-tier-s: #f8d16c;
    --color-tier-s-bg: rgba(255, 215, 0, 0.15);
    --color-tier-s-border: #f8d16c;
    --color-tier-s-shadow: rgba(248, 209, 108, 0.7);
    
    --color-tier-a: #e0c79f;
    --color-tier-a-bg: rgba(224, 199, 159, 0.25);
    --color-tier-a-border: #e0c79f;
    --color-tier-a-shadow: rgba(224, 199, 159, 0.5);
    
    --color-tier-b: #c8a864;
    --color-tier-b-bg: rgba(200, 168, 100, 0.2);
    --color-tier-b-border: #c8a864;
    --color-tier-b-shadow: rgba(200, 168, 100, 0.4);
    
    --color-tier-c: #a1885c;
    --color-tier-c-bg: rgba(161, 136, 92, 0.2);
    --color-tier-c-border: #a1885c;
    --color-tier-c-shadow: rgba(161, 136, 92, 0.4);
    
    --color-tier-d: #8a7142;
    --color-tier-d-bg: rgba(138, 113, 66, 0.2);
    --color-tier-d-border: #8a7142;
    --color-tier-d-shadow: rgba(138, 113, 66, 0.3);
    
    --color-tier-e: #666666;
    --color-tier-e-bg: rgba(102, 102, 102, 0.2);
    --color-tier-e-border: #666666;
    --color-tier-e-shadow: rgba(102, 102, 102, 0.3);
    
    /* 职业颜色 */
    --color-class-deathknight: #c41e3a;
    --color-class-demonhunter: #a330c9;
    --color-class-druid: #ff7c0a;
    --color-class-evoker: #33937f;
    --color-class-hunter: #aad372;
    --color-class-mage: #3fc7eb;
    --color-class-monk: #00ff98;
    --color-class-paladin: #f48cba;
    --color-class-priest: #ffffff;
    --color-class-rogue: #fff468;
    --color-class-shaman: #0070dd;
    --color-class-warlock: #8788ee;
    --color-class-warrior: #c69b6d;
    
    /* ==================== 间距系统 ==================== */
    /* 基于 4px 网格系统 */
    --spacing-0: 0;
    --spacing-1: 0.25rem;  /* 4px */
    --spacing-2: 0.5rem;   /* 8px */
    --spacing-3: 0.75rem;  /* 12px */
    --spacing-4: 1rem;     /* 16px */
    --spacing-5: 1.25rem;  /* 20px */
    --spacing-6: 1.5rem;   /* 24px */
    --spacing-7: 1.75rem;  /* 28px */
    --spacing-8: 2rem;     /* 32px */
    --spacing-10: 2.5rem;  /* 40px */
    --spacing-12: 3rem;    /* 48px */
    --spacing-16: 4rem;    /* 64px */
    --spacing-20: 5rem;    /* 80px */
    --spacing-24: 6rem;    /* 96px */
    
    /* 语义化间距别名（向后兼容） */
    --spacing-xs: var(--spacing-2);   /* 8px */
    --spacing-sm: var(--spacing-3);   /* 12px */
    --spacing-md: var(--spacing-4);   /* 16px */
    --spacing-lg: var(--spacing-6);  /* 24px */
    --spacing-xl: var(--spacing-10);  /* 40px */
    
    /* ==================== 字体系统 ==================== */
    /* 字体家族 */
    --font-title: 'Cinzel Decorative', 'Cinzel', system-ui, -apple-system, serif;
    --font-subtitle: 'Cinzel', 'EB Garamond', system-ui, -apple-system, serif;
    --font-body: 'EB Garamond', system-ui, -apple-system, sans-serif;
    --font-accent: 'Grenze Gotisch', 'Metamorphous', system-ui, -apple-system, serif;
    
    /* 字体大小 */
    --font-size-xs: 0.75rem;   /* 12px */
    --font-size-sm: 0.875rem;  /* 14px */
    --font-size-base: 1rem;    /* 16px */
    --font-size-lg: 1.125rem;  /* 18px */
    --font-size-xl: 1.25rem;   /* 20px */
    --font-size-2xl: 1.5rem;   /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2rem;     /* 32px */
    --font-size-5xl: 2.5rem;   /* 40px */
    --font-size-6xl: 3.5rem;   /* 56px */
    
    /* 字重 */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    
    /* 行高 */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;
    --line-height-loose: 1.8;
    
    /* 字间距 */
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;
    
    /* ==================== 圆角系统 ==================== */
    --radius-sm: 0.25rem;  /* 4px */
    --radius-md: 0.5rem;   /* 8px */
    --radius-lg: 0.75rem;  /* 12px */
    --radius-xl: 1rem;     /* 16px */
    --radius-2xl: 1.5rem;  /* 24px */
    --radius-full: 9999px;
    
    /* ==================== 阴影系统 ==================== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
    --shadow-glow: 0 0 15px rgba(248, 209, 108, 0.5);
    --shadow-glow-strong: 0 0 30px rgba(248, 209, 108, 0.7);
    
    /* WoW 风格阴影 */
    --shadow-wow-card: 0 5px 15px rgba(0, 0, 0, 0.3);
    --shadow-wow-card-hover: 0 15px 30px rgba(0, 0, 0, 0.4);
    --shadow-wow-text: 0 0 10px rgba(0, 0, 0, 0.8);
    --shadow-wow-text-strong: 0 0 15px rgba(0, 0, 0, 0.9);
    
    /* ==================== 过渡/动画 ==================== */
    --transition-fast: 150ms;
    --transition-base: 300ms;
    --transition-normal: var(--transition-base);  /* 300ms - 语义化别名 */
    --transition-slow: 500ms;
    --transition-slower: 800ms;
    
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ==================== 尺寸系统 ==================== */
    /* 容器宽度 */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1200px;
    --container-2xl: 1400px;
    
    /* Z-index 层级 */
    --z-dropdown: 10;
    --z-sticky: 100;
    --z-fixed: 1000;
    --z-modal-backdrop: 9000;
    --z-modal: 9999;
    --z-tooltip: 10000;
    
    /* 图标尺寸 */
    --icon-xs: 1rem;      /* 16px */
    --icon-sm: 1.5rem;    /* 24px */
    --icon-md: 2rem;      /* 32px */
    --icon-lg: 2.75rem;   /* 44px */
    --icon-xl: 3.5rem;    /* 56px */
    
    /* ==================== 断点系统（用于 JS） ==================== */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1200px;
}

/* ==================== 响应式断点 Mixins（注释说明） ==================== */
/* 
在 CSS 中使用媒体查询：

@media (max-width: 640px)  -> 小屏手机
@media (max-width: 768px)  -> 手机/平板竖屏
@media (max-width: 1024px) -> 平板横屏/小笔记本
@media (max-width: 1200px) -> 笔记本
@media (min-width: 1201px) -> 桌面
*/

/* ==================== 实用类 ==================== */

/* 文本颜色 */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-muted { color: var(--color-text-secondary); }

/* 背景色 */
.bg-card { background-color: var(--color-bg-card); }
.bg-overlay { background-color: var(--color-bg-overlay); }

/* 阴影 */
.shadow-glow { box-shadow: var(--shadow-glow); }
.shadow-card { box-shadow: var(--shadow-wow-card); }

/* 职业颜色类 */
.class-deathknight { color: var(--color-class-deathknight); }
.class-demonhunter { color: var(--color-class-demonhunter); }
.class-druid { color: var(--color-class-druid); }
.class-evoker { color: var(--color-class-evoker); }
.class-hunter { color: var(--color-class-hunter); }
.class-mage { color: var(--color-class-mage); }
.class-monk { color: var(--color-class-monk); }
.class-paladin { color: var(--color-class-paladin); }
.class-priest { color: var(--color-class-priest); }
.class-rogue { color: var(--color-class-rogue); }
.class-shaman { color: var(--color-class-shaman); }
.class-warlock { color: var(--color-class-warlock); }
.class-warrior { color: var(--color-class-warrior); }