/* ============================================================================
 * tokens.css —— 设计令牌单一真源（阶段一收口，2026-08-16）
 * ───────────────────────────────────────────────────────────────
 * 作用：把所有颜色 / 字号 / 间距 / 半径 / 阴影等设计变量集中到此文件。
 * 各 calcN.css 应当 @import 或 <link> 引用本文件，并改用 var(--xxx)，
 * 【禁止】在各页面级 CSS 中重声明 --primary 等核心令牌（否则主题漂移，
 * 且会被 lint_design_tokens.js 的 T2 规则拦截）。
 *
 * 令牌值原样吸收自 assets/css/calculator.css :root（第 11 行附近），
 * 后续 calculator.css 可改为引用本文件而自身不再定义裸色值。
 * ============================================================================ */

:root {
  /* —— 品牌主色 —— */
  --primary:       #2c80ff;
  --primary-dark:  #1a5fcc;
  --primary-light: #eaf2ff;     /* 浅主色底，真值 #eaf2ff */
  --primary-100:   var(--primary-light); /* 别名，指向 --primary-light，避免同值多名 */

  /* —— 语义色 —— */
  --success: #16a34a;   /* 绿：通过 / 安全 */
  --warning: #d97706;   /* 琥珀：注意 / 警告 */
  --danger:  #dc2626;   /* 红：错误 / 危险 */
  --info:    #0ea5e9;   /* 信息蓝 */

  /* —— 灰度阶（灰板） —— */
  --gray-900: #1e293b;  /* 标题 / 主文字 */
  --gray-700: #334155;  /* 次级文字 */
  --gray-500: #64748b;  /* 占位 / 弱文字 */
  --gray-400: #94a3b8;  /* 辅助说明 */
  --gray-300: #cbd5e1;  /* 边框浅 */
  --gray-200: #e2e8f0;  /* 边框 */
  --gray-100: #f1f5f9;  /* 浅底 */
  --gray-050: #f8fafc;  /* 页面底 */
  --gray-600: #475569;  /* 灰阶补充：次级边框/弱分隔（slate-600） */

  /* —— 基础色 —— */
  --white: #ffffff;
  --black: #000000;

  /* —— 语义浅底（语义色的 50 档，用于状态底纹/提示块） —— */
  --primary-50:  #f0f7ff;  /* 主色浅底 */
  --success-50:  #dcfce7;  /* 绿浅底 */
  --warning-50:  #fef3c7;  /* 琥珀浅底 */
  --danger-50:   #fee2e2;  /* 红浅底 */

  /* —— 字号（可后台调节，全站统一走 --fs-*） —— */
  --fs-display: 28px;
  --fs-h1: 22px;
  --fs-h2: 19px;
  --fs-h3: 16px;
  --fs-h4: 15px;
  --fs-body: 14px;
  --fs-label: 13px;
  --fs-sm: 12px;
  --fs-xs: 11px;

  /* —— 行高 —— */
  --lh-base: 1.6;
  --lh-tight: 1.4;

  /* —— 间距标尺 —— */
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-25: 25px;
  --space-30: 30px;
  --space-40: 40px;
  --space-50: 50px;

  /* —— 布局 —— */
  --column-gap: 16px;
  --module-gap: 5px;
  --container-max-width: 1400px;
  --section-pad-y: 12px;
  --section-pad-x: 14px;

  /* —— 形状 / 阴影 —— */
  --radius: 0px;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 全局兜底：禁止 100vw 元素撑出横向滚动条 */
html,body{overflow-x:hidden;}
