/* ============================================================================
   wb-ui Design Tokens（--wbui-* 唯一真源）
   来源：aicss.dev 站点 CSS 的 --ab-* 变量层，值 1:1 照搬（docs/86 OQ-1=B：
   连视觉值也 1:1 aicss，不映射 workbench :root token）。
   采集：2026-08-13，/_next/static/chunks/10luf5tqlw913.css。
   命名：风格对齐 design/tokens.css（ink 三级 / surface / border / sp / r），
   便于日后需要时建立映射；值不同源，两套体系并存（契约 R4）。

   结构（对齐 design/tokens.css）：
     :root, [data-wbui-theme="light"]     亮色默认值 + 尺寸/字体/动效常量
     @media (prefers-color-scheme: dark)  跟随系统的暗色镜像（仅颜色与阴影）
     :root[data-theme="dark"],
     [data-wbui-theme="dark"]             手动锁定暗色（后者供展示站演示台局部换肤）
     :root[data-theme="light"]            手动锁定亮色

   规则：wb-ui 组件 CSS 只允许引用本文件 var()，禁裸色；--wbui-* 只在
   wbui- 前缀组件类与展示站页面内引用，不得写入全局元素选择器。
   ========================================================================== */

:root,
[data-wbui-theme="light"] {
  /* ---- 背景阶梯（ab-bg / ab-bg-subtle / ab-stage-bg） ---- */
  --wbui-bg: #fff;                 /* 页面底色 */
  --wbui-bg-subtle: #f7f8fa;       /* 次级底色：侧栏、区块弱底 */
  --wbui-stage: #fafafa;           /* 演示台底色（组件预览区） */

  /* ---- 表面（ab-surface / ab-surface-2 / ab-code-bg） ---- */
  --wbui-surface: #fff;            /* 卡片表面 */
  --wbui-surface-2: #f4f5f7;       /* 次级表面：hover、选中底、pill */
  --wbui-code-bg: #f4f5f7;         /* 代码块底 */

  /* ---- 边框两级（ab-border / ab-border-strong） ---- */
  --wbui-border: #e6e8ec;
  --wbui-border-strong: #d4d7dd;

  /* ---- 文字三级（ab-text / ab-text-muted / ab-text-subtle） ---- */
  --wbui-ink: #1a1a1a;
  --wbui-ink-2: #a1a1a1;           /* muted：说明文字、shimmer 基色同源 */
  --wbui-ink-3: #a1a1a1;           /* subtle：占位、时间戳（上游亮色与 muted 同值） */

  /* ---- 强调与语义色（ab-accent / ab-success / ab-warning / ab-danger） ---- */
  --wbui-accent: #0b0d12;
  --wbui-accent-hover: #2a2f3a;
  --wbui-accent-soft: #f0f1f3;
  --wbui-on-accent: #fff;
  --wbui-ok: #15a06a;
  --wbui-warn: #d98404;
  --wbui-danger: #dc2626;

  /* ---- shimmer（块级骨架 ab-shimmer-* + 标签流光，标签值取自组件源码） ---- */
  --wbui-shimmer-base: #e9ebef;
  --wbui-shimmer-hi: #f6f7f9;
  --wbui-label-shimmer-ink: #a1a1a1;                 /* ThinkingState.module.css 原值 */
  --wbui-label-shimmer-fade: rgba(161, 161, 161, 0.45);

  /* ---- 阴影（ab-shadow-*） ---- */
  --wbui-sh-sm: 0 1px 2px #0d121c0f;
  --wbui-sh-md: 0 6px 24px -8px #0d121c2e;
  --wbui-sh-lg: 0 24px 60px -20px #0d121c47;
  --wbui-sh-card: 0 0 0 .5px #00000014, 0 1px 2px #0000000d, 0 2px 4px #00000005;
  --wbui-sh-elevated: 0 0 0 .5px #00000014, 0 1px 1px #0000000a, 0 3px 4px #1d1d1d05, 0 1.5px 3px #0000000a;

  /* ---- 圆角（ab-radius-*；不随主题变化） ---- */
  --wbui-r-sm: 8px;
  --wbui-r: 12px;
  --wbui-r-lg: 12px;
  --wbui-r-xl: 28px;

  /* ---- 字体双栈（ab-font-*；Inter 不随站分发 → 系统栈回退，平台字体渲染差异属预期偏离） ---- */
  --wbui-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wbui-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- 字重（ab-weight-*） ---- */
  --wbui-fw-regular: 425;
  --wbui-fw-medium: 500;
  --wbui-fw-semibold: 600;

  /* ---- 动效（ab-ease-* / ab-duration-*） ---- */
  --wbui-ease-smooth: cubic-bezier(.22, 1, .36, 1);
  --wbui-ease-out: cubic-bezier(.17, 1, .32, 1);
  --wbui-ease-spring: cubic-bezier(.35, 1.55, .65, 1);
  --wbui-ease-in-out: cubic-bezier(.66, 0, .34, 1);
  --wbui-dur-fast: .15s;
  --wbui-dur-normal: .2s;
  --wbui-dur-slow: .28s;

  /* ---- 布局常量（ab-header-h） ---- */
  --wbui-header-h: 52.5px;

  /* ---- 组件专属值（逐值取自各组件 module.css，与全局 token 不同值时才立项） ---- */
  /* web-search（.ws 的 --c-*；亮色与全局同值，暗色是独立蓝灰系，见暗色块） */
  --wbui-ws-text: #0b0d12;
  --wbui-ws-muted: #a1a1a1;
  --wbui-ws-subtle: #a1a1a1;
  --wbui-ws-border: #e6e8ec;
  --wbui-ws-success: #15a06a;
  --wbui-ws-ease: cubic-bezier(0.32, 0.72, 0, 1);
  /* file-diff（契约 3.D 记作 --wbui-diff-*；卡片阴影/衬线是组件独有值） */
  --wbui-diff-add: #15a06a;
  --wbui-diff-add-bg: rgba(26, 127, 55, 0.09);
  --wbui-diff-del: #dc2626;
  --wbui-diff-del-bg: rgba(207, 34, 46, 0.09);
  --wbui-diff-gutter: #e6e8eb;
  --wbui-diff-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.02), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  /* thinking-reasoning（“for Ns” 弱化标签；亮色 68% ink-2，暗色实色三级） */
  --wbui-tr-label: color-mix(in srgb, #a1a1a1 68%, transparent);
  --wbui-tr-verb: #a1a1a1;
  --wbui-tr-sentence: #a1a1a1;
  /* code-block / task-list（1px 外环、active 标签 shimmer 用正文色系） */
  --wbui-cb-ring: 0 0 0 1px #e6e8ec;
  --wbui-todo-shimmer-ink: #1a1a1a;
  --wbui-todo-shimmer-fade: rgba(26, 26, 26, 0.45);
  /* ai-agent-input（PromptInput：enhancing conic 环、skill pill 蓝、按钮软填充） */
  --wbui-pi-ring: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.02);
  --wbui-pi-menu-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 1px 1px rgba(0, 0, 0, 0.04);
  --wbui-pi-conic-1: #2b7fff;
  --wbui-pi-conic-2: #8b5cf6;
  --wbui-pi-conic-3: #d946ef;
  --wbui-pi-conic-4: #22d3ee;
  --wbui-pi-pill-bg: rgba(43, 127, 255, 0.12);
  --wbui-pi-pill-bg-hover: rgba(43, 127, 255, 0.16);
  --wbui-pi-pill-ink: #1f6feb;
  --wbui-pi-btn-fill: rgba(26, 26, 26, 0.06);
  --wbui-pi-btn-fill-hover: rgba(26, 26, 26, 0.1);
  --wbui-pi-btn-fill-open: rgba(26, 26, 26, 0.12);
  --wbui-pi-chip-x-hover: rgba(26, 26, 26, 0.08);
  --wbui-pi-chip-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);   /* 上游亮暗同值 */
  --wbui-pi-shimmer-ink: #1a1a1a;
  --wbui-pi-shimmer-fade: rgba(26, 26, 26, 0.45);
  /* mask 通道常量：只取 alpha 的不透明载体，非视觉色（enhancing 环的 xor mask） */
  --wbui-mask-opaque: #000;
}

