/* ========================================
   CSS 变量系统 - 水米田农业官网
   ======================================== */

:root {
  /* 品牌色系统 - 生态田园风🌾 */
  --primary-color: #2D5016;           /* 品牌主色：田野绿 */
  --primary-dark: #1E3810;            /* 主色深色：深绿护航 */
  --primary-light: #3D6B1F;           /* 主色浅色：嫩绿生机 */
  --primary-tint: rgba(45, 80, 22, 0.08); /* 主色浅背景 */
  
  --secondary-color: #8B4513;         /* 品牌辅色：土地棕 */
  --secondary-dark: #6B340F;          /* 辅色深色 */
  --secondary-light: #A0521A;         /* 辅色浅色 */
  --secondary-tint: rgba(139, 69, 19, 0.08);
  
  --accent-color: #FFD700;            /* 强调色：丰收金 */
  --accent-dark: #E5C100;             /* 强调深色 */
  --accent-light: #FFE44D;            /* 强调浅色 */
  
  /* 中性色系统 */
  --text-primary: #1a1c1a;            /* 主文本颜色 */
  --text-secondary: #4c5750;          /* 次文本颜色 */
  --text-muted: #6f7c74;              /* 说明文本 */
  --text-light: #95a29a;              /* 浅文本颜色 */
  
  --bg-primary: #ffffff;              /* 主背景 */
  --bg-secondary: #f5f7f6;            /* 次背景 */
  --bg-tertiary: #eef2f0;             /* 三级背景 */
  --bg-contrast: #0f1b13;             /* 高对比背景 */
  
  --border-color: #d9dedc;            /* 中性边框 */
  --border-light: #e7ece9;            /* 浅边框 */
  --border-strong: #bec9c3;           /* 强调边框 */
  
  --overlay-strong: rgba(15, 27, 19, 0.65);   /* 深色遮罩 */
  --overlay-light: rgba(15, 27, 19, 0.3);     /* 浅色遮罩 */
  
  --brand-gradient: linear-gradient(135deg, #155a38 0%, #1b6ac9 55%, #45a868 100%);
  --hero-gradient: radial-gradient(circle at top left, rgba(69, 168, 104, 0.25), transparent 55%), radial-gradient(circle at bottom right, rgba(27, 106, 201, 0.22), transparent 60%);
  --surface-elevated: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 247, 246, 0.98));
  --surface-glass: rgba(255, 255, 255, 0.78);
  
  /* 功能色 */
  --success-color: #2f9e44;
  --warning-color: #f7b733;
  --error-color: #e64646;
  --info-color: #1b6ac9;
  
  /* 字体系统 */
  --font-family-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-family-secondary: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  --font-family-mono: 'Courier New', Courier, monospace;
  
  --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: 34px;
  --font-size-5xl: 42px;
  --font-size-6xl: 52px;
  --font-size-7xl: 64px;
  
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.22;
  --line-height-normal: 1.58;
  --line-height-relaxed: 1.82;
  
  /* 间距系统 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;
  --spacing-4xl: 64px;
  --spacing-5xl: 80px;
  --spacing-6xl: 96px;
  
  /* 圆角系统 */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 9999px;
  
  /* 阴影系统 */
  --shadow-none: none;
  --shadow-sm: 0 8px 18px rgba(18, 52, 34, 0.08);
  --shadow-md: 0 12px 28px rgba(18, 52, 34, 0.12);
  --shadow-lg: 0 18px 42px rgba(15, 32, 25, 0.16);
  --shadow-xl: 0 30px 55px rgba(13, 28, 21, 0.18);
  --shadow-2xl: 0 45px 85px rgba(10, 22, 17, 0.22);
  
  /* 过渡效果 */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 240ms ease-in-out;
  --transition-slow: 420ms ease;
  
  /* 响应式断点 */
  --breakpoint-xs: 320px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;
  
  /* 容器宽度 */
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1200px;
  --container-2xl: 1360px;
  
  /* Z-index 层级 */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
}

/* 深色模式支持 (可选) */
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #FFFFFF;
    --text-secondary: #CCCCCC;
    --text-light: #999999;
    
    --bg-primary: #1A1A1A;
    --bg-secondary: #2A2A2A;
    --bg-tertiary: #3A3A3A;
    
    --border-color: #444444;
    --border-light: #333333;
  }
}