/* =========================================================
   tokens.css — 设计变量（唯一色彩/间距/字号来源）
   配色取自 App Logo：亮绿 #00D959 / 墨绿 #008D74 / 白
   ========================================================= */

:root {
  /* ---------- 品牌色 ---------- */
  --brand:            #00D959;  /* Logo 主绿 */
  --brand-strong:     #00C24F;  /* hover/按下 */
  --brand-soft:       #E6FBEE;  /* 浅绿底 */
  --brand-softer:     #F2FDF6;
  --teal:             #008D74;  /* Logo 墨绿 */
  --teal-strong:      #00705C;
  --teal-soft:        #E2F4F0;

  /* ---------- 中性色（带绿调的中性，和品牌同源） ---------- */
  --ink-900:          #052A21;  /* 深色区块底 */
  --ink-800:          #0A382D;
  --ink-700:          #0F4A3B;
  --text:             #0A1F1A;  /* 正文 */
  --text-muted:       #566B63;  /* 次要文字 */
  --text-faint:       #84978F;
  --line:             #E3EAE6;  /* 分隔线 */
  --line-strong:      #CBD8D2;
  --surface:          #FFFFFF;
  --surface-alt:      #F6F9F7;  /* 交替区块底 */
  --page:             #FFFFFF;

  /* 深色区块内使用的中性 */
  --on-dark:          #F2FBF7;
  --on-dark-muted:    #A9C6BC;
  --on-dark-line:     rgba(255, 255, 255, .14);
  --on-dark-surface:  rgba(255, 255, 255, .06);

  /* ---------- 语义色 ---------- */
  --warn:             #B8541F;
  --warn-soft:        #FFF3EA;

  /* ---------- 字体 ---------- */
  --font-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue",
    Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* 流式字号：移动端优先，随视口平滑放大 */
  --fs-display: clamp(2.05rem, 1.35rem + 3.1vw, 4rem);
  --fs-h1:      clamp(1.75rem, 1.25rem + 2.2vw, 3rem);
  --fs-h2:      clamp(1.5rem, 1.16rem + 1.5vw, 2.25rem);
  --fs-h3:      clamp(1.16rem, 1.02rem + .62vw, 1.5rem);
  --fs-h4:      clamp(1.02rem, .96rem + .28vw, 1.16rem);
  --fs-body:    clamp(1rem, .97rem + .14vw, 1.06rem);
  --fs-sm:      .9375rem;
  --fs-xs:      .8125rem;

  --lh-tight:   1.18;
  --lh-snug:    1.35;
  --lh-body:    1.72;

  /* ---------- 间距 ---------- */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5.5rem;

  /* 区块纵向留白：移动端紧凑，桌面宽松 */
  --section-y: clamp(3.25rem, 2.2rem + 4.6vw, 6.5rem);
  --gutter:    clamp(1.15rem, .7rem + 2vw, 2rem);
  --maxw:      1160px;
  --maxw-text: 720px;

  /* ---------- 圆角 / 阴影 ---------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(5, 42, 33, .05), 0 1px 3px rgba(5, 42, 33, .04);
  --shadow-md: 0 4px 12px rgba(5, 42, 33, .06), 0 12px 28px rgba(5, 42, 33, .06);
  --shadow-lg: 0 8px 24px rgba(5, 42, 33, .09), 0 24px 56px rgba(5, 42, 33, .10);
  --shadow-brand: 0 6px 20px rgba(0, 217, 89, .28);

  /* ---------- 层级 ---------- */
  --z-header: 100;
  --z-drawer: 200;
  --z-sheet:  300;
  --z-dockbar: 90;

  /* ---------- 动效 ---------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .16s;
  --dur: .26s;
  --dur-slow: .44s;

  /* ---------- 组件尺寸 ---------- */
  --header-h: 60px;
  --tap: 44px;               /* 最小可点击尺寸 */
  --dockbar-h: 68px;         /* 移动端底部 CTA 条 */
}

@media (min-width: 900px) {
  :root { --header-h: 72px; }
}