/*
 * 令牌的类形式。
 *
 * 设计要求是「Tailwind 只保留布局类，颜色一律走 var(--)」，而 Tailwind 的
 * `text-slate-500` 这类工具类把颜色写死在类名里——换主题、换色弱模式时它们
 * 一动不动。这里给每个语义令牌一个类，页面用类、类引用令牌，主题切换就只
 * 发生在 design-tokens.css 一处。
 *
 * 命名用 `tk-` 前缀（token），短、且不与 Tailwind 的任何前缀撞车。
 *
 * 语义只有四组，多一组都要有理由：
 *   up / down       涨跌、通过/排除、健康/失败——方向性的二元判断
 *   caution         需要人工确认的警示。设计原话是「其余全部灰阶」，但警告
 *                   退成灰色就不再是警告了，所以它保留为第三组语义。
 *   accent          只用于「当前选中」和链接，不承载数据含义
 * 其余一律灰阶。控制台原本铺了九个颜色家族（slate/cyan/emerald/rose/amber/
 * sky/indigo/violet/teal），到处都在喊等于没有地方在喊。
 *
 * 不在这里定义字号、间距、圆角：那些是布局，Tailwind 继续管。
 */

/* —— 文字 —— */
.tk-ink { color: var(--ink); }
.tk-ink-2 { color: var(--ink-2); }
.tk-muted { color: var(--muted); }
.tk-up { color: var(--up); }
.tk-down { color: var(--down); }
.tk-caution { color: var(--caution); }
.tk-accent { color: var(--accent); }

/* —— 背景 —— */
.tk-bg-page { background-color: var(--bg); }
.tk-bg-surface { background-color: var(--surface); }
.tk-bg-surface-2 { background-color: var(--surface-2); }
.tk-bg-up { background-color: var(--up-bg); }
.tk-bg-down { background-color: var(--down-bg); }
.tk-bg-caution { background-color: var(--caution-bg); }
.tk-bg-accent { background-color: var(--accent-bg); }

/*
 * 半透明表面。原来写的是 `bg-slate-900/60` 这类，直接换成实色会改变观感——
 * 底下那层本来是透出来的。color-mix 让它继续跟着令牌走，同时保住透明度。
 */
/*
 * 原来有八档透明度（30/35/40/50/60/70/90/95），归并成三档：淡、半、浓。
 * 八档里没有一档是靠肉眼分得出来的，而每多一档就多一个要在两种主题、三种
 * 外观下各自成立的组合。收敛本来就是这次改动的目的。
 */
