diff --git a/docs/architecture/theme-token-optimization.md b/docs/architecture/theme-token-optimization.md
index 12bba43873..3a57f2aedf 100644
--- a/docs/architecture/theme-token-optimization.md
+++ b/docs/architecture/theme-token-optimization.md
@@ -109,7 +109,7 @@ theme preset/runtime、token contract、boundary fallback、
 Mermaid、Monaco/editor、Prism syntax、terminal ANSI、language identity 和 UI exception
 registry。
 
-`498` 个唯一颜色是前端生产文件的全域审计数，不是普通 app UI 的色值预算。
+`472` 个唯一颜色是前端生产文件的全域审计数，不是普通 app UI 的色值预算。
 其中包含主题 preset、token contract、Mermaid、Monaco/editor、terminal、syntax、
 language identity 和 UI exception 等专用 palette。真正需要继续压缩的是这些专用域
 内部能被证明等价的近似色，而不是把它们直接并入普通 app semantic token。前后端职责边界
@@ -126,8 +126,8 @@ prompt snapshot 投影；CLI/TUI 颜色作为独立终端产品 surface 单独
 | 忽略的测试文件数 | 223 |
 | 忽略的构建生成文件数 | 1 |
 | 包含颜色字面量的文件数 | 25 |
-| 颜色字面量出现次数 | 722 |
-| 唯一颜色字面量数量 | 498 |
+| 颜色字面量出现次数 | 685 |
+| 唯一颜色字面量数量 | 472 |
 | 组件或非 token 文件中的颜色出现次数 | 0 |
 | 组件或非 token 唯一颜色数量 | 0 |
 | App UI 颜色出现次数 | 0 |
@@ -139,7 +139,7 @@ prompt snapshot 投影；CLI/TUI 颜色作为独立终端产品 surface 单独
 | 普通组件肉眼不可区分 near color pair | 0 |
 | 普通组件需证据复核的 near color pair | 0 |
 | 专用域肉眼不可区分 near color pair | 0 |
-| 专用域需证据复核的 near color pair | 195 |
+| 专用域需证据复核的 near color pair | 125 |
 
 当前审计未发现 CSS 变量契约层面的硬错误：
 
@@ -158,10 +158,10 @@ prompt snapshot 投影；CLI/TUI 颜色作为独立终端产品 surface 单独
 
 | 治理契约指标 | 当前值 | 说明 |
 | --- | ---: | --- |
-| compatibility alias contracts | 64 | 显式列出历史别名、canonical 目标、owner、保留原因和退场条件；旧 key 只作为对外兼容定义保留 |
+| compatibility alias contracts | 65 | 显式列出历史别名、canonical 目标、owner、保留原因和退场条件；旧 key 只作为对外兼容定义保留 |
 | compatibility alias 直接使用 key | 0 | 产品代码不再通过 `var(--legacy-alias)` 读取旧 key；新增直接读取会被 baseline 拦截 |
 | compatibility alias 直接使用次数 | 0 | 旧 key 定义仍存在，但内部样式读取统一使用 canonical token |
-| stale compatibility alias contracts | 0 | 防止 registry 保留已经没有静态/runtime 定义的旧 key |
+| stale compatibility alias contracts | 0 | 防止 registry 保留已经没有静态/runtime/iframe 兼容定义的旧 key |
 | compatibility alias family contracts | 2 | `--radius-* -> --size-radius-*`、`--spacing-* -> --size-gap-*` |
 | compatibility alias family 直接使用 key | 0 | `--radius-*`、`--spacing-*` 旧 family 不再被内部 `var()` 读取 |
 | compatibility alias family 直接使用次数 | 0 | generated widget payload 只暴露 canonical family，iframe shell 通过 alias fallback 兼容 legacy family |
@@ -171,7 +171,7 @@ prompt snapshot 投影；CLI/TUI 颜色作为独立终端产品 surface 单独
 | active surface token rename key | 0 | 防止 `--primary-color`、`--operation-color`、`--delay`、`--um-*` 等旧局部 key 回流 |
 | active surface token rename occurrences | 0 | 防止旧 key 在 SCSS、CSS 或 TSX inline style 中被重新定义或读取 |
 | surface token rename missing canonical | 0 | 防止 rename registry 指向不存在的 canonical key |
-| generated widget payload key | 245 | widget iframe 对外主题变量 allowlist，作为外部边界单独预算，不计入内部 alias 读取 |
+| generated widget payload key | 176 | widget iframe 对外主题变量 allowlist，作为外部边界单独预算，不计入内部 alias 读取 |
 | generated widget payload compatibility alias | 0 | payload 不再直接暴露 legacy alias；历史生成内容通过 iframe 内 alias fallback 读取 canonical key |
 | generated widget payload compatibility family key | 0 | payload 只暴露 `--size-radius-*`、`--size-gap-*` canonical family，旧 `--radius-*`、`--spacing-*` 由 iframe alias fallback 保留 |
 | generated widget payload external-only compatibility key | 0 | payload 中已清空仅因外部兼容保留且内部产品代码不再读取的 legacy key |
@@ -188,14 +188,14 @@ prompt snapshot 投影；CLI/TUI 颜色作为独立终端产品 surface 单独
 
 | 区域 | 当前出现次数 | 当前唯一色数 | 说明 |
 | --- | ---: | ---: | --- |
-| Theme presets | 219 | 187 | 主题个性与 palette 映射，不作为普通 app literal 直接合并；仅在同一主题内角色可证明等价时由 preset helper 复用 |
-| Token contracts | 146 | 133 | `tokens.scss` 等静态契约根 |
-| Editor | 55 | 50 | Monaco/editor 专用域，不能直接泛化到 app token；组件装饰色已迁出 raw literal |
-| Mermaid | 98 | 82 | Mermaid 专用渲染域 |
-| Theme runtime | 37 | 36 | `ThemeService.ts` 运行时注入；暗色 card alpha fallback 和 scrollbar fallback 已收敛到现有 overlay stop |
+| Theme presets | 206 | 174 | 主题个性与 palette 映射，不作为普通 app literal 直接合并；仅在同一主题内角色可证明等价时由 preset helper 复用 |
+| Token contracts | 128 | 114 | `tokens.scss` 等静态契约根 |
+| Editor | 55 | 48 | Monaco/editor 专用域，不能直接泛化到 app token；组件装饰色已迁出 raw literal |
+| Mermaid | 93 | 74 | Mermaid 专用渲染域 |
+| Theme runtime | 35 | 34 | `ThemeService.ts` 运行时注入；暗色 card alpha fallback 和 scrollbar fallback 已收敛到现有 overlay stop |
 | Language identity | 52 | 50 | 语言身份色，已集中到 identity registry |
 | Terminal | 37 | 29 | terminal/ANSI 专用域；工具命令空状态已复用 `--tool-command-empty-rgb`，不再保留独立 raw 色 |
-| Boundary fallback | 22 | 20 | iframe/miniapp/截图兜底值，不作为普通 app token |
+| Boundary fallback | 22 | 17 | iframe/miniapp/截图兜底值，不作为普通 app token |
 | Visual effects | 0 | 0 | StreamText/TextStroke raw literal 已迁出普通组件层 |
 | UI exception registry | 38 | 34 | 已归档的 UI 例外色，包含 review team、agent capability、template context、insights 和 inspector 等固定身份色 |
 | Generated widget | 0 | 0 | 颜色默认值已迁到 boundary fallback registry |
@@ -208,23 +208,23 @@ theme preset 或 boundary fallback 误算成普通 app UI 债务。当前队列
 
 | 专用域 | 肉眼不可区分 pair | 需证据复核 pair | 后续处理原则 |
 | --- | ---: | ---: | --- |
-| Theme presets | 0 | 109 | 优先处理同一 theme 内 hex/rgb 完全等价和同 alpha 阶重复；保留主题个性 |
-| Theme runtime | 0 | 18 | 先与静态 token 和 payload contract 对齐，避免 early render 或 system theme 回退 |
-| Token contracts | 0 | 50 | 优先 alias 精确等价值；状态、层级和 alpha ramp 不按数值强合并 |
-| Boundary fallback | 0 | 4 | 只在 iframe/截图 first paint 验证后收缩 |
-| Mermaid | 0 | 12 | 需检查节点、边、文本、错误态和 light/dark Mermaid 输出 |
-| Editor | 0 | 2 | 需检查 Monaco selection、diff、inline highlight 和 light/dark editor 可读性 |
+| Theme presets | 0 | 96 | 优先处理同一 theme 内 hex/rgb 完全等价和同 alpha 阶重复；保留主题个性 |
+| Theme runtime | 0 | 13 | 先与静态 token 和 payload contract 对齐，避免 early render 或 system theme 回退 |
+| Token contracts | 0 | 16 | 优先 alias 精确等价值；状态、层级和 alpha ramp 不按数值强合并 |
+| Boundary fallback | 0 | 0 | first-paint 兜底已收敛到较粗 overlay stop；后续新增必须重新说明边界理由 |
+| Mermaid | 0 | 0 | 节点、边、文本、错误态和 light/dark Mermaid fallback 的近似队列已清零 |
+| Editor | 0 | 0 | Monaco selection、diff、inline highlight 和 light/dark editor 近似队列已清零 |
 | Syntax / Terminal / Generated widget / Debug overlay / UI exception / Language identity / Visual effects | 0 | 0 | 当前无 near 队列；新增会被单域 baseline 拦截 |
 
 剩余高频文件均为专用 palette 或集中 registry：
 
 | 文件 | 颜色出现次数 | 后续处理策略 |
 | --- | ---: | --- |
-| `src/web-ui/src/component-library/styles/tokens.scss` | 130 | 根 token 契约；优先处理同语义 alias，避免把状态/层级 ramp 按数值强合并 |
-| `src/web-ui/src/tools/mermaid-editor/theme/mermaidThemeFallbacks.ts` | 67 | Mermaid 专用渲染兜底；需以节点、边、文本、错误态截图为依据 |
+| `src/web-ui/src/component-library/styles/tokens.scss` | 115 | 根 token 契约；优先处理同语义 alias，避免把状态/层级 ramp 按数值强合并 |
+| `src/web-ui/src/tools/mermaid-editor/theme/mermaidThemeFallbacks.ts` | 64 | Mermaid 专用渲染兜底；需以节点、边、文本、错误态截图为依据 |
 | `src/web-ui/src/shared/theme/languageIdentityAccents.ts` | 52 | 内置 language/file identity registry；调用方复用常量 |
 | `src/web-ui/src/tools/editor/themes/bitfun-dark.theme.ts` | 46 | Monaco theme palette；不拆散到普通 app token |
