/* ============================================================
   咕噜掌柜官网 · Design Tokens
   单一来源：颜色 / 字体 / 间距 / 圆角 / 阴影 / 动效
   其他样式文件只允许引用变量，禁止硬编码色值
   ============================================================ */

:root {
  /* ---------- 品牌基础色 ----------
     橙色与绿色一律对齐 ERP 系统门店端（wecom-pet-ai-demo/public/tokens.css
     的 .merchant-theme），保证官网与产品界面是同一套品牌色。
     旧版曾用浅杏橙 #e99a55，与系统界面对照明显不是同一个橙，已废弃。 */
  --c-bg: #ffffff;             /* 页面背景（白底） */
  --c-brand: #c2410c;          /* 品牌橙 = ERP --brand */
  --c-ink: #252923;            /* 深色文字 */
  --c-green: #0a7d3e;          /* 辅助绿 = ERP --success */
  --c-surface: #ffffff;        /* 白色卡片 */
  --c-line: #eceae5;           /* 分割线 */

  /* ---------- 由基础色推导的可用层级 ---------- */
  --c-brand-strong: #b03b0a;   /* 主按钮底色（白字 5.9:1） */
  --c-brand-deep: #9a3412;     /* 悬停态 = ERP --brand-hover */
  --c-brand-ink: #b03c0c;      /* 浅底上的橙色文字（≥4.5:1） */
  --c-brand-tint: #fdf3ec;     /* 橙色浅底 = ERP --brand-soft */
  --c-brand-wash: #fef7f1;     /* 更浅的暖底 = ERP --brand-softer */

  --c-ink-2: #575d53;          /* 次级文字 6.5:1 */
  --c-ink-3: #6b7268;          /* 辅助文字 4.7:1 */
  --c-ink-inv: #ffffff;

  --c-green-deep: #047857;     /* 绿字（≥4.5:1）= ERP --success-text */
  --c-green-tint: #e8f8ee;     /* 绿色浅底 = ERP --success-soft */

  --c-surface-warm: #faf7f3;   /* 暖色区块底（截图衬底，白底体系里的极浅分区） */
  --c-surface-cool: #f5f5f3;
  --c-line-strong: #ded9cf;

  /* ---------- 字体 ---------- */
  --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Source Han Sans SC", "Noto Sans CJK SC", system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  --font-num: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;

  /* 字号阶梯（rem，根 16px） */
  --fs-display: clamp(2.25rem, 1.42rem + 2.9vw, 3.5rem);   /* 36 → 56 */
  --fs-h1: clamp(1.875rem, 1.42rem + 1.6vw, 2.75rem);      /* 30 → 44 */
  --fs-h2: clamp(1.5rem, 1.28rem + 0.8vw, 2rem);           /* 24 → 32 */
  --fs-h3: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);      /* 18 → 22 */
  --fs-lead: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);      /* 16 → 18 */
  --fs-body: 1rem;                                         /* 16 */
  --fs-sm: 0.9375rem;                                      /* 15 */
  --fs-xs: 0.8125rem;                                      /* 13 */

  --lh-tight: 1.16;
  --lh-snug: 1.35;
  --lh-body: 1.75;

  /* ---------- 间距（4px 基准） ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 56px;
  --sp-9: 72px;
  --sp-10: 96px;
  --sp-11: 120px;

  /* ---------- 圆角（克制，不堆叠大圆角） ---------- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---------- 阴影（极轻，仅用于截图与浮层） ---------- */
  --sh-xs: 0 1px 2px rgba(37, 41, 35, 0.05);
  --sh-sm: 0 1px 2px rgba(37, 41, 35, 0.04), 0 4px 12px -6px rgba(37, 41, 35, 0.10);
  --sh-md: 0 2px 6px rgba(37, 41, 35, 0.05), 0 18px 40px -24px rgba(37, 41, 35, 0.26);
  --sh-lg: 0 4px 10px rgba(37, 41, 35, 0.05), 0 40px 70px -40px rgba(37, 41, 35, 0.32);

  /* ---------- 布局 ---------- */
  --maxw: 1120px;
  --maxw-narrow: 760px;
  --gutter: clamp(20px, 5vw, 40px);
  --nav-h: 68px;

  /* ---------- 动效（克制） ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-1: 160ms;
  --dur-2: 260ms;
  --dur-3: 520ms;

  /* ---------- 层级 ---------- */
  --z-nav: 100;
  --z-drawer: 200;
  --z-lightbox: 300;
}

/* 减少动态效果：把所有过渡压到 0（内容与布局完全不变） */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
  }
}