/* ============================================================
   PetModernLife — Design Tokens
   设计令牌：全站唯一的色值 / 字号 / 间距 / 圆角来源
   ------------------------------------------------------------
   用法：本文件必须在所有其他样式之前加载。
   规则：业务样式中禁止出现任何硬编码色值与字号，一律引用变量。
   ============================================================ */

:root {
  /* ---------- 色彩 ---------- */
  --pm-bg:          #F7F4EF;  /* 页面主背景 奶油米 */
  --pm-surface:     #FFFFFF;  /* 卡片 / 表单 / 内容容器 */
  --pm-ink:         #1A1A1A;  /* 正文与标题文字 暖碳灰（不要用纯黑） */
  --pm-brand:       #2C3E35;  /* 主色 深森林绿：页头 / 主按钮 / 强调区块 */
  --pm-brand-ink:   #FFFFFF;  /* 深绿底上的文字 */
  --pm-accent:      #E07A5F;  /* 点缀色 暖橙：徽标 / 关键行动点（稀缺使用） */
  --pm-border:      #E7E2D8;  /* 常规边框 / 分隔线 */
  --pm-border-soft: #DCD6CA;  /* 弱分隔线 */
  --pm-field:       #FFFFFF;  /* 输入框底色 */
  --pm-tint:        #EFEAE0;  /* 浅色填充块：标签底色 / 条纹 */
  --pm-muted:       #6B7268;  /* 次级文字：说明 / 元信息 */
  --pm-muted-2:     #9A958A;  /* 三级文字：时间戳 / 占位 */
  --pm-soft:        #B9C4BD;  /* 深绿底上的浅色文字 */
  --pm-soft-accent: #E0A08A;  /* 深绿底上的浅暖橙 */
  --pm-link:        #2C3E35;  /* 链接色（与主色一致） */
  --pm-success:     #4C7A5E;  /* 成功提示 */
  --pm-danger:      #B4553F;  /* 错误 / 危险操作 */

  /* ---------- 深色底（--pm-brand）上的层次与交互光晕 ----------
     避免在业务样式里直接写 rgba */
  --pm-on-brand-fill: rgba(255, 255, 255, .07);  /* 深底上的浅色填充块 */
  --pm-on-brand-line: rgba(255, 255, 255, .14);  /* 深底上的细边框 */
  --pm-focus-ring:    rgba(44, 62, 53, .10);     /* 输入框聚焦光晕 */
  --pm-shadow-btn:    rgba(44, 62, 53, .16);     /* 主按钮投影 */

  /* ---------- 字体族 ----------
     注意：英文站使用 Noto Serif / Noto Sans 的拉丁版，
     不要用 Noto Serif SC / Noto Sans SC（那是简体中文版，英文字形与体积都不合适）。 */
  --pm-font-display: "Noto Serif", Georgia, "Times New Roman", serif;
  --pm-font-body:    "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pm-font-data:    "Noto Sans", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---------- 字号 / 行高（桌面端） ---------- */
  --pm-fs-h1: 40px;      --pm-lh-h1: 48px;
  --pm-fs-h2: 28px;      --pm-lh-h2: 36px;
  --pm-fs-h3: 19px;      --pm-lh-h3: 26px;
  --pm-fs-h4: 17px;      --pm-lh-h4: 24px;
  --pm-fs-body: 16px;    --pm-lh-body: 27px;
  --pm-fs-sm: 14px;      --pm-lh-sm: 22px;
  --pm-fs-caption: 12px; --pm-lh-caption: 18px;
  --pm-fs-label: 11px;   --pm-lh-label: 16px;

  --pm-fw-regular: 400;
  --pm-fw-medium: 500;
  --pm-fw-semi: 600;
  --pm-fw-bold: 700;

  /* ---------- 圆角 ---------- */
  --pm-radius:      8px;    /* 按钮 / 输入框 / 小标签 */
  --pm-radius-card: 14px;   /* 卡片 */
  --pm-radius-lg:   18px;   /* 大图 / Hero 容器 */
  --pm-radius-pill: 999px;  /* 头像 / 胶囊标签 */

  /* ---------- 间距（8pt 网格） ---------- */
  --pm-space-1: 8px;
  --pm-space-2: 16px;
  --pm-space-3: 24px;
  --pm-space-4: 32px;
  --pm-space-5: 40px;
  --pm-space-6: 48px;
  --pm-space-8: 64px;
  --pm-space-10: 80px;

  /* ---------- 布局 ---------- */
  --pm-max-width:   1440px;  /* 内容最大宽度 */
  --pm-gutter:      80px;    /* 桌面左右内边距 */
  --pm-section-gap: 80px;    /* 区块垂直间距 */
  --pm-block-gap:   24px;    /* 区块内部元素间距 */

  /* ---------- 控件尺寸 ---------- */
  --pm-control-h:    48px;   /* 按钮 / 输入框高度（桌面） */
  --pm-navbar-h:     62px;   /* 桌面顶部导航高度 */
  --pm-topbar-h:     52px;   /* 移动顶部导航高度 */
  --pm-tabbar-h:     64px;   /* 移动底部 Tab 栏高度（含 1px 上边线） */
  --pm-tap-min:      44px;   /* 移动端最小可点按尺寸 */

  /* ---------- 阴影 ---------- */
  --pm-shadow-sm: 0 1px 2px rgba(44, 62, 53, .04);
  --pm-shadow-md: 0 4px 16px rgba(44, 62, 53, .06);
  --pm-shadow-lg: 0 12px 32px rgba(44, 62, 53, .08);

  /* ---------- 动效 ---------- */
  --pm-ease: cubic-bezier(.4, 0, .2, 1);
  --pm-dur: 180ms;
}

/* ============================================================
   响应式：≤768px 切移动端度量
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --pm-fs-h1: 24px;      --pm-lh-h1: 31px;
    --pm-fs-h2: 20px;      --pm-lh-h2: 28px;
    --pm-fs-h3: 17px;      --pm-lh-h3: 24px;
    --pm-fs-h4: 16px;      --pm-lh-h4: 24px;
    --pm-fs-body: 14px;    --pm-lh-body: 23px;
    --pm-fs-sm: 13px;      --pm-lh-sm: 21px;

    --pm-gutter: 20px;
    --pm-section-gap: 48px;
    --pm-block-gap: 24px;

    --pm-control-h: 44px;
  }
}

/* 平板：压缩内边距，不改字号结构 */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --pm-gutter: 40px;
    --pm-section-gap: 64px;
  }
}