/* ForexPay · 设计令牌（单一来源）
 *
 * 这份文件是四个前端站点（收银台、官网、商户后台、代理后台）唯一的设计令牌来源。
 * 不要在各站点里直接改 css/tokens.css —— 那是拷贝，会被 tools/sync-shared.sh 覆盖。
 * 改法见 shared/README.md：改这里 → 在每个站点里跑 `npm run sync` → 两边一起提交。
 *
 * 值出自 docs/ForexPay白标-设计-2026-10-21.md 第 10.1 节。
 *
 * 对比度（设计方案里已逐个核过，改色前请重核）：
 *   - 金 --gold 在米白底上约 2.4:1，**不达标，不能当文字**。金色只用来做细线、描边、色块、
 *     以及**墨绿底上**的文字（深底上金色达标）。
 *   - 翡翠 --jade 在米白底上 5.4:1，达标，米白底上的强调文字用它。
 *   - 主按钮是墨绿底白字（16:1），不是金底。次按钮是米白底 + 金色 1px 描边 + 墨绿文字。
 *
 * 版本：改动令牌值时把 --tokens-version 往上加一档，方便排查各站拷贝是否同步。
 */

:root {
  --tokens-version: "1";

  /* ---------- 颜色 ---------- */
  --ink: #0B332C;             /* 墨绿 · 主色：顶栏、主按钮底、标题 */
  --ink-deep: #07241E;        /* 墨绿加深 · 官网首屏底 */
  --ink-line: #1F4A40;        /* 深底上的分隔线、深底上的描边按钮 */
  --jade: #1B6B5A;            /* 翡翠 · 强调（米白底上做文字达标 5.4:1） */
  --jade-dark: #0F3D35;       /* 翡翠 hover */
  --jade-wash: #E3EFE7;       /* 翡翠浅底 · 轻量按钮、成功标签底 */
  --gold: #C8A24A;            /* 金 · 细线 / 描边 / 色块 / 深底上的文字。**米白底上不能当文字** */
  --gold-light: #E0BE6C;      /* 金 hover（只在深底上） */
  --vermilion: #A82C22;       /* 朱红 · 印章、负数、错误 */

  --bg: #F7F3EA;              /* 米白 · 页面底 */
  --surface: #FFFDF8;         /* 卡片底 */
  --line: #E0D6C2;            /* 描边 */
  --line-soft: #EDE8DC;       /* 更浅的分隔线 · 表格行线 */
  --text: #2A2622;            /* 正文 */
  --text-2: #6B6459;          /* 次要文字 */
  --text-on-ink: #F7F3EA;     /* 墨绿底上的正文 */
  --text-on-ink-2: #B9C7BF;   /* 墨绿底上的次要文字 */

  /* 状态色：成对使用（文字色 / 底色） */
  --ok: #15543F;        --ok-bg: #E3EFE7;
  --pending: #7A5300;   --pending-bg: #FBF0D5;
  --error: #A82C22;     --error-bg: #F8E6E2;
  --busy: #1F4D7A;      --busy-bg: #E4EDF6;
  --closed: #6B6459;    --closed-bg: #EDE8DC;

  /* ---------- 字体 ---------- */
  /* 不从 Google Fonts 加载（大陆访问不了，首屏还会被挡住）。装了思源宋体 / 思源黑体的机器直接用，
     其余退到系统的明体 / 黑体。要自己托管 Noto Serif HK / Noto Sans HK 子集，见各站 README 的「字体」一节。 */
  --font-serif: "Noto Serif HK", "Songti SC", "Songti TC", "Source Han Serif SC", "Source Han Serif HC",
                "PMingLiU", "SimSun", Georgia, serif;
  --font-sans: "Noto Sans HK", "PingFang SC", "PingFang HK", "Hiragino Sans GB",
               "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* 字号：收银台是手机优先（390px 基准），后台和官网用同一套刻度 */
  --fs-11: 11px;   /* 标签、角标 */
  --fs-12: 12px;   /* 辅助说明 */
  --fs-13: 13px;   /* 表格、键值对 */
  --fs-14: 14px;   /* 正文小 */
  --fs-15: 15px;   /* 正文 / 卡片标题 */
  --fs-16: 16px;   /* 按钮 / 小标题 */
  --fs-18: 18px;
  --fs-21: 21px;
  --fs-26: 26px;
  --fs-31: 31px;   /* 区块标题 */
  --fs-37: 37px;   /* 收银台金额 */
  --fs-52: 52px;   /* 官网首屏主标题（手机上另算，见各站 CSS 的媒体查询） */

  --lh-tight: 1.2;
  --lh-base: 1.7;
  --lh-loose: 1.95;

  /* 字距：明体标题和中文字标要撑开一点才像招牌 */
  --ls-title: .04em;
  --ls-label: .2em;      /* 小写标签「应付金额」这类 */
  /* 副名字标的字距。2026-10-22 起字标只有 ForexPay、不放副名，brand.js 的 lockup 已经不画副名了，
     收银台和官网也都不再引用这个值。**四个站都确认不用之后可以删掉这一行**（留着是怕期 5 还有地方引用）。 */
  --ls-cn-mark: .34em;
  --ls-btn: .08em;

  /* ---------- 圆角 / 描边 ---------- */
  --radius: 3px;         /* 一律 3px，不用大圆角 */
  --radius-card: 4px;    /* 卡片略大一档（设计稿里卡片是 4px） */
  --border: 1px;
  --border-strong: 2px;  /* 顶栏下的金线、区块分界 */
  --border-accent: 3px;  /* 卡片顶边、提示条左边 */
  /* 不用阴影：保留单据的硬朗感。需要分层时用描边或底色区分。 */
  --shadow: none;

  /* ---------- 间距 ---------- */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 9px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 20px;
  --sp-7: 26px;
  --sp-8: 36px;
  --sp-9: 48px;
  --sp-10: 62px;

  /* ---------- 其他 ---------- */
  --tap: 44px;              /* 触摸目标最小边长（无障碍） */
  --page-max: 1200px;       /* 官网内容最大宽度 */
  --focus-ring: 2px solid var(--jade);
  --focus-offset: 2px;
}