/* PrimaLux 设计 token —— 整套规范的**唯一色板来源**。
 *
 * 提取自 ab-developability-platform/web/static/theme.css（2026-11，commit c347a9a）。
 * 数值与源码一致；最后两组（3D 结构 / 相互作用）在源码里写死在 JS 中，这里收编为 token。
 *
 * 规矩：
 *   1. 只有亮色一套。不要加 :root[data-theme="dark"]，JS 里也不做 prefers-color-scheme 探测。
 *   2. 页面和组件里不写 #xxxxxx，缺颜色就在这里加 token。
 *   3. 品牌金橙（--g-*）只做装饰；严重度橙（--sev-orange*）是数据语义色。两者不可互换。
 *   4. 每个 token 只定义一次。
 *
 * 机器可读约定（scripts/build-tokens.mjs 依赖）：
 *   `/* @group <路径> <类型> *\/` 开启一个分组，之后每行一个声明；行尾注释即描述。
 */

:root {
  color-scheme: light;

  /* @group color.brand.blue color */
  --b-50: #F3F6FB;   /* 最浅品牌蓝，= --sunken */
  --b-100: #E4EAF6;  /* = --acc-soft：hover 浅底、CDR 底色 */
  --b-200: #C5D2ED;  /* = --acc-sel：选中行底色 */
  --b-300: #9AB1DF;  /* = --acc-line：浅描边 */
  --b-400: #5C85D6;  /* 焦点环、CDR 轨道段 */
  --b-500: #3264C8;
  --b-600: #28509F;  /* 品牌主蓝 hsl(220,60%,39%)，取自 logo 实际像素 */
  --b-700: #203F7E;  /* 主色 hover */
  --b-800: #183162;  /* 主色 active */

  /* @group color.brand.gold color */
  --g-100: #FAF1E0;
  --g-200: #F4E1BD;
  --g-400: #EBB247;
  --g-500: #E8A830;  /* 品牌金橙 hsl(39,80%,55%)，只做装饰 */
  --g-700: #D89518;

  /* @group color.brand.alias color */
  --brand-blue: var(--b-600);
  --brand-blue-2: #355297;  /* 渐变起点 */
  --brand-gold: var(--g-500);
  --brand-gold-2: #EAAB30;

  /* @group gradient.brand gradient */
  --brand-grad: linear-gradient(90deg,#355297 0%,#4059A0 18%,#84768C 46%,#CE9A56 68%,#F5B32E 88%,#FFC43D 100%);  /* 品牌蓝→金渐变：顶栏底边、当前页签、分区描边 */

  /* @group color.surface color */
  --bg: #F6F8FC;           /* 页面底色 */
  --panel: #FFFFFF;        /* 卡片 / 面板 */
  --sunken: var(--b-50);   /* 凹陷区：输入框、序列框、二级面板 */
  --sunken2: #EDF1F8;      /* 更深一档凹陷：日志、进度轨道 */
  --row-alt: #FAFBFE;      /* 表格斑马纹，比 --sunken 更淡以免抢数据 */

  /* @group color.outline color */
  /* 任务层级沿用现有深蓝色带；不随品牌色或任务状态变色。 */
  --outline-blue: #2b5392;
  --outline-line: #e1e7ef;
  --outline-task-fill: #ffffff;
  --outline-task-hover: #f4f8fc;
  --outline-task-edge: #e1e7ef;
  --outline-task-guide: #b5c7dc;
  --outline-summary-fill: #41679a;
  --outline-summary-hover: #385d90;
  --outline-summary-edge: #345582;
  --outline-summary-divider: #6b87ad;
  --outline-summary-name: #ffffff;
  --outline-summary-text: #f0f5ff;
  --outline-summary-placeholder: #e8f0fc;
  --outline-summary-control: #edf4ff;
  --outline-summary-chevron: #dce9fb;
  --outline-summary-link: #244c83;
  --outline-summary-date-fill: #f9fbff;
  --outline-summary-date-edge: #d4e0ef;
  --outline-summary-deadline: #f1f5ff;
  --outline-phase-fill: #c5dcf2;
  --outline-phase-hover: #b7d3ed;
  --outline-phase-edge: #a5c2e0;
  --outline-phase-guide: #8ca9cb;
  --outline-phase-name: #1d416e;
  --outline-phase-toggle: #214c80;
  --outline-phase-toggle-edge: #7f9fc4;
  --outline-phase-toggle-fill: #f4f8fe;
  --outline-group-fill: #e0eaf5;
  --outline-group-hover: #d5e3f2;
  --outline-group-edge: #bfd0e3;
  --outline-group-guide: #a0b9d4;
  --outline-nested-fill: #eef3f9;
  --outline-nested-hover: #e3edf7;
  --outline-nested-edge: #cbd9e8;
  --outline-selection: #778ede;
  --outline-drag-handle: #9aa9bd;
  --outline-toggle-edge: #91aac9;
  --outline-toggle-hover: #e6eef9;
  --outline-toggle-hover-edge: #496e9e;
  --outline-toggle-focus: #7596ce;
  --outline-leaf: #92a6c0;
  --outline-number: #566c89;
  --outline-name: #243d61;
  --outline-name-focus: #7093c8;
  --outline-text: #5f7087;
  --outline-template-edge: #dae3f0;
  --outline-template-text: #4e6c9c;
  --outline-link: #6c85aa;
  --outline-link-hover: #e3edf9;
  --outline-date-hover-edge: #cbd8e9;
  --outline-date-hover: #f7faff;
  --outline-dependency-text: #466995;
  --outline-dependency-fill: #eaf0f8;
  --outline-menu-edge: #dce4ee;
  --outline-menu-text: #536d91;
  --outline-menu-hover-edge: #c9d8eb;
  --outline-context-fill: #d8eaff;
  --outline-context-edge: #72a5e5;
  --outline-context-marker: #246ac2;
  --outline-summary-context-fill: #3269b3;
  --outline-summary-context-edge: #78adf0;
  --outline-summary-context-marker: #83dcff;

  /* @group color.border color */
  --line: #DCE3ED;         /* 默认 1px 边线 */
  --line-strong: #C3CDDC;  /* hover 边线、表头底线 */

  /* @group color.text color */
  --fg: #131820;           /* 正文 / 标题（对白 17.8:1） */
  --fg-2: #36404E;         /* 次级文字 */
  --mut: #525E6C;          /* 弱化文字，对白 6.61:1（下限 6:1） */
  --subtle: #8792A3;       /* 只给占位符 / 禁用 / 装饰性图标，不承载信息（对白 3.2:1） */

  /* @group color.accent color */
  --acc: var(--b-600);         /* 主色 = 品牌蓝 */
  --acc-fg: #FFFFFF;           /* 主色上的文字 */
  --acc-hover: var(--b-700);
  --acc-active: var(--b-800);
  --acc-soft: var(--b-100);
  --acc-sel: var(--b-200);
  --acc-line: var(--b-300);

  /* @group color.status color */
  --ok: #1a7f37;
  --ok-soft: #e7f5ec;
  --ok-line: #b5dfc1;
  --err: #c9252d;
  --err-soft: #fdedec;
  --err-line: #f3c2c0;
  --warn: #945d00;
  --warn-soft: #FFF4D9;    /* 警示浅底，上面盖 --warn 字（5.2:1） */
  --warn-line: #F1D492;
  --ok-fill: #2F9E55;      /* 状态点 / 进度条填充，不用于文字 */
  --warn-fill: #E08A00;
  --err-fill: #D92D20;

  /* @group color.severity color */
  --sev-red: #c9252d;        /* RED 文字色：必须去除 */
  --sev-red-bg: #F2564F;     /* RED 残基填充 */
  --sev-red-fg: #1C0405;     /* RED 填充上的字 */
  --sev-orange: #7E4E00;     /* ORANGE 文字色：条件性（对白、对胶囊底都过 AA） */
  --sev-orange-bg: #FFD84D;  /* ORANGE 残基填充，越亮越好（上面盖近黑字） */
  --sev-orange-fg: #1A1405;
  --sev-info: #0F6FA8;       /* INFO 钢蓝，刻意区别于品牌藏青 */
  --sev-info-bg: #7FC4EC;
  --sev-info-fg: #04131C;

  /* @group color.pill color */
  --pill-r-bg: #fdedec;
  --pill-o-bg: #FFEDA8;
  --pill-i-bg: #DCEEF9;
  --pill-i-fg: #0F6FA8;
  --pill-z-bg: #EDF1F7;

  /* @group color.sequence color */
  --seg-fr: #DDE4EE;          /* 轨道 FR 段 */
  --seg-cdr: var(--b-400);    /* 轨道 CDR 段，与 --acc 同色相 */
  --seg-fg: #0B1220;
  --out-a: #E3E9F1;           /* 未编号残基斜纹 A */
  --out-b: #EFF3F9;           /* 未编号残基斜纹 B */
  --cdr-bg: var(--b-100);     /* 序列里 CDR 残基底色 */
  --cdr-line: var(--b-400);   /* 序列里 CDR 残基下划线 */
  --mark-red: #d92d20;        /* 轨道缺陷标记 / 游标：出界 */
  --mark-orange: #F0A11A;     /* 轨道缺陷标记 / 游标：边缘 */
  --mark-info: #1785C4;
  --mark-ring: rgba(255,255,255,.95);
  --mark-glow: rgba(217,45,32,.45);
  --mark-orange-ring: rgba(124,78,0,.7);  /* 橙标记用深橙描边，白描边在浅轨道上分不开 */

  /* @group color.aminoacid color */
  --aa-a-bg: #E6E8F7;    /* A 带电：紫蓝 */
  --aa-a-line: #9AA3DC;
  --aa-b-bg: #F1E4F4;    /* B 极性不带电：粉紫 */
  --aa-b-line: #C79AD3;
  --aa-c-bg: #FBF3D4;    /* C 特例：米黄 */
  --aa-c-line: #D9BE5E;
  --aa-d-bg: #E2F0E3;    /* D 疏水：浅绿 */
  --aa-d-line: #95C79A;

  /* @group color.antibody color */
  --ab-variable: #92D050;        /* 可变区 */
  --ab-variable-line: #436F35;
  --ab-constant: #466D9E;        /* 恒定区 */
  --ab-constant-line: #294A73;
  --ab-extra: #F2B18C;           /* 附加域 */
  --ab-extra-line: #9A6246;
  --ab-vhh: #E3A126;             /* VHH 单域 */
  --ab-vhh-2: #16A8D4;
  --ab-vhh-line: #805A12;
  --ab-scfv: #E313CF;            /* scFv */
  --ab-scfv-back: #F1BCEB;
  --ab-scfv-line: #8F197F;
  --ab-mask: #743C93;            /* 遮蔽肽 */
  --ab-mask-vhh: #A8ADB5;
  --ab-connector: #193342;       /* 连接线 */
  --ab-variable-soft: #EDF8E3;   /* 序列分段底色 */
  --ab-constant-soft: #E8EEF6;
  --ab-linker-soft: #EDF4F5;
  --ab-scfv-soft: #FAE7F8;
  --ab-mask-soft: #F2EAF6;
  --ab-extra-soft: #FCEFE8;

  /* @group color.structure color */
  --st-cdr1: #e8590c;         /* 3D 视图 CDR1（源码 structview.js） */
  --st-cdr2: #d6336c;         /* CDR2 */
  --st-cdr3: #ae3ec9;         /* CDR3 */
  --st-fr-a: #adb5bd;         /* FR1 / FR3 */
  --st-fr-b: #868e96;         /* FR2 / FR4 */
  --st-base: #ced4da;         /* 未注释链底色 */
  --st-dim: #E9ECEF;          /* 斑块模式下的背景链 */
  --st-chain-1: #4dabf7;      /* 非抗体链轮换色 */
  --st-chain-2: #69db7c;
  --st-chain-3: #ffd43b;
  --st-chain-4: #ff8787;
  --st-chain-5: #a9e34b;
  --st-ppc-1: #DCE6F7;        /* 正电斑块 弱→强 */
  --st-ppc-2: #7FA3DC;
  --st-ppc-3: #2B57A7;
  --st-pnc-1: #FBE0DE;        /* 负电斑块 弱→强 */
  --st-pnc-2: #EC8C86;
  --st-pnc-3: #C9252D;
  --st-psh-1: #FAF1E0;        /* 疏水斑块 弱→强（品牌金系） */
  --st-psh-2: #EBB247;
  --st-psh-3: #B87910;
  --st-highlight: #f03e3e;    /* 残基高亮默认色 */
  --st-label-bg: #212529;     /* 3D 标签底 */

  /* @group color.interaction color */
  --ix-hbond: #2B8A3E;        /* 氢键（虚线） */
  --ix-saltbridge: #D9480F;   /* 盐桥（虚线） */
  --ix-disulfide: #F59F00;    /* 二硫键（实线） */
  --ix-pipi: #7048E8;         /* π-π 堆积（虚线） */
  --ix-cationpi: #1098AD;     /* 阳离子-π（虚线） */
  --ix-hydrophobic: #868E96;  /* 疏水接触（虚线） */

  /* @group space dimension */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  /* @group layout dimension */
  --page-w: 1080px;                 /* 所有页面统一的内容列宽 */
  --page-w-wide: min(96vw, 1560px); /* 宽表页（卡片墙 / 历史列表） */
  --page-pad: 22px;
  --header-h: 52px;                 /* 顶栏高度钉死，用 min-height 消费 */
  --side-w: 510px;                  /* 两栏布局侧栏宽（源码写在 .wrap-split 里） */

  /* @group radius dimension */
  --r1: 6px;      /* 按钮、输入框、小块 */
  --r2: 10px;     /* 卡片、指标卡 */
  --r3: 14px;     /* 分区面板 */
  --r-pill: 999px;

  /* @group font.size dimension */
  --t-xs: 12px;   /* 下限。11px 只留给轨道内微标签 */
  --t-sm: 13px;
  --t-md: 14px;
  --t-base: 15px;
  --t-lg: 17px;
  --t-xl: 20px;
  --t-2xl: 24px;

  /* @group font.weight fontWeight */
  --w-nm: 400;
  --w-md: 500;    /* 中文次级信息用 500，不用 400 */
  --w-sb: 600;
  --w-bd: 700;

  /* @group font.lineHeight number */
  --lh-tight: 1.35;
  --lh-base: 1.6;
  --lh-loose: 1.75;

  /* @group font.family fontFamily */
  --font-sans: -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-mono: ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  /* @group zIndex number */
  --z-base: 0;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 500;

  /* @group shadow shadow */
  --sh-1: 0 1px 2px rgba(19,32,58,.05);   /* 卡片、按钮 */
  --sh-2: 0 2px 8px rgba(19,32,58,.08);   /* 数据界面阴影上限 */
  --sh-3: 0 16px 44px rgba(19,32,58,.16); /* 只给浮窗 / 模态 */
  --shadow: var(--sh-3);

  /* @group motion.easing cubicBezier */
  --ease: cubic-bezier(.4,0,.2,1);

  /* @group motion.duration duration */
  --dur: .14s;

  /* @group color.focus color */
  --ring: #131820;            /* 选中描边（outline 颜色，不是阴影值） */
  --focus: var(--b-400);      /* :focus-visible 焦点环 */
  --overlay: rgba(16,22,32,.44);
}