/* CSS变量系统 - 网站现代化改造 */
:root {
  /* ========== 颜色系统 ========== */
  
  /* 主色调 - 绿色系 (品牌色) */
  --color-primary: #4CAF50;
  --color-primary-dark: #388E3C;
  --color-primary-light: #C8E6C9;
  --color-primary-rgb: 76, 175, 80;
  
  /* 辅助色 - 深蓝色系 */
  --color-secondary: #2c3e50;
  --color-secondary-dark: #1a252f;
  --color-secondary-light: #546E7A;
  --color-secondary-rgb: 44, 62, 80;
  
  /* 文本颜色 */
  --color-text: #333333;
  --color-text-light: #666666;
  --color-text-lighter: #999999;
  --color-text-inverse: #ffffff;
  --color-text-muted: #6c757d;
  
  /* 背景颜色 */
  --color-bg: #ffffff;
  --color-bg-light: #f5f5f5;
  --color-bg-dark: #f0f0f0;
  --color-bg-darker: #e9ecef;
  
  /* 边框颜色 */
  --color-border: #e0e0e0;
  --color-border-light: #eeeeee;
  --color-border-dark: #cccccc;
  --color-border-input: #ced4da;
  
  /* 功能颜色 */
  --color-success: #4CAF50;
  --color-success-light: #d4edda;
  --color-success-dark: #155724;
  
  --color-warning: #FF9800;
  --color-warning-light: #fff3cd;
  --color-warning-dark: #856404;
  
  --color-error: #F44336;
  --color-error-light: #f8d7da;
  --color-error-dark: #721c24;
  
  --color-info: #2196F3;
  --color-info-light: #d1ecf1;
  --color-info-dark: #0c5460;
  
  /* 链接颜色 */
  --color-link: #007bff;
  --color-link-hover: #0056b3;
  --color-link-visited: #6610f2;
  
  /* ========== 字体系统 ========== */
  
  /* 字体家族 */
  --font-family-base: 'Source Sans Pro', 'Microsoft YaHei', '微软雅黑', sans-serif;
  --font-family-heading: 'Source Sans Pro', 'Microsoft YaHei', '微软雅黑', sans-serif;
  --font-family-code: 'Courier New', Consolas, Monaco, monospace;
  --font-family-serif: Georgia, 'Times New Roman', Times, serif;
  
  /* 字体大小 - 移动端优先 */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-md: 1.125rem;   /* 18px */
  --font-size-lg: 1.25rem;    /* 20px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-xxl: 2rem;      /* 32px */
  --font-size-xxxl: 2.5rem;   /* 40px */
  
  /* 字体粗细 */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  
  /* 行高 */
  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-loose: 1.8;
  --line-height-heading: 1.3;
  
  /* ========== 间距系统 ========== */
  
  /* 基础间距单位 */
  --spacing-unit: 0.5rem; /* 8px */
  
  /* 间距尺寸 */
  --spacing-xxs: calc(var(--spacing-unit) * 0.25); /* 2px */
  --spacing-xs: calc(var(--spacing-unit) * 0.5);   /* 4px */
  --spacing-sm: calc(var(--spacing-unit) * 1);     /* 8px */
  --spacing-md: calc(var(--spacing-unit) * 1.5);   /* 12px */
  --spacing-base: calc(var(--spacing-unit) * 2);   /* 16px */
  --spacing-lg: calc(var(--spacing-unit) * 3);     /* 24px */
  --spacing-xl: calc(var(--spacing-unit) * 4);     /* 32px */
  --spacing-xxl: calc(var(--spacing-unit) * 6);    /* 48px */
  --spacing-xxxl: calc(var(--spacing-unit) * 8);   /* 64px */
  
  /* 容器内边距 */
  --container-padding-sm: var(--spacing-base);
  --container-padding-md: var(--spacing-lg);
  --container-padding-lg: var(--spacing-xl);
  
  /* ========== 布局系统 ========== */
  
  /* 容器宽度 */
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-fluid: 100%;
  
  /* 栅格间隙 */
  --grid-gap-sm: var(--spacing-sm);
  --grid-gap-md: var(--spacing-base);
  --grid-gap-lg: var(--spacing-lg);
  
  /* ========== 响应式断点 ========== */
  
  /* 断点值 */
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;
  
  /* 媒体查询字符串 */
  --media-sm: (min-width: 576px);
  --media-md: (min-width: 768px);
  --media-lg: (min-width: 992px);
  --media-xl: (min-width: 1200px);
  --media-xxl: (min-width: 1400px);
  
  /* ========== 边框半径 ========== */
  
  --border-radius-sm: 0.125rem;  /* 2px */
  --border-radius: 0.25rem;      /* 4px */
  --border-radius-md: 0.375rem;  /* 6px */
  --border-radius-lg: 0.5rem;    /* 8px */
  --border-radius-xl: 1rem;      /* 16px */
  --border-radius-pill: 50rem;   /* 圆形 */
  
  /* ========== 阴影系统 ========== */
  
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-md: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 1rem 2rem rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 1.5rem 3rem rgba(0, 0, 0, 0.2);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  
  /* ========== 过渡动画 ========== */
  
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-bounce: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* ========== Z-index 层级 ========== */
  
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
  --z-index-toast: 1080;
  
  /* ========== 组件特定变量 ========== */
  
  /* 导航栏 */
  --navbar-height: 60px;
  --navbar-bg: var(--color-bg);
  --navbar-color: var(--color-text);
  
  /* 页脚 */
  --footer-bg: var(--color-secondary);
  --footer-color: var(--color-text-inverse);
  
  /* 按钮 */
  --btn-padding-y: 0.375rem;
  --btn-padding-x: 0.75rem;
  --btn-font-size: var(--font-size-base);
  --btn-line-height: var(--line-height-base);
  --btn-border-radius: var(--border-radius);
  
  /* 卡片 */
  --card-bg: var(--color-bg);
  --card-border-color: var(--color-border);
  --card-border-radius: var(--border-radius);
  --card-padding: var(--spacing-base);
  --card-shadow: var(--shadow-sm);
  
  /* 表单 */
  --input-height: 2.375rem;
  --input-padding-y: 0.375rem;
  --input-padding-x: 0.75rem;
  --input-bg: var(--color-bg);
  --input-border-color: var(--color-border-input);
  --input-border-radius: var(--border-radius);
  
  /* 表格 */
  --table-cell-padding: 0.75rem;
  --table-border-color: var(--color-border);
  --table-striped-bg: rgba(0, 0, 0, 0.02);
  
  /* ========== 主题变量 ========== */
  
  /* 明亮主题 (默认) */
  --theme-bg: var(--color-bg);
  --theme-text: var(--color-text);
  --theme-primary: var(--color-primary);
  --theme-secondary: var(--color-secondary);
  
  /* 暗黑主题 */
  @media (prefers-color-scheme: dark) {
    --theme-bg: #1a1a1a;
    --theme-text: #f0f0f0;
    --theme-primary: #66bb6a;
    --theme-secondary: #37474f;
  }
}