-| `src/web-ui/src/infrastructure/theme/core/ThemeService.ts` | 37 | 运行时注入；需保持 early render、system theme 和 payload 导出兼容 |
+| `src/web-ui/src/infrastructure/theme/core/ThemeService.ts` | 35 | 运行时注入；需保持 early render、system theme 和 payload 导出兼容 |
 | `src/web-ui/src/shared/theme/uiExceptionAccents.ts` | 38 | 固定 UI 身份/角色色 registry；新增必须说明 owner/role |
 | `src/web-ui/src/tools/terminal/utils/xtermTheme.ts` | 36 | terminal ANSI palette；不与 app semantic color 合并 |
 | `src/web-ui/src/infrastructure/theme/presets/slate-theme.ts` | 30 | theme preset palette；保留主题个性和 alpha ramp 边界 |
@@ -271,7 +271,7 @@ Phase 5 决策记录：
 | Mermaid `#5a5e68` -> `#5a5e6a` | merge | dark `edgeLabelBorderHover`；dark `nodeStroke`/`edgeStroke` | RGB distance = 2，均为深色 Mermaid neutral stroke/border；edge label hover border 不表达独立状态严重程度，合并后仍通过 key 区分角色 |
 | Mermaid `#6a6e78` -> `#6a6e7a` | merge | dark `textMuted`；dark `nodeStrokeHover` | RGB distance = 2，均为深色 Mermaid subdued neutral；不是 success/warning/error 或数据类别色，合并后保留 muted text 与 hover stroke 语义 |
 | Cyber `#141414` -> `#151515` | merge | `bitfun-cyber` scene background；secondary background；Monaco line highlight | RGB distance = 1.73，三者都在 Cyber 暗色 neutral surface 内，不表达不同状态、严重程度或数据类别；保留 `bgScene`/`secondary`/`lineHighlight` 语义 key，实际色值统一 |
-| dark card white alpha literal | merge to overlay token | `ThemeService.ts` dark `--card-bg-*` runtime injection | `0.015/0.025/0.035/0.09/0.13` 仅是 dark card fallback 的微弱层级色，合并到现有 `white02/03/04/08/12` overlay token 后仍保留 default/elevated/subtle/accent/hover 语义 key |
+| dark card white alpha literal | merge to canonical overlay stops | `ThemeService.ts` dark `--card-bg-*` runtime injection | `0.015/0.025/0.035/0.09/0.13` 仅是 dark card fallback 的微弱层级色，合并到现有 canonical overlay stop 后仍保留 default/elevated/subtle/accent/hover 语义 key |
 | `#141414` vs `#121214` | preserve | `LanguageRegistry.ts` reStructuredText identity；Flow Chat capture/editor fallback | RGB distance = 2.83，但 `#141414` 是已存在的 language identity，迁移到 registry 时保持原值；`#121214` 仅作为截图/边界兜底 |
 | `#f3f3f5` vs `#f4f4f5` | preserve | light theme primary background；dark theme status text | RGB distance = 1.41，但跨 light/dark theme 且角色不同；不通过数值相近抹平主题个性或状态文本对比 |
 | `#b8c6ff` -> `#b8c4ff` | merge | Slate theme purple alpha ramp；Slate purple solid stop | RGB distance = 2，同一 Slate purple ramp 内肉眼不可区分；alpha ramp 继续保留独立语义 key，实际 RGB channel 收敛到 solid 500 stop |
@@ -280,6 +280,12 @@ Phase 5 决策记录：
 | `#f0f2f5` -> `#eef0f3` | merge | Slate primary button default text；Slate text primary | RGB distance = 3.46，同一 Slate foreground ramp 内肉眼难区分，且不与 hover/active 的 white foreground 相邻表达不同业务状态 |
 | `rgba(255,255,255,0.22)` -> `rgba(255,255,255,0.24)` | merge | static token scrollbar hover、info border、ChatInput border、dark fallback scrollbar、MiniApp fallback、scrollbar mixin defaults | 同一 white overlay hover/border stop 内 0.02 alpha 差异；不用于相邻信息层级，合并到已有 `0.24`/`border-medium` 后保留语义 key |
 | `rgba(0,0,0,0.28)` -> `rgba(0,0,0,0.30)` | merge | light runtime scrollbar fallback、MiniApp light scrollbar fallback | 同一 light scrollbar hover fallback 内 0.02 alpha 差异；仅在主题未提供 scrollbar 值时兜底，合并到现有 black30 stop |
+| dark neutral element alpha ramp | merge to canonical overlay stops | `tokens.scss`、`createDarkNeutralElement()`、theme prompt snapshot | `0.07/0.095/0.125/0.155/0.19` 收敛为 `0.06/0.10/0.12/0.15/0.20`，保留 subtle/soft/base/medium/strong/elevated key；只压缩肉眼弱差异，不删除层级角色 |
+| boundary fallback white overlay | merge to coarse fallback stops | `themeBoundaryFallbacks.ts` | iframe/截图兜底只在 root token 不可用时使用，`borderBase`、`elementBgBase`、`elementBgMedium` 收敛到 `0.12`，保留 key 以维持边界语义 |
+| Mermaid fallback near surfaces | merge within Mermaid namespace | `_tokens.scss`、`mermaidThemeFallbacks.ts` | light section/active/cluster 和 dark edge-label/note/activation fallback 使用既有 Mermaid surface stop；只在 Mermaid 专用域内合并，不映射到普通 app status token |
+| Monaco light highlight and dark unchanged diff | merge within editor namespace | `MonacoThemeSync.ts`、`bitfun-dark.theme.ts` | light inactive selection/word highlight 收敛到相同弱高亮 stop；dark unchanged diff 使用 editor base background，降低不承担状态含义的深色微差 |
+| markdown light code/table neutral | merge to existing text/surface token | `flowchat-markdown-code-vars.scss`、`flowchat-markdown-table-vars.scss` | inline code 前景复用 light text token，table header 复用 code block light surface；避免跨 Markdown 子表面的近似浅灰重复 |
+| accent/glass low alpha values | merge to existing accent stops | `tokens.scss` | blue/purple/green glass 和 card accent 的 `0.06/0.10/0.18` 低 alpha 值收敛到相邻既有 stop，保留 hover/base key，避免扩张独立透明度阶梯 |
 | remaining near pairs | none in ordinary components | 无 | 审计口径下普通组件 near pair 已清零；后续只在专用 palette 自身重设计时处理 Monaco/terminal/Mermaid/syntax 内部近似色 |
 | Monaco theme palette | classify as exception | `tools/editor/themes/bitfun-dark.theme.ts` | 该文件是 Monaco theme 完整色板，不是普通 app UI；归入 editor/exception 后不再被误计为 component raw color |
 | Flow Chat capture fallback | boundary fallback | `ExportImageButton.tsx`、`captureElementToDownloadsPng.tsx` -> `themeBoundaryFallbacks.ts` | `#121214` 只在 root theme 变量不可用时兜底截图背景，集中 owner 后避免截图工具重复携带 raw fallback |
@@ -291,7 +297,7 @@ Phase 6 防回退约束：
 | `nearPairs.indistinguishableTotal` | 0 | 0 | 阻止新增普通组件肉眼不可区分 pair 未被合并或记录 |
 | `nearPairs.nearTotal` | 0 | 0 | 阻止新增普通组件 near color 债务；新增必须合并、归类或记录理由 |
 | `colorDomainNearPairs.indistinguishableTotal` | 0 | 0 | 控制专用域肉眼不可区分 pair 不继续增长，后续只能逐步降低或补充证据 |
-| `colorDomainNearPairs.nearTotal` | 195 | 195 | 控制 theme preset/runtime/token/editor/Mermaid 等专用域 near 队列规模 |
+| `colorDomainNearPairs.nearTotal` | 125 | 125 | 控制 theme preset/runtime/token/editor/Mermaid 等专用域 near 队列规模 |
 | `colorScopes.appUi.uniqueColors` | 0 | 0 | 阻止普通组件 raw color 唯一色回涨 |
 | `colorScopes.appUi.occurrences` | 0 | 0 | 阻止普通组件 raw color 出现次数回涨 |
 | `tokenAliasLiterals.occurrences` | 0 | 0 | 阻止重新出现可映射到 token 的 app literal |
@@ -307,7 +313,7 @@ Phase 6 防回退约束：
 | `surfaceTokenRenames.activeUnique` | 0 | 0 | 防止已迁移的 surface-local 旧 key 重新出现 |
 | `surfaceTokenRenames.activeOccurrences` | 0 | 0 | 防止旧 key 在定义和读取两侧回流 |
 | `surfaceTokenRenames.missingCanonicalUnique` | 0 | 0 | 防止 surface rename contract 指向不存在的 canonical key |
-| `generatedWidgetPayload.varUnique` | 245 | 245 | 控制 widget 对外主题 payload allowlist 不继续膨胀 |
+| `generatedWidgetPayload.varUnique` | 176 | 176 | 控制 widget 对外主题 payload allowlist 不继续膨胀 |
 | `generatedWidgetPayload.compatibilityAliasUnique` | 0 | 0 | 防止 payload 重新直接导出显式 legacy alias |
 | `generatedWidgetPayload.compatibilityAliasFamilyUnique` | 0 | 0 | 防止 payload 重新直接导出 legacy size family 具体 key |
 | `generatedWidgetPayload.externalOnlyCompatibilityUnique` | 0 | 0 | 防止 payload 重新保留仅因外部兼容存在的 legacy key |
@@ -455,6 +461,8 @@ editor、syntax、terminal、language identity、boundary fallback 等专用域
 - 对于白/黑透明叠层，先建立精确等价的 overlay ramp，例如
   `--color-overlay-white-08` 和 `--color-overlay-white-10`。这一步只消除散落
   硬编码，不合并不同 alpha，因为 alpha 差异经常用于表达层级和状态。
+- 如果数值型 overlay key 已经实际别名到另一个 alpha stop，内部读取应迁到真实
+  canonical stop，并删除误导性的旧导出。
 
 ## 目标 Token 模型
 
