/* ============================================================
TWCG 长果桑基因组 · Design Tokens
------------------------------------------------------------
版本 : v1.0
设计者 : 颜好看
设计语言 : Mulberry Lab Green（桑绿科研版）
对标 : 桑树小站 https://mulberry.phytoworld.online
+ Ensembl / NCBI 基因组门户的数据密度感
寄存器 : Product（工具属性为主）；首页 Hero 轻度 Brand 叙事
三轴刻度 : Variance 5 / Motion 3 / Density 4（表达图谱页 Density 6）
分层 : A1 Identity → A2 Semantic/Structure → B Slot → C Extension
使用规则 :
1. 本文件只定义 CSS 自定义属性，不含任何业务选择器（实现在 style.css）。
2. 组件样式一律 var() 引用本文件 Token，禁止在 style.css 内出现裸 hex
（唯一例外：#fff / #000）。
3. C 层的桑果紫 --mulberry 是「分类色」，不得与主色做渐变、
不得作为按钮/大色块背景，仅用于数据系列编码与极少数强调。
4. 图标：本项目不使用任何图标（emoji 与 SVG 图标均不用），
层次靠文字、字重、字号、色块、间距建立。
============================================================ */
/* ============================================================
A1 · IDENTITY（品牌身份层 —— 变更频率极低）
============================================================ */
:root {
/* ---- 表面 / 前景 / 边框（同桑树小站 ux-kit.css，保证同门识别度）---- */
--bg: #f7f9f7; /* 页面底：极浅绿，非纯白、非米黄 */
--surface: #ffffff; /* 卡片 / 面板 / 输入框面 */
--fg: #16201a; /* 正文主色：深绿黑 */
--muted: #5c6b61; /* 次级文字、说明、表头副文本 */
--border: #e1e8e3; /* 默认分隔线、卡片描边 */
/* ---- 主色：桑叶深绿（唯一主色，与桑树小站一致）---- */
--accent: #2d5016;
--accent-on: #ffffff; /* 主色底之上的文字色 */
/* ---- 字体（不引入展示衬线体：中文混排 + 数据密度场景不适用）---- */
--font-body: "Inter", "Noto Sans SC", "Microsoft YaHei", "PingFang SC",
"Hiragino Sans GB", -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-display: var(--font-body); /* 标题与正文同源，靠字重/字号/字距分层 */
--font-mono: "JetBrains Mono", "SFMono-Regular", "SF Mono", Menlo, Consolas,
"Liberation Mono", "Courier New", monospace;
--font-num: var(--font-mono); /* 统计数字、基因 ID、坐标、TPM */
/* ---- 字重四级（400/500/600/700；未用 510/590，因中文系统字体会被量化）---- */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/* ---- 字号阶梯（基准 16px = 1rem，共 10 级）---- */
--text-2xs: 0.6875rem; /* 11px 图表刻度、样本分组小标 */
--text-xs: 0.75rem; /* 12px meta、统计副标、chip */
--text-sm: 0.8125rem; /* 13px 提示、图注、表格副信息 */
--text-base:0.875rem; /* 14px 正文（中文主力字号）*/
--text-md: 1rem; /* 16px lead 段、详情页正文 */
--text-lg: 1.125rem; /* 18px 卡片标题 */
--text-xl: 1.25rem; /* 20px 页内小标题、基因 ID、统计数字（小）*/
--text-2xl: 1.375rem; /* 22px 章节标题（对齐桑树小站 .section-title）*/
--text-3xl: 1.75rem; /* 28px 子页面 h1 */
--text-4xl: 2.5rem; /* 40px 首页 Hero h1（桌面）*/
--text-stat:2rem; /* 32px 统计卡主数字 */
/* ---- 行高 ---- */
--leading-tight: 1.15; /* Hero 大标题 */
--leading-snug: 1.3; /* 章节 / 卡片标题 */
--leading-normal: 1.6; /* 表格、列表 */
--leading-relaxed: 1.75; /* 中文正文段落 */
/* ---- 字距（工艺关键项）---- */
--tracking-caps: 0.08em; /* 拉丁文 eyebrow / ALL CAPS 必用 */
--tracking-tight: -0.02em; /* ≥32px 标题；Hero 用 -0.02em */
--tracking-normal: 0; /* 正文一律 0 */
--tracking-wide: 0.02em; /* 11–13px 小字，提升可读性 */
/* ---- 数字排版 ---- */
--num-variant: tabular-nums lining-nums; /* 配 font-variant-numeric */
}
/* ============================================================
A2 · SEMANTIC & STRUCTURE（语义 + 结构层）
============================================================ */
:root {
/* ---- B-slot 别名（表层 / 前景 / 边框的次级梯度）---- */
--surface-warm: #eef3ee; /* 三级表面：hover 底、code 底、chip 底 */
--surface-sunken:#f2f6f2; /* 表头底、图例底 */
--fg-2: #2f3d34; /* 次级正文（比 --fg 浅一档）*/
--meta: #8a968d; /* 三级前景：时间戳、图注、NA 值 */
--border-soft: #eef2ee; /* 卡片内部行分隔线 */
--border-strong: #cdd8d0; /* hover / 分隔加强 */
/* ---- 主色派生 ---- */
--accent-bright: #4a7c12; /* 亮调主色：章节竖线、表头、图表主系列 */
--accent-soft: #e8f5e9; /* 主色 8% 底：badge、强调卡底 */
--accent-hover: #24400f; /* 主色按下/悬停（加深，不加亮）*/
--accent-active: #1b310b;
/* ---- 链接 ---- */
--link: #1a5c9e;
--link-hover: #0d3a6e;
--link-visited:#4a3f7a;
/* ---- 语义色 ---- */
--success: #16a34a;
--success-soft: #e9f7ee;
--warn: #d97706;
--warn-soft: #fdf3e3;
--danger: #dc2626;
--danger-soft: #fdecec;
--info: #2563eb;
--info-soft: #eef2fb;
/* ---- 生信工具语义（仅用于 BLAST / 工具入口，不进外壳）---- */
--tool-accent: #d04a02;
--tool-accent-d: #a8380a;
--tool-accent-soft: #fbe6d8;
/* ---- 间距（4px 基准网格，编号与桑树小站一致）---- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
/* ---- 圆角（上限 16px，禁止 ≥24px 过度圆滑）---- */
--radius-sm: 8px; /* 按钮、输入框、chip、柱顶 */
--radius-md: 12px; /* 卡片、面板 */
--radius-lg: 16px; /* 大容器：工具卡、结果卡 */
--radius-pill:9999px; /* 徽章、标签 */
/* ---- 阴影（三级，禁止 1px 边框 + ≥16px 模糊同时出现）---- */
--shadow-sm: 0 1px 3px rgba(22, 32, 26, .08);
--shadow-md: 0 4px 16px rgba(22, 32, 26, .10);
--shadow-lg: 0 12px 40px rgba(22, 32, 26, .14);
/* ---- 焦点环（无障碍必需，禁止 outline:none 而不补替代）---- */
--focus-ring: 0 0 0 3px rgba(74, 124, 18, .28);
--focus-ring-danger:0 0 0 3px rgba(220, 38, 38, .26);
--focus-ring-on-dark: 0 0 0 3px rgba(255, 255, 255, .55);
/* ---- 动效（以 150ms 为收敛值；禁止弹跳缓动）---- */
--motion-instant: 100ms; /* 按下、开关 */
--motion-fast: 150ms; /* hover、选中 */
--motion-base: 200ms; /* 下拉、卡片入场 */
--motion-slow: 300ms; /* 面板切换、图表生长 */
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
/* ---- 层级 ---- */
--z-base: 0;
--z-backbar: 90;
--z-sticky: 100;
--z-dropdown: 200;
--z-modal: 1200;
--z-toast: 9999;
/* ---- 版心与节奏 ---- */
--container-max: 1200px;
--container-gutter: 40px; /* ≥1024px */
--container-gutter-tablet: 24px; /* 640–1023px */
--container-gutter-mobile: 20px; /* <640px */
--section-y: 64px; /* 章节垂直节奏（桌面）*/
--section-y-tablet: 48px;
--section-y-mobile: 40px;
/* ---- 滚动揭示位移（克制，不做大位移）---- */
--reveal-y: 16px;
}
/* 无障碍：系统开启「减弱动态效果」时，所有动效时长收敛为 0
（Token 层兜底，即使 style.css 漏写 media query 也会生效）*/
@media (prefers-reduced-motion: reduce) {
:root {
--motion-instant: 0.01ms;
--motion-fast: 0.01ms;
--motion-base: 0.01ms;
--motion-slow: 0.01ms;
--reveal-y: 0px;
}
}
/* ============================================================
B · SLOT（组件插槽层 —— 组件只引用这一层）
============================================================ */
:root {
/* ---- 顶部导航（沿用桑树小站绿色外壳）---- */
--nav-h: 60px;
--nav-bg: linear-gradient(135deg, var(--accent), var(--accent-bright));
--nav-fg: #ffffff;
--nav-fg-muted: rgba(255, 255, 255, .92); /* 4.8:1，满足正文对比度 */
--nav-hover-bg: rgba(255, 255, 255, .12);
--nav-active-bg: rgba(255, 255, 255, .20);
--nav-active-underline: #ffffff;
--nav-brand-size: 1.125rem; /* 18px */
--nav-link-size: 0.9375rem; /* 15px */
--nav-shadow: var(--shadow-sm);
/* ---- 按钮 ---- */
--btn-h: 44px; /* 触摸目标 ≥44×44 */
--btn-padding-x: var(--space-5);
--btn-radius: var(--radius-sm);
--btn-font-size: var(--text-base);
--btn-weight: var(--weight-semibold);
--btn-primary-bg: var(--accent);
--btn-primary-fg: var(--accent-on);
--btn-primary-bg-hover: var(--accent-hover);
--btn-primary-bg-active: var(--accent-active);
--btn-secondary-bg: var(--surface);
--btn-secondary-fg: var(--accent);
--btn-secondary-border: var(--border);
--btn-secondary-bg-hover: var(--accent-soft);
--btn-secondary-border-hover: var(--accent-bright);
--btn-ghost-bg: transparent;
--btn-ghost-fg: var(--muted);
--btn-ghost-bg-hover: var(--surface-warm);
--btn-tool-bg: var(--tool-accent);
--btn-tool-fg: #ffffff;
--btn-tool-bg-hover: var(--tool-accent-d);
--btn-disabled-bg: var(--surface-warm);
--btn-disabled-fg: var(--meta);
--btn-disabled-border: var(--border);
--btn-disabled-opacity: 1; /* 用色差而非 opacity 表达禁用 */
/* ---- 输入框 / 检索框 ---- */
--input-h: 44px;
--input-bg: var(--surface);
--input-fg: var(--fg);
--input-placeholder: var(--meta);
--input-border: #d8e0da;
--input-border-hover: var(--border-strong);
--input-border-focus: var(--accent-bright);
--input-ring-focus: 0 0 0 3px rgba(74, 124, 18, .14);
--input-radius: var(--radius-sm);
--input-padding-x: var(--space-4);
--input-font-size: var(--text-base);
--input-border-error: var(--danger);
--input-ring-error: 0 0 0 3px rgba(220, 38, 38, .18);
--input-bg-disabled: var(--surface-warm);
/* ---- 卡片 / 面板 ---- */
--card-bg: var(--surface);
--card-border: var(--border);
--card-border-hover: var(--accent-bright);
--card-radius: var(--radius-md);
--card-radius-lg: var(--radius-lg);
--card-padding: var(--space-5); /* 24px */
--card-padding-lg: var(--space-6); /* 32px */
--card-shadow: none; /* 静态无阴影，靠 1px 描边 */
--card-shadow-hover: var(--shadow-sm);
--card-gap: var(--space-4); /* 16px */
--card-lift: -2px; /* hover 位移，克制 */
/* ---- 章节标题（桑树小站签名：22px + 左侧 4px 主色竖线）---- */
--section-title-size: var(--text-2xl);
--section-title-color: var(--accent);
--section-title-weight: var(--weight-semibold);
--section-title-rule: var(--accent-bright);
--section-title-rule-w: 4px;
--section-title-gap: var(--space-3); /* 竖线与文字间距 14px→取 12px */
/* ---- 章节说明块（桑树小站 .section-intro；全站限用 ≤2 处）---- */
--intro-bg: linear-gradient(135deg, #f0f7ff 0%, var(--accent-soft) 100%);
--intro-border-left: var(--accent-bright);
--intro-radius: var(--radius-sm);
--intro-padding: var(--space-4) var(--space-5);
--intro-fg: var(--fg-2);
--intro-font-size: var(--text-base);
/* ---- 表格 ---- */
--table-head-bg: var(--accent-bright);
--table-head-fg: #ffffff;
--table-head-size: var(--text-base);
--table-row-bg-hover: #f6f9f6;
--table-row-border: var(--border-soft);
--table-cell-padding-y: var(--space-3);
--table-cell-padding-x: var(--space-4);
/* ---- 徽章 / chip / tag ---- */
--badge-bg: var(--accent-soft);
--badge-fg: var(--accent);
--badge-radius: var(--radius-pill);
--badge-size: var(--text-xs);
--badge-weight: var(--weight-medium);
--badge-padding: 3px var(--space-3);
/* ---- 代码 / 基因 ID 内联 ---- */
--code-bg: var(--surface-warm);
--code-fg: var(--fg);
--code-radius: 4px;
--code-padding: 2px var(--space-2);
--code-font-size: var(--text-xs);
/* ---- 图形容器（参考图、图表）---- */
--figure-bg: var(--surface);
--figure-border: var(--border);
--figure-radius: var(--radius-sm);
--figure-padding: var(--space-2);
/* ---- 状态：加载 / 空 / 错误 ---- */
--skeleton-bg: linear-gradient(90deg, var(--surface-warm) 25%, var(--bg) 50%, var(--surface-warm) 75%);
--skeleton-radius: var(--radius-md);
--skeleton-h: 120px;
--empty-fg: var(--muted);
--empty-padding: var(--space-7);
--error-bg: var(--danger-soft);
--error-border: var(--danger);
--error-fg: var(--danger);
/* ---- 富文本内联强调 ---- */
--prose-strong-fg: var(--fg);
--prose-strong-weight: var(--weight-semibold);
--prose-em-fg: var(--accent); /* 拉丁学名斜体 */
}
/* ============================================================
C · EXTENSION（长果桑专属扩展层）
------------------------------------------------------------
说明：--mulberry（桑果紫）是「分类色 / 数据编码色」，不是强调色。
禁止：与 --accent 组渐变、作按钮底、作大色块背景。
允许：亚基因组 HapB 标识、果实发育期数据系列、极少数强调（每屏 ≤1 处）。
============================================================ */
:root {
/* ---- 桑果紫 ---- */
--mulberry: #7b3f9e;
--mulberry-d: #5f2f7d;
--mulberry-soft: #f3e9fa;
/* ---- 亚基因组分类色（三色，均通过白底 4.5:1）----
HapA1 / HapA2 源自长果桑 → 绿系深浅两档
HapB 源自白桑 → 桑果紫
注意：颜色永不单独承载信息，必须同时有文字标签。 */
--hap-a1: #2d5016;
--hap-a1-soft: #e8f5e9;
--hap-a2: #6b9b3a;
--hap-a2-soft: #eef5e4;
--hap-b: #7b3f9e;
--hap-b-soft: #f3e9fa;
/* ---- 表达图谱数据系列色 ---- */
--chart-vegetative: var(--accent-bright); /* S / L / B 营养器官 */
--chart-fruit: var(--mulberry); /* F1–F7 果实发育期 */
--chart-neutral: #b6c0b9; /* NA / 无数据 */
--chart-axis: var(--border-strong);
--chart-grid: var(--border-soft);
/* ---- 三联单倍型对比柱图（复用亚基因组色）---- */
--chart-hap-a1: var(--hap-a1);
--chart-hap-a2: var(--hap-a2);
--chart-hap-b: var(--hap-b);
/* ---- 等位表达环形图三系列（三等位 / 双等位 / 单等位）---- */
--chart-tri: var(--accent); /* 三等位 72.21% */
--chart-bi: var(--hap-a2); /* 双等位 8.78% */
--chart-mono: var(--mulberry); /* 单等位 19.01% */
/* ---- 免疫受体 RGA 三系列 ---- */
--chart-rlp: var(--hap-a2); /* LRR-RLP 243 */
--chart-rlk: var(--accent); /* LRR-RLK 1,628 */
--chart-nlr: var(--mulberry); /* NLR 827 */
/* ---- 页脚（桑树小站 #234012 深色外壳）---- */
--footer-bg: #234012;
--footer-fg: rgba(255, 255, 255, .86);
--footer-fg-muted: rgba(255, 255, 255, .62);
--footer-link: rgba(255, 255, 255, .92);
--footer-link-hover:#ffffff;
--footer-border: rgba(255, 255, 255, .14);
--footer-padding-y: var(--space-6);
}
/* ============================================================
接线提示（注释，非生效代码）
------------------------------------------------------------
1. 每个页面在 style.css 之前引入：
2. style.css 中删除所有旧色板变量（--sky-* / --purple / --orange /
--cream / --night / --ink 等），统一改为 var() 引用本文件。
3. 删除 ZCOOL KuaiLe 字体引用；Inter / Noto Sans SC 建议改为非阻塞
加载或整体去掉（系统字体栈已覆盖中文场景，且规避 Google Fonts
在国内的加载失败）。
============================================================ */