/* ============================================================
   GEO-CMS 设计系统 · Design Tokens
   单一真相源：所有尺寸/色彩/字体只在此定义
   每个 token 附「为何是这个值」，便于后续有人改动时不破坏体系
   ============================================================ */

:root {
  /* ---------- 1. 色彩 ---------- */
  /* 主色：深墨绿。理由：食品/健康类目，绿色系可信度最高；
     深色避免了大面积高饱和带来的廉价感与「保健品」联想。 */
  --c-brand-900: #0A2E23;
  --c-brand-800: #0D3A2C;
  --c-brand-700: #114634;
  --c-brand-600: #17573F;
  --c-brand-500: #1E6B4E;
  --c-brand-400: #2E8562;
  --c-brand-300: #5AA383;
  --c-brand-200: #8FC4AC;
  --c-brand-100: #C7E2D4;
  --c-brand-050: #EAF4EF;

  /* 强调色：暖金。仅用于「关键数字/价格/徽章」，
     理由：金色在食品语境联想「品质/尊贵」，但整站滥用会俗气，
     所以严格限制在 5% 以下的面积。 */
  --c-gold-700: #8A6A2F;
  --c-gold-600: #A8853C;
  --c-gold-500: #C6A15B;
  --c-gold-200: #E8D5AC;
  --c-gold-050: #FAF4E7;

  /* 中性色：带一点暖灰（hue≈40），与奶油底同源，
     避免纯灰的塑料感。 */
  --c-ink-900: #14211C;
  --c-ink-800: #1F2E28;
  --c-ink-700: #2F4139;
  --c-ink-600: #475A51;
  --c-ink-500: #5F7168;
  --c-ink-400: #7E8D85;
  --c-ink-300: #A3AEA8;
  --c-ink-200: #C6CFCB;
  --c-ink-100: #E2E7E4;
  --c-ink-050: #F1F4F2;

  /* 背景 */
  --c-bg: #FAF8F3;         /* 奶油底 */
  --c-bg-elevated: #FFFFFF;
  --c-bg-sunken: #F2EFE7;
  --c-bg-inverse: var(--c-brand-900);

  /* 语义色 */
  --c-success-600: #1E7A4D;
  --c-success-050: #E6F4EC;
  --c-warn-600: #9A6A16;
  --c-warn-050: #FBF1DC;
  --c-danger-600: #A82A28;
  --c-danger-050: #FAEAEA;
  --c-info-600: #1F5F8B;
  --c-info-050: #E7F0F6;

  /* 边框 */
  --c-border: #E0DED4;
  --c-border-strong: #C9C5B6;
  --c-border-brand: rgba(17, 70, 52, .18);

  /* ---------- 2. 字体 ---------- */
  /* 中文正文用无衬线（屏读友好、长文不累）；标题用衬线（权威感）。
     两者的搭配是国内政务/百科类站点的成熟范式。 */
  --font-sans: "Noto Sans CJK SC", "Source Han Sans SC", "PingFang SC",
               "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --font-serif: "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC",
                "SimSun", Georgia, serif;
  --font-mono: "Noto Sans Mono CJK SC", "SF Mono", Menlo, Consolas, monospace;

  /* 字号阶梯：1.25 (Major Third) 模数，8→48。
     理由：1.25 在 14px 基准下相邻级别差异约 2-3px，
     层级清晰又不跳脱；比 1.333 更克制，适合信息密集型站点。 */
  --fs-2xs: 11px;   /* 徽章、脚注 */
  --fs-xs:  12px;   /* 标签、辅助 */
  --fs-sm:  13px;   /* 次要正文、表格 */
  --fs-base:14px;   /* 基准，表单控件继承 */
  --fs-md:  16px;   /* 正文 */
  --fs-lg:  20px;   /* 小标题 */
  --fs-xl:  25px;   /* 卡片标题 */
  --fs-2xl: 31px;   /* 区块标题 */
  --fs-3xl: 39px;   /* 页面标题 */
  --fs-4xl: 49px;   /* 主视觉标题 */

  /* 行高：正文 1.75（中文需要比英文更大的行距才不挤），
     标题 1.25-1.35（大字需要收紧否则松散）。 */
  --lh-tight: 1.25;
  --lh-snug: 1.4;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  /* 字重：中文正文避免 300 以下（细体在小字号下笔画断裂）。
     衬线标题只用 600/700，不用 900（中文黑体过粗显廉价）。 */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* 字间距：中文标题加 .01-.02em 更挺拔；大字号加 .04em。 */
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.02em;
  --ls-wider: 0.04em;

  /* ---------- 3. 间距 ----------
     4px 基准模数。所有 margin/padding/gap 必须是 4 的倍数。 */
  --sp-1: 4px;    --sp-2: 8px;    --sp-3: 12px;   --sp-4: 16px;
  --sp-5: 20px;   --sp-6: 24px;   --sp-7: 32px;   --sp-8: 40px;
  --sp-9: 48px;   --sp-10: 64px;  --sp-11: 80px;  --sp-12: 104px;

  /* ---------- 4. 圆角 ---------- */
  --r-xs: 4px;   --r-sm: 6px;   --r-md: 10px;
  --r-lg: 14px;  --r-xl: 20px;  --r-pill: 999px;

  /* ---------- 5. 阴影 ----------
     层级越深 = 离页面越近。ambient(环境光) 用暖色偏移，
     比纯黑阴影更贴合奶油底。 */
  --sh-xs: 0 1px 2px rgba(20, 33, 28, .05);
  --sh-sm: 0 1px 3px rgba(20, 33, 28, .07), 0 1px 2px rgba(20, 33, 28, .04);
  --sh-md: 0 2px 8px rgba(20, 33, 28, .08), 0 1px 3px rgba(20, 33, 28, .05);
  --sh-lg: 0 8px 24px rgba(20, 33, 28, .10), 0 2px 6px rgba(20, 33, 28, .05);
  --sh-xl: 0 16px 48px rgba(20, 33, 28, .14), 0 4px 12px rgba(20, 33, 28, .06);
  --sh-focus: 0 0 0 3px var(--c-brand-100);

  /* ---------- 6. 控件尺寸（严格规定） ---------- */
  /* 高度阶梯：28 / 32 / 36 / 40 / 48
     28=紧凑表格内控件 32=筛选栏 36=默认表单 40=主要按钮 48=主行动 */
  --ctl-h-xs: 28px;
  --ctl-h-sm: 32px;
  --ctl-h-md: 36px;
  --ctl-h-lg: 40px;
  --ctl-h-xl: 48px;

  /* 水平内边距：文字越多 pad 越大，保证相同宽度感 */
  --ctl-px-xs: 8px;
  --ctl-px-sm: 12px;
  --ctl-px-md: 14px;
  --ctl-px-lg: 18px;
  --ctl-px-xl: 24px;

  --ctl-font: var(--fs-sm);        /* 控件字号统一 13px，
                                      与 --fs-base 区分：控件信息密度高 */
  --ctl-radius: var(--r-sm);
  --ctl-border: 1px solid var(--c-border-strong);

  /* 触控目标最小 44×44（iOS HIG / WCAG 2.5.5 AA），
     移动端任何可点击元素 padding 需保证命中区达标 */
  --tap-min: 44px;

  /* ---------- 7. 布局 ---------- */
  --layout-max: 1240px;        /* 主内容最大宽，超过行长过长影响阅读 */
  --layout-prose: 68ch;        /* 正文最佳行长（中文约 34 字/行） */
  --layout-gutter: var(--sp-6);
  --sidebar-w: 240px;
  --topbar-h: 60px;

  /* ---------- 8. 层级 ---------- */
  --z-base: 0;
  --z-sticky: 100;
  --z-drawer: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  /* ---------- 9. 动效 ---------- */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---------- 10. 栅格 ---------- */
  --grid-cols: 12;
  --grid-gap: var(--sp-6);
}

/* 减少动效偏好：尊重系统设置 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}