:root {
  /* Colors */
  --color-onyx-canvas: #171721;
  --color-graphite-card: #1e1e2a;
  --color-obsidian-button: #272735;
  --color-slate-border: #70707d;
  --color-mist-border: #e2e3ed;
  --color-ash-text: #c3c3cc;
  --color-ivory-text: #ededf3;
  /* 原始设计体系的强调色,现已由下方 accent 系列取代,保留令牌仅为兼容 */
  --color-cobalt: #5266eb;
  --color-pure-white: #ffffff;

  /* Accent — 中度烘焙咖啡豆棕
     主操作使用豆棕 #8b5a2b,是唯一承载"实心按钮"的颜色;上方的浅烘色
     #b5793c 是它的发光搭档,用于状态点、脉冲环、进度条与徽章。
     按钮文字用纯白而非深色:豆棕明度较低,深咖啡字只有 3.1:1(不达标),
     白字可达 5.8:1。这与黄铜方案刚好相反——明度决定了文字该往哪边走。 */
  --color-accent: #8b5a2b;
  --color-accent-hover: #9e672f;
  --color-accent-active: #7a4e23;
  --color-accent-amber: #b5793c;
  --color-accent-fg: #ffffff;
  /* 强调色的半透明叠加,供图表描边、内联徽章、聚焦环与径向光晕复用 */
  --color-accent-rgb: 139, 90, 43;
  --color-accent-amber-rgb: 181, 121, 60;

  /* Fonts
     Latin first, CJK fallback: Inter covers Latin letters and numerals only; Han
     characters fall through to the second family. Order must not be reversed. */
  --font-han: "PingFang SC", "HarmonyOS Sans SC", "MiSans",
              "Noto Sans SC", "Source Han Sans SC",
              "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --font-arcadia: 'Inter', var(--font-han);
  --font-arcadiadisplay: 'Inter', var(--font-han);

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.4;
  --tracking-caption: 0.12px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.6;
  --tracking-body-sm: 0;
  --text-body: 16px;
  --leading-body: 1.7;
  --text-body-lg: 17px;
  --leading-body-lg: 1.7;
  --text-subheading: 20px;
  --leading-subheading: 1.5;
  --text-heading-sm: 26px;
  --leading-heading-sm: 1.35;
  --tracking-heading-sm: 0;
  --text-heading: 30px;
  --leading-heading: 1.35;
  --tracking-heading: 0;
  --text-heading-lg: 38px;
  --leading-heading-lg: 1.3;
  --tracking-heading-lg: 0;
  --text-display: 58px;
  --leading-display: 1.25;
  --tracking-display: 0.01em;
  /* 内页标题(价格 / 关于 / 通用内页):比首页首屏低一档 */
  --text-page-title: 38px;
  --leading-page-title: 1.3;

  /* Typography — Weights
     中文字体没有 360/420/480/530 这些中间档,继续用会被浏览器合成加粗
     (faux bold)。这里把所有档位收进中文真实存在的 400/500。 */
  --font-weight-w360: 400;
  --font-weight-regular: 400;
  --font-weight-w420: 400;
  --font-weight-w480: 500;
  --font-weight-w530: 500;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-56: 56px;
  --spacing-72: 72px;
  --spacing-112: 112px;
  --spacing-128: 128px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 72px;
  --card-padding: 32px;
  --element-gap: 12px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-3xl: 32px;
  --radius-3xl-2: 40px;

  /* Named Radii */
  --radius-nav: 40px;
  --radius-tags: 40px;
  --radius-cards: 12px;
  --radius-inputs: 32px;
  --radius-buttons: 32px;
  --radius-default: 4px;

  /* Surfaces */
  --surface-onyx-canvas: #171721;
  --surface-graphite-card: #1e1e2a;
  --surface-obsidian-button: #272735;
}

/* ==========================================================================
   移植补充令牌
   --------------------------------------------------------------------------
   原型 styles.css 里有一批颜色没有各自的命名令牌(直接写十六进制或 rgba),
   以及几个"比卡片再深一层"的层级色(浮层、页脚、危险/警告语义色)。
   移植脚本 tools/port-prototype-css.js 把它们统一映射到这里声明的令牌上,
   这样 site.css 里**一个颜色字面量都不剩**(D-014)。

   通道令牌(--*-rgb)存在的唯一理由:rgba() 只允许透明度是字面量,
   而 r/g/b 三个通道必须也能被主题覆盖,否则改主题时半透明层不会跟着变。
   用法:rgba(var(--canvas-rgb), 0.62)
   ========================================================================== */
:root {
  /* 通道令牌 —— 供 rgba(var(--x), a) 使用 */
  --canvas-rgb: 23, 23, 33;
  --graphite-rgb: 30, 30, 42;
  --obsidian-rgb: 39, 39, 53;
  --ivory-rgb: 237, 237, 243;
  --mist-rgb: 226, 227, 237;
  --ash-rgb: 195, 195, 204;

  /* 层级色 —— 比 --color-graphite-card 更深/更浅的浮层与页脚 */
  --color-elevated: #30303f;
  --color-graphite-raised: #22222f;
  --color-footer: #14141d;

  /* 语义色 —— 前台只用危险(失败提示)与琥珀(警示/过期)两组 */
  --color-danger: #e2716f;
  --color-danger-strong: #e79391;
  --color-danger-soft: #f2b5b4;
  --color-amber-pale: #e0b184;

  /* 纯黑,只用于投影与遮罩 */
  --color-shadow: #000000;
}
