/* ===================================
   CSS 变量定义
   =================================== */

:root {
  /* 主题色 */
  --color-primary: #3498db;
  --color-primary-dark: #2980b9;
  --color-primary-light: #5dade2;
  
  --color-success: #5cb85c;
  --color-success-dark: #4cae4c;
  --color-success-darker: #449d44;
  
  --color-danger: #d9534f;
  --color-danger-dark: #d43f3a;
  --color-danger-darker: #c9302c;
  
  --color-warning: #f0ad4e;
  --color-warning-dark: #eb9316;
  
  --color-info: #17a2b8;
  --color-info-dark: #149ddd;
  
  --color-purple: #9b59b6;
  --color-purple-dark: #8e44ad;
  
  /* 灰色系 */
  --color-gray-100: #f8fafc;
  --color-gray-200: #f4f7f9;
  --color-gray-300: #e2e8f0;
  --color-gray-400: #cbd5e0;
  --color-gray-500: #a0aec0;
  --color-gray-600: #718096;
  --color-gray-700: #4a5568;
  --color-gray-800: #2d3748;
  --color-gray-900: #1a202c;
  
  /* 文本色 */
  --text-primary: #333;
  --text-secondary: #777;
  --text-heading: #2c3e50;
  --text-muted: #aaa;
  
  /* 间距 */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 25px;
  
  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 50%;
  
  /* 阴影 */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 16px rgba(0,0,0,0.12);
  
  /* 过渡 */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* 亮色主题变量（默认） */
body {
  --text-color: #1a202c;
  --bg-color: #f8fafc;
  --card-bg-color: #ffffff;
  --shadow-color: rgba(0,0,0,0.08);
  --border-color: #e2e8f0;
  --input-bg-color: #f9fafc;
  --input-border-color: #e0e6ed;
  --button-primary-bg: linear-gradient(135deg, #4cae4c 0%, #5cb85c 100%);
  --button-hover-bg: linear-gradient(135deg, #449d44 0%, #5cb85c 100%);
}

/* 暗色主题变量 */
body.dark-mode {
  --text-color: #e2e8f0;
  --bg-color: #1a202c;
  --card-bg-color: #2d3748;
  --shadow-color: rgba(0,0,0,0.3);
  --border-color: #4a5568;
  --input-bg-color: #2d3748;
  --input-border-color: #4a5568;
  --button-primary-bg: linear-gradient(135deg, #38a169 0%, #48bb78 100%);
  --button-hover-bg: linear-gradient(135deg, #2f855a 0%, #48bb78 100%);
  color: var(--text-color);
  background-color: var(--bg-color);
}