/* ══════════════════════════════════════════════════════════
   原子类型视觉系统 · 共享组件 · 2026-08-12
   从 archive.html 抽出来的——10 种内容形态（方法论/案例/故事/判断/
   著作/金句/类比/数据/真问题/人物）各配一个图标+一个色，形状记类型、
   饱和度记层级：人工策展=实心徽标（你认过的），AI 萃取=浅色描边徽标
   （机器候选，跟 admin/proposals.html"只有人能写 L1，机器只能写 L2
   和 E"是同一层分级逻辑）。

   本来只有 archive.html 一份，铺到 atom.html / search.html /
   library.html / quotes.html / ledger.html 之后再各写一遍就是重复
   造轮子——这是这批页面第一次真正共用同一份视觉定义，不是再抄一遍。
   用法：<link rel="stylesheet" href="/assets/type-vis.css"> +
   <script src="/assets/type-vis.js"></script>，然后调用
   tyIcon(key, size) 或 tyBadge(key, isSolid, size)。

   色板刻意避开 --success 的绿色（站内已用绿=公开状态）和 --danger
   的红色，10 个色相互相拉开，同时维持 --accent 一样的中低明度暖色
   基调，不会在暖白底上糊成一片高饱和撞色。 ══════════════════════ */
:root {
    --ty-fw: #2D6B7A; --ty-cs: #A65D4E; --ty-st: #7A5C6E; --ty-jd: #4F5D7A;
    --ty-bk: #96762A; --ty-qt: #B2574B; --ty-an: #3E7C82; --ty-dp: #5B6B73;
    --ty-qs: #C1752E; --ty-ps: #8C4A5C;
}
html[data-theme="dark"] {
    --ty-fw: #5FA8B8; --ty-cs: #B9978E; --ty-st: #B592A3; --ty-jd: #8B99B8;
    --ty-bk: #D4B168; --ty-qt: #E28F82; --ty-an: #74B4BA; --ty-dp: #97A6AE;
    --ty-qs: #EDA868; --ty-ps: #C68399;
}
.ty-ic { display: block; flex-shrink: 0; }
.ty-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 27px; height: 27px; border-radius: 50%; flex-shrink: 0;
}
/* 实心 = 人工策展（你认过的），描边浅底 = AI 萃取（机器候选） */
.ty-badge.solid { background: var(--ty-c); color: #fff; }
.ty-badge.soft  { background: color-mix(in srgb, var(--ty-c) 15%, transparent);
    color: var(--ty-c); border: 1px solid color-mix(in srgb, var(--ty-c) 32%, transparent); }
/* 小尺寸场景（切换器/chip 行内图标）：不做圆形徽标底，图标本身直接
   染类型色，跟文字同行；on/active 态背景通常已经是强调色实底，
   图标要跟着褪成白色，不然会跟背景糊在一起 */
.ty-inline { color: var(--ty-c); }
.ty-inline.on, .ty-inline.active { color: #fff; }