/* ============================================================================= * Tools Thicket 设计令牌 —— 全站唯一的颜色/间距/圆角来源 * * 由 site-host 注入到每个工具页的 （和 GA、canonical 同一条链路）， * 不进 dist/。理由和那两个一样，但这里更强： * * 每一轮 LLM 生产都是【独立】的，它没有办法知道上一个工具用了什么颜色。 * 靠提示词写死色值 = 每次都要它照抄一遍，抄错一位就不统一了。 * 实测佐证：expense 与 loan-calculator 都是 gpt-5.5 产出的，值已经高度 * 收敛（正文色 #172033、危险色 #b42318 完全一致），但【命名各不相同】 * （--panel / --card、--text / --ink、--accent / --brand），主色还差了 * 一档（#2563eb vs #2457c5）。所以要统一的不是审美，是【词汇表】。 * * 色值全部来自那两个成品已经收敛出来的值，不是另起炉灶——它们看着确实 * 舒服，没必要推翻重来。全部配对已验过 WCAG AA（正文 4.5:1）： * 正文/背景 15.17:1 正文/卡片 16.27:1 次要/卡片 5.40:1 * 白字/主色 5.17:1 主色/卡片 5.17:1 危险/卡片 6.57:1 成功/卡片 5.85:1 * * 前缀 --tt- 是刻意的：工具自己的 CSS 里怎么定义 --bg / --accent 都不冲突， * 想用站点风格就显式写 var(--tt-primary)。这样【新工具统一、老工具不炸】。 * ========================================================================== */ :root { /* ── 表面 ────────────────────────────────────────────────────────────── */ --tt-bg: #f5f7fb; /* 页面底色 */ --tt-surface: #ffffff; /* 卡片、面板 */ --tt-surface-soft: #fbfdff; /* 次级面板（结果区这类） */ /* ── 文字 ────────────────────────────────────────────────────────────── */ --tt-text: #172033; /* 正文与标题 */ --tt-muted: #5d6b82; /* 说明、单位、辅助文字 */ /* ── 线条 ────────────────────────────────────────────────────────────── */ --tt-line: #d9e1ef; /* 边框、分隔线 */ /* ── 品牌 / 动作 ─────────────────────────────────────────────────────── */ --tt-primary: #2563eb; /* 主按钮、链接、强调 */ --tt-primary-dark: #1d4ed8; /* hover / active */ --tt-primary-soft: #e9f1ff; /* 主色浅底：选中态、结果高亮 */ /* ── 语义 ────────────────────────────────────────────────────────────── */ --tt-danger: #b42318; /* 错误提示、删除 */ --tt-success: #087443; /* 成功、正向数值 */ /* ── 形状与层次 ──────────────────────────────────────────────────────── */ --tt-radius: 12px; --tt-radius-sm: 8px; --tt-shadow: 0 18px 45px rgba(23, 32, 51, 0.10); --tt-shadow-sm: 0 2px 8px rgba(23, 32, 51, 0.06); /* ── 排版 ────────────────────────────────────────────────────────────── */ --tt-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --tt-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ── 间距节奏 ────────────────────────────────────────────────────────── */ --tt-gap: 16px; --tt-gap-lg: 24px; --tt-maxw: 960px; /* 内容最大宽度：跟横向溢出基线配套 */ }