/**
 * Vechooool 全站字体 / 字号分级
 *
 * 字体：
 *   display — 大标题（Helvetica Neue）
 *   body    — 正文（Helvetica Neue → 中文系统字体 → Aeonik）
 *   ui      — 按钮 / 标签 / UI（Aeonik → Helvetica Neue）
 *   不使用 Inter
 *
 * 字号层级（大 → 小）：
 *   display — 首页主标题
 *   4xl     — 页面标题（价格页 / 联系页等）
 *   3xl     — 分区标题（创意网站等）
 *   2xl     — 强调数字
 *   xl      — 副标题
 *   lg      — 卡片 / 权益小标题
 *   base    — 正文
 *   md      — 次要正文
 *   sm      — 标签、说明
 *   xs      — 角标、角注
 *   price   — 价格数字（独立，避免被标题缩放牵连）
 */

:root {
  /* —— Families —— */
  --vech-font-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --vech-font-display: "Helvetica Neue", Helvetica, var(--vech-font-cjk), Arial, sans-serif;
  --vech-font-body: "Helvetica Neue", Helvetica, var(--vech-font-cjk), Aeonik, Arial, sans-serif;
  --vech-font-ui: Aeonik, "Helvetica Neue", Helvetica, var(--vech-font-cjk), Arial, sans-serif;

  /* —— Weights —— */
  --vech-fw-regular: 400;
  --vech-fw-medium: 500;
  --vech-fw-semibold: 600;
  --vech-fw-bold: 700;

  /* —— Size scale (16px root) —— */
  --vech-text-xs: 0.75rem; /* 12 */
  --vech-text-sm: 0.8125rem; /* 13 */
  --vech-text-md: 0.875rem; /* 14 */
  --vech-text-base: 1rem; /* 16 */
  --vech-text-lg: 1.125rem; /* 18 */
  --vech-text-xl: clamp(1.25rem, 1.8vw, 1.5rem); /* 副标题 20–24 */
  --vech-text-2xl: clamp(1.5rem, 2.2vw, 2rem); /* 强调数字 24–32 */
  --vech-text-3xl: clamp(1.75rem, 3.04vw, 2.75rem); /* 分区标题 */
  --vech-text-4xl: clamp(2rem, 3.5vw, 3.25rem); /* 页面标题 */
  --vech-text-display: clamp(3.1rem, 6.8vw, 6.5rem); /* 首页主标题 */
  --vech-text-price: clamp(2.25rem, 4vw, 3rem); /* 价格数字 */

  /* —— Tracking / leading —— */
  --vech-tracking-tight: -0.01em;
  --vech-tracking-normal: 0;
  --vech-tracking-wide: 0.02em;
  --vech-leading-display: 1.08;
  --vech-leading-tight: 1.2;
  --vech-leading-body: 1.6;
  --vech-leading-loose: 1.65;

  /* —— Ink —— */
  --vech-ink: #0a0a0a;
  --vech-ink-muted: rgba(10, 10, 10, 0.56);
  --vech-ink-subtle: rgba(10, 10, 10, 0.45);
}

html,
body {
  font-family: var(--vech-font-body);
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 812px) {
  :root {
    --vech-text-display: clamp(2.45rem, 11vw, 3.6rem);
    --vech-text-4xl: clamp(1.75rem, 7vw, 2.5rem);
    --vech-text-3xl: clamp(1.45rem, 6.4vw, 2.1rem);
  }
}

@media (min-width: 813px) and (max-width: 1100px) {
  :root {
    --vech-text-display: clamp(2.7rem, 7.6vw, 4.9rem);
  }
}

@media (min-aspect-ratio: 21/9) {
  :root {
    --vech-text-3xl: clamp(1.4rem, 2.08vw, 2.2rem);
  }
}