/* Ordo 官网 · 浅色 design token
 *
 * 这一层同时服务两类调用方：
 *   1. 新页面（index.html）只用 --bg / --surface / --text / --brand-* 这套语义名。
 *   2. 改版前就存在的 5 个介绍页与结算页，其内联样式仍写 var(--ink) / var(--panel) /
 *      var(--gold2)。下面「旧名兼容」段把旧名重映射到浅色值，它们接上本文件即转浅，
 *      不必逐条改规则。
 *
 * ⚠️ 旧名兼容段里有两个「名字与值相反」的映射（--white、--gold2）。
 *    这是刻意的：改名要动 6 个页面共数百处引用，漏一处就是一个看不见的字。
 *    新代码一律不得使用旧名。
 *
 * 回滚钩子：某页需要退回深色，把它的 <link tokens-light.css> 换成
 * <link tokens-dark.css> 即可，组件层 site.css 不含任何颜色。
 *
 * 对比度均为 WCAG 相对亮度公式实测值，背景除标注外为 --bg (#fbfaf7)。
 */
:root {
  color-scheme: light;

  /* 底 */
  --bg: #fbfaf7;
  --surface: #ffffff;
  --surface2: #f3efe7;

  /* 文字 */
  --text: #15161a;          /* 17.32:1 AAA */
  --text-muted: #5d5a53;    /*  6.59:1 AA；白底 6.88:1；--surface2 底 6.00:1 */

  /* 分隔线 */
  --line: rgba(21, 22, 26, .10);
  --line-strong: rgba(21, 22, 26, .16);

  /* 品牌金：只能当背景，不能当文字色
   * #d4a85d 直接做浅底上的文字是 2.10:1，连大字的 3:1 门槛都不过。
   * 需要金色强调文字处一律用 --brand（深金）。 */
  --brand: #8a6420;         /* 5.13:1 AA — 强调文字 / 链接 */
  --brand-fill: #d4a85d;    /* 按钮与标签底色 */
  --brand-ink: #17130c;     /* 压在 --brand-fill 上的文字，8.42:1 AAA */
  --brand-soft: rgba(212, 168, 93, .14);

  /* 语义色：登录/账户页要用。深色稿的 #e2907f（浅 Salmon）与 #4ade80（亮绿）
   * 是为深底调的，放到浅底上分别只有 2.4:1 / 1.9:1，报错和「已支付」会看不清。
   * 下面两个值按浅底重定：--danger 白底 7.36、--surface2 底 6.42；--ok 白底 6.20、
   * --surface2 底 5.41；--danger 压在 8% danger-soft 底色上仍 ≥6.2。 */
  --danger: #a3261d;
  --danger-soft: rgba(163, 38, 29, .08);
  --ok: #166f42;

  /* 阴影 */
  --shadow: 0 20px 48px rgba(21, 22, 26, .08);
  --shadow-lg: 0 30px 70px rgba(21, 22, 26, .14);

  /* 字体：沿用改版前各页 :root 里的原栈，不改品牌字形。
   * Bodoni 72 / Iowan Old Style 只在 macOS 有，Windows 自动落到 Songti SC，
   * 与改版前表现一致。这里换顺序等于悄悄换品牌字体，不在本次范围内。 */
  --serif: "Bodoni 72", "Iowan Old Style", "Songti SC", Georgia, serif;
  --sans: "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif;
}

/* ── 旧名兼容（仅供改版前的页面使用，新代码勿用）──────────────────────── */
:root {
  --ink: var(--bg);
  --ink2: var(--surface2);
  --panel: var(--surface);
  --paper: var(--surface2);

  /* 原名指「最亮的颜色」，浅色下它必须是最暗的那个 —— 名字是反的 */
  --white: var(--text);

  /* 原名指「浅金」，浅底上不可读，这里直接换成深金 */
  --gold: var(--brand-fill);
  --gold2: var(--brand);

  /* 旧页面各自的 :root 里都有 --muted，抽公共 token 时漏带过来了。
   * 后果很隐蔽：color: var(--muted) 解析失败会退回「继承父级颜色」，
   * 于是次级文字全渲染成 --text 的纯黑 —— 对比度照样合格，看不出报错，
   * 只是信息层级没了。凡是这类「变量没定义但不报错」的旧名，都得在这里补齐。 */
  --muted: var(--text-muted);
}