/* ==========================================================================
   tokens.css —— 加一件 · 设计变量
   来源：docs/design-spec.md §2 §3 §4 §8
   约定：变量前缀 --cg-，不写小数 px，不使用 rem
   ========================================================================== */

:root {
  /* 阻止 iOS / 微信深色模式整体反色：本站只有浅色。
     不加这条，高风险红（#B3261E）会被反色成青绿 —— 健康场景下的严重事故。 */
  color-scheme: light only;

  /* ── 背景 / 表面 / 线 ───────────────────────────────────── */
  --cg-color-bg:            #F5F7FA;
  --cg-color-surface:       #FFFFFF;
  --cg-color-surface-sunk:  #EEF2F6;
  --cg-color-line:          #E2E8F0;   /* 仅装饰性分隔线 1.29:1 */
  --cg-color-line-strong:   #64748B;   /* 交互控件边界 4.0:1 */

  /* ── 中性灰阶 ───────────────────────────────────────────── */
  --cg-color-ink:           #1E293B;   /* 17.0:1 */
  --cg-color-ink-2:         #334155;   /* 13.1:1 */
  --cg-color-text:          #475569;   /*  9.16:1 */
  --cg-color-text-2:        #64748B;   /*  6.28:1 */
  --cg-color-text-3:        #94A3B8;   /*  4.87:1 */
  --cg-color-line-only:     #CBD5E1;   /* 仅图形/边框，禁止用于文字 */

  /* ── 品牌（只出现在可点元素上） ──────────────────────────── */
  --cg-color-primary:        #2F9D6F;
  --cg-color-primary-dark:   #248259;
  --cg-color-primary-deep:   #1E6B49;  /* 浅底上的文字 */
  --cg-color-primary-light:  #E8F8F0;
  --cg-color-primary-border: #C8E8D8;

  /* ── 辅助色（设计系统规范） ────────────────────────────── */
  --cg-color-blue:           #3B82F6;
  --cg-color-blue-dark:      #2563EB;
  --cg-color-blue-light:     #EFF6FF;
  --cg-color-purple:         #8B5CF6;
  --cg-color-purple-light:    #F5F3FF;

  /* ── 风险 5 档（文字/填充） ─────────────────────────────── */
  --cg-color-risk-very-low:  #2F9D6F;
  --cg-color-risk-low:       #38A887;
  --cg-color-risk-mid:       #D97706;
  --cg-color-risk-high:      #EA580C;
  --cg-color-risk-very-high: #E0565E;

  /* ── 风险 5 档浅底 ──────────────────────────────────────── */
  --cg-color-risk-very-low-bg:  #E8F8F0;
  --cg-color-risk-low-bg:       #EDF7F4;
  --cg-color-risk-mid-bg:       #FEF3C7;
  --cg-color-risk-high-bg:      #FFEDD5;
  --cg-color-risk-very-high-bg: #FEE2E2;

  /* ── 状态语义 ───────────────────────────────────────────── */
  --cg-color-success: #2F9D6F;
  --cg-color-warning: #EAB308;
  --cg-color-danger:  #E0565E;
  --cg-color-info:    #3B82F6;
  --cg-color-info-bg: #EFF6FF;
  --cg-color-error-bg:#FEF2F2;
  --cg-color-error-line:#FECACA;
  --cg-color-flag-line:#FCA5A5;

  /* ── 焦点 ───────────────────────────────────────────────── */
  --cg-color-focus: #1A1D1C;

  /* ── 字体栈（不加载任何 Web 字体） ──────────────────────── */
  --cg-font-sans:
    -apple-system, BlinkMacSystemFont,
    "PingFang SC",
    "HarmonyOS Sans SC",
    "MiSans",
    "Hiragino Sans GB",
    "Source Han Sans SC", "Noto Sans CJK SC",
    "Microsoft YaHei", "微软雅黑",
    "WenQuanYi Micro Hei",
    system-ui, sans-serif;

  --cg-font-num:
    ui-monospace, "SF Mono", "SFMono-Regular",
    "Roboto Mono", "DIN Alternate", "Helvetica Neue",
    var(--cg-font-sans);

  /* ── 字号阶梯（375px 基准） ─────────────────────────────── */
  --cg-fs-display: 56px;  --cg-lh-display: 60px;
  --cg-fs-h1: 24px;       --cg-lh-h1: 34px;
  --cg-fs-h2: 20px;       --cg-lh-h2: 30px;
  --cg-fs-h3: 17px;       --cg-lh-h3: 26px;
  --cg-fs-body: 16px;     --cg-lh-body: 26px;
  --cg-fs-body-s: 14px;   --cg-lh-body-s: 22px;
  --cg-fs-label: 13px;    --cg-lh-label: 20px;
  --cg-fs-caption: 12px;  --cg-lh-caption: 18px;
  --cg-fs-micro: 11px;    --cg-lh-micro: 16px;
  --cg-fs-tiny: 10px;     --cg-lh-tiny: 14px;

  /* ── 间距（基础单位 4px，禁止魔数） ─────────────────────── */
  --cg-space-0:  0;
  --cg-space-1:  4px;
  --cg-space-2:  8px;
  --cg-space-3:  12px;
  --cg-space-4:  16px;
  --cg-space-5:  20px;
  --cg-space-6:  24px;
  --cg-space-8:  32px;
  --cg-space-10: 40px;
  --cg-space-12: 48px;
  --cg-space-16: 64px;

  /* ── 圆角 ───────────────────────────────────────────────── */
  --cg-radius-xs:   6px;
  --cg-radius-sm:   10px;
  --cg-radius-md:   12px;
  --cg-radius-lg:   16px;
  --cg-radius-xl:   20px;
  --cg-radius-2xl:  24px;
  --cg-radius-full: 999px;

  /* ── 阴影 ───────────────────────────────────────────────── */
  --cg-shadow-1: 0 1px 2px rgba(30, 41, 59, 0.05);
  --cg-shadow-2: 0 4px 16px rgba(30, 41, 59, 0.08);
  --cg-shadow-3: 0 -8px 32px rgba(30, 41, 59, 0.12);
  --cg-shadow-card: 0 4px 20px rgba(30, 41, 59, 0.05), 0 1px 3px rgba(30, 41, 59, 0.02);
  --cg-shadow-hover: 0 8px 30px rgba(30, 41, 59, 0.09);

  /* ── 层级 ───────────────────────────────────────────────── */
  --cg-z-base: 0;
  --cg-z-sticky: 10;
  --cg-z-bottom-bar: 20;
  --cg-z-toast: 30;
  --cg-z-sheet: 40;

  /* ── 动效 ───────────────────────────────────────────────── */
  --cg-dur-instant: 1ms;
  --cg-dur-fast:    120ms;
  --cg-dur-base:    200ms;
  --cg-dur-slow:    320ms;
  --cg-dur-count:   640ms;

  --cg-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --cg-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --cg-ease-linear: linear;
}

/* 关闭全部过渡与循环动画。JS 侧同步读取 matchMedia，分别处理 count-up / smooth scroll。 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --cg-dur-instant: 1ms;
    --cg-dur-fast:    1ms;
    --cg-dur-base:    1ms;
    --cg-dur-slow:    1ms;
    --cg-dur-count:   1ms;
  }
}