/* ========== 工具类变量 ========== */

/* 间距工具类 */
:root {
  --spacing-0: 0;
  --spacing-1: var(--spacing-xs);
  --spacing-2: var(--spacing-sm);
  --spacing-3: var(--spacing-base);
  --spacing-4: var(--spacing-lg);
  --spacing-5: var(--spacing-xl);
  --spacing-6: var(--spacing-xxl);
}

/* 字体大小工具类 */
:root {
  --text-xs: var(--font-size-xs);
  --text-sm: var(--font-size-sm);
  --text-base: var(--font-size-base);
  --text-lg: var(--font-size-lg);
  --text-xl: var(--font-size-xl);
  --text-2xl: var(--font-size-xxl);
  --text-3xl: var(--font-size-xxxl);
}

/* 响应式变量 - 在媒体查询中更新 */
@media (min-width: 768px) {
  :root {
    --font-size-base: 1.125rem; /* 18px on tablets */
    --container-padding-sm: var(--spacing-lg);
  }
}

@media (min-width: 992px) {
  :root {
    --font-size-base: 1.25rem; /* 20px on desktop */
    --container-padding-sm: var(--spacing-xl);
  }
}

/* 打印样式变量 */
@media print {
  :root {
    --color-bg: #ffffff !important;
    --color-text: #000000 !important;
    --color-primary: #000000 !important;
    --shadow: none !important;
  }
}