@@ -971,6 +979,12 @@ alpha 差异经常承担 elevation 和交互状态，不应全部压成一个值
   旧 border 细分别名、核心 `background/bg/text` 兼容名、`--radius-*`、`--spacing-*`
   以及部分旧 font/motion 拼写；根 token 与 runtime 注入仍保留这些兼容定义，generated widget
   iframe 也提供 alias fallback，避免影响 app 内部旧主题、历史 CSS 和已生成 widget 内容。
+- `--color-overlay-white-03` 已从静态 root、runtime 注入和 generated widget payload 退役；
+  generated widget iframe alias fallback 将其映射到 `--color-overlay-white-04`，避免历史内容丢失样式。
+- generated widget payload 不导出宿主 FlowChat、navigation 和 z-index 内部 key；iframe 内容保留独立布局和
+  stacking context，只通过 canonical color、spacing、shape、button 和 tool-card key 获取必要主题信息。
+- 根 CSS var export 只保留被 `var()`、运行时主题注入或外部兼容边界实际消费的 key；组件内部仍可继续使用
+  SCSS token/mixin，避免把未消费的 badge、legacy effect、z-index、git/status 和局部布局 key 扩散为运行时 contract。
 - 尺寸 canonical family 是 `--size-radius-*` / `--size-gap-*`；`--radius-*` /
   `--spacing-*` 只作为 legacy source 和 generated widget iframe alias fallback 保留。
 - 迁移期 CI 采用严格 baseline：普通 app raw color、内部 compatibility alias 读取、fallback、
diff --git a/scripts/theme-color-governance-baseline.json b/scripts/theme-color-governance-baseline.json
index dd4aa29d96..3a0e4694b0 100644
--- a/scripts/theme-color-governance-baseline.json
+++ b/scripts/theme-color-governance-baseline.json
@@ -15,7 +15,7 @@
       "max": 0
     },
     "compatibilityAliases.registeredUnique": {
-      "max": 64
+      "max": 65
     },
     "compatibilityAliases.usedUnique": {
       "max": 0
@@ -54,10 +54,10 @@
       "max": 0
     },
     "generatedWidgetPayload.varUnique": {
-      "max": 245
+      "max": 176
     },
     "generatedWidgetPayload.occurrences": {
-      "max": 245
+      "max": 176
     },
     "generatedWidgetPayload.undefinedUnique": {
       "max": 0
@@ -105,10 +105,10 @@
       "max": 0
     },
     "colorScopes.token.uniqueColors": {
-      "max": 290
+      "max": 269
     },
     "colorScopes.exception.uniqueColors": {
-      "max": 257
+      "max": 246
     },
     "cssVarDefinitions.unresolvedRequiredUnique": {
       "max": 0
@@ -150,25 +150,25 @@
       "max": 0
     },
     "colorDomainNearPairs.nearTotal": {
-      "max": 195
+      "max": 125
     },
     "colorDomainNearPairs.themePreset.indistinguishableTotal": {
       "max": 0
     },
     "colorDomainNearPairs.themePreset.nearTotal": {
-      "max": 109
+      "max": 96
     },
     "colorDomainNearPairs.themeRuntime.indistinguishableTotal": {
       "max": 0
     },
     "colorDomainNearPairs.themeRuntime.nearTotal": {
-      "max": 18
+      "max": 13
     },
     "colorDomainNearPairs.tokenContract.indistinguishableTotal": {
       "max": 0
     },
     "colorDomainNearPairs.tokenContract.nearTotal": {
-      "max": 50
+      "max": 16
     },
     "colorDomainNearPairs.generatedWidget.indistinguishableTotal": {
       "max": 0
@@ -180,19 +180,19 @@
       "max": 0
     },
     "colorDomainNearPairs.boundaryFallback.nearTotal": {
-      "max": 4
+      "max": 0
     },
     "colorDomainNearPairs.mermaid.indistinguishableTotal": {
       "max": 0
     },
     "colorDomainNearPairs.mermaid.nearTotal": {
-      "max": 12
+      "max": 0
     },
     "colorDomainNearPairs.editor.indistinguishableTotal": {
       "max": 0
     },
     "colorDomainNearPairs.editor.nearTotal": {
-      "max": 2
+      "max": 0
     },
     "colorDomainNearPairs.syntax.indistinguishableTotal": {
       "max": 0
@@ -237,16 +237,16 @@
       "max": 0
     },
     "colorDomainScopes.themePreset.occurrences": {
-      "max": 219
+      "max": 206
     },
     "colorDomainScopes.themePreset.uniqueColors": {
-      "max": 187
+      "max": 174
     },
     "colorDomainScopes.themeRuntime.occurrences": {
-      "max": 37
+      "max": 35
     },
     "colorDomainScopes.tokenContract.occurrences": {
-      "max": 146
+      "max": 128
     },
     "colorDomainScopes.generatedWidget.occurrences": {
       "max": 0
@@ -258,7 +258,7 @@
       "max": 22
     },
     "colorDomainScopes.boundaryFallback.uniqueColors": {
-      "max": 20
+      "max": 17
     },
     "colorDomainScopes.editor.occurrences": {
       "max": 55
@@ -294,10 +294,10 @@
       "max": 0
     },
     "colorDomainScopes.mermaid.occurrences": {
-      "max": 98
+      "max": 93
     },
     "colorDomainScopes.mermaid.uniqueColors": {
-      "max": 82
+      "max": 74
     }
   }
 }
diff --git a/scripts/theme-css-var-contract.mjs b/scripts/theme-css-var-contract.mjs
index 047c9f001a..d0c64d4d25 100644
--- a/scripts/theme-css-var-contract.mjs
+++ b/scripts/theme-css-var-contract.mjs
@@ -389,6 +389,13 @@ export const TOKEN_COMPATIBILITY_ALIAS_CONTRACTS = [
     reason: 'Short disabled text alias is kept for legacy CSS and generated widget iframe fallback compatibility.',
     removal: 'Retire after all text-* consumers move to color-text-* names.',
   },
+  {
+    key: '--color-overlay-white-03',
+    canonical: '--color-overlay-white-04',
+    owner: 'src/web-ui/src/tools/generative-widget/themePayloadCompatibility.ts',
+    reason: 'The retired 03 overlay spelling is kept only as generated widget iframe fallback compatibility for historical content.',
+    removal: 'Retire after generated widget content no longer relies on the old 03 overlay spelling.',
+  },
   {
     key: '--color-primary',
     canonical: '--color-accent-500',
diff --git a/src/crates/assembly/core/src/agentic/tools/implementations/generated/theme_prompt_snapshots.json b/src/crates/assembly/core/src/agentic/tools/implementations/generated/theme_prompt_snapshots.json
index 0430df1dc8..62797cccc6 100644
--- a/src/crates/assembly/core/src/agentic/tools/implementations/generated/theme_prompt_snapshots.json
+++ b/src/crates/assembly/core/src/agentic/tools/implementations/generated/theme_prompt_snapshots.json
@@ -31,7 +31,7 @@
       "accent500": "#94a3b8",
       "accent600": "#64748b",
       "borderBase": "rgba(255, 255, 255, 0.18)",
-      "elementBase": "rgba(255, 255, 255, 0.095)",
+      "elementBase": "rgba(255, 255, 255, 0.1)",
       "radiusBase": "6px",
       "spacing4": "16px",
       "shadowBase": "0 4px 8px rgba(0, 0, 0, 0.75)",
@@ -48,7 +48,7 @@
       "accent500": "#60a5fa",
       "accent600": "#3b82f6",
       "borderBase": "rgba(255, 255, 255, 0.18)",
-      "elementBase": "rgba(255, 255, 255, 0.095)",
+      "elementBase": "rgba(255, 255, 255, 0.1)",
       "radiusBase": "8px",
       "spacing4": "16px",
       "shadowBase": "0 4px 8px rgba(0, 0, 0, 0.7)",
diff --git a/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.scss b/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.scss
index 5515eab317..ae81914a05 100644
--- a/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.scss
+++ b/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.scss
@@ -341,7 +341,7 @@ $content-max: 1480px;
   padding: 0 $size-gap-3;
   height: 28px;
   border: 1px solid var(--border-subtle);
-  background: var(--color-overlay-white-03);
+  background: var(--color-overlay-white-04);
 }
 
 .gallery-filter-chip.is-active,
diff --git a/src/web-ui/src/app/components/scheduled-jobs/ScheduledJobsView.scss b/src/web-ui/src/app/components/scheduled-jobs/ScheduledJobsView.scss
index a7225c37ca..1b547c6fa7 100644
--- a/src/web-ui/src/app/components/scheduled-jobs/ScheduledJobsView.scss
+++ b/src/web-ui/src/app/components/scheduled-jobs/ScheduledJobsView.scss
@@ -265,7 +265,7 @@
     background:
       linear-gradient(180deg, color-mix(in srgb, var(--element-bg-soft) 82%, transparent), var(--element-bg-subtle));
     box-shadow:
-      inset 0 1px 0 var(--color-overlay-white-03),
+      inset 0 1px 0 var(--color-overlay-white-04),
       0 10px 24px var(--color-overlay-black-08);
     overflow: hidden;
   }
