/* ============================================================
 * Design Tokens — 草原主题
 * 用法：所有页面 <link href="assets/css/variables.css?v=__CSS_V__">
 * ============================================================ */

:root {
  /* ---------- 颜色 ---------- */
  --color-primary:        #2D5016;  /* 深草原绿 */
  --color-primary-light:  #5A8F3D;  /* 浅草原绿 */
  --color-secondary:      #6B8E7F;  /* 柔和灰绿 */
  --color-accent:         #E89342;  /* 落日橙 */
  --color-sky:            #87CEEB;  /* 天空蓝 */
  --color-bg:             #FAF8F3;  /* 米白 */
  --color-bg-card:        #FFFFFF;  /* 卡片白 */
  --color-bg-soft:        #F0EDE3;  /* 浅米色 */
  --color-text:           #2C3E2D;  /* 主文字 */
  --color-text-muted:     #6B7B6C;  /* 弱化文字 */
  --color-text-light:     #9CA89E;  /* 提示文字 */
  --color-border:         #E5E5E0;
  --color-border-strong:  #C9C9C0;
  --color-danger:         #C0392B;
  --color-success:        #5A8F3D;

  /* ---------- 字体 ---------- */
  --font-display: "Source Han Sans CN", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
  --font-body:    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- 字号 ---------- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-hero: 64px;

  /* ---------- 行高 ---------- */
  --lh-tight:   1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.75;

  /* ---------- 间距 (8px grid) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* ---------- 圆角 ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ---------- 阴影 ---------- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

  /* ---------- 容器 ---------- */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;

  /* ---------- 动画 ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;

  /* ---------- Z-index ---------- */
  --z-nav:    100;
  --z-modal:  1000;
  --z-popup:  2000;
  --z-toast:  3000;
}

/* ---------- Dark mode (可选) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:      #1A1F1A;
    --color-bg-card: #2A302A;
    --color-text:    #E8EDE8;
    --color-text-muted: #A8B3A8;
    --color-border:  #3A403A;
  }
}