/* ===========================================================
   全局CSS变量定义
   集中管理所有颜色、字体、尺寸等变量
   ========================================================= */

:root {
  /* ===== 主题颜色 ===== */
  --primary-color: #667eea;
  --secondary-color: #764ba2;
  --success-color: #43e97b;
  --info-color: #38f9d7;
  --warning-color: #f093fb;
  --danger-color: #f5576c;
  --accent-color: #3498db;
  
  /* ===== 中性色彩 ===== */
  --white-color: #ffffff;
  --light-color: #f8f9fa;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  --dark-color: #2c3e50;
  
  /* ===== 背景色 ===== */
  --bg-main: #f8f9fa;
  --bg-secondary: #ffffff;
  --bg-dark: #181c24;
  --bg-card: #ffffff;
  --bg-card-dark: #232a36;
  
  /* ===== 卡片相关 ===== */
  --card-bg: rgba(255,255,255,0.9);
  --card-shadow: 0 4px 16px rgba(102,126,234,0.08);
  --card-hover-shadow: 0 8px 32px rgba(16,163,111,0.10), 0 1.5px 6px 0 rgba(0,0,0,0.04);
  
  /* ===== 文本颜色 ===== */
  --text-main: #2c3e50;
  --text-secondary: #6c757d;
  --text-muted: #a0aec0;
  --text-white: #ffffff;
  --text-main-dark: #e0e6ed;
  --text-secondary-dark: #a0aec0;
  
  /* ===== 边框颜色 ===== */
  --border-light: rgba(0, 0, 0, 0.08);
  --border-medium: #dee2e6;
  --border-dark: #232a36;
  --border-color: rgba(0,0,0,0.1);
  
  /* ===== 阴影 ===== */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 16px rgba(102, 126, 234, 0.08);
  --shadow-lg: 0 8px 32px rgba(102, 126, 234, 0.16);
  --shadow-xl: 0 20px 60px rgba(102, 126, 234, 0.25);
  --shadow-dark: 0 4px 16px rgba(0, 0, 0, 0.4);
  
  /* ===== 渐变色 ===== */
  --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  --gradient-success: linear-gradient(135deg, var(--success-color) 0%, var(--info-color) 100%);
  --gradient-warning: linear-gradient(135deg, var(--warning-color) 0%, var(--danger-color) 100%);
  --gradient-header: linear-gradient(135deg, #3a6073, #16222a);
  
  /* ===== 字体 ===== */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  
  /* ===== 字体大小 ===== */
  --font-size-xs: 0.75rem;
  --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: 2rem;
  --font-size-4xl: 2.5rem;
  --font-size-5xl: 3rem;
  
  /* ===== 行高 ===== */
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* ===== 间距 ===== */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  
  /* ===== 圆角 ===== */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;
  
  /* ===== 过渡动画 ===== */
  --transition-fast: all 0.15s ease-in-out;
  --transition-normal: all 0.3s ease-in-out;
  --transition-slow: all 0.5s ease-in-out;
  
  /* ===== Z-index层级 ===== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
}

/* ===== 深色主题 ===== */
[data-theme="dark"] {
  --bg-main: #181c24;
  --bg-secondary: #232a36;
  --bg-card: #232a36;
  --card-bg: rgba(30,36,46,0.98);
  --card-shadow: 0 4px 16px rgba(0,0,0,0.4);
  --card-hover-shadow: 0 8px 32px rgba(127,255,167,0.10), 0 1.5px 6px 0 rgba(255,255,255,0.04);
  --text-main: #f0f4f8;
  --text-secondary: #cbd5e0;
  --text-muted: #a0aec0;
  --border-light: rgba(255, 255, 255, 0.08);
  --border-medium: #232a36;
  --border-color: rgba(255,255,255,0.1);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
}

/* ===== 高对比度主题 ===== */
@media (prefers-contrast: high) {
  :root {
    --primary-color: #0000ff;
    --secondary-color: #800080;
    --text-main: #000000;
    --bg-main: #ffffff;
    --border-medium: #000000;
  }
}

/* ===== 减少动画偏好 ===== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: none;
    --transition-normal: none;
    --transition-slow: none;
  }
}