diff --git a/src/web-ui/src/app/layout/AppLayout.scss b/src/web-ui/src/app/layout/AppLayout.scss
index 273d72bd62..93c4b2f69a 100644
--- a/src/web-ui/src/app/layout/AppLayout.scss
+++ b/src/web-ui/src/app/layout/AppLayout.scss
@@ -231,17 +231,7 @@ html, body {
 // Moved to global scrollbar.css for shared management.
 
 // ==================== Responsive ====================
-@media (max-width: 1024px) {
-  .bitfun-app-layout {
-    --header-height: 34px;
-  }
-}
-
 @media (max-width: 768px) {
-  .bitfun-app-layout {
-    --header-height: 32px;
-  }
-
   .bitfun-window-mode-hint {
     align-items: flex-start;
     flex-direction: column;
diff --git a/src/web-ui/src/component-library/components/Markdown/Markdown.scss b/src/web-ui/src/component-library/components/Markdown/Markdown.scss
index b967617ab7..d710e8d5cf 100644
--- a/src/web-ui/src/component-library/components/Markdown/Markdown.scss
+++ b/src/web-ui/src/component-library/components/Markdown/Markdown.scss
@@ -403,7 +403,7 @@
   padding: 0.62rem 0.72rem;
   border: 1px solid var(--border-subtle);
   border-radius: var(--flowchat-card-radius);
-  background: var(--color-overlay-white-03);
+  background: var(--color-overlay-white-04);
 }
 
 .markdown-renderer summary {
diff --git a/src/web-ui/src/component-library/preview/preview-common.css b/src/web-ui/src/component-library/preview/preview-common.css
index 7d24954279..1c89e8e46e 100644
--- a/src/web-ui/src/component-library/preview/preview-common.css
+++ b/src/web-ui/src/component-library/preview/preview-common.css
@@ -35,7 +35,7 @@
 .preview-section {
   margin-bottom: 60px;
   padding: 30px;
-  background: var(--color-overlay-white-03);
+  background: var(--color-overlay-white-04);
   border-radius: 16px;
   border: 1px solid var(--color-overlay-white-08);
 }
diff --git a/src/web-ui/src/component-library/styles/flowchat-markdown-code-vars.scss b/src/web-ui/src/component-library/styles/flowchat-markdown-code-vars.scss
index 5416f6d093..6304f44455 100644
--- a/src/web-ui/src/component-library/styles/flowchat-markdown-code-vars.scss
+++ b/src/web-ui/src/component-library/styles/flowchat-markdown-code-vars.scss
@@ -38,10 +38,10 @@
 :root[data-theme-type="light"] {
   --flowchat-md-inline-code-bg: var(--color-overlay-black-06);
   --flowchat-md-inline-code-border: var(--color-overlay-black-12);
-  --flowchat-md-inline-code-fg: #24292f;
+  --flowchat-md-inline-code-fg: var(--color-text-primary);
   --flowchat-md-inline-code-hover-bg: var(--color-overlay-black-08);
   --flowchat-md-inline-code-hover-border: var(--color-overlay-black-20);
-  --flowchat-md-inline-code-hover-fg: #1f2328;
+  --flowchat-md-inline-code-hover-fg: var(--flowchat-md-inline-code-fg);
 
   --flowchat-md-pre-bg: #f6f8fa;
   --flowchat-md-pre-border: var(--color-overlay-black-10);
@@ -53,6 +53,4 @@
   --flowchat-md-bq-bg: var(--color-overlay-slate-08);
   --flowchat-md-bq-border: rgba(15, 23, 42, 0.24);
   --flowchat-md-bq-fg: var(--color-text-secondary);
-  --flowchat-md-bq-hover-bg: var(--color-overlay-slate-10);
-  --flowchat-md-bq-hover-border: rgba(15, 23, 42, 0.34);
 }
diff --git a/src/web-ui/src/component-library/styles/flowchat-markdown-table-vars.scss b/src/web-ui/src/component-library/styles/flowchat-markdown-table-vars.scss
index 9e66f21fa9..55d3132203 100644
--- a/src/web-ui/src/component-library/styles/flowchat-markdown-table-vars.scss
+++ b/src/web-ui/src/component-library/styles/flowchat-markdown-table-vars.scss
@@ -9,7 +9,7 @@
   --flowchat-md-table-surface: transparent;
   --flowchat-md-table-cell-border: var(--color-overlay-white-10);
   --flowchat-md-table-col-divider: transparent;
-  --flowchat-md-table-th-bg: var(--color-overlay-white-03);
+  --flowchat-md-table-th-bg: var(--color-overlay-white-04);
   --flowchat-md-table-th-fg: var(--color-text-primary);
   --flowchat-md-table-td-fg: var(--color-text-primary);
   --flowchat-md-table-row-base: transparent;
@@ -23,7 +23,7 @@
   --flowchat-md-table-surface: var(--color-static-white);
   --flowchat-md-table-cell-border: var(--color-overlay-slate-10);
   --flowchat-md-table-col-divider: var(--color-overlay-slate-08);
-  --flowchat-md-table-th-bg: #f3f6fb;
+  --flowchat-md-table-th-bg: #f6f8fa;
   --flowchat-md-table-th-fg: #0f172a;
   --flowchat-md-table-td-fg: var(--color-text-primary);
   --flowchat-md-table-row-base: var(--color-static-white);
diff --git a/src/web-ui/src/component-library/styles/tokens.scss b/src/web-ui/src/component-library/styles/tokens.scss
index 5911b750b3..b935f92efb 100644
--- a/src/web-ui/src/component-library/styles/tokens.scss
+++ b/src/web-ui/src/component-library/styles/tokens.scss
@@ -9,7 +9,6 @@ $color-static-orange: #f97316;
 
 $overlay-white-02: rgba(255, 255, 255, 0.02);
 $overlay-white-01: $overlay-white-02;
-$overlay-white-03: rgba(255, 255, 255, 0.03);
 $overlay-white-04: rgba(255, 255, 255, 0.04);
 $overlay-white-05: rgba(255, 255, 255, 0.05);
 $overlay-white-06: rgba(255, 255, 255, 0.06);
@@ -43,22 +42,22 @@ $overlay-black-80: rgba(0, 0, 0, 0.8);
 $overlay-black-85: rgba(0, 0, 0, 0.85);
 $overlay-black-90: rgba(0, 0, 0, 0.9);
 
-$color-blue-500-a06: rgba(96, 165, 250, 0.06);
 $color-blue-500-a08: rgba(96, 165, 250, 0.08);
+$color-blue-500-a06: $color-blue-500-a08;
 $color-blue-500-a15: rgba(96, 165, 250, 0.15);
 $color-blue-500-a12: $color-blue-500-a15;
 $color-blue-500-a18: $color-blue-500-a15;
 $color-blue-600-a08: rgba(59, 130, 246, 0.08);
 $color-blue-600-a12: rgba(59, 130, 246, 0.12);
 $color-blue-600-a15: rgba(59, 130, 246, 0.15);
-$color-blue-600-a18: rgba(59, 130, 246, 0.18);
+$color-blue-600-a18: $color-blue-600-a15;
 $color-blue-600-a25: rgba(59, 130, 246, 0.25);
 $color-blue-600-a30: rgba(59, 130, 246, 0.3);
 $color-blue-600-a40: rgba(59, 130, 246, 0.4);
 
-$color-purple-500-a05: rgba(139, 92, 246, 0.05);
 $color-purple-500-a08: rgba(139, 92, 246, 0.08);
-$color-purple-500-a10: rgba(139, 92, 246, 0.1);
+$color-purple-500-a05: $color-purple-500-a08;
+$color-purple-500-a10: $color-purple-500-a08;
 $color-purple-500-a15: rgba(139, 92, 246, 0.15);
 $color-purple-500-a12: $color-purple-500-a15;
 $color-purple-500-a25: rgba(139, 92, 246, 0.25);
@@ -84,11 +83,11 @@ $color-text-disabled: #555555;
 
 // ==================== Neutral surface system ====================
 $element-bg-subtle: $overlay-white-05;
-$element-bg-soft: rgba(255, 255, 255, 0.07);
-$element-bg-base: rgba(255, 255, 255, 0.095);
-$element-bg-medium: rgba(255, 255, 255, 0.125);
-$element-bg-strong: rgba(255, 255, 255, 0.155);
-$element-bg-elevated: rgba(255, 255, 255, 0.19);
+$element-bg-soft: $overlay-white-06;
+$element-bg-base: $overlay-white-10;
+$element-bg-medium: $overlay-white-12;
+$element-bg-strong: $overlay-white-15;
+$element-bg-elevated: $overlay-white-20;
 
 // ==================== Blue system ====================
 $color-accent-50: $color-blue-500-a06;
@@ -233,7 +232,7 @@ $blur-intense: blur(20px) saturate(1.4) brightness(1.15);
 $glass-base: linear-gradient(135deg,
   $overlay-white-02 0%,
   $overlay-white-01 50%,
-  $overlay-white-03 100%);
+  $overlay-white-04 100%);
 
 $glass-disabled: $overlay-white-02;
 
@@ -241,7 +240,7 @@ $glass-blue-subtle: $color-blue-600-a08;
 $glass-blue-base: linear-gradient(135deg,
   $color-blue-600-a12 0%,
   $color-blue-600-a08 30%,
-  rgba(59, 130, 246, 0.06) 60%,
+  $color-blue-600-a08 60%,
   $color-blue-600-a15 100%);
 $glass-blue-hover: linear-gradient(135deg,
   $color-blue-600-a15 0%,
@@ -264,7 +263,7 @@ $glass-red-subtle: rgba(239, 68, 68, 0.05);
 $glass-red-base: $color-error-bg;
 $glass-red-hover: rgba(239, 68, 68, 0.15);
 
-$glass-green-base: rgba(52, 211, 153, 0.08);
+$glass-green-base: $color-success-bg;
 $glass-green-hover: rgba(52, 211, 153, 0.15);
 
 // ==================== Sizing system ====================
@@ -429,7 +428,7 @@ $card-bg-elevated: $overlay-white-06;
 $card-bg-subtle: $overlay-white-02;
 $card-bg-hover: $overlay-white-06;
 $card-bg-active: $overlay-white-08;
-$card-bg-accent: rgba(96, 165, 250, 0.1);
+$card-bg-accent: $color-blue-500-a08;
 $card-bg-accent-hover: $color-blue-500-a15;
 $card-bg-purple: $color-purple-500-a10;
 $card-bg-purple-hover: $color-purple-500-a15;
@@ -519,7 +518,7 @@ $badge-info-text: $color-info;
       $color-purple-500-a15 0%,
       $color-purple-500-a15 30%,
       $color-purple-500-a08 60%,
-      rgba(139, 92, 246, 0.18) 100%
+      $color-purple-500-a15 100%
     );
     border-color: $color-purple-500-a40;
     box-shadow:
@@ -796,7 +795,6 @@ $badge-info-text: $color-info;
   --color-static-white-rgb: 255, 255, 255;
   --color-static-black-rgb: 0, 0, 0;
   --color-overlay-white-02: #{$overlay-white-02};
-  --color-overlay-white-03: #{$overlay-white-03};
   --color-overlay-white-04: #{$overlay-white-04};
   --color-overlay-white-05: #{$overlay-white-05};
   --color-overlay-white-06: #{$overlay-white-06};
@@ -948,11 +946,8 @@ $badge-info-text: $color-info;
   --git-color-branch: #{$git-color-branch};
   --git-color-branch-bg: #{$git-color-branch-bg};
   --git-color-branch-bg-hover: #{$git-color-branch-bg-hover};
-  --git-color-branch-border: #{$git-color-branch-border};
   --git-color-changes: #{$git-color-changes};
   --git-color-changes-bg: #{$git-color-changes-bg};
-  --git-color-changes-bg-hover: #{$git-color-changes-bg-hover};
-  --git-color-changes-border: #{$git-color-changes-border};
   --git-color-staged: #{$git-color-staged};
   --git-color-staged-bg: #{$git-color-staged-bg};
   --git-color-staged-bg-hover: #{$git-color-staged-bg-hover};
@@ -963,13 +958,6 @@ $badge-info-text: $color-info;
   --git-color-deleted: #{$git-color-deleted};
   --git-color-deleted-bg: #{$git-color-deleted-bg};
   --git-color-deleted-bg-hover: #{$git-color-deleted-bg-hover};
-  --git-color-deleted-border: #{$git-color-deleted-border};
-  --git-color-pull: #{$git-color-pull};
-  --git-color-pull-bg: #{$git-color-pull-bg};
-  --git-color-pull-bg-hover: #{$git-color-pull-bg-hover};
-  --git-color-push: #{$git-color-push};
-  --git-color-push-bg: #{$git-color-push-bg};
-  --git-color-push-bg-hover: #{$git-color-push-bg-hover};
 
   --border-subtle: #{$border-subtle};
   --border-color: var(--border-subtle);
@@ -996,30 +984,15 @@ $badge-info-text: $color-info;
   --z-content: #{$z-content};
   --z-header: #{$z-header};
   --z-sticky: #{$z-sticky};
-  --z-bottom-bar: #{$z-bottom-bar};
   --z-floating: #{$z-floating};
-  --z-dropdown: #{$z-dropdown};
   --z-overlay: #{$z-overlay};
-  --z-drawer: #{$z-drawer};
   --z-modal: #{$z-modal};
-  --z-modal-active: #{$z-modal-active};
-  --z-fullscreen: #{$z-fullscreen};
-  --z-toast: #{$z-toast};
-  --z-tooltip: #{$z-tooltip};
-  --z-popover: #{$z-popover};
-  --z-notification: #{$z-notification};
-  --z-context-menu: #{$z-context-menu};
-  --z-extreme: #{$z-extreme};
 
   --shadow-xs: #{$shadow-xs};
   --shadow-sm: #{$shadow-sm};
   --shadow-base: #{$shadow-base};
   --shadow-lg: #{$shadow-lg};
   --shadow-xl: #{$shadow-xl};
-  --shadow-2xl: #{$shadow-2xl};
-  --button-shadow-base: #{$button-shadow-base};
-  --button-shadow-hover: #{$button-shadow-hover};
-  --button-shadow-active: #{$button-shadow-active};
   --scrollbar-thumb: var(--color-overlay-white-12);
   --scrollbar-thumb-hover: #{$overlay-white-24};
   --color-scrollbar: var(--scrollbar-thumb);
@@ -1038,7 +1011,7 @@ $badge-info-text: $color-info;
   --btn-primary-active-shadow: none;
   --btn-primary-active-transform: none;
   --btn-ghost-bg: transparent;
-  --btn-ghost-color: #8a8a8a;
+  --btn-ghost-color: var(--color-text-muted);
   --btn-ghost-border: transparent;
   --btn-ghost-shadow: none;
   --btn-ghost-hover-bg: var(--color-overlay-white-06);
@@ -1064,7 +1037,6 @@ $badge-info-text: $color-info;
   --tool-card-write-color: #{$git-color-staged};
   --tool-card-confirmation-ring: #{$git-color-changes-bg-hover};
   --tool-card-positive-color: #{$git-color-staged};
-  --tool-card-positive-bg: #{$git-color-staged-bg};
   --tool-card-positive-bg-hover: #{$git-color-staged-bg-hover};
   --tool-card-positive-icon: color-mix(in srgb, var(--tool-card-positive-color) 90%, transparent);
   --tool-card-git-color: #{$color-static-orange};
@@ -1296,23 +1268,10 @@ $badge-info-text: $color-info;
   --review-team-member-accent-default: #64748b;
 
   --glow-shadow-blue: #{$glow-shadow-blue};
-  --glow-shadow-purple: #{$glow-shadow-purple};
-  --glow-shadow-red: #{$glow-shadow-red};
-  --glow-shadow-green: #{$glow-shadow-green};
-  --glow-shadow-mixed: #{$glow-shadow-mixed};
-
-  --inner-glow-top: #{$inner-glow-top};
-  --inner-glow-top-hover: #{$inner-glow-top-hover};
-  --inner-glow-bottom: #{$inner-glow-bottom};
-  --inner-glow-bottom-blue: #{$inner-glow-bottom-blue};
 
   --glass-base: #{$glass-base};
   --glass-disabled: #{$glass-disabled};
   --glass-blue-subtle: #{$glass-blue-subtle};
-  --glass-blue-base: #{$glass-blue-base};
-  --glass-blue-hover: #{$glass-blue-hover};
-  --glass-purple-base: #{$glass-purple-base};
-  --glass-purple-hover: #{$glass-purple-hover};
   --glass-red-subtle: #{$glass-red-subtle};
   --glass-red-base: #{$glass-red-base};
   --glass-red-hover: #{$glass-red-hover};
@@ -1378,16 +1337,11 @@ $badge-info-text: $color-info;
   --motion-normal: var(--motion-base);
   --motion-base: #{$motion-base};
   --motion-slow: #{$motion-slow};
-  --motion-lazy: #{$motion-lazy};
   --smooth-height-collapse-duration: var(--motion-slow);
 
   --easing-standard: #{$easing-standard};
   --easing-decelerate: #{$easing-decelerate};
-  --easing-accelerate: #{$easing-accelerate};
-  --easing-bounce: #{$easing-bounce};
   --easing-smooth: #{$easing-smooth};
-  --easing-ease-in: #{$easing-ease-in};
-  --easing-ease-out: #{$easing-ease-out};
 
   --font-family-sans: #{$font-family-sans};
   --font-family-mono: #{$font-family-mono};
@@ -1436,7 +1390,6 @@ $badge-info-text: $color-info;
   --flowchat-font-size-2xl: var(--font-size-2xl);
   --flowchat-font-size-3xl: var(--font-size-3xl);
   --flowchat-font-size-4xl: var(--font-size-4xl);
-  --flowchat-font-size-5xl: var(--font-size-5xl);
   --flowchat-text-line-height: 1.58;
   --flowchat-support-line-height: 1.45;
   --flowchat-compact-line-height: 1.32;
@@ -1515,37 +1468,12 @@ $badge-info-text: $color-info;
   --button-height-sm: #{$button-height-sm};
   --button-height-base: #{$button-height-base};
   --button-height-lg: #{$button-height-lg};
-  --input-height-sm: #{$input-height-sm};
-  --input-height-base: #{$input-height-base};
-  --input-height-lg: #{$input-height-lg};
-  --header-height: #{$header-height};
-  --sidebar-width: #{$sidebar-width};
-
   --opacity-disabled: #{$opacity-disabled};
   --opacity-hover: #{$opacity-hover};
   --opacity-focus: #{$opacity-focus};
   --opacity-overlay: #{$opacity-overlay};
 
-  --badge-border-radius: #{$badge-border-radius};
-  --badge-padding-x: #{$badge-padding-x};
-  --badge-padding-y: #{$badge-padding-y};
   --badge-font-size: #{$badge-font-size};
-  --badge-font-weight: #{$badge-font-weight};
-
-  --badge-neutral-bg: #{$badge-neutral-bg};
-  --badge-neutral-text: #{$badge-neutral-text};
-  --badge-accent-bg: #{$badge-accent-bg};
-  --badge-accent-text: #{$badge-accent-text};
-  --badge-purple-bg: #{$badge-purple-bg};
-  --badge-purple-text: #{$badge-purple-text};
-  --badge-success-bg: #{$badge-success-bg};
-  --badge-success-text: #{$badge-success-text};
-  --badge-warning-bg: #{$badge-warning-bg};
-  --badge-warning-text: #{$badge-warning-text};
-  --badge-error-bg: #{$badge-error-bg};
-  --badge-error-text: #{$badge-error-text};
-  --badge-info-bg: #{$badge-info-bg};
-  --badge-info-text: #{$badge-info-text};
 
   --card-bg-default: #{$card-bg-default};
   --card-bg-elevated: #{$card-bg-elevated};
diff --git a/src/web-ui/src/features/ssh-remote/RemoteFileBrowser.scss b/src/web-ui/src/features/ssh-remote/RemoteFileBrowser.scss
index 9531493450..0bb06e5e18 100644
--- a/src/web-ui/src/features/ssh-remote/RemoteFileBrowser.scss
+++ b/src/web-ui/src/features/ssh-remote/RemoteFileBrowser.scss
@@ -36,7 +36,7 @@
   background: var(--color-bg-secondary);
   border: 1px solid var(--border-subtle);
   border-radius: 12px;
-  box-shadow: 0 24px 48px var(--color-overlay-black-50), 0 0 0 1px var(--color-overlay-white-03);
+  box-shadow: 0 24px 48px var(--color-overlay-black-50), 0 0 0 1px var(--color-overlay-white-04);
   overflow: hidden;
   animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 
diff --git a/src/web-ui/src/flow_chat/components/TaskDetailPanel/TaskDetailPanel.scss b/src/web-ui/src/flow_chat/components/TaskDetailPanel/TaskDetailPanel.scss
index 5efe673a78..5718f02442 100644
--- a/src/web-ui/src/flow_chat/components/TaskDetailPanel/TaskDetailPanel.scss
+++ b/src/web-ui/src/flow_chat/components/TaskDetailPanel/TaskDetailPanel.scss
@@ -273,7 +273,7 @@
     padding: 12px;
     border-radius: 8px;
     border: 1px solid var(--tool-card-border);
-    background: var(--color-overlay-white-03);
+    background: var(--color-overlay-white-04);
     flex-shrink: 0;
   }
 
diff --git a/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.scss b/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.scss
index 964068336b..e780aaa82b 100644
--- a/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.scss
@@ -26,7 +26,7 @@
     box-shadow: 
       0 2px 8px var(--color-overlay-black-15),
       0 1px 4px var(--color-overlay-black-10),
-      inset 0 1px 0 var(--color-overlay-white-03);
+      inset 0 1px 0 var(--color-overlay-white-04);
   }
   
   &:active {
diff --git a/src/web-ui/src/flow_chat/tool-cards/DefaultToolCard.scss b/src/web-ui/src/flow_chat/tool-cards/DefaultToolCard.scss
index 51f37c82fa..bd5f77b380 100644
--- a/src/web-ui/src/flow_chat/tool-cards/DefaultToolCard.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/DefaultToolCard.scss
@@ -177,7 +177,7 @@
   }
 
   .default-tool-card__button--reject {
-    background: var(--color-overlay-white-03);
+    background: var(--color-overlay-white-04);
     color: var(--color-text-secondary);
   }
 
