/* 设计令牌（Design Tokens） */

/* 基础重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 亮色模式（默认） */
:root {
    /* 背景色 */
    --bg: #f8f9fa;
    --surface-1: #ffffff;
    --surface-2: #f5f7fa;
    
    /* 文本色 */
    --text-1: #333333;
    --text-2: #666666;
    --muted: #999999;
    
    /* 边框和阴影 */
    --border: #e1e5e9;
    --border-light: #f0f2f5;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
    
    /* 主色调 */
    --primary: #667eea;
    --primary-2: #764ba2;
    --primary-hover: #5a6fd8;
    
    /* 功能色 */
    --success: #45a049;
    --success-hover: #3d8b40;
    --danger: #e74c3c;
    --danger-rgb: 231, 76, 60;
    --danger-hover: #d33a2c;
    --warning: #f39c12;
    --warning-hover: #e67e22;
    
    /* 链接色 */
    --link: #667eea;
    --link-hover: #5a6fd8;
    
    /* 间距 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    
    /* 圆角 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 50%;
    
    /* 字体 */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    
    /* 行高 */
    --line-height-base: 1.6;
    --line-height-tight: 1.3;
    --line-height-relaxed: 1.8;
    
    /* 过渡 */
    --transition: all 0.2s ease;
    --transition-fast: all 0.15s ease;
    
    /* z-index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
}

/* 暗色模式 */
html[data-theme="dark"] {
    /* 背景色 */
    --bg: #1a1a1a;
    --surface-1: #2d3748;
    --surface-2: #4a5568;
    
    /* 文本色 */
    --text-1: #e2e8f0;
    --text-2: #a0aec0;
    --muted: #718096;
    
    /* 边框和阴影 */
    --border: #4a5568;
    --border-light: #2d3748;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
    
    /* 主色调 */
    --primary: #9f7aea;
    --primary-2: #667eea;
    --primary-hover: #805ad5;
    
    /* 功能色 */
    --success: #38a169;
    --success-hover: #2f855a;
    --danger: #e53e3e;
    --danger-rgb: 229, 62, 62;
    --danger-hover: #c53030;
    --warning: #dd6b20;
    --warning-hover: #c05621;
    
    /* 链接色 */
    --link: #9f7aea;
    --link-hover: #805ad5;
}

/* 禁用过渡动画（适用于 prefers-reduced-motion） */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition: none;
        --transition-fast: none;
    }
}

/* 首屏禁用动画 - 消除主题切换闪烁 */
.theme-preload, .theme-preload * {
    transition: none !important;
}