/* tool-base.css —— 全站工具页共享设计 token（design.md 的 CSS 实现）
 * 批次 C 第一步：把 23 个工具页各抄一份的 :root token 收敛到这一份。
 * 现有公共 token（值与各页字节级一致，等价替换、不改观感）+ design.md 新增语义步阶（纯增量）。
 * 引用：工具页 <head> 加 <link rel="stylesheet" href="/css/tool-base.css">，再删掉自己 <style> 里逐值相同的 :root。
 * 组件样式合并 + 圆角/字号归并 + 焦点环（会改观感的部分）待 DD 可视验证后再做。
 */
:root {
  /* ── 现有公共 token（旧名，各页正在用，值不变）── */
  --bg: #fbf7f0;
  --card: #fff;
  --ink: #3a3431;
  --muted: #8a807a;
  --line: #ece4d9;
  --accent: #e8855e;
  --accent-soft: #fbeee2;
  --ok: #5b8a72;
  --gold: #d8a657;
  --shadow: 0 2px 12px rgba(120, 90, 60, .08);

  /* ── design.md 新增：暖橙 accent 语义步阶（100→1000，步数=交互意图）── */
  --accent-100: #fdf4ed;  /* 默认浅底 */
  --accent-200: #fbeee2;  /* 悬停底（= --accent-soft）*/
  --accent-300: #f6ddca;  /* 激活底 */
  --accent-400: #f0c8a9;  /* 默认边框 */
  --accent-500: #e9ad83;  /* 悬停边框 */
  --accent-600: #e3935f;  /* 激活边框 */
  --accent-700: #e8855e;  /* 实心填充（主按钮，= --accent）*/
  --accent-800: #d6713f;  /* 填充悬停 */
  --accent-900: #a85a3c;  /* 次要强调文字 */
  --accent-1000: #7c4026; /* 主强调文字 */

  /* ── 中性灰步阶（暖调，实色，文字/不透明填充）── */
  --gray-100: #fbf7f0;  /* 主表面（= --bg）*/
  --gray-200: #f7f2ea;  /* 次表面/悬停底 */
  --gray-300: #f1e8db;  /* 激活表面 */
  --gray-400: #ece4d9;  /* 默认边框（= --line）*/
  --gray-500: #dccfbd;  /* 悬停边框 */
  --gray-600: #c5b6a0;  /* 强边框 */
  --gray-700: #b3a695;  /* 占位/禁用前景 */
  --gray-800: #9a8f84;  /* 弱次要文字 */
  --gray-900: #8a807a;  /* 次要文字（= --muted）*/
  --gray-1000: #3a3431; /* 主文字（= --ink）*/

  /* ── 半透明灰（边框/分隔/遮罩/阴影，叠任何底）── */
  --gray-alpha-100: rgba(120, 90, 60, .04);
  --gray-alpha-200: rgba(120, 90, 60, .06);
  --gray-alpha-300: rgba(120, 90, 60, .08);
  --gray-alpha-400: rgba(120, 90, 60, .12);
  --gray-alpha-700: rgba(58, 52, 49, .55);
  --gray-alpha-900: rgba(40, 30, 25, .82);

  /* ── 健康语义状态色（含义固定：就医分层，勿当装饰）── */
  --emergency-100: #fbecec; --emergency-400: #f0c9c9; --emergency-700: #d65a5a; /* 立即就医 红 */
  --warning-100: #fbf3e9;   --warning-700: #e08a3c;   /* 尽快看医生 橙 */
  --success-100: #eef5f0;   --success-700: #5b8a72;   /* 安全/正常 绿（= --ok）*/
  --info-100: #f1f4f7;      --info-700: #6a7f9a;      /* 一般说明 蓝灰 */
  --spectrum-100: #f0f3f9;  --spectrum-700: #6a7fb0;  /* 各家观点 蓝紫 */
  /* 健康内容旧名别名（各页已在用，保留）*/
  --emg: #d65a5a; --soon: #e08a3c; --info: #6a7f9a; --spec: #6a7fb0;

  /* ── 圆角五档 / 阴影两档（批次 C 后续把杂值就近归并）── */
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-pill: 22px; --r-full: 999px;
  --shadow-pop: 0 10px 40px rgba(40, 30, 25, .25);
}

/* ══ 批次 C-2：公共组件 + 焦点环 ══
 * 页面删掉自己 <style> 里同名的定义即继承这套；页面特有变体保留为附加规则。
 * 没转换的页面：自己的同名规则在 cascade 里覆盖这套，不受影响（inert）。 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", sans-serif; background: var(--bg); color: var(--ink); line-height: 1.6; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; font-size: inherit; }
.h1 { font-size: 23px; font-weight: 800; }
.sub { color: var(--muted); font-size: 13px; margin-top: 5px; line-height: 1.5; }
.card { background: var(--card); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow); }
.panel { background: var(--card); border-radius: var(--r-md); padding: 14px; box-shadow: var(--shadow); }
.dz { font-size: 12px; color: #6a5f55; background: var(--gray-200); border-radius: var(--r-lg); padding: 13px 15px; line-height: 1.6; }
.dz b { color: var(--ink); }

/* 打印隐藏：装饰 emoji 等用 <span class="np"> 包住，屏幕显示、打印不出（印刷体更干净）*/
@media print { .np { display: none !important; } }

/* 焦点环（无障碍：键盘 Tab 时才显示橙环，鼠标/手指点击不受影响）*/
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-700);
  outline-offset: 1px;
  box-shadow: 0 0 0 3px var(--accent-200);
}