diff --git a/src/web-ui/src/infrastructure/config/components/SkillsConfig.scss b/src/web-ui/src/infrastructure/config/components/SkillsConfig.scss
index 4ef2317b2f..1195b97b1f 100644
--- a/src/web-ui/src/infrastructure/config/components/SkillsConfig.scss
+++ b/src/web-ui/src/infrastructure/config/components/SkillsConfig.scss
@@ -74,7 +74,7 @@
       background: linear-gradient(
         180deg,
         var(--color-overlay-white-06) 0%,
-        var(--color-overlay-white-03) 100%
+        var(--color-overlay-white-04) 100%
       );
       border: 1px solid var(--border-subtle);
       border-radius: $size-radius-lg;
@@ -114,7 +114,7 @@
     background: linear-gradient(
       180deg,
       var(--color-overlay-white-05) 0%,
-      var(--color-overlay-white-03) 100%
+      var(--color-overlay-white-04) 100%
     );
     box-shadow: $shadow-xs;
     transition:
diff --git a/src/web-ui/src/infrastructure/theme/core/ThemeService.test.ts b/src/web-ui/src/infrastructure/theme/core/ThemeService.test.ts
index f0f83108c9..0a9aa7c3bc 100644
--- a/src/web-ui/src/infrastructure/theme/core/ThemeService.test.ts
+++ b/src/web-ui/src/infrastructure/theme/core/ThemeService.test.ts
@@ -96,6 +96,20 @@ describe('ThemeService runtime theme tokens', () => {
     expect(document.documentElement.style.getPropertyValue('--scrollbar-thumb-hover')).toBe('rgba(0, 0, 0, 0.3)');
   });
 
