/* ============================================================
   荔枝万能计算器 · 设计令牌
   白色主调 + 荔枝红点缀（品牌色仅用于强调，不铺面积）
   ============================================================ */
:root {
  /* —— 颜色 —— */
  --c-bg: #ffffff;
  --c-bg-subtle: #f7f8fa;
  --c-bg-track: #f2f3f5;
  --c-border: #e6e8eb;
  --c-border-strong: #d5d9de;
  --c-text: #1a1d21;
  --c-text-2: #5b6570;
  /* 第三级文字：提示语 / 卡片描述 / 单位 / 页脚小字。
   * 原来用 #8a939e，对白底实测只有 3.1:1，低于 WCAG AA 要求的 4.5:1；
   * 而这类文字本身就只有 12–13px，又小又淡，是「看着潦草」的主要来源之一。
   * #6e7781 提到 4.6:1 刚好过线，同时与正文 #1a1d21 仍保持明显层次。 */
  --c-text-3: #6e7781;
  --c-brand: #d7263d;
  --c-brand-hover: #b81e32;
  --c-brand-soft: #fdeef0;
  --c-success: #2e7d32;
  --c-success-soft: #eef7ee;
  --c-warning: #ed6c02;
  --c-warning-soft: #fff4e8;
  --c-error: #d32f2f;
  --c-error-soft: #fdeeee;

  /* —— 字体 ——
   * 顺序规则：只含拉丁字形的字体排前面，中文字体排后面。
   * 原顺序把 "Microsoft YaHei" 放在了 Arial 之前，而雅黑自带拉丁字形，
   * 于是英文与数字全被雅黑接管（雅黑拉丁偏宽、笔画平直、小字号发糊），
   * 中英混排就显得糙，Arial / Helvetica Neue 则成了永远轮不到的摆设。
   * 现改为：拉丁先用系统界面字体，中文字符再逐字回退到后面的中文字体——
   * 这正是 Windows / macOS 自身处理中英混排的做法。 */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI",
          "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC",
          sans-serif;
  --font-num: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Roboto Mono", monospace;

  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-34: 34px;
  --fs-38: 38px;

  /* —— 间距（8 基准） —— */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;

  /* —— 圆角 —— */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;

  /* —— 阴影 —— */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, .08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .10);

  /* —— 布局 —— */
  --container: 1200px;
  --header-h: 60px;

  /* —— 组件尺寸 —— */
  --control-h: 42px;
}