/* ---- 暗色镜像（值 1:1 上游 [data-theme=dark] 块） ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --wbui-bg: #0a0a0a;
    --wbui-bg-subtle: #101010;
    --wbui-stage: #101010;
    --wbui-surface: #1a1a1a;
    --wbui-surface-2: #242424;
    --wbui-code-bg: #171717;
    --wbui-border: #303030;
    --wbui-border-strong: #424242;
    --wbui-ink: #f5f5f5;
    --wbui-ink-2: #a3a3a3;
    --wbui-ink-3: #737373;
    --wbui-accent: #f5f5f5;
    --wbui-accent-hover: #fff;
    --wbui-accent-soft: #242424;
    --wbui-on-accent: #0a0a0a;
    --wbui-ok: #34d399;
    --wbui-warn: #f5b14c;
    --wbui-danger: #f87171;
    --wbui-shimmer-base: #1f1f1f;
    --wbui-shimmer-hi: #2e2e2e;
    --wbui-sh-sm: 0 1px 2px #00000080;
    --wbui-sh-md: 0 6px 24px -8px #0009;
    --wbui-sh-lg: 0 24px 60px -20px #000000b3;
    --wbui-sh-card: 0 0 0 .5px #ffffff1f, 0 1px 2px #0006, 0 2px 4px #0000004d;
    --wbui-sh-elevated: 0 0 0 .5px #ffffff17, 0 1px 1px #00000080, 0 3px 4px #00000059, 0 1.5px 3px #0006;
    --wbui-ws-text: #f2f4f8;
    --wbui-ws-muted: #9aa4b4;
    --wbui-ws-subtle: #6b7484;
    --wbui-ws-border: #232834;
    --wbui-ws-success: #34d399;
    --wbui-diff-add: #34d399;
    --wbui-diff-add-bg: rgba(63, 185, 80, 0.15);
    --wbui-diff-del: #f87171;
    --wbui-diff-del-bg: rgba(248, 81, 73, 0.15);
    --wbui-diff-gutter: #303030;
    --wbui-diff-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(255, 255, 255, 0.12);
    --wbui-tr-label: #737373;
    --wbui-tr-verb: #a3a3a3;
    --wbui-tr-sentence: #737373;
    --wbui-cb-ring: 0 0 0 1px #303030;
    --wbui-todo-shimmer-ink: #f5f5f5;
    --wbui-todo-shimmer-fade: rgba(245, 245, 245, 0.45);
    --wbui-pi-ring: 0 0 0 0.5px rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    --wbui-pi-conic-1: #3b6fb5;
    --wbui-pi-conic-2: #6b5aa6;
    --wbui-pi-conic-3: #9a4f96;
    --wbui-pi-conic-4: #3a8a9a;
    --wbui-pi-pill-bg: rgba(43, 127, 255, 0.22);
    --wbui-pi-pill-ink: #9ec5ff;
    --wbui-pi-btn-fill: rgba(245, 245, 245, 0.06);
    --wbui-pi-btn-fill-hover: rgba(245, 245, 245, 0.1);
    --wbui-pi-btn-fill-open: rgba(245, 245, 245, 0.12);
    --wbui-pi-chip-x-hover: rgba(245, 245, 245, 0.08);
    --wbui-pi-shimmer-ink: #f5f5f5;
    --wbui-pi-shimmer-fade: rgba(245, 245, 245, 0.45);
  }
}

:root[data-theme="dark"],
[data-wbui-theme="dark"] {
  color-scheme: dark;
  --wbui-bg: #0a0a0a;
  --wbui-bg-subtle: #101010;
  --wbui-stage: #101010;
  --wbui-surface: #1a1a1a;
  --wbui-surface-2: #242424;
  --wbui-code-bg: #171717;
  --wbui-border: #303030;
  --wbui-border-strong: #424242;
  --wbui-ink: #f5f5f5;
  --wbui-ink-2: #a3a3a3;
  --wbui-ink-3: #737373;
  --wbui-accent: #f5f5f5;
  --wbui-accent-hover: #fff;
  --wbui-accent-soft: #242424;
  --wbui-on-accent: #0a0a0a;
  --wbui-ok: #34d399;
  --wbui-warn: #f5b14c;
  --wbui-danger: #f87171;
  --wbui-shimmer-base: #1f1f1f;
  --wbui-shimmer-hi: #2e2e2e;
  --wbui-sh-sm: 0 1px 2px #00000080;
  --wbui-sh-md: 0 6px 24px -8px #0009;
  --wbui-sh-lg: 0 24px 60px -20px #000000b3;
  --wbui-sh-card: 0 0 0 .5px #ffffff1f, 0 1px 2px #0006, 0 2px 4px #0000004d;
  --wbui-sh-elevated: 0 0 0 .5px #ffffff17, 0 1px 1px #00000080, 0 3px 4px #00000059, 0 1.5px 3px #0006;
  --wbui-ws-text: #f2f4f8;
  --wbui-ws-muted: #9aa4b4;
  --wbui-ws-subtle: #6b7484;
  --wbui-ws-border: #232834;
  --wbui-ws-success: #34d399;
  --wbui-diff-add: #34d399;
  --wbui-diff-add-bg: rgba(63, 185, 80, 0.15);
  --wbui-diff-del: #f87171;
  --wbui-diff-del-bg: rgba(248, 81, 73, 0.15);
  --wbui-diff-gutter: #303030;
  --wbui-diff-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(255, 255, 255, 0.12);
  --wbui-tr-label: #737373;
  --wbui-tr-verb: #a3a3a3;
  --wbui-tr-sentence: #737373;
  --wbui-cb-ring: 0 0 0 1px #303030;
  --wbui-todo-shimmer-ink: #f5f5f5;
  --wbui-todo-shimmer-fade: rgba(245, 245, 245, 0.45);
  --wbui-pi-ring: 0 0 0 0.5px rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  --wbui-pi-conic-1: #3b6fb5;
  --wbui-pi-conic-2: #6b5aa6;
  --wbui-pi-conic-3: #9a4f96;
  --wbui-pi-conic-4: #3a8a9a;
  --wbui-pi-pill-bg: rgba(43, 127, 255, 0.22);
  --wbui-pi-pill-ink: #9ec5ff;
  --wbui-pi-btn-fill: rgba(245, 245, 245, 0.06);
  --wbui-pi-btn-fill-hover: rgba(245, 245, 245, 0.1);
  --wbui-pi-btn-fill-open: rgba(245, 245, 245, 0.12);
  --wbui-pi-chip-x-hover: rgba(245, 245, 245, 0.08);
  --wbui-pi-shimmer-ink: #f5f5f5;
  --wbui-pi-shimmer-fade: rgba(245, 245, 245, 0.45);
}

:root[data-theme="light"] {
  color-scheme: light;
}