/**
 * 多维国际教育 - CSS变量配置
 * Design Variables Configuration
 */

:root {
    /* ========== 品牌颜色 Brand Colors ========== */
    --primary-color: #E74C4C;           /* 主品牌色 - 红色 */
    --primary-dark: #c44040;            /* 主色调 - 深色 */
    --primary-light: #ff6b6b;           /* 主色调 - 浅色 */
    
    --secondary-color: #2C3E50;         /* 辅助色 - 深蓝灰 */
    --secondary-dark: #1A1A1A;          /* 辅助色 - 更深 */
    --secondary-light: #34495E;         /* 辅助色 - 浅色 */
    
    --accent-color: #F39C12;            /* 强调色 - 金色 */
    
    /* ========== 背景颜色 Background Colors ========== */
    --bg-white: #FFFFFF;
    --bg-light: #F8F9FA;
    --bg-dark: #1A1A1A;
    --bg-gradient-start: var(--primary-color);
    --bg-gradient-end: var(--primary-dark);
    
    /* ========== 文字颜色 Text Colors ========== */
    --text-dark: #2C3E50;
    --text-light: #666666;
    --text-white: #FFFFFF;
    --text-muted: #999999;
    
    /* ========== 边框和阴影 Borders & Shadows ========== */
    --border-color: #e0e0e0;
    --border-radius-sm: 10px;
    --border-radius-md: 15px;
    --border-radius-lg: 20px;
    --border-radius-xl: 50px;
    
    --shadow-sm: 0 2px 10px rgba(0,0,0,0.08);
    --shadow-md: 0 5px 20px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.15);
    --shadow-xl: 0 15px 50px rgba(0,0,0,0.2);
    
    /* ========== 字体 Typography ========== */
    --font-family-base: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
    --font-family-en: 'Helvetica Neue', Arial, sans-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: 2rem;        /* 32px */
    --font-size-4xl: 2.5rem;      /* 40px */
    --font-size-5xl: 3.5rem;      /* 56px */
    
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.2;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;
    
    /* ========== 间距 Spacing ========== */
    --spacing-xs: 0.5rem;         /* 8px */
    --spacing-sm: 1rem;           /* 16px */
    --spacing-md: 1.5rem;         /* 24px */
    --spacing-lg: 2rem;           /* 32px */
    --spacing-xl: 3rem;           /* 48px */
    --spacing-2xl: 4rem;          /* 64px */
    --spacing-3xl: 6rem;          /* 96px */
    
    /* ========== 容器宽度 Container Widths ========== */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1200px;
    --container-2xl: 1400px;
    
    /* ========== 过渡动画 Transitions ========== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.6s ease;
    
    /* ========== Z-index层级 Z-index Levels ========== */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    --z-index-progress: 9999;
}

/* ========== 暗色模式支持 Dark Mode Support ========== */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-white: #1A1A1A;
        --bg-light: #2C2C2C;
        --text-dark: #E0E0E0;
        --text-light: #B0B0B0;
    }
}