.tk-bg-surface-50 { background-color: color-mix(in srgb, var(--surface) 50%, transparent); }
.tk-bg-surface-60 { background-color: color-mix(in srgb, var(--surface) 70%, transparent); }
.tk-bg-surface-90 { background-color: color-mix(in srgb, var(--surface) 92%, transparent); }
.tk-bg-surface-2-50 { background-color: color-mix(in srgb, var(--surface-2) 50%, transparent); }
.tk-bg-surface-2-60 { background-color: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.tk-bg-page-50 { background-color: color-mix(in srgb, var(--bg) 50%, transparent); }
.tk-bg-page-60 { background-color: color-mix(in srgb, var(--bg) 70%, transparent); }
.tk-bg-page-90 { background-color: color-mix(in srgb, var(--bg) 92%, transparent); }

/* —— 边框 —— */
.tk-line { border-color: var(--line); }
.tk-line-hi { border-color: var(--line-hi); }
.tk-line-up { border-color: color-mix(in srgb, var(--up) 40%, transparent); }
.tk-line-down { border-color: color-mix(in srgb, var(--down) 40%, transparent); }
.tk-line-caution { border-color: color-mix(in srgb, var(--caution) 40%, transparent); }
.tk-line-accent { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

/* 分隔线：Tailwind 的 divide-* 作用在子元素之间，语义与 border-color 相同。 */
.tk-divide > * + * { border-color: var(--line); }

/* —— 悬停与键盘焦点态 ——
 *
 * 基态换成了令牌、hover 态留在 Tailwind 上，是这次收敛漏掉的一半：Tailwind 的
 * 值不跟主题走，于是浅色模式下元素静止时用令牌、鼠标移上去跳到深色主题的颜色。
 * 实测悬停「退出登录」是 rgb(68,87,111) → rose-300、背景近白，**1.81:1**；
 * 84 处里 47 处低于 WCAG 4.5。三个浏览器验收当时全绿，因为**它们从不悬停**。
 *
 * 每条都同时挂 :focus-visible——键盘用户和鼠标用户看到的反馈必须是同一种。
 */
/* `:not(:live-off)` 那一截是失效排除：失效控件点不动，就不该对悬停有反应。
   实测「审计已选窗口」按钮 disabled 时悬停仍然换底色（透明 -> rgb(16,35,58)），
   看起来能点其实不能——而 WCAG 1.4.3 又把失效控件排除在对比度要求之外，
   于是那颗按钮既骗人、又让对比度闸量出一个 2.09:1 的假缺陷。两头都从这里堵。 */
.tk-hover-ink:not(:disabled, [aria-disabled="true"]):hover, .tk-hover-ink:not(:disabled, [aria-disabled="true"]):focus-visible { color: var(--ink); }
.tk-hover-accent:not(:disabled, [aria-disabled="true"]):hover, .tk-hover-accent:not(:disabled, [aria-disabled="true"]):focus-visible { color: var(--accent); }
.tk-hover-up:not(:disabled, [aria-disabled="true"]):hover, .tk-hover-up:not(:disabled, [aria-disabled="true"]):focus-visible { color: var(--up); }
.tk-hover-down:not(:disabled, [aria-disabled="true"]):hover, .tk-hover-down:not(:disabled, [aria-disabled="true"]):focus-visible { color: var(--down); }
.tk-hover-caution:not(:disabled, [aria-disabled="true"]):hover, .tk-hover-caution:not(:disabled, [aria-disabled="true"]):focus-visible { color: var(--caution); }
/* 基态已经是语义色时再换语义色等于没有反馈，改为提到最高对比的那一档。 */
.tk-hover-strong:not(:disabled, [aria-disabled="true"]):hover, .tk-hover-strong:not(:disabled, [aria-disabled="true"]):focus-visible { color: var(--ink-max); }

.tk-hover-bg-surface-2:not(:disabled, [aria-disabled="true"]):hover, .tk-hover-bg-surface-2:not(:disabled, [aria-disabled="true"]):focus-visible { background-color: var(--surface-2); }
.tk-hover-bg-accent:not(:disabled, [aria-disabled="true"]):hover, .tk-hover-bg-accent:not(:disabled, [aria-disabled="true"]):focus-visible { background-color: var(--accent-bg); }
.tk-hover-bg-up:not(:disabled, [aria-disabled="true"]):hover, .tk-hover-bg-up:not(:disabled, [aria-disabled="true"]):focus-visible { background-color: var(--up-bg); }
.tk-hover-bg-down:not(:disabled, [aria-disabled="true"]):hover, .tk-hover-bg-down:not(:disabled, [aria-disabled="true"]):focus-visible { background-color: var(--down-bg); }
.tk-hover-bg-caution:not(:disabled, [aria-disabled="true"]):hover, .tk-hover-bg-caution:not(:disabled, [aria-disabled="true"]):focus-visible { background-color: var(--caution-bg); }

.tk-hover-line-hi:not(:disabled, [aria-disabled="true"]):hover, .tk-hover-line-hi:not(:disabled, [aria-disabled="true"]):focus-visible { border-color: var(--line-hi); }
.tk-hover-line-accent:not(:disabled, [aria-disabled="true"]):hover, .tk-hover-line-accent:not(:disabled, [aria-disabled="true"]):focus-visible { border-color: var(--accent); }
.tk-hover-line-up:not(:disabled, [aria-disabled="true"]):hover, .tk-hover-line-up:not(:disabled, [aria-disabled="true"]):focus-visible { border-color: var(--up); }
.tk-hover-line-down:not(:disabled, [aria-disabled="true"]):hover, .tk-hover-line-down:not(:disabled, [aria-disabled="true"]):focus-visible { border-color: var(--down); }
.tk-hover-line-caution:not(:disabled, [aria-disabled="true"]):hover, .tk-hover-line-caution:not(:disabled, [aria-disabled="true"]):focus-visible { border-color: var(--caution); }

/* 图标在按钮里，变色的是图标而按钮才是悬停对象——Tailwind 的 group-hover。 */
.group:hover .tk-group-hover-accent { color: var(--accent); }
.group:hover .tk-group-hover-up { color: var(--up); }
.group:hover .tk-group-hover-caution { color: var(--caution); }
/* 图标底色在悬停时加深。基态已经是 --*-bg，再换成同一个值等于没有反馈，
   所以按同色相多掺一点语义色——色相不变，只加深，两种主题各自成立。
   具体百分比不是挑的，是让浏览器量出来的（见 verify_dashboard_ui.py 的悬停对比度）。 */
.group:hover .tk-group-hover-bg-up { background-color: color-mix(in srgb, var(--up) 18%, var(--surface)); }
.group:hover .tk-group-hover-bg-down { background-color: color-mix(in srgb, var(--down) 18%, var(--surface)); }
.group:hover .tk-group-hover-bg-caution { background-color: color-mix(in srgb, var(--caution) 18%, var(--surface)); }
.group:hover .tk-group-hover-bg-accent { background-color: color-mix(in srgb, var(--accent) 18%, var(--surface)); }

/* 进度条填充。原来写死 `from-emerald-500 to-teal-400`——emerald 恰是色弱模式
   要替换掉的色相，于是开了色弱开关进度条纹丝不动。 */
.tk-progress-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--up) 70%, var(--surface)), var(--up)); }