/* ==========================================================================
tokens.css — 运输明细 × 发票 核对工具 · 设计 Token
--------------------------------------------------------------------------
本文件是项目中【颜色 / 排版 / 间距 / 圆角 / 层级 / 动效 / 布局】的唯一真相来源。
其他任何 CSS 只允许 var(--...) 引用，不得出现硬编码色值（#fff / #000 除外）。
来源与依据：
· SPEC.md v1.1 §8 设计 Token（锁定）
· SPEC.md v1.1 §5.1 结果契约 / §8 三态×异常正交编码（锁定）
· ADR-006：Jinja2 SSR + 原生 ES modules，无构建链、无 Node、无 React
· 不引入外部字体文件（内网、无 CDN、中文字体包体积不可接受）
浏览器基线：Chromium 100（2022-03）
· 允许：flex gap、:is()、:where()、aspect-ratio、inset、CSS 变量
· 禁用：:has()、原生 CSS nesting、container queries、oklch()、color-mix()
—— 旧内核里这些特性不报错、只丢样式，是最难排查的一类故障
图标：Lucide SVG sprite（），非 createIcons()。
sprite 文件头记录 Lucide 版本作为锁定证据，本文件不重复声明。
========================================================================== */
:root {
/* ======================================================================
1. 中性色阶 — 冷灰（hue ≈ 218），刻意不用米色 / 奶油色底
====================================================================== */
--color-bg: #F7F8FA; /* 页面底 */
--color-surface: #FFFFFF; /* 卡片 / 表格 / 下拉 / 弹层 */
--color-surface-2: #F1F3F6; /* 表头、行 hover、引文块底 */
--color-surface-3: #E8EBF0; /* 分区底、禁用底、骨架屏 */
--color-border: #DFE3E8; /* 默认 1px 边框 */
--color-border-soft: #EDEFF2; /* 表格行分隔、内部 hairline */
--color-border-strong: #C6CCD4; /* 输入框、可聚焦容器 */
--color-fg: #12181F; /* 主文本，对白底 16.8:1 */
--color-fg-2: #3D4854; /* 次文本，8.6:1 —— 口径声明用这档 */
--color-muted: #68737F; /* 辅助文本最浅档，5.6:1，过 AA */
--color-meta: #9AA3AD; /* 注意：仅限非文本元素（分隔点、占位图形、
禁用图标）。对白底仅 2.6:1，
任何文字都不得使用此值 */
/* ======================================================================
2. 强调色 — 藏青（单据 / 印章 / 凭证的业务语言）
每屏可见出现 ≤ 2 处：主操作按钮 + 当前选中项
====================================================================== */
--color-accent: #22436B; /* 对白底 10.1:1 */
--color-accent-hover: #1A3554;
--color-accent-active: #142943;
--color-accent-bg: #E8EDF3; /* 选中行底、次级按钮底 */
--color-accent-border: #C3CEDC;
--color-accent-on: #FFFFFF;
/* ======================================================================
3. 语义色 — 命名约定 {name} / {name}-bg / {name}-border
每个前景色对其 -bg 均 ≥ 4.5:1（已实测）
分工（SPEC §8 锁定）：
success 绿 no_gap_found 且无异常（唯一允许纯绿的组合）
warn 琥珀 净重需确认（异常行 + 通过态横幅内的常驻 pill）
danger 红 gap_suspected 有漏票；系统级错误页
info 蓝 口径声明 / 判定逻辑说明
unverifiable 灰蓝 cannot_verify 判不了；suspected_pairs 待人工裁决
====================================================================== */
/* 绿 —— no_gap_found 且 has_anomaly = false */
--color-success: #1E7A4D; /* 对 #EAF5EF 4.62:1 */
--color-success-bg: #EAF5EF;
--color-success-border: #BFE0CD;
/* 琥珀 —— 净重需人工确认（AC-09）与通过态横幅内的异常 pill */
--color-warn: #B45309; /* 对 #FDF3E4 4.62:1 */
--color-warn-bg: #FDF3E4;
--color-warn-border: #F0D2A3;
/* 红 —— gap_suspected（发现未开票车辆）与系统级失败 */
--color-danger: #B42318; /* 对 #FCEDEA 5.81:1 */
--color-danger-bg: #FCEDEA;
--color-danger-border: #F2C4BD;
/* 蓝 —— 口径声明、判定逻辑说明、信息性提示 */
--color-info: #1D5A8A; /* 对 #EAF1F7 6.40:1 */
--color-info-bg: #EAF1F7;
--color-info-border: #BBD2E4;
/* 灰蓝 —— cannot_verify（判不了，不是错）与 suspected_pairs（单条判不了）
两级粒度复用同一语义家族：整批无资格下结论 / 单条无资格下结论 */
--color-unverifiable: #47566B; /* 对 #EEF1F5 6.59:1 */
--color-unverifiable-bg: #EEF1F5;
--color-unverifiable-border: #D2D8E0;
/* 吨位差方向 —— 不用色相编码
正负不是价值判断：「发票 > 清单」可能只是分批开票，不是问题。
用色相编码一个非价值的方向，等于告诉用户"正的方向是一种问题"。
方向由「符号 + 方向文字」承担（−18.5 吨（−4.2%）· 缺票方向），
颜色一律中性深色，色相留给真正的语义分档。 */
--color-diff: var(--color-fg);
--color-diff-muted: var(--color-muted);
/* ======================================================================
4. 结论语义别名 —— 把 SPEC §8「三态 × 异常正交编码」直接织进 CSS
开发写横幅时只允许引用 --verdict-*，不得自行挑 --color-*
避免「三态四种视觉」被手工映射错
====================================================================== */
--verdict-pass-fg: var(--color-success);
--verdict-pass-bg: var(--color-success-bg);
--verdict-pass-border: var(--color-success-border);
/* 通过但证据降级（SPEC AC-05 / §8 v1.2）
「绿色只代表证据完整且未发现，不代表没发现问题。」
降级态禁止任何绿色，且不引入第 5 个色相——
用中性描边（白底 + 1px 边框 + 深色文字）把视觉强度压到绿色以下，
避免与灰蓝 cannot_verify 混淆 */
--verdict-degraded-fg: var(--color-fg);
--verdict-degraded-bg: var(--color-surface);
--verdict-degraded-border: var(--color-border-strong);
--verdict-gap-fg: var(--color-danger);
--verdict-gap-bg: var(--color-danger-bg);
--verdict-gap-border: var(--color-danger-border);
--verdict-cannot-fg: var(--color-unverifiable);
--verdict-cannot-bg: var(--color-unverifiable-bg);
--verdict-cannot-border: var(--color-unverifiable-border);
/* 通过态 + 存在异常行时，横幅内追加的常驻 pill（SPEC §8：不得纯绿） */
--anomaly-pill-fg: var(--color-warn);
--anomaly-pill-bg: var(--color-warn-bg);
--anomaly-pill-border: var(--color-warn-border);
/* ======================================================================
5. 组件级语义别名 —— 组件 CSS 只引用这一层
====================================================================== */
/* 拖拽投放区 */
--dropzone-border: var(--color-border-strong);
--dropzone-bg: var(--color-bg);
--dropzone-hover-border: var(--color-accent-border);
--dropzone-hover-bg: var(--color-surface-2);
--dropzone-active-border: var(--color-accent);
--dropzone-active-bg: var(--color-accent-bg);
--dropzone-error-border: var(--color-danger-border);
--dropzone-error-bg: var(--color-danger-bg);
/* 表格 */
--table-header-bg: var(--color-surface-2);
--table-header-fg: var(--color-fg-2);
--table-row-hover-bg: var(--color-surface-2);
--table-row-selected-bg: var(--color-accent-bg);
--table-divider: var(--color-border-soft);
--table-excel-total-bg: var(--color-surface-2);
/* 证据编号（源表行号 / 车牌 / 发票号）—— 点号下划线，像证据不像正文 */
--evidence-fg: var(--color-fg);
--evidence-decoration: var(--color-border-strong);
--evidence-hover-fg: var(--color-accent);
--evidence-hover-decoration: var(--color-accent);
/* 疑似配对横条 —— 与 cannot_verify 同色系（均为「系统无资格下结论」），
靠形态区分：横条 + 双裁决按钮 vs 整宽结论横幅 */
--pair-bg: var(--color-unverifiable-bg);
--pair-border: var(--color-unverifiable-border);
--pair-fg: var(--color-unverifiable);
/* 进度条 */
--progress-track: var(--color-surface-3);
--progress-bar: var(--color-accent);
/* ======================================================================
6. 交互态
====================================================================== */
--color-focus-ring: rgba(34, 67, 107, 0.30);
--color-scrim: rgba(18, 24, 31, 0.45);
--color-skeleton: var(--color-surface-3);
--color-skeleton-shine: var(--color-surface-2);
/* ======================================================================
7. 字体 —— 纯系统栈，零外部请求
SPEC §8 原栈为「-apple-system, "Segoe UI", "Noto Sans SC", sans-serif」。
本处补入 "PingFang SC" / "Microsoft YaHei"：
Windows 上若未安装 Noto Sans SC，原栈的中文会落到浏览器默认
sans-serif（部分环境即宋体），而本工具满屏中文表头。
补入后 macOS 结果与原栈完全一致，Windows 更稳。
拉丁与数字仍走 Segoe UI —— 微软雅黑的数字字形撑不住满屏数据核对。
mono 栈仅用于发票号 / 车牌号 / 源表行号，全部系统内置，零下载。
====================================================================== */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
"Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB",
Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas",
"Liberation Mono", "Microsoft YaHei", monospace;
/* 字号阶梯（固定 px，SPEC §8：11/12/13/14/16/20/24/30） */
--text-xs: 11px; /* 表格内补充标记、极短元数据 */
--text-sm: 12px; /* 表头、口径声明、pill、辅助说明 */
--text-base: 13px; /* 表格正文、正文默认 */
--text-md: 14px; /* 说明段落、吨位咬合引文块 */
--text-lg: 16px; /* 区内小标题 */
--text-xl: 20px; /* KPI 数值 */
--text-2xl: 24px; /* 结论主句 */
--text-3xl: 30px; /* 登录页左侧信息板标题 */
/* 字重（SPEC §8：400/500/600。系统字体非可变字重，不用 510/590） */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--leading-body: 1.5;
--leading-table: 1.4;
--leading-title: 1.25;
--tracking-caps: 0.04em; /* 表头、全大写标签 */
--tracking-title: -0.01em; /* ≥24px 标题 */
--tracking-normal: 0;
/* ======================================================================
8. 间距 —— 严格 4px 网格，不出现 5 / 7 / 13 / 22
====================================================================== */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
/* ======================================================================
9. 圆角 —— 卡片上限 8px，不做过度圆滑
====================================================================== */
--radius-sm: 4px; /* pill 内元素、小标签 */
--radius-md: 6px; /* 按钮、输入框、下拉 */
--radius-lg: 8px; /* 卡片、投放区、结论横幅 */
--radius-xl: 12px; /* drawer、modal */
--radius-pill: 9999px;
/* ======================================================================
10. 层级 —— 默认无阴影，靠 1px 边框与表面色差分层
（同一个元素不同时出现 1px 边框 + 模糊阴影）
====================================================================== */
--elev-flat: none;
--elev-ring: 0 0 0 1px var(--color-border);
--elev-sticky: 0 1px 0 0 var(--color-border);
--elev-overlay: 0 8px 24px rgba(18, 24, 31, 0.14);
--z-base: 0;
--z-sticky: 100;
--z-dropdown: 200;
--z-drawer: 300;
--z-modal: 400;
--z-toast: 500;
/* ======================================================================
11. 焦点与动效（SPEC §8：120/160/220ms）
====================================================================== */
--focus-ring: 0 0 0 3px var(--color-focus-ring);
--motion-fast: 120ms; /* 按下、hover */
--motion-base: 160ms; /* 状态切换、展开折叠 */
--motion-slow: 220ms; /* drawer、modal 进入 */
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
/* ======================================================================
12. 布局 —— 桌面优先，最小 1280，不做移动端
====================================================================== */
--layout-min-width: 1280px;
--layout-max: 1240px; /* 结果页 / 表格页内容宽 */
--layout-form-max: 420px; /* 登录表单宽 */
--layout-gutter: 24px;
--topbar-height: 48px; /* 顶部应用条 —— 无左侧导航 */
--breadcrumb-height: 40px;
--table-row-height: 40px;
--table-row-compact: 36px;
--table-header-height: 36px;
--table-cell-px: 12px;
--col-rownum-width: 72px; /* 源表行号列冻结宽 */
--col-status-width: 112px;
/* 结论横幅状态图标容器（替代 24px 图标，尺寸档位保持 16/20 两档） */
--badge-icon-size: 32px;
}
/* ==========================================================================
无障碍基线
========================================================================== */
/* 尊重系统「减少动态效果」 */
@media (prefers-reduced-motion: reduce) {
:root {
--motion-fast: 0ms;
--motion-base: 0ms;
--motion-slow: 0ms;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* 键盘焦点：仅键盘导航时出现，鼠标点击不出现 */
:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-radius: var(--radius-sm);
}
/* ==========================================================================
通用工具类
========================================================================== */
/* 屏幕阅读器专用文本 */
.u-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* 数字对齐 —— 车牌 / 净重 / 金额 / 发票号的比对前提 */
.u-num {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
text-align: right;
}
/* 证据编号 —— 等宽，看起来像证据编号而非普通灰字 */
.u-mono {
font-family: var(--font-mono);
font-size: var(--text-sm);
font-variant-numeric: tabular-nums;
letter-spacing: 0;
}
/* 图标基类 ——
stroke-width 已烘进 sprite 的 ，此处不再声明，杜绝逐处覆盖 */
.i {
display: inline-block;
flex: none;
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
vertical-align: middle;
}
.i--16 { width: 16px; height: 16px; }
.i--20 { width: 20px; height: 20px; }
/* 防溢出兜底 —— 不做移动端适配，仅防 125% 缩放后炸版
（1440 屏 @125% 缩放，视口仅 1152px < 1280 设计宽度）
财务笔记本大概率就是这个状态 */
@media (max-width: 1279px) {
.app { min-width: var(--layout-min-width); }
.t-table__wrap { overflow-x: auto; }
}