/* ========================================
   variables.css — 设计令牌（Design Tokens）
   作用：集中管理所有设计变量，全站通过 var() 引用，禁止硬编码
   修改主题色/间距/字号只需改这里，全站自动生效
   ======================================== */

:root {
  /* ===== 颜色 — 绿色主题 =====
     primary:       主绿色，用于品牌色、CTA 按钮、重要交互
     primary-dark:  深绿色，用于 hover 态、页脚背景、CTA 渐变
     primary-light: 浅绿色，用于卡片底色、hover 背景、图标圆圈
     secondary:     辅助绿色，用于次要元素
     accent:        金色点缀，用于副标题、标签、暖色 CTA 按钮
  */
  --color-primary: #2d6a4f;
  --color-primary-dark: #1b4332;
  --color-primary-light: #d8f3dc;
  --color-secondary: #52796f;
  --color-accent: #d4a373;
  --color-bg: #ffffff;           /* 页面主背景色 */
  --color-bg-alt: #f8f9fa;      /* 交替区块背景色（浅灰），用于视觉分区 */
  --color-text: #212529;        /* 主文字颜色（深灰近黑） */
  --color-text-light: #6c757d;  /* 次要文字颜色（灰色），用于描述、标签 */
  --color-border: #dee2e6;      /* 边框颜色 */

  /* ===== 字体 =====
     heading: 标题字体（衬线体，优雅感）
     body:    正文字体（无衬线，易读性）
     ar:      阿拉伯文专用字体
  */
  --font-heading: 'DM Serif Display', serif;
  --font-body: 'DM Sans', sans-serif;
  --font-ar: 'Tajawal', sans-serif;

  /* ===== 间距 — 基于rem的等比间距系统 =====
     从 xs 到 2xl 形成清晰的间距层级
     所有组件的内边距、外边距、间隙都使用这些变量
  */
  --space-xs: 0.25rem;    /* 4px  — 极小间距，如图标与文字之间 */
  --space-sm: 0.5rem;     /* 8px  — 小间距，如列表项之间 */
  --space-md: 1rem;       /* 16px — 标准间距，如容器内边距 */
  --space-lg: 2rem;       /* 32px — 大间距，如区块内部间距 */
  --space-xl: 4rem;       /* 64px — 区块间距 */
  --space-2xl: 6rem;      /* 96px — 大区块上下间距 */

  /* ===== 断点 — 供 JS 读取，CSS 用 @media =====
     与 responsive.css 中的 @media 断点值一致
  */
  --bp-sm: 576px;         /* 大屏手机横屏 */
  --bp-md: 768px;         /* 平板竖屏 */
  --bp-lg: 992px;         /* 平板横屏 / 小笔电 */
  --bp-xl: 1200px;        /* 桌面 */
  --bp-2xl: 1400px;       /* 大屏桌面 */

  /* ===== 布局 ===== */
  --container-max: 1200px;  /* 内容最大宽度 */
  --header-height: 80px;    /* 顶部导航栏高度（固定定位时需要给 body 留出空间） */
  --radius: 8px;            /* 标准圆角 */
  --radius-lg: 16px;        /* 大圆角（卡片等） */

  /* ===== 阴影 — 三级阴影系统 ===== */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);     /* 微阴影，卡片默认态 */
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);     /* 中阴影，按钮 hover 态 */
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);   /* 大阴影，下拉菜单、卡片 hover 态 */

  /* ===== 过渡动画 — 三种速度 ===== */
  --transition-fast: 0.2s ease;   /* 快速：下拉展开、hover 变色 */
  --transition-base: 0.3s ease;   /* 标准：卡片上移、按钮缩放 */
  --transition-slow: 0.5s ease;   /* 慢速：图片放大 */
}