/* ========================================
   Variables - 设计系统变量（经典简洁版）
   ======================================== */

:root {
  /* === 主色调 - 经典翡翠绿 === */
  --primary: #2d8659;           /* 经典翡翠绿 */
  --primary-light: #3ba36e;     /* 亮绿 */
  --primary-dark: #1f6b47;      /* 深绿 */
  --primary-pale: #e8f5ee;     /* 浅绿背景 */
  --primary-ultra: #f0f9f4;     /* 极浅绿 */
  
  --accent: #c9a84c;            /* 金色 - 强调色 */
  --accent-light: #ddbf6e;      /* 浅金 */
  --accent-pale: #fdf6e3;      /* 浅金背景 */
  
  /* 渐变 */
  --gradient-primary: linear-gradient(135deg, #2d8659 0%, #3ba36e 100%);
  --gradient-hero: linear-gradient(180deg, #ffffff 0%, #f8fcf9 100%);
  --gradient-warm: linear-gradient(180deg, #ffffff 0%, #fdfaf5 100%);
  --gradient-surface: linear-gradient(180deg, #ffffff 0%, #fafbf9 100%);
  
  /* === 文字颜色 === */
  --text-primary: #2c2c2c;      /* 深灰 - 主要文字 */
  --text-secondary: #5a5a5a;    /* 中灰 - 次要文字 */
  --text-muted: #8a8a8a;        /* 浅灰 - 辅助文字 */
  --text-light: #ffffff;        /* 白色文字 */
  --text-accent: #2d8659;       /* 绿色强调文字 */
  
  /* === 背景色 - 纯净白色 === */
  --bg-primary: #ffffff;        /* 主背景 */
  --bg-secondary: #f7f7f7;     /* 次要背景 */
  --bg-section: #f9fbf9;        /* 区块浅绿背景 */
  --bg-warm: #fefdf9;           /* 暖色区块背景 */
  --bg-card: #ffffff;           /* 卡片背景 */
  --bg-overlay: rgba(255, 255, 255, 0.98);
  
  /* === 表面色 === */
  --surface: #ffffff;
  --surface-alt: #f5f5f5;
  --surface-raised: #ffffff;
  
  /* === 边框颜色 === */
  --border: #e5e5e5;
  --border-light: #f0f0f0;
  --border-primary: #2d8659;
  --border-accent: #c9a84c;
  
  /* === 阴影 - 经典柔和 === */
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 36px rgba(0, 0, 0, 0.14);
  --shadow-glow: 0 4px 20px rgba(45, 134, 89, 0.15);
  
  /* === 发光效果 === */
  --glow-primary: 0 4px 16px rgba(45, 134, 89, 0.2);
  --glow-accent: 0 4px 16px rgba(201, 168, 76, 0.2);
  
  /* === 圆角 === */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;
  
  /* === 间距 === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  
  /* === 字体大小 === */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;
  --text-6xl: 60px;
  
  /* === 过渡 === */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);
  
  /* === 层级 === */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  
  /* === 容器 === */
  --container-max: 1200px;
  --container-padding: 24px;
}