/* 全局CSS变量 */
:root {
    /* 基础色彩 - 中文模式 */
    --color-primary: #0071e3;
    --color-primary-dark: #0058b0;
    --color-primary-light: #4c98ed;
    --color-primary-transparent: rgba(0, 113, 227, 0.1);
    
    --color-accent: #5e5ce6;
    --color-accent-dark: #4542b8;
    --color-accent-light: #7a78ed;
    
    --color-text: #1d1d1f;
    --color-text-light: #86868b;
    --color-heading: #1d1d1f;
    
    --color-background: #f5f7fa;
    --color-background-light: #ffffff;
    --color-border: #e5e5e5;
    
    /* 辅助色彩 */
    --color-success: #34c759;
    --color-warning: #ff9d0a;
    --color-danger: #ff3b30;
    --color-info: #5ac8fa;
    
    /* 全局阴影 */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    
    /* 圆角 */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    
    /* 间距 */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-xxl: 64px;
    
    /* 过渡 */
    --transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}

/* 英文模式下的样式调整 */
html[lang="en"] {
    --color-primary: #1976D2;
    --color-primary-dark: #0D47A1;
    --color-primary-light: #42A5F5;
    --color-primary-transparent: rgba(25, 118, 210, 0.1);
    
    --color-accent: #7E57C2;
    --color-accent-dark: #5E35B1;
    --color-accent-light: #9575CD;
}

/* 暗色模式 */
@media (prefers-color-scheme: dark) {
    :root {
        --color-primary: #0a84ff;
        --color-primary-dark: #0067cc;
        --color-primary-light: #5eacff;
        --color-primary-transparent: rgba(10, 132, 255, 0.15);
        
        --color-accent: #bf5af2;
        --color-accent-dark: #9d3dc8;
        --color-accent-light: #d285f5;
        
        --color-text: #f5f5f7;
        --color-text-light: #a1a1a6;
        --color-heading: #ffffff;
        
        --color-background: #121212;
        --color-background-light: #1e1e1e;
        --color-border: #2c2c2e;
    }
    
    /* 英文模式下的暗色调整 */
    html[lang="en"] {
        --color-primary: #90CAF9;
        --color-primary-dark: #64B5F6;
        --color-primary-light: #BBDEFB;
        --color-primary-transparent: rgba(144, 202, 249, 0.15);
        
        --color-accent: #CE93D8;
        --color-accent-dark: #BA68C8;
        --color-accent-light: #E1BEE7;
    }
}