+  it('keeps card subtle variants visually below the default card background', async () => {
+    const service = new ThemeService();
+
+    await service.applyTheme('bitfun-dark');
+
+    expect(document.documentElement.style.getPropertyValue('--card-bg-default')).toBe('rgba(255, 255, 255, 0.04)');
+    expect(document.documentElement.style.getPropertyValue('--card-bg-subtle')).toBe('rgba(255, 255, 255, 0.02)');
+
+    await service.applyTheme('bitfun-light');
+
+    expect(document.documentElement.style.getPropertyValue('--card-bg-default')).toBe('rgba(0, 0, 0, 0.06)');
+    expect(document.documentElement.style.getPropertyValue('--card-bg-subtle')).toBe('transparent');
+  });
+
   it('keeps dark info border aligned with the canonical medium overlay stop', async () => {
     const service = new ThemeService();
 
diff --git a/src/web-ui/src/infrastructure/theme/core/ThemeService.ts b/src/web-ui/src/infrastructure/theme/core/ThemeService.ts
index 40cff4fc44..cebc3d4dcb 100644
--- a/src/web-ui/src/infrastructure/theme/core/ThemeService.ts
+++ b/src/web-ui/src/infrastructure/theme/core/ThemeService.ts
@@ -39,7 +39,6 @@ const THEME_STATIC_COLORS = {
 
 const THEME_OVERLAYS = {
   white02: 'rgba(255, 255, 255, 0.02)',
-  white03: 'rgba(255, 255, 255, 0.03)',
   white04: 'rgba(255, 255, 255, 0.04)',
   white05: 'rgba(255, 255, 255, 0.05)',
   white06: 'rgba(255, 255, 255, 0.06)',
@@ -50,7 +49,6 @@ const THEME_OVERLAYS = {
   white20: 'rgba(255, 255, 255, 0.2)',
   white24: 'rgba(255, 255, 255, 0.24)',
   white60: 'rgba(255, 255, 255, 0.6)',
-  black04: 'rgba(0, 0, 0, 0.04)',
   black06: 'rgba(0, 0, 0, 0.06)',
   black08: 'rgba(0, 0, 0, 0.08)',
   black10: 'rgba(0, 0, 0, 0.1)',
@@ -67,7 +65,6 @@ const THEME_OVERLAYS = {
 
 const THEME_OVERLAY_TOKEN_VALUES = [
   ['--color-overlay-white-02', THEME_OVERLAYS.white02],
-  ['--color-overlay-white-03', THEME_OVERLAYS.white03],
   ['--color-overlay-white-04', THEME_OVERLAYS.white04],
   ['--color-overlay-white-05', THEME_OVERLAYS.white05],
   ['--color-overlay-white-06', THEME_OVERLAYS.white06],
@@ -1003,7 +1000,7 @@ export class ThemeService {
 
     if (theme.type === 'dark') {
 
-      root.style.setProperty('--card-bg-default', THEME_OVERLAYS.white03);
+      root.style.setProperty('--card-bg-default', THEME_OVERLAYS.white04);
       root.style.setProperty('--card-bg-elevated', THEME_OVERLAYS.white04);
       root.style.setProperty('--card-bg-subtle', THEME_OVERLAYS.white02);
       root.style.setProperty('--card-bg-hover', THEME_OVERLAYS.white04);
@@ -1016,7 +1013,7 @@ export class ThemeService {
 
       root.style.setProperty('--card-bg-default', THEME_OVERLAYS.black06);
       root.style.setProperty('--card-bg-elevated', THEME_OVERLAYS.black08);
-      root.style.setProperty('--card-bg-subtle', THEME_OVERLAYS.black04);
+      root.style.setProperty('--card-bg-subtle', 'transparent');
       root.style.setProperty('--card-bg-hover', THEME_OVERLAYS.black06);
       root.style.setProperty('--card-bg-active', THEME_OVERLAYS.black10);
       root.style.setProperty('--card-bg-accent', 'rgba(15, 23, 42, 0.08)');
diff --git a/src/web-ui/src/infrastructure/theme/integrations/MonacoThemeSync.ts b/src/web-ui/src/infrastructure/theme/integrations/MonacoThemeSync.ts
index 493259ce2f..5c7125ece9 100644
--- a/src/web-ui/src/infrastructure/theme/integrations/MonacoThemeSync.ts
+++ b/src/web-ui/src/infrastructure/theme/integrations/MonacoThemeSync.ts
@@ -27,10 +27,10 @@ function getBitfunLightMonacoTheme(): Monaco.editor.IStandaloneThemeData {
 
       'editor.selectionBackground': 'rgba(15, 23, 42, 0.14)',
       'editor.selectionForeground': '#1e293b',
-      'editor.inactiveSelectionBackground': 'rgba(15, 23, 42, 0.08)',
+      'editor.inactiveSelectionBackground': 'rgba(15, 23, 42, 0.1)',
       'editor.selectionHighlightBackground': 'rgba(15, 23, 42, 0.1)',
       'editor.selectionHighlightBorder': 'rgba(15, 23, 42, 0.22)',
-      'editor.wordHighlightBackground': 'rgba(15, 23, 42, 0.08)',
+      'editor.wordHighlightBackground': 'rgba(15, 23, 42, 0.1)',
       'editor.wordHighlightStrongBackground': 'rgba(15, 23, 42, 0.1)',
     }),
   };
diff --git a/src/web-ui/src/infrastructure/theme/presets/shared.ts b/src/web-ui/src/infrastructure/theme/presets/shared.ts
index b1cf2bdf7a..cae3186c33 100644
--- a/src/web-ui/src/infrastructure/theme/presets/shared.ts
+++ b/src/web-ui/src/infrastructure/theme/presets/shared.ts
@@ -193,22 +193,22 @@ export function createStandardEasing(smooth = 'cubic-bezier(0.4, 0, 0.2, 1)'): T
 
 export function createDarkNeutralBorder(): BorderColors {
   return {
-    subtle: 'rgba(255, 255, 255, 0.12)',
-    base: 'rgba(255, 255, 255, 0.18)',
-    medium: 'rgba(255, 255, 255, 0.24)',
-    strong: 'rgba(255, 255, 255, 0.3)',
-    prominent: 'rgba(255, 255, 255, 0.4)',
+    subtle: overlayWhite(0.12),
+    base: overlayWhite(0.18),
+    medium: overlayWhite(0.24),
+    strong: overlayWhite(0.3),
+    prominent: overlayWhite(0.4),
   };
 }
 
 export function createDarkNeutralElement(): ElementBackgrounds {
   return {
-    subtle: 'rgba(255, 255, 255, 0.05)',
-    soft: 'rgba(255, 255, 255, 0.07)',
-    base: 'rgba(255, 255, 255, 0.095)',
-    medium: 'rgba(255, 255, 255, 0.125)',
-    strong: 'rgba(255, 255, 255, 0.155)',
-    elevated: 'rgba(255, 255, 255, 0.19)',
+    subtle: overlayWhite(0.05),
+    soft: overlayWhite(0.06),
+    base: overlayWhite(0.1),
+    medium: overlayWhite(0.12),
+    strong: overlayWhite(0.15),
+    elevated: overlayWhite(0.2),
   };
 }
 
@@ -224,7 +224,7 @@ export function createGitColors(
 
 export function createDarkNeutralScrollbar(): ScrollbarColors {
   return {
-    thumb: 'rgba(255, 255, 255, 0.15)',
-    thumbHover: 'rgba(255, 255, 255, 0.28)',
+    thumb: overlayWhite(0.15),
+    thumbHover: overlayWhite(0.3),
   };
 }
diff --git a/src/web-ui/src/infrastructure/theme/presets/themePresetOutput.test.ts b/src/web-ui/src/infrastructure/theme/presets/themePresetOutput.test.ts
index fa7c6882c9..1b386ca26d 100644
--- a/src/web-ui/src/infrastructure/theme/presets/themePresetOutput.test.ts
+++ b/src/web-ui/src/infrastructure/theme/presets/themePresetOutput.test.ts
@@ -72,12 +72,12 @@ describe('builtin theme preset output', () => {
           "type": "light",
         },
         {
-          "hash": "f9732d9339162f704c6bd19dbac61e6ecf7819dd3d72a6437cce04812ab16db4",
+          "hash": "ebbb8c7b24d44430211ca1cd36e44530dc5b2f0c7b76ed372cb25afc5ad1e90b",
           "id": "bitfun-slate",
           "type": "dark",
         },
         {
-          "hash": "4d3b604eeed6cac6f06228c93b2771217dda6f5e6a1fd151bc48849f59c229c1",
+          "hash": "545249087b734444881c33a1e6925a5b348f9e7e150a737992177278e0b67cef",
           "id": "bitfun-dark",
           "type": "dark",
         },
diff --git a/src/web-ui/src/shared/theme/themeBoundaryFallbacks.ts b/src/web-ui/src/shared/theme/themeBoundaryFallbacks.ts
index f03a87b801..31b4b2b296 100644
--- a/src/web-ui/src/shared/theme/themeBoundaryFallbacks.ts
+++ b/src/web-ui/src/shared/theme/themeBoundaryFallbacks.ts
@@ -11,12 +11,12 @@ export const WIDGET_IFRAME_FALLBACK_COLOR = {
   warning: '#f59e0b',
   error: '#ef4444',
   staticWhite: '#ffffff',
-  borderSubtle: 'rgba(255, 255, 255, 0.1)',
-  borderBase: 'rgba(255, 255, 255, 0.15)',
+  borderSubtle: 'rgba(255, 255, 255, 0.12)',
+  borderBase: 'rgba(255, 255, 255, 0.12)',
   borderMedium: 'rgba(255, 255, 255, 0.24)',
   elementBgSubtle: 'rgba(255, 255, 255, 0.05)',
-  elementBgBase: 'rgba(255, 255, 255, 0.08)',
-  elementBgMedium: 'rgba(255, 255, 255, 0.15)',
+  elementBgBase: 'rgba(255, 255, 255, 0.12)',
+  elementBgMedium: 'rgba(255, 255, 255, 0.12)',
   shadowBase: 'rgba(0, 0, 0, 0.4)',
 } as const;
 
diff --git a/src/web-ui/src/tools/editor/components/DiffEditor.scss b/src/web-ui/src/tools/editor/components/DiffEditor.scss
index dac100574e..9d6dc0b9ca 100644
--- a/src/web-ui/src/tools/editor/components/DiffEditor.scss
+++ b/src/web-ui/src/tools/editor/components/DiffEditor.scss
@@ -356,7 +356,7 @@ $_diff-error-max-width: 400px;
     }
 
     .monaco-diff-editor .diffViewport {
-      background-color: var(--color-overlay-white-03) !important;
+      background-color: var(--color-overlay-white-04) !important;
       border-left: 1px dashed var(--border-medium) !important;
       border-right: 1px dashed var(--border-medium) !important;
       transition: all 0.2s ease;
diff --git a/src/web-ui/src/tools/editor/components/PlanViewer.scss b/src/web-ui/src/tools/editor/components/PlanViewer.scss
index cf05a5a15e..079c3db0df 100644
--- a/src/web-ui/src/tools/editor/components/PlanViewer.scss
+++ b/src/web-ui/src/tools/editor/components/PlanViewer.scss
@@ -95,7 +95,7 @@
         height: 18px;
         color: var(--color-text-muted);
         border-radius: 4px;
-        background: var(--color-overlay-white-03);
+        background: var(--color-overlay-white-04);
         transition: all 0.15s ease;
 
         svg {
diff --git a/src/web-ui/src/tools/editor/meditor/components/TiptapEditor.scss b/src/web-ui/src/tools/editor/meditor/components/TiptapEditor.scss
index 2a74e98deb..5317ea1055 100644
--- a/src/web-ui/src/tools/editor/meditor/components/TiptapEditor.scss
+++ b/src/web-ui/src/tools/editor/meditor/components/TiptapEditor.scss
@@ -484,7 +484,7 @@
       0 16px 40px color-mix(in srgb, var(--color-static-black) 45%, transparent),
       0 0 28px var(--color-accent-100),
       inset 0 1px 0 var(--color-overlay-white-12),
-      inset 0 -1px 0 var(--color-overlay-white-03);
+      inset 0 -1px 0 var(--color-overlay-white-04);
   }
 
   :root[data-theme='light'] &,
diff --git a/src/web-ui/src/tools/editor/themes/bitfun-dark.theme.test.ts b/src/web-ui/src/tools/editor/themes/bitfun-dark.theme.test.ts
index f9268c390f..73c0f54128 100644
--- a/src/web-ui/src/tools/editor/themes/bitfun-dark.theme.test.ts
+++ b/src/web-ui/src/tools/editor/themes/bitfun-dark.theme.test.ts
@@ -10,8 +10,8 @@ describe('BitFunDarkTheme color roles', () => {
     expect(colors['editor.lineHighlightBorder']).toBe('#202024');
     expect(colors['editorWidget.background']).toBe('#18181a');
     expect(colors['editorHoverWidget.statusBarBackground']).toBe('#202024');
-    expect(colors['diffEditor.unchangedRegionBackground']).toBe('#0D0D0F');
-    expect(colors['diffEditor.unchangedCodeBackground']).toBe('#0D0D0F');
+    expect(colors['diffEditor.unchangedRegionBackground']).toBe('#121214');
+    expect(colors['diffEditor.unchangedCodeBackground']).toBe('#121214');
   });
 
   it('keeps BitFun accent roles output-equivalent', () => {
diff --git a/src/web-ui/src/tools/editor/themes/bitfun-dark.theme.ts b/src/web-ui/src/tools/editor/themes/bitfun-dark.theme.ts
index f3ad0fa321..0331d1dded 100644
--- a/src/web-ui/src/tools/editor/themes/bitfun-dark.theme.ts
+++ b/src/web-ui/src/tools/editor/themes/bitfun-dark.theme.ts
@@ -19,7 +19,7 @@ const MONACO_DARK_SURFACE = {
   background: '#121214',
   elevated: '#18181a',
   borderSubtle: '#202024',
-  diffDeep: '#0D0D0F',
+  diffDeep: '#121214',
 } as const;
 
 const MONACO_EDITOR_TEXT = {
diff --git a/src/web-ui/src/tools/generative-widget/themePayload.test.ts b/src/web-ui/src/tools/generative-widget/themePayload.test.ts
index bab9cf71a7..39adee02a0 100644
--- a/src/web-ui/src/tools/generative-widget/themePayload.test.ts
+++ b/src/web-ui/src/tools/generative-widget/themePayload.test.ts
@@ -8,7 +8,7 @@ import {
 } from './themePayload';
 import { createWidgetThemeCompatibilityAliasCss } from './themePayloadCompatibility';
 
-const WIDGET_THEME_VAR_NAMES_HASH = '126ce04559882cd47ac46df2bf089e226c4cd4c959436f73747da28aceb81713';
+const WIDGET_THEME_VAR_NAMES_HASH = '067642ed0dbb41e7c2c33cf18716d6ea6ce423617a7bbe0139a55170e8241d14';
 const RETIRED_WIDGET_THEME_COMPAT_KEYS = [
   '--background-primary',
   '--background-secondary',
@@ -43,6 +43,7 @@ const RETIRED_WIDGET_THEME_COMPAT_KEYS = [
   '--color-warning-100',
   '--color-warning-500',
   '--color-warning-700',
+  '--color-overlay-white-03',
   '--color-accent',
   '--color-accent-primary',
   '--color-accent-alpha',
@@ -153,7 +154,7 @@ describe('generated widget theme payload contract', () => {
       first: requestedNames[0],
       last: requestedNames[requestedNames.length - 1],
     }).toEqual({
-      count: 245,
+      count: 176,
       hash: WIDGET_THEME_VAR_NAMES_HASH,
       first: '--color-bg-primary',
       last: '--tool-card-action-font-weight',
diff --git a/src/web-ui/src/tools/generative-widget/themePayload.ts b/src/web-ui/src/tools/generative-widget/themePayload.ts
index 35ffe86860..569e5cee4a 100644
--- a/src/web-ui/src/tools/generative-widget/themePayload.ts
+++ b/src/web-ui/src/tools/generative-widget/themePayload.ts
@@ -30,6 +30,7 @@ const FALLBACK_VAR = {
   errorBg: '--color-error-bg',
   errorBorder: '--color-error-border',
   staticWhite: '--color-static-white',
+  overlayWhite04: '--color-overlay-white-04',
   borderSubtle: '--border-subtle',
   borderBase: '--border-base',
   borderMedium: '--border-medium',
@@ -90,6 +91,7 @@ export const WIDGET_THEME_FALLBACK_VARS = {
   [FALLBACK_VAR.errorBg]: `color-mix(in srgb, ${widgetVar(FALLBACK_VAR.error)} 16%, transparent)`,
   [FALLBACK_VAR.errorBorder]: `color-mix(in srgb, ${widgetVar(FALLBACK_VAR.error)} 34%, transparent)`,
   [FALLBACK_VAR.staticWhite]: WIDGET_IFRAME_FALLBACK_COLOR.staticWhite,
+  [FALLBACK_VAR.overlayWhite04]: `color-mix(in srgb, ${widgetVar(FALLBACK_VAR.staticWhite)} 4%, transparent)`,
   [FALLBACK_VAR.borderSubtle]: WIDGET_IFRAME_FALLBACK_COLOR.borderSubtle,
   [FALLBACK_VAR.borderBase]: WIDGET_IFRAME_FALLBACK_COLOR.borderBase,
   [FALLBACK_VAR.borderMedium]: WIDGET_IFRAME_FALLBACK_COLOR.borderMedium,
@@ -129,14 +131,15 @@ export function createWidgetThemeFallbackCss(): string {
 
 // Host -> generated-widget iframe theme contract. Keep groups explicit so
 // isolated widgets receive stable tokens without scraping every root variable.
+// Host chrome/layout internals stay private: widgets have their own stacking
+// and layout context, so FlowChat, navigation, and z-index keys are not exported.
 const WIDGET_THEME_VAR_GROUPS = {
   staticAndOverlay: [
   FALLBACK_VAR.bgPrimary,
   FALLBACK_VAR.staticWhite,
   '--color-static-black',
   '--color-overlay-white-02',
-  '--color-overlay-white-03',
-  '--color-overlay-white-04',
+  FALLBACK_VAR.overlayWhite04,
   '--color-overlay-white-05',
   '--color-overlay-white-06',
   '--color-overlay-white-08',
@@ -205,27 +208,6 @@ const WIDGET_THEME_VAR_GROUPS = {
   '--border-strong',
   '--border-prominent',
   ],
-  zIndex: [
-  '--z-base',
-  '--z-decoration',
-  '--z-content',
-  '--z-header',
-  '--z-sticky',
-  '--z-bottom-bar',
-  '--z-floating',
-  '--z-dropdown',
-  '--z-overlay',
-  '--z-drawer',
-  '--z-modal',
-  '--z-modal-active',
-  '--z-fullscreen',
-  '--z-toast',
-  '--z-tooltip',
-  '--z-popover',
-  '--z-notification',
-  '--z-context-menu',
-  '--z-extreme',
-  ],
   elementGlassShadow: [
   FALLBACK_VAR.elementBgSubtle,
   FALLBACK_VAR.elementBgSoft,
@@ -288,59 +270,6 @@ const WIDGET_THEME_VAR_GROUPS = {
   '--opacity-hover',
   '--opacity-focus',
   ],
-  flowChat: [
-  '--flowchat-font-size-xxs',
-  '--flowchat-font-size-2xs',
-  '--flowchat-font-size-xs',
-  '--flowchat-font-size-sm',
-  '--flowchat-font-size-base',
-  '--flowchat-font-size-lg',
-  '--flowchat-font-size-xl',
-  '--flowchat-font-size-2xl',
-  '--flowchat-font-size-3xl',
-  '--flowchat-font-size-4xl',
-  '--flowchat-font-size-5xl',
-  '--flowchat-text-line-height',
-  '--flowchat-support-line-height',
-  '--flowchat-compact-line-height',
-  '--flowchat-flow-item-gap',
-  '--flowchat-inline-gap',
-  '--flowchat-control-gap',
-  '--flowchat-control-pad-y',
-  '--flowchat-control-pad-x',
-  '--flowchat-card-gap',
-  '--flowchat-card-radius',
-  '--flowchat-card-pad-y',
-  '--flowchat-card-pad-x',
-  '--flowchat-card-tight-pad-y',
-  '--flowchat-card-tight-pad-x',
-  '--flowchat-card-header-pad-y',
-  '--flowchat-card-header-pad-x',
-  '--flowchat-card-header-pad-right',
-  '--flowchat-card-expanded-pad-y',
-  '--flowchat-card-expanded-pad-x',
-  '--flowchat-code-font-size',
-  '--flowchat-code-line-height',
-  '--flowchat-code-block-pad-y',
-  '--flowchat-code-block-pad-x',
-  '--flowchat-markdown-block-gap',
-  '--flowchat-markdown-paragraph-gap',
-  '--flowchat-markdown-list-item-gap',
-  '--flowchat-markdown-list-nested-gap',
-  '--flowchat-markdown-heading-gap-before',
-  '--flowchat-markdown-heading-gap-after',
-  '--flowchat-markdown-code-block-gap',
-  '--flowchat-markdown-code-block-pad-y',
-  '--flowchat-markdown-code-block-pad-x',
-  '--flowchat-markdown-table-cell-pad-y',
-  '--flowchat-markdown-table-cell-pad-x',
-  ],
-  navigation: [
-  '--bitfun-nav-row-action-size',
-  '--bitfun-nav-row-action-icon-size',
-  '--bitfun-nav-row-action-offset',
-  '--bitfun-nav-row-action-gap',
-  ],
   motionAndFonts: [
   '--motion-fast',
   FALLBACK_VAR.motionBase,
diff --git a/src/web-ui/src/tools/generative-widget/themePayloadCompatibility.ts b/src/web-ui/src/tools/generative-widget/themePayloadCompatibility.ts
index 564a0a19b7..823e25dbeb 100644
--- a/src/web-ui/src/tools/generative-widget/themePayloadCompatibility.ts
+++ b/src/web-ui/src/tools/generative-widget/themePayloadCompatibility.ts
@@ -36,6 +36,7 @@ const WIDGET_THEME_COMPAT_ALIAS_FALLBACKS = {
   '--color-warning-100': '--color-warning-bg',
   '--color-warning-500': '--color-warning',
   '--color-warning-700': '--color-warning',
+  '--color-overlay-white-03': '--color-overlay-white-04',
   '--color-accent': '--color-accent-500',
   '--color-accent-primary': '--color-accent-500',
   '--color-accent-alpha': '--color-accent-100',
diff --git a/src/web-ui/src/tools/git/components/GitDiffEditor/GitDiffEditor.scss b/src/web-ui/src/tools/git/components/GitDiffEditor/GitDiffEditor.scss
index 3ed02ba86d..bb5d8e0a17 100644
--- a/src/web-ui/src/tools/git/components/GitDiffEditor/GitDiffEditor.scss
+++ b/src/web-ui/src/tools/git/components/GitDiffEditor/GitDiffEditor.scss
@@ -49,7 +49,7 @@ $_diff-padding-desktop: 32px;
     
     box-shadow: 
       inset 0 1px 3px var(--color-overlay-black-20),
-      0 0 0 1px var(--color-overlay-white-03);
+      0 0 0 1px var(--color-overlay-white-04);
     
     background: linear-gradient(
       180deg,
diff --git a/src/web-ui/src/tools/mermaid-editor/theme/_tokens.scss b/src/web-ui/src/tools/mermaid-editor/theme/_tokens.scss
index 66e5b3b3c0..cd7bf179df 100644
--- a/src/web-ui/src/tools/mermaid-editor/theme/_tokens.scss
+++ b/src/web-ui/src/tools/mermaid-editor/theme/_tokens.scss
@@ -17,7 +17,8 @@ $mermaid-light-node-stroke: rgba(100, 116, 139, 0.35);
 $mermaid-light-edge-label-border: rgba(100, 116, 139, 0.25);
 $mermaid-light-text-primary: #1e293b;
 $mermaid-light-text-secondary: #475569;
-$mermaid-light-surface: #f9fafb;
+$mermaid-light-surface: #f3f4f6;
+$mermaid-light-section-alt-fill: #e8eaef;
 $mermaid-light-highlight-stroke: #334155;
 
 // ==================== Mermaid CSS variables ====================
@@ -145,7 +146,7 @@ $mermaid-light-highlight-stroke: #334155;
   --mermaid-arrow-color: #64748b;
 
   // Subgraph/cluster
-  --mermaid-cluster-fill: rgba(15, 23, 42, 0.04);
+  --mermaid-cluster-fill: #{$mermaid-light-node-fill};
   --mermaid-cluster-stroke: #{$mermaid-light-edge-label-border};
   --mermaid-cluster-text: #{$mermaid-light-text-secondary};
 
@@ -171,12 +172,12 @@ $mermaid-light-highlight-stroke: #334155;
 
   // Gantt chart
   --mermaid-section-fill: #{$mermaid-light-surface};
-  --mermaid-section-alt-fill: #f0f1f3;
+  --mermaid-section-alt-fill: #{$mermaid-light-section-alt-fill};
   --mermaid-grid-stroke: rgba(100, 116, 139, 0.15);
   --mermaid-task-text: #{$mermaid-light-text-primary};
   --mermaid-done-fill: rgba(91, 154, 111, 0.15);
   --mermaid-done-stroke: #5b9a6f;
-  --mermaid-active-fill: rgba(15, 23, 42, 0.08);
+  --mermaid-active-fill: #{$mermaid-light-node-fill-hover};
   --mermaid-active-stroke: #{$mermaid-light-highlight-stroke};
   --mermaid-crit-fill: rgba(194, 101, 101, 0.15);
   --mermaid-crit-stroke: #c26565;
diff --git a/src/web-ui/src/tools/mermaid-editor/theme/mermaidThemeFallbacks.ts b/src/web-ui/src/tools/mermaid-editor/theme/mermaidThemeFallbacks.ts
index 515a4e67ae..8002702d41 100644
--- a/src/web-ui/src/tools/mermaid-editor/theme/mermaidThemeFallbacks.ts
+++ b/src/web-ui/src/tools/mermaid-editor/theme/mermaidThemeFallbacks.ts
@@ -9,7 +9,7 @@ const DARK_NODE_STROKE = '#5a5e6a';
 const DARK_NODE_BORDER = '#4a4e58';
 const DARK_NODE_STROKE_SUBTLE = '#3a3e48';
 const DARK_NODE_STROKE_HOVER = '#6a6e7a';
-const DARK_CLUSTER_TEXT = '#a1a1aa';
+const DARK_CLUSTER_TEXT = '#9ca3af';
 const DARK_INFO = '#78a8d8';
 const DARK_ERROR = '#e87878';
 
@@ -52,11 +52,11 @@ export const MERMAID_THEME_FALLBACKS = {
     edgeLabelBg: DARK_NODE_FILL,
     edgeLabelBgStrong: DARK_NODE_FILL_HOVER,
     edgeLabelBgRuntime: 'rgba(26, 28, 32, 0.95)',
-    edgeLabelBgHover: 'rgba(36, 38, 45, 0.98)',
-    noteFill: '#222428',
+    edgeLabelBgHover: DARK_NODE_FILL_HOVER,
+    noteFill: DARK_NODE_FILL_HOVER,
     noteText: DARK_CLUSTER_TEXT,
     noteStroke: DARK_NODE_BORDER,
-    activationFill: '#2a2c32',
+    activationFill: DARK_NODE_FILL_HOVER,
     activationStroke: DARK_NODE_STROKE,
     sectionFill: DARK_NODE_FILL,
     sectionAltFill: DARK_NODE_FILL_HOVER,
@@ -118,7 +118,7 @@ export const MERMAID_THEME_FALLBACKS = {
     gridStroke: 'rgba(156, 163, 175, 0.3)',
     doneFill: 'rgba(34, 197, 94, 0.2)',
     doneStroke: '#16a34a',
-    activeFill: 'rgba(15, 23, 42, 0.08)',
+    activeFill: 'rgba(15, 23, 42, 0.1)',
     activeStroke: LIGHT_HIGHLIGHT_STROKE,
     critFill: 'rgba(239, 68, 68, 0.2)',
     critStroke: LIGHT_ERROR,