@charset "UTF-8";
/**
 * =====================================================
 * 设计系统变量 - Design System Variables
 * =====================================================
 * 统一管理颜色、间距、圆角、阴影等设计令牌
 * 使用方式: var(--color-primary)
 */

/* ========== 主色调 ========== */
:root {
    /* 主色 - 品牌蓝 */
    --color-primary: #2386ee;
    --color-primary-dark: #1a6dd6;
    --color-primary-light: #4f8dfb;
    --color-primary-hover: #0056b3;
    
    /* 主色调渐变 */
    --gradient-primary: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    --gradient-primary-hover: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
    
    /* 辅助色 */
    --color-success: #28a745;
    --color-success-dark: #1e7e34;
    --color-warning: #ffc107;
    --color-warning-dark: #d39e00;
    --color-danger: #dc3545;
    --color-danger-dark: #c82333;
    
    /* 中性色 - 文字 */
    --color-text-primary: #1d2433;
    --color-text-secondary: #636c7b;
    --color-text-muted: #697181;
    --color-text-inverse: #ffffff;
    
    /* 中性色 - 背景 */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f5f7fd;
    --color-bg-tertiary: #f6f9e7;
    --color-bg-dark: #0f172a;
    
    /* 边框色 */
    --color-border: #e9edf5;
    --color-border-light: #EBEEF5;
    --color-border-dark: #d1d5db;
    
    /* 图标/线框色 */
    --color-icon: #697181;
    
    /* ========== 圆角系统 ========== */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-2xl: 28px;
    --radius-pill: 100px;
    --radius-full: 9999px;
    
    /* ========== 阴影系统 ========== */
    --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 10px 24px rgba(24, 39, 75, 0.08);
    --shadow-lg: 0 18px 34px rgba(24, 39, 75, 0.12);
    --shadow-xl: 0 24px 48px rgba(24, 39, 75, 0.16);
    --shadow-primary: 0 14px 30px rgba(37, 99, 235, 0.24);
    --shadow-primary-hover: 0 18px 36px rgba(37, 99, 235, 0.34);
    
    /* ========== 间距系统 ========== */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 28px;
    --space-3xl: 32px;
    --space-4xl: 40px;
    --space-5xl: 48px;
    
    /* ========== 导航相关 ========== */
    --nav-height: 80px;
    --nav-sticky-top: 150px;
    --nav-dropdown-top: 80px;
    --nav-link-font-size: 1.25rem;
    --nav-underline-height: 4px;
    
    /* ========== 过渡动画 ========== */
    --transition-fast: 0.18s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.3s ease;
    --transition-bounce: 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
    
    /* ========== 字体 ========== */
    --font-family: "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;
    --font-size-4xl: 32px;
    --font-size-5xl: 36px;
    
    /* ========== 组件尺寸 ========== */
    --btn-height-sm: 32px;
    --btn-height-md: 40px;
    --btn-height-lg: 50px;
    --btn-padding-x: 26px;
    
    /* Logo尺寸 */
    --logo-width-sm: 100px;
    --logo-width-lg: 140px;
    
    /* ========== Z-Index层级 ========== */
    --z-dropdown: 100;
    --z-sticky: 1000;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ========== 暗黑模式变量（预留） ========== */
@media (prefers-color-scheme: dark) {
    :root {
        /* 可根据需要启用暗黑模式 */
    }
}