/**
 * CSS变量统一定义文件
 * 陕西大模智能科技有限公司
 * 
 * 功能说明：
 * 1. 统一管理所有CSS变量，避免重复定义
 * 2. 提供主题色彩、间距、字体等设计系统变量
 * 3. 支持深色模式切换
 */

:root {
    /* 主色调 */
    --primary-color: #4facfe;
    --primary-dark: #2196f3;
    --primary-light: #3b82f6;
    --secondary-color: #00f2fe;
    --accent-color: #667eea;
    --accent-secondary: #764ba2;
    
    /* 功能色彩 */
    --success-color: #28a745;
    --warning-color: #ffc107;
    --error-color: #dc3545;
    --info-color: #17a2b8;
    
    /* 透明度颜色 */
    --accent-alpha-05: rgba(102, 126, 234, 0.05);
    --accent-alpha-1: rgba(102, 126, 234, 0.1);
    --accent-alpha-15: rgba(102, 126, 234, 0.15);
    --accent-alpha-2: rgba(102, 126, 234, 0.2);
    --accent-alpha-3: rgba(102, 126, 234, 0.3);
    --accent-alpha-4: rgba(102, 126, 234, 0.4);
    --accent-secondary-alpha-1: rgba(118, 75, 162, 0.1);
    
    /* 文本颜色 */
    --text-primary: #2c3e50;
    --text-primary-dark: #1a252f;
    --text-secondary: #6c757d;
    --text-light: #95a5a6;
    --text-white: #ffffff;
    
    /* 灰色系 */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* 背景颜色 */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --bg-dark: #2c3e50;
    
    /* 渐变色 */
    --gradient-primary: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-secondary) 100%);
    --gradient-horizontal: linear-gradient(90deg, var(--accent-color), var(--accent-secondary), var(--accent-color));
    --gradient-main: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    
    /* 阴影 */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    
    /* 间距 */
    --spacing-xs: 0.25rem;  /* 4px */
    --spacing-sm: 0.5rem;   /* 8px */
    --spacing-md: 1rem;     /* 16px */
    --spacing-lg: 1.5rem;   /* 24px */
    --spacing-xl: 2rem;     /* 32px */
    --spacing-2xl: 3rem;    /* 48px */
    
    /* 字体 */
    --font-family: 'Microsoft YaHei', 'PingFang SC', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 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: 1.875rem; /* 30px */
    
    /* 行高 */
    --line-height: 1.6;
    --line-height-tight: 1.25;
    --line-height-relaxed: 1.75;
    
    /* 过渡动画 */
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;
    
    /* 圆角 */
    --radius-sm: 0.375rem;  /* 6px */
    --radius: 0.5rem;       /* 8px */
    --radius-md: 0.75rem;   /* 12px */
    --radius-lg: 1rem;      /* 16px */
    --radius-xl: 1.5rem;    /* 24px */
    --radius-2xl: 2rem;     /* 32px */
    
    /* 容器宽度变量 - 统一管理 */
    --container-width-xs: 480px;
    --container-width-sm: 768px;
    --container-width-md: 1024px;
    --container-width-lg: 1200px;
    --container-width-xl: 1400px;
    --container-width-2xl: 1600px;
    --container-width-full: 100%;
    --container-max-width: var(--container-width-lg);
    
    /* 响应式断点标准化 */
    --breakpoint-xs: 480px;
    --breakpoint-sm: 768px;
    --breakpoint-md: 1024px;
    --breakpoint-lg: 1200px;
    --breakpoint-xl: 1400px;
    
    /* 模块特定变量 - 统一管理，避免重复定义 */
    --module-gap: var(--spacing-xl);
    --module-gap-sm: var(--spacing-md);
    --module-radius: var(--radius-xl);
    --module-radius-sm: var(--radius-md);
    --module-radius-xs: var(--radius-sm);
    --module-shadow: var(--shadow-xl);
    --module-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.15);
    --module-shadow-sm: var(--shadow-md);
    --module-bg: var(--bg-primary);
    --module-bg-secondary: var(--bg-secondary);
    --module-bg-tertiary: var(--bg-tertiary);
    --module-border: 1px solid rgba(255, 255, 255, 0.2);
    --module-border-light: 1px solid #e5e7eb;
    --module-border-dark: 1px solid #d1d5db;
    --module-transition: var(--transition-normal);
    --module-transition-fast: var(--transition-fast);
    --module-transition-slow: var(--transition-slow);
    
    /* Z-index层级 */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
    :root {
        --text-primary: #ffffff;
        --text-secondary: #b0b0b0;
        --text-light: #888888;
        
        --bg-primary: #1a1a1a;
        --bg-secondary: #2d2d2d;
        --bg-tertiary: #404040;
        
        --module-bg: rgba(30, 30, 30, 0.95);
        --module-bg-secondary: #2d2d2d;
        --module-bg-tertiary: #404040;
        --module-border-light: 1px solid #404040;
        --module-border-dark: 1px solid #666;
        
        --shadow-sm: 0 1px 2px 0 rgb(255 255 255 / 0.05);
        --shadow: 0 1px 3px 0 rgb(255 255 255 / 0.1), 0 1px 2px -1px rgb(255 255 255 / 0.1);
        --shadow-md: 0 4px 6px -1px rgb(255 255 255 / 0.1), 0 2px 4px -2px rgb(255 255 255 / 0.1);
        --shadow-lg: 0 10px 15px -3px rgb(255 255 255 / 0.1), 0 4px 6px -4px rgb(255 255 255 / 0.1);
        --shadow-xl: 0 20px 25px -5px rgb(255 255 255 / 0.1), 0 8px 10px -6px rgb(255 255 255 / 0.1);
    }
}

/* 强制深色模式类 */
.dark-mode {
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-light: #888888;
    
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #404040;
    
    --module-bg: rgba(30, 30, 30, 0.95);
    --module-bg-secondary: #2d2d2d;
    --module-bg-tertiary: #404040;
    --module-border-light: 1px solid #404040;
    --module-border-dark: 1px solid #666;
}

/* 强制浅色模式类 */
.light-mode {
    --text-primary: #2c3e50;
    --text-secondary: #6c757d;
    --text-light: #95a5a6;
    
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    
    --module-bg: rgba(255, 255, 255, 0.95);
    --module-bg-secondary: #f8f9fa;
    --module-bg-tertiary: #e9ecef;
    --module-border-light: 1px solid #e5e7eb;
    --module-border-dark: 1px solid #d1d5db;
}