diff --git a/.changeset/swifty-dolls-kick.md b/.changeset/swifty-dolls-kick.md
new file mode 100644
index 00000000..e95ddbce
--- /dev/null
+++ b/.changeset/swifty-dolls-kick.md
@@ -0,0 +1,7 @@
+---
+"@spencer-kit/coder-studio": patch
+---
+
+Refine workspace theming and session ergonomics by adding pane drag reordering,
+stabilizing update checks, hardening PTY color environment isolation, and
+polishing shared desktop surfaces across the app.
diff --git a/docs/superpowers/specs/2026-05-25-draft-pane-editor-integration-design.md b/docs/superpowers/specs/2026-05-25-draft-pane-editor-integration-design.md
new file mode 100644
index 00000000..e02cdd93
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-25-draft-pane-editor-integration-design.md
@@ -0,0 +1,455 @@
+# Draft Pane Editor Integration Design
+
+Date: 2026-05-25
+Status: Draft
+Owner: codex
+
+## Problem
+
+当前 `session pane` 区域只支持 agent session。`draft pane` 只能作为 `Claude` / `Codex` 的启动器，不能承接文件编辑。用户如果想在同一个 pane 布局体系里并排放置 agent 与 editor，只能依赖当前 workspace 的单例 editor 主区，不能把一个 `draft pane` 固化成专门的 editor pane。
+
+这带来三个产品问题：
+
+- pane 资源类型没有正式建模，`draft pane` 只能通向 agent session
+- 文件打开链路是 workspace 级单例，不支持“把资源管理器点击文件路由到某个 editor pane”
+- `agent pane` 布局和 editor 主区是两套平行模型，不能共享同一套 split / close / persistence 心智
+
+目标不是把 editor 混进 agent session 内部，而是把 `draft pane` 变成一种真正的资源入口：可以启动 agent，也可以固化为 editor。
+
+## Goals
+
+- 允许把文件拖到 `draft pane`，将其一次性转换为 `editor pane`
+- `session pane` 继续只承载 agent session，不接收文件拖放
+- `editor pane` 转换完成后保持 editor 类型，直到被关闭
+- 当存在 focused `editor pane` 时，资源管理器、搜索结果、quick open 打开的文件都优先路由到该 pane
+- 当不存在任何 `editor pane` 时，文件打开行为保持当前 workspace 级 editor 逻辑不变
+- 继续复用现有 `paneLayout` split tree、close 行为和服务端持久化链路
+
+## Non-Goals
+
+- 不支持把 `session pane` 直接改成 `editor pane`
+- 不支持把 `editor pane` 直接改成 `session pane`
+- 不支持拖文件到 `session pane` 或已存在的 `editor pane`
+- 不在第一期支持多个 editor pane 之间的文件拖拽交换
+- 不在第一期持久化每个 editor pane 的完整打开文件、dirty buffer、diff 状态
+- 不在第一期重写 Monaco model registry 主键
+- 不在第一期实现通用 workbench / tabbed resource system
+
+## Product Rules
+
+### Pane Type Rules
+
+Leaf pane 需要从隐式 `sessionId` 语义升级为显式资源类型：
+
+- `draft`
+- `session`
+- `editor`
+
+规则如下：
+
+- `draft pane` 可以通过点击 provider 进入 `session`
+- `draft pane` 可以通过文件拖放进入 `editor`
+- `session pane` 永远只承载 agent session
+- `editor pane` 永远只承载文件编辑
+- `close` 是统一出口：关闭当前资源后，pane 回到 `draft`
+
+### File Drop Rules
+
+- 只有 `draft pane` 注册文件拖放目标
+- 文件拖到 `draft pane` 的语义不是重排 pane，而是把该 draft 固化为 `editor pane`
+- `session pane` 和 `editor pane` 都不允许接收文件拖放
+
+### File Open Routing Rules
+
+- 若当前 workspace 存在 focused `editor pane`，文件打开动作优先路由到该 pane
+- 若 focused pane 已不存在或不再是 `editor`，可回退到最近活跃的 `editor pane`
+- 若当前 workspace 不存在任何 `editor pane`，继续沿用现有 workspace 级 editor 打开逻辑
+
+## Desired User Behavior
+
+### 1. Draft To Session
+
+用户在 `draft pane` 点击 `Claude` 或 `Codex`：
+
+- 当前 leaf 从 `draft` 转为 `session`
+- 启动对应 session
+- 该 pane 后续只承载 agent session
+
+### 2. Draft To Editor
+
+用户从资源管理器拖一个文件到 `draft pane`：
+
+- draft pane 出现文件拖放高亮
+- drop 后该 leaf 从 `draft` 转为 `editor`
+- editor pane 立即打开被拖入的文件
+- 该 pane 成为当前 focused `editor pane`
+
+### 3. Editor File Switching
+
+当某个 `editor pane` 处于 focus 状态时：
+
+- 点击资源管理器文件，在该 pane 打开
+- quick open 打开的文件，在该 pane 打开
+- 搜索结果点击打开的文件，在该 pane 打开
+
+当没有任何 `editor pane` 时：
+
+- 以上行为全部保持当前 workspace 级 editor 打开方式
+
+### 4. Editor Close
+
+关闭 `editor pane` 时：
+
+- 清理该 pane 作用域下的 editor 状态
+- 当前 leaf 回到 `draft`
+- 若它是 focused `editor pane`，清空 focus 或切到另一个仍存在的 `editor pane`
+
+该行为与现有 session close -> draft 的用户心智保持一致。
+
+### 5. Split Behavior
+
+`draft`、`session`、`editor` 三类 leaf 在 split 时都遵循统一规则：
+
+- 原 leaf 保持原资源
+- 新 sibling 一律创建为新的 `draft leaf`
+
+不复制 session，不复制 editor buffer，不产生“镜像 editor pane”。
+
+## Data Model
+
+### Core Type Changes
+
+把 [WorkspacePaneNode](/root/workspace/coder-studio/packages/core/src/domain/types.ts:25) 的 leaf 模型从：
+
+```ts
+type WorkspacePaneNode = {
+  id: string;
+  type: "leaf" | "split";
+  sessionId?: string;
+  direction?: "horizontal" | "vertical";
+  children?: WorkspacePaneNode[];
+};
+```
+
+升级为显式 leaf 类型：
+
+```ts
+type WorkspacePaneLeaf =
+  | { id: string; type: "leaf"; leafKind: "draft" }
+  | { id: string; type: "leaf"; leafKind: "session"; sessionId: string }
+  | { id: string; type: "leaf"; leafKind: "editor" };
+
+type WorkspacePaneSplit = {
+  id: string;
+  type: "split";
+  direction: "horizontal" | "vertical";
+  children: WorkspacePaneNode[];
+};
+
+type WorkspacePaneNode = WorkspacePaneLeaf | WorkspacePaneSplit;
+```
+
+`editor` 不需要单独的 `editorId`。`paneId` 本身就是 editor 作用域键。
+
+### Migration Rules
+
+现有持久化布局需要兼容旧结构：
+
+- 旧 leaf 且 `sessionId` 有值 -> `leafKind: "session"`
+- 旧 leaf 且 `sessionId` 为空 -> `leafKind: "draft"`
+- 新 `editor pane` 只以新结构写回
+
+读取和写入两端都应支持 normalize：
+
+- 前端 hydration 时兼容旧布局
+- 服务端保存和返回时兼容新布局
+
+## State Model
+
+### Pane-Scoped Editor State
+
+当前 editor 主状态是 workspace 级单例，主要包括：
+
+- `activeFilePath`
+- `openFiles`
+- `editorMode`
+- `gitDiffPreview`
+- `pendingEditorNavigation`
+
+要支持 `editor pane`，需要引入 pane 级 editor 状态，例如：
+
+```ts
+editorPaneStateAtomFamily({ workspaceId, paneId })
+```
+
+推荐最小拆分为：
+
+- `activeFilePath`
+- `openFiles`
+- `editorMode`
+- `gitDiffPreview`
+- `pendingNavigation`
+
+每个 `editor pane` 拥有自己独立的状态域。
+
+### Workspace Routing State
+
+在 workspace 级新增 editor 路由状态：
+
+- `focusedEditorPaneIdAtomFamily(workspaceId)`
+- `lastActiveEditorPaneIdAtomFamily(workspaceId)`
+
+职责：
+
+- 决定“当前文件打开动作应该打到哪个 editor pane”
+- 不承担具体 editor buffer 存储
+
+### Fallback Workspace Editor
+
+为降低迁移风险，第一期保留现有 workspace 级 editor 状态作为 fallback。
+
+行为如下：
+
+- 若存在 focused `editor pane`，文件打开路由到 pane-scoped editor state
+- 若不存在任何 `editor pane`，继续使用现有 workspace 级 editor state
+
+这样可以避免一次性重写所有 editor 消费方。
+
+## Architecture
+
+本次设计涉及四层：
+
+1. pane tree 与持久化模型
+2. draft file drop 与 pane resource view
+3. editor open router
+4. pane-scoped editor state / actions
+
+### 1. Pane Tree Layer
+
+主要文件：
+
+- [packages/web/src/features/agent-panes/atoms/pane-layout.ts](/root/workspace/coder-studio/packages/web/src/features/agent-panes/atoms/pane-layout.ts:1)
+- [packages/web/src/features/agent-panes/pane-layout-tree.ts](/root/workspace/coder-studio/packages/web/src/features/agent-panes/pane-layout-tree.ts:1)
+- [packages/server/src/workspace/pane-layout.ts](/root/workspace/coder-studio/packages/server/src/workspace/pane-layout.ts:1)
+
+需要做的变更：
+
+- 新增 typed leaf helpers：`draft` / `session` / `editor`
+- 关闭资源时统一把 leaf 还原为 `draft`
+- split 时保留原 leaf，新建 sibling draft
+- 新增 `convertDraftPaneToEditor(paneId)` pane mutation
+
+### 2. View Layer
+
+主要文件：
+
+- [packages/web/src/features/agent-panes/index.tsx](/root/workspace/coder-studio/packages/web/src/features/agent-panes/index.tsx:1)
+- [packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx](/root/workspace/coder-studio/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx:1)
+- [packages/web/src/features/agent-panes/views/shared/session-card.tsx](/root/workspace/coder-studio/packages/web/src/features/agent-panes/views/shared/session-card.tsx:1)
+- 新增 editor pane card 组件
+
+职责：
+
+- `draft pane` 渲染 provider launcher
+- `draft pane` 接收文件拖放并触发 draft -> editor
+- `session pane` 继续渲染 `SessionCard`
+- `editor pane` 渲染 `CodeEditorHost` / `EditorSurface` 的 pane 版本
+
+### 3. Editor Open Router
+
+新增统一入口：
+
+- `useEditorOpenRouter(workspaceId)`
+
+所有文件打开入口都应先经过 router，而不是直接写 workspace 级 `activeFilePath`。
+
+路由流程：
+
+1. 读取 `focusedEditorPaneId`
+2. 验证该 pane 仍存在且 `leafKind === "editor"`
+3. 若成立，打开到该 pane 的 editor state
+4. 否则若存在可回退的 editor pane，打开到该 pane
+5. 否则走当前 workspace fallback editor 逻辑
+
+需要接入 router 的入口包括：
+
+- 文件树选择
+- 搜索结果选择
+- quick open
+- 其它现有 open file 调用点
+
+### 4. Pane-Scoped Editor Hooks
+
+需要让现有 editor 能按 scope 工作，而不是只能依赖 active workspace：
+
+- [useCodeEditorActions](/root/workspace/coder-studio/packages/web/src/features/code-editor/actions/use-code-editor-actions.ts:1)
+- [useOpenLocation](/root/workspace/coder-studio/packages/web/src/features/code-editor/actions/use-open-location.ts:1)
+- [useOpenEditorsActions](/root/workspace/coder-studio/packages/web/src/features/workspace/actions/use-open-editors-actions.ts:1)
+
+不复制一套 editor，而是为这些 hooks 增加 scope 参数：
+
+- `workspace` fallback scope
+- `pane` scope
+
+例如：
+
+```ts
+type EditorScope =
+  | { kind: "workspace"; workspaceId: string }
+  | { kind: "pane"; workspaceId: string; paneId: string };
+```
+
+这样现有 `CodeEditorHost` 可以继续复用，只是数据源改为 scope-aware。
+
+## Interaction Details
+
+### Draft File Drop Feedback
+
+`draft pane` 的文件拖拽交互如下：
+
+- 默认态：沿用当前 session launcher
+- 文件 hover 态：整块 pane 高亮
+- 中心文案切为 `Open in editor`
+- drop 后立即切成 editor pane
+
+文件拖拽不使用现有 session pane 的五向 overlay。它不是 pane reorder，而是资源类型激活。
+
+### Editor Pane Chrome
+
+`editor pane` 的外层 chrome 应保持 pane 风格，而不是 workspace 主区样式。
+
+header：
+
+- 左侧：文件名、dirty 状态、当前模式
+- 右侧：split horizontal、split vertical、save、close
+
+主体：
+
+- 复用 [CodeEditorHost](/root/workspace/coder-studio/packages/web/src/features/code-editor/views/shared/code-editor-host.tsx:1) 与 `EditorSurface`
+
+### Focus Rules
+
+点击 `editor pane` 内任意可交互区域时：
+
+- 设为 `focusedEditorPaneId`
+
+注意：
+
+- 点击 `session pane` 不应清掉 editor focus
+- editor focus 是“文件打开路由目标”，不是全局最后点击 pane
+
+否则用户查看 session 输出后，文件树打开目标会被意外重置。
+
+## Persistence Strategy
+
+### Persisted
+
+第一期持久化：
+
+- `paneLayout`
+
+### Not Persisted In V1
+
+第一期不持久化：
+
+- `focusedEditorPaneId`
+- editor pane 的 `openFiles`
+- dirty buffer
+- `pendingNavigation`
+- `gitDiffPreview`
+
+刷新后允许出现：
+
+- pane layout 仍存在
+- `editor pane` 恢复为空 editor shell，等待重新打开文件
+
+这比持久化未保存 buffer 更安全，也更符合当前代码基础。
+
+## Implementation Plan
+
+按以下顺序实现：
+
+1. 扩展 `WorkspacePaneNode` 与 pane tree helpers
+2. 增加 `draft -> editor` mutation 和 `editor pane` 视图容器
+3. 引入 editor open router，先接管所有 open file 入口
+4. 为 editor hooks 增加 scope，支持 pane-scoped editor state
+5. 补齐 focus、dispose、close -> draft 细节
+6. 完善测试与旧布局迁移
+
+这样每一步都可单独验证，不需要一次性重写整个 editor 系统。
+
+## Testing
+
+至少需要覆盖四类测试。
+
+### Pane Tree Tests
+
+- 旧 leaf 迁移为 typed leaf
+- `draft -> editor`
+- `editor close -> draft`
+- `editor split -> editor + draft`
+
+### Component Interaction Tests
+
+- 文件拖到 `draft pane` 后转换为 `editor pane`
+- 文件拖到 `session pane` 无效
+- 点击 `editor pane` 后成为 focused editor target
+
+### Router Tests
+
+- 有 focused `editor pane` 时，文件树点击打开到该 pane
+- focused pane 失效时，回退到下一个 editor pane 或 fallback editor
+- 没有 editor pane 时，保持当前 workspace 级打开行为
+
+### End-To-End Tests
+
+- split 出两个 pane
+- 左边启动 `Codex` session
+- 右边把文件拖入 `draft pane` 变成 `editor pane`
+- 在资源管理器继续点文件，确认都在右侧 editor pane 打开
+- 关闭 editor pane，确认回到 draft launcher
+
+## Risks And Mitigations
+
+### 1. Dual State During Migration
+
+风险：
+
+- pane-scoped editor state 和 workspace fallback editor state 会并存一段时间
+
+控制：
+
+- 所有 open file 行为统一先走 router
+- 避免调用点直接双写两套 atom
+
+### 2. Monaco Lifecycle Complexity
+
+风险：
+
+- 当前 model registry 以 workspace + path 为主，不是 pane + path
+
+控制：
+
+- 第一阶段继续共享 model registry
+- 只把 editor UI 状态分 pane，不立即改 model key 体系
+
+### 3. Broad Existing Workspace-Level Coupling
+
+风险：
+
+- 现有很多代码直接依赖 workspace 级 editor atom
+
+控制：
+
+- 先把 pane editor 作为新的 scoped consumer
+- workspace fallback editor 继续服务旧路径
+- 逐步迁移消费方，而不是一次性重写
+
+## Acceptance Criteria
+
+- 文件可以拖入 `draft pane`，并把其转换为 `editor pane`
+- `session pane` 无法接收文件拖放
+- `editor pane` 获得 focus 后，资源管理器点击文件会持续在该 pane 打开
+- 没有任何 `editor pane` 时，文件打开行为保持当前逻辑
+- 关闭 `editor pane` 后，pane 回到 `draft`
+- 旧 `paneLayout` 可以安全迁移到 typed leaf 结构
diff --git a/docs/superpowers/specs/2026-05-25-vue-editor-lsp-support-design.md b/docs/superpowers/specs/2026-05-25-vue-editor-lsp-support-design.md
new file mode 100644
index 00000000..4597b438
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-25-vue-editor-lsp-support-design.md
@@ -0,0 +1,372 @@
+# Vue Editor and LSP Support Design
+
+> Status: Draft
+> Date: 2026-05-25
+> Scope: `packages/web/src/features/code-editor/*`, `packages/server/src/lsp/*`, `packages/server/src/lsp-tools/*`, `packages/server/src/commands/lsp.ts`, `packages/core/src/domain/lsp.ts`, related tests, package dependencies for Vue language tooling
+
+## Goal
+
+Add first-class Vue Single File Component support to the Monaco-based editor so `.vue` files behave like supported code files instead of plain text.
+
+The feature should deliver:
+
+- Vue syntax highlighting for `.vue` files
+- workspace-backed Vue editor models using a stable Monaco language id
+- Vue LSP session startup through the existing lazy `auto` runtime flow
+- Vue diagnostics, hover, go-to-definition, references, and document symbols through Volar
+- managed installation and recovery UX consistent with the existing Python, Go, and Rust LSP flow
+
+## Problem
+
+The current editor pipeline recognizes TypeScript, JavaScript, Python, Go, Rust, and a few markup styles by extension. `.vue` is not mapped in the editor language detector, so it falls back to `plaintext`.
+
+That creates two failures:
+
+1. the Monaco editor does not provide meaningful Vue syntax highlighting
+2. the LSP pipeline does not consider `.vue` eligible for session startup, so no language intelligence is available
+
+For Vue projects, this means:
+
+- `.vue` files are visually degraded
+- template and `<script setup>` content are not understood semantically
+- cross-file navigation into Vue components is unavailable
+- no Vue-aware diagnostics surface in the editor
+
+## Decision
+
+Adopt a dedicated Vue path through both editor language detection and LSP resolution.
+
+The system should use:
+
+1. a distinct Monaco language id: `vue`
+2. a dedicated `LspServerKind`: `vue`
+3. the official Vue language server package, `@vue/language-server` (Volar), for semantic features
+4. the existing managed-tool and lazy-session architecture instead of a Vue-specific side channel
+
+This is preferred over treating `.vue` as `html` or routing it through the TypeScript LSP because Vue SFC semantics require a server that understands the relationship between template, script, styles, props, emits, and generated TypeScript state.
+
+## Non-Goals
+
+This phase does not include:
+
+- Vue-specific autocomplete beyond whatever Volar already exposes through the existing LSP capability surface
+- rename, code actions, formatting, or semantic token customization
+- support for non-SFC Vue-related formats such as `.astro` or custom template containers
+- a generic third-party language registration system
+
+## Product Semantics
+
+### Keep Editing Non-Blocking
+
+If Vue language tooling is unavailable, the editor must still open and edit `.vue` files normally.
+
+The degraded state should be:
+
+- syntax highlighting if Monaco Vue language registration succeeds
+- no hover, definition, references, symbols, or diagnostics until LSP is ready
+- a recoverable inline notice if the Vue language server is missing or failed
+
+### Match Existing LSP Runtime Behavior
+
+Vue support should follow the same runtime contract as existing LSP-backed languages:
+
+- default mode remains `auto`
+- session startup is lazy and only happens when an eligible workspace-backed `.vue` file is attached
+- sessions are keyed by `workspaceId + server kind`
+- idle sessions are automatically disposed by the existing TTL logic
+
+No Vue-specific eager startup or background indexing should be added.
+
+## Architecture
+
+Vue support should be delivered in two coordinated layers.
+
+### Layer 1: Monaco Vue Language
+
+The web app must stop treating `.vue` as unknown text. It should map `.vue` to a dedicated Monaco language id, `vue`, and ensure the editor model uses that id for both workspace-backed and standalone files.
+
+The Monaco language implementation should be lightweight and pragmatic:
+
+- register `vue` once during editor bootstrap
+- provide a tokenizer suitable for Vue SFC structure
+- prioritize useful highlighting for `<template>`, `<script>`, `<script setup>`, `<style>`, directives, interpolation, and HTML-like structure
+
+The initial implementation does not need to invent a large custom language subsystem. It only needs to establish a stable `vue` Monaco language id and a reasonable syntax-highlighting baseline.
+
+### Layer 2: Vue LSP Through Volar
+
+The backend must treat `.vue` as a supported LSP language family with a dedicated `vue` server kind.
+
+The LSP path should follow the same flow as existing languages:
+
+1. the editor attaches a workspace-backed model with `monacoLanguage: "vue"`
+2. the frontend bridge resolves `vue` as an LSP-capable language
+3. the frontend sends `lsp.ensureSession`
+4. the backend resolves the `vue` tool definition
+5. the backend launches a workspace-scoped Volar session if the tool is available
+6. the frontend opens and syncs the document through the existing LSP bridge
+7. Monaco providers surface definition, hover, references, symbols, and diagnostics
+
+## Alternatives Considered
+
+### Option 1: Treat `.vue` as `html` and stop there
+
+Pros:
+
+- smallest implementation effort
+- improves visual readability quickly
+
+Cons:
+
+- no real Vue semantics
+- templates and scripts remain disconnected
+- no path to proper diagnostics or navigation
+
+This is insufficient for the requested outcome.
+
+### Option 2: Treat `.vue` as TypeScript-family and reuse `typescript-language-server`
+
+Pros:
+
+- reuses an existing bundled LSP dependency
+- may provide some script-block behavior
+
+Cons:
+
+- does not correctly model Vue SFCs
+- templates, props, emits, and generated type relationships are unreliable
+- conflates Vue support with TypeScript worker assumptions
+
+This is architecturally incorrect for a Vue editor feature.
+
+### Option 3: Dedicated Monaco `vue` + dedicated Volar server
+
+Pros:
+
+- aligns editor language id and server kind cleanly
+- fits the existing lazy LSP architecture
+- gives Vue SFCs the correct semantic engine
+- keeps future expansion straightforward
+
+Cons:
+
+- requires new package dependency and managed-install support
+- touches both frontend and backend language maps
+
+This is the recommended design.
+
+## Frontend Design
+
+### Language Detection
+
+`packages/web/src/features/code-editor/components/monaco-host.tsx`
+
+Update the editor language detector so:
+
+- `.vue` resolves to `vue`
+- LSP language detection returns `vue` unchanged
+
+The current JSX and TSX special-casing should remain intact.
+
+### Monaco Language Registration
+
+Add a small Monaco Vue language registration module under the code editor feature, for example:
+
+- `packages/web/src/features/code-editor/monaco/vue-language.ts`
+
+Responsibilities:
+
+- register Monaco language id `vue`
+- register tokenizer and configuration once
+- export an idempotent `ensureVueLanguageRegistered()` helper used by the editor host bootstrap path
+
+This keeps Vue-specific editor setup isolated from the main React component.
+
+### LSP Bridge Language Mapping
+
+`packages/web/src/features/code-editor/lsp/language-map.ts`
+
+Extend the bridge-side LSP server-kind resolver so:
+
+- `.vue` files resolve to `vue`
+- `monacoLanguage === "vue"` resolves to `vue`
+
+`packages/web/src/features/code-editor/lsp/bridge.ts`
+
+The provider registration path should register Monaco providers directly for `vue`. No language-id folding is needed for Vue, unlike `typescriptreact` and `javascriptreact`.
+
+### UX Expectations
+
+The editor should behave like existing supported LSP languages:
+
+- no visible notice when Vue is supported and ready
+- inline missing-tool notice when the Vue LSP is unavailable
+- install and retry actions reuse the existing notice mechanics
+
+## Backend Design
+
+### Core Domain
+
+`packages/core/src/domain/lsp.ts`
+
+Extend `LspServerKind` to include:
+
+- `vue`
+
+Any shared schemas or discriminated unions derived from `LspServerKind` must stay exhaustive after this change.
+
+### Server-Kind Resolution
+
+`packages/server/src/lsp/server-factory.ts`
+
+Extend path-based resolution so:
+
+- `.vue` maps to `vue`
+
+This preserves the existing separation between file-extension routing and process launch configuration.
+
+### Tool Definition
+
+`packages/server/src/lsp-tools/definitions.ts`
+
+Add a new `vue` definition using `@vue/language-server`.
+
+The definition should include:
+
+- `serverKind: "vue"`
+- a user-facing display name such as `Vue language server`
+- default command and stdio args suitable for Volar
+- managed install metadata
+
+Vue should not be bundled in the same way TypeScript is currently bundled. It should use the managed install path so the product behavior matches Python, Go, and Rust: explicit installation, structured status, and recovery UI.
+
+### Managed Install
+
+`packages/server/src/lsp-tools/install-manager.ts`
+
+Extend managed install planning and executable resolution to support `vue`.
+
+The install contract should:
+
+- install `@vue/language-server` into the managed tools root under a versioned directory
+- produce a stable executable path recorded in the manifest
+- verify the executable exists before reporting success
+
+If Volar requires a Node-based CLI entrypoint rather than a native binary, the manifest and execution path should support launching it through the current Node runtime in the same style already used for bundled TypeScript CLI resolution.
+
+### Command Surface
+
+`packages/server/src/commands/lsp.ts`
+
+Extend any `z.enum([...])` validation that currently enumerates installable server kinds so `vue` is accepted.
+
+This ensures frontend install actions can request Vue tool installation through the same API shape used today.
+
+## Package and Runtime Dependencies
+
+### Server Dependencies
+
+`packages/server/package.json`
+
+Add the Vue language server package required by the chosen launch strategy:
+
+- `@vue/language-server`
+
+If Volar requires additional runtime companions for stable operation, add only the minimum required packages and document why in the dependency comment or surrounding implementation notes.
+
+### No Frontend Framework Runtime Dependency
+
+The web package should not pull in the Vue framework just to highlight or edit `.vue` files. Monaco registration and LSP transport are sufficient.
+
+## Failure Handling
+
+The feature must preserve current degraded-state behavior:
+
+- unsupported or missing Vue tooling must not break file opening
+- missing prerequisites must produce structured LSP state
+- failed install attempts must remain retryable
+- LSP startup failure must degrade to ordinary editing plus notice
+
+The system must not:
+
+- crash the editor when a Vue file opens
+- silently misroute `.vue` to the TypeScript server
+- report `unsupported_language` for `.vue` after the feature ships
+
+## Testing Strategy
+
+### Frontend Tests
+
+Add or update tests for:
+
+- `.vue` editor language detection
+- standalone and workspace-backed model creation using `vue`
+- LSP bridge language resolution for Vue
+- provider registration and attach flow for `monacoLanguage: "vue"`
+
+Primary files likely affected:
+
+- `packages/web/src/features/code-editor/components/monaco-host.test.tsx`
+- `packages/web/src/features/code-editor/lsp/bridge.test.tsx`
+- `packages/web/src/features/code-editor/lsp/providers.test.ts`
+- new focused tests for the Vue Monaco registration module
+
+### Backend Tests
+
+Add or update tests for:
+
+- `LspServerKind` exhaustiveness where relevant
+- `.vue` path resolution in `server-factory`
+- Vue tool definition lookup
+- Vue install-manager planning and verification
+- LSP command schema accepting `vue`
+- `ensureSession()` returning `unsupported_language` no longer applies to `.vue`
+
+Primary files likely affected:
+
+- `packages/server/src/lsp/server-factory.test.ts`
+- `packages/server/src/lsp-tools/manager.test.ts`
+- `packages/server/src/lsp-tools/install-manager.test.ts`
+- `packages/server/src/__tests__/lsp-commands.test.ts`
+- `packages/server/src/lsp/manager.test.ts`
+
+## Implementation Notes
+
+### File Boundaries
+
+Recommended new or expanded units:
+
+- `packages/web/src/features/code-editor/monaco/vue-language.ts`
+  - Vue Monaco registration only
+- `packages/web/src/features/code-editor/components/monaco-host.tsx`
+  - detect and apply `vue` language ids
+- `packages/web/src/features/code-editor/lsp/language-map.ts`
+  - map `.vue` and `vue` to `LspServerKind.vue`
+- `packages/core/src/domain/lsp.ts`
+  - extend shared server-kind type
+- `packages/server/src/lsp/server-factory.ts`
+  - resolve `.vue` to `vue`
+- `packages/server/src/lsp-tools/definitions.ts`
+  - describe Vue tool ownership and launch strategy
+- `packages/server/src/lsp-tools/install-manager.ts`
+  - install and verify the Vue language server
+
+### Launch Strategy Constraint
+
+The implementation must validate the exact Volar CLI entrypoint shape before coding the install path. The design decision is fixed: use `@vue/language-server` through the managed-tool system. The only implementation choice left is whether the manifest stores:
+
+- a direct executable shim produced by package installation
+- or a Node-launched entry script path plus args
+
+That choice should be determined from the installed package structure during implementation and then covered by tests.
+
+## Rollout Outcome
+
+After this work:
+
+- `.vue` files open with Vue-aware syntax highlighting
+- Vue files participate in the same lazy LSP lifecycle as other supported languages
+- Volar powers diagnostics and navigation for Vue SFCs
+- install and recovery behavior matches the existing managed LSP UX
+
+The result is a consistent product story: Vue becomes a first-class editor language instead of a plain-text exception.
diff --git a/e2e/specs/sessions/pane-drag-reorder.spec.ts b/e2e/specs/sessions/pane-drag-reorder.spec.ts
new file mode 100644
index 00000000..eb75d285
--- /dev/null
+++ b/e2e/specs/sessions/pane-drag-reorder.spec.ts
@@ -0,0 +1,189 @@
+import { expect, type Locator, type Page, test } from "@playwright/test";
+import { translatePatternForE2E } from "../../fixtures/i18n.js";
+import {
+  launchClaudeSession,
+  openWorkspace,
+  waitForSessionReady,
+} from "../helpers/workspace-session";
+
+function getSessionPanes(page: Page): Locator {
+  return page.locator(".session-card.agent-pane[data-session-id]");
+}
+
+function getDraftPanes(page: Page): Locator {
+  return page.locator("[data-pane-id]:has(.agent-draft-launcher)");
+}
+
+async function resetWorkspaceIsolation(page: Page): Promise<void> {
+  await page.goto("/workspace");
+  await page.waitForFunction(
+    () => {
+      const loading = document.querySelector(
+        '.app-loading-shell, [data-testid="workspace-resolving-shell"]'
+      );
+      if (loading) {
+        return false;
+      }
+
+      return Boolean(
+        document.querySelector(
+          ".welcome-container, .workspace-page, .agent-draft-launcher, .session-card.agent-pane[data-session-id]"
+        )
+      );
+    },
+    { timeout: 20000 }
+  );
+
+  const closeWorkspaceButtons = page.getByRole("button", {
+    name: translatePatternForE2E("action.close_workspace"),
+  });
+
+  while ((await closeWorkspaceButtons.count()) > 0) {
+    const countBeforeClose = await closeWorkspaceButtons.count();
+    await closeWorkspaceButtons.first().click();
+    await expect
+      .poll(async () => closeWorkspaceButtons.count(), {
+        timeout: 15000,
+      })
+      .toBeLessThan(countBeforeClose);
+  }
+}
+
+async function splitPaneHorizontally(page: Page, pane: Locator): Promise<void> {
+  await pane.getByRole("button", { name: "Split horizontal" }).click();
+}
+
+async function launchClaudeSessionInDraft(page: Page, draftPane: Locator): Promise<void> {
+  await draftPane.locator(".agent-provider-card-claude").first().click();
+}
+
+async function dragHandleToPaneCenter(
+  page: Page,
+  dragButton: Locator,
+  targetPane: Locator
+): Promise<void> {
+  const handleBox = await dragButton.boundingBox();
+  const targetBox = await targetPane.boundingBox();
+
+  expect(handleBox).not.toBeNull();
+  expect(targetBox).not.toBeNull();
+
+  const startX = handleBox!.x + handleBox!.width / 2;
+  const startY = handleBox!.y + handleBox!.height / 2;
+  const targetX = targetBox!.x + targetBox!.width / 2;
+  const targetY = targetBox!.y + targetBox!.height / 2;
+
+  await page.mouse.move(startX, startY);
+  await page.mouse.down();
+  await page.mouse.move(startX + 8, startY + 8, { steps: 4 });
+  await page.mouse.move(targetX, targetY, { steps: 16 });
+  await page.mouse.up();
+}
+
+interface SessionPaneSnapshot {
+  paneId: string;
+  sessionId: string;
+}
+
+async function getSessionPaneSnapshots(page: Page): Promise<SessionPaneSnapshot[]> {
+  return page.locator(".session-card.agent-pane[data-session-id]").evaluateAll((nodes) =>
+    nodes.map((node) => {
+      const paneId = node.getAttribute("data-pane-id");
+      const sessionId = node.getAttribute("data-session-id");
+
+      if (!paneId || !sessionId) {
+        throw new Error("Session pane is missing drag identity attributes");
+      }
+
+      return {
+        paneId,
+        sessionId,
+      };
+    })
+  );
+}
+
+test.describe("session pane desktop drag reorder", () => {
+  test.beforeEach(async ({ page }) => {
+    await resetWorkspaceIsolation(page);
+  });
+
+  test("swaps two session panes when dragging onto another pane center", async ({ page }) => {
+    await openWorkspace(page);
+    await launchClaudeSession(page);
+    await waitForSessionReady(page);
+
+    const firstPane = getSessionPanes(page).first();
+    await splitPaneHorizontally(page, firstPane);
+
+    const draftPane = getDraftPanes(page).first();
+    await expect(draftPane).toBeVisible({ timeout: 15000 });
+    await launchClaudeSessionInDraft(page, draftPane);
+
+    await expect(getSessionPanes(page)).toHaveCount(2, { timeout: 20000 });
+    await waitForSessionReady(page);
+    await expect(getSessionPanes(page).nth(1).locator(".session-state-badge")).toHaveText(
+      /^(Running|Idle)$/,
+      { timeout: 20000 }
+    );
+
+    const paneSnapshotsBeforeDrag = await getSessionPaneSnapshots(page);
+    expect(paneSnapshotsBeforeDrag).toHaveLength(2);
+
+    const sourcePane = getSessionPanes(page).nth(0);
+    const targetPane = getSessionPanes(page).nth(1);
+    await dragHandleToPaneCenter(
+      page,
+      sourcePane.getByRole("button", { name: "Drag pane" }),
+      targetPane
+    );
+
+    await expect
+      .poll(async () => getSessionPaneSnapshots(page), {
+        timeout: 10000,
+      })
+      .toEqual([
+        {
+          paneId: paneSnapshotsBeforeDrag[0]?.paneId ?? "",
+          sessionId: paneSnapshotsBeforeDrag[1]?.sessionId ?? "",
+        },
+        {
+          paneId: paneSnapshotsBeforeDrag[1]?.paneId ?? "",
+          sessionId: paneSnapshotsBeforeDrag[0]?.sessionId ?? "",
+        },
+      ]);
+  });
+
+  test("moves a session pane into a draft pane on center drop", async ({ page }) => {
+    await openWorkspace(page);
+    await launchClaudeSession(page);
+    await waitForSessionReady(page);
+
+    const sessionPane = getSessionPanes(page).first();
+    const sourceSessionId = await sessionPane.getAttribute("data-session-id");
+    expect(sourceSessionId).toBeTruthy();
+    await splitPaneHorizontally(page, sessionPane);
+
+    const draftPane = getDraftPanes(page).first();
+    await expect(draftPane).toBeVisible({ timeout: 15000 });
+    const targetDraftPaneId = await draftPane.getAttribute("data-pane-id");
+    expect(targetDraftPaneId).toBeTruthy();
+
+    await dragHandleToPaneCenter(
+      page,
+      sessionPane.getByRole("button", { name: "Drag pane" }),
+      draftPane
+    );
+
+    await expect(page.locator(".agent-draft-launcher")).toHaveCount(0, { timeout: 10000 });
+    await expect(getSessionPanes(page)).toHaveCount(1, { timeout: 10000 });
+    await expect(getSessionPanes(page).first()).toHaveAttribute(
+      "data-pane-id",
+      targetDraftPaneId ?? ""
+    );
+    await expect(getSessionPanes(page).first()).toHaveAttribute(
+      "data-session-id",
+      sourceSessionId ?? ""
+    );
+  });
+});
diff --git a/packages/cli/src/update-worker.test.ts b/packages/cli/src/update-worker.test.ts
index 3ae72169..33f7d066 100644
--- a/packages/cli/src/update-worker.test.ts
+++ b/packages/cli/src/update-worker.test.ts
@@ -4,6 +4,12 @@ import { join } from "node:path";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { runRestartHandoff, runUpdateWorker } from "./update-worker.js";
 
+type UpdateWorkerDeps = NonNullable<Parameters<typeof runUpdateWorker>[1]>;
+type RestartHandoffDeps = NonNullable<Parameters<typeof runRestartHandoff>[1]>;
+type RunCommandMock = NonNullable<UpdateWorkerDeps["runCommand"]>;
+type SpawnDetachedProcessMock = NonNullable<UpdateWorkerDeps["spawnDetachedProcess"]>;
+type WaitForProcessExitMock = NonNullable<RestartHandoffDeps["waitForProcessExit"]>;
+
 describe("update-worker", () => {
   const tempDirs: string[] = [];
 
@@ -31,8 +37,8 @@ describe("update-worker", () => {
 
   it("writes restarting state and spawns a detached restart handoff after install success", async () => {
     const env = createEnv();
-    const runCommand = vi.fn(async () => {});
-    const spawnDetachedProcess = vi.fn(async () => {});
+    const runCommand = vi.fn<RunCommandMock>(async () => {});
+    const spawnDetachedProcess = vi.fn<SpawnDetachedProcessMock>(async () => {});
 
     await runUpdateWorker(env, {
       runCommand,
@@ -61,7 +67,7 @@ describe("update-worker", () => {
 
   it("falls back to manual_required on permission-related install errors", async () => {
     const env = createEnv();
-    const runCommand = vi.fn(async () => {
+    const runCommand = vi.fn<RunCommandMock>(async () => {
       throw new Error("npm install failed with EACCES");
     });
 
@@ -82,8 +88,10 @@ describe("update-worker", () => {
 
   it("marks restart failures with manual restart guidance", async () => {
     const env = createEnv();
-    const runCommand = vi.fn().mockRejectedValueOnce(new Error("pm2 restart failed"));
-    const waitForProcessExit = vi.fn(async () => {});
+    const runCommand = vi
+      .fn<RunCommandMock>()
+      .mockRejectedValueOnce(new Error("pm2 restart failed"));
+    const waitForProcessExit = vi.fn<WaitForProcessExitMock>(async () => {});
 
     await runRestartHandoff(env, {
       runCommand,
@@ -105,8 +113,8 @@ describe("update-worker", () => {
 
   it("sanitizes pm2 and runtime override env before invoking install and restart commands", async () => {
     const env = createEnv();
-    const runCommand = vi.fn(async () => {});
-    const spawnDetachedProcess = vi.fn(async () => {});
+    const runCommand = vi.fn<RunCommandMock>(async () => {});
+    const spawnDetachedProcess = vi.fn<SpawnDetachedProcessMock>(async () => {});
     const originalEnv = {
       PM2_HOME: process.env.PM2_HOME,
       PM2_PROGRAMMATIC: process.env.PM2_PROGRAMMATIC,
@@ -150,8 +158,12 @@ describe("update-worker", () => {
       }
     }
 
-    for (const call of runCommand.mock.calls) {
-      const options = call[2] as { env?: NodeJS.ProcessEnv };
+    for (const [, , options] of runCommand.mock.calls) {
+      expect(options).toBeDefined();
+      if (!options) {
+        throw new Error("Expected runCommand to receive an options object");
+      }
+
       expect(options.env?.PM2_HOME).toBe("/tmp/custom-pm2-home");
       expect(options.env?.PM2_PROGRAMMATIC).toBeUndefined();
       expect(options.env?.PM2_JSON_PROCESSING).toBeUndefined();
@@ -165,7 +177,8 @@ describe("update-worker", () => {
       expect(options.env?.pm_id).toBeUndefined();
     }
 
-    const handoffEnv = spawnDetachedProcess.mock.calls[0]?.[2] as NodeJS.ProcessEnv | undefined;
+    const handoffCall = spawnDetachedProcess.mock.calls[0];
+    const handoffEnv = handoffCall?.[2];
     expect(handoffEnv?.PM2_HOME).toBe("/tmp/custom-pm2-home");
     expect(handoffEnv?.PM2_PROGRAMMATIC).toBeUndefined();
     expect(handoffEnv?.PM2_JSON_PROCESSING).toBeUndefined();
@@ -180,8 +193,8 @@ describe("update-worker", () => {
 
   it("waits for the install worker to exit before running the restart command", async () => {
     const env = createEnv();
-    const waitForProcessExit = vi.fn(async () => {});
-    const runCommand = vi.fn(async () => {});
+    const waitForProcessExit = vi.fn<WaitForProcessExitMock>(async () => {});
+    const runCommand = vi.fn<RunCommandMock>(async () => {});
 
     await runRestartHandoff(env, {
       runCommand,
diff --git a/packages/server/src/terminal/manager.test.ts b/packages/server/src/terminal/manager.test.ts
index 53bc177c..c07c6897 100644
--- a/packages/server/src/terminal/manager.test.ts
+++ b/packages/server/src/terminal/manager.test.ts
@@ -195,17 +195,23 @@ describe("TerminalManager", () => {
     });
 
     it("omits COLORFGBG when themeBackground is not provided", () => {
-      const spec: TerminalSpec = {
-        workspaceId: "ws-123",
-        kind: "shell",
-        argv: ["bash"],
-        cwd: "/home/user",
-      };
+      vi.stubEnv("COLORFGBG", "0;15");
 
-      manager.create(spec);
+      try {
+        const spec: TerminalSpec = {
+          workspaceId: "ws-123",
+          kind: "shell",
+          argv: ["bash"],
+          cwd: "/home/user",
+        };
 
-      const spawnOptions = (mockPtyHost.spawn as Mock).mock.calls[0][1];
-      expect(spawnOptions.env.COLORFGBG).toBeUndefined();
+        manager.create(spec);
+
+        const spawnOptions = (mockPtyHost.spawn as Mock).mock.calls[0][1];
+        expect(spawnOptions.env.COLORFGBG).toBeUndefined();
+      } finally {
+        vi.unstubAllEnvs();
+      }
     });
 
     it("omits COLORFGBG when themeBackground is malformed", () => {
diff --git a/packages/server/src/terminal/manager.ts b/packages/server/src/terminal/manager.ts
index 6a0f0b0a..c992356f 100644
--- a/packages/server/src/terminal/manager.ts
+++ b/packages/server/src/terminal/manager.ts
@@ -182,6 +182,13 @@ export class TerminalManager {
       ...(derivedColorFgBg ? { COLORFGBG: derivedColorFgBg } : {}),
       ...spec.env,
     };
+    delete terminalEnv.COLORFGBG;
+    if (derivedColorFgBg) {
+      terminalEnv.COLORFGBG = derivedColorFgBg;
+    }
+    if (spec.env?.COLORFGBG) {
+      terminalEnv.COLORFGBG = spec.env.COLORFGBG;
+    }
 
     let pty: PtyProcess;
     try {
diff --git a/packages/server/src/update/update-service.test.ts b/packages/server/src/update/update-service.test.ts
index b9d5aaa3..096b2cb6 100644
--- a/packages/server/src/update/update-service.test.ts
+++ b/packages/server/src/update/update-service.test.ts
@@ -160,6 +160,56 @@ describe("UpdateService", () => {
     await firstCheck;
   });
 
+  it("does not persist checking while an update check is in progress", async () => {
+    const lookupDeferred = createDeferred<string>();
+    let state = {
+      version: 1 as const,
+      currentVersion: "0.4.0",
+      latestVersion: null as string | null,
+      availability: "unknown" as const,
+      updateStatus: "idle" as const,
+      lastCheckedAt: null as number | null,
+      targetVersion: null as string | null,
+      startedAt: null as number | null,
+      finishedAt: null as number | null,
+      requiresManualStep: false,
+      manualCommand: null as string | null,
+      errorSummary: "previous failure" as string | null,
+    };
+    const update = vi.fn((patch: unknown) => {
+      const resolved =
+        typeof patch === "function"
+          ? (patch as (current: typeof state) => Partial<typeof state>)(state)
+          : (patch as Partial<typeof state>);
+      state = { ...state, ...resolved };
+      return state;
+    });
+    const service = new UpdateService(
+      createDeps({
+        updateStateRepo: {
+          getFilePath: vi.fn(() => "/tmp/update-state.json"),
+          get: vi.fn(() => state),
+          update,
+        },
+        runLatestVersionLookup: vi.fn(() => lookupDeferred.promise),
+      })
+    );
+
+    const firstCheck = service.checkForUpdates({ manual: true });
+
+    expect(service.getStateView().updateStatus).toBe("checking");
+    expect(service.getStateView().errorSummary).toBeNull();
+    expect(update).not.toHaveBeenCalledWith(
+      expect.objectContaining({
+        updateStatus: "checking",
+      })
+    );
+    expect(state.updateStatus).toBe("idle");
+
+    lookupDeferred.resolve("0.5.0");
+    await firstCheck;
+  });
+
   it("returns an activity summary for prepareInstall", () => {
     const deps = createDeps({
       countRunningTerminals: vi.fn(() => 2),
@@ -178,6 +228,59 @@ describe("UpdateService", () => {
     });
   });
 
+  it("rejects install start while an update check is already in progress", async () => {
+    const lookupDeferred = createDeferred<string>();
+    const service = new UpdateService(
+      createDeps({
+        updateStateRepo: {
+          getFilePath: vi.fn(() => "/tmp/update-state.json"),
+          get: vi.fn(() => ({
+            version: 1,
+            currentVersion: "0.4.0",
+            latestVersion: "0.5.0",
+            availability: "update_available",
+            updateStatus: "idle",
+            lastCheckedAt: 5,
+            targetVersion: null,
+            startedAt: null,
+            finishedAt: null,
+            requiresManualStep: false,
+            manualCommand: null,
+            errorSummary: null,
+          })),
+          update: vi.fn((patch: unknown) => ({
+            version: 1,
+            currentVersion: "0.4.0",
+            latestVersion: "0.5.0",
+            availability: "update_available",
+            updateStatus: "idle",
+            lastCheckedAt: 5,
+            targetVersion: null,
+            startedAt: null,
+            finishedAt: null,
+            requiresManualStep: false,
+            manualCommand: null,
+            errorSummary: null,
+            ...(typeof patch === "function" ? patch({}) : patch),
+          })),
+        },
+        runLatestVersionLookup: vi.fn(() => lookupDeferred.promise),
+      })
+    );
+
+    const firstCheck = service.checkForUpdates({ manual: true });
+
+    await expect(
+      service.startInstall({ targetVersion: "0.5.0", force: true })
+    ).rejects.toMatchObject({
+      code: "update_busy",
+      message: "Update check is already in progress",
+    });
+
+    lookupDeferred.resolve("0.5.0");
+    await firstCheck;
+  });
+
   it("rejects update start when active work exists without force", async () => {
     const deps = createDeps({
       countRunningSessions: vi.fn(() => 1),
@@ -260,6 +363,52 @@ describe("UpdateService", () => {
     expect(result.errorSummary).toBeNull();
   });
 
+  it("reconciles a persisted checking state to failed on startup", () => {
+    const update = vi.fn((patch: unknown) => ({
+      version: 1,
+      currentVersion: "0.4.0",
+      latestVersion: "0.5.0",
+      availability: "check_failed",
+      updateStatus: "failed",
+      lastCheckedAt: 5,
+      targetVersion: null,
+      startedAt: null,
+      finishedAt: 1000,
+      requiresManualStep: false,
+      manualCommand: null,
+      errorSummary: "Update check did not complete before the service restarted",
+      ...(typeof patch === "function" ? patch({}) : patch),
+    }));
+    const service = new UpdateService(
+      createDeps({
+        updateStateRepo: {
+          get: vi.fn(() => ({
+            version: 1,
+            currentVersion: "0.4.0",
+            latestVersion: "0.5.0",
+            availability: "update_available",
+            updateStatus: "checking",
+            lastCheckedAt: 5,
+            targetVersion: null,
+            startedAt: null,
+            finishedAt: null,
+            requiresManualStep: false,
+            manualCommand: null,
+            errorSummary: null,
+          })),
+          update,
+        },
+      })
+    );
+
+    const result = service.reconcileOnStartup();
+
+    expect(result.updateStatus).toBe("failed");
+    expect(result.availability).toBe("check_failed");
+    expect(result.errorSummary).toBe("Update check did not complete before the service restarted");
+    expect(update).toHaveBeenCalled();
+  });
+
   it("passes the update state file path into the detached worker contract", async () => {
     const spawnDetachedWorker = vi.fn(async () => {});
     const deps = createDeps({
diff --git a/packages/server/src/update/update-service.ts b/packages/server/src/update/update-service.ts
index d8111247..5d2c069b 100644
--- a/packages/server/src/update/update-service.ts
+++ b/packages/server/src/update/update-service.ts
@@ -96,12 +96,14 @@ function compareVersions(left: string, right: string): number {
 }
 
 export class UpdateService {
+  private static readonly CHECK_TIMEOUT_MS = 15_000;
   private readonly now: () => number;
   private readonly runtime: UpdateRuntimeConfig;
   private readonly updateWorkerLogFilePath: string;
   private readonly runLatestVersionLookup: (packageName: string) => Promise<string>;
   private readonly spawnDetachedWorkerImpl: UpdateServiceDeps["spawnDetachedWorker"];
   private scheduleTimer: NodeJS.Timeout | null = null;
+  private inFlightCheck: Promise<UpdateStateView> | null = null;
 
   constructor(private readonly deps: UpdateServiceDeps) {
     this.now = deps.now ?? Date.now;
@@ -158,10 +160,8 @@ export class UpdateService {
   }
 
   getStateView(): UpdateStateView {
-    return {
-      ...this.deps.updateStateRepo.get(),
-      ...this.getSupportInfo(),
-    };
+    const persisted = this.deps.updateStateRepo.get();
+    return this.composeStateView(persisted);
   }
 
   getPrepareInstallState(): UpdatePrepareInstallResponse {
@@ -185,42 +185,17 @@ export class UpdateService {
     if (current.updateStatus === "installing" || current.updateStatus === "restarting") {
       throw createBusyError("Update installation is already in progress");
     }
-    if (current.updateStatus === "checking") {
+    if (this.inFlightCheck) {
       throw createBusyError("Update check is already in progress");
     }
 
-    this.persistAndBroadcast({
-      updateStatus: "checking",
-      finishedAt: null,
-      errorSummary: null,
-    });
+    this.inFlightCheck = this.runCheckForUpdates();
+    this.broadcastStateChange();
 
     try {
-      const latestVersion = await this.runLatestVersionLookup(this.runtime.packageName);
-      const availability =
-        compareVersions(latestVersion, this.runtime.currentVersion) > 0
-          ? "update_available"
-          : "up_to_date";
-
-      return this.persistAndBroadcast({
-        currentVersion: this.runtime.currentVersion,
-        latestVersion,
-        availability,
-        updateStatus: "idle",
-        lastCheckedAt: this.now(),
-        errorSummary: null,
-        requiresManualStep: false,
-        manualCommand: null,
-      });
-    } catch (error) {
-      const message = error instanceof Error ? error.message : String(error);
-      return this.persistAndBroadcast({
-        currentVersion: this.runtime.currentVersion,
-        availability: "check_failed",
-        updateStatus: "idle",
-        lastCheckedAt: this.now(),
-        errorSummary: message,
-      });
+      return await this.inFlightCheck;
+    } finally {
+      this.inFlightCheck = null;
     }
   }
 
@@ -240,6 +215,9 @@ export class UpdateService {
     if (state.updateStatus === "installing" || state.updateStatus === "restarting") {
       throw createBusyError("Update installation is already in progress");
     }
+    if (this.inFlightCheck) {
+      throw createBusyError("Update check is already in progress");
+    }
     const targetVersion = input.targetVersion ?? state.latestVersion;
     if (!targetVersion) {
       throw createValidationError("update_no_target", "No target version is available");
@@ -317,6 +295,15 @@ export class UpdateService {
         errorSummary: null,
       });
     }
+    if (current.updateStatus === "checking") {
+      return this.persistAndBroadcast({
+        currentVersion: this.runtime.currentVersion,
+        availability: "check_failed",
+        updateStatus: "failed",
+        finishedAt: this.now(),
+        errorSummary: "Update check did not complete before the service restarted",
+      });
+    }
     if (current.updateStatus === "installing" || current.updateStatus === "restarting") {
       return this.persistAndBroadcast({
         currentVersion: this.runtime.currentVersion,
@@ -373,19 +360,6 @@ export class UpdateService {
     };
   }
 
-  private persistAndBroadcast(patch: Partial<UpdateStateSnapshot>): UpdateStateView {
-    const snapshot = this.deps.updateStateRepo.update((current) => ({
-      ...patch,
-      currentVersion: patch.currentVersion ?? current.currentVersion,
-    }));
-    const view: UpdateStateView = {
-      ...snapshot,
-      ...this.getSupportInfo(),
-    };
-    this.deps.broadcaster.broadcast("update.state.changed", view);
-    return view;
-  }
-
   private buildManualCommand(targetVersion: string): string {
     return [
       `${this.runtime.npmCommand ?? "npm"} install -g ${this.runtime.packageName}@${targetVersion}`,
@@ -419,4 +393,96 @@ export class UpdateService {
     });
     child.unref();
   }
+
+  private composeStateView(
+    snapshot: UpdateStateSnapshot,
+    options?: { includeInFlightCheck?: boolean }
+  ): UpdateStateView {
+    if (options?.includeInFlightCheck !== false && this.inFlightCheck) {
+      return {
+        ...snapshot,
+        ...this.getSupportInfo(),
+        updateStatus: "checking",
+        errorSummary: null,
+      };
+    }
+    return {
+      ...snapshot,
+      ...this.getSupportInfo(),
+    };
+  }
+
+  private broadcastStateChange(): void {
+    this.deps.broadcaster.broadcast("update.state.changed", this.getStateView());
+  }
+
+  private async runCheckForUpdates(): Promise<UpdateStateView> {
+    try {
+      const latestVersion = await this.withCheckTimeout(
+        this.runLatestVersionLookup(this.runtime.packageName)
+      );
+      const availability =
+        compareVersions(latestVersion, this.runtime.currentVersion) > 0
+          ? "update_available"
+          : "up_to_date";
+
+      return this.persistAndBroadcast(
+        {
+          currentVersion: this.runtime.currentVersion,
+          latestVersion,
+          availability,
+          updateStatus: "idle",
+          lastCheckedAt: this.now(),
+          errorSummary: null,
+          requiresManualStep: false,
+          manualCommand: null,
+        },
+        false
+      );
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      return this.persistAndBroadcast(
+        {
+          currentVersion: this.runtime.currentVersion,
+          availability: "check_failed",
+          updateStatus: "idle",
+          lastCheckedAt: this.now(),
+          errorSummary: message,
+        },
+        false
+      );
+    }
+  }
+
+  private async withCheckTimeout<T>(promise: Promise<T>): Promise<T> {
+    let timeoutHandle: NodeJS.Timeout | null = null;
+    try {
+      return await Promise.race([
+        promise,
+        new Promise<T>((_, reject) => {
+          timeoutHandle = setTimeout(() => {
+            reject(new Error(`Update check timed out after ${UpdateService.CHECK_TIMEOUT_MS}ms`));
+          }, UpdateService.CHECK_TIMEOUT_MS);
+          timeoutHandle.unref?.();
+        }),
+      ]);
+    } finally {
+      if (timeoutHandle) {
+        clearTimeout(timeoutHandle);
+      }
+    }
+  }
+
+  private persistAndBroadcast(
+    patch: Partial<UpdateStateSnapshot>,
+    includeInFlightCheck = true
+  ): UpdateStateView {
+    const snapshot = this.deps.updateStateRepo.update((current) => ({
+      ...patch,
+      currentVersion: patch.currentVersion ?? current.currentVersion,
+    }));
+    const view = this.composeStateView(snapshot, { includeInFlightCheck });
+    this.deps.broadcaster.broadcast("update.state.changed", view);
+    return view;
+  }
 }
diff --git a/packages/web/src/components/ui/action-menu/index.module.css b/packages/web/src/components/ui/action-menu/index.module.css
index 88d6f853..8e75a48e 100644
--- a/packages/web/src/components/ui/action-menu/index.module.css
+++ b/packages/web/src/components/ui/action-menu/index.module.css
@@ -8,9 +8,9 @@
   min-width: 200px;
   max-width: min(320px, calc(100vw - (var(--sp-4) * 2)));
   padding: var(--sp-2);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-xl);
-  background: var(--bg-surface);
+  background: var(--surface-overlay-bg);
   box-shadow: var(--shadow-lg);
 }
 
@@ -42,17 +42,17 @@
 
 .item:hover,
 .item:focus-visible {
-  background: var(--bg-surface-hover);
+  background: var(--surface-hover);
   outline: none;
 }
 
 .itemDanger {
-  color: var(--color-error);
+  color: var(--status-danger-fg);
 }
 
 .itemDanger:hover,
 .itemDanger:focus-visible {
-  background: color-mix(in srgb, var(--color-error) 10%, var(--bg-surface));
+  background: var(--menu-danger-hover-bg);
 }
 
 .itemDisabled {
diff --git a/packages/web/src/components/ui/badge/index.module.css b/packages/web/src/components/ui/badge/index.module.css
index 3821e322..6c20d03b 100644
--- a/packages/web/src/components/ui/badge/index.module.css
+++ b/packages/web/src/components/ui/badge/index.module.css
@@ -7,8 +7,8 @@
   height: 16px;
   padding: 0 var(--sp-1);
   border-radius: var(--radius-chip);
-  background: var(--accent-blue);
-  color: var(--bg-page);
+  background: var(--status-info-fg);
+  color: var(--text-inverse);
   font-family: var(--font-sans);
   font-size: var(--type-body-6-size);
   line-height: var(--type-body-6-line-height);
diff --git a/packages/web/src/components/ui/button/index.module.css b/packages/web/src/components/ui/button/index.module.css
index 5c4d7735..c0c1e3c8 100644
--- a/packages/web/src/components/ui/button/index.module.css
+++ b/packages/web/src/components/ui/button/index.module.css
@@ -24,9 +24,8 @@
 .btn:focus-visible,
 :global(.btn):focus-visible {
   box-shadow:
-    0 0 0 2px var(--bg-page),
-    0 0 0 calc(var(--state-focus-ring-width) * 2)
-    color-mix(in srgb, var(--state-focus-ring-color) 35%, transparent);
+    0 0 0 2px var(--surface-page),
+    var(--control-focus-ring);
 }
 
 .btn:hover:not(:disabled),
@@ -36,28 +35,28 @@
 
 .primary,
 :global(.btn-primary) {
-  background: var(--accent-blue);
-  color: var(--text-inverse);
+  background: var(--control-primary-bg);
+  color: var(--control-primary-fg);
 }
 
 .primary:hover:not(:disabled):not([aria-disabled="true"]),
 :global(.btn-primary):hover:not(:disabled):not([aria-disabled="true"]) {
-  background: color-mix(in srgb, var(--accent-blue) 84%, white 16%);
+  background: var(--control-primary-bg-hover);
 }
 
 .secondary,
 :global(.btn-default),
 :global(.btn-secondary) {
-  background: color-mix(in srgb, var(--bg-surface) 84%, var(--accent-blue) 16%);
-  border-color: color-mix(in srgb, var(--border) 70%, var(--accent-blue) 30%);
+  background: var(--control-secondary-bg);
+  border-color: var(--control-secondary-border);
   color: var(--text-primary);
 }
 
 .secondary:hover:not(:disabled):not([aria-disabled="true"]),
 :global(.btn-default):hover:not(:disabled):not([aria-disabled="true"]),
 :global(.btn-secondary):hover:not(:disabled):not([aria-disabled="true"]) {
-  background: color-mix(in srgb, var(--bg-hover) 72%, var(--accent-blue) 28%);
-  border-color: color-mix(in srgb, var(--border-light) 70%, var(--accent-blue) 30%);
+  background: var(--control-secondary-bg-hover);
+  border-color: var(--control-secondary-border-hover);
 }
 
 .ghost,
@@ -69,14 +68,14 @@
 
 .ghost:hover:not(:disabled):not([aria-disabled="true"]),
 :global(.btn-ghost):hover:not(:disabled):not([aria-disabled="true"]) {
-  background: var(--bg-hover);
+  background: var(--control-ghost-bg-hover);
   color: var(--text-primary);
 }
 
 .danger,
 :global(.btn-danger) {
-  background: var(--accent-pink);
-  color: var(--text-inverse);
+  background: var(--control-danger-bg);
+  color: var(--control-danger-fg);
 }
 
 .sm,
@@ -113,7 +112,7 @@
 .spinner {
   width: var(--sp-3);
   height: var(--sp-3);
-  border: calc(var(--sp-1) / 2) solid color-mix(in srgb, currentColor 30%, var(--bg-page) 70%);
+  border: calc(var(--sp-1) / 2) solid var(--control-spinner-track);
   border-top-color: currentColor;
   border-radius: var(--radius-full);
 }
diff --git a/packages/web/src/components/ui/datetime-picker/index.module.css b/packages/web/src/components/ui/datetime-picker/index.module.css
index 845a6b64..2e360101 100644
--- a/packages/web/src/components/ui/datetime-picker/index.module.css
+++ b/packages/web/src/components/ui/datetime-picker/index.module.css
@@ -52,7 +52,7 @@
   flex-direction: column;
   gap: var(--sp-2);
   padding: var(--sp-2);
-  border: 1px dashed var(--border);
+  border: 1px dashed var(--border-default);
   border-radius: var(--radius-md);
   color: var(--text-tertiary);
   font-size: var(--type-body-6-size);
@@ -64,7 +64,7 @@
   display: flex;
   gap: var(--sp-2);
   padding: var(--sp-2);
-  border: 1px dashed var(--border);
+  border: 1px dashed var(--border-default);
   border-radius: var(--radius-md);
   color: var(--text-tertiary);
   font-size: var(--type-body-6-size);
@@ -85,9 +85,9 @@
   gap: var(--sp-2);
   min-height: 44px;
   padding: 0 var(--sp-3);
-  border: 1px solid var(--border);
+  border: 1px solid var(--control-secondary-border);
   border-radius: var(--radius-md);
-  background: var(--bg-surface);
+  background: var(--control-secondary-bg);
   color: var(--text-primary);
   font-size: var(--type-body-3-size);
   line-height: var(--type-body-3-line-height);
@@ -100,8 +100,8 @@
 }
 
 .action:hover {
-  background: var(--bg-hover);
-  border-color: var(--border-light);
+  background: var(--control-secondary-bg-hover);
+  border-color: var(--control-secondary-border-hover);
 }
 
 .action:disabled {
@@ -147,9 +147,9 @@
   justify-content: center;
   width: 28px;
   height: 28px;
-  border: 1px solid var(--border);
+  border: 1px solid var(--control-secondary-border);
   border-radius: var(--radius-sm);
-  background: var(--bg-surface);
+  background: var(--control-secondary-bg);
   color: var(--text-secondary);
   cursor: pointer;
   transition:
@@ -158,7 +158,7 @@
 }
 
 .calendarNav:hover {
-  background: var(--bg-hover);
+  background: var(--control-secondary-bg-hover);
   color: var(--text-primary);
 }
 
@@ -167,7 +167,7 @@
   grid-template-columns: repeat(7, 1fr);
   gap: var(--sp-1);
   padding: var(--sp-2) 0;
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .calendarWeekday {
@@ -203,21 +203,21 @@
 }
 
 .calendarDay:hover:not(:disabled) {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
 }
 
 .calendarDayToday {
-  color: var(--accent-blue);
+  color: var(--status-info-fg);
   font-weight: var(--font-semibold);
 }
 
 .calendarDaySelected {
-  background: var(--accent-blue);
-  color: var(--text-inverse);
+  background: var(--control-primary-bg);
+  color: var(--control-primary-fg);
 }
 
 .calendarDaySelected:hover {
-  background: color-mix(in srgb, var(--accent-blue) 85%, white 15%);
+  background: var(--control-primary-bg-hover);
 }
 
 .calendarDayDisabled {
@@ -264,7 +264,7 @@
   flex-direction: column;
   gap: var(--sp-2);
   padding-top: var(--sp-3);
-  border-top: 1px solid var(--border);
+  border-top: 1px solid var(--border-default);
 }
 
 /* Additional i18n keys needed */
diff --git a/packages/web/src/components/ui/drawer/index.module.css b/packages/web/src/components/ui/drawer/index.module.css
index e5bd194b..1b4fff98 100644
--- a/packages/web/src/components/ui/drawer/index.module.css
+++ b/packages/web/src/components/ui/drawer/index.module.css
@@ -20,7 +20,7 @@
   overflow: hidden;
   border: 1px solid var(--surface-overlay-border);
   border-radius: var(--radius-overlay);
-  background: var(--surface-overlay-bg);
+  background: var(--material-overlay);
   box-shadow: var(--surface-overlay-shadow);
   outline: none;
 }
@@ -32,7 +32,7 @@
   justify-content: space-between;
   gap: var(--sp-3);
   padding: var(--sp-4) var(--sp-5);
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .headerActions,
@@ -71,7 +71,7 @@
   justify-content: flex-end;
   gap: var(--sp-3);
   padding: var(--sp-4) var(--sp-5);
-  border-top: 1px solid var(--border);
+  border-top: 1px solid var(--border-default);
 }
 
 @media (max-width: 640px) {
diff --git a/packages/web/src/components/ui/icon-button/index.module.css b/packages/web/src/components/ui/icon-button/index.module.css
index c653a100..2b270dec 100644
--- a/packages/web/src/components/ui/icon-button/index.module.css
+++ b/packages/web/src/components/ui/icon-button/index.module.css
@@ -33,19 +33,19 @@
 }
 
 .ghost:hover:not(:disabled):not([aria-disabled="true"]) {
-  background: var(--bg-hover);
+  background: var(--control-ghost-bg-hover);
   color: var(--text-primary);
 }
 
 .filled {
-  background: color-mix(in srgb, var(--bg-surface) 84%, var(--accent-blue) 16%);
-  border-color: color-mix(in srgb, var(--border) 70%, var(--accent-blue) 30%);
+  background: var(--control-secondary-bg);
+  border-color: var(--control-secondary-border);
   color: var(--text-primary);
 }
 
 .filled:hover:not(:disabled):not([aria-disabled="true"]) {
-  background: color-mix(in srgb, var(--bg-hover) 72%, var(--accent-blue) 28%);
-  border-color: color-mix(in srgb, var(--border-light) 70%, var(--accent-blue) 30%);
+  background: var(--control-secondary-bg-hover);
+  border-color: var(--control-secondary-border-hover);
 }
 
 .sm {
diff --git a/packages/web/src/components/ui/input/index.module.css b/packages/web/src/components/ui/input/index.module.css
index b6fc4329..86bb3fa6 100644
--- a/packages/web/src/components/ui/input/index.module.css
+++ b/packages/web/src/components/ui/input/index.module.css
@@ -1,8 +1,8 @@
 .input {
   height: var(--control-height-md);
   padding: 0 var(--inset-control-inline);
-  background: var(--bg-page);
-  border: 1px solid var(--border);
+  background: var(--field-bg);
+  border: 1px solid var(--field-border);
   border-radius: var(--radius-control);
   color: var(--text-primary);
   font-family: var(--font-sans);
@@ -17,14 +17,13 @@
 }
 
 .input:hover {
-  border-color: var(--border-light);
+  border-color: var(--field-border-hover);
 }
 
 .input:focus,
 .input:focus-visible {
-  border-color: var(--state-focus-ring-color);
-  box-shadow: 0 0 0 var(--state-focus-ring-width)
-    color-mix(in srgb, var(--state-focus-ring-color) 40%, transparent);
+  border-color: var(--border-focus);
+  box-shadow: var(--field-ring);
 }
 
 .sm {
@@ -42,13 +41,13 @@
 
 .invalid,
 .input[aria-invalid="true"] {
-  border-color: var(--border-error);
+  border-color: var(--border-danger);
 }
 
 .invalid:focus,
 .invalid:focus-visible,
 .input[aria-invalid="true"]:focus,
 .input[aria-invalid="true"]:focus-visible {
-  border-color: var(--border-error);
-  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border-error) 70%, transparent 30%);
+  border-color: var(--border-danger);
+  box-shadow: var(--field-invalid-ring);
 }
diff --git a/packages/web/src/components/ui/kbd/index.module.css b/packages/web/src/components/ui/kbd/index.module.css
index fe3d5f68..b8afec45 100644
--- a/packages/web/src/components/ui/kbd/index.module.css
+++ b/packages/web/src/components/ui/kbd/index.module.css
@@ -5,9 +5,9 @@
   justify-content: center;
   min-width: 80px;
   padding: var(--inset-control-block) var(--inset-control-inline);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-control-sm);
-  background: color-mix(in srgb, var(--bg-input) 82%, var(--bg-surface) 18%);
+  background: var(--kbd-surface);
   color: var(--text-primary);
   font-family: var(--font-mono);
   font-size: var(--type-body-5-size);
@@ -18,16 +18,15 @@
 
 .interactive:hover,
 :global(.shortcuts-key):hover {
-  border-color: var(--border-focus);
-  background: var(--bg-active);
+  border-color: var(--border-subtle);
+  background: var(--surface-active);
 }
 
 .kbd:focus-visible,
 :global(.shortcuts-key):focus-visible {
   outline: none;
-  border-color: var(--state-focus-ring-color);
-  box-shadow: 0 0 0 var(--state-focus-ring-width)
-    color-mix(in srgb, var(--state-focus-ring-color) 40%, transparent);
+  border-color: var(--border-focus);
+  box-shadow: var(--field-ring);
 }
 
 .sm {
diff --git a/packages/web/src/components/ui/local-overlay/index.module.css b/packages/web/src/components/ui/local-overlay/index.module.css
index 2c5147e6..dc5c3603 100644
--- a/packages/web/src/components/ui/local-overlay/index.module.css
+++ b/packages/web/src/components/ui/local-overlay/index.module.css
@@ -7,7 +7,7 @@
   align-items: center;
   justify-content: center;
   padding: var(--sp-4);
-  background: var(--overlay-backdrop);
+  background: var(--material-local-overlay);
   pointer-events: none;
 }
 
diff --git a/packages/web/src/components/ui/modal/index.module.css b/packages/web/src/components/ui/modal/index.module.css
index f5712f0b..f97549af 100644
--- a/packages/web/src/components/ui/modal/index.module.css
+++ b/packages/web/src/components/ui/modal/index.module.css
@@ -20,7 +20,7 @@
   overflow: hidden;
   border: 1px solid var(--surface-overlay-border);
   border-radius: var(--radius-overlay);
-  background: var(--surface-overlay-bg);
+  background: var(--material-overlay);
   box-shadow: var(--surface-overlay-shadow);
   outline: none;
 }
@@ -50,7 +50,7 @@
   justify-content: space-between;
   gap: var(--sp-3);
   padding: var(--sp-4) var(--sp-5);
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .dialogHeader,
@@ -82,7 +82,7 @@
   height: 28px;
   border-radius: var(--radius-md);
   flex-shrink: 0;
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   color: var(--text-secondary);
 }
 
@@ -121,7 +121,7 @@
   justify-content: flex-end;
   gap: var(--sp-3);
   padding: var(--sp-4) var(--sp-5);
-  border-top: 1px solid var(--border);
+  border-top: 1px solid var(--border-default);
 }
 
 :global(.modal-close) {
@@ -129,7 +129,7 @@
 }
 
 :global(.modal-close:hover) {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
 }
 
 @media (max-width: 640px) {
diff --git a/packages/web/src/components/ui/notice/index.module.css b/packages/web/src/components/ui/notice/index.module.css
index 06bc290d..dd62eb8d 100644
--- a/packages/web/src/components/ui/notice/index.module.css
+++ b/packages/web/src/components/ui/notice/index.module.css
@@ -5,30 +5,30 @@
   gap: var(--gap-content);
   margin: 0 0 var(--space-default);
   padding: var(--inset-control-block) var(--inset-control-inline);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-overlay);
-  background: var(--surface-elevated-bg);
+  background: var(--material-elevated);
   overflow: hidden;
 }
 
 .info {
-  border-color: var(--state-info-border);
-  background: var(--state-info-bg);
+  border-color: var(--status-info-border);
+  background: var(--status-info-bg);
 }
 
 .success {
-  border-color: var(--state-success-border);
-  background: var(--state-success-bg);
+  border-color: var(--status-success-border);
+  background: var(--status-success-bg);
 }
 
 .warning {
-  border-color: var(--state-warning-border);
-  background: var(--state-warning-bg);
+  border-color: var(--status-warning-border);
+  background: var(--status-warning-bg);
 }
 
 .error {
-  border-color: var(--state-error-border);
-  background: var(--state-error-bg);
+  border-color: var(--status-danger-border);
+  background: var(--status-danger-bg);
 }
 
 .copy {
diff --git a/packages/web/src/components/ui/pill/index.module.css b/packages/web/src/components/ui/pill/index.module.css
index a6096482..9e60be32 100644
--- a/packages/web/src/components/ui/pill/index.module.css
+++ b/packages/web/src/components/ui/pill/index.module.css
@@ -29,8 +29,7 @@
 .pill:focus-visible {
   outline: none;
   border-color: var(--state-focus-ring-color);
-  box-shadow: 0 0 0 var(--state-focus-ring-width)
-    color-mix(in srgb, var(--state-focus-ring-color) 35%, transparent);
+  box-shadow: var(--control-focus-ring);
 }
 
 .active {
diff --git a/packages/web/src/components/ui/popover/index.module.css b/packages/web/src/components/ui/popover/index.module.css
index d20a505b..61184574 100644
--- a/packages/web/src/components/ui/popover/index.module.css
+++ b/packages/web/src/components/ui/popover/index.module.css
@@ -13,7 +13,7 @@
   outline: none;
   z-index: var(--z-popover);
   padding: var(--inset-panel);
-  border: 1px solid var(--border);
+  border: 1px solid var(--surface-overlay-border);
   border-radius: var(--radius-overlay);
-  background: var(--bg-surface);
+  background: var(--surface-overlay-bg);
 }
diff --git a/packages/web/src/components/ui/progress-bar/index.module.css b/packages/web/src/components/ui/progress-bar/index.module.css
index ae1d9745..db914da6 100644
--- a/packages/web/src/components/ui/progress-bar/index.module.css
+++ b/packages/web/src/components/ui/progress-bar/index.module.css
@@ -1,34 +1,34 @@
 .root {
   height: 3px;
-  background: var(--state-info-bg);
+  background: var(--status-info-bg);
   overflow: hidden;
 }
 
 .fill {
   height: 100%;
   width: var(--progress-bar-width, 0%);
-  background: var(--progress-bar-color, var(--state-info-text));
+  background: var(--progress-bar-color, var(--status-info-fg));
   transition: width var(--duration-slower) var(--ease-out);
 }
 
 .success {
-  --progress-bar-color: var(--state-success-text);
+  --progress-bar-color: var(--status-success-fg);
 }
 
 .warning {
-  --progress-bar-color: var(--state-warning-text);
+  --progress-bar-color: var(--status-warning-fg);
 }
 
 .error {
-  --progress-bar-color: var(--state-error-text);
+  --progress-bar-color: var(--status-danger-fg);
 }
 
 .info {
-  --progress-bar-color: var(--state-info-text);
+  --progress-bar-color: var(--status-info-fg);
 }
 
 .neutral {
-  --progress-bar-color: var(--state-disabled-text);
+  --progress-bar-color: var(--text-disabled);
 }
 
 .indeterminate .fill {
@@ -43,7 +43,7 @@
   position: absolute;
   inset: 0 auto 0 0;
   width: 40%;
-  background: var(--progress-bar-color, var(--state-info-text));
+  background: var(--progress-bar-color, var(--status-info-fg));
   animation: progressBarIndeterminate 1.2s var(--ease-out) infinite;
 }
 
diff --git a/packages/web/src/components/ui/segmented-control/index.module.css b/packages/web/src/components/ui/segmented-control/index.module.css
index d3c5dd71..f323798f 100644
--- a/packages/web/src/components/ui/segmented-control/index.module.css
+++ b/packages/web/src/components/ui/segmented-control/index.module.css
@@ -11,8 +11,8 @@
 .segmentedControl {
   padding: var(--sp-1);
   border-radius: var(--radius-lg);
-  background: color-mix(in srgb, var(--bg-surface) 94%, var(--bg-page));
-  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
+  background: var(--control-secondary-bg);
+  border: 1px solid var(--control-secondary-border);
 }
 
 .segmentedControlOption,
@@ -45,7 +45,7 @@
 :global(.settings-provider-tab:hover),
 :global(.settings-provider-subnav-button:hover),
 :global(.shortcuts-category-tab:hover) {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   color: var(--text-primary);
 }
 
@@ -53,8 +53,8 @@
 :global(.settings-provider-tab.active),
 :global(.settings-provider-subnav-button.active),
 :global(.shortcuts-category-tab.active) {
-  background: var(--bg-active);
-  border-color: color-mix(in srgb, var(--accent-blue) 56%, var(--border));
+  background: var(--surface-active);
+  border-color: var(--state-selected-border);
   color: var(--text-primary);
 }
 
@@ -71,7 +71,7 @@
   width: 100%;
   margin-bottom: var(--space-panel);
   padding-bottom: var(--sp-3);
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
   border-radius: 0;
   background: transparent;
   border-top: none;
@@ -89,7 +89,7 @@
 }
 
 :global(.settings-provider-tab.active) {
-  background: var(--bg-active);
+  background: var(--surface-active);
   border-color: var(--border-focus);
 }
 
@@ -98,7 +98,7 @@
 }
 
 :global(.settings-provider-subnav-button.active) {
-  background: var(--bg-active);
+  background: var(--surface-active);
   border-color: var(--border-focus);
 }
 
@@ -116,6 +116,6 @@
 }
 
 :global(.shortcuts-category-tab.active) {
-  background: var(--bg-active);
+  background: var(--surface-active);
   border-color: var(--border-focus);
 }
diff --git a/packages/web/src/components/ui/select/index.module.css b/packages/web/src/components/ui/select/index.module.css
index 345c27db..c1459ba8 100644
--- a/packages/web/src/components/ui/select/index.module.css
+++ b/packages/web/src/components/ui/select/index.module.css
@@ -36,7 +36,7 @@
   flex-direction: column;
   gap: var(--sp-1);
   padding: var(--sp-1);
-  background: var(--bg-surface);
+  background: var(--surface-overlay-bg);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-lg);
@@ -58,7 +58,7 @@
 .option:hover,
 .option:focus-visible,
 .optionSelected {
-  background: var(--bg-hover);
+  background: var(--state-hover-bg);
 }
 
 .optionDisabled {
diff --git a/packages/web/src/components/ui/spinner/index.module.css b/packages/web/src/components/ui/spinner/index.module.css
index b6ba9cc6..a8653809 100644
--- a/packages/web/src/components/ui/spinner/index.module.css
+++ b/packages/web/src/components/ui/spinner/index.module.css
@@ -3,7 +3,7 @@
   width: var(--spinner-size, 16px);
   height: var(--spinner-size, 16px);
   flex-shrink: 0;
-  border: 2px solid color-mix(in srgb, currentColor 30%, var(--bg-page) 70%);
+  border: 2px solid var(--control-spinner-track);
   border-top-color: currentColor;
   border-radius: var(--radius-full);
   box-sizing: border-box;
diff --git a/packages/web/src/components/ui/status-dot/index.module.css b/packages/web/src/components/ui/status-dot/index.module.css
index ae54a38d..408cb5ee 100644
--- a/packages/web/src/components/ui/status-dot/index.module.css
+++ b/packages/web/src/components/ui/status-dot/index.module.css
@@ -5,9 +5,9 @@
   height: var(--status-dot-current-size, var(--status-dot-size));
   flex-shrink: 0;
   border-radius: var(--radius-chip);
-  background: var(--status-dot-current-color, var(--text-tertiary));
+  background: var(--status-dot-current-color, var(--status-dot-tone-color, var(--status-dot-idle)));
   box-shadow: 0 0 0 1px
-    color-mix(in srgb, var(--status-dot-current-color, var(--text-tertiary)) 18%, transparent);
+    var(--status-dot-current-ring, var(--status-dot-tone-ring, var(--status-dot-idle-ring)));
 }
 
 .pulse {
@@ -43,23 +43,25 @@
 }
 
 :global(.session-dot-idle) {
-  --status-dot-current-color: var(--text-tertiary);
+  --status-dot-current-color: var(--status-dot-idle);
+  --status-dot-current-ring: var(--status-dot-idle-ring);
 }
 
 :global(.session-dot-starting),
 :global(.connection-status-dot-connecting),
 :global(.connection-status-dot-reconnecting) {
-  --status-dot-current-color: var(--state-warning-text);
+  --status-dot-current-color: var(--status-dot-starting);
+  --status-dot-current-ring: var(--status-dot-starting-ring);
   animation: statusDotPulse 1s ease-in-out infinite;
 }
 
 :global(.session-dot-running) {
-  --status-dot-current-color: var(--state-info-text);
+  --status-dot-current-color: var(--status-dot-running);
   animation: statusDotRunningPulse 1.18s cubic-bezier(0.22, 1, 0.36, 1) infinite;
   box-shadow:
-    0 0 0 1px color-mix(in srgb, var(--state-info-text) 26%, transparent),
-    0 0 0 5px color-mix(in srgb, var(--state-info-text) 12%, transparent),
-    0 0 12px color-mix(in srgb, var(--state-info-text) 22%, transparent);
+    0 0 0 1px var(--status-dot-running-ring-1),
+    0 0 0 5px var(--status-dot-running-ring-2),
+    0 0 12px var(--status-dot-running-ring-3);
 }
 
 :global(.session-dot-running)::before,
@@ -72,28 +74,31 @@
 
 :global(.session-dot-running)::before {
   inset: -4px;
-  border: 1px solid color-mix(in srgb, var(--state-info-text) 28%, transparent);
+  border: 1px solid var(--status-dot-running-ring-ghost);
   opacity: 0.7;
   animation: statusDotRunningRingGhost 1.18s cubic-bezier(0.16, 1, 0.3, 1) infinite;
 }
 
 :global(.session-dot-running)::after {
   inset: -7px;
-  border: 1px solid color-mix(in srgb, var(--state-info-text) 34%, transparent);
+  border: 1px solid var(--status-dot-running-ring-outer);
   opacity: 0.75;
   animation: statusDotRunningRing 1.18s cubic-bezier(0.16, 1, 0.3, 1) infinite;
 }
 
 :global(.connection-status-dot-connected) {
-  --status-dot-current-color: var(--state-info-text);
+  --status-dot-current-color: var(--status-dot-running);
+  --status-dot-current-ring: var(--status-dot-running-ring-1);
 }
 
 :global(.session-dot-complete) {
-  --status-dot-current-color: var(--state-success-text);
+  --status-dot-current-color: var(--status-dot-complete);
+  --status-dot-current-ring: var(--status-dot-complete-ring);
 }
 
 :global(.connection-status-dot-disconnected) {
-  --status-dot-current-color: var(--state-error-text);
+  --status-dot-current-color: var(--status-dot-error);
+  --status-dot-current-ring: var(--status-dot-error-ring);
 }
 
 @keyframes statusDotRunningPulse {
diff --git a/packages/web/src/components/ui/status-dot/index.test.tsx b/packages/web/src/components/ui/status-dot/index.test.tsx
index 1be76f2f..449b6fdb 100644
--- a/packages/web/src/components/ui/status-dot/index.test.tsx
+++ b/packages/web/src/components/ui/status-dot/index.test.tsx
@@ -7,7 +7,11 @@ describe("StatusDot", () => {
     render(<StatusDot data-testid="dot" />);
 
     const dot = screen.getByTestId("dot");
-    expect(dot.style.getPropertyValue("--status-dot-current-color")).toBe("var(--text-tertiary)");
+    expect(dot.style.getPropertyValue("--status-dot-tone-color")).toBe("var(--status-dot-idle)");
+    expect(dot.style.getPropertyValue("--status-dot-tone-ring")).toBe(
+      "var(--status-dot-idle-ring)"
+    );
+    expect(dot.style.getPropertyValue("--status-dot-current-color")).toBe("");
     expect(dot.style.getPropertyValue("--status-dot-current-size")).toBe("8px");
     expect(dot).toHaveAttribute("aria-hidden", "true");
   });
@@ -16,8 +20,11 @@ describe("StatusDot", () => {
     render(<StatusDot tone="warning" size="lg" pulse data-testid="dot" />);
 
     const dot = screen.getByTestId("dot");
-    expect(dot.style.getPropertyValue("--status-dot-current-color")).toBe(
-      "var(--state-warning-text)"
+    expect(dot.style.getPropertyValue("--status-dot-tone-color")).toBe(
+      "var(--status-dot-starting)"
+    );
+    expect(dot.style.getPropertyValue("--status-dot-tone-ring")).toBe(
+      "var(--status-dot-starting-ring)"
     );
     expect(dot.style.getPropertyValue("--status-dot-current-size")).toBe("10px");
     expect(dot.className).toContain("pulse");
@@ -26,7 +33,7 @@ describe("StatusDot", () => {
   it("preserves legacy session compatibility classes for migrated callers", () => {
     render(
       <StatusDot
-        tone="info"
+        tone="error"
         className="session-dot session-dot-running session-header-indicator"
         data-testid="dot"
       />
@@ -34,13 +41,16 @@ describe("StatusDot", () => {
 
     const dot = screen.getByTestId("dot");
     expect(dot).toHaveClass("session-dot", "session-dot-running", "session-header-indicator");
-    expect(dot.style.getPropertyValue("--status-dot-current-color")).toBe("var(--state-info-text)");
+    expect(dot.style.getPropertyValue("--status-dot-tone-color")).toBe("var(--status-dot-error)");
+    expect(dot.style.getPropertyValue("--status-dot-tone-ring")).toBe(
+      "var(--status-dot-error-ring)"
+    );
   });
 
   it("preserves legacy connection compatibility classes for migrated callers", () => {
     render(
       <StatusDot
-        tone="error"
+        tone="success"
         size="sm"
         className="connection-status-dot connection-status-dot-disconnected"
         data-testid="dot"
@@ -50,17 +60,24 @@ describe("StatusDot", () => {
     const dot = screen.getByTestId("dot");
     expect(dot).toHaveClass("connection-status-dot", "connection-status-dot-disconnected");
     expect(dot.style.getPropertyValue("--status-dot-current-size")).toBe("6px");
+    expect(dot.style.getPropertyValue("--status-dot-tone-color")).toBe(
+      "var(--status-dot-complete)"
+    );
+    expect(dot.style.getPropertyValue("--status-dot-tone-ring")).toBe(
+      "var(--status-dot-complete-ring)"
+    );
   });
 
   it("allows running session dots to combine legacy classes with the shared pulse variant", () => {
-    render(
-      <StatusDot tone="info" pulse className="session-dot session-dot-running" data-testid="dot" />
-    );
+    render(<StatusDot pulse className="session-dot session-dot-running" data-testid="dot" />);
 
     const dot = screen.getByTestId("dot");
 
     expect(dot).toHaveClass("session-dot", "session-dot-running");
     expect(dot.className).toContain("pulse");
-    expect(dot.style.getPropertyValue("--status-dot-current-color")).toBe("var(--state-info-text)");
+    expect(dot.style.getPropertyValue("--status-dot-tone-color")).toBe("var(--status-dot-idle)");
+    expect(dot.style.getPropertyValue("--status-dot-tone-ring")).toBe(
+      "var(--status-dot-idle-ring)"
+    );
   });
 });
diff --git a/packages/web/src/components/ui/status-dot/index.tsx b/packages/web/src/components/ui/status-dot/index.tsx
index ec181a0d..a6c11e4c 100644
--- a/packages/web/src/components/ui/status-dot/index.tsx
+++ b/packages/web/src/components/ui/status-dot/index.tsx
@@ -12,11 +12,19 @@ export interface StatusDotProps extends Omit<ComponentPropsWithoutRef<"span">, "
 }
 
 const toneColorMap: Record<StatusDotTone, string> = {
-  success: "var(--state-success-text)",
-  warning: "var(--state-warning-text)",
-  error: "var(--state-error-text)",
-  info: "var(--state-info-text)",
-  neutral: "var(--text-tertiary)",
+  success: "var(--status-dot-complete)",
+  warning: "var(--status-dot-starting)",
+  error: "var(--status-dot-error)",
+  info: "var(--status-dot-running)",
+  neutral: "var(--status-dot-idle)",
+};
+
+const toneRingMap: Record<StatusDotTone, string> = {
+  success: "var(--status-dot-complete-ring)",
+  warning: "var(--status-dot-starting-ring)",
+  error: "var(--status-dot-error-ring)",
+  info: "var(--status-dot-running-ring-1)",
+  neutral: "var(--status-dot-idle-ring)",
 };
 
 const sizeMap: Record<StatusDotSize, string> = {
@@ -41,7 +49,8 @@ export function StatusDot({
       className={clsx(styles.dot, pulse ? styles.pulse : undefined, className)}
       style={
         {
-          "--status-dot-current-color": toneColorMap[tone],
+          "--status-dot-tone-color": toneColorMap[tone],
+          "--status-dot-tone-ring": toneRingMap[tone],
           "--status-dot-current-size": sizeMap[size],
           ...style,
         } as CSSProperties
diff --git a/packages/web/src/components/ui/switch/index.module.css b/packages/web/src/components/ui/switch/index.module.css
index a541f8da..096d189a 100644
--- a/packages/web/src/components/ui/switch/index.module.css
+++ b/packages/web/src/components/ui/switch/index.module.css
@@ -30,8 +30,8 @@
   height: 100%;
   box-sizing: border-box;
   border-radius: var(--radius-pill);
-  background: var(--bg-hover);
-  border: 1px solid var(--border);
+  background: var(--surface-hover);
+  border: 1px solid var(--border-default);
   transition:
     background var(--duration-fast) var(--ease-out),
     border-color var(--duration-fast) var(--ease-out),
@@ -40,19 +40,18 @@
 
 .switch:hover:not(:disabled) .track,
 :global(.settings-toggle):hover:not(:disabled) .track {
-  border-color: var(--border-light);
+  border-color: var(--border-subtle);
 }
 
 .switch:focus-visible .track,
 :global(.settings-toggle):focus-visible .track {
-  border-color: var(--state-focus-ring-color);
-  box-shadow: 0 0 0 var(--state-focus-ring-width)
-    color-mix(in srgb, var(--state-focus-ring-color) 35%, transparent);
+  border-color: var(--border-focus);
+  box-shadow: var(--control-focus-ring);
 }
 
 .checked .track {
-  background: var(--accent-green);
-  border-color: var(--accent-green);
+  background: var(--status-success-fg);
+  border-color: var(--status-success-fg);
 }
 
 .thumb {
@@ -78,8 +77,8 @@
 
 .switch:disabled .track,
 :global(.settings-toggle):disabled .track {
-  background: var(--bg-disabled);
-  border-color: var(--border);
+  background: var(--surface-disabled);
+  border-color: var(--border-default);
 }
 
 .switch:disabled.checked .track,
diff --git a/packages/web/src/components/ui/tabs/index.module.css b/packages/web/src/components/ui/tabs/index.module.css
index 0c4ef8d3..7394478f 100644
--- a/packages/web/src/components/ui/tabs/index.module.css
+++ b/packages/web/src/components/ui/tabs/index.module.css
@@ -31,7 +31,7 @@
 }
 
 :global(.worktree-tabs) {
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .tab,
@@ -63,10 +63,7 @@
 :global(.panel-tab):focus-visible,
 :global(.worktree-tab):focus-visible {
   outline: none;
-  box-shadow:
-    0 0 0 2px var(--bg-page),
-    0 0 0 calc(var(--state-focus-ring-width) * 2)
-    color-mix(in srgb, var(--state-focus-ring-color) 35%, transparent);
+  box-shadow: var(--control-focus-ring);
 }
 
 .tabActive,
@@ -81,16 +78,16 @@
   line-height: var(--type-body-6-line-height);
   padding: var(--inset-control-block) var(--inset-control-inline);
   border-radius: var(--radius-control);
-  color: var(--text-ter);
+  color: var(--text-tertiary);
 }
 
 :global(.panel-tab:hover) {
-  color: var(--text-sec);
+  color: var(--text-secondary);
 }
 
 :global(.panel-tab.active) {
-  background: var(--blue);
-  color: var(--bg);
+  background: var(--control-primary-bg);
+  color: var(--control-primary-fg);
   font-weight: var(--type-body-6-weight);
 }
 
@@ -104,11 +101,11 @@
 
 :global(.worktree-tab:hover) {
   color: var(--text-primary);
-  background: var(--bg-hover);
+  background: var(--surface-hover);
 }
 
 :global(.worktree-tab.active) {
-  border-bottom: 2px solid var(--accent-blue);
+  border-bottom: 2px solid var(--state-selected-border);
 }
 
 .panel {
diff --git a/packages/web/src/components/ui/tag/index.module.css b/packages/web/src/components/ui/tag/index.module.css
index 5ca0aa4a..6e325bde 100644
--- a/packages/web/src/components/ui/tag/index.module.css
+++ b/packages/web/src/components/ui/tag/index.module.css
@@ -34,36 +34,36 @@
 
 :where(.blue),
 :global(:where(.badge-blue)) {
-  background: color-mix(in srgb, var(--accent-blue) 15%, transparent);
-  color: var(--accent-blue);
+  background: var(--tag-info-bg);
+  color: var(--tag-info-fg);
 }
 
 :where(.green),
 :global(:where(.badge-green)) {
-  background: color-mix(in srgb, var(--accent-green) 15%, transparent);
-  color: var(--accent-green);
+  background: var(--tag-success-bg);
+  color: var(--tag-success-fg);
 }
 
 :where(.amber),
 :global(:where(.badge-amber)) {
-  background: color-mix(in srgb, var(--accent-amber) 15%, transparent);
-  color: var(--accent-amber);
+  background: var(--tag-warning-bg);
+  color: var(--tag-warning-fg);
 }
 
 :where(.pink),
 :global(:where(.badge-pink)) {
-  background: color-mix(in srgb, var(--accent-pink) 15%, transparent);
-  color: var(--accent-pink);
+  background: var(--tag-danger-bg);
+  color: var(--tag-danger-fg);
 }
 
 :where(.purple),
 :global(:where(.badge-purple)) {
-  background: color-mix(in srgb, var(--accent-purple) 15%, transparent);
-  color: var(--accent-purple);
+  background: var(--tag-accent-bg);
+  color: var(--tag-accent-fg);
 }
 
 :where(.neutral),
 :global(:where(.badge-gray)) {
-  background: color-mix(in srgb, var(--text-tertiary) 15%, transparent);
-  color: var(--text-tertiary);
+  background: var(--tag-accent-bg);
+  color: var(--tag-accent-fg);
 }
diff --git a/packages/web/src/components/ui/textarea/index.module.css b/packages/web/src/components/ui/textarea/index.module.css
index 4327b16f..18f8f80a 100644
--- a/packages/web/src/components/ui/textarea/index.module.css
+++ b/packages/web/src/components/ui/textarea/index.module.css
@@ -1,8 +1,8 @@
 .input {
   height: var(--control-height-md);
   padding: 0 var(--inset-control-inline);
-  background: var(--bg-page);
-  border: 1px solid var(--border);
+  background: var(--field-bg);
+  border: 1px solid var(--field-border);
   border-radius: var(--radius-control);
   color: var(--text-primary);
   font-family: var(--font-sans);
@@ -17,14 +17,13 @@
 }
 
 .input:hover {
-  border-color: var(--border-light);
+  border-color: var(--field-border-hover);
 }
 
 .input:focus,
 .input:focus-visible {
-  border-color: var(--state-focus-ring-color);
-  box-shadow: 0 0 0 var(--state-focus-ring-width)
-    color-mix(in srgb, var(--state-focus-ring-color) 40%, transparent);
+  border-color: var(--border-focus);
+  box-shadow: var(--field-ring);
 }
 
 .textarea {
@@ -41,12 +40,13 @@
 
 .invalid,
 .textarea[aria-invalid="true"] {
-  border-color: var(--border-error);
+  border-color: var(--border-danger);
 }
 
 .invalid:focus,
 .invalid:focus-visible,
 .textarea[aria-invalid="true"]:focus,
 .textarea[aria-invalid="true"]:focus-visible {
-  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border-error) 70%, transparent 30%);
+  border-color: var(--border-danger);
+  box-shadow: var(--field-invalid-ring);
 }
diff --git a/packages/web/src/components/ui/toast/index.module.css b/packages/web/src/components/ui/toast/index.module.css
index fe03d382..b806f591 100644
--- a/packages/web/src/components/ui/toast/index.module.css
+++ b/packages/web/src/components/ui/toast/index.module.css
@@ -28,7 +28,7 @@
   padding: var(--sp-3) var(--sp-4);
   border: 1px solid var(--surface-overlay-border);
   border-radius: var(--radius-overlay);
-  background: var(--surface-overlay-bg);
+  background: var(--material-overlay);
   box-shadow: var(--surface-overlay-shadow);
   pointer-events: auto;
   animation: slideIn var(--duration-slower) var(--ease-out);
@@ -43,7 +43,7 @@
 }
 
 .toast:hover {
-  border-color: var(--border-light);
+  border-color: var(--border-subtle);
   box-shadow: var(--shadow-xl);
 }
 
@@ -123,7 +123,7 @@
   flex-shrink: 0;
   align-self: center;
   border-radius: var(--radius-sm);
-  color: var(--accent-blue);
+  color: var(--status-info-fg);
   font-size: var(--type-body-3-size);
   line-height: var(--type-body-3-line-height);
   font-weight: var(--type-body-3-weight);
@@ -133,7 +133,7 @@
 }
 
 .action:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
 }
 
 .close {
@@ -151,7 +151,7 @@
 }
 
 .close:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   color: var(--text-primary);
 }
 
diff --git a/packages/web/src/components/ui/workbench-layer/index.module.css b/packages/web/src/components/ui/workbench-layer/index.module.css
index bd11f232..466b8d62 100644
--- a/packages/web/src/components/ui/workbench-layer/index.module.css
+++ b/packages/web/src/components/ui/workbench-layer/index.module.css
@@ -7,8 +7,8 @@
   align-items: flex-start;
   justify-content: center;
   padding: var(--sp-16) var(--sp-4) var(--sp-4);
-  background: var(--overlay-backdrop);
-  backdrop-filter: var(--app-surface-backdrop-filter, none);
+  background: var(--surface-overlay-backdrop);
+  backdrop-filter: var(--material-backdrop-filter);
 }
 
 .surface,
diff --git a/packages/web/src/features/agent-panes/actions/pane-drag-types.ts b/packages/web/src/features/agent-panes/actions/pane-drag-types.ts
new file mode 100644
index 00000000..b18a8193
--- /dev/null
+++ b/packages/web/src/features/agent-panes/actions/pane-drag-types.ts
@@ -0,0 +1,10 @@
+export type PaneDropPlacement = "left" | "right" | "top" | "bottom" | "center";
+
+export type PaneDropTargetType = "session" | "draft";
+
+export interface PaneDropIntent {
+  sourcePaneId: string;
+  targetPaneId: string;
+  placement: PaneDropPlacement;
+  targetType: PaneDropTargetType;
+}
diff --git a/packages/web/src/features/agent-panes/actions/use-pane-actions.ts b/packages/web/src/features/agent-panes/actions/use-pane-actions.ts
index 8e04a470..a4ea6bad 100644
--- a/packages/web/src/features/agent-panes/actions/use-pane-actions.ts
+++ b/packages/web/src/features/agent-panes/actions/use-pane-actions.ts
@@ -9,11 +9,15 @@ import {
   assignSessionToPane,
   closeDraftPaneById,
   closePaneBySessionId,
+  insertPaneAtEdge,
+  moveSessionToDraftPane,
   removePaneBySessionId,
   replaceSessionInPane,
   splitPaneByPaneId,
   splitPaneBySessionId,
+  swapPaneSessionsByPaneId,
 } from "../pane-layout-tree";
+import type { PaneDropPlacement } from "./pane-drag-types";
 
 export function usePaneActions(workspaceId: string) {
   const setPaneLayout = useSetAtom(paneLayoutAtomFamily(workspaceId));
@@ -111,6 +115,31 @@ export function usePaneActions(workspaceId: string) {
     [applyLayout]
   );
 
+  const swapPaneSessions = useCallback(
+    (sourcePaneId: string, targetPaneId: string) => {
+      applyLayout((current) => swapPaneSessionsByPaneId(current, sourcePaneId, targetPaneId));
+    },
+    [applyLayout]
+  );
+
+  const moveSessionToDraft = useCallback(
+    (sourcePaneId: string, targetPaneId: string) => {
+      applyLayout((current) => moveSessionToDraftPane(current, sourcePaneId, targetPaneId));
+    },
+    [applyLayout]
+  );
+
+  const insertSessionPaneAtEdge = useCallback(
+    (
+      sourcePaneId: string,
+      targetPaneId: string,
+      placement: Exclude<PaneDropPlacement, "center">
+    ) => {
+      applyLayout((current) => insertPaneAtEdge(current, sourcePaneId, targetPaneId, placement));
+    },
+    [applyLayout]
+  );
+
   return {
     appendSession,
     appendSessionToMobileColumn,
@@ -122,5 +151,8 @@ export function usePaneActions(workspaceId: string) {
     replaceWithSession,
     splitDraftPane,
     splitSessionPane,
+    swapPaneSessions,
+    moveSessionToDraft,
+    insertSessionPaneAtEdge,
   };
 }
diff --git a/packages/web/src/features/agent-panes/actions/use-pane-drag-controller.test.tsx b/packages/web/src/features/agent-panes/actions/use-pane-drag-controller.test.tsx
new file mode 100644
index 00000000..8747ef9e
--- /dev/null
+++ b/packages/web/src/features/agent-panes/actions/use-pane-drag-controller.test.tsx
@@ -0,0 +1,192 @@
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { usePaneDragController } from "./use-pane-drag-controller";
+
+function createPaneElement(rect: {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}): HTMLElement {
+  const element = document.createElement("div");
+  const domRect = {
+    x: rect.left,
+    y: rect.top,
+    left: rect.left,
+    top: rect.top,
+    width: rect.width,
+    height: rect.height,
+    right: rect.left + rect.width,
+    bottom: rect.top + rect.height,
+    toJSON: () => rect,
+  } as DOMRect;
+
+  element.getBoundingClientRect = vi.fn(() => domRect);
+  return element;
+}
+
+describe("usePaneDragController", () => {
+  afterEach(() => {
+    document.body.classList.remove("is-dragging-pane");
+  });
+
+  it("marks a hovered session pane as left when the pointer is inside the left edge band", () => {
+    const { result } = renderHook(() => usePaneDragController({ onDrop: vi.fn() }));
+
+    act(() => {
+      result.current.registerPane("target-pane", {
+        type: "session",
+        element: createPaneElement({ left: 100, top: 40, width: 400, height: 240 }),
+      });
+      result.current.startDrag({ paneId: "source-pane" });
+      result.current.handlePointerMove({ clientX: 130, clientY: 180 } as PointerEvent);
+    });
+
+    expect(result.current.state.hoverTargetPaneId).toBe("target-pane");
+    expect(result.current.state.hoverPlacement).toBe("left");
+    expect(result.current.state.previewPosition).toEqual({ x: 130, y: 180 });
+  });
+
+  it("treats draft panes as center-only targets and dispatches a center drop intent", () => {
+    const onDrop = vi.fn();
+    const { result } = renderHook(() => usePaneDragController({ onDrop }));
+
+    act(() => {
+      result.current.registerPane("draft-pane", {
+        type: "draft",
+        element: createPaneElement({ left: 300, top: 80, width: 320, height: 240 }),
+      });
+      result.current.startDrag({ paneId: "source-pane" });
+      result.current.handlePointerMove({ clientX: 310, clientY: 140 } as PointerEvent);
+    });
+
+    expect(result.current.state.hoverPlacement).toBe("center");
+
+    act(() => {
+      result.current.handlePointerUp();
+    });
+
+    expect(onDrop).toHaveBeenCalledWith({
+      sourcePaneId: "source-pane",
+      targetPaneId: "draft-pane",
+      placement: "center",
+      targetType: "draft",
+    });
+    expect(result.current.state.isDragging).toBe(false);
+  });
+
+  it("does not hover or dispatch a drop when the pointer stays over the source pane", () => {
+    const onDrop = vi.fn();
+    const { result } = renderHook(() => usePaneDragController({ onDrop }));
+
+    act(() => {
+      result.current.registerPane("pane-1", {
+        type: "session",
+        element: createPaneElement({ left: 40, top: 30, width: 360, height: 220 }),
+      });
+      result.current.startDrag({ paneId: "pane-1" });
+      result.current.handlePointerMove({ clientX: 120, clientY: 120 } as PointerEvent);
+    });
+
+    expect(result.current.state.hoverTargetPaneId).toBeNull();
+    expect(result.current.state.hoverPlacement).toBeNull();
+
+    act(() => {
+      result.current.handlePointerUp();
+    });
+
+    expect(onDrop).not.toHaveBeenCalled();
+  });
+
+  it("does not start dragging when disabled", () => {
+    const { result } = renderHook(() => usePaneDragController({ onDrop: vi.fn(), enabled: false }));
+
+    act(() => {
+      result.current.startDrag({ paneId: "source-pane" });
+    });
+
+    expect(document.body).not.toHaveClass("is-dragging-pane");
+    expect(result.current.state.isDragging).toBe(false);
+    expect(result.current.state.source).toBeNull();
+  });
+
+  it("attaches pointer listeners while dragging and removes listeners and body class on unmount", () => {
+    const addEventListenerSpy = vi.spyOn(window, "addEventListener");
+    const removeEventListenerSpy = vi.spyOn(window, "removeEventListener");
+    const { result, unmount } = renderHook(() => usePaneDragController({ onDrop: vi.fn() }));
+
+    act(() => {
+      result.current.startDrag({ paneId: "source-pane" });
+    });
+
+    expect(document.body).toHaveClass("is-dragging-pane");
+    expect(addEventListenerSpy).toHaveBeenCalledWith("pointermove", expect.any(Function));
+    expect(addEventListenerSpy).toHaveBeenCalledWith("pointerup", expect.any(Function));
+
+    act(() => {
+      unmount();
+    });
+
+    expect(document.body).not.toHaveClass("is-dragging-pane");
+    expect(removeEventListenerSpy).toHaveBeenCalledWith("pointermove", expect.any(Function));
+    expect(removeEventListenerSpy).toHaveBeenCalledWith("pointerup", expect.any(Function));
+  });
+
+  it("cleans up drag state, body class, and listeners when pointercancel interrupts a drag", () => {
+    const addEventListenerSpy = vi.spyOn(window, "addEventListener");
+    const removeEventListenerSpy = vi.spyOn(window, "removeEventListener");
+    const { result } = renderHook(() => usePaneDragController({ onDrop: vi.fn() }));
+
+    act(() => {
+      result.current.startDrag({ paneId: "source-pane" });
+      result.current.handlePointerMove({ clientX: 180, clientY: 220 } as PointerEvent);
+    });
+
+    expect(document.body).toHaveClass("is-dragging-pane");
+    expect(result.current.state.isDragging).toBe(true);
+    expect(result.current.state.previewPosition).toEqual({ x: 180, y: 220 });
+    expect(addEventListenerSpy).toHaveBeenCalledWith("pointercancel", expect.any(Function));
+
+    act(() => {
+      window.dispatchEvent(new Event("pointercancel"));
+    });
+
+    expect(document.body).not.toHaveClass("is-dragging-pane");
+    expect(result.current.state.isDragging).toBe(false);
+    expect(result.current.state.hoverTargetPaneId).toBeNull();
+    expect(result.current.state.hoverPlacement).toBeNull();
+    expect(result.current.state.previewPosition).toEqual({ x: 0, y: 0 });
+    expect(removeEventListenerSpy).toHaveBeenCalledWith("pointercancel", expect.any(Function));
+  });
+
+  it("immediately clears an active drag when enabled changes to false", () => {
+    const removeEventListenerSpy = vi.spyOn(window, "removeEventListener");
+    const { result, rerender } = renderHook(
+      ({ enabled }) => usePaneDragController({ onDrop: vi.fn(), enabled }),
+      {
+        initialProps: { enabled: true },
+      }
+    );
+
+    act(() => {
+      result.current.startDrag({ paneId: "source-pane" });
+      result.current.handlePointerMove({ clientX: 220, clientY: 260 } as PointerEvent);
+    });
+
+    expect(document.body).toHaveClass("is-dragging-pane");
+    expect(result.current.state.isDragging).toBe(true);
+    expect(result.current.state.previewPosition).toEqual({ x: 220, y: 260 });
+
+    act(() => {
+      rerender({ enabled: false });
+    });
+
+    expect(document.body).not.toHaveClass("is-dragging-pane");
+    expect(result.current.state.isDragging).toBe(false);
+    expect(result.current.state.source).toBeNull();
+    expect(result.current.state.previewPosition).toEqual({ x: 0, y: 0 });
+    expect(removeEventListenerSpy).toHaveBeenCalledWith("pointermove", expect.any(Function));
+    expect(removeEventListenerSpy).toHaveBeenCalledWith("pointerup", expect.any(Function));
+    expect(removeEventListenerSpy).toHaveBeenCalledWith("pointercancel", expect.any(Function));
+  });
+});
diff --git a/packages/web/src/features/agent-panes/actions/use-pane-drag-controller.ts b/packages/web/src/features/agent-panes/actions/use-pane-drag-controller.ts
new file mode 100644
index 00000000..136dc335
--- /dev/null
+++ b/packages/web/src/features/agent-panes/actions/use-pane-drag-controller.ts
@@ -0,0 +1,259 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { PaneDropIntent, PaneDropPlacement, PaneDropTargetType } from "./pane-drag-types";
+
+const EDGE_RATIO = 0.22;
+const EDGE_MIN = 48;
+const EDGE_MAX = 96;
+
+export interface PaneDragSourceSnapshot {
+  paneId: string;
+  sessionId?: string;
+  title?: string;
+  providerLabel?: string;
+}
+
+export interface RegisteredPane {
+  type: PaneDropTargetType;
+  element: HTMLElement;
+}
+
+export interface PaneDragPreviewPosition {
+  x: number;
+  y: number;
+}
+
+export interface PaneDragState {
+  isDragging: boolean;
+  source: PaneDragSourceSnapshot | null;
+  hoverTargetPaneId: string | null;
+  hoverPlacement: PaneDropPlacement | null;
+  previewPosition: PaneDragPreviewPosition;
+  previewX: number;
+  previewY: number;
+}
+
+interface UsePaneDragControllerOptions {
+  enabled?: boolean;
+  onDrop: (intent: PaneDropIntent) => void;
+}
+
+function createIdleState(): PaneDragState {
+  return {
+    isDragging: false,
+    source: null,
+    hoverTargetPaneId: null,
+    hoverPlacement: null,
+    previewPosition: { x: 0, y: 0 },
+    previewX: 0,
+    previewY: 0,
+  };
+}
+
+function clampEdgeBand(size: number): number {
+  return Math.max(EDGE_MIN, Math.min(EDGE_MAX, size * EDGE_RATIO));
+}
+
+function resolvePlacement(
+  paneId: string,
+  pane: RegisteredPane,
+  clientX: number,
+  clientY: number,
+  sourcePaneId: string | undefined
+): PaneDropPlacement | null {
+  const rect = pane.element.getBoundingClientRect();
+
+  if (clientX < rect.left || clientX > rect.right || clientY < rect.top || clientY > rect.bottom) {
+    return null;
+  }
+
+  if (sourcePaneId === paneId) {
+    return null;
+  }
+
+  if (pane.type === "draft") {
+    return "center";
+  }
+
+  const edgeX = clampEdgeBand(rect.width);
+  const edgeY = clampEdgeBand(rect.height);
+
+  if (clientX <= rect.left + edgeX) {
+    return "left";
+  }
+
+  if (clientX >= rect.right - edgeX) {
+    return "right";
+  }
+
+  if (clientY <= rect.top + edgeY) {
+    return "top";
+  }
+
+  if (clientY >= rect.bottom - edgeY) {
+    return "bottom";
+  }
+
+  return "center";
+}
+
+export function usePaneDragController({ enabled = true, onDrop }: UsePaneDragControllerOptions) {
+  const paneRegistry = useRef(new Map<string, RegisteredPane>());
+  const [state, setState] = useState<PaneDragState>(() => createIdleState());
+  const onDropRef = useRef(onDrop);
+  const stateRef = useRef(state);
+
+  const setDragState = useCallback(
+    (nextState: PaneDragState | ((current: PaneDragState) => PaneDragState)) => {
+      const resolved = typeof nextState === "function" ? nextState(stateRef.current) : nextState;
+
+      stateRef.current = resolved;
+      setState(resolved);
+    },
+    []
+  );
+
+  const registerPane = useCallback((paneId: string, entry: RegisteredPane | null) => {
+    if (!entry) {
+      paneRegistry.current.delete(paneId);
+      return;
+    }
+
+    paneRegistry.current.set(paneId, entry);
+  }, []);
+
+  const startDrag = useCallback(
+    (source: PaneDragSourceSnapshot) => {
+      if (!enabled) {
+        return;
+      }
+
+      document.body.classList.add("is-dragging-pane");
+      setDragState({
+        isDragging: true,
+        source,
+        hoverTargetPaneId: null,
+        hoverPlacement: null,
+        previewPosition: { x: 0, y: 0 },
+        previewX: 0,
+        previewY: 0,
+      });
+    },
+    [enabled, setDragState]
+  );
+
+  const clearDrag = useCallback(() => {
+    document.body.classList.remove("is-dragging-pane");
+    setDragState(createIdleState());
+  }, [setDragState]);
+
+  useEffect(() => {
+    onDropRef.current = onDrop;
+  }, [onDrop]);
+
+  useEffect(() => {
+    if (!enabled && stateRef.current.isDragging) {
+      clearDrag();
+    }
+  }, [clearDrag, enabled]);
+
+  const handlePointerMove = useCallback(
+    (event: PointerEvent) => {
+      setDragState((current) => {
+        if (!current.isDragging) {
+          return current;
+        }
+
+        let hoverTargetPaneId: string | null = null;
+        let hoverPlacement: PaneDropPlacement | null = null;
+
+        for (const [paneId, pane] of paneRegistry.current.entries()) {
+          const placement = resolvePlacement(
+            paneId,
+            pane,
+            event.clientX,
+            event.clientY,
+            current.source?.paneId
+          );
+
+          if (!placement) {
+            continue;
+          }
+
+          hoverTargetPaneId = paneId;
+          hoverPlacement = placement;
+          break;
+        }
+
+        return {
+          ...current,
+          hoverTargetPaneId,
+          hoverPlacement,
+          previewPosition: { x: event.clientX, y: event.clientY },
+          previewX: event.clientX,
+          previewY: event.clientY,
+        };
+      });
+    },
+    [setDragState]
+  );
+
+  const handlePointerUp = useCallback(() => {
+    const current = stateRef.current;
+
+    if (
+      current.isDragging &&
+      current.source &&
+      current.hoverTargetPaneId &&
+      current.hoverPlacement
+    ) {
+      const target = paneRegistry.current.get(current.hoverTargetPaneId);
+
+      if (target) {
+        onDropRef.current({
+          sourcePaneId: current.source.paneId,
+          targetPaneId: current.hoverTargetPaneId,
+          placement: current.hoverPlacement,
+          targetType: target.type,
+        });
+      }
+    }
+
+    clearDrag();
+  }, [clearDrag]);
+
+  const handlePointerCancel = useCallback(() => {
+    clearDrag();
+  }, [clearDrag]);
+
+  useEffect(() => {
+    if (!state.isDragging) {
+      return;
+    }
+
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+    window.addEventListener("pointercancel", handlePointerCancel);
+
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handlePointerUp);
+      window.removeEventListener("pointercancel", handlePointerCancel);
+    };
+  }, [handlePointerCancel, handlePointerMove, handlePointerUp, state.isDragging]);
+
+  useEffect(() => {
+    return () => {
+      document.body.classList.remove("is-dragging-pane");
+    };
+  }, []);
+
+  return {
+    clearDrag,
+    handlePointerCancel,
+    handlePointerMove,
+    handlePointerUp,
+    registerPane,
+    startDrag,
+    state,
+  };
+}
diff --git a/packages/web/src/features/agent-panes/actions/use-pane-drag-enabled.test.tsx b/packages/web/src/features/agent-panes/actions/use-pane-drag-enabled.test.tsx
new file mode 100644
index 00000000..0d39ec1d
--- /dev/null
+++ b/packages/web/src/features/agent-panes/actions/use-pane-drag-enabled.test.tsx
@@ -0,0 +1,100 @@
+import { act, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { usePaneDragEnabled } from "./use-pane-drag-enabled";
+
+type MediaListener = () => void;
+
+const POINTER_QUERY = "(pointer: coarse)";
+
+function createMatchMediaHarness(initialMatchesByQuery: Record<string, boolean>) {
+  const listeners = new Map<string, Set<MediaListener>>();
+  const matchesByQuery = new Map(Object.entries(initialMatchesByQuery));
+
+  const matchMedia = vi.fn((query: string) => ({
+    matches: matchesByQuery.get(query) ?? false,
+    media: query,
+    addEventListener: (_event: string, listener: MediaListener) => {
+      const queryListeners = listeners.get(query) ?? new Set<MediaListener>();
+      queryListeners.add(listener);
+      listeners.set(query, queryListeners);
+    },
+    removeEventListener: (_event: string, listener: MediaListener) => {
+      listeners.get(query)?.delete(listener);
+    },
+    addListener: (listener: MediaListener) => {
+      const queryListeners = listeners.get(query) ?? new Set<MediaListener>();
+      queryListeners.add(listener);
+      listeners.set(query, queryListeners);
+    },
+    removeListener: (listener: MediaListener) => {
+      listeners.get(query)?.delete(listener);
+    },
+    dispatchEvent: () => true,
+  }));
+
+  return {
+    matchMedia,
+    setMatches(query: string, nextMatches: boolean) {
+      matchesByQuery.set(query, nextMatches);
+      for (const listener of listeners.get(query) ?? []) {
+        listener();
+      }
+    },
+  };
+}
+
+const Probe = () => <div data-testid="pane-drag-enabled">{String(usePaneDragEnabled())}</div>;
+
+describe("usePaneDragEnabled", () => {
+  let originalMatchMedia: typeof window.matchMedia;
+
+  beforeEach(() => {
+    originalMatchMedia = window.matchMedia;
+  });
+
+  afterEach(() => {
+    window.matchMedia = originalMatchMedia;
+  });
+
+  it("returns false on coarse pointer devices", () => {
+    const harness = createMatchMediaHarness({
+      [POINTER_QUERY]: true,
+    });
+    window.matchMedia = harness.matchMedia as unknown as typeof window.matchMedia;
+
+    render(<Probe />);
+
+    expect(window.matchMedia).toHaveBeenCalledWith(POINTER_QUERY);
+    expect(screen.getByTestId("pane-drag-enabled")).toHaveTextContent("false");
+  });
+
+  it("returns true on fine pointer devices even if the window is narrow", () => {
+    const harness = createMatchMediaHarness({
+      [POINTER_QUERY]: false,
+      "(max-width: 899px)": true,
+    });
+    window.matchMedia = harness.matchMedia as unknown as typeof window.matchMedia;
+
+    render(<Probe />);
+
+    expect(window.matchMedia).toHaveBeenCalledWith(POINTER_QUERY);
+    expect(window.matchMedia).not.toHaveBeenCalledWith("(max-width: 899px)");
+    expect(screen.getByTestId("pane-drag-enabled")).toHaveTextContent("true");
+  });
+
+  it("updates when the coarse pointer media query changes", () => {
+    const harness = createMatchMediaHarness({
+      [POINTER_QUERY]: false,
+    });
+    window.matchMedia = harness.matchMedia as unknown as typeof window.matchMedia;
+
+    render(<Probe />);
+    expect(screen.getByTestId("pane-drag-enabled")).toHaveTextContent("true");
+
+    act(() => {
+      harness.setMatches(POINTER_QUERY, true);
+    });
+
+    expect(screen.getByTestId("pane-drag-enabled")).toHaveTextContent("false");
+  });
+});
diff --git a/packages/web/src/features/agent-panes/actions/use-pane-drag-enabled.ts b/packages/web/src/features/agent-panes/actions/use-pane-drag-enabled.ts
new file mode 100644
index 00000000..f8118e18
--- /dev/null
+++ b/packages/web/src/features/agent-panes/actions/use-pane-drag-enabled.ts
@@ -0,0 +1,38 @@
+import { useSyncExternalStore } from "react";
+
+const POINTER_QUERY = "(pointer: coarse)";
+
+const subscribe = (onStoreChange: () => void) => {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return () => undefined;
+  }
+
+  const mediaQueryList = window.matchMedia(POINTER_QUERY);
+  const supportsEventListener = typeof mediaQueryList.addEventListener === "function";
+
+  if (supportsEventListener) {
+    mediaQueryList.addEventListener("change", onStoreChange);
+    return () => {
+      mediaQueryList.removeEventListener("change", onStoreChange);
+    };
+  }
+
+  mediaQueryList.addListener(onStoreChange);
+  return () => {
+    mediaQueryList.removeListener(onStoreChange);
+  };
+};
+
+const getSnapshot = () => {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return true;
+  }
+
+  return !window.matchMedia(POINTER_QUERY).matches;
+};
+
+const getServerSnapshot = () => true;
+
+export function usePaneDragEnabled(): boolean {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
diff --git a/packages/web/src/features/agent-panes/components/session-card.test.tsx b/packages/web/src/features/agent-panes/components/session-card.test.tsx
index ecec9e4d..a3217464 100644
--- a/packages/web/src/features/agent-panes/components/session-card.test.tsx
+++ b/packages/web/src/features/agent-panes/components/session-card.test.tsx
@@ -14,6 +14,14 @@ import { supervisorsAtom } from "../../supervisor/atoms";
 import { paneLayoutAtomFamily } from "../atoms/pane-layout";
 import { SessionCard } from "../views/shared/session-card";
 
+const paneDragEnabledMock = vi.hoisted(() => ({
+  value: true,
+}));
+
+vi.mock("../actions/use-pane-drag-enabled", () => ({
+  usePaneDragEnabled: () => paneDragEnabledMock.value,
+}));
+
 const mockXtermHost = vi.fn((props: Record<string, unknown>) => (
   <div data-testid="mock-xterm-host" data-readonly={String(props.readOnly)} />
 ));
@@ -75,6 +83,7 @@ function createSessionStore(
 describe("SessionCard", () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    paneDragEnabledMock.value = true;
   });
 
   it("renders ended sessions with a read-only terminal host", () => {
@@ -230,6 +239,87 @@ describe("SessionCard", () => {
     );
   });
 
+  it("renders a pane drag handle button in the header actions on desktop", () => {
+    const { store } = createSessionStore({
+      terminalId: "term-live",
+      state: "running",
+      endedAt: undefined,
+    });
+
+    render(
+      <Provider store={store}>
+        <SessionCard paneId="pane-1" sessionId="sess_123456" onPaneDragStart={vi.fn()} />
+      </Provider>
+    );
+
+    expect(screen.getByRole("button", { name: "Drag pane" })).toBeInTheDocument();
+  });
+
+  it("does not render a pane drag handle button on mobile", () => {
+    paneDragEnabledMock.value = false;
+    const { store } = createSessionStore({
+      terminalId: "term-live",
+      state: "running",
+      endedAt: undefined,
+    });
+
+    render(
+      <Provider store={store}>
+        <SessionCard paneId="pane-1" sessionId="sess_123456" onPaneDragStart={vi.fn()} />
+      </Provider>
+    );
+
+    expect(screen.queryByRole("button", { name: "Drag pane" })).not.toBeInTheDocument();
+  });
+
+  it("starts pane drag only from the drag handle", () => {
+    const { store } = createSessionStore({
+      terminalId: "term-live",
+      state: "running",
+      endedAt: undefined,
+    });
+    const onPaneDragStart = vi.fn();
+
+    render(
+      <Provider store={store}>
+        <SessionCard paneId="pane-1" sessionId="sess_123456" onPaneDragStart={onPaneDragStart} />
+      </Provider>
+    );
+
+    fireEvent.pointerDown(screen.getByRole("button", { name: "Drag pane" }));
+    fireEvent.pointerDown(screen.getByText("SESSION-56"));
+
+    expect(onPaneDragStart).toHaveBeenCalledTimes(1);
+    expect(onPaneDragStart).toHaveBeenCalledWith(
+      expect.objectContaining({
+        paneId: "pane-1",
+        sessionId: "sess_123456",
+        providerLabel: "Codex",
+      })
+    );
+  });
+
+  it("does not start pane drag from the drag handle for touch pointers on desktop", () => {
+    const { store } = createSessionStore({
+      terminalId: "term-live",
+      state: "running",
+      endedAt: undefined,
+    });
+    const onPaneDragStart = vi.fn();
+
+    render(
+      <Provider store={store}>
+        <SessionCard paneId="pane-1" sessionId="sess_123456" onPaneDragStart={onPaneDragStart} />
+      </Provider>
+    );
+
+    fireEvent.pointerDown(screen.getByRole("button", { name: "Drag pane" }), {
+      pointerType: "touch",
+    });
+
+    expect(onPaneDragStart).not.toHaveBeenCalled();
+  });
+
   it("passes isActiveSession to XtermHost when the workspace ui state targets this session", () => {
     const { store } = createSessionStore({
       terminalId: "term-live",
diff --git a/packages/web/src/features/agent-panes/index.test.tsx b/packages/web/src/features/agent-panes/index.test.tsx
index c8aa23d8..dcca190e 100644
--- a/packages/web/src/features/agent-panes/index.test.tsx
+++ b/packages/web/src/features/agent-panes/index.test.tsx
@@ -7,20 +7,59 @@ import { connectionStatusAtom, wsClientAtom } from "../../atoms/connection";
 import { sessionsAtom } from "../../atoms/sessions";
 import { activeWorkspaceIdAtom, workspacesLoadStateAtom } from "../../atoms/workspaces";
 import { seedReadyWorkspaceState } from "../../test-utils/workspace-state";
+import type { PaneDropIntent } from "./actions/pane-drag-types";
+import type { PaneDragSourceSnapshot } from "./actions/use-pane-drag-controller";
 import { LEGACY_PANE_LAYOUT_STORAGE_KEY_PREFIX, paneLayoutAtomFamily } from "./atoms/pane-layout";
 import { AgentPanes } from "./index";
 
 type MockSessionCardProps = {
+  dragState?: {
+    isActiveDropTarget: boolean;
+    isDragging: boolean;
+    hoverPlacement: PaneDropIntent["placement"] | null;
+  };
+  onPaneDragStart?: (source: PaneDragSourceSnapshot) => void;
+  paneId?: string;
   sessionId: string;
   onSplitHorizontal?: () => void;
   onSplitVertical?: () => void;
   onClose?: () => void;
+  onPaneDrop?: (intent: PaneDropIntent) => void;
 };
 
 const mockSessionCard = vi.fn(
-  ({ sessionId, onSplitHorizontal, onSplitVertical, onClose }: MockSessionCardProps) => (
-    <div data-testid="session-card">
+  ({
+    paneId,
+    sessionId,
+    dragState,
+    onPaneDragStart,
+    onSplitHorizontal,
+    onSplitVertical,
+    onClose,
+    onPaneDrop,
+  }: MockSessionCardProps) => (
+    <div
+      data-testid="session-card"
+      data-dragging={dragState?.isDragging ? "true" : undefined}
+      data-drop-target={dragState?.isActiveDropTarget ? "true" : undefined}
+      data-hover-placement={dragState?.hoverPlacement ?? undefined}
+    >
       <span>{sessionId}</span>
+      {paneId && onPaneDragStart ? (
+        <button
+          type="button"
+          onPointerDown={() =>
+            onPaneDragStart({
+              paneId,
+              providerLabel: sessionId === "sess_1" ? "Claude" : "Codex",
+              sessionId,
+              title: sessionId,
+            })
+          }
+        >
+          drag-{sessionId}
+        </button>
+      ) : null}
       <button type="button" onClick={onSplitHorizontal}>
         split-{sessionId}
       </button>
@@ -30,6 +69,36 @@ const mockSessionCard = vi.fn(
       <button type="button" onClick={onClose}>
         close-{sessionId}
       </button>
+      {paneId && onPaneDrop ? (
+        <>
+          <button
+            type="button"
+            onClick={() =>
+              onPaneDrop({
+                sourcePaneId: paneId,
+                targetPaneId: paneId === "left" ? "right" : "left",
+                placement: "center",
+                targetType: "session",
+              })
+            }
+          >
+            drop-center-{sessionId}
+          </button>
+          <button
+            type="button"
+            onClick={() =>
+              onPaneDrop({
+                sourcePaneId: paneId,
+                targetPaneId: paneId === "left" ? "right" : "left",
+                placement: "left",
+                targetType: "session",
+              })
+            }
+          >
+            drop-left-{sessionId}
+          </button>
+        </>
+      ) : null}
     </div>
   )
 );
@@ -38,6 +107,56 @@ vi.mock("./views/shared/session-card", () => ({
   SessionCard: (props: MockSessionCardProps) => mockSessionCard(props),
 }));
 
+type MockDraftLauncherProps = {
+  dragState?: {
+    isActiveDropTarget: boolean;
+    isDragging: boolean;
+    hoverPlacement: "center" | null;
+  };
+  workspaceId: string;
+  paneId?: string;
+  onAssignSession?: (paneId: string, sessionId: string) => void;
+  onClosePane?: (paneId: string) => void;
+  onReplaceWithSession?: (sessionId: string) => void;
+  onSplitPane?: (paneId: string, direction: "horizontal" | "vertical") => void;
+  onPaneDrop?: (intent: PaneDropIntent) => void;
+};
+
+vi.mock("./views/shared/draft-launcher", async () => {
+  const actual = await vi.importActual<typeof import("./views/shared/draft-launcher")>(
+    "./views/shared/draft-launcher"
+  );
+
+  return {
+    ...actual,
+    DraftLauncher: ({ paneId, onPaneDrop, dragState, ...props }: MockDraftLauncherProps) => (
+      <div
+        data-testid={paneId ? `draft-launcher-${paneId}` : "draft-launcher-standalone"}
+        data-dragging={dragState?.isDragging ? "true" : undefined}
+        data-drop-target={dragState?.isActiveDropTarget ? "true" : undefined}
+        data-hover-placement={dragState?.hoverPlacement ?? undefined}
+      >
+        <actual.DraftLauncher {...props} dragState={dragState} paneId={paneId} />
+        {paneId && onPaneDrop ? (
+          <button
+            type="button"
+            onClick={() =>
+              onPaneDrop({
+                sourcePaneId: "left",
+                targetPaneId: paneId,
+                placement: "center",
+                targetType: "draft",
+              })
+            }
+          >
+            move-to-draft-{paneId}
+          </button>
+        ) : null}
+      </div>
+    ),
+  };
+});
+
 vi.mock("./views/shared/pane-layout", () => ({
   PaneLayout: ({
     children,
@@ -139,6 +258,32 @@ function createAgentPaneStore(
   return { store, sendCommand, sessions };
 }
 
+function setPaneRect(
+  paneId: string,
+  rect: { left: number; top: number; width: number; height: number }
+) {
+  const element = document.querySelector(`[data-pane-id="${paneId}"]`);
+
+  if (!(element instanceof HTMLElement)) {
+    throw new Error(`Missing pane wrapper for ${paneId}`);
+  }
+
+  const domRect = {
+    x: rect.left,
+    y: rect.top,
+    left: rect.left,
+    top: rect.top,
+    width: rect.width,
+    height: rect.height,
+    right: rect.left + rect.width,
+    bottom: rect.top + rect.height,
+    toJSON: () => rect,
+  } as DOMRect;
+
+  element.getBoundingClientRect = vi.fn(() => domRect);
+  return element;
+}
+
 describe("AgentPanes", () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -306,6 +451,385 @@ describe("AgentPanes", () => {
     expect(sendCommand).toHaveBeenCalledWith("session.stop", { sessionId: "sess_1" }, undefined);
   });
 
+  it("swaps pane sessions on a center drop over another session pane", async () => {
+    const sendCommand = vi.fn(async (op: string, args?: Record<string, unknown>) => {
+      if (op === "session.list") {
+        return [
+          {
+            id: "sess_1",
+            workspaceId: "ws-1",
+            terminalId: "term-1",
+            providerId: "claude",
+            state: "running",
+            capability: "full",
+            startedAt: Date.now() - 10_000,
+            lastActiveAt: Date.now() - 1_000,
+          },
+          {
+            id: "sess_2",
+            workspaceId: "ws-1",
+            terminalId: "term-2",
+            providerId: "codex",
+            state: "idle",
+            capability: "full",
+            startedAt: Date.now() - 8_000,
+            lastActiveAt: Date.now() - 500,
+          },
+        ];
+      }
+
+      if (op === "workspace.uiState.set") {
+        return {
+          id: "ws-1",
+          name: "repo",
+          path: "/tmp/repo",
+          targetRuntime: "native",
+          openedAt: 1,
+          lastActiveAt: 1,
+          uiState: args?.uiState,
+        };
+      }
+
+      return undefined;
+    });
+    const { store } = createAgentPaneStore(
+      {
+        id: "root",
+        type: "split",
+        direction: "horizontal",
+        ratio: 0.5,
+        children: [
+          { id: "left", type: "leaf", sessionId: "sess_1" },
+          { id: "right", type: "leaf", sessionId: "sess_2" },
+        ],
+      },
+      sendCommand,
+      "connected"
+    );
+
+    render(
+      <Provider store={store}>
+        <AgentPanes />
+      </Provider>
+    );
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "drop-center-sess_1" }));
+    });
+
+    await waitFor(() => {
+      expect(store.get(paneLayoutAtomFamily("ws-1"))).toEqual({
+        id: "root",
+        type: "split",
+        direction: "horizontal",
+        ratio: 0.5,
+        children: [
+          { id: "left", type: "leaf", sessionId: "sess_2" },
+          { id: "right", type: "leaf", sessionId: "sess_1" },
+        ],
+      });
+    });
+
+    expect(sendCommand).toHaveBeenCalledWith(
+      "workspace.uiState.set",
+      expect.objectContaining({
+        workspaceId: "ws-1",
+        uiState: expect.objectContaining({
+          paneLayout: {
+            id: "root",
+            type: "split",
+            direction: "horizontal",
+            ratio: 0.5,
+            children: [
+              { id: "left", type: "leaf", sessionId: "sess_2" },
+              { id: "right", type: "leaf", sessionId: "sess_1" },
+            ],
+          },
+        }),
+      }),
+      undefined
+    );
+  });
+
+  it("moves a session into a draft pane on a center drop over a draft target", async () => {
+    const sendCommand = vi.fn(async (op: string, args?: Record<string, unknown>) => {
+      if (op === "session.list") {
+        return [
+          {
+            id: "sess_1",
+            workspaceId: "ws-1",
+            terminalId: "term-1",
+            providerId: "claude",
+            state: "running",
+            capability: "full",
+            startedAt: Date.now() - 10_000,
+            lastActiveAt: Date.now() - 1_000,
+          },
+        ];
+      }
+
+      if (op === "workspace.uiState.set") {
+        return {
+          id: "ws-1",
+          name: "repo",
+          path: "/tmp/repo",
+          targetRuntime: "native",
+          openedAt: 1,
+          lastActiveAt: 1,
+          uiState: args?.uiState,
+        };
+      }
+
+      return undefined;
+    });
+    const { store } = createAgentPaneStore(
+      {
+        id: "root",
+        type: "split",
+        direction: "horizontal",
+        ratio: 0.5,
+        children: [
+          { id: "left", type: "leaf", sessionId: "sess_1" },
+          { id: "right", type: "leaf" },
+        ],
+      },
+      sendCommand,
+      "connected"
+    );
+
+    render(
+      <Provider store={store}>
+        <AgentPanes />
+      </Provider>
+    );
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "move-to-draft-right" }));
+    });
+
+    await waitFor(() => {
+      expect(store.get(paneLayoutAtomFamily("ws-1"))).toEqual({
+        id: "right",
+        type: "leaf",
+        sessionId: "sess_1",
+      });
+    });
+
+    expect(sendCommand).toHaveBeenCalledWith(
+      "workspace.uiState.set",
+      expect.objectContaining({
+        workspaceId: "ws-1",
+        uiState: expect.objectContaining({
+          paneLayout: {
+            id: "right",
+            type: "leaf",
+            sessionId: "sess_1",
+          },
+        }),
+      }),
+      undefined
+    );
+  });
+
+  it("inserts a dragged session at the target edge on an edge drop", async () => {
+    const sendCommand = vi.fn(async (op: string, args?: Record<string, unknown>) => {
+      if (op === "session.list") {
+        return [
+          {
+            id: "sess_1",
+            workspaceId: "ws-1",
+            terminalId: "term-1",
+            providerId: "claude",
+            state: "running",
+            capability: "full",
+            startedAt: Date.now() - 10_000,
+            lastActiveAt: Date.now() - 1_000,
+          },
+          {
+            id: "sess_2",
+            workspaceId: "ws-1",
+            terminalId: "term-2",
+            providerId: "codex",
+            state: "idle",
+            capability: "full",
+            startedAt: Date.now() - 8_000,
+            lastActiveAt: Date.now() - 500,
+          },
+        ];
+      }
+
+      if (op === "workspace.uiState.set") {
+        return {
+          id: "ws-1",
+          name: "repo",
+          path: "/tmp/repo",
+          targetRuntime: "native",
+          openedAt: 1,
+          lastActiveAt: 1,
+          uiState: args?.uiState,
+        };
+      }
+
+      return undefined;
+    });
+    const { store } = createAgentPaneStore(
+      {
+        id: "root",
+        type: "split",
+        direction: "horizontal",
+        ratio: 0.5,
+        children: [
+          { id: "left", type: "leaf", sessionId: "sess_1" },
+          { id: "right", type: "leaf", sessionId: "sess_2" },
+        ],
+      },
+      sendCommand,
+      "connected"
+    );
+
+    render(
+      <Provider store={store}>
+        <AgentPanes />
+      </Provider>
+    );
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "drop-left-sess_1" }));
+    });
+
+    await waitFor(() => {
+      expect(store.get(paneLayoutAtomFamily("ws-1"))).toEqual(
+        expect.objectContaining({
+          id: expect.stringMatching(/^split-right-left-/),
+          type: "split",
+          direction: "horizontal",
+          ratio: 0.5,
+          children: [
+            expect.objectContaining({ id: "left", type: "leaf", sessionId: "sess_1" }),
+            expect.objectContaining({ id: "right", type: "leaf", sessionId: "sess_2" }),
+          ],
+        })
+      );
+    });
+
+    expect(sendCommand).toHaveBeenCalledWith(
+      "workspace.uiState.set",
+      expect.objectContaining({
+        workspaceId: "ws-1",
+        uiState: expect.objectContaining({
+          paneLayout: expect.objectContaining({
+            id: expect.stringMatching(/^split-right-left-/),
+            type: "split",
+            direction: "horizontal",
+            ratio: 0.5,
+            children: [
+              expect.objectContaining({ id: "left", type: "leaf", sessionId: "sess_1" }),
+              expect.objectContaining({ id: "right", type: "leaf", sessionId: "sess_2" }),
+            ],
+          }),
+        }),
+      }),
+      undefined
+    );
+  });
+
+  it("registers pane leaf wrappers and swaps sessions through pointer drag", async () => {
+    const sendCommand = vi.fn(async (op: string, args?: Record<string, unknown>) => {
+      if (op === "session.list") {
+        return [
+          {
+            id: "sess_1",
+            workspaceId: "ws-1",
+            terminalId: "term-1",
+            providerId: "claude",
+            state: "running",
+            capability: "full",
+            startedAt: Date.now() - 10_000,
+            lastActiveAt: Date.now() - 1_000,
+          },
+          {
+            id: "sess_2",
+            workspaceId: "ws-1",
+            terminalId: "term-2",
+            providerId: "codex",
+            state: "idle",
+            capability: "full",
+            startedAt: Date.now() - 8_000,
+            lastActiveAt: Date.now() - 500,
+          },
+        ];
+      }
+
+      if (op === "workspace.uiState.set") {
+        return {
+          id: "ws-1",
+          name: "repo",
+          path: "/tmp/repo",
+          targetRuntime: "native",
+          openedAt: 1,
+          lastActiveAt: 1,
+          uiState: args?.uiState,
+        };
+      }
+
+      return undefined;
+    });
+    const { store } = createAgentPaneStore(
+      {
+        id: "root",
+        type: "split",
+        direction: "horizontal",
+        ratio: 0.5,
+        children: [
+          { id: "left", type: "leaf", sessionId: "sess_1" },
+          { id: "right", type: "leaf", sessionId: "sess_2" },
+        ],
+      },
+      sendCommand,
+      "connected"
+    );
+
+    render(
+      <Provider store={store}>
+        <AgentPanes />
+      </Provider>
+    );
+
+    const leftPane = setPaneRect("left", { left: 0, top: 0, width: 220, height: 180 });
+    const rightPane = setPaneRect("right", { left: 260, top: 0, width: 220, height: 180 });
+
+    fireEvent.pointerDown(screen.getByRole("button", { name: "drag-sess_1" }));
+
+    await waitFor(() => {
+      expect(document.body).toHaveClass("is-dragging-pane");
+    });
+
+    fireEvent.pointerMove(window, { clientX: 370, clientY: 90 });
+
+    await waitFor(() => {
+      expect(leftPane).toHaveAttribute("data-pane-dragging", "true");
+      expect(rightPane).toHaveAttribute("data-pane-drop-target", "true");
+      expect(rightPane).toHaveAttribute("data-pane-hover-placement", "center");
+    });
+
+    fireEvent.pointerUp(window, { clientX: 370, clientY: 90 });
+
+    await waitFor(() => {
+      expect(store.get(paneLayoutAtomFamily("ws-1"))).toEqual({
+        id: "root",
+        type: "split",
+        direction: "horizontal",
+        ratio: 0.5,
+        children: [
+          { id: "left", type: "leaf", sessionId: "sess_2" },
+          { id: "right", type: "leaf", sessionId: "sess_1" },
+        ],
+      });
+    });
+
+    expect(document.body).not.toHaveClass("is-dragging-pane");
+  });
+
   it("keeps the remaining draft pane visible after closing the last session pane", async () => {
     const { store } = createAgentPaneStore({
       id: "root",
diff --git a/packages/web/src/features/agent-panes/index.tsx b/packages/web/src/features/agent-panes/index.tsx
index 654f283a..1042c147 100644
--- a/packages/web/src/features/agent-panes/index.tsx
+++ b/packages/web/src/features/agent-panes/index.tsx
@@ -6,11 +6,14 @@
  */
 
 import { useAtomValue } from "jotai";
-import type { FC } from "react";
+import { type FC, useCallback, useEffect, useRef } from "react";
 import { activeWorkspaceAtom } from "../../atoms/workspaces";
 import { EmptyState } from "../../components/ui";
 import { useTranslation } from "../../lib/i18n";
+import type { PaneDropIntent } from "./actions/pane-drag-types";
 import { usePaneActions } from "./actions/use-pane-actions";
+import { usePaneDragController } from "./actions/use-pane-drag-controller";
+import { usePaneDragEnabled } from "./actions/use-pane-drag-enabled";
 import { useSessionActions } from "./actions/use-session-actions";
 import { useWorkspaceSessions } from "./actions/use-workspace-sessions";
 import { type PaneNode, readPaneRatio, writePaneRatio } from "./atoms/pane-layout";
@@ -40,18 +43,41 @@ const emptyStateTitleStyle = {
 
 export const AgentPanes: FC<AgentPanesProps> = ({ hydrateSessions = true }) => {
   const t = useTranslation();
+  const paneDragEnabled = usePaneDragEnabled();
   const workspace = useAtomValue(activeWorkspaceAtom);
   const { workspaceId, sessions, paneLayout } = useWorkspaceSessions(workspace, {
     disabled: !hydrateSessions,
   });
   const paneActions = usePaneActions(workspaceId);
   const sessionActions = useSessionActions();
+  const { insertSessionPaneAtEdge, moveSessionToDraft, swapPaneSessions } = paneActions;
   const hasLayoutSessions = collectSessionIds(paneLayout).length > 0;
   const shouldShowStandaloneDraftLauncher =
     sessions.length === 0 &&
     (hasLayoutSessions ||
       (paneLayout.type === "leaf" && !paneLayout.sessionId && paneLayout.id === "root"));
 
+  const handlePaneDrop = useCallback(
+    (intent: PaneDropIntent) => {
+      if (intent.placement === "center") {
+        if (intent.targetType === "draft") {
+          moveSessionToDraft(intent.sourcePaneId, intent.targetPaneId);
+          return;
+        }
+
+        swapPaneSessions(intent.sourcePaneId, intent.targetPaneId);
+        return;
+      }
+
+      insertSessionPaneAtEdge(intent.sourcePaneId, intent.targetPaneId, intent.placement);
+    },
+    [insertSessionPaneAtEdge, moveSessionToDraft, swapPaneSessions]
+  );
+  const dragController = usePaneDragController({
+    enabled: paneDragEnabled,
+    onDrop: handlePaneDrop,
+  });
+
   if (!workspace) {
     return (
       <div className="agent-panes-empty">
@@ -83,6 +109,8 @@ export const AgentPanes: FC<AgentPanesProps> = ({ hydrateSessions = true }) => {
         onSplitSession={paneActions.splitSessionPane}
         onCloseDraftPane={paneActions.closeDraftPane}
         onAssignSession={paneActions.assignSession}
+        dragController={dragController}
+        onPaneDrop={handlePaneDrop}
         onReplaceWithSession={paneActions.replaceWithSession}
         onCloseSessionCommand={sessionActions.closeSession}
       />
@@ -91,6 +119,7 @@ export const AgentPanes: FC<AgentPanesProps> = ({ hydrateSessions = true }) => {
 };
 
 interface PaneNodeRendererProps {
+  dragController: ReturnType<typeof usePaneDragController>;
   node: PaneNode;
   workspaceId: string;
   onAssignSession: (paneId: string, sessionId: string) => void;
@@ -100,51 +129,172 @@ interface PaneNodeRendererProps {
     sessionId: string,
     paneDisposition?: "draft" | "remove"
   ) => Promise<boolean | void>;
+  onPaneDrop: (intent: PaneDropIntent) => void;
   onReplaceWithSession: (sessionId: string) => void;
   onSplitDraftPane: (paneId: string, direction: "horizontal" | "vertical") => void;
   onSplitSession: (sessionId: string, direction: "horizontal" | "vertical") => void;
 }
 
-/**
- * Recursively render pane tree
- */
-const PaneNodeRenderer: FC<PaneNodeRendererProps> = ({
+type PaneLeafNode = PaneNode & {
+  type: "leaf";
+  sessionId?: string;
+};
+
+interface PaneLeafDragState {
+  isDragging: boolean;
+  isActiveDropTarget: boolean;
+  hoverPlacement: ReturnType<typeof usePaneDragController>["state"]["hoverPlacement"];
+}
+
+function getPaneLeafDragState(
+  dragState: ReturnType<typeof usePaneDragController>["state"],
+  paneId: string
+): PaneLeafDragState {
+  const isActiveDropTarget = dragState.hoverTargetPaneId === paneId;
+
+  return {
+    isDragging: dragState.isDragging,
+    isActiveDropTarget,
+    hoverPlacement: isActiveDropTarget ? dragState.hoverPlacement : null,
+  };
+}
+
+interface PaneLeafProps {
+  dragController: ReturnType<typeof usePaneDragController>;
+  node: PaneLeafNode;
+  workspaceId: string;
+  onAssignSession: (paneId: string, sessionId: string) => void;
+  onCloseDraftPane: (paneId: string) => void;
+  onCloseSession: (sessionId: string) => void;
+  onCloseSessionCommand: (
+    sessionId: string,
+    paneDisposition?: "draft" | "remove"
+  ) => Promise<boolean | void>;
+  onPaneDrop: (intent: PaneDropIntent) => void;
+  onReplaceWithSession: (sessionId: string) => void;
+  onSplitDraftPane: (paneId: string, direction: "horizontal" | "vertical") => void;
+  onSplitSession: (sessionId: string, direction: "horizontal" | "vertical") => void;
+}
+
+const PaneLeaf: FC<PaneLeafProps> = ({
+  dragController,
   node,
   workspaceId,
   onAssignSession,
   onCloseDraftPane,
   onCloseSession,
   onCloseSessionCommand,
+  onPaneDrop,
   onReplaceWithSession,
   onSplitDraftPane,
   onSplitSession,
 }) => {
-  if (node.type === "leaf") {
-    // Render session card or draft launcher
-    if (node.sessionId) {
-      return (
+  const leafRef = useRef<HTMLDivElement | null>(null);
+  const dragState = getPaneLeafDragState(dragController.state, node.id);
+
+  useEffect(() => {
+    const element = leafRef.current;
+
+    if (!element) {
+      return;
+    }
+
+    dragController.registerPane(node.id, {
+      type: node.sessionId ? "session" : "draft",
+      element,
+    });
+
+    return () => {
+      dragController.registerPane(node.id, null);
+    };
+  }, [dragController, node.id, node.sessionId]);
+
+  if (node.sessionId) {
+    return (
+      <div
+        ref={leafRef}
+        className="agent-pane-leaf"
+        data-pane-id={node.id}
+        data-pane-dragging={dragState.isDragging ? "true" : undefined}
+        data-pane-drop-target={dragState.isActiveDropTarget ? "true" : undefined}
+        data-pane-hover-placement={dragState.hoverPlacement ?? undefined}
+      >
         <SessionCard
+          dragState={dragState}
+          paneId={node.id}
+          onPaneDragStart={dragController.startDrag}
+          onPaneDrop={onPaneDrop}
           sessionId={node.sessionId}
           onClose={async () => {
-            onCloseSession(node.sessionId!);
-            await onCloseSessionCommand(node.sessionId!, "draft");
+            onCloseSession(node.sessionId);
+            await onCloseSessionCommand(node.sessionId, "draft");
           }}
           onSplitHorizontal={() => onSplitSession(node.sessionId!, "horizontal")}
           onSplitVertical={() => onSplitSession(node.sessionId!, "vertical")}
         />
-      );
-    } else {
-      return (
-        <DraftLauncher
-          workspaceId={workspaceId}
-          paneId={node.id}
-          onAssignSession={onAssignSession}
-          onClosePane={onCloseDraftPane}
-          onReplaceWithSession={onReplaceWithSession}
-          onSplitPane={onSplitDraftPane}
-        />
-      );
-    }
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={leafRef}
+      className="agent-pane-leaf"
+      data-pane-id={node.id}
+      data-pane-dragging={dragState.isDragging ? "true" : undefined}
+      data-pane-drop-target={dragState.isActiveDropTarget ? "true" : undefined}
+      data-pane-hover-placement={dragState.hoverPlacement ?? undefined}
+    >
+      <DraftLauncher
+        dragState={{
+          isDragging: dragState.isDragging,
+          isActiveDropTarget: dragState.isActiveDropTarget,
+          hoverPlacement: dragState.hoverPlacement === "center" ? "center" : null,
+        }}
+        workspaceId={workspaceId}
+        paneId={node.id}
+        onAssignSession={onAssignSession}
+        onClosePane={onCloseDraftPane}
+        onPaneDrop={onPaneDrop}
+        onReplaceWithSession={onReplaceWithSession}
+        onSplitPane={onSplitDraftPane}
+      />
+    </div>
+  );
+};
+
+/**
+ * Recursively render pane tree
+ */
+const PaneNodeRenderer: FC<PaneNodeRendererProps> = ({
+  dragController,
+  node,
+  workspaceId,
+  onAssignSession,
+  onCloseDraftPane,
+  onCloseSession,
+  onCloseSessionCommand,
+  onPaneDrop,
+  onReplaceWithSession,
+  onSplitDraftPane,
+  onSplitSession,
+}) => {
+  if (node.type === "leaf") {
+    return (
+      <PaneLeaf
+        dragController={dragController}
+        node={node}
+        workspaceId={workspaceId}
+        onAssignSession={onAssignSession}
+        onCloseDraftPane={onCloseDraftPane}
+        onCloseSession={onCloseSession}
+        onCloseSessionCommand={onCloseSessionCommand}
+        onPaneDrop={onPaneDrop}
+        onReplaceWithSession={onReplaceWithSession}
+        onSplitDraftPane={onSplitDraftPane}
+        onSplitSession={onSplitSession}
+      />
+    );
   }
 
   // Render split container
@@ -160,12 +310,14 @@ const PaneNodeRenderer: FC<PaneNodeRendererProps> = ({
       {node.children?.map((child) => (
         <PaneNodeRenderer
           key={child.id}
+          dragController={dragController}
           node={child}
           workspaceId={workspaceId}
           onAssignSession={onAssignSession}
           onCloseDraftPane={onCloseDraftPane}
           onCloseSession={onCloseSession}
           onCloseSessionCommand={onCloseSessionCommand}
+          onPaneDrop={onPaneDrop}
           onReplaceWithSession={onReplaceWithSession}
           onSplitDraftPane={onSplitDraftPane}
           onSplitSession={onSplitSession}
diff --git a/packages/web/src/features/agent-panes/pane-layout-tree.test.ts b/packages/web/src/features/agent-panes/pane-layout-tree.test.ts
index 39fe8c6d..9ab6f97f 100644
--- a/packages/web/src/features/agent-panes/pane-layout-tree.test.ts
+++ b/packages/web/src/features/agent-panes/pane-layout-tree.test.ts
@@ -1,4 +1,4 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import type { PaneNode } from "./atoms/pane-layout";
 import {
   appendSessionToLayout,
@@ -7,9 +7,12 @@ import {
   closeDraftPaneById,
   closePaneBySessionId,
   createFallbackPaneLayout,
+  insertPaneAtEdge,
+  moveSessionToDraftPane,
   removePaneBySessionId,
   splitPaneByPaneId,
   splitPaneBySessionId,
+  swapPaneSessionsByPaneId,
 } from "./pane-layout-tree";
 
 describe("pane-layout-tree", () => {
@@ -104,6 +107,317 @@ describe("pane-layout-tree", () => {
     });
   });
 
+  it("swaps session ids between two session panes without changing pane ids", () => {
+    const layout: PaneNode = {
+      id: "root",
+      type: "split",
+      direction: "horizontal",
+      ratio: 0.5,
+      children: [
+        { id: "left", type: "leaf", sessionId: "sess_1" },
+        { id: "right", type: "leaf", sessionId: "sess_2" },
+      ],
+    };
+
+    expect(swapPaneSessionsByPaneId(layout, "left", "right")).toEqual({
+      id: "root",
+      type: "split",
+      direction: "horizontal",
+      ratio: 0.5,
+      children: [
+        { id: "left", type: "leaf", sessionId: "sess_2" },
+        { id: "right", type: "leaf", sessionId: "sess_1" },
+      ],
+    });
+  });
+
+  it("returns the original tree when swap source pane is a draft leaf", () => {
+    const layout: PaneNode = {
+      id: "root",
+      type: "split",
+      direction: "horizontal",
+      ratio: 0.5,
+      children: [
+        { id: "left", type: "leaf" },
+        { id: "right", type: "leaf", sessionId: "sess_2" },
+      ],
+    };
+
+    expect(swapPaneSessionsByPaneId(layout, "left", "right")).toBe(layout);
+  });
+
+  it("returns the original tree when swap target pane is a draft leaf", () => {
+    const layout: PaneNode = {
+      id: "root",
+      type: "split",
+      direction: "horizontal",
+      ratio: 0.5,
+      children: [
+        { id: "left", type: "leaf", sessionId: "sess_1" },
+        { id: "right", type: "leaf" },
+      ],
+    };
+
+    expect(swapPaneSessionsByPaneId(layout, "left", "right")).toBe(layout);
+  });
+
+  it("returns the original tree when swap source pane is missing", () => {
+    const layout: PaneNode = {
+      id: "root",
+      type: "split",
+      direction: "horizontal",
+      ratio: 0.5,
+      children: [
+        { id: "left", type: "leaf", sessionId: "sess_1" },
+        { id: "right", type: "leaf", sessionId: "sess_2" },
+      ],
+    };
+
+    expect(swapPaneSessionsByPaneId(layout, "missing", "right")).toBe(layout);
+  });
+
+  it("returns the original tree when swap target pane is missing", () => {
+    const layout: PaneNode = {
+      id: "root",
+      type: "split",
+      direction: "horizontal",
+      ratio: 0.5,
+      children: [
+        { id: "left", type: "leaf", sessionId: "sess_1" },
+        { id: "right", type: "leaf", sessionId: "sess_2" },
+      ],
+    };
+
+    expect(swapPaneSessionsByPaneId(layout, "left", "missing")).toBe(layout);
+  });
+
+  it("moves a session into a draft leaf and collapses the old source branch", () => {
+    const layout: PaneNode = {
+      id: "root",
+      type: "split",
+      direction: "horizontal",
+      ratio: 0.5,
+      children: [
+        {
+          id: "left-split",
+          type: "split",
+          direction: "vertical",
+          ratio: 0.5,
+          children: [
+            { id: "left-top", type: "leaf", sessionId: "sess_1" },
+            { id: "left-bottom", type: "leaf", sessionId: "sess_2" },
+          ],
+        },
+        { id: "right", type: "leaf" },
+      ],
+    };
+
+    expect(moveSessionToDraftPane(layout, "left-bottom", "right")).toEqual({
+      id: "root",
+      type: "split",
+      direction: "horizontal",
+      ratio: 0.5,
+      children: [
+        { id: "left-top", type: "leaf", sessionId: "sess_1" },
+        { id: "right", type: "leaf", sessionId: "sess_2" },
+      ],
+    });
+  });
+
+  it("returns the original tree when move source pane is missing", () => {
+    const layout: PaneNode = {
+      id: "root",
+      type: "split",
+      direction: "horizontal",
+      ratio: 0.5,
+      children: [
+        { id: "left", type: "leaf", sessionId: "sess_1" },
+        { id: "right", type: "leaf" },
+      ],
+    };
+
+    expect(moveSessionToDraftPane(layout, "missing", "right")).toBe(layout);
+  });
+
+  it("returns the original tree when move target pane is missing", () => {
+    const layout: PaneNode = {
+      id: "root",
+      type: "split",
+      direction: "horizontal",
+      ratio: 0.5,
+      children: [
+        { id: "left", type: "leaf", sessionId: "sess_1" },
+        { id: "right", type: "leaf" },
+      ],
+    };
+
+    expect(moveSessionToDraftPane(layout, "left", "missing")).toBe(layout);
+  });
+
+  it("returns the original tree when move target pane is a session leaf", () => {
+    const layout: PaneNode = {
+      id: "root",
+      type: "split",
+      direction: "horizontal",
+      ratio: 0.5,
+      children: [
+        { id: "left", type: "leaf", sessionId: "sess_1" },
+        { id: "right", type: "leaf", sessionId: "sess_2" },
+      ],
+    };
+
+    expect(moveSessionToDraftPane(layout, "left", "right")).toBe(layout);
+  });
+
+  it("returns the original tree when move source pane is a draft leaf", () => {
+    const layout: PaneNode = {
+      id: "root",
+      type: "split",
+      direction: "horizontal",
+      ratio: 0.5,
+      children: [
+        { id: "left", type: "leaf" },
+        { id: "right", type: "leaf" },
+      ],
+    };
+
+    expect(moveSessionToDraftPane(layout, "left", "right")).toBe(layout);
+  });
+
+  it("wraps the target leaf with a horizontal split on left insert", () => {
+    const nowSpy = vi.spyOn(Date, "now").mockReturnValue(1700000000000);
+
+    try {
+      const layout: PaneNode = {
+        id: "root",
+        type: "split",
+        direction: "horizontal",
+        ratio: 0.5,
+        children: [
+          { id: "left", type: "leaf", sessionId: "sess_1" },
+          { id: "right", type: "leaf", sessionId: "sess_2" },
+        ],
+      };
+
+      expect(insertPaneAtEdge(layout, "left", "right", "left")).toEqual({
+        id: "split-right-left-1700000000000",
+        type: "split",
+        direction: "horizontal",
+        ratio: 0.5,
+        children: [
+          { id: "left", type: "leaf", sessionId: "sess_1" },
+          { id: "right", type: "leaf", sessionId: "sess_2" },
+        ],
+      });
+    } finally {
+      nowSpy.mockRestore();
+    }
+  });
+
+  it("wraps the target leaf with a horizontal split on right insert", () => {
+    const layout: PaneNode = {
+      id: "root",
+      type: "split",
+      direction: "horizontal",
+      ratio: 0.5,
+      children: [
+        { id: "left", type: "leaf", sessionId: "sess_1" },
+        { id: "right", type: "leaf", sessionId: "sess_2" },
+      ],
+    };
+
+    expect(insertPaneAtEdge(layout, "left", "right", "right")).toEqual({
+      id: expect.stringMatching(/^split-right-right-/),
+      type: "split",
+      direction: "horizontal",
+      ratio: 0.5,
+      children: [
+        { id: "right", type: "leaf", sessionId: "sess_2" },
+        { id: "left", type: "leaf", sessionId: "sess_1" },
+      ],
+    });
+  });
+
+  it("wraps the target leaf with a vertical split on top insert", () => {
+    const layout: PaneNode = {
+      id: "root",
+      type: "split",
+      direction: "horizontal",
+      ratio: 0.5,
+      children: [
+        { id: "left", type: "leaf", sessionId: "sess_1" },
+        { id: "right", type: "leaf", sessionId: "sess_2" },
+      ],
+    };
+
+    expect(insertPaneAtEdge(layout, "left", "right", "top")).toEqual({
+      id: expect.stringMatching(/^split-right-top-/),
+      type: "split",
+      direction: "vertical",
+      ratio: 0.5,
+      children: [
+        { id: "left", type: "leaf", sessionId: "sess_1" },
+        { id: "right", type: "leaf", sessionId: "sess_2" },
+      ],
+    });
+  });
+
+  it("wraps the target leaf with a vertical split on bottom insert", () => {
+    const layout: PaneNode = {
+      id: "root",
+      type: "split",
+      direction: "horizontal",
+      ratio: 0.5,
+      children: [
+        { id: "left", type: "leaf", sessionId: "sess_1" },
+        { id: "right", type: "leaf", sessionId: "sess_2" },
+      ],
+    };
+
+    expect(insertPaneAtEdge(layout, "left", "right", "bottom")).toEqual({
+      id: expect.stringMatching(/^split-right-bottom-/),
+      type: "split",
+      direction: "vertical",
+      ratio: 0.5,
+      children: [
+        { id: "right", type: "leaf", sessionId: "sess_2" },
+        { id: "left", type: "leaf", sessionId: "sess_1" },
+      ],
+    });
+  });
+
+  it("returns the original tree when attempting to drag onto the same pane", () => {
+    const layout: PaneNode = {
+      id: "root",
+      type: "split",
+      direction: "horizontal",
+      ratio: 0.5,
+      children: [
+        { id: "left", type: "leaf", sessionId: "sess_1" },
+        { id: "right", type: "leaf", sessionId: "sess_2" },
+      ],
+    };
+
+    expect(insertPaneAtEdge(layout, "left", "left", "left")).toBe(layout);
+    expect(moveSessionToDraftPane(layout, "left", "left")).toBe(layout);
+    expect(swapPaneSessionsByPaneId(layout, "left", "left")).toBe(layout);
+  });
+
+  it("rejects draft edge insertion and preserves the input layout", () => {
+    const layout: PaneNode = {
+      id: "root",
+      type: "split",
+      direction: "horizontal",
+      ratio: 0.5,
+      children: [
+        { id: "left", type: "leaf", sessionId: "sess_1" },
+        { id: "right", type: "leaf" },
+      ],
+    };
+
+    expect(insertPaneAtEdge(layout, "left", "right", "right")).toBe(layout);
+  });
+
   it("splits a draft pane by pane id without relying on a session id marker", () => {
     const layout: PaneNode = {
       id: "root",
diff --git a/packages/web/src/features/agent-panes/pane-layout-tree.ts b/packages/web/src/features/agent-panes/pane-layout-tree.ts
index 534ee1b1..bf42f6fe 100644
--- a/packages/web/src/features/agent-panes/pane-layout-tree.ts
+++ b/packages/web/src/features/agent-panes/pane-layout-tree.ts
@@ -1,6 +1,7 @@
 import type { PaneNode } from "./atoms/pane-layout";
 
 type PaneDirection = NonNullable<PaneNode["direction"]>;
+type PaneDropPlacement = "left" | "right" | "top" | "bottom" | "center";
 
 function createDraftLeaf(id: string): PaneNode {
   return {
@@ -17,6 +18,101 @@ function createSessionLeaf(id: string, sessionId: string): PaneNode {
   };
 }
 
+function createDragSplitId(
+  targetPaneId: string,
+  placement: Exclude<PaneDropPlacement, "center">
+): string {
+  return `split-${targetPaneId}-${placement}-${Date.now()}`;
+}
+
+function findLeafByPaneId(node: PaneNode, paneId: string): PaneNode | null {
+  if (node.type === "leaf") {
+    return node.id === paneId ? node : null;
+  }
+
+  for (const child of node.children ?? []) {
+    const match = findLeafByPaneId(child, paneId);
+    if (match) {
+      return match;
+    }
+  }
+
+  return null;
+}
+
+function replaceLeafByPaneId(
+  node: PaneNode,
+  paneId: string,
+  replace: (leaf: PaneNode) => PaneNode
+): PaneNode {
+  if (node.type === "leaf") {
+    if (node.id !== paneId) {
+      return node;
+    }
+
+    return replace(node);
+  }
+
+  const children = node.children ?? [];
+  let changed = false;
+  const nextChildren = children.map((child) => {
+    const nextChild = replaceLeafByPaneId(child, paneId, replace);
+    if (nextChild !== child) {
+      changed = true;
+    }
+    return nextChild;
+  });
+
+  if (!changed) {
+    return node;
+  }
+
+  return {
+    ...node,
+    children: nextChildren,
+  };
+}
+
+function removeLeafByPaneId(node: PaneNode, paneId: string): PaneNode | null {
+  if (node.type === "leaf") {
+    if (node.id === paneId) {
+      return null;
+    }
+
+    return node;
+  }
+
+  const children = node.children ?? [];
+  let changed = false;
+  const nextChildren: PaneNode[] = [];
+  for (const child of children) {
+    const nextChild = removeLeafByPaneId(child, paneId);
+    if (nextChild !== child) {
+      changed = true;
+    }
+    if (nextChild !== null) {
+      nextChildren.push(nextChild);
+    }
+  }
+
+  if (!changed) {
+    return node;
+  }
+
+  if (nextChildren.length === 1) {
+    return nextChildren[0]!;
+  }
+
+  if (nextChildren.length === 0) {
+    return null;
+  }
+
+  return {
+    ...node,
+    children: nextChildren,
+  };
+}
+
 export function splitPaneByPaneId(
   node: PaneNode,
   paneId: string,
@@ -165,6 +261,84 @@ export function replaceSessionInPane(
   };
 }
 
+export function swapPaneSessionsByPaneId(
+  node: PaneNode,
+  sourcePaneId: string,
+  targetPaneId: string
+): PaneNode {
+  if (sourcePaneId === targetPaneId) {
+    return node;
+  }
+
+  const source = findLeafByPaneId(node, sourcePaneId);
+  const target = findLeafByPaneId(node, targetPaneId);
+  if (!source?.sessionId || !target?.sessionId) {
+    return node;
+  }
+
+  const withSourceSwapped = replaceLeafByPaneId(node, sourcePaneId, (leaf) => ({
+    ...leaf,
+    sessionId: target.sessionId,
+  }));
+
+  return replaceLeafByPaneId(withSourceSwapped, targetPaneId, (leaf) => ({
+    ...leaf,
+    sessionId: source.sessionId!,
+  }));
+}
+
+export function moveSessionToDraftPane(
+  node: PaneNode,
+  sourcePaneId: string,
+  targetPaneId: string
+): PaneNode {
+  if (sourcePaneId === targetPaneId) {
+    return node;
+  }
+
+  const source = findLeafByPaneId(node, sourcePaneId);
+  const target = findLeafByPaneId(node, targetPaneId);
+  if (!source?.sessionId || !target || target.sessionId) {
+    return node;
+  }
+
+  const stripped = removeLeafByPaneId(node, sourcePaneId) ?? { id: node.id, type: "leaf" };
+  return assignSessionToPane(stripped, targetPaneId, source.sessionId);
+}
+
+export function insertPaneAtEdge(
+  node: PaneNode,
+  sourcePaneId: string,
+  targetPaneId: string,
+  placement: Exclude<PaneDropPlacement, "center">
+): PaneNode {
+  if (sourcePaneId === targetPaneId) {
+    return node;
+  }
+
+  const source = findLeafByPaneId(node, sourcePaneId);
+  const target = findLeafByPaneId(node, targetPaneId);
+  if (!source?.sessionId || !target?.sessionId) {
+    return node;
+  }
+
+  const stripped = removeLeafByPaneId(node, sourcePaneId) ?? { id: node.id, type: "leaf" };
+  const incomingLeaf: PaneNode = {
+    id: source.id,
+    type: "leaf",
+    sessionId: source.sessionId,
+  };
+
+  return replaceLeafByPaneId(stripped, targetPaneId, (leaf) => ({
+    id: createDragSplitId(leaf.id, placement),
+    type: "split",
+    direction: placement === "left" || placement === "right" ? "horizontal" : "vertical",
+    ratio: 0.5,
+    children:
+      placement === "left" || placement === "top" ? [incomingLeaf, leaf] : [leaf, incomingLeaf],
+  }));
+}
+
 export function closePaneBySessionId(node: PaneNode, sessionId: string): PaneNode {
   // Handle draft pane closure: __draft__<paneId>
   if (sessionId.startsWith("__draft__")) {
diff --git a/packages/web/src/features/agent-panes/views/shared/draft-launcher.test.tsx b/packages/web/src/features/agent-panes/views/shared/draft-launcher.test.tsx
index eb7832d4..4772044f 100644
--- a/packages/web/src/features/agent-panes/views/shared/draft-launcher.test.tsx
+++ b/packages/web/src/features/agent-panes/views/shared/draft-launcher.test.tsx
@@ -124,6 +124,32 @@ describe("DraftLauncher", () => {
     expect(screen.getByText("Select Agent")).toBeInTheDocument();
   });
 
+  it("renders a draft drop label when pane drag hover is active", () => {
+    const store = createStore();
+
+    store.set(localeAtom, "en");
+    store.set(wsClientAtom, {
+      sendCommand: vi.fn(),
+      subscribe: vi.fn(() => () => {}),
+    } as never);
+
+    render(
+      <Provider store={store}>
+        <DraftLauncher
+          workspaceId="ws-123"
+          paneId="pane-1"
+          dragState={{
+            isDragging: true,
+            isActiveDropTarget: true,
+            hoverPlacement: "center",
+          }}
+        />
+      </Provider>
+    );
+
+    expect(screen.getByText("Move here")).toBeInTheDocument();
+  });
+
   it("preserves session-start intent in diagnostics links for blocked providers", () => {
     mockUseProviderLauncher.mockReturnValue({
       states: {
diff --git a/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx b/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx
index 9331751b..57d9e3ec 100644
--- a/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx
+++ b/packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx
@@ -7,22 +7,33 @@ import { sessionsAtom } from "../../../../atoms/sessions";
 import { Button, IconButton, StatusDot, Tag, ThemedIcon, Tooltip } from "../../../../components/ui";
 import { useTranslation } from "../../../../lib/i18n";
 import { buildDiagnosticsPath } from "../../../diagnostics";
+import type { PaneDropIntent } from "../../actions/pane-drag-types";
 import { type ProviderId, useProviderLauncher } from "../../actions/use-provider-launcher";
 
+interface DraftLauncherDragState {
+  isDragging: boolean;
+  isActiveDropTarget: boolean;
+  hoverPlacement: "center" | null;
+}
+
 interface DraftLauncherProps {
+  dragState?: DraftLauncherDragState;
   workspaceId: string;
   paneId?: string;
   onAssignSession?: (paneId: string, sessionId: string) => void;
   onClosePane?: (paneId: string) => void;
+  onPaneDrop?: (intent: PaneDropIntent) => void;
   onReplaceWithSession?: (sessionId: string) => void;
   onSplitPane?: (paneId: string, direction: "horizontal" | "vertical") => void;
 }
 
 export const DraftLauncher: FC<DraftLauncherProps> = ({
+  dragState,
   workspaceId,
   paneId,
   onAssignSession,
   onClosePane,
+  onPaneDrop: _onPaneDrop,
   onReplaceWithSession,
   onSplitPane,
 }) => {
@@ -135,7 +146,16 @@ export const DraftLauncher: FC<DraftLauncherProps> = ({
   };
 
   return (
-    <div className="session-card agent-pane">
+    <div
+      className={`session-card agent-pane${dragState?.isDragging ? " draft-launcher--dragging" : ""}${dragState?.isActiveDropTarget ? " draft-launcher--drop-target" : ""}`}
+      data-pane-id={paneId}
+    >
+      {dragState?.isActiveDropTarget ? (
+        <div className="pane-drop-overlay pane-drop-overlay--draft">
+          <div className="pane-drop-overlay__center">Move here</div>
+        </div>
+      ) : null}
+
       <div className="session-header">
         <div className="session-header-left">
           <StatusDot tone="neutral" className="session-dot session-dot-idle" />
diff --git a/packages/web/src/features/agent-panes/views/shared/pane-layout.test.tsx b/packages/web/src/features/agent-panes/views/shared/pane-layout.test.tsx
index cd492dd9..c959630f 100644
--- a/packages/web/src/features/agent-panes/views/shared/pane-layout.test.tsx
+++ b/packages/web/src/features/agent-panes/views/shared/pane-layout.test.tsx
@@ -25,6 +25,32 @@ describe("PaneLayout", () => {
     document.body.classList.remove("is-resizing-panels");
   });
 
+  it("renders direction-specific divider classes", () => {
+    const { container, rerender } = render(
+      <PaneLayout splitId="split-a" direction="horizontal" ratio={0.5}>
+        <div>left</div>
+        <div>right</div>
+      </PaneLayout>
+    );
+
+    const horizontalDivider = container.querySelector('[role="separator"]');
+
+    expect(horizontalDivider).toHaveClass("pane-layout-divider", "pane-layout-horizontal-divider");
+    expect(horizontalDivider).toHaveAttribute("aria-orientation", "vertical");
+
+    rerender(
+      <PaneLayout splitId="split-b" direction="vertical" ratio={0.5}>
+        <div>top</div>
+        <div>bottom</div>
+      </PaneLayout>
+    );
+
+    const verticalDivider = container.querySelector('[role="separator"]');
+
+    expect(verticalDivider).toHaveClass("pane-layout-divider", "pane-layout-vertical-divider");
+    expect(verticalDivider).toHaveAttribute("aria-orientation", "horizontal");
+  });
+
   it("resets the local ratio when the split identity changes", () => {
     mockContainerRect(1000);
 
diff --git a/packages/web/src/features/agent-panes/views/shared/pane-layout.tsx b/packages/web/src/features/agent-panes/views/shared/pane-layout.tsx
index c831ba16..b2434f33 100644
--- a/packages/web/src/features/agent-panes/views/shared/pane-layout.tsx
+++ b/packages/web/src/features/agent-panes/views/shared/pane-layout.tsx
@@ -92,6 +92,10 @@ export const PaneLayout: FC<PaneLayoutProps> = ({
     direction === "horizontal"
       ? { gridTemplateColumns: `${currentRatio * 100}% 0px ${(1 - currentRatio) * 100}%` }
       : { gridTemplateRows: `${currentRatio * 100}% 0px ${(1 - currentRatio) * 100}%` };
+  const dividerClassName =
+    direction === "horizontal"
+      ? "pane-layout-divider pane-layout-horizontal-divider"
+      : "pane-layout-divider pane-layout-vertical-divider";
 
   return (
     <div
@@ -101,7 +105,7 @@ export const PaneLayout: FC<PaneLayoutProps> = ({
     >
       <div className="pane-layout-child">{first}</div>
       <div
-        className="pane-layout-divider"
+        className={dividerClassName}
         onMouseDown={handleMouseDown}
         role="separator"
         aria-orientation={direction === "horizontal" ? "vertical" : "horizontal"}
diff --git a/packages/web/src/features/agent-panes/views/shared/session-card.tsx b/packages/web/src/features/agent-panes/views/shared/session-card.tsx
index 514d48fb..728808af 100644
--- a/packages/web/src/features/agent-panes/views/shared/session-card.tsx
+++ b/packages/web/src/features/agent-panes/views/shared/session-card.tsx
@@ -7,7 +7,7 @@
 
 import type { Session, SessionState } from "@coder-studio/core";
 import { useAtomValue, useSetAtom } from "jotai";
-import { FlipHorizontal, FlipVertical, X } from "lucide-react";
+import { FlipHorizontal, FlipVertical, GripVertical, X } from "lucide-react";
 import type { FC, ReactNode } from "react";
 import { useEffect, useRef, useState } from "react";
 import { pendingFocusSessionAtom } from "../../../../atoms/app-ui";
@@ -22,18 +22,31 @@ import { SupervisorCard } from "../../../supervisor/views/shared/supervisor-card
 import { XtermHost } from "../../../terminal-panel/views/shared/xterm-host";
 import { usePersistWorkspaceLastViewedTarget } from "../../../workspace/actions/use-persist-workspace-last-viewed-target";
 import { useWorkspaceUiStatePersistence } from "../../../workspace/actions/use-workspace-ui-state-persistence";
+import type { PaneDropIntent, PaneDropPlacement } from "../../actions/pane-drag-types";
 import { usePaneActions } from "../../actions/use-pane-actions";
+import type { PaneDragSourceSnapshot } from "../../actions/use-pane-drag-controller";
+import { usePaneDragEnabled } from "../../actions/use-pane-drag-enabled";
 import { useSessionActions } from "../../actions/use-session-actions";
 
 type SessionCardAction = () => void | Promise<void>;
 
+interface SessionCardDragState {
+  isDragging: boolean;
+  isActiveDropTarget: boolean;
+  hoverPlacement: PaneDropPlacement | null;
+}
+
 interface SessionCardProps {
+  paneId?: string;
+  dragState?: SessionCardDragState;
   sessionId: string;
   showHeaderActions?: boolean;
   showSupervisorInline?: boolean;
   terminalReadOnlyOverride?: boolean;
   headerAccessory?: ReactNode;
   onClose?: SessionCardAction;
+  onPaneDragStart?: (source: PaneDragSourceSnapshot) => void;
+  onPaneDrop?: (intent: PaneDropIntent) => void;
   onSplitHorizontal?: SessionCardAction;
   onSplitVertical?: SessionCardAction;
 }
@@ -46,12 +59,16 @@ interface SessionCardProps {
  *   - Terminal area (xterm.js)
  */
 export const SessionCard: FC<SessionCardProps> = ({
+  paneId,
+  dragState,
   sessionId,
   showHeaderActions = true,
   showSupervisorInline = true,
   terminalReadOnlyOverride,
   headerAccessory,
   onClose,
+  onPaneDragStart,
+  onPaneDrop: _onPaneDrop,
   onSplitHorizontal,
   onSplitVertical,
 }) => {
@@ -64,6 +81,7 @@ export const SessionCard: FC<SessionCardProps> = ({
   );
   const pendingFocus = useAtomValue(pendingFocusSessionAtom);
   const setPendingFocus = useSetAtom(pendingFocusSessionAtom);
+  const supportsPaneDrag = usePaneDragEnabled();
 
   const cardRef = useRef<HTMLDivElement | null>(null);
   const [highlight, setHighlight] = useState(false);
@@ -99,6 +117,7 @@ export const SessionCard: FC<SessionCardProps> = ({
   const terminalReadOnly = terminalReadOnlyOverride ?? !isSessionInteractive(session.state);
   const isActiveSession = workspace?.uiState.activeSessionId === session.id;
   const isRunning = session.state === "running";
+  const dragOverlayPlacement = dragState?.isActiveDropTarget ? dragState.hoverPlacement : null;
   const handleClosedSessionContinue = async () => {
     const createResult = await dispatch<Session>("session.create", {
       workspaceId: session.workspaceId,
@@ -160,10 +179,19 @@ export const SessionCard: FC<SessionCardProps> = ({
   return (
     <div
       ref={cardRef}
-      className={`session-card agent-pane${isActiveSession ? " session-card--active" : ""}${highlight ? " session-card--focus-pulse" : ""}${isRunning ? " session-card--running" : ""}`}
+      className={`session-card agent-pane${isActiveSession ? " session-card--active" : ""}${highlight ? " session-card--focus-pulse" : ""}${isRunning ? " session-card--running" : ""}${dragState?.isDragging ? " session-card--dragging" : ""}${dragState?.isActiveDropTarget ? " session-card--drop-target" : ""}`}
+      data-pane-id={paneId}
       data-session-id={sessionId}
       onClick={handleCardClick}
     >
+      {dragOverlayPlacement ? (
+        <div className={`pane-drop-overlay pane-drop-overlay--${dragOverlayPlacement}`}>
+          {dragOverlayPlacement === "center" ? (
+            <div className="pane-drop-overlay__center">Swap</div>
+          ) : null}
+        </div>
+      ) : null}
+
       <PanelHeader
         className={isRunning ? "session-header--running" : undefined}
         title={sessionTitle}
@@ -198,6 +226,35 @@ export const SessionCard: FC<SessionCardProps> = ({
 
               {showHeaderActions ? (
                 <div className="session-header-actions">
+                  {supportsPaneDrag ? (
+                    <Tooltip content="Drag pane">
+                      <IconButton
+                        aria-label="Drag pane"
+                        className="session-action-btn session-action-btn-drag"
+                        icon={<GripVertical size={13} />}
+                        onPointerDown={(event) => {
+                          event.preventDefault();
+                          event.stopPropagation();
+
+                          if (event.pointerType === "touch") {
+                            return;
+                          }
+
+                          if (!paneId) {
+                            return;
+                          }
+
+                          onPaneDragStart?.({
+                            paneId,
+                            sessionId: session.id,
+                            title: sessionTitle,
+                            providerLabel,
+                          });
+                        }}
+                        size="sm"
+                      />
+                    </Tooltip>
+                  ) : null}
                   <Tooltip content="Split horizontal">
                     <IconButton
                       aria-label="Split horizontal"
diff --git a/packages/web/src/features/settings/components/about-settings.test.tsx b/packages/web/src/features/settings/components/about-settings.test.tsx
index e92eef76..8bf1e3ab 100644
--- a/packages/web/src/features/settings/components/about-settings.test.tsx
+++ b/packages/web/src/features/settings/components/about-settings.test.tsx
@@ -199,4 +199,29 @@ describe("AboutSettings", () => {
     expect(screen.getByRole("tab", { name: "12 小时" })).toBeDisabled();
     expect(screen.getByRole("tab", { name: "24 小时" })).toBeDisabled();
   });
+
+  it("disables update actions while a check is already in progress", () => {
+    renderAboutSettings({
+      updateState: {
+        version: 1,
+        currentVersion: "0.4.0",
+        latestVersion: "0.5.0",
+        availability: "update_available",
+        updateStatus: "checking",
+        lastCheckedAt: 123,
+        targetVersion: null,
+        startedAt: null,
+        finishedAt: null,
+        requiresManualStep: false,
+        manualCommand: null,
+        errorSummary: null,
+        supported: true,
+        installKind: "global_npm",
+        unsupportedReason: null,
+      },
+    });
+
+    expect(screen.getByRole("button", { name: "立即检查" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "立即更新" })).toBeDisabled();
+  });
 });
diff --git a/packages/web/src/features/settings/components/about-settings.tsx b/packages/web/src/features/settings/components/about-settings.tsx
index a0fb4fb7..6bebe2f8 100644
--- a/packages/web/src/features/settings/components/about-settings.tsx
+++ b/packages/web/src/features/settings/components/about-settings.tsx
@@ -258,6 +258,7 @@ export function AboutSettings({
             }}
             disabled={
               loading !== null ||
+              updateState?.updateStatus === "checking" ||
               updateState?.updateStatus === "installing" ||
               updateState?.updateStatus === "restarting"
             }
@@ -272,6 +273,7 @@ export function AboutSettings({
               loading !== null ||
               !updateState?.supported ||
               updateState?.availability !== "update_available" ||
+              updateState.updateStatus === "checking" ||
               updateState.updateStatus === "installing" ||
               updateState.updateStatus === "restarting" ||
               Boolean(updateState.manualCommand)
diff --git a/packages/web/src/features/terminal-panel/__tests__/xterm-host.test.tsx b/packages/web/src/features/terminal-panel/__tests__/xterm-host.test.tsx
index cc6b2306..c1dd9f45 100644
--- a/packages/web/src/features/terminal-panel/__tests__/xterm-host.test.tsx
+++ b/packages/web/src/features/terminal-panel/__tests__/xterm-host.test.tsx
@@ -174,6 +174,18 @@ function expectTerminalWriteData(data: Uint8Array | string) {
   expect(mockTerminal.write.mock.calls.some(([written]) => written === data)).toBe(true);
 }
 
+function expectAppliedTerminalTheme(theme: unknown, themeId: string) {
+  const expectedTheme = getThemeById(themeId).terminalTheme;
+
+  expect(theme).toEqual(
+    expect.objectContaining({
+      background: "#00000000",
+      foreground: expectedTheme.foreground,
+      cursor: expectedTheme.cursor,
+    })
+  );
+}
+
 interface MockBufferLine {
   isWrapped?: boolean;
   translateToString(trimRight?: boolean): string;
@@ -1211,11 +1223,12 @@ describe("XtermHost", () => {
     expect(Terminal).toHaveBeenCalledWith(
       expect.objectContaining({
         theme: expect.objectContaining({
-          ...getThemeById("mint-light").terminalTheme,
           background: "#00000000",
         }),
       })
     );
+    const lastTheme = vi.mocked(Terminal).mock.calls.at(-1)?.[0]?.theme;
+    expectAppliedTerminalTheme(lastTheme, "mint-light");
   });
 
   it("promotes the existing hydration request when active session changes", async () => {
@@ -2714,12 +2727,10 @@ describe("XtermHost", () => {
     expect(Terminal).toHaveBeenCalledWith(
       expect.objectContaining({
         allowTransparency: true,
-        theme: expect.objectContaining({
-          ...getThemeById("mint-dark").terminalTheme,
-          background: "#00000000",
-        }),
       })
     );
+    const lastTheme = vi.mocked(Terminal).mock.calls.at(-1)?.[0]?.theme;
+    expectAppliedTerminalTheme(lastTheme, "mint-dark");
   });
 
   it("creates xterm instance with the mint-light palette when ui theme is mint-light", async () => {
@@ -2736,12 +2747,10 @@ describe("XtermHost", () => {
     expect(Terminal).toHaveBeenCalledWith(
       expect.objectContaining({
         allowTransparency: true,
-        theme: expect.objectContaining({
-          ...getThemeById("mint-light").terminalTheme,
-          background: "#00000000",
-        }),
       })
     );
+    const lastTheme = vi.mocked(Terminal).mock.calls.at(-1)?.[0]?.theme;
+    expectAppliedTerminalTheme(lastTheme, "mint-light");
   });
 
   it("uses a transparent xterm background when glass surfaces are enabled", async () => {
@@ -2769,14 +2778,9 @@ describe("XtermHost", () => {
       </Provider>
     );
 
-    expect(Terminal).toHaveBeenCalledWith(
-      expect.objectContaining({
-        theme: expect.objectContaining({
-          ...getThemeById("mint-dark").terminalTheme,
-          background: "#00000000",
-        }),
-      })
-    );
+    expect(Terminal).toHaveBeenCalledWith(expect.objectContaining({}));
+    const lastTheme = vi.mocked(Terminal).mock.calls.at(-1)?.[0]?.theme;
+    expectAppliedTerminalTheme(lastTheme, "mint-dark");
   });
 
   it("updates the live xterm theme when the ui theme changes to graphite-light", async () => {
@@ -2794,14 +2798,7 @@ describe("XtermHost", () => {
     });
 
     await waitFor(() => {
-      expect(mockTerminal.options).toEqual(
-        expect.objectContaining({
-          theme: expect.objectContaining({
-            ...getThemeById("graphite-light").terminalTheme,
-            background: "#00000000",
-          }),
-        })
-      );
+      expectAppliedTerminalTheme(mockTerminal.options.theme, "graphite-light");
     });
   });
 
@@ -2835,14 +2832,7 @@ describe("XtermHost", () => {
     });
 
     await waitFor(() => {
-      expect(mockTerminal.options).toEqual(
-        expect.objectContaining({
-          theme: expect.objectContaining({
-            ...getThemeById("graphite-light").terminalTheme,
-            background: "#00000000",
-          }),
-        })
-      );
+      expectAppliedTerminalTheme(mockTerminal.options.theme, "graphite-light");
     });
   });
 
@@ -2903,14 +2893,7 @@ describe("XtermHost", () => {
       );
     });
 
-    expect(mockTerminal.options).toEqual(
-      expect.objectContaining({
-        theme: expect.objectContaining({
-          ...getThemeById("mint-light").terminalTheme,
-          background: "#00000000",
-        }),
-      })
-    );
+    expectAppliedTerminalTheme(mockTerminal.options.theme, "mint-light");
   });
 
   it("normalizes rendered ANSI cell backgrounds to the active surface opacity", async () => {
@@ -2977,14 +2960,9 @@ describe("XtermHost", () => {
       </Provider>
     );
 
-    expect(Terminal).toHaveBeenCalledWith(
-      expect.objectContaining({
-        theme: expect.objectContaining({
-          ...getThemeById("hc-dark").terminalTheme,
-          background: "#00000000",
-        }),
-      })
-    );
+    expect(Terminal).toHaveBeenCalledWith(expect.objectContaining({}));
+    const lastTheme = vi.mocked(Terminal).mock.calls.at(-1)?.[0]?.theme;
+    expectAppliedTerminalTheme(lastTheme, "hc-dark");
   });
 
   it("uses JetBrains Mono font family", async () => {
diff --git a/packages/web/src/styles/base.css b/packages/web/src/styles/base.css
index e070ad40..c2e0ff12 100644
--- a/packages/web/src/styles/base.css
+++ b/packages/web/src/styles/base.css
@@ -26,7 +26,7 @@ body {
   line-height: var(--type-body-3-line-height);
   font-weight: var(--type-body-3-weight);
   color: var(--text-primary);
-  background-color: var(--bg-page);
+  background-color: var(--surface-page);
   background-image: none;
   overflow: hidden;
 }
@@ -128,13 +128,13 @@ samp {
 }
 
 code {
-  background-color: var(--bg-hover);
+  background-color: var(--surface-hover);
   padding: var(--sp-1) var(--sp-2);
   border-radius: var(--radius-sm);
 }
 
 pre {
-  background-color: var(--bg-surface);
+  background-color: var(--surface-panel);
   padding: var(--sp-4);
   border-radius: var(--radius-md);
   overflow-x: auto;
@@ -142,13 +142,13 @@ pre {
 
 /* ========== Links ========== */
 a {
-  color: var(--accent-blue);
+  color: var(--text-link);
   text-decoration: none;
   transition: color var(--duration-fast) var(--ease-out);
 }
 
 a:hover {
-  color: color-mix(in srgb, var(--accent-blue), white 20%);
+  color: var(--text-link-hover);
 }
 
 /* ========== Focus States ========== */
@@ -163,7 +163,7 @@ a:hover {
 
 /* ========== Selection ========== */
 ::selection {
-  background-color: var(--accent-blue);
+  background-color: var(--text-link);
   color: var(--text-inverse);
 }
 
@@ -171,9 +171,13 @@ a:hover {
 ::-webkit-scrollbar {
   width: var(--scrollbar-width);
   height: var(--scrollbar-width);
+  background: var(--scrollbar-track);
 }
 
-::-webkit-scrollbar-track {
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-track-piece,
+::-webkit-scrollbar-button,
+::-webkit-scrollbar-corner {
   background: var(--scrollbar-track);
 }
 
@@ -218,8 +222,8 @@ select {
   line-height: var(--type-body-3-line-height);
   font-weight: var(--type-body-3-weight);
   color: var(--text-primary);
-  background-color: var(--bg-input);
-  border: 1px solid var(--border);
+  background-color: var(--field-bg);
+  border: 1px solid var(--field-border);
   border-radius: var(--radius-md);
   padding: var(--sp-3);
   transition: border-color var(--duration-fast) var(--ease-out);
@@ -294,13 +298,13 @@ textarea::placeholder {
   color: var(--text-tertiary);
 }
 .text-success {
-  color: var(--color-success);
+  color: var(--status-success-fg);
 }
 .text-warning {
-  color: var(--color-warning);
+  color: var(--status-warning-fg);
 }
 .text-error {
-  color: var(--color-error);
+  color: var(--status-danger-fg);
 }
 
 /* Icon utilities */
@@ -411,7 +415,7 @@ textarea::placeholder {
 }
 
 .icon-surface-warning {
-  background: var(--state-warning-bg);
+  background: var(--icon-surface-warning);
 }
 
 .themed-icon--surface-warning {
@@ -651,7 +655,7 @@ textarea::placeholder {
   height: 100dvh;
   display: flex;
   flex-direction: column;
-  background: var(--surface-page-bg);
+  background: var(--surface-page);
   color: var(--text-primary);
   overflow: hidden;
   isolation: isolate;
@@ -676,11 +680,8 @@ textarea::placeholder {
   position: absolute;
   inset: 0;
   z-index: -1;
-  background: color-mix(
-    in srgb,
-    var(--surface-page-bg) calc(var(--app-bg-dim, 0) * 100%),
-    transparent
-  );
+  background: var(--surface-page);
+  opacity: var(--app-bg-dim, 0);
   pointer-events: none;
 }
 
@@ -695,7 +696,7 @@ textarea::placeholder {
   justify-content: center;
   gap: var(--sp-2);
   padding: 0 var(--sp-4);
-  background: var(--accent-amber);
+  background: var(--status-warning-fg);
   color: var(--text-inverse);
   font-size: var(--type-body-6-size);
   line-height: var(--type-body-6-line-height);
@@ -739,7 +740,7 @@ textarea::placeholder {
 }
 
 .connection-banner--error {
-  background: var(--color-error);
+  background: var(--status-danger-fg);
 }
 
 .main-content {
@@ -754,25 +755,17 @@ textarea::placeholder {
   display: grid;
   place-items: center;
   padding: var(--sp-8);
-  background: color-mix(
-    in srgb,
-    var(--surface-page-bg) calc(var(--app-surface-opacity, 0.96) * 100%),
-    transparent
-  );
-  backdrop-filter: var(--app-surface-backdrop-filter, none);
+  background: var(--material-shell-page);
+  backdrop-filter: var(--material-backdrop-filter);
 }
 
 .app-loading-card {
   width: min(520px, 100%);
   padding: var(--sp-8);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-overlay);
-  background: color-mix(
-    in srgb,
-    var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.96) * 100%),
-    transparent
-  );
-  backdrop-filter: var(--app-surface-backdrop-filter, none);
+  background: var(--material-overlay);
+  backdrop-filter: var(--material-backdrop-filter);
   box-shadow: var(--surface-overlay-shadow);
 }
 
diff --git a/packages/web/src/styles/base.theme.test.ts b/packages/web/src/styles/base.theme.test.ts
index 6e48b3da..785a868a 100644
--- a/packages/web/src/styles/base.theme.test.ts
+++ b/packages/web/src/styles/base.theme.test.ts
@@ -30,16 +30,27 @@ function getRuleBlock(selector: string) {
 }
 
 describe("base.css theme-sensitive shells", () => {
-  it("keeps the app loading shell on theme tokens instead of dark-only gradients", () => {
+  it("keeps the app loading shell on semantic material tokens", () => {
     const shell = getRuleBlock(".app-loading-shell");
     const card = getRuleBlock(".app-loading-card");
 
-    expect(shell).toContain("var(--surface-page-bg)");
-    expect(shell).toContain("backdrop-filter: var(--app-surface-backdrop-filter, none)");
-    expect(card).toContain("var(--surface-overlay-bg)");
-    expect(card).toContain("backdrop-filter: var(--app-surface-backdrop-filter, none)");
+    expect(shell).toContain("background: var(--material-shell-page)");
+    expect(shell).toContain("backdrop-filter: var(--material-backdrop-filter)");
+    expect(card).toContain("background: var(--material-overlay)");
+    expect(card).toContain("backdrop-filter: var(--material-backdrop-filter)");
     expect(card).toContain("box-shadow: var(--surface-overlay-shadow)");
     expect(card).toContain("border-radius: var(--radius-overlay)");
+    expect(shell).not.toContain("--app-surface-opacity");
+    expect(card).not.toContain("--app-surface-backdrop-filter");
+  });
+
+  it("maps links and themed icons onto semantic/domain tokens", () => {
+    expect(getRuleBlock("a")).toContain("color: var(--text-link)");
+    expect(getRuleBlock("a:hover")).toContain("color: var(--text-link-hover)");
+    expect(getRuleBlock(".themed-icon--tone-warning")).toContain("color: var(--icon-warning)");
+    expect(getRuleBlock(".themed-icon--surface-info")).toContain(
+      "background: var(--icon-surface-info)"
+    );
   });
 
   it("defines shared icon tone and surface utilities", () => {
@@ -47,49 +58,68 @@ describe("base.css theme-sensitive shells", () => {
     const surface = getRuleBlock(".icon-surface-warning");
     const chip = getRuleBlock(".icon-chip");
     const themedIcon = getRuleBlock(".themed-icon");
-    const themedTone = getRuleBlock(".themed-icon--tone-warning");
-    const themedSurface = getRuleBlock(".themed-icon--surface-info");
 
     expect(tone).toContain("color: var(--icon-secondary)");
-    expect(surface).toContain("background: var(--state-warning-bg)");
+    expect(surface).toContain("background: var(--icon-surface-warning)");
     expect(chip).toContain("display: inline-flex");
     expect(chip).toContain("align-items: center");
     expect(chip).toContain("justify-content: center");
     expect(chip).toContain("border-radius: var(--radius-control)");
     expect(themedIcon).toContain("display: inline-flex");
     expect(themedIcon).toContain("line-height: 0");
-    expect(themedTone).toContain("color: var(--icon-warning)");
-    expect(themedSurface).toContain("background: var(--icon-surface-info)");
   });
 
   it("routes focus and shell chrome through semantic foundation tokens", () => {
     expect(getRuleBlock(":focus-visible")).toContain(
       "outline: var(--state-focus-ring-width) solid var(--state-focus-ring-color)"
     );
-    expect(getRuleBlock(".app-loading-shell")).toContain("var(--surface-page-bg)");
-    expect(getRuleBlock(".app-loading-card")).toContain("var(--surface-overlay-bg)");
+    expect(getRuleBlock(".app-loading-shell")).toContain("background: var(--material-shell-page)");
+    expect(getRuleBlock(".app-loading-card")).toContain("background: var(--material-overlay)");
     expect(getRuleBlock(".app-loading-card")).toContain(
       "box-shadow: var(--surface-overlay-shadow)"
     );
     expect(getRuleBlock(".app-loading-card")).toContain("border-radius: var(--radius-overlay)");
     expect(getRuleBlock(".icon-chip")).toContain("border-radius: var(--radius-control)");
-    expect(getRuleBlock(".icon-surface-warning")).toContain("background: var(--state-warning-bg)");
+    expect(getRuleBlock(".icon-surface-warning")).toContain(
+      "background: var(--icon-surface-warning)"
+    );
+  });
+
+  it("defines a single token-driven native scrollbar contract for themed surfaces", () => {
+    const scrollbar = getRuleBlock("::-webkit-scrollbar");
+    const track = getRuleBlock("::-webkit-scrollbar-track");
+    const trackPiece = getRuleBlock("::-webkit-scrollbar-track-piece");
+    const thumb = getRuleBlock("::-webkit-scrollbar-thumb");
+    const thumbHover = getRuleBlock("::-webkit-scrollbar-thumb:hover");
+    const button = getRuleBlock("::-webkit-scrollbar-button");
+    const corner = getRuleBlock("::-webkit-scrollbar-corner");
+    const firefox = getRuleBlock("*");
+
+    expect(scrollbar).toContain("width: var(--scrollbar-width)");
+    expect(scrollbar).toContain("height: var(--scrollbar-width)");
+    expect(track).toContain("background: var(--scrollbar-track)");
+    expect(trackPiece).toContain("background: var(--scrollbar-track)");
+    expect(thumb).toContain("background: var(--scrollbar-thumb)");
+    expect(thumb).toContain("border-radius: var(--radius-full)");
+    expect(thumbHover).toContain("background: var(--border-focus)");
+    expect(button).toContain("background: var(--scrollbar-track)");
+    expect(corner).toContain("background: var(--scrollbar-track)");
+    expect(firefox).toContain("scrollbar-width: thin");
+    expect(firefox).toContain("scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track)");
   });
 
-  it("defines app-shell background variables and appearance-aware loading shell hooks", () => {
+  it("defines app-shell background variables and shared background dim hooks", () => {
     const app = getRuleBlock(".app");
     const appBefore = getRuleBlock(".app::before");
     const appAfter = getRuleBlock(".app::after");
-    const loadingShell = getRuleBlock(".app-loading-shell");
 
-    expect(app).toContain("background: var(--surface-page-bg)");
+    expect(app).toContain("background: var(--surface-page)");
     expect(app).toContain("isolation: isolate");
     expect(appBefore).toContain("background-image: var(--app-bg-image, none)");
     expect(appBefore).toContain("background-size: var(--app-bg-fit, cover)");
     expect(appBefore).toContain("filter: blur(var(--app-bg-blur, 0px))");
+    expect(appAfter).toContain("background: var(--surface-page)");
     expect(appAfter).toContain("var(--app-bg-dim, 0)");
-    expect(loadingShell).toContain("var(--app-surface-opacity, 0.96)");
-    expect(loadingShell).toContain("backdrop-filter: var(--app-surface-backdrop-filter, none)");
   });
 });
 
@@ -108,9 +138,11 @@ describe("base.css viewport sizing", () => {
 describe("base.css desktop typography foundation", () => {
   it("defines the semantic and desktop layout tokens used by polished PC surfaces", () => {
     expect(tokensStylesheet).toContain("--text-muted:");
-    expect(tokensStylesheet).toContain("--bg-panel:");
-    expect(tokensStylesheet).toContain("--bg-elevated:");
-    expect(tokensStylesheet).toContain("--accent-red:");
+    expect(tokensStylesheet).toContain("--surface-panel-bg:");
+    expect(tokensStylesheet).toContain("--surface-elevated-bg:");
+    expect(tokensStylesheet).toContain("--status-danger-fg:");
+    expect(tokensStylesheet).toContain("--workspace-sidebar-surface:");
+    expect(tokensStylesheet).toContain("--material-panel:");
     expect(tokensStylesheet).toContain("--desktop-topbar-height:");
     expect(tokensStylesheet).toContain("--desktop-statusbar-height:");
     expect(tokensStylesheet).toContain("--desktop-sidebar-header-height:");
@@ -119,6 +151,9 @@ describe("base.css desktop typography foundation", () => {
     expect(tokensStylesheet).toContain("--desktop-content-max-width:");
     expect(tokensStylesheet).toContain("--desktop-modal-max-width-md:");
     expect(tokensStylesheet).toContain("--desktop-modal-max-width-lg:");
+    expect(tokensStylesheet).not.toContain("--bg-panel: var(");
+    expect(tokensStylesheet).not.toContain("--bg-elevated: var(");
+    expect(tokensStylesheet).not.toContain("--accent-red: var(");
   });
 
   it("defines semantic overlay z-index tokens for governed layers", () => {
@@ -152,6 +187,21 @@ describe("base.css desktop typography foundation", () => {
     expect(getRuleBlock("select")).toContain("font-size: var(--type-body-3-size)");
   });
 
+  it("maps foundational surfaces and field chrome onto semantic tokens", () => {
+    expect(getRuleBlock("body")).toContain("background-color: var(--surface-page)");
+    expect(getRuleBlock("code")).toContain("background-color: var(--surface-hover)");
+    expect(getRuleBlock("pre")).toContain("background-color: var(--surface-panel)");
+    expect(getRuleBlock("::selection")).toContain("background-color: var(--text-link)");
+    expect(getRuleBlock("::selection")).toContain("color: var(--text-inverse)");
+
+    expect(getRuleBlock("input")).toContain("background-color: var(--field-bg)");
+    expect(getRuleBlock("input")).toContain("border: 1px solid var(--field-border)");
+    expect(getRuleBlock("textarea")).toContain("background-color: var(--field-bg)");
+    expect(getRuleBlock("textarea")).toContain("border: 1px solid var(--field-border)");
+    expect(getRuleBlock("select")).toContain("background-color: var(--field-bg)");
+    expect(getRuleBlock("select")).toContain("border: 1px solid var(--field-border)");
+  });
+
   it("maps headings and helper text onto the new semantic hierarchy", () => {
     expect(getRuleBlock("h1")).toContain("font-size: var(--type-heading-1-size)");
     expect(getRuleBlock("h1")).toContain("font-weight: var(--type-heading-1-weight)");
@@ -176,8 +226,18 @@ describe("base.css desktop typography foundation", () => {
     expect(getRuleBlock(".connection-banner")).toContain(
       "line-height: var(--type-body-6-line-height)"
     );
+    expect(getRuleBlock(".connection-banner")).toContain("background: var(--status-warning-fg)");
+    expect(getRuleBlock(".connection-banner--error")).toContain(
+      "background: var(--status-danger-fg)"
+    );
     expect(getRuleBlock(".app-loading-kicker")).toContain("font-size: var(--type-body-6-size)");
     expect(getRuleBlock(".app-loading-title")).toContain("font-size: var(--type-heading-1-size)");
     expect(getRuleBlock(".app-loading-desc")).toContain("font-size: var(--type-body-3-size)");
   });
+
+  it("maps status text utilities onto semantic status tokens", () => {
+    expect(getRuleBlock(".text-success")).toContain("color: var(--status-success-fg)");
+    expect(getRuleBlock(".text-warning")).toContain("color: var(--status-warning-fg)");
+    expect(getRuleBlock(".text-error")).toContain("color: var(--status-danger-fg)");
+  });
 });
diff --git a/packages/web/src/styles/color-system.guard.test.ts b/packages/web/src/styles/color-system.guard.test.ts
new file mode 100644
index 00000000..7719a871
--- /dev/null
+++ b/packages/web/src/styles/color-system.guard.test.ts
@@ -0,0 +1,71 @@
+// @vitest-environment node
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const files = [
+  "src/styles/base.css",
+  "src/styles/components.css",
+  "src/components/ui/workbench-layer/index.module.css",
+  "src/components/ui/button/index.module.css",
+  "src/components/ui/icon-button/index.module.css",
+  "src/components/ui/input/index.module.css",
+  "src/components/ui/textarea/index.module.css",
+  "src/components/ui/tabs/index.module.css",
+  "src/components/ui/segmented-control/index.module.css",
+  "src/components/ui/kbd/index.module.css",
+  "src/components/ui/switch/index.module.css",
+  "src/components/ui/spinner/index.module.css",
+  "src/components/ui/action-menu/index.module.css",
+  "src/components/ui/datetime-picker/index.module.css",
+  "src/components/ui/tag/index.module.css",
+  "src/components/ui/badge/index.module.css",
+  "src/components/ui/pill/index.module.css",
+  "src/components/ui/select/index.module.css",
+  "src/components/ui/notice/index.module.css",
+  "src/components/ui/toast/index.module.css",
+  "src/components/ui/status-dot/index.module.css",
+  "src/components/ui/tooltip/index.module.css",
+  "src/components/ui/modal/index.module.css",
+  "src/components/ui/drawer/index.module.css",
+  "src/components/ui/local-overlay/index.module.css",
+  "src/components/ui/popover/index.module.css",
+  "src/components/ui/progress-bar/index.module.css",
+  "src/components/ui/empty-state/index.module.css",
+  "src/components/ui/confirm-dialog/index.module.css",
+].map((file) => [file, readFileSync(`${process.cwd()}/${file}`, "utf8")] as const);
+
+const rawColorPattern = /#[0-9A-Fa-f]{3,8}\b|rgba?\(|hsla?\(|oklch\(|color-mix\(|\bblur\(\d/;
+const runtimePattern = /--app-surface-opacity|--app-surface-backdrop-filter|data-appearance-glass/;
+const privateRefPattern = /var\(--ref-/;
+const legacyPublicPattern = /var\(--(?:bg-|accent-|color-|ws-)/;
+
+const expectedRawColorConsumers: string[] = [];
+
+const expectedRuntimeConsumers: string[] = [];
+
+const expectedLegacyPublicConsumers: string[] = [];
+
+function offenders(pattern: RegExp) {
+  return files
+    .filter(([, source]) => pattern.test(source))
+    .map(([file]) => file)
+    .sort();
+}
+
+describe("color-system migration guard", () => {
+  it("tracks the remaining raw-color consumers explicitly", () => {
+    expect(offenders(rawColorPattern)).toEqual(expectedRawColorConsumers);
+  });
+
+  it("tracks the remaining runtime appearance consumers explicitly", () => {
+    expect(offenders(runtimePattern)).toEqual(expectedRuntimeConsumers);
+  });
+
+  it("forbids private reference tokens outside tokens.css", () => {
+    expect(offenders(privateRefPattern)).toEqual([]);
+  });
+
+  it("tracks the remaining legacy public token consumers explicitly", () => {
+    expect(offenders(legacyPublicPattern)).toEqual(expectedLegacyPublicConsumers);
+  });
+});
diff --git a/packages/web/src/styles/components.css b/packages/web/src/styles/components.css
index 56152748..409b1ef9 100644
--- a/packages/web/src/styles/components.css
+++ b/packages/web/src/styles/components.css
@@ -7,8 +7,8 @@
 .command-palette {
   width: 100%;
   max-width: var(--desktop-modal-max-width-md);
-  background: var(--bg-elevated);
-  border: 1px solid var(--border);
+  background: var(--surface-elevated);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-xl);
   overflow: hidden;
@@ -24,7 +24,7 @@
   align-items: center;
   justify-content: space-between;
   padding: var(--sp-3) var(--sp-4);
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .command-palette-kicker {
@@ -48,7 +48,7 @@
   align-items: center;
   gap: var(--sp-3);
   padding: var(--sp-3) var(--sp-4);
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .command-palette-search-icon {
@@ -76,7 +76,7 @@
   line-height: var(--type-body-5-line-height);
   font-weight: var(--type-body-5-weight);
   color: var(--text-tertiary);
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .command-palette-list {
@@ -101,7 +101,7 @@
 
 .command-palette-item:hover,
 .command-palette-item-selected {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
 }
 
 .command-palette-item-content {
@@ -134,7 +134,7 @@
   line-height: var(--type-body-5-line-height);
   font-weight: var(--type-body-5-weight);
   padding: var(--sp-1) var(--sp-2);
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   border-radius: var(--radius-sm);
   color: var(--text-tertiary);
   font-family: var(--font-mono);
@@ -160,8 +160,8 @@
   padding-top: var(--sp-3);
   background: linear-gradient(
     180deg,
-    color-mix(in srgb, var(--bg-surface) 98%, transparent) 0%,
-    color-mix(in srgb, var(--bg-page) 96%, var(--bg-surface) 4%) 100%
+    var(--component-mix-surface-panel-98pct-transparent) 0%,
+    var(--component-mix-surface-page-96pct-surface-panel-4pct) 100%
   );
 }
 
@@ -171,8 +171,8 @@
   justify-content: space-between;
   gap: var(--sp-3);
   padding: var(--sp-2) var(--sp-4);
-  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
-  background: color-mix(in srgb, var(--bg-surface) 66%, transparent);
+  border-bottom: 1px solid var(--component-mix-border-default-82pct-transparent);
+  background: var(--component-mix-surface-panel-66pct-transparent);
 }
 
 .command-palette-sheet-shell {
@@ -204,8 +204,8 @@
   align-items: center;
   gap: var(--gap-default);
   padding: calc(var(--sp-3) - var(--gap-compact)) var(--sp-4);
-  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
-  background: color-mix(in srgb, var(--bg-surface) 66%, transparent);
+  border-bottom: 1px solid var(--component-mix-border-default-82pct-transparent);
+  background: var(--component-mix-surface-panel-66pct-transparent);
 }
 
 .quick-open__icon {
@@ -227,7 +227,7 @@
 }
 
 .quick-open__input::placeholder {
-  color: color-mix(in srgb, var(--text-tertiary) 92%, var(--bg-panel));
+  color: var(--component-mix-text-tertiary-92pct-surface-panel);
 }
 
 .quick-open__list {
@@ -258,7 +258,7 @@
   background: transparent;
   color: var(--text-primary);
   text-align: left;
-  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--border) 96%, transparent);
+  box-shadow: inset 0 -1px 0 var(--component-mix-border-default-96pct-transparent);
   transition:
     background-color var(--duration-fast) var(--ease-out),
     color var(--duration-fast) var(--ease-out);
@@ -267,16 +267,15 @@
 .quick-open__item:hover,
 .quick-open__item--active,
 .quick-open__item[aria-selected="true"] {
-  background: color-mix(in srgb, var(--accent-blue) 12%, var(--bg-panel));
+  background: var(--component-mix-status-info-fg-12pct-surface-panel);
 }
 
 .quick-open__item:focus-visible {
   outline: none;
-  background: color-mix(in srgb, var(--accent-blue) 14%, var(--bg-panel));
+  background: var(--component-mix-status-info-fg-14pct-surface-panel);
   box-shadow:
-    inset 0 0 0 var(--state-focus-ring-width)
-    color-mix(in srgb, var(--border-focus) 64%, transparent),
-    inset 0 -1px 0 color-mix(in srgb, var(--border) 96%, transparent);
+    inset 0 0 0 var(--state-focus-ring-width) var(--component-mix-border-focus-64pct-transparent),
+    inset 0 -1px 0 var(--component-mix-border-default-96pct-transparent);
 }
 
 .quick-open__item:last-child {
@@ -307,7 +306,7 @@
 
 .quick-open__item--active .quick-open__secondary,
 .quick-open__item[aria-selected="true"] .quick-open__secondary {
-  color: color-mix(in srgb, var(--accent-blue) 52%, var(--text-secondary));
+  color: var(--component-mix-status-info-fg-52pct-text-secondary);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -327,12 +326,12 @@
   min-height: 0;
   flex: 1;
   flex-direction: column;
-  background: var(--bg-surface);
+  background: var(--surface-panel);
 }
 
 .mobile-select-sheet__search {
   padding: var(--sp-3);
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .mobile-select-sheet__search-label {
@@ -351,9 +350,9 @@
   width: 100%;
   min-height: var(--touch-target-min);
   padding: var(--sp-3);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-lg);
-  background: color-mix(in srgb, var(--bg-surface) 92%, var(--bg-page));
+  background: var(--component-mix-surface-panel-92pct-surface-page);
   color: var(--text-primary);
 }
 
@@ -391,9 +390,9 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-xl);
-  background: color-mix(in srgb, var(--bg-surface) 94%, var(--bg-page));
+  background: var(--component-mix-surface-panel-94pct-surface-page);
 }
 
 .mobile-select-sheet__item {
@@ -405,7 +404,7 @@
   min-height: 56px;
   padding: var(--sp-3);
   border: none;
-  border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
+  border-bottom: 1px solid var(--component-mix-border-default-84pct-transparent);
   background: transparent;
   color: var(--text-primary);
   text-align: left;
@@ -417,16 +416,16 @@
   align-items: stretch;
   gap: var(--sp-2);
   padding: var(--sp-1) var(--sp-2);
-  border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
+  border-bottom: 1px solid var(--component-mix-border-default-84pct-transparent);
   background: transparent;
 }
 
 .mobile-select-sheet__item-row[data-selected="true"] {
-  background: color-mix(in srgb, var(--accent-blue) 10%, var(--bg-surface));
+  background: var(--component-mix-status-info-fg-10pct-surface-panel);
 }
 
 .mobile-select-sheet__list > [data-selected="true"] > .mobile-select-sheet__item {
-  background: color-mix(in srgb, var(--accent-blue) 10%, var(--bg-surface));
+  background: var(--component-mix-status-info-fg-10pct-surface-panel);
 }
 
 .mobile-select-sheet__item-row:last-child {
@@ -450,7 +449,7 @@
 }
 
 .mobile-select-sheet__item--danger .mobile-select-sheet__item-label {
-  color: var(--accent-red);
+  color: var(--status-danger-fg);
 }
 
 .mobile-select-sheet__item-icon {
@@ -493,7 +492,7 @@
 .mobile-select-sheet__item-badge {
   padding: var(--sp-1) var(--sp-2);
   border-radius: var(--radius-full);
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   color: var(--text-secondary);
   font-size: var(--type-body-6-size);
   line-height: var(--type-body-6-line-height);
@@ -517,7 +516,7 @@
 }
 
 .mobile-select-sheet__item-side-action--danger {
-  color: var(--accent-red);
+  color: var(--status-danger-fg);
 }
 
 .mobile-select-sheet__item-side-action-icon {
@@ -527,7 +526,7 @@
 }
 
 .mobile-select-sheet__item--create .mobile-select-sheet__item-label {
-  color: var(--accent-blue);
+  color: var(--status-info-fg);
 }
 
 .mobile-select-sheet__empty {
@@ -543,7 +542,7 @@
 }
 
 .mobile-select-sheet--command {
-  background: var(--bg-page);
+  background: var(--surface-page);
 }
 
 .mobile-select-sheet--command .mobile-select-sheet__search {
@@ -551,16 +550,16 @@
   top: 0;
   z-index: 1;
   padding: 6px var(--sp-4) 4px;
-  border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
-  background: color-mix(in srgb, var(--bg-page) 96%, var(--bg-surface) 4%);
+  border-bottom: 1px solid var(--component-mix-border-default-84pct-transparent);
+  background: var(--component-mix-surface-page-96pct-surface-panel-4pct);
 }
 
 .mobile-select-sheet--command .mobile-select-sheet__search-input {
   min-height: 38px;
   padding: 0 10px;
-  border-color: color-mix(in srgb, var(--border) 64%, transparent);
+  border-color: var(--component-mix-border-default-64pct-transparent);
   border-radius: 4px;
-  background: color-mix(in srgb, var(--bg-page) 82%, var(--bg-surface) 18%);
+  background: var(--component-mix-surface-page-82pct-surface-panel-18pct);
   color: var(--text-primary);
   font-size: var(--type-body-3-size);
   line-height: var(--type-body-3-line-height);
@@ -569,7 +568,7 @@
 }
 
 .mobile-select-sheet--command .mobile-select-sheet__search-input::placeholder {
-  color: color-mix(in srgb, var(--text-tertiary) 92%, var(--bg-panel));
+  color: var(--component-mix-text-tertiary-92pct-surface-panel);
 }
 
 .mobile-select-sheet--command .mobile-select-sheet__content {
@@ -593,16 +592,16 @@
   line-height: var(--type-body-6-line-height);
   font-weight: var(--type-body-6-weight);
   letter-spacing: 0.08em;
-  color: color-mix(in srgb, var(--text-tertiary) 92%, var(--bg-panel));
+  color: var(--component-mix-text-tertiary-92pct-surface-panel);
 }
 
 .mobile-select-sheet--command .mobile-select-sheet__list {
-  border-top: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
-  border-bottom: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
+  border-top: 1px solid var(--component-mix-border-default-76pct-transparent);
+  border-bottom: 1px solid var(--component-mix-border-default-76pct-transparent);
   border-right: none;
   border-left: none;
   border-radius: 0;
-  background: color-mix(in srgb, var(--bg-page) 94%, var(--bg-surface) 6%);
+  background: var(--component-mix-surface-page-94pct-surface-panel-6pct);
   box-shadow: none;
 }
 
@@ -623,7 +622,7 @@
 .mobile-select-sheet--command .mobile-select-sheet__item,
 .mobile-select-sheet--command .mobile-select-sheet__item-row {
   border-bottom-color: transparent;
-  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--border) 96%, transparent);
+  box-shadow: inset 0 -1px 0 var(--component-mix-border-default-96pct-transparent);
 }
 
 .mobile-select-sheet--command .mobile-select-sheet__item {
@@ -637,10 +636,10 @@
   .mobile-select-sheet__list
   > [data-selected="true"]
   > .mobile-select-sheet__item {
-  background: color-mix(in srgb, var(--accent-blue) 12%, var(--bg-panel));
+  background: var(--component-mix-status-info-fg-12pct-surface-panel);
   box-shadow:
-    inset 2px 0 0 color-mix(in srgb, var(--accent-blue) 72%, transparent),
-    inset 0 -1px 0 color-mix(in srgb, var(--border) 96%, transparent);
+    inset 2px 0 0 var(--component-mix-status-info-fg-72pct-transparent),
+    inset 0 -1px 0 var(--component-mix-border-default-96pct-transparent);
 }
 
 .mobile-select-sheet--command .mobile-select-sheet__item-row {
@@ -649,10 +648,10 @@
 }
 
 .mobile-select-sheet--command .mobile-select-sheet__item-row[data-selected="true"] {
-  background: color-mix(in srgb, var(--accent-blue) 12%, var(--bg-panel));
+  background: var(--component-mix-status-info-fg-12pct-surface-panel);
   box-shadow:
-    inset 2px 0 0 color-mix(in srgb, var(--accent-blue) 72%, transparent),
-    inset 0 -1px 0 color-mix(in srgb, var(--border) 96%, transparent);
+    inset 2px 0 0 var(--component-mix-status-info-fg-72pct-transparent),
+    inset 0 -1px 0 var(--component-mix-border-default-96pct-transparent);
 }
 
 .mobile-select-sheet--command .mobile-select-sheet__item-row > .mobile-select-sheet__item {
@@ -679,7 +678,7 @@
 .mobile-select-sheet--command
   .mobile-select-sheet__item-row[data-selected="true"]
   .mobile-select-sheet__item-icon {
-  color: color-mix(in srgb, var(--accent-blue) 74%, var(--text-primary));
+  color: var(--component-mix-status-info-fg-74pct-text-primary);
 }
 
 .mobile-select-sheet--command .mobile-select-sheet__item-copy {
@@ -717,12 +716,12 @@
 .mobile-select-sheet--command
   .mobile-select-sheet__item-row[data-selected="true"]
   .mobile-select-sheet__item-meta {
-  color: color-mix(in srgb, var(--accent-blue) 52%, var(--text-secondary));
+  color: var(--component-mix-status-info-fg-52pct-text-secondary);
 }
 
 .mobile-select-sheet--command .mobile-select-sheet__item-badge {
   padding: 1px 6px;
-  border: 1px solid color-mix(in srgb, var(--border) 64%, transparent);
+  border: 1px solid var(--component-mix-border-default-64pct-transparent);
   background: transparent;
   color: var(--text-tertiary);
   font-size: var(--type-body-6-size);
@@ -734,13 +733,13 @@
   align-self: center;
   width: 26px;
   height: 26px;
-  border: 1px solid color-mix(in srgb, var(--border) 44%, transparent);
+  border: 1px solid var(--component-mix-border-default-44pct-transparent);
   border-radius: 3px;
   background: transparent;
 }
 
 .mobile-select-sheet--command .mobile-select-sheet__item-side-action--danger {
-  color: color-mix(in srgb, var(--color-error) 76%, var(--text-primary));
+  color: var(--component-mix-status-danger-fg-76pct-text-primary);
 }
 
 .mobile-select-sheet--command .mobile-select-sheet__item--action .mobile-select-sheet__item-label,
@@ -880,13 +879,9 @@
 
 .settings-header {
   padding: var(--sp-1) var(--sp-4);
-  background: color-mix(
-    in srgb,
-    var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.96) * 100%),
-    transparent
-  );
-  border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
-  backdrop-filter: var(--app-surface-backdrop-filter, none);
+  background: var(--settings-header-surface);
+  border-bottom: 1px solid var(--component-mix-border-default-84pct-transparent);
+  backdrop-filter: var(--material-backdrop-filter);
 }
 .settings-body {
   display: flex;
@@ -898,13 +893,9 @@
 
 .settings-sidebar {
   width: 240px;
-  background: color-mix(
-    in srgb,
-    var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.88) * 100%),
-    transparent
-  );
-  border-right: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
-  backdrop-filter: var(--app-surface-backdrop-filter, none);
+  background: var(--settings-sidebar-surface);
+  border-right: 1px solid var(--component-mix-border-default-82pct-transparent);
+  backdrop-filter: var(--material-backdrop-filter);
   padding: var(--sp-4);
 }
 
@@ -928,15 +919,15 @@
 }
 
 .settings-nav-item:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   color: var(--text-primary);
 }
 
 .settings-nav-item-active {
-  background: var(--bg-active);
+  background: var(--surface-active);
   color: var(--text-primary);
-  border-color: color-mix(in srgb, var(--accent-blue) 42%, var(--border) 58%);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-blue) 18%, transparent);
+  border-color: var(--component-mix-status-info-fg-42pct-border-default-58pct);
+  box-shadow: inset 0 0 0 1px var(--component-mix-status-info-fg-18pct-transparent);
 }
 
 .settings-nav-icon {
@@ -972,11 +963,7 @@
   justify-content: center;
   padding: var(--sp-6);
   overflow-y: auto;
-  background: color-mix(
-    in srgb,
-    var(--surface-page-bg) calc(var(--app-surface-opacity, 0.96) * 100%),
-    transparent
-  );
+  background: var(--material-shell-page);
 }
 
 .settings-content--fill-height {
@@ -998,15 +985,11 @@
   min-width: 0;
   min-height: 100%;
   padding: var(--sp-6);
-  background: color-mix(
-    in srgb,
-    var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.96) * 100%),
-    transparent
-  );
-  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
+  background: var(--material-overlay);
+  border: 1px solid var(--component-mix-border-default-84pct-transparent);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-lg);
-  backdrop-filter: var(--app-surface-backdrop-filter, none);
+  backdrop-filter: var(--material-backdrop-filter);
 }
 
 .settings-section {
@@ -1063,7 +1046,7 @@
   column-gap: var(--sp-4);
   row-gap: var(--sp-2);
   padding: var(--sp-3) 0;
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .settings-toggle-row--action {
@@ -1106,7 +1089,7 @@
 .settings-toggle-slider {
   position: absolute;
   inset: 0;
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   border-radius: var(--radius-full);
   transition: background var(--duration-fast) var(--ease-out);
 }
@@ -1124,7 +1107,7 @@
 }
 
 .settings-toggle input:checked + .settings-toggle-slider {
-  background: var(--accent-green);
+  background: var(--status-success-fg);
 }
 
 .settings-toggle input:checked + .settings-toggle-slider::before {
@@ -1138,7 +1121,7 @@
   column-gap: var(--sp-4);
   row-gap: var(--sp-2);
   padding: var(--sp-3) 0;
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .settings-info-label {
@@ -1172,16 +1155,16 @@
 
 .settings-capability-available,
 .settings-permission-granted {
-  color: var(--color-success);
+  color: var(--status-success-fg);
 }
 
 .settings-capability-limited {
-  color: var(--accent-amber);
+  color: var(--status-warning-fg);
 }
 
 .settings-capability-unsupported,
 .settings-permission-denied {
-  color: var(--color-error);
+  color: var(--status-danger-fg);
 }
 
 .settings-permission-unavailable {
@@ -1200,7 +1183,7 @@
   align-items: center;
   gap: var(--sp-1);
   padding: 0;
-  color: var(--accent-blue);
+  color: var(--status-info-fg);
   cursor: pointer;
   background: none;
   border: none;
@@ -1241,11 +1224,11 @@
 }
 
 .settings-provider-tab:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
 }
 
 .settings-provider-tab-active {
-  background: var(--bg-active);
+  background: var(--surface-active);
   border-color: var(--border-focus);
   color: var(--text-primary);
 }
@@ -1255,7 +1238,7 @@
   gap: var(--sp-1);
   margin-bottom: var(--space-default);
   padding-bottom: var(--sp-3);
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .settings-provider-subnav-button {
@@ -1268,13 +1251,13 @@
 }
 
 .settings-provider-subnav-button:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   color: var(--text-primary);
 }
 
 .settings-provider-subnav-button-active {
   color: var(--text-primary);
-  background: var(--bg-active);
+  background: var(--surface-active);
   border-color: var(--border-focus);
 }
 
@@ -1324,7 +1307,7 @@
   width: 100%;
   padding: var(--sp-3) 0;
   border: none;
-  border-top: 1px solid var(--border);
+  border-top: 1px solid var(--border-default);
   border-radius: 0;
   background: transparent;
   text-align: left;
@@ -1416,9 +1399,9 @@
   flex-direction: column;
   gap: var(--sp-3);
   padding: var(--sp-4);
-  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
+  border: 1px solid var(--component-mix-border-default-78pct-transparent);
   border-radius: var(--radius-lg);
-  background: color-mix(in srgb, var(--bg-input) 72%, var(--bg-surface) 28%);
+  background: var(--component-mix-surface-input-72pct-surface-panel-28pct);
 }
 
 .settings-appearance-panel .settings-config-field:last-child,
@@ -1437,9 +1420,9 @@
   align-items: start;
   gap: var(--sp-3);
   padding: var(--sp-3);
-  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+  border: 1px solid var(--component-mix-border-default-70pct-transparent);
   border-radius: var(--radius-md);
-  background: color-mix(in srgb, var(--bg-surface) 82%, transparent);
+  background: var(--component-mix-surface-panel-82pct-transparent);
 }
 
 .settings-appearance-asset-meta {
@@ -1468,9 +1451,9 @@
 .settings-appearance-metric-field {
   margin-bottom: 0;
   padding: var(--sp-3);
-  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+  border: 1px solid var(--component-mix-border-default-70pct-transparent);
   border-radius: var(--radius-md);
-  background: color-mix(in srgb, var(--bg-surface) 78%, transparent);
+  background: var(--component-mix-surface-panel-78pct-transparent);
 }
 
 .settings-appearance-metric-field .settings-config-control {
@@ -1493,9 +1476,9 @@
   gap: var(--sp-3);
   margin-top: var(--sp-3);
   padding: var(--sp-3) var(--sp-4);
-  border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
+  border: 1px solid var(--component-mix-border-default-68pct-transparent);
   border-radius: var(--radius-lg);
-  background: color-mix(in srgb, var(--bg-surface) 74%, transparent);
+  background: var(--component-mix-surface-panel-74pct-transparent);
 }
 
 .settings-appearance-override-panel .settings-config-field:last-child,
@@ -1513,8 +1496,8 @@
   width: 100%;
   min-width: 0;
   box-sizing: border-box;
-  background: color-mix(in srgb, var(--bg-input) 82%, var(--bg-surface) 18%);
-  border-color: var(--border);
+  background: var(--component-mix-surface-input-82pct-surface-panel-18pct);
+  border-color: var(--border-default);
   font-family: var(--font-mono);
   font-size: var(--type-body-5-size);
   line-height: var(--type-body-5-line-height);
@@ -1524,9 +1507,9 @@
 .settings-command-preview {
   display: block;
   padding: var(--sp-3);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-sm);
-  background: color-mix(in srgb, var(--bg-input) 82%, var(--bg-surface) 18%);
+  background: var(--component-mix-surface-input-82pct-surface-panel-18pct);
   color: var(--text-primary);
   font-family: var(--font-mono);
   font-size: var(--type-body-5-size);
@@ -1544,8 +1527,8 @@
   gap: var(--sp-3);
   min-height: 32px;
   padding: var(--sp-3) var(--sp-6);
-  background: var(--bg-surface);
-  border-top: 1px solid var(--border);
+  background: var(--surface-panel);
+  border-top: 1px solid var(--border-default);
 }
 
 .settings-footer__meta {
@@ -1578,8 +1561,8 @@
 .terminal-panel {
   display: flex;
   flex-direction: column;
-  background: var(--bg-terminal);
-  border-top: 1px solid var(--border);
+  background: var(--surface-input);
+  border-top: 1px solid var(--border-default);
   height: 100%;
 }
 
@@ -1588,8 +1571,8 @@
   align-items: center;
   justify-content: space-between;
   padding: var(--sp-2) var(--sp-3);
-  background: var(--bg-surface);
-  border-bottom: 1px solid var(--border);
+  background: var(--surface-panel);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .terminal-panel-header-left {
@@ -1627,8 +1610,8 @@
   align-items: center;
   gap: var(--sp-2);
   padding: var(--sp-1) var(--sp-2);
-  background: var(--bg-hover);
-  border: 1px solid var(--border);
+  background: var(--surface-hover);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-sm);
   color: var(--text-secondary);
   font-size: var(--text-sm);
@@ -1640,8 +1623,8 @@
   top: 100%;
   right: 0;
   min-width: 200px;
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
+  background: var(--surface-panel);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-lg);
   z-index: var(--z-dropdown);
@@ -1661,7 +1644,7 @@
 }
 
 .terminal-selector-item:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
 }
 
 .terminal-selector-item-active {
@@ -1690,7 +1673,7 @@
 }
 
 .terminal-selector-item-close:hover {
-  color: var(--color-error);
+  color: var(--status-danger-fg);
 }
 
 .terminal-panel-content {
@@ -1704,8 +1687,8 @@
   display: flex;
   gap: var(--sp-1);
   padding: var(--sp-1) var(--sp-2);
-  background: var(--bg-surface);
-  border-bottom: 1px solid var(--border);
+  background: var(--surface-panel);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .terminal-tab {
@@ -1713,12 +1696,12 @@
   align-items: center;
   gap: var(--sp-1);
   padding: var(--sp-1) var(--sp-2);
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   border-radius: var(--radius-sm);
 }
 
 .terminal-tab-active {
-  background: var(--bg-active);
+  background: var(--surface-active);
 }
 
 .terminal-tab-label {
@@ -1740,13 +1723,13 @@
 }
 
 .terminal-tab-close:hover {
-  color: var(--color-error);
+  color: var(--status-danger-fg);
 }
 
 .terminal-panel-xterm {
   flex: 1;
   overflow: hidden;
-  background: var(--bg-terminal);
+  background: var(--surface-input);
 }
 
 .xterm-host-shell {
@@ -1783,8 +1766,8 @@
   flex-shrink: 0;
   min-width: 0;
   padding: 4px var(--sp-2) 3px;
-  border-top: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
-  background: color-mix(in srgb, var(--bg-page) 92%, var(--bg-terminal) 8%);
+  border-top: 1px solid var(--component-mix-border-default-68pct-transparent);
+  background: var(--component-mix-surface-page-92pct-surface-input-8pct);
 }
 
 .mobile-terminal-input-bar__actions {
@@ -1794,7 +1777,7 @@
   gap: 3px;
   margin-right: var(--sp-1);
   padding-right: var(--sp-1);
-  border-right: 1px solid color-mix(in srgb, var(--border) 56%, transparent);
+  border-right: 1px solid var(--component-mix-border-default-56pct-transparent);
 }
 
 .mobile-terminal-input-bar__action {
@@ -1804,9 +1787,9 @@
   flex: 0 0 auto;
   min-height: 20px;
   padding: 0 6px;
-  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+  border: 1px solid var(--component-mix-border-default-70pct-transparent);
   border-radius: var(--radius-sm);
-  background: color-mix(in srgb, var(--bg-page) 78%, var(--bg-surface) 22%);
+  background: var(--component-mix-surface-page-78pct-surface-panel-22pct);
   color: var(--text-secondary);
   font-family: var(--font-mono);
   font-size: 9px;
@@ -1844,9 +1827,9 @@
   min-width: 0;
   min-height: 20px;
   padding: 0 5px;
-  border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
+  border: 1px solid var(--component-mix-border-default-68pct-transparent);
   border-radius: var(--radius-sm);
-  background: color-mix(in srgb, var(--bg-page) 80%, var(--bg-surface) 20%);
+  background: var(--component-mix-surface-page-80pct-surface-panel-20pct);
   color: var(--text-secondary);
   font-family: var(--font-mono);
   font-size: 9px;
@@ -1876,20 +1859,20 @@
 }
 
 .mobile-terminal-input-bar__ctrl[data-ctrl-mode="armed"] {
-  border-color: color-mix(in srgb, var(--accent-blue) 28%, var(--border));
-  background: color-mix(in srgb, var(--accent-blue) 8%, var(--bg-panel));
+  border-color: var(--component-mix-status-info-fg-28pct-border-default);
+  background: var(--component-mix-status-info-fg-8pct-surface-panel);
   color: var(--text-primary);
 }
 
 .mobile-terminal-input-bar__ctrl[data-ctrl-mode="locked"] {
-  border-color: color-mix(in srgb, var(--accent-blue) 42%, var(--border));
-  background: color-mix(in srgb, var(--accent-blue) 12%, var(--bg-panel));
-  color: color-mix(in srgb, var(--accent-blue) 84%, var(--text-primary));
+  border-color: var(--component-mix-status-info-fg-42pct-border-default);
+  background: var(--component-mix-status-info-fg-12pct-surface-panel);
+  color: var(--component-mix-status-info-fg-84pct-text-primary);
 }
 
 .mobile-terminal-input-bar__shift[data-shift-armed="true"] {
-  border-color: color-mix(in srgb, var(--accent-blue) 28%, var(--border));
-  background: color-mix(in srgb, var(--accent-blue) 8%, var(--bg-panel));
+  border-color: var(--component-mix-status-info-fg-28pct-border-default);
+  background: var(--component-mix-status-info-fg-8pct-surface-panel);
   color: var(--text-primary);
 }
 
@@ -1911,23 +1894,23 @@
   gap: var(--sp-2);
   max-width: 32rem;
   padding: var(--sp-4) var(--sp-5);
-  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--accent-blue) 22%);
+  border: 1px solid var(--component-mix-border-default-78pct-status-info-fg-22pct);
   border-radius: var(--terminal-local-overlay-radius);
-  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
+  background: var(--component-mix-surface-elevated-92pct-transparent);
   box-shadow: var(--shadow-lg);
   text-align: center;
 }
 
 .xterm-replay-overlay--degraded .xterm-replay-overlay__card {
-  border-color: color-mix(in srgb, var(--border) 68%, var(--color-warning) 32%);
+  border-color: var(--component-mix-border-default-68pct-status-warning-fg-32pct);
 }
 
 .xterm-replay-overlay__spinner {
   width: 1.25rem;
   height: 1.25rem;
   border-radius: var(--radius-pill);
-  border: 2px solid color-mix(in srgb, var(--accent-blue) 24%, transparent);
-  border-top-color: var(--accent-blue);
+  border: 2px solid var(--component-mix-status-info-fg-24pct-transparent);
+  border-top-color: var(--status-info-fg);
   animation: spin 0.8s linear infinite;
 }
 
@@ -2076,11 +2059,7 @@ body.focus-mode-active .split-divider-h {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background: color-mix(
-    in srgb,
-    var(--surface-page-bg) calc(var(--app-surface-opacity, 0.96) * 100%),
-    transparent
-  );
+  background: var(--workspace-page-surface);
 }
 
 .workspace-page-focus {
@@ -2101,7 +2080,7 @@ body.focus-mode-active .split-divider-h {
 
 /* ========== Resizers ========== */
 .workspace-resizer {
-  background: var(--border);
+  background: var(--border-default);
   z-index: var(--z-inline);
   transition: background 0.15s;
 }
@@ -2121,7 +2100,7 @@ body.focus-mode-active .split-divider-h {
 }
 
 .workspace-resizer:hover {
-  background: var(--accent-blue);
+  background: var(--status-info-fg);
 }
 
 .workspace-main-area {
@@ -2169,7 +2148,7 @@ body.focus-mode-active .split-divider-h {
 .split-divider-h::before {
   content: "";
   position: absolute;
-  background: color-mix(in srgb, var(--border) 62%, transparent);
+  background: var(--component-mix-border-default-62pct-transparent);
   pointer-events: none;
 }
 
@@ -2191,7 +2170,7 @@ body.focus-mode-active .split-divider-h {
 
 .split-divider-v:hover::before,
 .split-divider-h:hover::before {
-  background: color-mix(in srgb, var(--border-focus) 58%, transparent);
+  background: var(--component-mix-border-focus-58pct-transparent);
 }
 
 /* Disable text selection during resize */
@@ -2208,8 +2187,8 @@ body.is-resizing-panels * {
 .left-panel {
   width: 280px;
   min-width: 200px;
-  background: var(--bg-sidebar);
-  border-right: 1px solid var(--border);
+  background: var(--surface-muted);
+  border-right: 1px solid var(--border-default);
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -2218,7 +2197,7 @@ body.is-resizing-panels * {
 
 .panel-header {
   padding: var(--sp-3) var(--inset-control-inline) var(--inset-control-block);
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .panel-kicker {
@@ -2240,7 +2219,7 @@ body.is-resizing-panels * {
   font-weight: var(--type-body-5-weight);
   font-family: var(--font-mono);
   color: var(--text-sec);
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   border-radius: var(--radius-control-sm);
   padding: var(--gap-compact) var(--sp-2);
 }
@@ -2266,7 +2245,7 @@ body.is-resizing-panels * {
   color: var(--text-sec);
 }
 .panel-tab.active {
-  background: var(--blue);
+  background: var(--status-info-fg);
   color: var(--bg);
   font-weight: var(--type-body-6-weight);
 }
@@ -2276,7 +2255,7 @@ body.is-resizing-panels * {
   align-items: center;
   justify-content: space-between;
   padding: var(--gap-tight) var(--inset-control-inline);
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .panel-toolbar-btn {
@@ -2293,7 +2272,7 @@ body.is-resizing-panels * {
 }
 
 .panel-toolbar-btn:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   color: var(--text-sec);
 }
 
@@ -2319,7 +2298,7 @@ body.is-resizing-panels * {
 }
 
 .tree-item:hover {
-  background: color-mix(in srgb, var(--state-selected-bg) 72%, transparent);
+  background: var(--component-mix-state-selected-bg-72pct-transparent);
 }
 .tree-item.selected {
   background: var(--state-selected-bg);
@@ -2350,16 +2329,16 @@ body.is-resizing-panels * {
 }
 
 .tree-icon.folder {
-  color: var(--amber);
+  color: var(--status-warning-fg);
 }
 .tree-icon.ts {
-  color: var(--blue);
+  color: var(--status-info-fg);
 }
 .tree-icon.css {
-  color: var(--green);
+  color: var(--status-success-fg);
 }
 .tree-icon.json {
-  color: var(--amber);
+  color: var(--status-warning-fg);
 }
 .tree-icon.md {
   color: var(--text-ter);
@@ -2430,6 +2409,23 @@ body.is-resizing-panels * {
   min-height: 0;
 }
 
+body.is-dragging-pane {
+  cursor: grabbing;
+  user-select: none;
+}
+
+.agent-pane-leaf {
+  position: relative;
+  display: flex;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: transparent;
+}
+
 .agent-progress {
   height: 3px;
   background: var(--state-info-bg);
@@ -2439,12 +2435,12 @@ body.is-resizing-panels * {
 
 .agent-progress .fill {
   height: 100%;
-  background: var(--blue);
+  background: var(--status-info-fg);
   transition: width 60ms;
 }
 
 .agent-progress .fill.error {
-  background: var(--pink);
+  background: var(--status-danger-fg);
 }
 
 .agent-header {
@@ -2452,7 +2448,7 @@ body.is-resizing-panels * {
   align-items: center;
   gap: var(--gap-default);
   padding: var(--gap-tight) var(--inset-control-inline);
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .agent-session-dot {
@@ -2463,7 +2459,7 @@ body.is-resizing-panels * {
 }
 
 .agent-session-dot.active {
-  background: var(--green);
+  background: var(--status-success-fg);
   animation: pulse 2s infinite;
 }
 
@@ -2486,7 +2482,7 @@ body.is-resizing-panels * {
   font-weight: var(--type-body-6-weight);
   padding: var(--inset-chip-block) var(--inset-chip-inline);
   border-radius: var(--radius-control-sm);
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   color: var(--text-ter);
 }
 
@@ -2534,20 +2530,20 @@ body.is-resizing-panels * {
 }
 
 .agent-action-btn:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
 }
 .agent-action-btn.close:hover {
-  color: var(--pink);
+  color: var(--status-danger-fg);
 }
 
 .term-line {
   white-space: pre;
 }
 .term-prompt {
-  color: var(--green);
+  color: var(--status-success-fg);
 }
 .term-path {
-  color: var(--blue);
+  color: var(--status-info-fg);
 }
 .term-cmd {
   color: var(--text);
@@ -2556,27 +2552,27 @@ body.is-resizing-panels * {
   color: var(--text-sec);
 }
 .term-success {
-  color: var(--green);
+  color: var(--status-success-fg);
 }
 .term-warn {
-  color: var(--amber);
+  color: var(--status-warning-fg);
 }
 .term-error {
-  color: var(--pink);
+  color: var(--status-danger-fg);
 }
 .term-cursor {
   display: inline-block;
   width: 8px;
   height: 16px;
-  background: var(--green);
+  background: var(--status-success-fg);
   animation: pulse 1s step-end infinite;
   vertical-align: middle;
 }
 
 /* ========== Bottom Terminal ========== */
 .bottom-terminal {
-  border-top: 1px solid var(--border);
-  background: var(--bg-surface);
+  border-top: 1px solid var(--border-default);
+  background: var(--surface-panel);
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -2588,7 +2584,7 @@ body.is-resizing-panels * {
   align-items: center;
   padding: 6px 12px;
   gap: 8px;
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .terminal-kicker {
@@ -2605,7 +2601,7 @@ body.is-resizing-panels * {
 
 .terminal-select {
   background: var(--bg);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-default);
   border-radius: 4px;
   padding: 2px 6px;
   font-size: 11px;
@@ -2624,8 +2620,8 @@ body.is-resizing-panels * {
   padding: var(--sp-8);
   background: linear-gradient(
     180deg,
-    color-mix(in srgb, var(--bg-page) 97%, var(--bg-surface) 3%) 0%,
-    var(--bg-page) 100%
+    var(--component-mix-surface-page-97pct-surface-panel-3pct) 0%,
+    var(--surface-page) 100%
   );
 }
 
@@ -2641,8 +2637,8 @@ body.is-resizing-panels * {
   align-items: stretch;
   gap: var(--sp-6);
   padding: var(--sp-8);
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
+  background: var(--surface-panel);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-sm);
   text-align: left;
@@ -2665,7 +2661,7 @@ body.is-resizing-panels * {
 .welcome-card__panel,
 .welcome-card__features {
   padding-top: var(--sp-5);
-  border-top: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+  border-top: 1px solid var(--component-mix-border-default-82pct-transparent);
 }
 
 .welcome-actions-group {
@@ -2709,9 +2705,9 @@ body.is-resizing-panels * {
   min-height: var(--btn-height-lg);
   min-width: 220px;
   padding: 0 var(--sp-6);
-  border: 1px solid color-mix(in srgb, var(--accent-blue) 28%, var(--border));
+  border: 1px solid var(--component-mix-status-info-fg-28pct-border-default);
   border-radius: var(--radius-md);
-  background: var(--accent-blue);
+  background: var(--status-info-fg);
   color: var(--text-inverse);
   font-size: var(--type-body-3-size);
   line-height: var(--type-body-3-line-height);
@@ -2727,7 +2723,7 @@ body.is-resizing-panels * {
 
 .welcome-btn:hover {
   filter: none;
-  background: color-mix(in srgb, var(--accent-blue) 88%, white 12%);
+  background: var(--component-mix-status-info-fg-88pct-white-12pct);
 }
 
 .welcome-link {
@@ -2742,7 +2738,7 @@ body.is-resizing-panels * {
   font-weight: var(--type-body-5-weight);
   color: var(--text-secondary);
   background: transparent;
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-md);
   cursor: pointer;
   font-family: var(--sans);
@@ -2754,8 +2750,8 @@ body.is-resizing-panels * {
 
 .welcome-link:hover {
   color: var(--text-primary);
-  border-color: var(--border-light);
-  background: var(--bg-hover);
+  border-color: var(--border-subtle);
+  background: var(--surface-hover);
 }
 
 .diagnostics-page {
@@ -2766,8 +2762,8 @@ body.is-resizing-panels * {
 
 .diagnostics-header {
   padding: var(--sp-1) var(--sp-4);
-  background: var(--bg-surface);
-  border-bottom: 1px solid var(--border);
+  background: var(--surface-panel);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .diagnostics-body {
@@ -2775,7 +2771,7 @@ body.is-resizing-panels * {
   flex: 1;
   min-height: 0;
   align-items: stretch;
-  background: var(--bg-page);
+  background: var(--surface-page);
 }
 
 .diagnostics-content {
@@ -2785,7 +2781,7 @@ body.is-resizing-panels * {
   justify-content: center;
   padding: var(--sp-6);
   overflow-y: auto;
-  background: var(--bg-page);
+  background: var(--surface-page);
 }
 
 .diagnostics-content-surface {
@@ -2793,8 +2789,8 @@ body.is-resizing-panels * {
   min-width: 0;
   min-height: 100%;
   padding: var(--sp-6);
-  background: var(--bg-elevated);
-  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
+  background: var(--surface-elevated);
+  border: 1px solid var(--component-mix-border-default-84pct-transparent);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-lg);
   display: flex;
@@ -2881,9 +2877,9 @@ body.is-resizing-panels * {
 
 .diagnostics-loading {
   padding: var(--sp-4);
-  border: 1px dashed color-mix(in srgb, var(--border) 76%, transparent);
+  border: 1px dashed var(--component-mix-border-default-76pct-transparent);
   border-radius: var(--radius-md);
-  background: color-mix(in srgb, var(--bg-surface) 92%, var(--bg-page));
+  background: var(--component-mix-surface-panel-92pct-surface-page);
   font-size: var(--text-sm);
   color: var(--text-secondary);
 }
@@ -2905,10 +2901,10 @@ body.is-resizing-panels * {
   flex-direction: column;
   gap: var(--sp-3);
   padding: var(--sp-4);
-  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
+  border: 1px solid var(--component-mix-border-default-84pct-transparent);
   border-radius: var(--radius-lg);
-  background: color-mix(in srgb, var(--bg-surface) 94%, var(--bg-page));
-  box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 42%, transparent);
+  background: var(--component-mix-surface-panel-94pct-surface-page);
+  box-shadow: 0 1px 0 var(--component-mix-border-default-42pct-transparent);
 }
 
 .diagnostics-issue__header {
@@ -2945,7 +2941,7 @@ body.is-resizing-panels * {
   gap: var(--sp-2);
   padding: var(--sp-3);
   border-radius: var(--radius-md);
-  background: color-mix(in srgb, var(--accent-amber) 8%, var(--bg-surface));
+  background: var(--component-mix-status-warning-fg-8pct-surface-panel);
   color: var(--text-secondary);
   font-size: var(--text-sm);
   line-height: 1.5;
@@ -2960,7 +2956,7 @@ body.is-resizing-panels * {
 .welcome-divider {
   width: 48px;
   height: 1px;
-  background: var(--border);
+  background: var(--border-default);
   margin: var(--sp-4) 0;
 }
 
@@ -2981,7 +2977,7 @@ body.is-resizing-panels * {
   min-height: 0;
   justify-content: flex-start;
   flex-direction: column;
-  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
+  border: 1px solid var(--component-mix-border-default-84pct-transparent);
   box-shadow: none;
   text-align: left;
 }
@@ -3018,8 +3014,8 @@ body.is-resizing-panels * {
   text-align: left;
   gap: var(--sp-6);
   padding: var(--sp-8);
-  background: var(--bg-surface);
-  border-color: color-mix(in srgb, var(--border) 88%, transparent);
+  background: var(--surface-panel);
+  border-color: var(--component-mix-border-default-88pct-transparent);
   box-shadow: var(--shadow-sm);
 }
 
@@ -3054,7 +3050,7 @@ body.is-resizing-panels * {
   padding-top: var(--sp-5);
   padding-bottom: 0;
   padding-inline: 0;
-  border-top: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+  border-top: 1px solid var(--component-mix-border-default-82pct-transparent);
   border-radius: 0;
   border-right: none;
   border-bottom: none;
@@ -3063,7 +3059,7 @@ body.is-resizing-panels * {
 }
 
 .auth-status-panel-error {
-  border-top-color: color-mix(in srgb, var(--color-error) 34%, var(--border));
+  border-top-color: var(--component-mix-status-danger-fg-34pct-border-default);
   background: transparent;
 }
 
@@ -3085,7 +3081,7 @@ body.is-resizing-panels * {
 }
 
 .auth-status-panel-error .auth-status-detail {
-  color: color-mix(in srgb, var(--color-error) 84%, var(--text-primary));
+  color: var(--component-mix-status-danger-fg-84pct-text-primary);
 }
 
 .auth-form {
@@ -3094,7 +3090,7 @@ body.is-resizing-panels * {
   flex-direction: column;
   gap: var(--sp-4);
   padding-top: var(--sp-5);
-  border-top: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+  border-top: 1px solid var(--component-mix-border-default-82pct-transparent);
   margin-top: 0;
 }
 
@@ -3104,7 +3100,7 @@ body.is-resizing-panels * {
 
 .auth-input.input {
   height: 44px;
-  background: var(--bg-page);
+  background: var(--surface-page);
 }
 
 .auth-actions {
@@ -3112,7 +3108,7 @@ body.is-resizing-panels * {
   display: flex;
   flex-direction: column;
   padding-top: var(--sp-5);
-  border-top: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+  border-top: 1px solid var(--component-mix-border-default-82pct-transparent);
 }
 
 .auth-submit {
@@ -3148,7 +3144,7 @@ body.is-resizing-panels * {
 }
 
 .pane-layout-divider {
-  background: var(--border);
+  background: var(--border-default);
   transition: background var(--duration-fast) var(--ease-out);
   flex-shrink: 0;
   position: relative;
@@ -3159,22 +3155,21 @@ body.is-resizing-panels * {
   background: var(--border-focus);
 }
 
-.pane-layout-horizontal .pane-layout-divider {
+.pane-layout-horizontal-divider {
   cursor: col-resize;
   width: 10px;
   margin-left: -5px;
   margin-right: -5px;
   justify-self: center;
-  background: transparent;
 }
 
-.pane-layout-vertical .pane-layout-divider {
+.pane-layout-vertical-divider {
   cursor: row-resize;
+  width: 100%;
   height: 10px;
   margin-top: -5px;
   margin-bottom: -5px;
   align-self: center;
-  background: transparent;
 }
 
 /* ========== Draft Launcher ========== */
@@ -3185,7 +3180,7 @@ body.is-resizing-panels * {
   justify-content: center;
   width: 100%;
   height: 100%;
-  background: var(--bg-page);
+  background: var(--surface-page);
 }
 
 .agent-draft-content {
@@ -3214,8 +3209,8 @@ body.is-resizing-panels * {
   flex-direction: column;
   width: 100%;
   height: 100%;
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
+  background: var(--surface-panel);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-lg);
   overflow: hidden;
 }
@@ -3223,7 +3218,7 @@ body.is-resizing-panels * {
 /* Progress bar */
 .session-progress {
   height: var(--sp-1);
-  background: var(--bg-hover);
+  background: var(--surface-hover);
 }
 
 .session-progress-bar {
@@ -3236,15 +3231,15 @@ body.is-resizing-panels * {
 }
 
 .session-progress-starting {
-  background: var(--accent-amber);
+  background: var(--status-warning-fg);
 }
 
 .session-progress-running {
-  background: var(--accent-blue);
+  background: var(--status-info-fg);
 }
 
 .session-progress-complete {
-  background: var(--accent-green);
+  background: var(--status-success-fg);
 }
 
 /* Session header */
@@ -3253,8 +3248,8 @@ body.is-resizing-panels * {
   align-items: center;
   justify-content: space-between;
   padding: var(--sp-2) var(--sp-3);
-  background: var(--bg-surface);
-  border-bottom: 1px solid var(--border);
+  background: var(--surface-panel);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .session-header-left {
@@ -3274,16 +3269,16 @@ body.is-resizing-panels * {
 }
 
 .session-dot-starting {
-  background: var(--accent-amber);
+  background: var(--status-warning-fg);
   animation: pulse 1s ease-in-out infinite;
 }
 
 .session-dot-running {
-  background: var(--accent-blue);
+  background: var(--status-info-fg);
 }
 
 .session-dot-complete {
-  background: var(--accent-green);
+  background: var(--status-success-fg);
 }
 
 .session-title {
@@ -3296,7 +3291,7 @@ body.is-resizing-panels * {
 
 .session-provider-badge {
   padding: var(--sp-1) var(--sp-2);
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   border-radius: var(--radius-sm);
   font-size: var(--type-body-6-size);
   line-height: var(--type-body-6-line-height);
@@ -3336,7 +3331,7 @@ body.is-resizing-panels * {
 .session-terminal {
   flex: 1;
   overflow: hidden;
-  background: var(--bg-terminal);
+  background: var(--surface-input);
 }
 
 /* ========== TopBar ========== */
@@ -3345,16 +3340,12 @@ body.is-resizing-panels * {
   display: flex;
   align-items: center;
   padding: 0 var(--sp-2);
-  background: color-mix(
-    in srgb,
-    var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.96) * 100%),
-    transparent
-  );
-  border-bottom: 1px solid var(--border);
+  background: var(--topbar-surface);
+  border-bottom: 1px solid var(--border-default);
   gap: var(--gap-compact);
   user-select: none;
   flex-shrink: 0;
-  backdrop-filter: var(--app-surface-backdrop-filter, none);
+  backdrop-filter: var(--material-backdrop-filter);
 }
 
 .topbar-tabs {
@@ -3382,10 +3373,10 @@ body.is-resizing-panels * {
 }
 
 .topbar-tab:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
 }
 .topbar-tab.active {
-  background: var(--bg-active);
+  background: var(--surface-active);
   color: var(--text);
 }
 
@@ -3397,7 +3388,7 @@ body.is-resizing-panels * {
 }
 
 .topbar-dot.active {
-  background: var(--green);
+  background: var(--status-success-fg);
   animation: pulse 2s infinite;
 }
 
@@ -3406,7 +3397,7 @@ body.is-resizing-panels * {
 }
 
 .topbar-unread {
-  background: var(--blue);
+  background: var(--status-info-fg);
   color: var(--bg);
   font-family: var(--font-sans);
   font-size: var(--type-body-6-size);
@@ -3458,7 +3449,7 @@ body.is-resizing-panels * {
 }
 
 .topbar-add:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
 }
 
 .topbar-actions {
@@ -3488,7 +3479,7 @@ body.is-resizing-panels * {
 }
 
 .topbar-btn:hover {
-  background: color-mix(in srgb, var(--bg-surface) 72%, var(--blue) 28%);
+  background: var(--component-mix-surface-panel-72pct-status-info-fg-28pct);
 }
 
 /* ========== Connection Status ========== */
@@ -3505,16 +3496,16 @@ body.is-resizing-panels * {
 }
 
 .connection-status-dot-connected {
-  background: var(--accent-green);
+  background: var(--status-success-fg);
 }
 
 .connection-status-dot-connecting {
-  background: var(--accent-amber);
+  background: var(--status-warning-fg);
   animation: pulse 1s ease-in-out infinite;
 }
 
 .connection-status-dot-disconnected {
-  background: var(--color-error);
+  background: var(--status-danger-fg);
 }
 
 .connection-status-label {
@@ -3536,8 +3527,8 @@ body.is-resizing-panels * {
   align-items: center;
   justify-content: space-between;
   padding: var(--sp-3) var(--sp-4);
-  background: var(--bg-surface);
-  border-bottom: 1px solid var(--border);
+  background: var(--surface-panel);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .file-tree-label {
@@ -3554,7 +3545,7 @@ body.is-resizing-panels * {
   align-items: center;
   gap: var(--sp-1);
   padding: var(--sp-1) var(--sp-2);
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   border-radius: var(--radius-sm);
   font-size: var(--type-body-5-size);
   line-height: var(--type-body-5-line-height);
@@ -3599,7 +3590,7 @@ body.is-resizing-panels * {
 }
 
 .file-tree-node-row:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
 }
 
 .file-tree-chevron {
@@ -3639,8 +3630,8 @@ body.is-resizing-panels * {
   align-items: center;
   justify-content: space-between;
   padding: var(--sp-3) var(--sp-4);
-  background: var(--bg-surface);
-  border-bottom: 1px solid var(--border);
+  background: var(--surface-panel);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .git-label {
@@ -3657,7 +3648,7 @@ body.is-resizing-panels * {
   align-items: center;
   gap: var(--sp-1);
   padding: var(--sp-1) var(--sp-2);
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   border-radius: var(--radius-sm);
   font-size: var(--type-body-5-size);
   line-height: var(--type-body-5-line-height);
@@ -3677,8 +3668,8 @@ body.is-resizing-panels * {
   flex-direction: column;
   gap: var(--sp-2);
   padding: var(--sp-3);
-  background: var(--bg-surface);
-  border-bottom: 1px solid var(--border);
+  background: var(--surface-panel);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .git-commit-input textarea {
@@ -3717,7 +3708,7 @@ body.is-resizing-panels * {
 
 .git-change-group-count {
   padding: var(--sp-1) var(--sp-2);
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   border-radius: var(--radius-sm);
   font-size: var(--type-body-6-size);
   line-height: var(--type-body-6-line-height);
@@ -3742,7 +3733,7 @@ body.is-resizing-panels * {
 }
 
 .git-change-row:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
 }
 
 .git-change-path {
@@ -3766,18 +3757,18 @@ body.is-resizing-panels * {
 }
 
 .git-status-staged {
-  background: rgba(108, 182, 255, 0.2);
-  color: var(--accent-blue);
+  background: var(--component-rgba-108-182-255-0-2);
+  color: var(--status-info-fg);
 }
 
 .git-status-unstaged {
-  background: rgba(241, 184, 106, 0.2);
-  color: var(--accent-amber);
+  background: var(--component-rgba-241-184-106-0-2);
+  color: var(--status-warning-fg);
 }
 
 .git-status-untracked {
-  background: rgba(120, 215, 178, 0.2);
-  color: var(--accent-green);
+  background: var(--component-rgba-120-215-178-0-2);
+  color: var(--status-success-fg);
 }
 
 /* Workspace Tab status dot */
@@ -3788,7 +3779,7 @@ body.is-resizing-panels * {
 }
 
 .workspace-tab-dot-running {
-  background: var(--accent-green);
+  background: var(--status-success-fg);
 }
 
 .workspace-tab-dot-idle {
@@ -3798,7 +3789,7 @@ body.is-resizing-panels * {
 /* Workspace Tab unread badge */
 .workspace-tab-badge {
   padding: var(--sp-1) var(--sp-2);
-  background: var(--accent-blue);
+  background: var(--status-info-fg);
   border-radius: var(--radius-full);
   font-size: var(--type-body-6-size);
   line-height: var(--type-body-6-line-height);
@@ -3821,9 +3812,9 @@ body.is-resizing-panels * {
   flex-direction: column;
   gap: var(--sp-2);
   padding: var(--sp-2) var(--sp-3);
-  background: var(--ws-session-header-bg);
-  backdrop-filter: var(--ws-backdrop-filter);
-  border-bottom: 1px solid var(--border);
+  background: var(--workspace-session-header-surface);
+  backdrop-filter: var(--material-backdrop-filter);
+  border-bottom: 1px solid var(--border-default);
 }
 
 /* Inactive strip — just an enable CTA in the sub-header slot */
@@ -3843,7 +3834,7 @@ body.is-resizing-panels * {
   height: 22px;
   padding: 0 var(--sp-2);
   background: transparent;
-  border: 1px dashed var(--border-light);
+  border: 1px dashed var(--border-subtle);
   border-radius: var(--radius-sm);
   color: var(--text-tertiary);
   font-family: var(--font-sans);
@@ -3899,18 +3890,18 @@ body.is-resizing-panels * {
   height: 6px;
   border-radius: 50%;
   background: var(--state-success-text);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--state-success-border) 40%, transparent);
+  box-shadow: 0 0 0 3px var(--component-mix-state-success-border-40pct-transparent);
 }
 
 .supervisor-pulse.supervisor-state-evaluating {
   background: var(--state-info-text);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--state-info-border) 40%, transparent);
+  box-shadow: 0 0 0 3px var(--component-mix-state-info-border-40pct-transparent);
   animation: supervisor-pulse 1.4s var(--ease-in-out) infinite;
 }
 
 .supervisor-pulse.supervisor-state-injecting {
   background: var(--state-warning-text);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--state-warning-border) 40%, transparent);
+  box-shadow: 0 0 0 3px var(--component-mix-state-warning-border-40pct-transparent);
   animation: supervisor-pulse 1.1s var(--ease-in-out) infinite;
 }
 
@@ -3921,7 +3912,7 @@ body.is-resizing-panels * {
 
 .supervisor-pulse.supervisor-state-error {
   background: var(--state-error-text);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--state-error-border) 40%, transparent);
+  box-shadow: 0 0 0 3px var(--component-mix-state-error-border-40pct-transparent);
 }
 
 .supervisor-pulse.supervisor-state-stopped {
@@ -4049,7 +4040,7 @@ body.is-resizing-panels * {
 }
 
 .supervisor-icon-btn:hover:not(:disabled) {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   color: var(--text-secondary);
 }
 
@@ -4074,15 +4065,15 @@ body.is-resizing-panels * {
   align-items: center;
   gap: var(--sp-2);
   padding: var(--sp-1) var(--sp-2);
-  background: var(--bg-terminal);
-  border: 1px solid var(--border);
+  background: var(--surface-input);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-sm);
   cursor: text;
   transition: border-color var(--duration-normal) var(--ease-out);
 }
 
 .supervisor-objective-row:hover {
-  border-color: var(--border-light);
+  border-color: var(--border-subtle);
 }
 
 .supervisor-objective-text {
@@ -4150,7 +4141,7 @@ body.is-resizing-panels * {
 }
 
 .supervisor-details-edit-btn:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--bg-hover) 76%, var(--accent-blue) 24%);
+  background: var(--component-mix-surface-hover-76pct-status-info-fg-24pct);
   color: var(--text-primary);
 }
 
@@ -4244,14 +4235,14 @@ body.is-resizing-panels * {
 .supervisor-details-surface {
   padding: var(--sp-3);
   border-radius: var(--radius-lg);
-  background: color-mix(in srgb, var(--bg-surface) 90%, var(--bg-page) 10%);
+  background: var(--component-mix-surface-panel-90pct-surface-page-10pct);
 }
 
 .supervisor-summary-card {
   padding: var(--sp-3);
   border: none;
   border-radius: var(--radius-lg);
-  background: color-mix(in srgb, var(--bg-surface) 90%, var(--bg-page) 10%);
+  background: var(--component-mix-surface-panel-90pct-surface-page-10pct);
   box-shadow: none;
 }
 
@@ -4273,7 +4264,7 @@ body.is-resizing-panels * {
 }
 
 .supervisor-meta-item--reasoning {
-  background: color-mix(in srgb, var(--bg-surface) 88%, var(--bg-page) 12%);
+  background: var(--component-mix-surface-panel-88pct-surface-page-12pct);
 }
 
 .supervisor-meta-label {
@@ -4330,15 +4321,15 @@ body.is-resizing-panels * {
   align-items: stretch;
   gap: var(--sp-2);
   padding: var(--sp-2);
-  background: color-mix(in srgb, var(--bg-page) 44%, var(--bg-surface) 56%);
-  border: 1px solid color-mix(in srgb, var(--border) 68%, var(--bg-page) 32%);
+  background: var(--component-mix-surface-page-44pct-surface-panel-56pct);
+  border: 1px solid var(--component-mix-border-default-68pct-surface-page-32pct);
   border-radius: var(--radius-md);
 }
 
 .supervisor-progress-item--active {
-  border-color: color-mix(in srgb, var(--accent-blue) 42%, var(--border) 58%);
-  background: color-mix(in srgb, var(--accent-blue) 7%, var(--bg-surface) 93%);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-blue) 16%, transparent);
+  border-color: var(--component-mix-status-info-fg-42pct-border-default-58pct);
+  background: var(--component-mix-status-info-fg-7pct-surface-panel-93pct);
+  box-shadow: inset 0 0 0 1px var(--component-mix-status-info-fg-16pct-transparent);
 }
 
 .supervisor-progress-item__rail {
@@ -4354,7 +4345,7 @@ body.is-resizing-panels * {
   bottom: 4px;
   left: 10px;
   width: 1px;
-  background: color-mix(in srgb, var(--border) 78%, transparent);
+  background: var(--component-mix-border-default-78pct-transparent);
 }
 
 .supervisor-progress-item:last-child .supervisor-progress-item__rail::after {
@@ -4368,24 +4359,24 @@ body.is-resizing-panels * {
   width: 14px;
   height: 14px;
   border-radius: var(--radius-pill);
-  border: 2px solid color-mix(in srgb, var(--border) 70%, var(--bg-page) 30%);
-  background: color-mix(in srgb, var(--bg-page) 74%, var(--bg-surface) 26%);
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg-page) 82%, transparent);
+  border: 2px solid var(--component-mix-border-default-70pct-surface-page-30pct);
+  background: var(--component-mix-surface-page-74pct-surface-panel-26pct);
+  box-shadow: 0 0 0 4px var(--component-mix-surface-page-82pct-transparent);
 }
 
 .supervisor-progress-item__marker--done {
-  border-color: color-mix(in srgb, var(--accent-green) 60%, var(--border) 40%);
-  background: color-mix(in srgb, var(--accent-green) 70%, var(--bg-surface) 30%);
+  border-color: var(--component-mix-status-success-fg-60pct-border-default-40pct);
+  background: var(--component-mix-status-success-fg-70pct-surface-panel-30pct);
 }
 
 .supervisor-progress-item__marker--in_progress {
-  border-color: color-mix(in srgb, var(--accent-blue) 62%, var(--border) 38%);
-  background: color-mix(in srgb, var(--accent-blue) 62%, var(--bg-surface) 38%);
+  border-color: var(--component-mix-status-info-fg-62pct-border-default-38pct);
+  background: var(--component-mix-status-info-fg-62pct-surface-panel-38pct);
 }
 
 .supervisor-progress-item__marker--pending {
-  border-color: color-mix(in srgb, var(--border) 72%, var(--bg-page) 28%);
-  background: color-mix(in srgb, var(--bg-page) 68%, var(--bg-surface) 32%);
+  border-color: var(--component-mix-border-default-72pct-surface-page-28pct);
+  background: var(--component-mix-surface-page-68pct-surface-panel-32pct);
 }
 
 .supervisor-progress-item__body {
@@ -4481,15 +4472,15 @@ body.is-resizing-panels * {
   flex-shrink: 0;
   padding: 0 var(--sp-1);
   border-radius: var(--radius-sm);
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   color: var(--text-tertiary);
   font-weight: var(--font-medium);
   letter-spacing: 0.06em;
 }
 
 .supervisor-history-item[data-trigger="manual"] .supervisor-history-trigger {
-  background: color-mix(in srgb, var(--accent-purple) 16%, var(--bg-surface));
-  color: var(--accent-purple);
+  background: var(--component-mix-icon-file-data-16pct-surface-panel);
+  color: var(--icon-file-data);
 }
 
 .supervisor-history-item[data-trigger="scheduled"] .supervisor-history-trigger {
@@ -4533,7 +4524,7 @@ body.is-resizing-panels * {
   font-size: var(--type-body-3-size);
   line-height: var(--type-body-3-line-height);
   font-weight: var(--type-body-3-weight);
-  color: var(--accent-pink);
+  color: var(--status-danger-fg);
   word-break: break-word;
 }
 
@@ -4545,8 +4536,8 @@ body.is-resizing-panels * {
 .objective-preview {
   margin: 0;
   padding: var(--sp-3);
-  background: var(--bg-terminal);
-  border: 1px solid var(--border);
+  background: var(--surface-input);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-md);
   font-family: var(--font-mono);
   font-size: var(--type-body-5-size);
@@ -4596,9 +4587,9 @@ body.is-resizing-panels * {
   align-items: flex-start;
   gap: var(--sp-3);
   padding: var(--sp-3);
-  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
+  border: 1px solid var(--component-mix-border-default-90pct-transparent);
   border-radius: var(--radius-md);
-  background: color-mix(in srgb, var(--bg-surface) 88%, var(--bg-hover));
+  background: var(--component-mix-surface-panel-88pct-surface-hover);
 }
 
 .supervisor-dialog-intro__icon {
@@ -4732,22 +4723,22 @@ body.is-resizing-panels * {
   flex-direction: column;
   gap: var(--gap-tight);
   padding: var(--sp-3);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-md);
-  background: var(--bg-surface);
+  background: var(--surface-panel);
   color: var(--text-primary);
   text-align: left;
   cursor: pointer;
 }
 
 .supervisor-restore-card:hover {
-  border-color: color-mix(in srgb, var(--border-strong) 72%, var(--border));
-  background: color-mix(in srgb, var(--bg-surface) 92%, var(--bg-hover));
+  border-color: var(--component-mix-border-strong-72pct-border-default);
+  background: var(--component-mix-surface-panel-92pct-surface-hover);
 }
 
 .supervisor-restore-card--selected {
   border-color: var(--icon-success);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--icon-success) 42%, transparent);
+  box-shadow: inset 0 0 0 1px var(--component-mix-icon-success-42pct-transparent);
 }
 
 .supervisor-restore-card__header {
@@ -4783,8 +4774,8 @@ body.is-resizing-panels * {
 }
 
 .modal-content {
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
+  background: var(--surface-panel);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-lg);
   min-width: 400px;
   max-width: 520px;
@@ -4796,7 +4787,7 @@ body.is-resizing-panels * {
   align-items: center;
   justify-content: space-between;
   padding: var(--sp-4) var(--sp-5);
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .modal-title {
@@ -4820,7 +4811,7 @@ body.is-resizing-panels * {
 
 .modal-close:hover {
   color: var(--text-primary);
-  background: var(--bg-hover);
+  background: var(--surface-hover);
 }
 
 .modal-body {
@@ -4835,7 +4826,7 @@ body.is-resizing-panels * {
   justify-content: flex-end;
   gap: var(--sp-3);
   padding: var(--sp-4) var(--sp-5);
-  border-top: 1px solid var(--border);
+  border-top: 1px solid var(--border-default);
 }
 
 .form-label {
@@ -4846,7 +4837,7 @@ body.is-resizing-panels * {
 }
 
 .form-error {
-  color: var(--pink);
+  color: var(--status-danger-fg);
   font-size: var(--type-body-5-size);
   line-height: var(--type-body-5-line-height);
   font-weight: var(--type-body-5-weight);
@@ -4860,8 +4851,8 @@ body.is-resizing-panels * {
   min-width: 400px;
   max-width: 480px;
   max-height: calc(100vh - var(--sp-16));
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
+  background: var(--surface-panel);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg);
   overflow: hidden;
@@ -4932,11 +4923,11 @@ body.is-resizing-panels * {
   line-height: var(--type-body-6-line-height);
   font-weight: var(--type-body-6-weight);
   color: var(--text-secondary);
-  background: var(--bg-hover);
+  background: var(--surface-hover);
 }
 
 .worktree-chip-branch {
-  color: var(--accent-blue);
+  color: var(--status-info-fg);
 }
 
 .worktree-chip-path {
@@ -4944,13 +4935,13 @@ body.is-resizing-panels * {
 }
 
 .worktree-chip-status.worktree-clean {
-  color: var(--state-success-text);
-  background: var(--state-success-bg);
+  color: var(--git-status-added-fg);
+  background: var(--git-status-added-bg);
 }
 
 .worktree-chip-status.worktree-dirty {
-  color: var(--state-warning-text);
-  background: var(--state-warning-bg);
+  color: var(--git-status-modified-fg);
+  background: var(--git-status-modified-bg);
 }
 
 .worktree-list-modal {
@@ -4978,7 +4969,7 @@ body.is-resizing-panels * {
   width: 100%;
   padding: var(--sp-2) var(--sp-3);
   background: transparent;
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-sm);
   cursor: pointer;
   text-align: left;
@@ -4990,7 +4981,7 @@ body.is-resizing-panels * {
 }
 
 .worktree-list-row__button:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
 }
 
 .worktree-list-row__name {
@@ -4999,7 +4990,7 @@ body.is-resizing-panels * {
 }
 
 .worktree-list-row__branch {
-  color: var(--accent-blue);
+  color: var(--status-info-fg);
   font-family: var(--font-mono);
   font-size: var(--type-body-5-size);
   line-height: var(--type-body-5-line-height);
@@ -5012,9 +5003,9 @@ body.is-resizing-panels * {
   gap: var(--sp-3);
   margin-bottom: var(--sp-4);
   padding: var(--sp-3);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-lg);
-  background: var(--bg-surface);
+  background: var(--surface-panel);
 }
 
 .worktree-summary-card__header {
@@ -5065,7 +5056,7 @@ body.is-resizing-panels * {
 
 .modal-tabs {
   display: flex;
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .modal-tab {
@@ -5082,12 +5073,12 @@ body.is-resizing-panels * {
 
 .modal-tab:hover {
   color: var(--text-primary);
-  background: var(--bg-hover);
+  background: var(--surface-hover);
 }
 
 .modal-tab.active {
   color: var(--text-primary);
-  border-bottom: 2px solid var(--accent-blue);
+  border-bottom: 2px solid var(--status-info-fg);
 }
 
 .worktree-content {
@@ -5182,7 +5173,7 @@ body.is-resizing-panels * {
 }
 
 .worktree-tree-node:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
 }
 
 .worktree-tree-icon {
@@ -5243,7 +5234,7 @@ body.is-resizing-panels * {
   gap: var(--sp-2);
   width: 100%;
   padding: var(--sp-3);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-md);
   background: transparent;
   color: var(--text-primary);
@@ -5253,7 +5244,7 @@ body.is-resizing-panels * {
 }
 
 .worktree-manager__row-main:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
 }
 
 .worktree-manager__row-name {
@@ -5326,7 +5317,7 @@ body.is-resizing-panels * {
 
 .shortcuts-category-tab.active {
   color: var(--text-primary);
-  background: var(--bg-active);
+  background: var(--surface-active);
   border-color: var(--border-focus);
 }
 
@@ -5334,7 +5325,7 @@ body.is-resizing-panels * {
   display: flex;
   flex-direction: column;
   gap: 0;
-  border-top: 1px solid var(--border);
+  border-top: 1px solid var(--border-default);
 }
 
 .shortcuts-item {
@@ -5345,12 +5336,12 @@ body.is-resizing-panels * {
   padding: var(--sp-3) var(--sp-4);
   background: transparent;
   border: none;
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
   border-radius: 0;
 }
 
 .shortcuts-item-custom {
-  background: color-mix(in srgb, var(--bg-active) 78%, var(--accent-amber) 22%);
+  background: var(--component-mix-surface-active-78pct-status-warning-fg-22pct);
 }
 
 .shortcuts-info {
@@ -5384,8 +5375,8 @@ body.is-resizing-panels * {
 
 .shortcuts-key {
   padding: var(--sp-2) var(--sp-3);
-  background: color-mix(in srgb, var(--bg-input) 82%, var(--bg-surface) 18%);
-  border: 1px solid var(--border);
+  background: var(--component-mix-surface-input-82pct-surface-panel-18pct);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-sm);
   font-family: var(--font-mono);
   font-size: var(--type-body-5-size);
@@ -5399,7 +5390,7 @@ body.is-resizing-panels * {
 
 .shortcuts-key:hover {
   border-color: var(--border-focus);
-  background: var(--bg-active);
+  background: var(--surface-active);
 }
 
 .shortcuts-capture {
@@ -5413,7 +5404,7 @@ body.is-resizing-panels * {
   justify-content: flex-start;
   margin-top: var(--sp-4);
   padding: var(--sp-3) var(--sp-4) 0;
-  border-top: 1px solid var(--border);
+  border-top: 1px solid var(--border-default);
 }
 
 /* ========== Input with Button ========== */
@@ -5434,8 +5425,8 @@ body.is-resizing-panels * {
   width: min(var(--desktop-modal-max-width-lg), 90vw);
   max-width: min(var(--desktop-modal-max-width-lg), 90vw);
   max-height: 85vh;
-  background: var(--bg-elevated);
-  border: 1px solid var(--border);
+  background: var(--surface-elevated);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-lg);
   overflow: hidden;
@@ -5447,7 +5438,7 @@ body.is-resizing-panels * {
   display: flex;
   justify-content: space-between;
   padding: var(--sp-5) var(--sp-6);
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .launch-header-left .launch-kicker {
@@ -5494,7 +5485,7 @@ body.is-resizing-panels * {
 }
 
 .launch-close-btn:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   color: var(--text-primary);
 }
 
@@ -5510,7 +5501,7 @@ body.is-resizing-panels * {
 
 .folder-picker {
   background: var(--bg);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-md);
   padding: var(--sp-3);
 }
@@ -5528,8 +5519,8 @@ body.is-resizing-panels * {
   line-height: var(--type-body-6-line-height);
   font-weight: var(--type-body-6-weight);
   color: var(--text-secondary);
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
+  background: var(--surface-panel);
+  border: 1px solid var(--border-default);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -5538,7 +5529,7 @@ body.is-resizing-panels * {
 }
 
 .fp-btn:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
 }
 
 .fp-root-chips {
@@ -5556,19 +5547,19 @@ body.is-resizing-panels * {
   line-height: var(--type-body-5-line-height);
   font-weight: var(--type-body-5-weight);
   color: var(--text-secondary);
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
+  background: var(--surface-panel);
+  border: 1px solid var(--border-default);
   cursor: pointer;
   transition: all var(--duration-fast) var(--ease-out);
 }
 
 .fp-chip:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
 }
 
 .fp-chip.active {
-  background: var(--bg-active);
-  border-color: var(--accent-blue);
+  background: var(--surface-active);
+  border-color: var(--status-info-fg);
   color: var(--text-primary);
 }
 
@@ -5588,7 +5579,7 @@ body.is-resizing-panels * {
 }
 
 .fp-dir:hover {
-  background: color-mix(in srgb, var(--state-selected-bg) 72%, transparent);
+  background: var(--component-mix-state-selected-bg-72pct-transparent);
 }
 
 .fp-dir.selected {
@@ -5643,7 +5634,7 @@ body.is-resizing-panels * {
 }
 
 .fp-dir-action:hover {
-  background: color-mix(in srgb, var(--state-info-bg) 78%, var(--bg-surface) 22%);
+  background: var(--component-mix-state-info-bg-78pct-surface-panel-22pct);
   border-color: var(--state-info-border);
   color: var(--text-primary);
 }
@@ -5651,12 +5642,12 @@ body.is-resizing-panels * {
 .fp-dir-action:focus-visible {
   outline: none;
   box-shadow: 0 0 0 var(--state-focus-ring-width)
-    color-mix(in srgb, var(--state-focus-ring-color) 24%, transparent);
+    var(--component-mix-state-focus-ring-color-24pct-transparent);
 }
 
 .launch-footer {
   padding: var(--sp-4) var(--sp-6);
-  border-top: 1px solid var(--border);
+  border-top: 1px solid var(--border-default);
   display: flex;
   justify-content: flex-end;
 }
@@ -5670,8 +5661,8 @@ body.is-resizing-panels * {
   padding: var(--sp-2) var(--sp-5);
   background: linear-gradient(
     180deg,
-    color-mix(in srgb, var(--accent-blue) 78%, white 22%) 0%,
-    color-mix(in srgb, var(--accent-blue) 92%, black 8%) 100%
+    var(--component-mix-status-info-fg-78pct-white-22pct) 0%,
+    var(--component-mix-status-info-fg-92pct-black-8pct) 100%
   );
   color: var(--text-inverse);
   border: none;
@@ -5752,7 +5743,7 @@ body.is-resizing-panels * {
 .directory-list {
   max-height: 300px;
   overflow-y: auto;
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-md);
   background: var(--bg);
 }
@@ -5780,7 +5771,7 @@ body.is-resizing-panels * {
   padding: var(--sp-2) var(--sp-3);
   cursor: pointer;
   transition: background var(--duration-fast) var(--ease-out);
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .directory-item:last-child {
@@ -5788,7 +5779,7 @@ body.is-resizing-panels * {
 }
 
 .directory-item:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
 }
 
 .directory-item--parent {
@@ -5796,7 +5787,7 @@ body.is-resizing-panels * {
 }
 
 .directory-item--selected {
-  background: var(--accent-bg);
+  background: var(--selection-accent-bg);
   color: var(--accent);
 }
 
@@ -5824,7 +5815,7 @@ body.is-resizing-panels * {
 .selected-path {
   margin-top: var(--sp-3);
   padding: var(--sp-2) var(--sp-3);
-  background: var(--accent-bg);
+  background: var(--selection-accent-bg);
   border-radius: var(--radius-sm);
   font-family: var(--font-mono);
   font-size: var(--type-body-5-size);
@@ -5868,9 +5859,9 @@ body.is-resizing-panels * {
 
 .btn:focus-visible {
   box-shadow:
-    0 0 0 2px var(--bg-page),
+    0 0 0 2px var(--surface-page),
     0 0 0 calc(var(--state-focus-ring-width) * 2)
-    color-mix(in srgb, var(--state-focus-ring-color) 35%, transparent);
+    var(--component-mix-state-focus-ring-color-35pct-transparent);
 }
 
 .btn:hover:not(:disabled) {
@@ -5878,25 +5869,25 @@ body.is-resizing-panels * {
 }
 
 .btn-primary {
-  background: var(--accent-blue);
+  background: var(--status-info-fg);
   color: var(--text-inverse);
 }
 
 .btn-primary:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--accent-blue) 84%, white 16%);
+  background: var(--component-mix-status-info-fg-84pct-white-16pct);
 }
 
 .btn-default,
 .btn-secondary {
-  background: color-mix(in srgb, var(--bg-surface) 84%, var(--accent-blue) 16%);
-  border-color: color-mix(in srgb, var(--border) 70%, var(--accent-blue) 30%);
+  background: var(--component-mix-surface-panel-84pct-status-info-fg-16pct);
+  border-color: var(--component-mix-border-default-70pct-status-info-fg-30pct);
   color: var(--text-primary);
 }
 
 .btn-default:hover:not(:disabled),
 .btn-secondary:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--bg-hover) 72%, var(--accent-blue) 28%);
-  border-color: color-mix(in srgb, var(--border-light) 70%, var(--accent-blue) 30%);
+  background: var(--component-mix-surface-hover-72pct-status-info-fg-28pct);
+  border-color: var(--component-mix-border-subtle-70pct-status-info-fg-30pct);
 }
 
 .btn-ghost {
@@ -5906,12 +5897,12 @@ body.is-resizing-panels * {
 }
 
 .btn-ghost:hover:not(:disabled) {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   color: var(--text-primary);
 }
 
 .btn-danger {
-  background: var(--accent-pink);
+  background: var(--status-danger-fg);
   color: var(--text-inverse);
 }
 
@@ -5933,8 +5924,8 @@ body.is-resizing-panels * {
 .input {
   height: var(--input-height-md);
   padding: 0 var(--sp-3);
-  background: var(--bg-page);
-  border: 1px solid var(--border);
+  background: var(--surface-page);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-md);
   color: var(--text-primary);
   font-family: var(--font-sans);
@@ -5949,13 +5940,13 @@ body.is-resizing-panels * {
 }
 
 .input:hover {
-  border-color: var(--border-light);
+  border-color: var(--border-subtle);
 }
 
 .input:focus {
-  border-color: var(--accent-blue);
+  border-color: var(--status-info-fg);
   box-shadow: 0 0 0 var(--state-focus-ring-width)
-    color-mix(in srgb, var(--state-focus-ring-color) 40%, transparent);
+    var(--component-mix-state-focus-ring-color-40pct-transparent);
 }
 
 textarea.input {
@@ -5981,35 +5972,35 @@ textarea.input {
 }
 
 .badge-blue {
-  background: color-mix(in srgb, var(--accent-blue) 15%, transparent);
-  color: var(--accent-blue);
+  background: var(--component-mix-status-info-fg-15pct-transparent);
+  color: var(--status-info-fg);
 }
 
 .badge-green {
-  background: color-mix(in srgb, var(--accent-green) 15%, transparent);
-  color: var(--accent-green);
+  background: var(--component-mix-status-success-fg-15pct-transparent);
+  color: var(--status-success-fg);
 }
 
 .badge-amber {
-  background: color-mix(in srgb, var(--accent-amber) 15%, transparent);
-  color: var(--accent-amber);
+  background: var(--component-mix-status-warning-fg-15pct-transparent);
+  color: var(--status-warning-fg);
 }
 
 .badge-pink {
-  background: color-mix(in srgb, var(--accent-pink) 15%, transparent);
-  color: var(--accent-pink);
+  background: var(--component-mix-status-danger-fg-15pct-transparent);
+  color: var(--status-danger-fg);
 }
 
 .badge-gray {
-  background: color-mix(in srgb, var(--text-tertiary) 15%, transparent);
+  background: var(--component-mix-text-tertiary-15pct-transparent);
   color: var(--text-tertiary);
 }
 
 .app-topbar {
   height: 36px;
   padding: 0 var(--sp-2);
-  background: color-mix(in srgb, var(--bg-surface) 95%, var(--accent-blue) 5%);
-  border-bottom: 1px solid var(--border);
+  background: var(--component-mix-surface-panel-95pct-status-info-fg-5pct);
+  border-bottom: 1px solid var(--border-default);
   box-shadow: none;
   gap: var(--gap-compact);
 }
@@ -6042,12 +6033,12 @@ textarea.input {
 }
 
 .topbar-tab:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   color: var(--text-secondary);
 }
 
 .topbar-tab.active {
-  background: var(--bg-active);
+  background: var(--surface-active);
   border-color: transparent;
   color: var(--text-primary);
   box-shadow: none;
@@ -6074,7 +6065,7 @@ textarea.input {
 }
 
 .topbar-close:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   color: var(--text-primary);
 }
 
@@ -6087,7 +6078,7 @@ textarea.input {
 
 .topbar-add:hover,
 .topbar-btn:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   color: var(--text-primary);
 }
 
@@ -6118,8 +6109,8 @@ textarea.input {
   height: 28px;
   padding: 0;
   border-radius: var(--radius-md);
-  border: 1px solid var(--border);
-  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  background: var(--surface-panel);
 }
 
 .connection-status-text {
@@ -6128,12 +6119,8 @@ textarea.input {
 
 .workspace-page {
   background:
-    radial-gradient(circle at top center, rgba(108, 182, 255, 0.06), transparent 32%),
-    color-mix(
-      in srgb,
-      var(--surface-page-bg) calc(var(--app-surface-opacity, 0.96) * 100%),
-      transparent
-    );
+    radial-gradient(circle at top center, var(--component-rgba-108-182-255-0-06), transparent 32%),
+    var(--workspace-page-surface);
 }
 
 .workspace-body {
@@ -6145,8 +6132,8 @@ textarea.input {
   flex-direction: column;
   width: 264px;
   min-width: 220px;
-  background: var(--bg-sidebar);
-  border-right: 1px solid var(--border);
+  background: var(--surface-muted);
+  border-right: 1px solid var(--border-default);
 }
 
 .nav-panel {
@@ -6159,7 +6146,7 @@ textarea.input {
 
 .panel-header {
   padding: var(--sp-3) var(--inset-control-inline) var(--inset-control-block);
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
   background: transparent;
   gap: var(--gap-default);
 }
@@ -6178,7 +6165,7 @@ textarea.input {
   height: 22px;
   padding: 0 var(--sp-2);
   border: none;
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   color: var(--text-secondary);
   margin-bottom: var(--gap-default);
 }
@@ -6194,13 +6181,13 @@ textarea.input {
 }
 
 .panel-branch-button:hover {
-  background: color-mix(in srgb, var(--bg-hover) 72%, var(--accent-blue) 28%);
+  background: var(--component-mix-surface-hover-72pct-status-info-fg-28pct);
   color: var(--text-primary);
 }
 
 .panel-branch-button:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-blue) 40%, transparent);
+  box-shadow: 0 0 0 2px var(--component-mix-status-info-fg-40pct-transparent);
 }
 
 .panel-tabs {
@@ -6227,11 +6214,11 @@ textarea.input {
 
 .panel-tab:hover {
   color: var(--text-secondary);
-  background: var(--bg-hover);
+  background: var(--surface-hover);
 }
 
 .panel-tab.active {
-  background: var(--accent-blue);
+  background: var(--status-info-fg);
   color: var(--text-inverse);
   font-weight: var(--type-body-6-weight);
 }
@@ -6239,7 +6226,7 @@ textarea.input {
 .panel-toolbar {
   justify-content: flex-start;
   padding: var(--gap-tight) var(--inset-control-inline);
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
   background: transparent;
 }
 
@@ -6257,7 +6244,7 @@ textarea.input {
 }
 
 .panel-toolbar-btn:hover {
-  background: color-mix(in srgb, var(--bg-hover) 72%, var(--accent-blue) 28%);
+  background: var(--component-mix-surface-hover-72pct-status-info-fg-28pct);
   color: var(--text-primary);
 }
 
@@ -6268,7 +6255,7 @@ textarea.input {
 
 .split-divider-v:hover,
 .split-divider-h:hover {
-  background: color-mix(in srgb, var(--border-focus) 44%, transparent 56%);
+  background: var(--component-mix-border-focus-44pct-transparent-56pct);
 }
 
 .file-tree {
@@ -6283,7 +6270,7 @@ textarea.input {
 }
 
 .tree-item:hover {
-  background: color-mix(in srgb, var(--state-selected-bg) 80%, transparent);
+  background: var(--component-mix-state-selected-bg-80pct-transparent);
 }
 
 .tree-item.selected {
@@ -6345,7 +6332,8 @@ textarea.input {
 .agent-draft-launcher {
   container-type: inline-size;
   background:
-    radial-gradient(circle at center, rgba(108, 182, 255, 0.08), transparent 30%), transparent;
+    radial-gradient(circle at center, var(--component-rgba-108-182-255-0-08), transparent 30%),
+    transparent;
 }
 
 .agent-draft-content {
@@ -6414,7 +6402,7 @@ textarea.input {
 }
 
 .agent-provider-card:hover {
-  border-color: var(--border-light);
+  border-color: var(--border-subtle);
 }
 
 .agent-provider-card-icon {
@@ -6483,7 +6471,7 @@ textarea.input {
 .agent-provider-card-guide {
   margin-top: var(--sp-3);
   padding-top: var(--sp-3);
-  border-top: 1px solid var(--border);
+  border-top: 1px solid var(--border-default);
   display: flex;
   flex-direction: column;
   gap: var(--sp-2);
@@ -6494,12 +6482,12 @@ textarea.input {
 }
 
 .agent-provider-card-guide a {
-  color: var(--accent-blue);
+  color: var(--status-info-fg);
   text-decoration: none;
 }
 
 .agent-provider-card-guide a:hover {
-  color: color-mix(in srgb, var(--accent-blue), white 20%);
+  color: var(--component-mix-status-info-fg-white-20pct);
   text-decoration: underline;
 }
 
@@ -6522,9 +6510,9 @@ textarea.input {
 }
 
 .session-card {
-  background: var(--bg-page);
+  background: var(--surface-page);
   backdrop-filter: none;
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-default);
   border-radius: 0;
 }
 
@@ -6540,8 +6528,8 @@ textarea.input {
 
 .session-header {
   padding: var(--gap-tight) var(--inset-control-inline);
-  border-bottom: 1px solid var(--border);
-  background: var(--bg-page);
+  border-bottom: 1px solid var(--border-default);
+  background: var(--surface-page);
 }
 
 .session-header-left {
@@ -6621,21 +6609,21 @@ textarea.input {
 }
 
 .session-action-btn:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   color: var(--text-primary);
 }
 
 .session-action-btn-close:hover {
-  color: var(--accent-pink);
+  color: var(--status-danger-fg);
 }
 
 .session-terminal {
-  background: var(--bg-terminal);
+  background: var(--surface-input);
 }
 
 .bottom-terminal {
-  background: var(--bg-terminal);
-  border-top: 1px solid var(--border);
+  background: var(--surface-input);
+  border-top: 1px solid var(--border-default);
 }
 
 .bottom-terminal-content {
@@ -6649,8 +6637,8 @@ textarea.input {
 .terminal-toolbar {
   padding: 3px 10px;
   gap: 6px;
-  border-bottom: 1px solid var(--border);
-  background: var(--bg-surface);
+  border-bottom: 1px solid var(--border-default);
+  background: var(--surface-panel);
 }
 
 .terminal-toolbar-left,
@@ -6691,9 +6679,9 @@ textarea.input {
 .terminal-selector-btn {
   height: 24px;
   padding: 0 6px;
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-default);
   border-radius: 4px;
-  background: var(--bg-page);
+  background: var(--surface-page);
   font-size: 11px;
   color: var(--text-secondary);
 }
@@ -6703,9 +6691,9 @@ textarea.input {
   align-items: center;
   gap: 2px;
   padding: 0 8px;
-  background: rgba(255, 255, 255, 0.02);
-  border-top: 1px solid rgba(255, 255, 255, 0.02);
-  border-bottom: 1px solid var(--border);
+  background: var(--component-rgba-255-255-255-0-02);
+  border-top: 1px solid var(--component-rgba-255-255-255-0-02);
+  border-bottom: 1px solid var(--border-default);
   overflow-x: auto;
 }
 
@@ -6719,8 +6707,8 @@ textarea.input {
 }
 
 .terminal-tab-active {
-  border-bottom-color: var(--accent-blue);
-  background: rgba(108, 182, 255, 0.05);
+  border-bottom-color: var(--status-info-fg);
+  background: var(--component-rgba-108-182-255-0-05);
 }
 
 .terminal-tab-label {
@@ -6736,14 +6724,14 @@ textarea.input {
 }
 
 .terminal-tab-close:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   border-radius: var(--radius-sm);
 }
 
 .bottom-terminal-xterm {
   flex: 1;
   min-height: 0;
-  background: var(--bg-terminal);
+  background: var(--surface-input);
 }
 
 .bottom-terminal-empty {
@@ -6807,15 +6795,15 @@ textarea.input {
 }
 
 .git-panel-commit-btn {
-  color: var(--accent-blue);
+  color: var(--status-info-fg);
 }
 
 .git-commit-input {
   margin: 8px 12px 10px;
   padding: 7px 10px;
   min-height: 32px;
-  background: rgba(10, 16, 20, 0.88);
-  border: 1px solid var(--border);
+  background: var(--component-rgba-10-16-20-0-88);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-md);
   color: var(--text-primary);
   resize: none;
@@ -6827,7 +6815,7 @@ textarea.input {
 }
 
 .git-commit-input:focus {
-  border-color: var(--accent-blue);
+  border-color: var(--status-info-fg);
 }
 
 .git-head-summary {
@@ -6836,9 +6824,9 @@ textarea.input {
   gap: 4px;
   margin: 0 12px 10px;
   padding: 8px 10px;
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-md);
-  background: color-mix(in srgb, var(--bg-hover) 72%, transparent);
+  background: var(--component-mix-surface-hover-72pct-transparent);
 }
 
 .git-head-summary__label {
@@ -6880,7 +6868,7 @@ textarea.input {
 }
 
 .git-group {
-  border-top: 1px solid var(--border);
+  border-top: 1px solid var(--border-default);
 }
 
 .git-group-header {
@@ -6897,7 +6885,7 @@ textarea.input {
 .git-group-count {
   padding: 1px 6px;
   border-radius: 3px;
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--component-rgba-255-255-255-0-04);
 }
 
 .git-row {
@@ -6913,7 +6901,7 @@ textarea.input {
 
 .git-row:hover,
 .git-row.active {
-  background: rgba(108, 182, 255, 0.08);
+  background: var(--component-rgba-108-182-255-0-08);
 }
 
 .git-row-icon {
@@ -6993,19 +6981,19 @@ textarea.input {
 }
 
 .git-row-status-staged {
-  color: var(--accent-green);
+  color: var(--status-success-fg);
 }
 
 .git-row-status-modified {
-  color: var(--accent-amber);
+  color: var(--status-warning-fg);
 }
 
 .git-row-status-deleted {
-  color: var(--accent-pink);
+  color: var(--status-danger-fg);
 }
 
 .git-row-status-untracked {
-  color: var(--accent-blue);
+  color: var(--status-info-fg);
 }
 
 .git-row-actions {
@@ -7028,7 +7016,7 @@ textarea.input {
 }
 
 .git-row-action:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   color: var(--text-primary);
 }
 
@@ -7046,8 +7034,9 @@ textarea.input {
   min-height: 0;
   padding: var(--editor-pane-inset);
   background:
-    radial-gradient(circle at top center, rgba(108, 182, 255, 0.05), transparent 26%),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 18%), var(--bg-page);
+    radial-gradient(circle at top center, var(--component-rgba-108-182-255-0-05), transparent 26%),
+    linear-gradient(180deg, var(--component-rgba-255-255-255-0-015), transparent 18%),
+    var(--surface-page);
 }
 
 .workspace-git-editor {
@@ -7055,8 +7044,8 @@ textarea.input {
   flex-direction: column;
   height: 100%;
   min-height: 0;
-  background: color-mix(in srgb, var(--bg-terminal) 92%, var(--bg-page) 8%);
-  border: 1px solid color-mix(in srgb, var(--border-light) 68%, var(--accent-blue) 32%);
+  background: var(--component-mix-surface-input-92pct-surface-page-8pct);
+  border: 1px solid var(--component-mix-border-subtle-68pct-status-info-fg-32pct);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-lg);
   overflow: hidden;
@@ -7071,8 +7060,8 @@ textarea.input {
   align-items: center;
   gap: var(--gap-default);
   padding: var(--gap-default) var(--editor-toolbar-inset);
-  border-bottom: 1px solid var(--border);
-  background: color-mix(in srgb, var(--bg-surface) 90%, var(--bg-terminal) 10%);
+  border-bottom: 1px solid var(--border-default);
+  background: var(--workspace-editor-toolbar-surface);
 }
 
 /* File editor shares Git Diff's container/header/body chrome; only the
@@ -7080,7 +7069,7 @@ textarea.input {
  * they sit naturally inside .workspace-git-editor. */
 .code-file-path .dirty-indicator {
   margin-left: 4px;
-  color: var(--accent-yellow, #f5c244);
+  color: var(--editor-dirty-indicator-fg);
 }
 
 .code-mode-btn:disabled {
@@ -7140,12 +7129,12 @@ textarea.input {
   justify-content: center;
   padding: var(--sp-6);
   overflow: auto;
-  background-color: color-mix(in srgb, var(--bg-terminal) 90%, var(--bg-page) 10%);
+  background-color: var(--component-mix-surface-input-90pct-surface-page-10pct);
   background-image:
-    linear-gradient(45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%),
-    linear-gradient(-45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.04) 75%),
-    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.04) 75%);
+    linear-gradient(45deg, var(--component-rgba-255-255-255-0-04) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--component-rgba-255-255-255-0-04) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--component-rgba-255-255-255-0-04) 75%),
+    linear-gradient(-45deg, transparent 75%, var(--component-rgba-255-255-255-0-04) 75%);
   background-size: 16px 16px;
   background-position:
     0 0,
@@ -7168,8 +7157,8 @@ textarea.input {
   justify-content: center;
   gap: var(--sp-3);
   padding: var(--gap-tight) var(--inset-control-inline);
-  border-top: 1px solid var(--border);
-  background: color-mix(in srgb, var(--bg-surface) 90%, var(--bg-terminal) 10%);
+  border-top: 1px solid var(--border-default);
+  background: var(--component-mix-surface-panel-90pct-surface-input-10pct);
   color: var(--text-tertiary);
   font-size: 11px;
   font-family: var(--font-mono);
@@ -7183,14 +7172,14 @@ textarea.input {
 .document-preview {
   display: flex;
   min-height: 100%;
-  background: var(--bg-page);
+  background: var(--surface-page);
 }
 
 .document-preview-frame {
   flex: 1;
   width: 100%;
   border: 0;
-  background: var(--bg-surface);
+  background: var(--surface-panel);
 }
 
 .document-preview--loading {
@@ -7213,7 +7202,7 @@ textarea.input {
   margin-left: auto;
   padding: var(--sp-1);
   border-radius: var(--radius-lg);
-  background: color-mix(in srgb, var(--bg-hover) 72%, var(--bg-surface) 28%);
+  background: var(--component-mix-surface-hover-72pct-surface-panel-28pct);
 }
 
 .editor-surface__toolbar .code-mode-btn {
@@ -7226,7 +7215,7 @@ textarea.input {
 }
 
 .editor-surface__mode-btn.active {
-  background: color-mix(in srgb, var(--accent-blue) 22%, transparent);
+  background: var(--component-mix-status-info-fg-22pct-transparent);
   color: var(--text-primary);
 }
 
@@ -7238,7 +7227,7 @@ textarea.input {
   display: flex;
   flex-direction: column;
   min-height: 100%;
-  background: var(--bg-terminal);
+  background: var(--surface-input);
 }
 
 .image-diff-preview__meta {
@@ -7246,7 +7235,7 @@ textarea.input {
   gap: var(--sp-3);
   align-items: center;
   padding: calc(var(--sp-2) + var(--gap-compact)) calc(var(--sp-3) + var(--gap-compact));
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
   color: var(--text-tertiary);
   font-size: var(--type-body-6-size);
   line-height: var(--type-body-6-line-height);
@@ -7265,7 +7254,7 @@ textarea.input {
   display: flex;
   flex-direction: column;
   min-height: 0;
-  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+  border-bottom: 1px solid var(--component-mix-border-default-70pct-transparent);
 }
 
 .image-diff-preview__pane:last-child {
@@ -7288,12 +7277,12 @@ textarea.input {
   justify-content: center;
   padding: var(--sp-4);
   overflow: auto;
-  background-color: color-mix(in srgb, var(--bg-terminal) 90%, var(--bg-page) 10%);
+  background-color: var(--component-mix-surface-input-90pct-surface-page-10pct);
   background-image:
-    linear-gradient(45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%),
-    linear-gradient(-45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.04) 75%),
-    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.04) 75%);
+    linear-gradient(45deg, var(--component-rgba-255-255-255-0-04) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--component-rgba-255-255-255-0-04) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--component-rgba-255-255-255-0-04) 75%),
+    linear-gradient(-45deg, transparent 75%, var(--component-rgba-255-255-255-0-04) 75%);
   background-size: 16px 16px;
   background-position:
     0 0,
@@ -7361,13 +7350,13 @@ textarea.input {
 }
 
 .git-diff-line-added {
-  background: var(--diff-add-bg);
-  color: #9ce7c8;
+  background: var(--diff-added-bg);
+  color: var(--diff-added-fg);
 }
 
 .git-diff-line-removed {
-  background: var(--diff-delete-bg);
-  color: #ffb7c4;
+  background: var(--diff-deleted-bg);
+  color: var(--diff-deleted-fg);
 }
 
 .git-diff-line-context {
@@ -7404,8 +7393,9 @@ textarea.input {
 /* ========== Workspace Visual Alignment ========== */
 .workspace-main-area {
   background:
-    radial-gradient(circle at top center, rgba(108, 182, 255, 0.05), transparent 28%),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 18%), var(--bg-page);
+    radial-gradient(circle at top center, var(--component-rgba-108-182-255-0-05), transparent 28%),
+    linear-gradient(180deg, var(--component-rgba-255-255-255-0-015), transparent 18%),
+    var(--surface-page);
 }
 
 .workspace-main-stage {
@@ -7424,7 +7414,16 @@ textarea.input {
 
 .pane-layout-divider {
   position: relative;
-  background: transparent;
+  background: linear-gradient(180deg, transparent, var(--state-info-bg), transparent);
+}
+
+.pane-layout-vertical-divider {
+  background: linear-gradient(
+    180deg,
+    transparent,
+    var(--component-mix-status-info-fg-24pct-transparent),
+    transparent
+  );
 }
 
 .pane-layout-divider::after {
@@ -7432,10 +7431,10 @@ textarea.input {
   position: absolute;
   pointer-events: none;
   border-radius: var(--radius-pill);
-  background: color-mix(in srgb, var(--border) 62%, transparent);
+  background: var(--component-mix-border-default-62pct-transparent);
 }
 
-.pane-layout-horizontal .pane-layout-divider::after {
+.pane-layout-horizontal-divider::after {
   top: 0;
   bottom: 0;
   left: 50%;
@@ -7443,21 +7442,30 @@ textarea.input {
   transform: translateX(-50%);
 }
 
-.pane-layout-vertical .pane-layout-divider::after {
+.pane-layout-vertical-divider::after {
   left: 0;
   right: 0;
   top: 50%;
   height: 1px;
+  background: var(--component-mix-border-default-78pct-status-info-fg-22pct);
   transform: translateY(-50%);
 }
 
 .pane-layout-divider:hover::after {
-  background: color-mix(in srgb, var(--border-focus) 58%, transparent);
+  background: var(--component-mix-border-focus-58pct-transparent);
+}
+
+.pane-layout-divider:hover {
+  background: var(--component-mix-border-focus-44pct-transparent-56pct);
 }
 
 .session-card {
-  background: linear-gradient(180deg, rgba(18, 26, 34, 0.94), rgba(11, 18, 24, 0.98));
-  border: 1px solid color-mix(in srgb, var(--border-light) 66%, var(--accent-blue) 34%);
+  background: linear-gradient(
+    180deg,
+    var(--component-rgba-18-26-34-0-94),
+    var(--component-rgba-11-18-24-0-98)
+  );
+  border: 1px solid var(--component-mix-border-subtle-66pct-status-info-fg-34pct);
   border-radius: 14px;
   box-shadow: var(--shadow-lg);
   overflow: hidden;
@@ -7470,9 +7478,13 @@ textarea.input {
 
 .session-header {
   padding: var(--gap-tight) var(--inset-control-inline);
-  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, var(--accent-blue) 28%);
-  background: linear-gradient(180deg, rgba(18, 26, 34, 0.96), rgba(14, 21, 28, 0.92));
-  backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--component-mix-border-default-72pct-status-info-fg-28pct);
+  background: linear-gradient(
+    180deg,
+    var(--component-rgba-18-26-34-0-96),
+    var(--component-rgba-14-21-28-0-92)
+  );
+  backdrop-filter: var(--component-blur-12px);
 }
 
 .session-title {
@@ -7491,14 +7503,14 @@ textarea.input {
 }
 
 .workspace-bottom-panel > .bottom-terminal {
-  border: 1px solid color-mix(in srgb, var(--border-light) 64%, var(--accent-blue) 36%);
+  border: 1px solid var(--component-mix-border-subtle-64pct-status-info-fg-36pct);
   border-radius: 0;
   box-shadow: var(--shadow-lg);
   overflow: hidden;
   background: linear-gradient(
     180deg,
-    color-mix(in srgb, var(--bg-terminal) 96%, white 4%),
-    color-mix(in srgb, var(--bg-terminal) 88%, var(--bg-page) 12%)
+    var(--component-mix-surface-input-96pct-white-4pct),
+    var(--component-mix-surface-input-88pct-surface-page-12pct)
   );
 }
 
@@ -7506,8 +7518,12 @@ textarea.input {
   min-height: 28px;
   padding: 2px 10px;
   gap: 8px;
-  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, var(--accent-blue) 28%);
-  background: linear-gradient(180deg, rgba(18, 26, 34, 0.96), rgba(14, 21, 28, 0.92));
+  border-bottom: 1px solid var(--component-mix-border-default-72pct-status-info-fg-28pct);
+  background: linear-gradient(
+    180deg,
+    var(--component-rgba-18-26-34-0-96),
+    var(--component-rgba-14-21-28-0-92)
+  );
 }
 
 .terminal-toolbar-left {
@@ -7521,10 +7537,10 @@ textarea.input {
   flex-shrink: 0;
   border-radius: 999px;
   margin-right: 12px;
-  background: #ff5f57;
+  background: var(--component-hex-ff5f57);
   box-shadow:
-    10px 0 0 #febc2e,
-    20px 0 0 #28c840;
+    10px 0 0 var(--component-hex-febc2e),
+    20px 0 0 var(--component-hex-28c840);
   opacity: 0.8;
 }
 
@@ -7540,19 +7556,19 @@ textarea.input {
   height: 24px;
   padding: 0 10px;
   border-radius: 999px;
-  border-color: color-mix(in srgb, var(--border-light) 70%, transparent);
-  background: rgba(255, 255, 255, 0.04);
+  border-color: var(--component-mix-border-subtle-70pct-transparent);
+  background: var(--component-rgba-255-255-255-0-04);
 }
 
 .terminal-selector-btn:hover {
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--component-rgba-255-255-255-0-06);
 }
 
 .bottom-terminal-tabs {
   padding: 0 12px;
-  background: rgba(8, 12, 16, 0.56);
-  border-top: 1px solid rgba(255, 255, 255, 0.02);
-  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, var(--accent-blue) 28%);
+  background: var(--component-rgba-8-12-16-0-56);
+  border-top: 1px solid var(--component-rgba-255-255-255-0-02);
+  border-bottom: 1px solid var(--component-mix-border-default-72pct-status-info-fg-28pct);
 }
 
 .terminal-tab {
@@ -7563,7 +7579,7 @@ textarea.input {
 }
 
 .terminal-tab-active {
-  background: rgba(108, 182, 255, 0.08);
+  background: var(--component-rgba-108-182-255-0-08);
 }
 
 .terminal-tab-close {
@@ -7587,7 +7603,7 @@ textarea.input {
 }
 
 .terminal-toggle-btn:hover {
-  background: var(--bg-elevated);
+  background: var(--surface-elevated);
   color: var(--text-primary);
 }
 
@@ -7605,8 +7621,8 @@ textarea.input {
   align-items: center;
   justify-content: center;
   height: 36px;
-  background: var(--bg-surface);
-  border-top: 1px solid var(--border);
+  background: var(--surface-panel);
+  border-top: 1px solid var(--border-default);
   flex-shrink: 0;
 }
 
@@ -7616,8 +7632,8 @@ textarea.input {
   gap: 6px;
   padding: 4px 12px;
   border-radius: 4px;
-  border: 1px solid var(--border);
-  background: var(--bg-elevated);
+  border: 1px solid var(--border-default);
+  background: var(--surface-elevated);
   color: var(--text-secondary);
   font-size: 11px;
   cursor: pointer;
@@ -7625,23 +7641,23 @@ textarea.input {
 }
 
 .terminal-collapsed-toggle:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   color: var(--text-primary);
-  border-color: var(--border-light);
+  border-color: var(--border-subtle);
 }
 
 .terminal-tab-close:hover {
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--component-rgba-255-255-255-0-06);
   color: var(--text-primary);
 }
 
 .code-editor-header {
   padding: var(--gap-default) var(--editor-toolbar-inset);
-  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, var(--accent-blue) 28%);
+  border-bottom: 1px solid var(--workspace-editor-toolbar-border);
   background: linear-gradient(
     180deg,
-    color-mix(in srgb, var(--bg-surface) 97%, white 3%),
-    color-mix(in srgb, var(--bg-surface) 84%, var(--bg-terminal) 16%)
+    var(--component-mix-surface-panel-97pct-white-3pct),
+    var(--component-mix-surface-panel-84pct-surface-input-16pct)
   );
 }
 
@@ -7657,7 +7673,7 @@ textarea.input {
   padding: var(--gap-compact);
   gap: var(--gap-compact);
   border-radius: var(--radius-lg);
-  background: color-mix(in srgb, var(--bg-hover) 72%, var(--bg-surface) 28%);
+  background: var(--component-mix-surface-hover-72pct-surface-panel-28pct);
 }
 
 .code-mode-btn {
@@ -7672,8 +7688,8 @@ textarea.input {
 
 .app-topbar {
   padding: 0 var(--sp-2);
-  background: color-mix(in srgb, var(--bg-surface) 95%, var(--accent-blue) 5%);
-  border-bottom-color: color-mix(in srgb, var(--border) 70%, var(--accent-blue) 30%);
+  background: var(--component-mix-surface-panel-95pct-status-info-fg-5pct);
+  border-bottom-color: var(--component-mix-border-default-70pct-status-info-fg-30pct);
 }
 
 .topbar-tabs {
@@ -7694,11 +7710,11 @@ textarea.input {
 .topbar-tab.active {
   background: linear-gradient(
     180deg,
-    color-mix(in srgb, var(--bg-active) 90%, white 10%),
-    color-mix(in srgb, var(--bg-active) 94%, var(--bg-surface) 6%)
+    var(--component-mix-surface-active-90pct-white-10pct),
+    var(--component-mix-surface-active-94pct-surface-panel-6pct)
   );
-  border: 1px solid color-mix(in srgb, var(--border-light) 68%, var(--accent-blue) 32%);
-  box-shadow: inset 0 1px 0 color-mix(in srgb, white 6%, transparent);
+  border: 1px solid var(--component-mix-border-subtle-68pct-status-info-fg-32pct);
+  box-shadow: inset 0 1px 0 var(--component-mix-white-6pct-transparent);
 }
 
 .topbar-tab-name {
@@ -7706,15 +7722,15 @@ textarea.input {
 }
 
 .topbar-dot.active {
-  box-shadow: 0 0 0 var(--sp-1) color-mix(in srgb, var(--color-success) 12%, transparent);
+  box-shadow: 0 0 0 var(--sp-1) var(--component-mix-status-success-fg-12pct-transparent);
 }
 
 .topbar-unread {
   min-width: 18px;
   height: 18px;
   border-radius: var(--radius-pill);
-  background: color-mix(in srgb, var(--accent-blue) 82%, white 18%);
-  color: #081118;
+  background: var(--component-mix-status-info-fg-82pct-white-18pct);
+  color: var(--component-hex-081118);
   font-family: var(--font-sans);
   font-size: var(--type-body-6-size);
   line-height: var(--type-body-6-line-height);
@@ -7749,23 +7765,27 @@ textarea.input {
 
 .connection-status {
   width: 30px;
-  border-color: color-mix(in srgb, var(--border-light) 72%, transparent);
-  background: color-mix(in srgb, var(--bg-surface) 88%, var(--bg-page) 12%);
+  border-color: var(--component-mix-border-subtle-72pct-transparent);
+  background: var(--component-mix-surface-panel-88pct-surface-page-12pct);
 }
 
 .left-panel {
-  background: var(--bg-sidebar);
+  background: var(--surface-muted);
   box-shadow: none;
 }
 
 .panel-header {
   padding: var(--sp-3) var(--inset-control-inline) var(--inset-control-block);
-  background: linear-gradient(180deg, rgba(18, 26, 34, 0.8), rgba(14, 21, 28, 0.28));
-  border-bottom-color: color-mix(in srgb, var(--border) 72%, var(--accent-blue) 28%);
+  background: linear-gradient(
+    180deg,
+    var(--component-rgba-18-26-34-0-8),
+    var(--component-rgba-14-21-28-0-28)
+  );
+  border-bottom-color: var(--component-mix-border-default-72pct-status-info-fg-28pct);
 }
 
 .panel-kicker {
-  color: color-mix(in srgb, var(--text-tertiary) 82%, var(--accent-blue) 18%);
+  color: var(--component-mix-text-tertiary-82pct-status-info-fg-18pct);
 }
 
 .panel-branch {
@@ -7785,8 +7805,8 @@ textarea.input {
 .panel-toolbar {
   min-height: 34px;
   padding: var(--gap-tight) var(--inset-control-block);
-  background: color-mix(in srgb, var(--surface-panel-bg) 96%, transparent);
-  border-bottom-color: color-mix(in srgb, var(--border) 72%, var(--accent-blue) 28%);
+  background: var(--component-mix-surface-panel-bg-96pct-transparent);
+  border-bottom-color: var(--component-mix-border-default-72pct-status-info-fg-28pct);
 }
 
 .panel-toolbar-btn {
@@ -7815,18 +7835,18 @@ textarea.input {
 }
 
 .tree-item:hover {
-  background: color-mix(in srgb, var(--state-selected-bg) 72%, transparent);
+  background: var(--component-mix-state-selected-bg-72pct-transparent);
 }
 
 .tree-item.selected {
   background: var(--state-selected-bg);
   box-shadow:
     inset var(--state-focus-ring-width) 0 0 var(--state-selected-border),
-    inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
+    inset 0 1px 0 var(--component-mix-white-4pct-transparent);
 }
 
 .tree-chevron {
-  color: color-mix(in srgb, var(--text-tertiary) 78%, var(--accent-blue) 22%);
+  color: var(--component-mix-text-tertiary-78pct-status-info-fg-22pct);
 }
 
 .tree-label {
@@ -7855,11 +7875,11 @@ textarea.input {
   width: 8px;
   height: 8px;
   box-shadow: 0 0 0 4px
-    color-mix(in srgb, var(--status-dot-current-color, var(--text-tertiary)) 12%, transparent);
+    var(--component-mix-status-dot-current-color-var-text-tertiary-12pct-transparent);
 }
 
 .session-dot-running {
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--terminal-state-running-border) 32%, transparent);
+  box-shadow: 0 0 0 4px var(--component-mix-terminal-state-running-border-32pct-transparent);
 }
 
 .session-title-row {
@@ -7875,8 +7895,8 @@ textarea.input {
 .session-terminal {
   background: linear-gradient(
     180deg,
-    color-mix(in srgb, var(--bg-terminal) 98%, white 2%),
-    color-mix(in srgb, var(--bg-terminal) 90%, var(--bg-page) 10%)
+    var(--component-mix-surface-input-98pct-white-2pct),
+    var(--component-mix-surface-input-90pct-surface-page-10pct)
   );
 }
 
@@ -7888,16 +7908,20 @@ textarea.input {
   place-items: center;
   padding: var(--sp-8);
   background:
-    radial-gradient(circle at top left, rgba(120, 215, 178, 0.08), transparent 24%),
-    radial-gradient(circle at bottom right, rgba(108, 182, 255, 0.1), transparent 28%);
+    radial-gradient(circle at top left, var(--component-rgba-120-215-178-0-08), transparent 24%),
+    radial-gradient(circle at bottom right, var(--component-rgba-108-182-255-0-1), transparent 28%);
 }
 
 .workspace-empty-inner,
 .workspace-resolving-card {
   width: min(920px, 100%);
-  border: 1px solid color-mix(in srgb, var(--border) 72%, var(--accent-blue) 28%);
+  border: 1px solid var(--component-mix-border-default-72pct-status-info-fg-28pct);
   border-radius: calc(var(--radius-xl) + var(--sp-1));
-  background: linear-gradient(180deg, rgba(17, 24, 31, 0.96), rgba(10, 16, 20, 0.98));
+  background: linear-gradient(
+    180deg,
+    var(--component-rgba-17-24-31-0-96),
+    var(--component-rgba-10-16-20-0-98)
+  );
   box-shadow: var(--shadow-lg);
 }
 
@@ -7919,7 +7943,7 @@ textarea.input {
 }
 
 .workspace-resolving-kicker {
-  color: color-mix(in srgb, var(--text-tertiary) 80%, var(--accent-blue) 20%);
+  color: var(--component-mix-text-tertiary-80pct-status-info-fg-20pct);
   font-size: var(--type-body-6-size);
   line-height: var(--type-body-6-line-height);
   font-weight: var(--type-body-6-weight);
@@ -7948,9 +7972,13 @@ textarea.input {
 .workspace-resolving-preview {
   margin-top: var(--sp-8);
   overflow: hidden;
-  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--accent-blue) 22%);
+  border: 1px solid var(--component-mix-border-default-78pct-status-info-fg-22pct);
   border-radius: calc(var(--radius-xl) + var(--sp-1));
-  background: linear-gradient(180deg, rgba(13, 20, 26, 0.96), rgba(8, 13, 18, 0.98));
+  background: linear-gradient(
+    180deg,
+    var(--component-rgba-13-20-26-0-96),
+    var(--component-rgba-8-13-18-0-98)
+  );
 }
 
 .workspace-resolving-preview-topbar {
@@ -7959,8 +7987,12 @@ textarea.input {
   gap: var(--sp-2);
   height: 36px;
   padding: 0 var(--sp-3);
-  border-bottom: 1px solid var(--border);
-  background: linear-gradient(180deg, rgba(17, 24, 31, 0.98), rgba(13, 20, 26, 0.92));
+  border-bottom: 1px solid var(--border-default);
+  background: linear-gradient(
+    180deg,
+    var(--component-rgba-17-24-31-0-98),
+    var(--component-rgba-13-20-26-0-92)
+  );
 }
 
 .workspace-resolving-preview-body {
@@ -7974,8 +8006,12 @@ textarea.input {
   flex-direction: column;
   gap: var(--sp-3);
   padding: var(--sp-4);
-  border-right: 1px solid var(--border);
-  background: linear-gradient(180deg, rgba(13, 20, 26, 0.98), rgba(11, 18, 24, 0.98));
+  border-right: 1px solid var(--border-default);
+  background: linear-gradient(
+    180deg,
+    var(--component-rgba-13-20-26-0-98),
+    var(--component-rgba-11-18-24-0-98)
+  );
 }
 
 .workspace-resolving-preview-main {
@@ -7994,12 +8030,20 @@ textarea.input {
 }
 
 .workspace-resolving-console {
-  background: radial-gradient(circle at top, rgba(108, 182, 255, 0.05), transparent 32%);
+  background: radial-gradient(
+    circle at top,
+    var(--component-rgba-108-182-255-0-05),
+    transparent 32%
+  );
 }
 
 .workspace-resolving-terminal {
-  border-top: 1px solid var(--border);
-  background: linear-gradient(180deg, rgba(11, 18, 24, 0.98), rgba(9, 15, 20, 1));
+  border-top: 1px solid var(--border-default);
+  background: linear-gradient(
+    180deg,
+    var(--component-rgba-11-18-24-0-98),
+    var(--component-rgba-9-15-20-1)
+  );
 }
 
 .workspace-resolving-console-status {
@@ -8007,7 +8051,7 @@ textarea.input {
   height: var(--status-dot-size);
   border-radius: var(--radius-chip);
   background: var(--state-success-text);
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--state-success-border) 32%, transparent);
+  box-shadow: 0 0 0 4px var(--component-mix-state-success-border-32pct-transparent);
 }
 
 .workspace-resolving-pill,
@@ -8017,7 +8061,7 @@ textarea.input {
   display: block;
   overflow: hidden;
   border-radius: var(--radius-md);
-  background: color-mix(in srgb, var(--bg-hover) 74%, var(--bg-surface) 26%);
+  background: var(--component-mix-surface-hover-74pct-surface-panel-26pct);
 }
 
 .workspace-resolving-pill::after,
@@ -8027,7 +8071,12 @@ textarea.input {
   position: absolute;
   inset: 0;
   transform: translateX(-100%);
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--component-rgba-255-255-255-0-08),
+    transparent
+  );
   animation: workspaceResolvingShimmer 1.8s var(--ease-in-out) infinite;
 }
 
@@ -8037,7 +8086,11 @@ textarea.input {
 }
 
 .workspace-resolving-pill-active {
-  background: linear-gradient(90deg, rgba(108, 182, 255, 0.22), rgba(108, 182, 255, 0.1));
+  background: linear-gradient(
+    90deg,
+    var(--component-rgba-108-182-255-0-22),
+    var(--component-rgba-108-182-255-0-1)
+  );
 }
 
 .workspace-resolving-pill-short {
@@ -8095,14 +8148,14 @@ textarea.input {
 
   .workspace-resolving-preview-sidebar {
     border-right: none;
-    border-bottom: 1px solid var(--border);
+    border-bottom: 1px solid var(--border-default);
   }
 }
 
 /* ========== Workspace Visual Alignment Pass 2 ========== */
 .workspace-main-area {
   min-width: 0;
-  background: var(--bg-page);
+  background: var(--surface-page);
 }
 
 .workspace-main-stage > .agent-panes {
@@ -8134,7 +8187,7 @@ textarea.input {
 .left-panel {
   width: 280px;
   min-width: 220px;
-  background: var(--bg-sidebar);
+  background: var(--surface-muted);
   box-shadow: none;
 }
 
@@ -8146,7 +8199,7 @@ textarea.input {
   min-height: var(--panel-header-height);
   padding: var(--gap-tight) var(--inset-control-inline);
   background: transparent;
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .panel-header__leading {
@@ -8242,13 +8295,13 @@ textarea.input {
 }
 
 .panel-branch-button:hover {
-  background: color-mix(in srgb, var(--bg-hover) 72%, var(--accent-blue) 28%);
+  background: var(--component-mix-surface-hover-72pct-status-info-fg-28pct);
   color: var(--text-primary);
 }
 
 .panel-branch-button:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-blue) 40%, transparent);
+  box-shadow: 0 0 0 2px var(--component-mix-status-info-fg-40pct-transparent);
 }
 
 .panel-tabs {
@@ -8268,7 +8321,7 @@ textarea.input {
 }
 
 .panel-tab.active {
-  background: var(--accent-blue);
+  background: var(--status-info-fg);
   color: var(--text-inverse);
   font-weight: var(--type-body-6-weight);
 }
@@ -8277,7 +8330,7 @@ textarea.input {
   min-height: calc(var(--control-height-sm) + var(--gap-tight));
   padding: var(--gap-tight) var(--inset-control-inline);
   background: transparent;
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .file-tree-shell {
@@ -8292,7 +8345,7 @@ textarea.input {
   align-items: center;
   gap: var(--sp-3);
   padding: var(--sp-3) var(--sp-3) var(--sp-2);
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .file-tree-search-icon {
@@ -8382,19 +8435,15 @@ textarea.input {
 }
 
 .session-card {
-  background: color-mix(
-    in srgb,
-    var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.96) * 100%),
-    transparent
-  );
+  background: var(--workspace-session-idle-surface);
   border: none;
   border-radius: 0;
   box-shadow: none;
-  backdrop-filter: var(--app-surface-backdrop-filter, none);
+  backdrop-filter: var(--material-backdrop-filter);
 }
 
 .session-card.session-card--active {
-  background: var(--bg-active);
+  background: var(--surface-active);
   box-shadow: inset 0 0 0 1px var(--border-focus);
 }
 
@@ -8405,22 +8454,18 @@ textarea.input {
 
 .session-header {
   padding: var(--gap-tight) var(--inset-control-inline);
-  border-bottom: 1px solid var(--border);
-  background: color-mix(
-    in srgb,
-    var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.96) * 100%),
-    transparent
-  );
-  backdrop-filter: var(--app-surface-backdrop-filter, none);
+  border-bottom: 1px solid var(--border-default);
+  background: var(--workspace-session-idle-header-surface);
+  backdrop-filter: var(--material-backdrop-filter);
 }
 
 .session-card.session-card--active .session-header {
-  background: color-mix(in srgb, var(--bg-active) 88%, var(--bg-page) 12%);
+  background: var(--component-mix-surface-active-88pct-surface-page-12pct);
   border-bottom-color: var(--border-focus);
 }
 
 .session-card.session-card--active > .panel-header {
-  background: color-mix(in srgb, var(--bg-active) 88%, var(--bg-page) 12%);
+  background: var(--component-mix-surface-active-88pct-surface-page-12pct);
   border-bottom-color: var(--border-focus);
 }
 
@@ -8460,7 +8505,7 @@ textarea.input {
 
 .session-dot-running {
   background: var(--terminal-state-running-text);
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--terminal-state-running-border) 32%, transparent);
+  box-shadow: 0 0 0 4px var(--component-mix-terminal-state-running-border-32pct-transparent);
 }
 
 .session-provider-badge,
@@ -8478,21 +8523,21 @@ textarea.input {
 }
 
 .session-card > .panel-header .session-state-badge.badge-green {
-  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
-  background: color-mix(in srgb, currentColor 12%, transparent);
+  border: 1px solid var(--component-mix-current-color-22pct-transparent);
+  background: var(--component-mix-current-color-12pct-transparent);
 }
 
 [data-theme$="-dark"] .session-card > .panel-header .session-state-badge.badge-green {
   box-shadow:
-    inset 0 1px 0 color-mix(in srgb, white 8%, transparent),
-    0 0 0 1px color-mix(in srgb, currentColor 10%, transparent),
-    0 8px 18px color-mix(in srgb, currentColor 16%, transparent);
+    inset 0 1px 0 var(--component-mix-white-8pct-transparent),
+    0 0 0 1px var(--component-mix-current-color-10pct-transparent),
+    0 8px 18px var(--component-mix-current-color-16pct-transparent);
 }
 
 [data-theme$="-light"] .session-card > .panel-header .session-state-badge.badge-green {
   box-shadow:
-    inset 0 1px 0 color-mix(in srgb, white 50%, transparent),
-    0 0 0 1px color-mix(in srgb, currentColor 8%, transparent);
+    inset 0 1px 0 var(--component-mix-white-50pct-transparent),
+    0 0 0 1px var(--component-mix-current-color-8pct-transparent);
 }
 
 .session-card > .panel-header.session-header--running {
@@ -8532,6 +8577,14 @@ textarea.input {
   border-radius: 4px;
 }
 
+.session-action-btn-drag {
+  cursor: grab;
+}
+
+body.is-dragging-pane .session-action-btn-drag {
+  cursor: grabbing;
+}
+
 .workspace-bottom-panel {
   display: flex;
   flex-direction: column;
@@ -8547,20 +8600,16 @@ textarea.input {
   flex: 1;
   min-height: 0;
   border: none;
-  background: color-mix(
-    in srgb,
-    var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.96) * 100%),
-    transparent
-  );
-  backdrop-filter: var(--app-surface-backdrop-filter, none);
+  background: var(--workspace-bottom-terminal-surface);
+  backdrop-filter: var(--material-backdrop-filter);
 }
 
 .terminal-toolbar {
   min-height: 28px;
   padding: 3px 10px;
   gap: 6px;
-  border-bottom: 1px solid var(--border);
-  background: var(--bg-surface);
+  border-bottom: 1px solid var(--border-default);
+  background: var(--surface-panel);
 }
 
 .terminal-toolbar-left,
@@ -8621,8 +8670,8 @@ textarea.input {
   max-width: 240px;
   padding: 0 8px;
   border-radius: 4px;
-  border: 1px solid var(--border);
-  background: var(--bg-page);
+  border: 1px solid var(--border-default);
+  background: var(--surface-page);
   color: var(--text-secondary);
   font-size: 11px;
 }
@@ -8659,8 +8708,12 @@ textarea.input {
 }
 
 .topbar-tab.active {
-  background: linear-gradient(180deg, rgba(43, 60, 75, 0.94), rgba(30, 44, 56, 0.98));
-  border-color: color-mix(in srgb, var(--border-light) 72%, var(--accent-blue) 28%);
+  background: linear-gradient(
+    180deg,
+    var(--component-rgba-43-60-75-0-94),
+    var(--component-rgba-30-44-56-0-98)
+  );
+  border-color: var(--component-mix-border-subtle-72pct-status-info-fg-28pct);
 }
 
 .topbar-tab-content {
@@ -8741,7 +8794,7 @@ textarea.input {
 }
 
 .topbar-dot.idle {
-  background: color-mix(in srgb, var(--text-tertiary) 84%, var(--accent-blue) 16%);
+  background: var(--component-mix-text-tertiary-84pct-status-info-fg-16pct);
 }
 
 .topbar-close {
@@ -8796,7 +8849,7 @@ textarea.input {
 .terminal-selector-dropdown {
   margin-top: 6px;
   min-width: 180px;
-  background: var(--bg-surface);
+  background: var(--surface-panel);
   border-radius: 6px;
 }
 
@@ -8822,9 +8875,9 @@ textarea.input {
 .bottom-terminal-tabs {
   gap: 2px;
   padding: 0 12px;
-  background: var(--bg-surface);
+  background: var(--surface-panel);
   border-top: none;
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .terminal-tab-shell {
@@ -8852,7 +8905,7 @@ textarea.input {
 .terminal-tab.active,
 .terminal-tab-active {
   background: transparent;
-  border-bottom-color: var(--accent-blue);
+  border-bottom-color: var(--status-info-fg);
   color: var(--text-primary);
 }
 
@@ -8884,7 +8937,7 @@ textarea.input {
 }
 
 .terminal-tab-close:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   color: var(--text-primary);
 }
 
@@ -8919,8 +8972,8 @@ textarea.input {
   gap: var(--sp-3);
   padding: var(--sp-3) var(--sp-4);
   border-radius: var(--radius-lg);
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
+  background: var(--surface-panel);
+  border: 1px solid var(--border-default);
   box-shadow: var(--shadow-lg);
   pointer-events: auto;
   animation: toastSlideIn var(--duration-slower) var(--ease-out);
@@ -8928,21 +8981,21 @@ textarea.input {
 }
 
 .toast:hover {
-  border-color: var(--border-light);
+  border-color: var(--border-subtle);
   box-shadow: var(--shadow-xl);
 }
 
 .toast--success {
-  border-left: 3px solid var(--color-success);
+  border-left: 3px solid var(--status-success-fg);
 }
 .toast--error {
-  border-left: 3px solid var(--color-error);
+  border-left: 3px solid var(--status-danger-fg);
 }
 .toast--warning {
-  border-left: 3px solid var(--color-warning);
+  border-left: 3px solid var(--status-warning-fg);
 }
 .toast--info {
-  border-left: 3px solid var(--color-info);
+  border-left: 3px solid var(--status-info-fg);
 }
 
 .toast__icon {
@@ -8999,7 +9052,7 @@ textarea.input {
 }
 
 .toast__close:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   color: var(--text-primary);
 }
 
@@ -9013,46 +9066,42 @@ textarea.input {
   max-width: min(var(--desktop-modal-max-width-lg), 90vw);
   background: linear-gradient(
     180deg,
-    color-mix(in srgb, var(--bg-surface) 97%, white 3%),
-    color-mix(in srgb, var(--bg-surface) 82%, var(--bg-page) 18%)
+    var(--component-mix-surface-panel-97pct-white-3pct),
+    var(--component-mix-surface-panel-82pct-surface-page-18pct)
   );
-  border-color: color-mix(in srgb, var(--border-light) 64%, var(--accent-blue) 36%);
+  border-color: var(--component-mix-border-subtle-64pct-status-info-fg-36pct);
   box-shadow: var(--shadow-xl);
 }
 
 .app-topbar {
   min-height: var(--desktop-topbar-height);
-  background: color-mix(
-    in srgb,
-    var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.96) * 100%),
-    transparent
-  );
-  border-bottom-color: color-mix(in srgb, var(--border) 80%, var(--accent-blue) 20%);
-  backdrop-filter: var(--app-surface-backdrop-filter, none);
+  background: var(--material-shell-topbar);
+  border-bottom-color: var(--component-mix-border-default-80pct-status-info-fg-20pct);
+  backdrop-filter: var(--material-backdrop-filter);
 }
 
 .topbar-tab.active {
   background: linear-gradient(
     180deg,
-    color-mix(in srgb, var(--bg-active) 86%, white 14%),
-    color-mix(in srgb, var(--bg-active) 94%, var(--bg-surface) 6%)
+    var(--component-mix-surface-active-86pct-white-14pct),
+    var(--component-mix-surface-active-94pct-surface-panel-6pct)
   );
-  border-color: color-mix(in srgb, var(--border-light) 72%, var(--accent-blue) 28%);
-  box-shadow: inset 0 1px 0 color-mix(in srgb, white 22%, transparent);
+  border-color: var(--component-mix-border-subtle-72pct-status-info-fg-28pct);
+  box-shadow: inset 0 1px 0 var(--component-mix-white-22pct-transparent);
 }
 
 .connection-status {
-  border-color: color-mix(in srgb, var(--border-light) 72%, transparent);
-  background: color-mix(in srgb, var(--bg-surface) 88%, var(--bg-page) 12%);
+  border-color: var(--component-mix-border-subtle-72pct-transparent);
+  background: var(--component-mix-surface-panel-88pct-surface-page-12pct);
 }
 
 .workspace-empty-inner,
 .workspace-resolving-card {
-  border: 1px solid color-mix(in srgb, var(--border) 72%, var(--accent-blue) 28%);
+  border: 1px solid var(--component-mix-border-default-72pct-status-info-fg-28pct);
   background: linear-gradient(
     180deg,
-    color-mix(in srgb, var(--bg-surface) 97%, white 3%),
-    color-mix(in srgb, var(--bg-surface) 82%, var(--bg-page) 18%)
+    var(--component-mix-surface-panel-97pct-white-3pct),
+    var(--component-mix-surface-panel-82pct-surface-page-18pct)
   );
   box-shadow: var(--shadow-lg);
 }
@@ -9076,9 +9125,9 @@ textarea.input {
   position: relative;
   min-height: 220px;
   padding: var(--desktop-panel-padding);
-  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
+  border: 1px solid var(--component-mix-border-default-78pct-transparent);
   border-radius: var(--radius-xl);
-  background: var(--bg-panel);
+  background: var(--surface-panel);
   box-shadow: var(--shadow-lg);
   overflow: hidden;
 }
@@ -9143,81 +9192,81 @@ textarea.input {
 .workspace-resolving-preview {
   background: linear-gradient(
     180deg,
-    color-mix(in srgb, var(--bg-terminal) 98%, white 2%),
-    color-mix(in srgb, var(--bg-terminal) 88%, var(--bg-page) 12%)
+    var(--component-mix-surface-input-98pct-white-2pct),
+    var(--component-mix-surface-input-88pct-surface-page-12pct)
   );
 }
 
 .workspace-resolving-preview-topbar {
   background: linear-gradient(
     180deg,
-    color-mix(in srgb, var(--bg-surface) 94%, white 6%),
-    color-mix(in srgb, var(--bg-terminal) 88%, var(--bg-surface) 12%)
+    var(--component-mix-surface-panel-94pct-white-6pct),
+    var(--component-mix-surface-input-88pct-surface-panel-12pct)
   );
 }
 
 .workspace-resolving-preview-sidebar {
   background: linear-gradient(
     180deg,
-    color-mix(in srgb, var(--bg-terminal) 94%, white 6%),
-    color-mix(in srgb, var(--bg-terminal) 100%, transparent)
+    var(--component-mix-surface-input-94pct-white-6pct),
+    var(--component-mix-surface-input-100pct-transparent)
   );
 }
 
 .workspace-resolving-terminal {
   background: linear-gradient(
     180deg,
-    color-mix(in srgb, var(--bg-terminal) 96%, white 4%),
-    color-mix(in srgb, var(--bg-terminal) 84%, var(--bg-page) 16%)
+    var(--component-mix-surface-input-96pct-white-4pct),
+    var(--component-mix-surface-input-84pct-surface-page-16pct)
   );
 }
 
 .workspace-git-editor {
   background: linear-gradient(
     180deg,
-    color-mix(in srgb, var(--bg-surface) 97%, white 3%),
-    color-mix(in srgb, var(--bg-terminal) 88%, var(--bg-page) 12%)
+    var(--component-mix-surface-panel-97pct-white-3pct),
+    var(--component-mix-surface-input-88pct-surface-page-12pct)
   );
-  border-color: color-mix(in srgb, var(--border-light) 68%, var(--accent-blue) 32%);
+  border-color: var(--component-mix-border-subtle-68pct-status-info-fg-32pct);
   box-shadow: var(--shadow-lg);
 }
 
 .code-editor-header {
   padding: var(--gap-default) var(--editor-toolbar-inset);
-  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, var(--accent-blue) 28%);
+  border-bottom: 1px solid var(--component-mix-border-default-72pct-status-info-fg-28pct);
   background: linear-gradient(
     180deg,
-    color-mix(in srgb, var(--bg-surface) 97%, white 3%),
-    color-mix(in srgb, var(--bg-surface) 84%, var(--bg-terminal) 16%)
+    var(--component-mix-surface-panel-97pct-white-3pct),
+    var(--component-mix-surface-panel-84pct-surface-input-16pct)
   );
 }
 
 .code-mode-toggle {
-  background: color-mix(in srgb, var(--bg-hover) 72%, var(--bg-surface) 28%);
+  background: var(--component-mix-surface-hover-72pct-surface-panel-28pct);
 }
 
 .image-preview-canvas {
-  background-color: color-mix(in srgb, var(--bg-terminal) 90%, var(--bg-page) 10%);
+  background-color: var(--component-mix-surface-input-90pct-surface-page-10pct);
 }
 
 .image-preview-meta {
-  background: color-mix(in srgb, var(--bg-surface) 90%, var(--bg-terminal) 10%);
+  background: var(--component-mix-surface-panel-90pct-surface-input-10pct);
 }
 
 .git-diff-line-added {
-  background: var(--diff-add-bg);
-  color: color-mix(in srgb, var(--color-success) 78%, var(--text-primary) 22%);
+  background: var(--diff-added-bg);
+  color: var(--diff-added-fg);
 }
 
 .git-diff-line-removed {
-  background: var(--diff-delete-bg);
-  color: color-mix(in srgb, var(--color-error) 78%, var(--text-primary) 22%);
+  background: var(--diff-deleted-bg);
+  color: var(--diff-deleted-fg);
 }
 
 .workspace-resolving-pill,
 .workspace-resolving-line,
 .workspace-resolving-console-line {
-  background: color-mix(in srgb, var(--bg-hover) 74%, var(--bg-surface) 26%);
+  background: var(--component-mix-surface-hover-74pct-surface-panel-26pct);
 }
 
 .workspace-resolving-pill::after,
@@ -9226,7 +9275,7 @@ textarea.input {
   background: linear-gradient(
     90deg,
     transparent,
-    color-mix(in srgb, var(--accent-blue) 16%, white 22%),
+    var(--component-mix-status-info-fg-16pct-white-22pct),
     transparent
   );
 }
@@ -9283,31 +9332,31 @@ textarea.input {
 
 @keyframes session-card-focus-pulse {
   0% {
-    outline: 2px solid var(--color-success, #5ad7a4);
+    outline: 2px solid var(--session-focus-pulse-color);
     outline-offset: -2px;
-    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success, #5ad7a4) 60%, transparent);
+    box-shadow: 0 0 0 0 var(--component-mix-session-focus-pulse-color-60pct-transparent);
   }
   35% {
-    outline: 2px solid var(--color-success, #5ad7a4);
+    outline: 2px solid var(--session-focus-pulse-color);
     outline-offset: -2px;
-    box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-success, #5ad7a4) 0%, transparent);
+    box-shadow: 0 0 0 8px var(--component-mix-session-focus-pulse-color-0pct-transparent);
   }
   60% {
-    outline: 2px solid var(--color-success, #5ad7a4);
+    outline: 2px solid var(--session-focus-pulse-color);
     outline-offset: -2px;
-    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success, #5ad7a4) 45%, transparent);
+    box-shadow: 0 0 0 0 var(--component-mix-session-focus-pulse-color-45pct-transparent);
   }
   100% {
     outline: 2px solid transparent;
     outline-offset: -2px;
-    box-shadow: 0 0 0 12px color-mix(in srgb, var(--color-success, #5ad7a4) 0%, transparent);
+    box-shadow: 0 0 0 12px var(--component-mix-session-focus-pulse-color-0pct-transparent);
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .session-card--focus-pulse {
     animation: none;
-    outline: 2px solid var(--color-success, #5ad7a4);
+    outline: 2px solid var(--session-focus-pulse-color);
     outline-offset: -2px;
   }
 }
@@ -9315,18 +9364,18 @@ textarea.input {
 /* ========== Topbar Terminal Toggle ========== */
 .topbar-btn--active {
   color: var(--text-primary);
-  background: color-mix(in srgb, var(--bg-surface) 78%, var(--blue) 22%);
+  background: var(--component-mix-surface-panel-78pct-status-info-fg-22pct);
   box-shadow: var(--shadow-sm);
 }
 
 .topbar-btn--active:hover {
-  background: color-mix(in srgb, var(--bg-surface) 70%, var(--blue) 30%);
+  background: var(--component-mix-surface-panel-70pct-status-info-fg-30pct);
 }
 
 .topbar-btn--muted {
   opacity: 0.72;
   color: var(--text-tertiary);
-  background: color-mix(in srgb, var(--bg-surface) 88%, transparent 12%);
+  background: var(--component-mix-surface-panel-88pct-transparent-12pct);
 }
 
 .topbar-btn--muted:hover {
@@ -9339,9 +9388,9 @@ textarea.input {
 /* Card Container */
 .config-card {
   margin-top: var(--space-default);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-md);
-  background: var(--bg-surface);
+  background: var(--surface-panel);
   overflow: hidden;
   box-shadow: none;
 }
@@ -9361,14 +9410,14 @@ textarea.input {
   gap: var(--sp-3);
   padding: var(--sp-3) var(--sp-4);
   background: transparent;
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
   cursor: default;
   user-select: none;
   transition: background-color 0.15s ease;
 }
 
 .config-card-header:hover {
-  background: color-mix(in srgb, var(--bg-surface) 92%, var(--bg-hover) 8%);
+  background: var(--component-mix-surface-panel-92pct-surface-hover-8pct);
 }
 
 .config-card-title {
@@ -9462,7 +9511,7 @@ textarea.input {
 .config-card-body .monaco-host {
   min-height: 200px;
   max-height: 600px;
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .config-card-body--fill-height .monaco-host {
@@ -9479,7 +9528,7 @@ textarea.input {
   flex-wrap: wrap;
   padding: var(--sp-3) var(--sp-4);
   background: transparent;
-  border-top: 1px solid var(--border);
+  border-top: 1px solid var(--border-default);
   gap: var(--sp-3);
 }
 
@@ -9558,8 +9607,8 @@ textarea.input {
   justify-content: flex-start;
   min-height: 200px;
   padding: var(--sp-5);
-  border-top: 1px solid var(--border);
-  background: color-mix(in srgb, var(--color-error) 10%, var(--bg-surface));
+  border-top: 1px solid var(--border-default);
+  background: var(--component-mix-status-danger-fg-10pct-surface-panel);
 }
 
 .config-card-error-message {
@@ -9616,8 +9665,8 @@ textarea.input {
 .branch-quick-pick {
   width: 100%;
   max-width: 540px;
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
+  background: var(--surface-panel);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-xl);
   overflow: hidden;
@@ -9629,7 +9678,7 @@ textarea.input {
   align-items: center;
   gap: var(--sp-3);
   padding: var(--sp-3) var(--sp-4);
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-default);
 }
 
 .branch-quick-pick-input {
@@ -9663,12 +9712,12 @@ textarea.input {
 
 .branch-quick-pick-item:hover,
 .branch-quick-pick-item-selected {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
 }
 
 .branch-quick-pick-check {
   flex-shrink: 0;
-  color: var(--accent-green);
+  color: var(--status-success-fg);
 }
 
 .branch-quick-pick-name {
@@ -9685,14 +9734,14 @@ textarea.input {
   line-height: var(--type-body-6-line-height);
   font-weight: var(--type-body-6-weight);
   padding: var(--sp-1) var(--sp-2);
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   border-radius: var(--radius-sm);
   color: var(--text-tertiary);
 }
 
 .branch-quick-pick-create-icon {
   flex-shrink: 0;
-  color: var(--accent-blue);
+  color: var(--status-info-fg);
 }
 
 .branch-quick-pick-create-label {
@@ -9718,12 +9767,12 @@ textarea.input {
   line-height: var(--type-body-5-line-height);
   font-weight: var(--type-body-5-weight);
   color: var(--text-tertiary);
-  border-top: 1px solid var(--border);
+  border-top: 1px solid var(--border-default);
 }
 
 .branch-quick-pick-hint span {
   padding: var(--sp-1) var(--sp-2);
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   border-radius: var(--radius-sm);
   font-family: var(--font-mono);
 }
@@ -9745,12 +9794,8 @@ textarea.input {
     min-height: 100dvh;
     overflow: hidden;
     background:
-      radial-gradient(circle at top left, rgba(108, 182, 255, 0.12), transparent 36%),
-      color-mix(
-        in srgb,
-        var(--surface-page-bg) calc(var(--app-surface-opacity, 0.96) * 100%),
-        transparent
-      );
+      radial-gradient(circle at top left, var(--component-rgba-108-182-255-0-12), transparent 36%),
+      var(--workspace-page-surface);
   }
 
   .mobile-topbar {
@@ -9763,13 +9808,9 @@ textarea.input {
     gap: var(--sp-3);
     padding: calc(var(--mobile-safe-top) + var(--sp-1)) calc(var(--mobile-safe-right) + var(--sp-4))
       var(--sp-1) calc(var(--mobile-safe-left) + var(--sp-4));
-    background: color-mix(
-      in srgb,
-      var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.96) * 100%),
-      transparent
-    );
-    border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
-    backdrop-filter: var(--app-surface-backdrop-filter, none);
+    background: var(--material-shell-topbar);
+    border-bottom: 1px solid var(--component-mix-border-default-84pct-transparent);
+    backdrop-filter: var(--material-backdrop-filter);
   }
 
   .mobile-topbar__workspace-button,
@@ -9794,13 +9835,13 @@ textarea.input {
     border: none;
     border-bottom: none;
     border-radius: 0;
-    background: color-mix(in srgb, var(--bg-surface) 24%, transparent);
+    background: var(--component-mix-surface-panel-24pct-transparent);
     color: var(--text-primary);
   }
 
   .mobile-topbar__workspace-leading {
     flex-shrink: 0;
-    color: color-mix(in srgb, var(--text-secondary) 88%, var(--accent-blue) 12%);
+    color: var(--component-mix-text-secondary-88pct-status-info-fg-12pct);
   }
 
   .mobile-topbar__workspace-name {
@@ -9882,15 +9923,15 @@ textarea.input {
 
   .mobile-topbar__session-dot--running,
   .mobile-topbar__session-dot--idle {
-    background: var(--accent-blue);
+    background: var(--status-info-fg);
   }
 
   .mobile-topbar__session-dot--starting {
-    background: var(--accent-amber);
+    background: var(--status-warning-fg);
   }
 
   .mobile-topbar__session-dot--ended {
-    background: var(--color-warning);
+    background: var(--status-warning-fg);
   }
 
   .mobile-topbar__actions {
@@ -9907,9 +9948,9 @@ textarea.input {
     margin: var(--sp-3) calc(var(--mobile-safe-right) + var(--sp-4)) 0
       calc(var(--mobile-safe-left) + var(--sp-4));
     padding: var(--sp-3);
-    border: 1px solid color-mix(in srgb, var(--accent-amber) 36%, var(--border));
+    border: 1px solid var(--component-mix-status-warning-fg-36pct-border-default);
     border-radius: var(--radius-xl);
-    background: color-mix(in srgb, var(--accent-amber) 12%, var(--bg-surface));
+    background: var(--component-mix-status-warning-fg-12pct-surface-panel);
     color: var(--text-primary);
     transform: translateY(-8px);
     opacity: 0;
@@ -9918,8 +9959,8 @@ textarea.input {
   }
 
   .mobile-shell__recovery-strip--rejected {
-    border-color: color-mix(in srgb, var(--color-error) 42%, var(--border));
-    background: color-mix(in srgb, var(--color-error) 10%, var(--bg-surface));
+    border-color: var(--component-mix-status-danger-fg-42pct-border-default);
+    background: var(--component-mix-status-danger-fg-10pct-surface-panel);
   }
 
   .mobile-shell__recovery-title {
@@ -9965,12 +10006,12 @@ textarea.input {
     flex-direction: column;
     gap: var(--sp-3);
     padding: var(--sp-2) var(--sp-2) var(--sp-3);
-    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
+    border: 1px solid var(--component-mix-border-default-88pct-transparent);
     border-radius: var(--radius-xl);
     background: linear-gradient(
       180deg,
-      color-mix(in srgb, var(--bg-surface) 98%, transparent) 0%,
-      color-mix(in srgb, var(--bg-page) 98%, transparent) 100%
+      var(--component-mix-surface-panel-98pct-transparent) 0%,
+      var(--component-mix-surface-page-98pct-transparent) 100%
     );
     box-shadow: var(--shadow-md);
     transform: translateY(-6px) scale(0.985);
@@ -9986,7 +10027,7 @@ textarea.input {
     width: 36px;
     height: 4px;
     border-radius: var(--radius-full);
-    background: color-mix(in srgb, var(--text-tertiary) 24%, transparent);
+    background: var(--component-mix-text-tertiary-24pct-transparent);
   }
 
   .mobile-inline-sheet__header {
@@ -10032,9 +10073,9 @@ textarea.input {
     width: 100%;
     min-height: 44px;
     padding: 0 var(--sp-3);
-    border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
+    border: 1px solid var(--component-mix-border-default-86pct-transparent);
     border-radius: var(--radius-md);
-    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
+    background: var(--component-mix-surface-panel-90pct-transparent);
     color: var(--text-primary);
     text-align: left;
     transition:
@@ -10045,12 +10086,12 @@ textarea.input {
 
   .mobile-inline-sheet__action--active,
   .mobile-inline-sheet__option--active {
-    border-color: color-mix(in srgb, var(--accent-blue) 46%, var(--border));
-    background: color-mix(in srgb, var(--accent-blue) 12%, var(--bg-surface));
+    border-color: var(--component-mix-status-info-fg-46pct-border-default);
+    background: var(--component-mix-status-info-fg-12pct-surface-panel);
   }
 
   .mobile-inline-sheet__action--danger {
-    color: color-mix(in srgb, var(--color-error) 84%, var(--text-primary));
+    color: var(--component-mix-status-danger-fg-84pct-text-primary);
   }
 
   .mobile-inline-sheet__action[disabled],
@@ -10122,7 +10163,7 @@ textarea.input {
     min-height: 0;
     overflow: hidden;
     padding: 0;
-    border-top: 1px solid color-mix(in srgb, var(--border) 42%, transparent);
+    border-top: 1px solid var(--component-mix-border-default-42pct-transparent);
   }
 
   .mobile-shell__content {
@@ -10263,9 +10304,9 @@ textarea.input {
     font-size: var(--type-body-3-size);
     line-height: var(--type-body-3-line-height);
     font-weight: var(--font-medium);
-    border: 1px solid color-mix(in srgb, var(--accent-blue) 34%, var(--border));
+    border: 1px solid var(--component-mix-status-info-fg-34pct-border-default);
     border-radius: 12px;
-    background: color-mix(in srgb, var(--accent-blue) 8%, var(--bg-surface));
+    background: var(--component-mix-status-info-fg-8pct-surface-panel);
     color: var(--text-primary);
     transition:
       background-color var(--mobile-shell-motion-surface-duration) var(--ease-out),
@@ -10283,13 +10324,9 @@ textarea.input {
     flex-direction: column;
     gap: 0;
     padding: 0 0 var(--mobile-keyboard-inset) 0;
-    border-top: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
-    background: color-mix(
-      in srgb,
-      var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.96) * 100%),
-      transparent
-    );
-    backdrop-filter: var(--app-surface-backdrop-filter, none);
+    border-top: 1px solid var(--component-mix-border-default-84pct-transparent);
+    background: var(--material-overlay);
+    backdrop-filter: var(--material-backdrop-filter);
     transition: padding-bottom var(--mobile-shell-motion-enter-duration) var(--ease-out);
   }
 
@@ -10307,9 +10344,9 @@ textarea.input {
     min-height: var(--touch-target-min);
     max-width: 100%;
     padding: 0 var(--sp-3);
-    border: 1px solid color-mix(in srgb, var(--accent-blue) 28%, var(--border));
+    border: 1px solid var(--component-mix-status-info-fg-28pct-border-default);
     border-radius: var(--radius-full);
-    background: color-mix(in srgb, var(--accent-blue) 10%, var(--bg-surface));
+    background: var(--component-mix-status-info-fg-10pct-surface-panel);
     color: var(--text-primary);
     line-height: 1;
     transition:
@@ -10348,15 +10385,15 @@ textarea.input {
   }
 
   .mobile-shell__agent-stage .session-card {
-    background: var(--bg-page);
+    background: var(--surface-page);
   }
 
   .mobile-shell__agent-stage > .session-card > .panel-header {
     padding: 4px calc(var(--mobile-safe-right) + var(--sp-3)) 4px
       calc(var(--mobile-safe-left) + var(--sp-3));
     gap: var(--sp-2);
-    background: color-mix(in srgb, var(--bg-page) 96%, var(--bg-surface) 4%);
-    border-bottom: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
+    background: var(--component-mix-surface-page-96pct-surface-panel-4pct);
+    border-bottom: 1px solid var(--component-mix-border-default-74pct-transparent);
   }
 
   .mobile-shell__agent-stage .session-header-accessory {
@@ -10395,8 +10432,8 @@ textarea.input {
     max-width: 100%;
     padding: 0 8px;
     border-radius: 4px;
-    border-color: color-mix(in srgb, var(--border) 78%, var(--accent-blue) 22%);
-    background: color-mix(in srgb, var(--accent-blue) 6%, var(--bg-page) 94%);
+    border-color: var(--component-mix-border-default-78pct-status-info-fg-22pct);
+    background: var(--component-mix-status-info-fg-6pct-surface-page-94pct);
   }
 
   .mobile-shell__agent-stage .mobile-supervisor-badge__label {
@@ -10442,7 +10479,7 @@ textarea.input {
   }
 
   .mobile-dock__item--active {
-    border-top-color: color-mix(in srgb, var(--accent-blue) 72%, transparent);
+    border-top-color: var(--component-mix-status-info-fg-72pct-transparent);
     background: transparent;
     color: var(--text-primary);
   }
@@ -10497,11 +10534,11 @@ textarea.input {
     min-height: min(72dvh, 560px);
     padding: var(--sp-3) calc(var(--mobile-safe-right) + var(--sp-4))
       calc(var(--sp-5) + var(--mobile-safe-bottom)) calc(var(--mobile-safe-left) + var(--sp-4));
-    border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
+    border: 1px solid var(--component-mix-border-default-86pct-transparent);
     border-bottom: none;
     border-top-left-radius: var(--radius-xl);
     border-top-right-radius: var(--radius-xl);
-    background: var(--bg-surface);
+    background: var(--surface-panel);
     box-shadow: none;
     transform: translateY(18px);
     opacity: 0;
@@ -10521,7 +10558,7 @@ textarea.input {
     width: 32px;
     height: 4px;
     border-radius: var(--radius-full);
-    background: color-mix(in srgb, var(--text-tertiary) 24%, transparent);
+    background: var(--component-mix-text-tertiary-24pct-transparent);
   }
 
   .mobile-sheet__header {
@@ -10542,7 +10579,7 @@ textarea.input {
     gap: 0;
     min-height: min(78dvh, 640px);
     max-height: calc(100dvh - var(--sp-4));
-    border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
+    border: 1px solid var(--component-mix-border-default-86pct-transparent);
     border-bottom: none;
     border-top-left-radius: var(--radius-xl);
     border-top-right-radius: var(--radius-xl);
@@ -10558,7 +10595,7 @@ textarea.input {
     padding: calc(var(--mobile-safe-top) + var(--sp-1)) var(--mobile-safe-right) 0
       var(--mobile-safe-left);
     border-radius: 0;
-    background: color-mix(in srgb, var(--bg-page) 98%, var(--bg-surface) 2%);
+    background: var(--component-mix-surface-page-98pct-surface-panel-2pct);
     overflow: hidden;
   }
 
@@ -10569,8 +10606,8 @@ textarea.input {
 
   .mobile-sheet--fullscreen .mobile-sheet__header {
     padding: 0 var(--sp-3);
-    border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
-    background: color-mix(in srgb, var(--bg-page) 96%, var(--bg-surface) 4%);
+    border-bottom: 1px solid var(--component-mix-border-default-82pct-transparent);
+    background: var(--component-mix-surface-page-96pct-surface-panel-4pct);
   }
 
   .mobile-sheet__header .page-header {
@@ -10611,7 +10648,7 @@ textarea.input {
     min-height: var(--control-height-sm);
     padding: 0;
     gap: var(--gap-tight);
-    color: color-mix(in srgb, var(--text-tertiary) 88%, var(--bg-panel));
+    color: var(--component-mix-text-tertiary-88pct-surface-panel);
     font-family: var(--font-mono);
     font-size: var(--type-body-5-size);
     line-height: var(--type-body-5-line-height);
@@ -10655,7 +10692,7 @@ textarea.input {
   .mobile-sheet__footer {
     flex-shrink: 0;
     padding-top: var(--sp-3);
-    border-top: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+    border-top: 1px solid var(--component-mix-border-default-82pct-transparent);
   }
 
   .mobile-sheet.mobile-sheet--fullscreen .mobile-sheet__footer {
@@ -10671,8 +10708,8 @@ textarea.input {
     padding: var(--sp-3) var(--sp-4);
     background: linear-gradient(
       180deg,
-      color-mix(in srgb, var(--bg-surface) 96%, transparent) 0%,
-      var(--bg-page) 100%
+      var(--component-mix-surface-panel-96pct-transparent) 0%,
+      var(--surface-page) 100%
     );
   }
 
@@ -10693,10 +10730,10 @@ textarea.input {
     flex-direction: column;
     padding: var(--sp-3);
     border-radius: var(--radius-xl);
-    background: color-mix(in srgb, var(--bg-surface) 92%, var(--bg-page));
+    background: var(--component-mix-surface-panel-92pct-surface-page);
     box-shadow:
-      inset 0 1px 0 color-mix(in srgb, var(--fg-white) 8%, transparent),
-      0 10px 30px color-mix(in srgb, var(--bg-page) 42%, transparent);
+      inset 0 1px 0 var(--component-mix-fg-white-8pct-transparent),
+      0 10px 30px var(--component-mix-surface-page-42pct-transparent);
   }
 
   .mobile-launch-sheet .fp-toolbar {
@@ -10736,10 +10773,10 @@ textarea.input {
     display: flex;
     width: 100%;
     padding: var(--sp-2);
-    border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
+    border: 1px solid var(--component-mix-border-default-86pct-transparent);
     border-radius: var(--radius-xl);
-    background: color-mix(in srgb, var(--bg-surface) 96%, var(--bg-page));
-    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg-white) 6%, transparent);
+    background: var(--component-mix-surface-panel-96pct-surface-page);
+    box-shadow: inset 0 1px 0 var(--component-mix-fg-white-6pct-transparent);
   }
 
   .mobile-launch-sheet__footer > * {
@@ -10749,9 +10786,9 @@ textarea.input {
   .mobile-launch-sheet__footer .launch-start-btn--mobile {
     width: 100%;
     min-height: 44px;
-    border: 1px solid color-mix(in srgb, var(--accent-blue) 52%, transparent);
+    border: 1px solid var(--component-mix-status-info-fg-52pct-transparent);
     border-radius: var(--radius-md);
-    background: color-mix(in srgb, var(--accent-blue) 86%, var(--bg-surface));
+    background: var(--component-mix-status-info-fg-86pct-surface-panel);
     font-size: var(--type-body-3-size);
     line-height: var(--type-body-3-line-height);
     font-weight: var(--type-body-3-weight);
@@ -10766,8 +10803,8 @@ textarea.input {
   .mobile-sheet--launch {
     background: linear-gradient(
       180deg,
-      color-mix(in srgb, var(--bg-surface) 96%, transparent) 0%,
-      var(--bg-page) 100%
+      var(--component-mix-surface-panel-96pct-transparent) 0%,
+      var(--surface-page) 100%
     );
   }
 
@@ -10787,8 +10824,8 @@ textarea.input {
       calc(var(--mobile-safe-bottom) + var(--sp-4)) calc(var(--mobile-safe-left) + var(--sp-4));
     background: linear-gradient(
       180deg,
-      color-mix(in srgb, var(--bg-page) 0%, transparent) 0%,
-      color-mix(in srgb, var(--bg-surface) 96%, var(--bg-page)) 100%
+      var(--component-mix-surface-page-0pct-transparent) 0%,
+      var(--component-mix-surface-panel-96pct-surface-page) 100%
     );
   }
 
@@ -10806,7 +10843,7 @@ textarea.input {
     position: sticky;
     top: 0;
     z-index: var(--z-inline);
-    background: var(--bg-surface);
+    background: var(--surface-panel);
   }
 
   .mobile-worktree-sheet__content {
@@ -10825,8 +10862,8 @@ textarea.input {
     gap: 0;
     background: linear-gradient(
       180deg,
-      color-mix(in srgb, var(--bg-surface) 96%, transparent) 0%,
-      var(--bg-page) 100%
+      var(--component-mix-surface-panel-96pct-transparent) 0%,
+      var(--surface-page) 100%
     );
   }
 
@@ -10842,16 +10879,16 @@ textarea.input {
     margin: 0 var(--sp-4);
     padding: 0 var(--sp-3);
     min-height: 46px;
-    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
+    border: 1px solid var(--component-mix-border-default-80pct-transparent);
     border-radius: var(--radius-xl);
-    background: color-mix(in srgb, var(--bg-surface) 88%, var(--bg-page));
+    background: var(--component-mix-surface-panel-88pct-surface-page);
     box-shadow:
-      inset 0 1px 0 color-mix(in srgb, var(--fg-white) 5%, transparent),
-      0 12px 28px color-mix(in srgb, var(--bg-page) 20%, transparent);
+      inset 0 1px 0 var(--component-mix-fg-white-5pct-transparent),
+      0 12px 28px var(--component-mix-surface-page-20pct-transparent);
   }
 
   .command-palette-sheet .command-palette-search-icon {
-    color: color-mix(in srgb, var(--text-secondary) 86%, var(--accent-blue) 14%);
+    color: var(--component-mix-text-secondary-86pct-status-info-fg-14pct);
   }
 
   .command-palette-sheet .command-palette-input {
@@ -10884,10 +10921,10 @@ textarea.input {
     align-items: flex-start;
     gap: var(--sp-3);
     padding: var(--sp-3);
-    border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
+    border: 1px solid var(--component-mix-border-default-74pct-transparent);
     border-radius: var(--radius-xl);
-    background: color-mix(in srgb, var(--bg-surface) 74%, transparent);
-    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg-white) 4%, transparent);
+    background: var(--component-mix-surface-panel-74pct-transparent);
+    box-shadow: inset 0 1px 0 var(--component-mix-fg-white-4pct-transparent);
   }
 
   .command-palette-item + .command-palette-item {
@@ -10896,8 +10933,8 @@ textarea.input {
 
   .command-palette-item:hover,
   .command-palette-item-selected {
-    background: color-mix(in srgb, var(--accent-blue) 10%, var(--bg-surface));
-    border-color: color-mix(in srgb, var(--accent-blue) 30%, var(--border));
+    background: var(--component-mix-status-info-fg-10pct-surface-panel);
+    border-color: var(--component-mix-status-info-fg-30pct-border-default);
   }
 
   .command-palette-item-content {
@@ -10920,9 +10957,9 @@ textarea.input {
     flex-shrink: 0;
     margin-top: var(--space-micro);
     padding: var(--inset-chip-block) var(--inset-chip-inline);
-    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
+    border: 1px solid var(--component-mix-border-default-72pct-transparent);
     border-radius: var(--radius-pill);
-    background: color-mix(in srgb, var(--bg-page) 76%, var(--bg-surface) 24%);
+    background: var(--component-mix-surface-page-76pct-surface-panel-24pct);
     font-size: var(--type-body-5-size);
     line-height: var(--type-body-5-line-height);
     font-weight: var(--type-body-5-weight);
@@ -10943,8 +10980,8 @@ textarea.input {
     padding: var(--sp-3) var(--sp-3) 0;
     background: linear-gradient(
       180deg,
-      color-mix(in srgb, var(--bg-surface) 96%, transparent) 0%,
-      var(--bg-page) 100%
+      var(--component-mix-surface-panel-96pct-transparent) 0%,
+      var(--surface-page) 100%
     );
   }
 
@@ -10961,24 +10998,24 @@ textarea.input {
     min-width: 0;
     margin-bottom: 0;
     padding: 10px 12px;
-    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
+    border: 1px solid var(--component-mix-border-default-78pct-transparent);
     border-radius: 16px;
     background: linear-gradient(
       180deg,
-      color-mix(in srgb, var(--bg-surface) 90%, transparent) 0%,
-      color-mix(in srgb, var(--bg-page) 92%, var(--bg-surface) 8%) 100%
+      var(--component-mix-surface-panel-90pct-transparent) 0%,
+      var(--component-mix-surface-page-92pct-surface-panel-8pct) 100%
     );
     color: var(--text-primary);
     box-shadow:
-      inset 0 1px 0 color-mix(in srgb, var(--fg-white) 6%, transparent),
-      0 10px 28px color-mix(in srgb, var(--bg-page) 18%, transparent);
+      inset 0 1px 0 var(--component-mix-fg-white-6pct-transparent),
+      0 10px 28px var(--component-mix-surface-page-18pct-transparent);
   }
 
   .mobile-files-sheet__branch:hover {
     background: linear-gradient(
       180deg,
-      color-mix(in srgb, var(--accent-blue) 8%, var(--bg-surface)) 0%,
-      color-mix(in srgb, var(--accent-blue) 12%, var(--bg-page)) 100%
+      var(--component-mix-status-info-fg-8pct-surface-panel) 0%,
+      var(--component-mix-status-info-fg-12pct-surface-page) 100%
     );
   }
 
@@ -10992,7 +11029,7 @@ textarea.input {
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    color: color-mix(in srgb, var(--text-secondary) 86%, var(--accent-blue) 14%);
+    color: var(--component-mix-text-secondary-86pct-status-info-fg-14pct);
   }
 
   .mobile-files-sheet__branch-copy {
@@ -11078,9 +11115,9 @@ textarea.input {
     min-width: var(--touch-target-large);
     min-height: var(--touch-target-large);
     padding: 0 var(--sp-3);
-    border: 1px solid var(--border);
+    border: 1px solid var(--border-default);
     border-radius: var(--radius-full);
-    background: var(--bg-hover);
+    background: var(--surface-hover);
     color: var(--text-primary);
   }
 
@@ -11120,14 +11157,14 @@ textarea.input {
   .mobile-terminal-sheet {
     padding: 0;
     gap: 0;
-    background: var(--bg-page);
+    background: var(--surface-page);
   }
 
   .mobile-terminal-sheet .bottom-terminal {
     overflow: hidden;
-    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+    border: 1px solid var(--component-mix-border-default-82pct-transparent);
     border-radius: 0;
-    background: color-mix(in srgb, var(--bg-terminal) 96%, var(--bg-page));
+    background: var(--component-mix-surface-input-96pct-surface-page);
     box-shadow: none;
   }
 
@@ -11140,8 +11177,8 @@ textarea.input {
   .mobile-sheet--launch {
     background: linear-gradient(
       180deg,
-      color-mix(in srgb, var(--bg-surface) 96%, transparent) 0%,
-      var(--bg-page) 100%
+      var(--component-mix-surface-panel-96pct-transparent) 0%,
+      var(--surface-page) 100%
     );
   }
 
@@ -11159,7 +11196,7 @@ textarea.input {
 
   .mobile-sheet--terminal,
   .mobile-sheet--terminal .mobile-sheet__footer {
-    background: var(--bg-page);
+    background: var(--surface-page);
   }
 
   .mobile-sheet--fullscreen .page-header__kicker {
@@ -11193,12 +11230,12 @@ textarea.input {
   }
 
   .mobile-sheet__action:hover {
-    background: var(--bg-hover);
+    background: var(--surface-hover);
     color: var(--text-primary);
   }
 
   .mobile-sheet__action--mode.active {
-    background: color-mix(in srgb, var(--accent-blue) 22%, transparent);
+    background: var(--component-mix-status-info-fg-22pct-transparent);
     color: var(--text-primary);
   }
 
@@ -11238,9 +11275,9 @@ textarea.input {
   .mobile-sheet--files .workspace-git-editor,
   .mobile-sheet--files .workspace-git-view {
     overflow: hidden;
-    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
+    border: 1px solid var(--component-mix-border-default-80pct-transparent);
     border-radius: var(--radius-md);
-    background: var(--bg-panel);
+    background: var(--surface-panel);
     box-shadow: none;
   }
 
@@ -11272,8 +11309,8 @@ textarea.input {
     min-height: 32px;
     padding: 0 var(--sp-2);
     border-radius: 0;
-    border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
-    background: color-mix(in srgb, var(--bg-page) 94%, var(--bg-surface) 6%);
+    border-bottom: 1px solid var(--component-mix-border-default-72pct-transparent);
+    background: var(--component-mix-surface-page-94pct-surface-panel-6pct);
     gap: 0;
   }
 
@@ -11303,8 +11340,8 @@ textarea.input {
     padding: 0 7px;
     justify-content: space-between;
     border-radius: var(--radius-sm);
-    border-color: color-mix(in srgb, var(--border) 66%, transparent);
-    background: color-mix(in srgb, var(--bg-page) 82%, var(--bg-surface) 18%);
+    border-color: var(--component-mix-border-default-66pct-transparent);
+    background: var(--component-mix-surface-page-82pct-surface-panel-18pct);
     color: var(--text-secondary);
     font-family: var(--font-mono);
     font-size: var(--text-xs);
@@ -11314,8 +11351,8 @@ textarea.input {
 
   .bottom-terminal--mobile-fullscreen .terminal-selector-btn:focus,
   .bottom-terminal--mobile-fullscreen .terminal-selector-btn:focus-visible {
-    border-color: color-mix(in srgb, var(--border) 62%, var(--accent-blue) 38%);
-    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-blue) 16%, transparent);
+    border-color: var(--component-mix-border-default-62pct-status-info-fg-38pct);
+    box-shadow: 0 0 0 1px var(--component-mix-status-info-fg-16pct-transparent);
   }
 
   .bottom-terminal--mobile-fullscreen .terminal-selector-btn span {
@@ -11346,8 +11383,8 @@ textarea.input {
 
   .bottom-terminal--mobile-fullscreen .bottom-terminal-tabs {
     padding-inline: var(--sp-3);
-    border-bottom-color: color-mix(in srgb, var(--border) 74%, transparent);
-    background: color-mix(in srgb, var(--bg-page) 80%, var(--bg-surface) 20%);
+    border-bottom-color: var(--component-mix-border-default-74pct-transparent);
+    background: var(--component-mix-surface-page-80pct-surface-panel-20pct);
   }
 
   .bottom-terminal--mobile-fullscreen .bottom-terminal-xterm {
@@ -11366,14 +11403,14 @@ textarea.input {
     width: 24px;
     height: 24px;
     border-radius: var(--radius-sm);
-    border: 1px solid color-mix(in srgb, var(--border) 54%, transparent);
-    background: color-mix(in srgb, var(--bg-page) 80%, var(--bg-surface) 20%);
+    border: 1px solid var(--component-mix-border-default-54pct-transparent);
+    background: var(--component-mix-surface-page-80pct-surface-panel-20pct);
     color: var(--text-tertiary);
     box-shadow: none;
   }
 
   .bottom-terminal--mobile-fullscreen .panel-toolbar-btn:hover {
-    background: color-mix(in srgb, var(--bg-panel) 64%, var(--accent-blue) 12%);
+    background: var(--component-mix-surface-panel-64pct-status-info-fg-12pct);
     color: var(--text-primary);
   }
 
@@ -11387,7 +11424,7 @@ textarea.input {
   .mobile-supervisor-sheet {
     gap: 0;
     padding: 0;
-    background: color-mix(in srgb, var(--bg-page) 98%, var(--bg-surface) 2%);
+    background: var(--component-mix-surface-page-98pct-surface-panel-2pct);
   }
 
   .mobile-sheet__body--supervisor-detail {
@@ -11437,7 +11474,7 @@ textarea.input {
 
   .mobile-supervisor-sheet.mobile-sheet--fullscreen .mobile-sheet__footer {
     padding: var(--sp-1) var(--sp-3) calc(var(--mobile-safe-bottom) + var(--sp-3));
-    background: color-mix(in srgb, var(--bg-page) 94%, var(--bg-surface) 6%);
+    background: var(--component-mix-surface-page-94pct-surface-panel-6pct);
   }
 
   .mobile-supervisor-sheet__footer > .btn {
@@ -11462,7 +11499,7 @@ textarea.input {
     justify-content: center;
     gap: var(--sp-2);
     padding: var(--sp-4);
-    border: 1px dashed var(--border);
+    border: 1px dashed var(--border-default);
     border-radius: var(--radius-xl);
     color: var(--text-secondary);
   }
@@ -11483,11 +11520,11 @@ textarea.input {
     width: min(88vw, 388px);
     padding: calc(var(--mobile-safe-top) + var(--sp-3)) calc(var(--mobile-safe-right) + var(--sp-3))
       calc(var(--sp-3) + var(--mobile-safe-bottom)) calc(var(--mobile-safe-left) + var(--sp-3));
-    border-right: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+    border-right: 1px solid var(--component-mix-border-default-82pct-transparent);
     background: linear-gradient(
       180deg,
-      color-mix(in srgb, var(--bg-surface) 96%, transparent) 0%,
-      color-mix(in srgb, var(--bg-page) 94%, var(--bg-surface) 6%) 100%
+      var(--component-mix-surface-panel-96pct-transparent) 0%,
+      var(--component-mix-surface-page-94pct-surface-panel-6pct) 100%
     );
     box-shadow: none;
     transform: translateX(-12px);
@@ -11501,7 +11538,7 @@ textarea.input {
     justify-content: space-between;
     gap: var(--sp-3);
     padding: 0 0 var(--sp-3);
-    border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+    border-bottom: 1px solid var(--component-mix-border-default-82pct-transparent);
   }
 
   .mobile-workspace-drawer__header-copy {
@@ -11530,8 +11567,8 @@ textarea.input {
     width: 6px;
     height: 6px;
     border-radius: 999px;
-    background: color-mix(in srgb, var(--accent-blue) 76%, transparent);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 14%, transparent);
+    background: var(--component-mix-status-info-fg-76pct-transparent);
+    box-shadow: 0 0 0 3px var(--component-mix-status-info-fg-14pct-transparent);
   }
 
   .mobile-workspace-drawer__title {
@@ -11547,15 +11584,15 @@ textarea.input {
     min-width: 34px;
     height: 34px;
     min-height: 34px;
-    border: 1px solid color-mix(in srgb, var(--border) 66%, transparent);
+    border: 1px solid var(--component-mix-border-default-66pct-transparent);
     border-radius: 999px;
-    background: color-mix(in srgb, var(--bg-surface) 78%, var(--bg-page));
+    background: var(--component-mix-surface-panel-78pct-surface-page);
     color: var(--text-secondary);
     box-shadow: none;
   }
 
   .mobile-workspace-drawer__dismiss:hover {
-    background: color-mix(in srgb, var(--bg-hover) 84%, transparent);
+    background: var(--component-mix-surface-hover-84pct-transparent);
     color: var(--text-primary);
   }
 
@@ -11579,16 +11616,16 @@ textarea.input {
     align-items: stretch;
     gap: var(--sp-2);
     padding: var(--sp-2);
-    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
+    border: 1px solid var(--component-mix-border-default-78pct-transparent);
     border-radius: var(--radius-xl);
     background: linear-gradient(
       180deg,
-      color-mix(in srgb, var(--bg-surface) 88%, transparent) 0%,
-      color-mix(in srgb, var(--bg-page) 92%, var(--bg-surface) 8%) 100%
+      var(--component-mix-surface-panel-88pct-transparent) 0%,
+      var(--component-mix-surface-page-92pct-surface-panel-8pct) 100%
     );
     box-shadow:
-      inset 0 1px 0 color-mix(in srgb, var(--fg-white) 5%, transparent),
-      0 12px 30px color-mix(in srgb, var(--bg-page) 16%, transparent);
+      inset 0 1px 0 var(--component-mix-fg-white-5pct-transparent),
+      0 12px 30px var(--component-mix-surface-page-16pct-transparent);
     text-align: left;
     transition:
       background-color var(--mobile-shell-motion-surface-duration) var(--ease-out),
@@ -11602,14 +11639,14 @@ textarea.input {
     background:
       linear-gradient(
         180deg,
-        color-mix(in srgb, var(--accent-blue) 12%, var(--bg-surface)) 0%,
-        color-mix(in srgb, var(--accent-blue) 10%, var(--bg-page)) 100%
+        var(--component-mix-status-info-fg-12pct-surface-panel) 0%,
+        var(--component-mix-status-info-fg-10pct-surface-page) 100%
       ),
-      color-mix(in srgb, var(--bg-panel) 92%, var(--surface-elevated));
+      var(--component-mix-surface-panel-92pct-surface-elevated);
     box-shadow:
-      inset 0 1px 0 color-mix(in srgb, var(--accent-blue) 12%, transparent),
-      0 14px 32px color-mix(in srgb, var(--accent-blue) 8%, transparent);
-    border-color: color-mix(in srgb, var(--accent-blue) 28%, var(--border));
+      inset 0 1px 0 var(--component-mix-status-info-fg-12pct-transparent),
+      0 14px 32px var(--component-mix-status-info-fg-8pct-transparent);
+    border-color: var(--component-mix-status-info-fg-28pct-border-default);
   }
 
   .mobile-workspace-drawer__item-main {
@@ -11642,17 +11679,17 @@ textarea.input {
     min-height: 32px;
     margin: auto 0;
     align-self: auto;
-    border: 1px solid color-mix(in srgb, var(--border) 56%, transparent);
+    border: 1px solid var(--component-mix-border-default-56pct-transparent);
     border-radius: 999px;
-    color: color-mix(in srgb, var(--color-error) 82%, var(--text-primary));
-    background: color-mix(in srgb, var(--bg-surface) 76%, transparent);
+    color: var(--component-mix-status-danger-fg-82pct-text-primary);
+    background: var(--component-mix-surface-panel-76pct-transparent);
     transition:
       background-color var(--mobile-shell-motion-surface-duration) var(--ease-out),
       color var(--mobile-shell-motion-surface-duration) var(--ease-out);
   }
 
   .mobile-workspace-drawer__item-close:hover {
-    background: color-mix(in srgb, var(--color-error) 8%, transparent);
+    background: var(--component-mix-status-danger-fg-8pct-transparent);
   }
 
   .mobile-workspace-drawer__item-name {
@@ -11669,10 +11706,10 @@ textarea.input {
     align-items: center;
     gap: 4px;
     padding: 1px 6px;
-    border: 1px solid color-mix(in srgb, var(--accent-blue) 26%, transparent);
+    border: 1px solid var(--component-mix-status-info-fg-26pct-transparent);
     border-radius: 999px;
-    background: color-mix(in srgb, var(--accent-blue) 12%, transparent);
-    color: color-mix(in srgb, var(--accent-blue) 74%, var(--text-primary));
+    background: var(--component-mix-status-info-fg-12pct-transparent);
+    color: var(--component-mix-status-info-fg-74pct-text-primary);
     font-size: var(--type-body-6-size);
     line-height: var(--type-body-6-line-height);
     font-weight: var(--type-body-6-weight);
@@ -11698,7 +11735,7 @@ textarea.input {
     gap: 0;
     margin-top: auto;
     padding-top: var(--sp-2);
-    border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
+    border-top: 1px solid var(--component-mix-border-default-78pct-transparent);
   }
 
   .mobile-workspace-drawer__footer-button {
@@ -11709,9 +11746,9 @@ textarea.input {
     width: 100%;
     min-height: 46px;
     padding: 0 var(--sp-3);
-    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
+    border: 1px solid var(--component-mix-border-default-78pct-transparent);
     border-radius: var(--radius-md);
-    background: color-mix(in srgb, var(--bg-surface) 80%, transparent);
+    background: var(--component-mix-surface-panel-80pct-transparent);
     color: var(--text-primary);
     font-size: var(--type-body-3-size);
     line-height: var(--type-body-3-line-height);
@@ -11725,7 +11762,7 @@ textarea.input {
   }
 
   .mobile-workspace-drawer__footer-button:hover {
-    background: color-mix(in srgb, var(--bg-hover) 82%, transparent);
+    background: var(--component-mix-surface-hover-82pct-transparent);
   }
 
   .mobile-topbar__workspace-button,
@@ -11772,13 +11809,13 @@ textarea.input {
 
   .mobile-topbar__session-option--active,
   .mobile-workspace-drawer__item--active {
-    box-shadow: 0 10px 22px color-mix(in srgb, var(--accent-blue) 10%, transparent);
+    box-shadow: 0 10px 22px var(--component-mix-status-info-fg-10pct-transparent);
   }
 
   .mobile-workspace-drawer__item--active {
     box-shadow:
-      inset 0 1px 0 color-mix(in srgb, var(--accent-blue) 10%, transparent),
-      inset 0 -1px 0 color-mix(in srgb, var(--accent-blue) 12%, transparent);
+      inset 0 1px 0 var(--component-mix-status-info-fg-10pct-transparent),
+      inset 0 -1px 0 var(--component-mix-status-info-fg-12pct-transparent);
   }
 
   .mobile-dock__item {
@@ -11959,10 +11996,10 @@ textarea.input {
       var(--sp-1) calc(var(--mobile-safe-left) + var(--sp-4));
     background: linear-gradient(
       180deg,
-      color-mix(in srgb, var(--bg-surface) 98%, transparent) 0%,
-      color-mix(in srgb, var(--bg-page) 95%, var(--bg-surface) 5%) 100%
+      var(--component-mix-surface-panel-98pct-transparent) 0%,
+      var(--component-mix-surface-page-95pct-surface-panel-5pct) 100%
     );
-    border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+    border-bottom: 1px solid var(--component-mix-border-default-82pct-transparent);
   }
 
   .diagnostics-header .mobile-page-header {
@@ -12002,14 +12039,14 @@ textarea.input {
     flex-direction: column;
     gap: var(--sp-3);
     padding: var(--sp-4);
-    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
+    border: 1px solid var(--component-mix-border-default-78pct-transparent);
     border-radius: var(--radius-xl);
     background: linear-gradient(
       180deg,
-      color-mix(in srgb, var(--bg-surface) 96%, var(--bg-page) 4%) 0%,
-      color-mix(in srgb, var(--bg-surface) 90%, var(--accent-blue) 10%) 100%
+      var(--component-mix-surface-panel-96pct-surface-page-4pct) 0%,
+      var(--component-mix-surface-panel-90pct-status-info-fg-10pct) 100%
     );
-    box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 36%, transparent);
+    box-shadow: 0 1px 0 var(--component-mix-border-default-36pct-transparent);
   }
 
   .diagnostics-summary--mobile .diagnostics-summary__copy {
@@ -12059,7 +12096,7 @@ textarea.input {
 
   .settings-body--mobile {
     display: block;
-    background: var(--bg-page);
+    background: var(--surface-page);
   }
 
   .settings-body--mobile-detail {
@@ -12180,9 +12217,9 @@ textarea.input {
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+    border: 1px solid var(--component-mix-border-default-82pct-transparent);
     border-radius: 12px;
-    background: color-mix(in srgb, var(--bg-surface) 92%, var(--bg-page));
+    background: var(--component-mix-surface-panel-92pct-surface-page);
   }
 
   .settings-mobile-item {
@@ -12198,7 +12235,7 @@ textarea.input {
   }
 
   .settings-mobile-item + .settings-mobile-item {
-    border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
+    border-top: 1px solid var(--component-mix-border-default-72pct-transparent);
   }
 
   .settings-mobile-item__icon-shell {
@@ -12208,8 +12245,8 @@ textarea.input {
     width: 34px;
     height: 34px;
     border-radius: var(--radius-xl);
-    background: color-mix(in srgb, var(--icon-surface-subtle) 82%, var(--bg-surface));
-    border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
+    background: var(--component-mix-icon-surface-subtle-82pct-surface-panel);
+    border: 1px solid var(--component-mix-border-default-68pct-transparent);
     flex-shrink: 0;
   }
 
@@ -12305,21 +12342,17 @@ textarea.input {
       var(--sp-1) calc(var(--mobile-safe-left) + var(--sp-4));
     background: linear-gradient(
       180deg,
-      color-mix(in srgb, var(--bg-surface) 98%, transparent) 0%,
-      color-mix(in srgb, var(--bg-page) 95%, var(--bg-surface) 5%) 100%
+      var(--component-mix-surface-panel-98pct-transparent) 0%,
+      var(--component-mix-surface-page-95pct-surface-panel-5pct) 100%
     );
-    border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+    border-bottom: 1px solid var(--component-mix-border-default-82pct-transparent);
   }
 
   .settings-page--mobile > .settings-header {
     padding: calc(var(--mobile-safe-top) + var(--sp-1)) calc(var(--mobile-safe-right) + var(--sp-4))
       var(--sp-1) calc(var(--mobile-safe-left) + var(--sp-4));
-    background: color-mix(
-      in srgb,
-      var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.96) * 100%),
-      transparent
-    );
-    backdrop-filter: var(--app-surface-backdrop-filter, none);
+    background: var(--settings-header-surface);
+    backdrop-filter: var(--material-backdrop-filter);
   }
 
   .settings-header .mobile-page-header {
@@ -12539,12 +12572,12 @@ textarea.input {
 }
 
 .git-status-bar__item--actionable:hover:not(:disabled) {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
 }
 
 .git-status-bar__item--actionable:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-blue) 35%, transparent);
+  box-shadow: 0 0 0 2px var(--component-mix-status-info-fg-35pct-transparent);
 }
 
 .git-status-bar__item--actionable:disabled {
@@ -12574,8 +12607,9 @@ textarea.input {
   min-width: 0;
   flex-shrink: 0;
   padding: 0 12px;
-  border-top: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
-  background: var(--bg-panel);
+  border-top: 1px solid var(--component-mix-border-default-62pct-transparent);
+  background: var(--workspace-statusbar-surface);
+  backdrop-filter: var(--material-backdrop-filter);
 }
 
 .workspace-status-bar--flush {
@@ -12635,7 +12669,9 @@ textarea.input {
   min-height: 0;
   height: 100%;
   flex-direction: row;
-  background: var(--bg-panel);
+  background: var(--workspace-sidebar-surface);
+  border-right: 1px solid var(--component-mix-border-default-72pct-transparent);
+  backdrop-filter: var(--material-backdrop-filter);
 }
 
 .workspace-activity-bar {
@@ -12645,8 +12681,10 @@ textarea.input {
   align-items: center;
   gap: var(--sp-2);
   padding: var(--sp-3) var(--sp-2);
-  border-right: 1px solid var(--border);
-  background: color-mix(in srgb, var(--bg-panel) 88%, var(--bg-page));
+  border-right: 1px solid var(--border-default);
+  background: var(--workspace-activitybar-surface);
+  border-right-color: var(--component-mix-border-default-72pct-transparent);
+  backdrop-filter: var(--material-backdrop-filter);
 }
 
 .workspace-activity-bar__button {
@@ -12665,12 +12703,12 @@ textarea.input {
 }
 
 .workspace-activity-bar__button:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   color: var(--text-secondary);
 }
 
 .workspace-activity-bar__button--active {
-  background: color-mix(in srgb, var(--accent-blue) 14%, transparent);
+  background: var(--component-mix-status-info-fg-14pct-transparent);
   color: var(--text-primary);
 }
 
@@ -12850,7 +12888,7 @@ textarea.input {
 }
 
 .workspace-open-editors__item:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   color: var(--text-primary);
 }
 
@@ -12874,13 +12912,13 @@ textarea.input {
   gap: var(--gap-default);
   min-height: 34px;
   padding: 0 calc(var(--sp-3) - var(--gap-compact));
-  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
+  border: 1px solid var(--component-mix-border-default-84pct-transparent);
   border-radius: var(--radius-lg);
-  background: color-mix(in srgb, var(--bg-surface) 92%, var(--bg-page));
+  background: var(--component-mix-surface-panel-92pct-surface-page);
 }
 
 .workspace-quick-jump__search:focus-within {
-  border-color: color-mix(in srgb, var(--accent-blue) 70%, transparent);
+  border-color: var(--component-mix-status-info-fg-70pct-transparent);
 }
 
 .workspace-quick-jump__input {
@@ -12896,7 +12934,7 @@ textarea.input {
 }
 
 .workspace-quick-jump__input::placeholder {
-  color: color-mix(in srgb, var(--text-tertiary) 92%, var(--bg-panel));
+  color: var(--component-mix-text-tertiary-92pct-surface-panel);
 }
 
 .workspace-quick-jump__input:focus {
@@ -12933,7 +12971,7 @@ textarea.input {
   outline: none;
   border-radius: var(--radius-md);
   box-shadow: inset 0 0 0 var(--state-focus-ring-width)
-    color-mix(in srgb, var(--border-focus) 64%, transparent);
+    var(--component-mix-border-focus-64pct-transparent);
 }
 
 .workspace-quick-jump__primary {
@@ -12978,7 +13016,7 @@ textarea.input {
 }
 
 .workspace-sidebar-panel .panel-toolbar-btn:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   color: var(--text-primary);
 }
 
@@ -12997,14 +13035,14 @@ textarea.input {
   margin: var(--space-default) var(--inset-control-inline);
   padding-inline: var(--inset-control-inline);
   min-height: var(--control-height-md);
-  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
+  border: 1px solid var(--component-mix-border-default-84pct-transparent);
   border-radius: var(--radius-panel);
-  background: color-mix(in srgb, var(--bg-surface) 90%, var(--bg-page));
+  background: var(--component-mix-surface-panel-90pct-surface-page);
 }
 
 .file-tree-shell .file-tree-search:focus-within,
 .file-tree-shell .file-tree-search--desktop:focus-within {
-  border-color: color-mix(in srgb, var(--accent-blue) 70%, transparent);
+  border-color: var(--component-mix-status-info-fg-70pct-transparent);
 }
 
 .file-tree-shell .file-tree-search-input {
@@ -13032,7 +13070,7 @@ textarea.input {
 }
 
 .file-tree-shell .tree-item:hover {
-  background: color-mix(in srgb, var(--bg-hover) 92%, transparent);
+  background: var(--component-mix-surface-hover-92pct-transparent);
 }
 
 .file-tree-shell .tree-item.selected {
@@ -13042,7 +13080,7 @@ textarea.input {
 }
 
 .file-tree-shell .tree-item--context-target {
-  background: color-mix(in srgb, var(--accent-blue) 16%, transparent);
+  background: var(--component-mix-status-info-fg-16pct-transparent);
 }
 
 .file-tree-shell .tree-chevron {
@@ -13115,16 +13153,16 @@ textarea.input {
   flex-direction: column;
   gap: var(--sp-1);
   padding: calc(var(--sp-2) - var(--gap-compact)) var(--sp-3) var(--sp-2);
-  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
-  background: color-mix(in srgb, var(--bg-panel) 82%, transparent);
+  border-bottom: 1px solid var(--component-mix-border-default-82pct-transparent);
+  background: var(--component-mix-surface-panel-82pct-transparent);
 }
 
 .workspace-search-panel__input {
   min-height: 34px;
   padding: 0 10px;
-  border: 1px solid color-mix(in srgb, var(--border) 64%, transparent);
+  border: 1px solid var(--component-mix-border-default-64pct-transparent);
   border-radius: 4px;
-  background: color-mix(in srgb, var(--bg-page) 82%, var(--bg-surface) 18%);
+  background: var(--component-mix-surface-page-82pct-surface-panel-18pct);
   color: var(--text-primary);
   font-size: var(--type-body-3-size);
   line-height: var(--type-body-3-line-height);
@@ -13133,13 +13171,13 @@ textarea.input {
 }
 
 .workspace-search-panel__input::placeholder {
-  color: color-mix(in srgb, var(--text-tertiary) 92%, var(--bg-panel));
+  color: var(--component-mix-text-tertiary-92pct-surface-panel);
 }
 
 .workspace-search-panel__input:focus-visible {
   outline: none;
-  border-color: color-mix(in srgb, var(--accent-blue) 72%, transparent);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-blue) 44%, transparent);
+  border-color: var(--component-mix-status-info-fg-72pct-transparent);
+  box-shadow: inset 0 0 0 1px var(--component-mix-status-info-fg-44pct-transparent);
 }
 
 .workspace-search-panel__summary {
@@ -13200,23 +13238,22 @@ textarea.input {
   background: transparent;
   color: var(--text-secondary);
   text-align: left;
-  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--border) 96%, transparent);
+  box-shadow: inset 0 -1px 0 var(--component-mix-border-default-96pct-transparent);
   transition:
     background-color var(--duration-fast) var(--ease-out),
     color var(--duration-fast) var(--ease-out);
 }
 
 .workspace-search-panel__group-header:hover {
-  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
+  background: var(--component-mix-surface-hover-88pct-transparent);
 }
 
 .workspace-search-panel__group-header:focus-visible {
   outline: none;
-  background: color-mix(in srgb, var(--state-selected-bg) 76%, transparent);
+  background: var(--component-mix-state-selected-bg-76pct-transparent);
   box-shadow:
-    inset 0 0 0 var(--state-focus-ring-width)
-    color-mix(in srgb, var(--border-focus) 64%, transparent),
-    inset 0 -1px 0 color-mix(in srgb, var(--border) 96%, transparent);
+    inset 0 0 0 var(--state-focus-ring-width) var(--component-mix-border-focus-64pct-transparent),
+    inset 0 -1px 0 var(--component-mix-border-default-96pct-transparent);
 }
 
 .workspace-search-panel__group-chevron {
@@ -13290,14 +13327,14 @@ textarea.input {
 }
 
 .workspace-search-panel__match:hover {
-  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
+  background: var(--component-mix-surface-hover-88pct-transparent);
 }
 
 .workspace-search-panel__match:focus-visible {
   outline: none;
-  background: color-mix(in srgb, var(--state-selected-bg) 76%, transparent);
+  background: var(--component-mix-state-selected-bg-76pct-transparent);
   box-shadow: inset 0 0 0 var(--state-focus-ring-width)
-    color-mix(in srgb, var(--border-focus) 64%, transparent);
+    var(--component-mix-border-focus-64pct-transparent);
 }
 
 .workspace-search-panel__line {
@@ -13323,7 +13360,7 @@ textarea.input {
 .workspace-search-panel__preview mark {
   padding: 0;
   border-radius: 2px;
-  background: color-mix(in srgb, var(--accent-blue) 18%, transparent);
+  background: var(--component-mix-status-info-fg-18pct-transparent);
   color: inherit;
 }
 
@@ -13359,8 +13396,8 @@ textarea.input {
 
 .mobile-sheet--files .file-tree-shell--mobile .tree-item.selected {
   padding-left: 14px;
-  border-left: 2px solid color-mix(in srgb, var(--accent-blue) 88%, white 12%);
-  background: color-mix(in srgb, var(--accent-blue) 12%, transparent);
+  border-left: 2px solid var(--component-mix-status-info-fg-88pct-white-12pct);
+  background: var(--component-mix-status-info-fg-12pct-transparent);
 }
 
 .file-tree-shell--mobile .tree-item-actions {
@@ -13376,16 +13413,16 @@ textarea.input {
 .file-context-menu {
   min-width: 220px;
   padding: var(--sp-2);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-xl);
-  background: var(--bg-surface);
+  background: var(--surface-panel);
   box-shadow: var(--shadow-lg);
 }
 
 .file-context-menu__section + .file-context-menu__section {
   margin-top: var(--sp-2);
   padding-top: var(--sp-2);
-  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
+  border-top: 1px solid var(--component-mix-border-default-80pct-transparent);
 }
 
 .file-context-menu__section-title {
@@ -13424,7 +13461,7 @@ textarea.input {
 .file-context-menu__item:hover,
 .file-context-menu__item[data-active="true"],
 .file-context-menu__sheet-action:hover {
-  background: color-mix(in srgb, var(--bg-hover) 92%, transparent);
+  background: var(--component-mix-surface-hover-92pct-transparent);
 }
 
 .file-context-menu__item:disabled,
@@ -13434,7 +13471,7 @@ textarea.input {
 
 .file-context-menu__item--danger,
 .file-context-menu__sheet-action--danger {
-  color: var(--color-error);
+  color: var(--status-danger-fg);
 }
 
 .file-context-menu__sheet {
@@ -13599,12 +13636,12 @@ textarea.input {
 }
 
 .git-worktree-row__main:hover {
-  background: color-mix(in srgb, var(--bg-hover) 90%, transparent);
+  background: var(--component-mix-surface-hover-90pct-transparent);
 }
 
 .git-worktree-row.active .git-worktree-row__main {
-  border-color: color-mix(in srgb, var(--accent-blue) 24%, transparent);
-  background: color-mix(in srgb, var(--accent-blue) 10%, transparent);
+  border-color: var(--component-mix-status-info-fg-24pct-transparent);
+  background: var(--component-mix-status-info-fg-10pct-transparent);
 }
 
 .git-worktree-row__dot {
@@ -13616,11 +13653,11 @@ textarea.input {
 }
 
 .git-worktree-row__dot-clean {
-  background: color-mix(in srgb, var(--accent-green) 78%, white 22%);
+  background: var(--component-mix-status-success-fg-78pct-white-22pct);
 }
 
 .git-worktree-row__dot-dirty {
-  background: color-mix(in srgb, var(--accent-amber) 88%, white 12%);
+  background: var(--component-mix-status-warning-fg-88pct-white-12pct);
 }
 
 .git-worktree-row__name,
@@ -13660,7 +13697,7 @@ textarea.input {
 
 .git-worktree-row__chip {
   flex-shrink: 0;
-  color: color-mix(in srgb, var(--accent-blue) 80%, white 20%);
+  color: var(--component-mix-status-info-fg-80pct-white-20pct);
   font-size: var(--type-body-6-size);
   line-height: var(--type-body-6-line-height);
   font-weight: var(--type-body-6-weight);
@@ -13682,9 +13719,9 @@ textarea.input {
   min-height: 78px;
   margin: 0;
   padding: 10px 12px;
-  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
+  border: 1px solid var(--component-mix-border-default-84pct-transparent);
   border-radius: 8px;
-  background: color-mix(in srgb, var(--bg-surface) 92%, var(--bg-page));
+  background: var(--component-mix-surface-panel-92pct-surface-page);
   color: var(--text-primary);
   font-size: var(--type-body-3-size);
   line-height: var(--type-body-3-line-height);
@@ -13692,7 +13729,7 @@ textarea.input {
 }
 
 .git-panel .git-commit-input:focus {
-  border-color: color-mix(in srgb, var(--accent-blue) 72%, transparent);
+  border-color: var(--component-mix-status-info-fg-72pct-transparent);
 }
 
 .git-commit-actions {
@@ -13716,8 +13753,8 @@ textarea.input {
   flex-shrink: 0;
   padding: 0 12px;
   border: none;
-  background: color-mix(in srgb, var(--accent-blue) 78%, white 22%);
-  color: #0b1020;
+  background: var(--component-mix-status-info-fg-78pct-white-22pct);
+  color: var(--component-hex-0b1020);
   font-size: var(--type-body-3-size);
   line-height: var(--type-body-3-line-height);
   font-weight: var(--font-medium);
@@ -13746,7 +13783,7 @@ textarea.input {
 
 .git-panel .git-row:hover,
 .git-panel .git-row.active {
-  background: color-mix(in srgb, var(--accent-blue) 10%, transparent);
+  background: var(--component-mix-status-info-fg-10pct-transparent);
 }
 
 .git-panel .git-row.active::before {
@@ -13757,7 +13794,7 @@ textarea.input {
   left: 0;
   width: 2px;
   border-radius: 999px;
-  background: color-mix(in srgb, var(--accent-blue) 90%, white 10%);
+  background: var(--component-mix-status-info-fg-90pct-white-10pct);
 }
 
 .git-row-status-badge {
@@ -13773,23 +13810,23 @@ textarea.input {
 }
 
 .git-row-status-badge-added {
-  color: color-mix(in srgb, var(--accent-green) 88%, white 12%);
+  color: var(--component-mix-status-success-fg-88pct-white-12pct);
 }
 
 .git-row-status-badge-modified {
-  color: color-mix(in srgb, var(--accent-amber) 88%, white 12%);
+  color: var(--component-mix-status-warning-fg-88pct-white-12pct);
 }
 
 .git-row-status-badge-deleted {
-  color: color-mix(in srgb, var(--accent-pink) 82%, white 18%);
+  color: var(--component-mix-status-danger-fg-82pct-white-18pct);
 }
 
 .git-row-status-badge-renamed {
-  color: #b8a6e0;
+  color: var(--component-hex-b8a6e0);
 }
 
 .git-row-status-badge-untracked {
-  color: #8a8a93;
+  color: var(--component-hex-8a8a93);
 }
 
 .git-panel .git-row-content {
@@ -13833,7 +13870,7 @@ textarea.input {
 }
 
 .git-panel .git-row-action:hover {
-  background: var(--bg-hover);
+  background: var(--surface-hover);
   color: var(--text-primary);
 }
 
@@ -13854,21 +13891,21 @@ textarea.input {
 }
 
 .git-history-row:hover {
-  background: color-mix(in srgb, var(--bg-hover) 90%, transparent);
+  background: var(--component-mix-surface-hover-90pct-transparent);
 }
 
 .git-history-row__dot {
   position: relative;
   width: 7px;
   height: 7px;
-  border: 1px solid color-mix(in srgb, var(--text-tertiary) 88%, transparent);
+  border: 1px solid var(--component-mix-text-tertiary-88pct-transparent);
   border-radius: 999px;
   background: transparent;
 }
 
 .git-history-row.current .git-history-row__dot {
-  border-color: color-mix(in srgb, var(--accent-blue) 74%, transparent);
-  background: color-mix(in srgb, var(--accent-blue) 74%, transparent);
+  border-color: var(--component-mix-status-info-fg-74pct-transparent);
+  background: var(--component-mix-status-info-fg-74pct-transparent);
 }
 
 .git-history-row__copy {
@@ -13965,7 +14002,7 @@ textarea.input {
   flex-shrink: 0;
   gap: var(--sp-3);
   padding: 0 0 var(--sp-2);
-  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
+  border-bottom: 1px solid var(--component-mix-border-default-78pct-transparent);
   border-radius: 0;
   background: transparent;
   box-shadow: none;
@@ -14012,7 +14049,7 @@ textarea.input {
   left: 0;
   height: 1.5px;
   border-radius: 999px;
-  background: color-mix(in srgb, var(--accent-blue) 90%, white 10%);
+  background: var(--component-mix-status-info-fg-90pct-white-10pct);
 }
 
 .mobile-files-sheet__content,
@@ -14047,7 +14084,7 @@ textarea.input {
   flex-wrap: wrap;
   gap: 0;
   border: none;
-  border-top: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
+  border-top: 1px solid var(--component-mix-border-default-74pct-transparent);
   border-radius: 0;
   background: transparent;
   padding: 0 0 calc(var(--mobile-safe-bottom) + var(--sp-1));
@@ -14126,7 +14163,7 @@ textarea.input {
   margin-left: 0;
   padding: 0 calc(var(--mobile-safe-right) + var(--sp-4)) 0
     calc(var(--mobile-safe-left) + var(--sp-4));
-  border-top: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
+  border-top: 1px solid var(--component-mix-border-default-68pct-transparent);
 }
 
 .mobile-shell__bottom-stack .workspace-status-bar__right:empty {
@@ -14192,8 +14229,8 @@ textarea.input {
   width: 90%;
   max-width: 24rem;
   padding: var(--sp-4);
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
+  background: var(--surface-panel);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-xl);
 }
@@ -14209,8 +14246,8 @@ textarea.input {
 .paste-dialog__textarea {
   min-height: 6rem;
   padding: var(--sp-3);
-  background: var(--bg-page);
-  border: 1px solid var(--border);
+  background: var(--surface-page);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-md);
   color: var(--text-primary);
   font-family: var(--font-mono);
@@ -14222,8 +14259,8 @@ textarea.input {
 
 .paste-dialog__textarea:focus {
   outline: none;
-  border-color: var(--accent-blue);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-blue) 20%, transparent);
+  border-color: var(--status-info-fg);
+  box-shadow: 0 0 0 2px var(--component-mix-status-info-fg-20pct-transparent);
 }
 
 .paste-dialog__actions {
@@ -14234,7 +14271,7 @@ textarea.input {
 
 .paste-dialog__button {
   padding: var(--sp-2) var(--sp-4);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-default);
   border-radius: var(--radius-md);
   font-size: var(--type-body-3-size);
   line-height: var(--type-body-3-line-height);
@@ -14244,22 +14281,22 @@ textarea.input {
 }
 
 .paste-dialog__button--secondary {
-  background: var(--bg-page);
+  background: var(--surface-page);
   color: var(--text-secondary);
 }
 
 .paste-dialog__button--secondary:hover {
-  background: color-mix(in srgb, var(--bg-surface) 50%, var(--bg-page) 50%);
+  background: var(--component-mix-surface-panel-50pct-surface-page-50pct);
 }
 
 .paste-dialog__button--primary {
-  background: var(--accent-blue);
+  background: var(--status-info-fg);
   color: white;
-  border-color: var(--accent-blue);
+  border-color: var(--status-info-fg);
 }
 
 .paste-dialog__button--primary:hover {
-  background: color-mix(in srgb, var(--accent-blue) 85%, white);
+  background: var(--component-mix-status-info-fg-85pct-white);
 }
 
 /* ========== Workspace Appearance Personalization ========== */
@@ -14311,9 +14348,9 @@ textarea.input {
 }
 
 .workspace-sidebar-panel {
-  background: var(--ws-sidebar-bg);
-  border-right: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
-  backdrop-filter: var(--ws-backdrop-filter);
+  background: var(--workspace-sidebar-surface);
+  border-right: 1px solid var(--component-mix-border-default-72pct-transparent);
+  backdrop-filter: var(--material-backdrop-filter);
 }
 
 .workspace-activity-bar {
@@ -14323,10 +14360,10 @@ textarea.input {
   align-items: center;
   gap: var(--sp-2);
   padding: var(--sp-3) var(--sp-2);
-  border-right: 1px solid var(--border);
-  background: var(--ws-activitybar-bg);
-  border-right-color: color-mix(in srgb, var(--border) 72%, transparent);
-  backdrop-filter: var(--ws-backdrop-filter);
+  border-right: 1px solid var(--border-default);
+  background: var(--workspace-activitybar-surface);
+  border-right-color: var(--component-mix-border-default-72pct-transparent);
+  backdrop-filter: var(--material-backdrop-filter);
 }
 
 .workspace-status-bar {
@@ -14338,9 +14375,9 @@ textarea.input {
   min-width: 0;
   flex-shrink: 0;
   padding: 0 12px;
-  border-top: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
-  background: var(--ws-statusbar-bg);
-  backdrop-filter: var(--ws-backdrop-filter);
+  border-top: 1px solid var(--component-mix-border-default-62pct-transparent);
+  background: var(--workspace-statusbar-surface);
+  backdrop-filter: var(--material-backdrop-filter);
 }
 
 .workspace-status-bar--flush {
@@ -14350,13 +14387,17 @@ textarea.input {
 
 .workspace-empty-inner,
 .workspace-resolving-card {
-  background: linear-gradient(180deg, var(--ws-editor-toolbar-bg), var(--ws-editor-shell-bg));
-  backdrop-filter: var(--ws-backdrop-filter);
+  background: linear-gradient(
+    180deg,
+    var(--workspace-editor-toolbar-surface),
+    var(--workspace-editor-shell-surface)
+  );
+  backdrop-filter: var(--material-backdrop-filter);
 }
 
 .workspace-git-editor {
-  background: var(--ws-editor-shell-bg);
-  backdrop-filter: var(--ws-backdrop-filter);
+  background: var(--workspace-editor-shell-surface);
+  backdrop-filter: var(--material-backdrop-filter);
 }
 
 .code-editor-header {
@@ -14364,52 +14405,115 @@ textarea.input {
   align-items: center;
   gap: var(--gap-default);
   padding: var(--gap-default) var(--editor-toolbar-inset);
-  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, var(--accent-blue) 28%);
-  background: var(--ws-editor-toolbar-bg);
-  backdrop-filter: var(--ws-backdrop-filter);
+  border-bottom: 1px solid var(--workspace-editor-toolbar-border);
+  background: var(--workspace-editor-toolbar-surface);
+  backdrop-filter: var(--material-backdrop-filter);
 }
 
 .session-card {
   border: none;
   border-radius: 0;
   box-shadow: none;
-  background: var(--ws-session-bg);
-  backdrop-filter: var(--ws-backdrop-filter);
+  background: var(--workspace-session-surface);
+  backdrop-filter: var(--material-backdrop-filter);
 }
 
 .session-card.session-card--active {
-  background: var(--ws-session-active-bg);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-focus) 84%, transparent);
+  background: var(--workspace-session-active-surface);
+  box-shadow: inset 0 0 0 1px var(--component-mix-border-focus-84pct-transparent);
 }
 
 .session-header,
 .session-card.session-card--active > .panel-header,
 .session-card.session-card--active .session-header {
   padding: var(--gap-tight) var(--inset-control-inline);
-  border-bottom: 1px solid var(--border);
-  background: var(--ws-session-header-bg);
-  backdrop-filter: var(--ws-backdrop-filter);
+  border-bottom: 1px solid var(--border-default);
+  background: var(--workspace-session-header-surface);
+  backdrop-filter: var(--material-backdrop-filter);
 }
 
 .session-card.session-card--active > .panel-header,
 .session-card.session-card--active .session-header {
-  border-bottom-color: color-mix(in srgb, var(--border-focus) 76%, transparent);
+  border-bottom-color: var(--component-mix-border-focus-76pct-transparent);
 }
 
 .session-terminal {
   background: transparent;
 }
 
+.pane-drop-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: var(--z-inline-raised);
+  pointer-events: none;
+  border: 1px dashed var(--component-mix-state-info-text-55pct-transparent);
+  border-radius: inherit;
+  background: var(--component-mix-state-info-bg-12pct-transparent);
+}
+
+.pane-drop-overlay::before {
+  content: "";
+  position: absolute;
+  background: var(--component-mix-state-info-text-18pct-transparent);
+}
+
+.pane-drop-overlay--left::before {
+  inset: 0 auto 0 0;
+  width: 24%;
+}
+
+.pane-drop-overlay--right::before {
+  inset: 0 0 0 auto;
+  width: 24%;
+}
+
+.pane-drop-overlay--top::before {
+  inset: 0 0 auto 0;
+  height: 24%;
+}
+
+.pane-drop-overlay--bottom::before {
+  inset: auto 0 0 0;
+  height: 24%;
+}
+
+.pane-drop-overlay--center::before,
+.pane-drop-overlay--draft::before {
+  inset: 22%;
+}
+
+.pane-drop-overlay__center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: var(--sp-1) var(--sp-2);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-pill);
+  background: var(--component-mix-surface-elevated-92pct-transparent);
+  color: var(--text-primary);
+  font-size: var(--type-body-6-size);
+  line-height: var(--type-body-6-line-height);
+  font-weight: var(--type-body-6-weight);
+}
+
 .workspace-sidebar-panel__content,
 .workspace-sidebar-view,
-.workspace-sidebar-panel__body {
-  background: transparent;
+.workspace-sidebar-panel__body,
+.workspace-body,
+.workspace-main-stage,
+.agent-panes,
+.agent-pane,
+.pane-layout,
+.pane-layout-child {
+  background: var(--workspace-content-surface);
 }
 
 .agent-draft-launcher {
   container-type: inline-size;
   background:
-    radial-gradient(circle at center, rgba(108, 182, 255, 0.06), transparent 32%), transparent;
+    radial-gradient(circle at center, var(--component-rgba-108-182-255-0-06), transparent 32%),
+    transparent;
 }
 
 .agent-draft-content {
@@ -14418,23 +14522,11 @@ textarea.input {
   align-items: stretch;
   gap: var(--sp-4);
   padding: var(--sp-8) var(--sp-6);
-  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
+  border: 1px solid var(--component-mix-border-default-74pct-transparent);
   border-radius: calc(var(--radius-xl) + var(--sp-1));
-  background: linear-gradient(
-    180deg,
-    color-mix(
-      in srgb,
-      var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.96) * 78%),
-      color-mix(in srgb, var(--bg-surface) 34%, transparent)
-    ),
-    color-mix(
-      in srgb,
-      var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.88) * 64%),
-      color-mix(in srgb, var(--bg-page) 4%, transparent)
-    )
-  );
+  background: var(--agent-draft-surface);
   box-shadow: var(--shadow-lg);
-  backdrop-filter: var(--app-surface-backdrop-filter, none);
+  backdrop-filter: var(--material-backdrop-filter);
 }
 
 .agent-provider-card {
@@ -14446,35 +14538,31 @@ textarea.input {
   border-radius: var(--radius-xl);
   text-align: left;
   white-space: normal;
-  background: color-mix(
-    in srgb,
-    var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.88) * 44%),
-    transparent
-  );
+  background: var(--agent-provider-card-surface);
 }
 
 .terminal-toolbar {
-  background: var(--ws-terminal-toolbar-bg);
-  backdrop-filter: var(--ws-backdrop-filter);
+  background: var(--workspace-terminal-toolbar-surface);
+  backdrop-filter: var(--material-backdrop-filter);
 }
 
 .bottom-terminal-tabs {
-  background: var(--ws-terminal-tabs-bg);
-  backdrop-filter: var(--ws-backdrop-filter);
+  background: var(--workspace-terminal-tabs-surface);
+  backdrop-filter: var(--material-backdrop-filter);
 }
 
 .workspace-bottom-panel > .bottom-terminal {
   border: none;
   border-radius: 0;
-  background: var(--ws-terminal-shell-bg);
+  background: var(--workspace-terminal-shell-surface);
   box-shadow: none;
-  backdrop-filter: var(--ws-backdrop-filter);
+  backdrop-filter: var(--material-backdrop-filter);
 }
 
 .bottom-terminal-content,
 .bottom-terminal-xterm,
 .bottom-terminal-empty {
-  background: transparent;
+  background: var(--workspace-content-surface);
 }
 
 .mobile-shell__agent-stage .session-card:not(.session-card--active),
@@ -14482,12 +14570,8 @@ textarea.input {
 .mobile-sheet--files .file-tree-shell--mobile,
 .mobile-sheet--files .git-panel--mobile,
 .mobile-sheet--files .workspace-git-editor {
-  background: color-mix(
-    in srgb,
-    var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.96) * 100%),
-    color-mix(in srgb, var(--bg-panel) 80%, transparent)
-  );
-  backdrop-filter: var(--app-surface-backdrop-filter, none);
+  background: var(--mobile-sheet-file-surface);
+  backdrop-filter: var(--material-backdrop-filter);
 }
 
 .mobile-sheet--files .file-tree-shell--mobile,
@@ -14495,7 +14579,7 @@ textarea.input {
 .mobile-sheet--files .workspace-git-editor,
 .mobile-sheet--files .workspace-git-view {
   overflow: hidden;
-  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
+  border: 1px solid var(--component-mix-border-default-80pct-transparent);
   border-radius: var(--radius-md);
   box-shadow: none;
 }
@@ -14506,22 +14590,14 @@ textarea.input {
 
 .mobile-terminal-sheet .bottom-terminal {
   overflow: hidden;
-  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+  border: 1px solid var(--component-mix-border-default-82pct-transparent);
   border-radius: 0;
   box-shadow: none;
 }
 
 .mobile-shell__agent-stage .session-card.session-card--active {
-  background: color-mix(
-    in srgb,
-    var(--bg-active) 76%,
-    color-mix(
-      in srgb,
-      var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.96) * 100%),
-      transparent
-    )
-  );
-  backdrop-filter: var(--app-surface-backdrop-filter, none);
+  background: var(--workspace-session-mobile-active-surface);
+  backdrop-filter: var(--material-backdrop-filter);
 }
 
 @media (max-width: 899px), (pointer: coarse) {
diff --git a/packages/web/src/styles/components.theme.test.ts b/packages/web/src/styles/components.theme.test.ts
index 6e1be8b6..44bf9bcb 100644
--- a/packages/web/src/styles/components.theme.test.ts
+++ b/packages/web/src/styles/components.theme.test.ts
@@ -94,6 +94,10 @@ const statusDotStylesheet = readFileSync(
   `${process.cwd()}/src/components/ui/status-dot/index.module.css`,
   "utf8"
 );
+const selectStylesheet = readFileSync(
+  `${process.cwd()}/src/components/ui/select/index.module.css`,
+  "utf8"
+);
 
 function getLastGroupedRuleBlockFrom(source: string, pattern: RegExp) {
   const matches = Array.from(source.matchAll(pattern));
@@ -553,6 +557,105 @@ describe("components.css theme-sensitive surfaces", () => {
     );
   });
 
+  it("maps shared controls onto semantic color roles", () => {
+    expect(getLastRuleBlockFrom(buttonStyles, ".primary")).toContain(
+      "background: var(--control-primary-bg)"
+    );
+    expect(getLastRuleBlockFrom(buttonStyles, ".secondary")).toContain(
+      "background: var(--control-secondary-bg)"
+    );
+    expect(getLastRuleBlockFrom(buttonStyles, ".secondary")).toContain(
+      "border-color: var(--control-secondary-border)"
+    );
+    expect(getLastRuleBlockFrom(buttonStyles, ".btn:focus-visible").replace(/\s+/g, " ")).toContain(
+      "box-shadow: 0 0 0 2px var(--surface-page), var(--control-focus-ring)"
+    );
+
+    expect(getLastRuleBlockFrom(iconButtonStyles, ".filled")).toContain(
+      "background: var(--control-secondary-bg)"
+    );
+    expect(getLastRuleBlockFrom(iconButtonStyles, ".filled")).toContain(
+      "border-color: var(--control-secondary-border)"
+    );
+
+    expect(getLastRuleBlockFrom(inputStyles, ".input")).toContain("background: var(--field-bg)");
+    expect(getLastRuleBlockFrom(inputStyles, ".input")).toContain(
+      "border: 1px solid var(--field-border)"
+    );
+    expect(getLastRuleBlockFrom(inputStyles, ".input:focus-visible")).toContain(
+      "box-shadow: var(--field-ring)"
+    );
+
+    expect(getLastRuleBlockFrom(textareaStyles, ".input")).toContain("background: var(--field-bg)");
+
+    expect(getLastRuleBlockFrom(segmentedControlStylesheet, ".segmentedControl")).toContain(
+      "background: var(--control-secondary-bg)"
+    );
+    expect(
+      getLastRuleBlockFrom(segmentedControlStylesheet, ":global(.settings-provider-subnav)")
+    ).toContain("border-bottom: 1px solid var(--border-default)");
+
+    expect(getLastRuleBlockFrom(kbdStylesheet, ".kbd")).toContain("background: var(--kbd-surface)");
+
+    const switchStyles = readFileSync(
+      `${process.cwd()}/src/components/ui/switch/index.module.css`,
+      "utf8"
+    );
+    expect(getLastRuleBlockFrom(switchStyles, ".checked .track")).toContain(
+      "background: var(--status-success-fg)"
+    );
+    expect(getLastRuleBlockFrom(switchStyles, ".switch:disabled.checked .track")).toContain(
+      "background: var(--state-success-bg)"
+    );
+
+    const spinnerStyles = readFileSync(
+      `${process.cwd()}/src/components/ui/spinner/index.module.css`,
+      "utf8"
+    );
+    expect(getLastRuleBlockFrom(spinnerStyles, ".spinner")).toContain(
+      "border: 2px solid var(--control-spinner-track)"
+    );
+
+    const actionMenuStyles = readFileSync(
+      `${process.cwd()}/src/components/ui/action-menu/index.module.css`,
+      "utf8"
+    );
+    expect(getLastRuleBlockFrom(actionMenuStyles, ".content")).toContain(
+      "background: var(--surface-overlay-bg)"
+    );
+    expect(getLastRuleBlockFrom(actionMenuStyles, ".itemDanger:hover")).toContain(
+      "background: var(--menu-danger-hover-bg)"
+    );
+    expect(getLastRuleBlockFrom(popoverStyles, ".content")).toContain(
+      "background: var(--surface-overlay-bg)"
+    );
+
+    expect(getLastRuleBlockFrom(datetimePickerStyles, ".calendar")).toContain(
+      "border: 1px dashed var(--border-default)"
+    );
+    expect(getLastRuleBlockFrom(datetimePickerStyles, ".calendarWeekdays")).toContain(
+      "border-bottom: 1px solid var(--border-default)"
+    );
+    expect(getLastRuleBlockFrom(datetimePickerStyles, ".timeSection")).toContain(
+      "border-top: 1px solid var(--border-default)"
+    );
+    expect(getLastRuleBlockFrom(datetimePickerStyles, ".calendarDaySelected")).toContain(
+      "background: var(--control-primary-bg)"
+    );
+    expect(getLastRuleBlockFrom(tabsStyles, ":global(.worktree-tabs)")).toContain(
+      "border-bottom: 1px solid var(--border-default)"
+    );
+    expect(getLastRuleBlockFrom(tabsStyles, ":global(.worktree-tab.active)")).toContain(
+      "border-bottom: 2px solid var(--state-selected-border)"
+    );
+    expect(getLastRuleBlockFrom(selectStylesheet, ".listbox")).toContain(
+      "background: var(--surface-overlay-bg)"
+    );
+    expect(getLastRuleBlockFrom(selectStylesheet, ".optionSelected")).toContain(
+      "background: var(--state-hover-bg)"
+    );
+  });
+
   it("keeps desktop popovers above modal shells so picker overlays are not occluded", () => {
     expect(getLastRuleBlockFrom(modalStylesheet, ":global(.modal-overlay)")).toContain(
       "z-index: var(--z-modal-backdrop)"
@@ -619,12 +722,32 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(getLastRuleBlockFrom(tagStyles, ":where(.tag)")).toContain(
       "border-radius: var(--radius-tag)"
     );
+    expect(getLastRuleBlockFrom(tagStyles, ":where(.blue)")).toContain(
+      "background: var(--tag-info-bg)"
+    );
+    expect(getLastRuleBlockFrom(tagStyles, ":where(.blue)")).toContain("color: var(--tag-info-fg)");
+    expect(getLastRuleBlockFrom(tagStyles, ":where(.purple)")).toContain(
+      "background: var(--tag-accent-bg)"
+    );
+    expect(getLastRuleBlockFrom(tagStyles, ":where(.purple)")).toContain(
+      "color: var(--tag-accent-fg)"
+    );
+    expect(getLastRuleBlockFrom(tagStyles, ":where(.neutral)")).toContain(
+      "background: var(--tag-accent-bg)"
+    );
+    expect(getLastRuleBlockFrom(tagStyles, ":where(.neutral)")).toContain(
+      "color: var(--tag-accent-fg)"
+    );
     expect(getLastRuleBlockFrom(badgeStyles, ":where(.badge)")).toContain(
       "border-radius: var(--radius-chip)"
     );
+    expect(getLastRuleBlockFrom(badgeStyles, ":where(.badge)")).toContain(
+      "background: var(--status-info-fg)"
+    );
     expect(getLastRuleBlockFrom(pillStylesheet, ".pill")).toContain(
       "border-radius: var(--radius-pill)"
     );
+    expect(pillStylesheet).not.toContain("color-mix(");
 
     expect(tooltip).toContain("border: 1px solid var(--surface-overlay-border)");
     expect(tooltip).toContain("border-radius: var(--radius-overlay)");
@@ -634,30 +757,30 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(notice).toContain("gap: var(--gap-content)");
     expect(notice).toContain("padding: var(--inset-control-block) var(--inset-control-inline)");
     expect(notice).toContain("border-radius: var(--radius-overlay)");
-    expect(notice).toContain("background: var(--surface-elevated-bg)");
+    expect(notice).toContain("background: var(--material-elevated)");
     expect(getLastRuleBlockFrom(noticeStylesheet, ".info")).toContain(
-      "border-color: var(--state-info-border)"
+      "border-color: var(--status-info-border)"
     );
     expect(getLastRuleBlockFrom(noticeStylesheet, ".info")).toContain(
-      "background: var(--state-info-bg)"
+      "background: var(--status-info-bg)"
     );
     expect(getLastRuleBlockFrom(noticeStylesheet, ".success")).toContain(
-      "border-color: var(--state-success-border)"
+      "border-color: var(--status-success-border)"
     );
     expect(getLastRuleBlockFrom(noticeStylesheet, ".success")).toContain(
-      "background: var(--state-success-bg)"
+      "background: var(--status-success-bg)"
     );
     expect(getLastRuleBlockFrom(noticeStylesheet, ".warning")).toContain(
-      "border-color: var(--state-warning-border)"
+      "border-color: var(--status-warning-border)"
     );
     expect(getLastRuleBlockFrom(noticeStylesheet, ".warning")).toContain(
-      "background: var(--state-warning-bg)"
+      "background: var(--status-warning-bg)"
     );
     expect(getLastRuleBlockFrom(noticeStylesheet, ".error")).toContain(
-      "border-color: var(--state-error-border)"
+      "border-color: var(--status-danger-border)"
     );
     expect(getLastRuleBlockFrom(noticeStylesheet, ".error")).toContain(
-      "background: var(--state-error-bg)"
+      "background: var(--status-danger-bg)"
     );
 
     expect(modalOverlay).toContain("background: var(--overlay-backdrop)");
@@ -673,7 +796,7 @@ describe("components.css theme-sensitive surfaces", () => {
     ).toBe(true);
     expect(
       getRuleBlocksFrom(modalStyles, ".card").some((block) =>
-        block.includes("background: var(--surface-overlay-bg)")
+        block.includes("background: var(--material-overlay)")
       )
     ).toBe(true);
     expect(
@@ -695,7 +818,7 @@ describe("components.css theme-sensitive surfaces", () => {
     ).toBe(true);
     expect(
       getRuleBlocksFrom(drawerStylesheet, ".panel").some((block) =>
-        block.includes("background: var(--surface-overlay-bg)")
+        block.includes("background: var(--material-overlay)")
       )
     ).toBe(true);
     expect(
@@ -704,7 +827,7 @@ describe("components.css theme-sensitive surfaces", () => {
       )
     ).toBe(true);
 
-    expect(localOverlay).toContain("background: var(--overlay-backdrop)");
+    expect(localOverlay).toContain("background: var(--material-local-overlay)");
     expect(localOverlayCard).toContain("border: 1px solid var(--surface-overlay-border)");
     expect(localOverlayCard).toContain("border-radius: var(--radius-local-overlay)");
     expect(localOverlayCard).toContain("background: var(--surface-overlay-bg)");
@@ -712,35 +835,55 @@ describe("components.css theme-sensitive surfaces", () => {
 
     expect(toast).toContain("border: 1px solid var(--surface-overlay-border)");
     expect(toast).toContain("border-radius: var(--radius-overlay)");
-    expect(toast).toContain("background: var(--surface-overlay-bg)");
+    expect(toast).toContain("background: var(--material-overlay)");
     expect(toast).toContain("box-shadow: var(--surface-overlay-shadow)");
 
-    expect(progressRoot).toContain("background: var(--state-info-bg)");
+    expect(progressRoot).toContain("background: var(--status-info-bg)");
+    expect(progressBarStylesheet).not.toContain("color-mix(");
     expect(getLastRuleBlockFrom(progressBarStylesheet, ".success")).toContain(
-      "--progress-bar-color: var(--state-success-text)"
+      "--progress-bar-color: var(--status-success-fg)"
     );
     expect(getLastRuleBlockFrom(progressBarStylesheet, ".warning")).toContain(
-      "--progress-bar-color: var(--state-warning-text)"
+      "--progress-bar-color: var(--status-warning-fg)"
     );
     expect(getLastRuleBlockFrom(progressBarStylesheet, ".error")).toContain(
-      "--progress-bar-color: var(--state-error-text)"
+      "--progress-bar-color: var(--status-danger-fg)"
     );
     expect(getLastRuleBlockFrom(progressBarStylesheet, ".info")).toContain(
-      "--progress-bar-color: var(--state-info-text)"
+      "--progress-bar-color: var(--status-info-fg)"
     );
     expect(getLastRuleBlockFrom(progressBarStylesheet, ".neutral")).toContain(
-      "--progress-bar-color: var(--state-disabled-text)"
+      "--progress-bar-color: var(--text-disabled)"
     );
 
     expect(getLastRuleBlockFrom(statusDotStylesheet, ".dot")).toContain(
       "border-radius: var(--radius-chip)"
     );
+    expect(getLastRuleBlockFrom(statusDotStylesheet, ".dot")).toContain(
+      "background: var(--status-dot-current-color, var(--status-dot-tone-color, var(--status-dot-idle)))"
+    );
+    expect(getLastRuleBlockFrom(statusDotStylesheet, ".dot").replace(/\s+/g, " ")).toContain(
+      "box-shadow: 0 0 0 1px var(--status-dot-current-ring, var(--status-dot-tone-ring, var(--status-dot-idle-ring)))"
+    );
     expect(getLastRuleBlockFrom(statusDotStylesheet, ":global(.session-dot-running)")).toContain(
-      "--status-dot-current-color: var(--state-info-text)"
+      "--status-dot-current-color: var(--status-dot-running)"
+    );
+    expect(getLastRuleBlockFrom(statusDotStylesheet, ":global(.session-dot-running)")).toContain(
+      "var(--status-dot-running-ring-2)"
+    );
+    expect(getLastRuleBlockFrom(statusDotStylesheet, ":global(.session-dot-starting)")).toContain(
+      "--status-dot-current-ring: var(--status-dot-starting-ring)"
+    );
+    expect(getLastRuleBlockFrom(statusDotStylesheet, ":global(.session-dot-complete)")).toContain(
+      "--status-dot-current-ring: var(--status-dot-complete-ring)"
     );
+    expect(
+      getLastRuleBlockFrom(statusDotStylesheet, ":global(.connection-status-dot-disconnected)")
+    ).toContain("--status-dot-current-ring: var(--status-dot-error-ring)");
 
     expect(emptyState).toContain("gap: var(--gap-content)");
     expect(emptyState).toContain("padding: var(--inset-dialog) var(--inset-panel)");
+    expect(confirmDialogStyles).not.toContain("color-mix(");
   });
 
   it("keeps config status colors on icon tokens", () => {
@@ -777,7 +920,7 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(metaItem).toContain("padding: 0");
     expect(metaItem).not.toContain("border:");
     expect(reasoningItem).not.toContain("border-style: dashed");
-    expect(errorText).toContain("color: var(--accent-pink)");
+    expect(errorText).toContain("color: var(--status-danger-fg)");
     expect(errorText).not.toContain("background:");
     expect(errorText).not.toContain("border-left:");
   });
@@ -851,8 +994,9 @@ describe("components.css theme-sensitive surfaces", () => {
     const launchButtonHover = getLastRuleBlock(".launch-start-btn:hover");
     const mobileLaunchButton = getLastRuleBlock(".launch-start-btn--mobile");
 
-    expect(modal).not.toContain("rgba(17, 24, 31, 0.98)");
-    expect(modal).toContain("var(--bg-surface)");
+    expect(modal).not.toContain("var(--component-rgba-17-24-31-0-98)");
+    expect(modal).toContain("var(--component-mix-surface-panel-97pct-white-3pct)");
+    expect(modal).toContain("var(--component-mix-surface-panel-82pct-surface-page-18pct)");
     expect(launchButton).toContain("gap: var(--gap-default)");
     expect(launchButton).toContain("border-radius: var(--radius-control-lg)");
     expect(launchButtonFocus).toContain("var(--state-focus-ring-width)");
@@ -880,7 +1024,7 @@ describe("components.css theme-sensitive surfaces", () => {
       /\.workspace-resolving-pill,\s*\.workspace-resolving-line,\s*\.workspace-resolving-console-line\s*\{([^}]*)\}/g
     );
     const resolvingStrongLine = getLastRuleBlock(".workspace-resolving-line-strong");
-    const mainStage = getLastRuleBlock(".workspace-main-stage");
+    const mainStage = getRuleBlocksFrom(stylesheet, ".workspace-main-stage").join("\n");
     const sessionTerminal = getLastRuleBlock(".session-terminal");
     const sessionCard = getLastRuleBlock(".session-card");
     const activeSessionCard = getLastRuleBlock(".session-card.session-card--active");
@@ -914,17 +1058,26 @@ describe("components.css theme-sensitive surfaces", () => {
       ".split-divider-h::before"
     ).join("\n");
     const paneDividerBaseRules = getRuleBlocksFrom(stylesheet, ".pane-layout-divider").join("\n");
+    const paneDividerHoverRules = getRuleBlocksFrom(stylesheet, ".pane-layout-divider:hover").join(
+      "\n"
+    );
     const paneDividerLineRules = getRuleBlocksFrom(stylesheet, ".pane-layout-divider::after").join(
       "\n"
     );
     const paneDividerHorizontalRules = getRuleBlocksFrom(
       stylesheet,
-      ".pane-layout-horizontal .pane-layout-divider"
+      ".pane-layout-horizontal-divider"
     ).join("\n");
     const paneDividerVerticalRules = getRuleBlocksFrom(
       stylesheet,
-      ".pane-layout-vertical .pane-layout-divider"
+      ".pane-layout-vertical-divider"
     ).join("\n");
+    const hasLegacyPaneDividerHorizontalRule = hasRuleBlock(
+      ".pane-layout-horizontal .pane-layout-divider"
+    );
+    const hasLegacyPaneDividerVerticalRule = hasRuleBlock(
+      ".pane-layout-vertical .pane-layout-divider"
+    );
     const bottomTerminalShellRules = getRuleBlocksFrom(
       stylesheet,
       ".workspace-bottom-panel > .bottom-terminal"
@@ -934,9 +1087,8 @@ describe("components.css theme-sensitive surfaces", () => {
     const bottomTerminalXterm = getLastRuleBlock(".bottom-terminal-xterm");
     const bottomTerminalEmpty = getLastRuleBlock(".bottom-terminal-empty");
 
-    expect(topbar).toContain("var(--surface-overlay-bg)");
-    expect(topbar).toContain("var(--app-surface-opacity, 0.96)");
-    expect(topbar).toContain("backdrop-filter: var(--app-surface-backdrop-filter, none)");
+    expect(topbar).toContain("background: var(--material-shell-topbar)");
+    expect(topbar).toContain("backdrop-filter: var(--material-backdrop-filter)");
     expect(topbarTabs).toContain("gap: var(--gap-micro)");
     expect(topbarTab).toContain("gap: var(--gap-tight)");
     expect(topbarTab).toContain(
@@ -945,7 +1097,8 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(topbarTabContent).toContain("gap: var(--gap-tight)");
     expect(topbarTabContent).toContain("background: transparent");
     expect(topbarTabContent).toContain("box-shadow: none");
-    expect(activeTab).toContain("var(--bg-active)");
+    expect(activeTab).toContain("var(--component-mix-surface-active-86pct-white-14pct)");
+    expect(activeTab).toContain("var(--component-mix-surface-active-94pct-surface-panel-6pct)");
     expect(activeTab).not.toContain("rgba(45, 63, 79, 0.92)");
     expect(topbarTab).toContain("position: relative");
     expect(topbarTab).toContain("overflow: hidden");
@@ -972,12 +1125,12 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(tokensStylesheet).toContain("--workspace-session-map-idle: color-mix(");
     expect(tokensStylesheet).toContain("--workspace-session-map-empty: color-mix(");
     expect(workspaceResizer).toContain("z-index: var(--z-inline)");
-    expect(emptyCard).toContain("var(--ws-editor-toolbar-bg)");
-    expect(emptyCard).toContain("var(--ws-editor-shell-bg)");
-    expect(resolvingCard).toContain("var(--ws-editor-toolbar-bg)");
-    expect(resolvingCard).toContain("var(--ws-editor-shell-bg)");
-    expect(workspaceGitEditor).toContain("background: var(--ws-editor-shell-bg)");
-    expect(workspaceGitEditor).toContain("backdrop-filter: var(--ws-backdrop-filter)");
+    expect(emptyCard).toContain("var(--workspace-editor-toolbar-surface)");
+    expect(emptyCard).toContain("var(--workspace-editor-shell-surface)");
+    expect(resolvingCard).toContain("var(--workspace-editor-toolbar-surface)");
+    expect(resolvingCard).toContain("var(--workspace-editor-shell-surface)");
+    expect(workspaceGitEditor).toContain("background: var(--workspace-editor-shell-surface)");
+    expect(workspaceGitEditor).toContain("backdrop-filter: var(--material-backdrop-filter)");
     expect(mainStage).toContain("flex: 1");
     expect(mainStage).toContain("min-height: 0");
     expect(mainStage).toContain("min-width: 0");
@@ -989,37 +1142,39 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(sessionTerminal).toContain("background: transparent");
     expect(sessionTerminal).not.toContain("var(--bg-terminal)");
     expect(sessionCard).toContain("border: none");
-    expect(sessionCard).not.toContain("border: 1px solid var(--border)");
-    expect(sessionCard).toContain("background: var(--ws-session-bg)");
-    expect(sessionCard).toContain("backdrop-filter: var(--ws-backdrop-filter)");
-    expect(activeSessionCard).toContain("background: var(--ws-session-active-bg)");
+    expect(sessionCard).not.toContain("border: 1px solid var(--border-default)");
+    expect(sessionCard).toContain("background: var(--workspace-session-surface)");
+    expect(sessionCard).toContain("backdrop-filter: var(--material-backdrop-filter)");
+    expect(activeSessionCard).toContain("background: var(--workspace-session-active-surface)");
     expect(activeSessionCard).not.toContain("background: var(--bg-active)");
     expect(activeSessionCard).toContain("box-shadow: inset 0 0 0 1px");
-    expect(activeSessionCard).toContain("var(--border-focus) 84%");
-    expect(activeSessionHeader).toContain("background: var(--ws-session-header-bg)");
-    expect(activeSessionHeader).toContain("backdrop-filter: var(--ws-backdrop-filter)");
+    expect(activeSessionCard).toContain("var(--component-mix-border-focus-84pct-transparent)");
+    expect(activeSessionHeader).toContain("background: var(--workspace-session-header-surface)");
+    expect(activeSessionHeader).toContain("backdrop-filter: var(--material-backdrop-filter)");
     expect(activeSessionHeader).not.toContain("var(--bg-active) 88%");
     expect(activeSessionTitle).toContain("color: var(--text-primary)");
     expect(resolvingConsoleStatus).toContain("background: var(--state-success-text)");
     expect(resolvingConsoleStatus).toContain("border-radius: var(--radius-chip)");
-    expect(resolvingConsoleStatus).toContain("var(--state-success-border)");
+    expect(resolvingConsoleStatus).toContain(
+      "var(--component-mix-state-success-border-32pct-transparent)"
+    );
     expect(resolvingSkeleton).toContain(
-      "background: color-mix(in srgb, var(--bg-hover) 74%, var(--bg-surface) 26%)"
+      "background: var(--component-mix-surface-hover-74pct-surface-panel-26pct)"
     );
     expect(resolvingStrongLine).toContain("border: 1px solid var(--state-info-border)");
     expect(resolvingStrongLine).toContain("background: var(--state-info-bg)");
-    expect(activityBar).toContain("border-right: 1px solid var(--border)");
-    expect(activityBar).toContain("background: var(--ws-activitybar-bg)");
-    expect(activityBar).toContain("backdrop-filter: var(--ws-backdrop-filter)");
+    expect(activityBar).toContain("border-right: 1px solid var(--border-default)");
+    expect(activityBar).toContain("background: var(--workspace-activitybar-surface)");
+    expect(activityBar).toContain("backdrop-filter: var(--material-backdrop-filter)");
     expect(activityBar).not.toContain("var(--bg-panel) 88%");
-    expect(workspaceSidebarContent).toContain("background: transparent");
-    expect(workspaceSidebarView).toContain("background: transparent");
-    expect(workspaceSidebarBody).toContain("background: transparent");
+    expect(workspaceSidebarContent).toContain("background: var(--workspace-content-surface)");
+    expect(workspaceSidebarView).toContain("background: var(--workspace-content-surface)");
+    expect(workspaceSidebarBody).toContain("background: var(--workspace-content-surface)");
     expect(activityBarButton).toContain("border-radius: var(--radius-lg)");
     expect(activityBarButton).toContain("background: transparent");
-    expect(activityBarButtonHover).toContain("background: var(--bg-hover)");
+    expect(activityBarButtonHover).toContain("background: var(--surface-hover)");
     expect(activityBarButtonActive).toContain(
-      "background: color-mix(in srgb, var(--accent-blue) 14%, transparent)"
+      "background: var(--component-mix-status-info-fg-14pct-transparent)"
     );
     expect(sidebarActions).toContain("gap: var(--gap-control)");
     expect(verticalDividerRules).toContain("width: 10px");
@@ -1027,40 +1182,53 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(verticalDividerRules).toContain("margin-left: -5px");
     expect(verticalDividerRules).toContain("margin-right: -5px");
     expect(verticalDividerLineRules).toContain(
-      "background: color-mix(in srgb, var(--border) 62%, transparent)"
+      "background: var(--component-mix-border-default-62pct-transparent)"
     );
     expect(horizontalDividerRules).toContain("height: 10px");
     expect(horizontalDividerRules).not.toContain("height: 8px");
     expect(horizontalDividerRules).toContain("margin-top: -5px");
     expect(horizontalDividerRules).toContain("margin-bottom: -5px");
     expect(horizontalDividerLineRules).toContain(
-      "background: color-mix(in srgb, var(--border) 62%, transparent)"
+      "background: var(--component-mix-border-default-62pct-transparent)"
     );
     expect(paneDividerBaseRules).toContain("position: relative");
     expect(paneDividerBaseRules).toContain("z-index: var(--z-inline-raised)");
+    expect(paneDividerBaseRules).toContain(
+      "background: linear-gradient(180deg, transparent, var(--state-info-bg), transparent)"
+    );
     expect(paneDividerLineRules).toContain(
-      "background: color-mix(in srgb, var(--border) 62%, transparent)"
+      "background: var(--component-mix-border-default-62pct-transparent)"
     );
     expect(paneDividerLineRules).toContain("border-radius: var(--radius-pill)");
+    expect(paneDividerHoverRules).toContain(
+      "background: var(--component-mix-border-focus-44pct-transparent-56pct)"
+    );
     expect(paneDividerHorizontalRules).toContain("width: 10px");
     expect(paneDividerHorizontalRules).toContain("margin-left: -5px");
     expect(paneDividerHorizontalRules).toContain("margin-right: -5px");
+    expect(paneDividerHorizontalRules).not.toContain("background: transparent");
+    expect(paneDividerVerticalRules).toContain("width: 100%");
     expect(paneDividerVerticalRules).toContain("height: 10px");
     expect(paneDividerVerticalRules).toContain("margin-top: -5px");
     expect(paneDividerVerticalRules).toContain("margin-bottom: -5px");
+    expect(paneDividerVerticalRules).not.toContain("background: transparent");
+    expect(hasLegacyPaneDividerHorizontalRule).toBe(false);
+    expect(hasLegacyPaneDividerVerticalRule).toBe(false);
     expect(bottomPanel).toContain("padding: 0");
     expect(bottomPanel).not.toContain("padding: 0 0 14px");
     expect(bottomPanel).not.toContain("padding: 0 14px 14px");
-    expect(bottomTerminalShellRules).toContain("background: var(--ws-terminal-shell-bg)");
-    expect(bottomTerminalShellRules).toContain("backdrop-filter: var(--ws-backdrop-filter)");
+    expect(bottomTerminalShellRules).toContain(
+      "background: var(--workspace-terminal-shell-surface)"
+    );
+    expect(bottomTerminalShellRules).toContain("backdrop-filter: var(--material-backdrop-filter)");
     expect(bottomTerminalShell).toContain("border: none");
     expect(bottomTerminalShellRules).toContain("border-radius: 0");
     expect(bottomTerminalShellRules).not.toContain("border-radius: 14px");
-    expect(bottomTerminalContent).toContain("background: transparent");
-    expect(bottomTerminalXterm).toContain("background: transparent");
-    expect(bottomTerminalEmpty).toContain("background: transparent");
+    expect(bottomTerminalContent).toContain("background: var(--workspace-content-surface)");
+    expect(bottomTerminalXterm).toContain("background: var(--workspace-content-surface)");
+    expect(bottomTerminalEmpty).toContain("background: var(--workspace-content-surface)");
     expect(statusBar).toContain(
-      "border-top: 1px solid color-mix(in srgb, var(--border) 62%, transparent)"
+      "border-top: 1px solid var(--component-mix-border-default-62pct-transparent)"
     );
   });
 
@@ -1082,13 +1250,13 @@ describe("components.css theme-sensitive surfaces", () => {
     const welcomeCard = getLastRuleBlock(".welcome-card");
     const welcomeFeature = getLastRuleBlock(".welcome-feature");
 
-    expect(authScreen).toContain("var(--bg-page)");
+    expect(authScreen).toContain("var(--surface-page)");
     expect(authScreen).not.toContain("radial-gradient(");
-    expect(authScreen).not.toContain("rgba(17, 24, 31, 0.96)");
-    expect(authCard).toContain("background: var(--bg-surface)");
+    expect(authScreen).not.toContain("var(--component-rgba-17-24-31-0-96)");
+    expect(authCard).toContain("background: var(--surface-panel)");
     expect(authCard).toContain("box-shadow: var(--shadow-sm)");
     expect(authCard).not.toContain("linear-gradient(");
-    expect(welcomeCard).toContain("background: var(--bg-surface)");
+    expect(welcomeCard).toContain("background: var(--surface-panel)");
     expect(welcomeCard).toContain("align-items: stretch");
     expect(welcomeCard).not.toContain("box-shadow: var(--shadow-xl)");
     expect(welcomeFeature).toContain("background: transparent");
@@ -1112,9 +1280,9 @@ describe("components.css theme-sensitive surfaces", () => {
 
     expect(appTopbarBlocks.some((block) => block.includes("padding: 0 var(--sp-2)"))).toBe(true);
     expect(appTopbarBlocks.some((block) => block.includes("gap: var(--gap-compact)"))).toBe(true);
-    expect(leftPanelBlocks.some((block) => block.includes("background: var(--bg-sidebar)"))).toBe(
-      true
-    );
+    expect(
+      leftPanelBlocks.some((block) => block.includes("background: var(--surface-muted)"))
+    ).toBe(true);
     expect(leftPanelBlocks.some((block) => block.includes("box-shadow: none"))).toBe(true);
   });
 
@@ -1149,17 +1317,17 @@ describe("components.css theme-sensitive surfaces", () => {
     const dirtyChip = getLastRuleBlock(".worktree-chip-status.worktree-dirty");
     const mobileTabs = getLastRuleBlock(".mobile-worktree-sheet__tabs");
 
-    expect(cleanChip).toContain("color: var(--state-success-text)");
-    expect(cleanChip).toContain("background: var(--state-success-bg)");
-    expect(dirtyChip).toContain("color: var(--state-warning-text)");
-    expect(dirtyChip).toContain("background: var(--state-warning-bg)");
+    expect(cleanChip).toContain("color: var(--git-status-added-fg)");
+    expect(cleanChip).toContain("background: var(--git-status-added-bg)");
+    expect(dirtyChip).toContain("color: var(--git-status-modified-fg)");
+    expect(dirtyChip).toContain("background: var(--git-status-modified-bg)");
     expect(mobileTabs).toContain("z-index: var(--z-inline)");
   });
 
   it("routes settings and workspace shared surfaces through appearance-aware background tokens", () => {
     const settingsContent = getLastRuleBlock(".settings-content");
     const settingsSurface = getRuleBlocksFrom(stylesheet, ".settings-content-surface").find(
-      (block) => block.includes("var(--surface-overlay-bg)")
+      (block) => block.includes("var(--material-overlay)")
     );
     const appTopbar = getLastRuleBlock(".app-topbar");
     const workspacePage = getLastRuleBlock(".workspace-page");
@@ -1168,6 +1336,7 @@ describe("components.css theme-sensitive surfaces", () => {
     const workspaceMainStage = getLastRuleBlock(".workspace-main-stage");
     const agentPanes = getLastRuleBlock(".agent-panes");
     const agentPane = getLastRuleBlock(".agent-pane");
+    const agentPaneLeaf = getLastRuleBlock(".agent-pane-leaf");
     const agentPanesStage = getLastRuleBlock(".workspace-main-stage > .agent-panes");
     const paneLayout = getLastRuleBlock(".pane-layout");
     const paneLayoutChild = getLastRuleBlock(".pane-layout-child");
@@ -1200,68 +1369,67 @@ describe("components.css theme-sensitive surfaces", () => {
     const mobileTopbar = getLastRuleBlock(".mobile-topbar");
     const mobileBottomStack = getLastRuleBlock(".mobile-shell__bottom-stack");
 
-    expect(settingsContent).toContain("var(--app-surface-opacity, 0.96)");
-    expect(settingsContent).toContain("var(--surface-page-bg)");
+    expect(settingsContent).toContain("background: var(--material-shell-page)");
     expect(settingsSurface).toBeTruthy();
-    expect(settingsSurface).toContain("var(--surface-overlay-bg)");
-    expect(settingsSurface).toContain("var(--app-surface-opacity, 0.96)");
-    expect(settingsSurface).toContain("backdrop-filter: var(--app-surface-backdrop-filter, none)");
-    expect(appTopbar).toContain("var(--surface-overlay-bg)");
-    expect(appTopbar).toContain("var(--app-surface-opacity, 0.96)");
-    expect(appTopbar).toContain("backdrop-filter: var(--app-surface-backdrop-filter, none)");
+    expect(settingsSurface).toContain("background: var(--material-overlay)");
+    expect(settingsSurface).toContain("backdrop-filter: var(--material-backdrop-filter)");
+    expect(appTopbar).toContain("background: var(--material-shell-topbar)");
+    expect(appTopbar).toContain("backdrop-filter: var(--material-backdrop-filter)");
     expect(workspacePage).toContain("background: transparent");
-    expect(workspaceBody).toContain("background: transparent");
+    expect(workspaceBody).toContain("background: var(--workspace-content-surface)");
     expect(workspaceMainArea).toContain("background: transparent");
-    expect(workspaceMainStage).toContain("background: transparent");
-    expect(agentPanes).toContain("background: transparent");
-    expect(agentPane).toContain("background: transparent");
+    expect(workspaceMainStage).toContain("background: var(--workspace-content-surface)");
+    expect(agentPanes).toContain("background: var(--workspace-content-surface)");
+    expect(agentPane).toContain("background: var(--workspace-content-surface)");
+    expect(agentPaneLeaf).toContain("display: flex");
+    expect(agentPaneLeaf).toContain("flex: 1");
+    expect(agentPaneLeaf).toContain("height: 100%");
+    expect(agentPaneLeaf).toContain("min-height: 0");
     expect(agentPanesStage).toContain("background: transparent");
-    expect(paneLayout).toContain("background: transparent");
-    expect(paneLayoutChild).toContain("background: transparent");
+    expect(paneLayout).toContain("background: var(--workspace-content-surface)");
+    expect(paneLayoutChild).toContain("background: var(--workspace-content-surface)");
     expect(leftPanel).toContain("background: transparent");
-    expect(workspaceSidebarPanel).toContain("background: var(--ws-sidebar-bg)");
-    expect(workspaceSidebarPanel).toContain("backdrop-filter: var(--ws-backdrop-filter)");
+    expect(workspaceSidebarPanel).toContain("background: var(--workspace-sidebar-surface)");
+    expect(workspaceSidebarPanel).toContain("backdrop-filter: var(--material-backdrop-filter)");
     expect(workspaceSidebarPanel).not.toContain("var(--surface-overlay-bg)");
-    expect(workspaceActivityBar).toContain("background: var(--ws-activitybar-bg)");
-    expect(workspaceStatusBar).toContain("background: var(--ws-statusbar-bg)");
-    expect(workspaceSidebarContent).toContain("background: transparent");
-    expect(workspaceSidebarView).toContain("background: transparent");
-    expect(workspaceSidebarBody).toContain("background: transparent");
-    expect(sessionCard).toContain("background: var(--ws-session-bg)");
-    expect(sessionCard).toContain("backdrop-filter: var(--ws-backdrop-filter)");
-    expect(activeSessionCard).toContain("background: var(--ws-session-active-bg)");
-    expect(activeSessionHeader).toContain("background: var(--ws-session-header-bg)");
-    expect(activeSessionHeader).toContain("backdrop-filter: var(--ws-backdrop-filter)");
-    expect(activeSessionCard).not.toContain("background: var(--bg-active)");
+    expect(workspaceActivityBar).toContain("background: var(--workspace-activitybar-surface)");
+    expect(workspaceActivityBar).toContain("backdrop-filter: var(--material-backdrop-filter)");
+    expect(workspaceStatusBar).toContain("background: var(--workspace-statusbar-surface)");
+    expect(workspaceStatusBar).toContain("backdrop-filter: var(--material-backdrop-filter)");
+    expect(workspaceSidebarContent).toContain("background: var(--workspace-content-surface)");
+    expect(workspaceSidebarView).toContain("background: var(--workspace-content-surface)");
+    expect(workspaceSidebarBody).toContain("background: var(--workspace-content-surface)");
+    expect(sessionCard).toContain("background: var(--workspace-session-surface)");
+    expect(sessionCard).toContain("backdrop-filter: var(--material-backdrop-filter)");
+    expect(activeSessionCard).toContain("background: var(--workspace-session-active-surface)");
+    expect(activeSessionHeader).toContain("background: var(--workspace-session-header-surface)");
+    expect(activeSessionHeader).toContain("backdrop-filter: var(--material-backdrop-filter)");
+    expect(activeSessionCard).not.toContain("background: var(--surface-active)");
     expect(sessionTerminal).toContain("background: transparent");
-    expect(workspaceEmptyInner).toContain("var(--ws-editor-toolbar-bg)");
-    expect(workspaceEmptyInner).toContain("var(--ws-editor-shell-bg)");
-    expect(workspaceEmptyInner).toContain("backdrop-filter: var(--ws-backdrop-filter)");
-    expect(workspaceResolvingCard).toContain("var(--ws-editor-toolbar-bg)");
-    expect(workspaceResolvingCard).toContain("var(--ws-editor-shell-bg)");
-    expect(workspaceResolvingCard).toContain("backdrop-filter: var(--ws-backdrop-filter)");
-    expect(bottomTerminal).toContain("background: var(--ws-terminal-shell-bg)");
-    expect(bottomTerminal).toContain("backdrop-filter: var(--ws-backdrop-filter)");
+    expect(workspaceEmptyInner).toContain("var(--workspace-editor-toolbar-surface)");
+    expect(workspaceEmptyInner).toContain("var(--workspace-editor-shell-surface)");
+    expect(workspaceEmptyInner).toContain("backdrop-filter: var(--material-backdrop-filter)");
+    expect(workspaceResolvingCard).toContain("var(--workspace-editor-toolbar-surface)");
+    expect(workspaceResolvingCard).toContain("var(--workspace-editor-shell-surface)");
+    expect(workspaceResolvingCard).toContain("backdrop-filter: var(--material-backdrop-filter)");
+    expect(bottomTerminal).toContain("background: var(--workspace-terminal-shell-surface)");
+    expect(bottomTerminal).toContain("backdrop-filter: var(--material-backdrop-filter)");
     expect(bottomTerminal).toContain("box-shadow: none");
-    expect(bottomTerminalContent).toContain("background: transparent");
-    expect(bottomTerminalXterm).toContain("background: transparent");
-    expect(bottomTerminalEmpty).toContain("background: transparent");
+    expect(bottomTerminalContent).toContain("background: var(--workspace-content-surface)");
+    expect(bottomTerminalXterm).toContain("background: var(--workspace-content-surface)");
+    expect(bottomTerminalEmpty).toContain("background: var(--workspace-content-surface)");
     expect(xtermScreen).toContain("background: transparent");
     expect(xtermScreen).not.toContain("var(--bg-terminal)");
-    expect(terminalToolbar).toContain("background: var(--ws-terminal-toolbar-bg)");
-    expect(terminalToolbar).toContain("backdrop-filter: var(--ws-backdrop-filter)");
+    expect(terminalToolbar).toContain("background: var(--workspace-terminal-toolbar-surface)");
+    expect(terminalToolbar).toContain("backdrop-filter: var(--material-backdrop-filter)");
     expect(terminalToolbar).not.toContain("var(--bg-surface)");
-    expect(bottomTerminalTabs).toContain("background: var(--ws-terminal-tabs-bg)");
+    expect(bottomTerminalTabs).toContain("background: var(--workspace-terminal-tabs-surface)");
     expect(bottomTerminalTabs).not.toContain("var(--bg-surface)");
     expect(mobileShell).toContain("background: transparent");
-    expect(mobileTopbar).toContain("var(--surface-overlay-bg)");
-    expect(mobileTopbar).toContain("var(--app-surface-opacity, 0.96)");
-    expect(mobileTopbar).toContain("backdrop-filter: var(--app-surface-backdrop-filter, none)");
-    expect(mobileBottomStack).toContain("var(--surface-overlay-bg)");
-    expect(mobileBottomStack).toContain("var(--app-surface-opacity, 0.96)");
-    expect(mobileBottomStack).toContain(
-      "backdrop-filter: var(--app-surface-backdrop-filter, none)"
-    );
+    expect(mobileTopbar).toContain("background: var(--material-shell-topbar)");
+    expect(mobileTopbar).toContain("backdrop-filter: var(--material-backdrop-filter)");
+    expect(mobileBottomStack).toContain("background: var(--material-overlay)");
+    expect(mobileBottomStack).toContain("backdrop-filter: var(--material-backdrop-filter)");
   });
 
   it("keeps workbench backdrops and overlay cards on fallback-safe backdrop filters", () => {
@@ -1272,8 +1440,8 @@ describe("components.css theme-sensitive surfaces", () => {
     const backdrop = getLastRuleBlockFrom(workbenchStyles, ":global(.workbench-layer-backdrop)");
     const surface = getLastRuleBlockFrom(workbenchStyles, ":global(.workbench-layer)");
 
-    expect(backdrop).toContain("background: var(--overlay-backdrop)");
-    expect(backdrop).toContain("backdrop-filter: var(--app-surface-backdrop-filter, none)");
+    expect(backdrop).toContain("background: var(--surface-overlay-backdrop)");
+    expect(backdrop).toContain("backdrop-filter: var(--material-backdrop-filter)");
     expect(surface).not.toContain("backdrop-filter:");
     expect(workbenchStyles).not.toContain("backdrop-filter: blur(8px)");
   });
@@ -1301,12 +1469,15 @@ describe("components.css theme-sensitive surfaces", () => {
     const addedLine = getLastRuleBlock(".git-diff-line-added");
     const removedLine = getLastRuleBlock(".git-diff-line-removed");
 
-    expect(editorShell).toContain("background: var(--ws-editor-shell-bg)");
-    expect(editorShell).toContain("backdrop-filter: var(--ws-backdrop-filter)");
+    expect(editorShell).toContain("background: var(--workspace-editor-shell-surface)");
+    expect(editorShell).toContain("backdrop-filter: var(--material-backdrop-filter)");
     expect(editorShell).not.toContain("rgba(11, 18, 24, 0.92)");
-    expect(editorHeader).toContain("background: var(--ws-editor-toolbar-bg)");
-    expect(editorHeader).toContain("backdrop-filter: var(--ws-backdrop-filter)");
-    expect(editorHeader).not.toContain("rgba(18, 26, 34, 0.96)");
+    expect(editorHeader).toContain(
+      "border-bottom: 1px solid var(--workspace-editor-toolbar-border)"
+    );
+    expect(editorHeader).toContain("background: var(--workspace-editor-toolbar-surface)");
+    expect(editorHeader).toContain("backdrop-filter: var(--material-backdrop-filter)");
+    expect(editorHeader).not.toContain("var(--component-rgba-18-26-34-0-96)");
     expect(editorError).toContain("gap: var(--gap-tight)");
     expect(editorError).toContain("padding: var(--gap-tight) var(--inset-control-inline)");
     expect(editorError).toContain("background: var(--editor-diagnostic-error-bg)");
@@ -1316,19 +1487,21 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(codeModeToggleRules).toContain("gap: var(--gap-compact)");
     expect(codeModeToggleRules).toContain("border-radius: var(--radius-lg)");
     expect(codeModeToggleRules).toContain(
-      "background: color-mix(in srgb, var(--bg-hover) 72%, var(--bg-surface) 28%)"
+      "background: var(--component-mix-surface-hover-72pct-surface-panel-28pct)"
     );
     expect(activeCodeMode).toContain("box-shadow: inset 0 0 0 1px var(--border-focus)");
     expect(imageCanvasRules).toContain("padding: var(--sp-6)");
     expect(imageCanvasRules).toContain(
-      "background-color: color-mix(in srgb, var(--bg-terminal) 90%, var(--bg-page) 10%)"
+      "background-color: var(--component-mix-surface-input-90pct-surface-page-10pct)"
     );
     expect(imagePreview).toContain("box-shadow: var(--shadow-md)");
-    expect(imageMeta).toContain("var(--bg-surface)");
+    expect(imageMeta).toContain("var(--component-mix-surface-panel-90pct-surface-input-10pct)");
     expect(imageMeta).not.toContain("rgba(17, 24, 31, 0.92)");
-    expect(addedLine).toContain("var(--color-success)");
+    expect(addedLine).toContain("background: var(--diff-added-bg)");
+    expect(addedLine).toContain("color: var(--diff-added-fg)");
     expect(addedLine).not.toContain("#9ce7c8");
-    expect(removedLine).toContain("var(--color-error)");
+    expect(removedLine).toContain("background: var(--diff-deleted-bg)");
+    expect(removedLine).toContain("color: var(--diff-deleted-fg)");
     expect(removedLine).not.toContain("#ffb7c4");
   });
 
@@ -1363,8 +1536,8 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(xtermReplayCard).toContain("border-radius: var(--terminal-local-overlay-radius)");
     expect(sessionProgress).toContain("background: var(--state-info-bg)");
     expect(sessionHeader).toContain("padding: var(--gap-tight) var(--inset-control-inline)");
-    expect(supervisorCard).toContain("background: var(--ws-session-header-bg)");
-    expect(supervisorCard).toContain("backdrop-filter: var(--ws-backdrop-filter)");
+    expect(supervisorCard).toContain("background: var(--workspace-session-header-surface)");
+    expect(supervisorCard).toContain("backdrop-filter: var(--material-backdrop-filter)");
     expect(sessionHeaderLeft).toContain("gap: var(--gap-default)");
     expect(sessionHeaderCopyBlocks.some((block) => block.includes("gap: var(--gap-compact)"))).toBe(
       true
@@ -1379,19 +1552,28 @@ describe("components.css theme-sensitive surfaces", () => {
       sessionDotBlocks.some(
         (block) =>
           block.includes("box-shadow: 0 0 0 4px") &&
-          block.includes("var(--status-dot-current-color, var(--text-tertiary))")
+          block.includes(
+            "var(--component-mix-status-dot-current-color-var-text-tertiary-12pct-transparent)"
+          )
       )
     ).toBe(true);
     expect(runningHeader).toContain("background: var(--terminal-state-running-bg)");
     expect(runningHeader).toContain("border-bottom-color: var(--terminal-state-running-border)");
     expect(runningDot).toContain("background: var(--terminal-state-running-text)");
-    expect(runningDot).toContain("var(--terminal-state-running-border)");
+    expect(runningDot).toContain(
+      "var(--component-mix-terminal-state-running-border-32pct-transparent)"
+    );
     expect(focusPulse).toContain("z-index: var(--z-inline-raised)");
     expect(gitView).toContain("padding: var(--editor-pane-inset)");
     expect(editorHeader).toContain("padding: var(--gap-default) var(--editor-toolbar-inset)");
+    expect(editorHeader).toContain(
+      "border-bottom: 1px solid var(--workspace-editor-toolbar-border)"
+    );
     expect(editorBody).toContain("background: var(--surface-panel-bg)");
-    expect(addedLine).toContain("background: var(--diff-add-bg)");
-    expect(removedLine).toContain("background: var(--diff-delete-bg)");
+    expect(addedLine).toContain("background: var(--diff-added-bg)");
+    expect(addedLine).toContain("color: var(--diff-added-fg)");
+    expect(removedLine).toContain("background: var(--diff-deleted-bg)");
+    expect(removedLine).toContain("color: var(--diff-deleted-fg)");
     expect(diffEmpty).toContain("gap: var(--diff-section-gap)");
     expect(diffEmpty).toContain("padding: var(--diff-thread-inset)");
     expect(diffEmpty).toContain("border-radius: var(--diff-thread-radius)");
@@ -1440,6 +1622,30 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(monacoSliderHover).toContain("var(--border-focus)");
   });
 
+  it("limits component scrollbar overrides to hidden affordances or shared-token bridges", () => {
+    const mobileTerminalKeys = getLastRuleBlock(".mobile-terminal-input-bar__keys");
+    const mobileTerminalKeysScrollbar = getLastRuleBlock(
+      ".mobile-terminal-input-bar__keys::-webkit-scrollbar"
+    );
+    const tabsScroller = getLastRuleBlockFrom(
+      tabsStyles,
+      '.tabList[data-orientation="horizontal"]'
+    );
+    const tabsScrollbar = getLastRuleBlockFrom(
+      tabsStyles,
+      '.tabList[data-orientation="horizontal"]::-webkit-scrollbar'
+    );
+
+    expect(mobileTerminalKeys).toContain("scrollbar-width: none");
+    expect(mobileTerminalKeysScrollbar).toContain("display: none");
+    expect(tabsScroller).toContain("scrollbar-width: none");
+    expect(tabsScrollbar).toContain("display: none");
+
+    expect(stylesheet).not.toContain("::-webkit-scrollbar-thumb");
+    expect(stylesheet).not.toContain("::-webkit-scrollbar-track");
+    expect(stylesheet).not.toContain("scrollbar-color:");
+  });
+
   it("keeps xterm viewport touch-scrollable on mobile browsers", () => {
     const xtermViewport = getLastRuleBlock(".xterm-host .xterm-viewport");
 
@@ -1483,8 +1689,9 @@ describe("components.css theme-sensitive surfaces", () => {
 
     expect(launcher).toContain("container-type: inline-size");
     expect(content).toContain("max-width: 100%");
-    expect(content).toContain("var(--surface-overlay-bg)");
-    expect(content).toContain("backdrop-filter: var(--app-surface-backdrop-filter, none)");
+    expect(content).toContain("background: var(--agent-draft-surface)");
+    expect(content).toContain("backdrop-filter: var(--material-backdrop-filter)");
+    expect(providerCard).toContain("background: var(--agent-provider-card-surface)");
     expect(providerCard).toContain("min-width: 0");
     expect(providerBody).toContain("width: 100%");
     expect(providerBody).toContain("gap: var(--gap-tight)");
@@ -1630,7 +1837,7 @@ describe("components.css theme-sensitive surfaces", () => {
     const panelHeader =
       [...getRuleBlocksFrom(stylesheet, ".panel-header")]
         .reverse()
-        .find((block) => block.includes("border-bottom: 1px solid var(--border)")) ?? "";
+        .find((block) => block.includes("border-bottom: 1px solid var(--border-default)")) ?? "";
     const leading = getLastRuleBlock(".panel-header__leading");
     const copy = getLastRuleBlock(".panel-header__copy");
     const title = getLastRuleBlock(".panel-header__title");
@@ -1650,7 +1857,7 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(panelHeader).toContain("min-height: var(--panel-header-height)");
     expect(panelHeader).toContain("gap: var(--sp-3)");
     expect(panelHeader).toContain("padding: var(--gap-tight) var(--inset-control-inline)");
-    expect(panelHeader).toContain("border-bottom: 1px solid var(--border)");
+    expect(panelHeader).toContain("border-bottom: 1px solid var(--border-default)");
     expect(leading).toContain("flex: 1");
     expect(copy).toContain("min-width: 0");
     expect(copy).toContain("gap: var(--gap-compact)");
@@ -1728,10 +1935,10 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(formGroup).toContain("gap: var(--gap-tight)");
     expect(intro).toContain("display: flex");
     expect(intro).toContain("padding: var(--sp-3)");
-    expect(intro).toContain("border: 1px solid color-mix(in srgb, var(--border) 90%, transparent)");
     expect(intro).toContain(
-      "background: color-mix(in srgb, var(--bg-surface) 88%, var(--bg-hover))"
+      "border: 1px solid var(--component-mix-border-default-90pct-transparent)"
     );
+    expect(intro).toContain("background: var(--component-mix-surface-panel-88pct-surface-hover)");
     expect(introEditTone).toContain("var(--icon-surface-info)");
     expect(introEditTone).toContain("var(--icon-info)");
     expect(introTitle).toContain("font-size: var(--type-body-3-size)");
@@ -1792,13 +1999,13 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(enableHover).toContain("border-color: var(--state-success-border)");
     expect(enableHover).toContain("color: var(--state-success-text)");
     expect(pulse).toContain("background: var(--state-success-text)");
-    expect(pulse).toContain("var(--state-success-border)");
+    expect(pulse).toContain("var(--component-mix-state-success-border-40pct-transparent)");
     expect(evaluatingPulse).toContain("background: var(--state-info-text)");
-    expect(evaluatingPulse).toContain("var(--state-info-border)");
+    expect(evaluatingPulse).toContain("var(--component-mix-state-info-border-40pct-transparent)");
     expect(injectingPulse).toContain("background: var(--state-warning-text)");
-    expect(injectingPulse).toContain("var(--state-warning-border)");
+    expect(injectingPulse).toContain("var(--component-mix-state-warning-border-40pct-transparent)");
     expect(errorPulse).toContain("background: var(--state-error-text)");
-    expect(errorPulse).toContain("var(--state-error-border)");
+    expect(errorPulse).toContain("var(--component-mix-state-error-border-40pct-transparent)");
     expect(stateTag).toContain("padding: var(--inset-chip-block) var(--inset-chip-inline)");
     expect(stateTag).toContain("border-radius: var(--radius-control-sm)");
     expect(idleTag).toContain("background: var(--state-success-bg)");
@@ -1822,8 +2029,10 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(providerPill).toContain("background: var(--state-info-bg)");
     expect(providerPill).toContain("color: var(--state-info-text)");
     expect(progressMarker).toContain("border-radius: var(--radius-pill)");
-    expect(manualTrigger).toContain("color: var(--accent-purple)");
-    expect(manualTrigger).toContain("background: color-mix(in srgb, var(--accent-purple)");
+    expect(manualTrigger).toContain("color: var(--icon-file-data)");
+    expect(manualTrigger).toContain(
+      "background: var(--component-mix-icon-file-data-16pct-surface-panel)"
+    );
     expect(scheduledTrigger).toContain("background: var(--state-info-bg)");
     expect(scheduledTrigger).toContain("color: var(--state-info-text)");
     expect(continueTrigger).toContain("background: var(--state-success-bg)");
@@ -1898,14 +2107,14 @@ describe("components.css theme-sensitive surfaces", () => {
 
     expect(row).toContain("display: flex");
     expect(row).toContain("padding: var(--sp-1) var(--sp-2)");
-    expect(rowSelected).toContain("var(--accent-blue)");
-    expect(plainSelected).toContain("var(--accent-blue)");
-    expect(commandSelected).toContain("var(--accent-blue) 12%");
+    expect(rowSelected).toContain("var(--component-mix-status-info-fg-10pct-surface-panel)");
+    expect(plainSelected).toContain("var(--component-mix-status-info-fg-10pct-surface-panel)");
+    expect(commandSelected).toContain("var(--component-mix-status-info-fg-12pct-surface-panel)");
     expect(commandSelected).toContain("inset 2px 0 0");
     expect(sideAction).toContain("width: 40px");
     expect(sideAction).toContain("border-radius: 999px");
     expect(sideAction).toContain("background: transparent");
-    expect(sideActionDanger).toContain("var(--accent-red)");
+    expect(sideActionDanger).toContain("var(--status-danger-fg)");
     expect(stylesheet).not.toContain(".mobile-select-sheet__item-check {");
   });
 
@@ -1974,26 +2183,21 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(settingsPage).toContain("display: flex");
     expect(settingsPage).toContain("min-height: 100vh");
     expect(settingsPage).toContain("background: transparent");
-    expect(baseSettingsHeader).toContain("var(--surface-overlay-bg)");
-    expect(baseSettingsHeader).toContain("var(--app-surface-opacity, 0.96)");
-    expect(baseSettingsHeader).toContain(
-      "backdrop-filter: var(--app-surface-backdrop-filter, none)"
-    );
+    expect(baseSettingsHeader).toContain("background: var(--settings-header-surface)");
+    expect(baseSettingsHeader).toContain("backdrop-filter: var(--material-backdrop-filter)");
     expect(baseSettingsHeader).toContain("padding: var(--sp-1) var(--sp-4)");
     expect(desktopSettingsHeader).toContain("min-height: 48px");
     expect(settingsBody).toContain("align-items: stretch");
     expect(settingsBody).toContain("background: transparent");
-    expect(settingsSidebar).toContain("var(--surface-overlay-bg)");
-    expect(settingsSidebar).toContain("var(--app-surface-opacity, 0.88)");
-    expect(settingsSidebar).toContain("backdrop-filter: var(--app-surface-backdrop-filter, none)");
+    expect(settingsSidebar).toContain("background: var(--settings-sidebar-surface)");
+    expect(settingsSidebar).toContain("backdrop-filter: var(--material-backdrop-filter)");
     expect(settingsSidebar).toContain("padding: var(--sp-4)");
     expect(settingsSidebar).toContain("width: 240px");
     expect(settingsContent).toContain("display: flex");
     expect(settingsContent).toContain("align-items: flex-start");
     expect(settingsContent).toContain("justify-content: center");
     expect(settingsContent).toContain("padding: var(--sp-6)");
-    expect(settingsContent).toContain("var(--surface-page-bg)");
-    expect(settingsContent).toContain("var(--app-surface-opacity, 0.96)");
+    expect(settingsContent).toContain("background: var(--material-shell-page)");
     expect(settingsContentFillHeight).toContain("justify-content: flex-start");
     expect(settingsContentFillHeightSurface).toContain("display: flex");
     expect(settingsContentFillHeightSurface).toContain("flex-direction: column");
@@ -2005,10 +2209,14 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(settingsNavItem).toContain("align-items: center");
     expect(settingsNavItem).toContain("gap: var(--sp-3)");
     expect(settingsNavItem).toContain("display: flex");
-    expect(settingsNavItemHover).toContain("background: var(--bg-hover)");
-    expect(settingsNavItemActive).toContain("background: var(--bg-active)");
-    expect(settingsNavItemActive).toContain("border-color: color-mix");
-    expect(settingsNavItemActive).toContain("var(--accent-blue)");
+    expect(settingsNavItemHover).toContain("background: var(--surface-hover)");
+    expect(settingsNavItemActive).toContain("background: var(--surface-active)");
+    expect(settingsNavItemActive).toContain(
+      "border-color: var(--component-mix-status-info-fg-42pct-border-default-58pct)"
+    );
+    expect(settingsNavItemActive).toContain(
+      "box-shadow: inset 0 0 0 1px var(--component-mix-status-info-fg-18pct-transparent)"
+    );
     expect(getLastRuleBlock(".settings-nav-icon")).toContain("display: inline-flex");
     expect(getLastRuleBlock(".settings-nav-icon")).toContain("line-height: 0");
     expect(getLastRuleBlock(".settings-nav-label")).toContain("display: block");
@@ -2068,7 +2276,7 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(mobileSettingsHeaderLeading).toContain("gap: var(--sp-2)");
     expect(mobileSettingsHeaderBack).toContain("min-height: 32px");
     expect(mobileSettingsHeaderBack).toContain("gap: var(--sp-1)");
-    expect(mobileSettingsBody).toContain("background: var(--bg-page)");
+    expect(mobileSettingsBody).toContain("background: var(--surface-page)");
     expect(settingsFooterMeta).toContain("justify-content: space-between");
     expect(settingsFooterMeta).toContain("width: 100%");
     expect(mobilePageBack).toContain("background: transparent");
@@ -2106,7 +2314,9 @@ describe("components.css theme-sensitive surfaces", () => {
     );
     expect(launchActionRail).toContain("padding: var(--sp-2)");
     expect(launchActionRail).toContain("border-radius: var(--radius-xl)");
-    expect(launchActionRail).toContain("background: color-mix(");
+    expect(launchActionRail).toContain(
+      "background: var(--component-mix-surface-panel-96pct-surface-page)"
+    );
     expect(launchActionButton).toContain("min-height: 44px");
     expect(launchActionButton).toContain("border-radius: var(--radius-md)");
     expect(launchActionButton).toContain("font-size: var(--type-body-3-size)");
@@ -2121,7 +2331,7 @@ describe("components.css theme-sensitive surfaces", () => {
     const directoryActionFocus = getLastRuleBlock(".fp-dir-action:focus-visible");
 
     expect(directoryHover).toContain(
-      "background: color-mix(in srgb, var(--state-selected-bg) 72%, transparent)"
+      "background: var(--component-mix-state-selected-bg-72pct-transparent)"
     );
     expect(directorySelected).toContain("background: var(--state-selected-bg)");
     expect(directoryAction).toContain("padding: 0 var(--inset-chip-inline)");
@@ -2129,10 +2339,14 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(directoryAction).toContain("border: 1px solid var(--state-info-border)");
     expect(directoryAction).toContain("background: var(--state-info-bg)");
     expect(directoryAction).toContain("color: var(--state-info-text)");
-    expect(directoryActionHover).toContain("background: color-mix(in srgb, var(--state-info-bg)");
+    expect(directoryActionHover).toContain(
+      "background: var(--component-mix-state-info-bg-78pct-surface-panel-22pct)"
+    );
     expect(directoryActionHover).toContain("border-color: var(--state-info-border)");
     expect(directoryActionFocus).toContain("var(--state-focus-ring-width)");
-    expect(directoryActionFocus).toContain("var(--state-focus-ring-color)");
+    expect(directoryActionFocus).toContain(
+      "var(--component-mix-state-focus-ring-color-24pct-transparent)"
+    );
   });
 
   it("keeps mobile supervisor sheets aligned with the shared fullscreen page spacing and action sizing", () => {
@@ -2235,10 +2449,11 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(topbarIconButton).toContain("border-radius: 10px");
     expect(topbarIconButton).toContain("background: transparent");
     expect(emptyStage).toContain("padding: clamp(34px, 9vh, 72px) var(--sp-4) var(--sp-3)");
-    expect(bottomStack).toContain("var(--surface-overlay-bg)");
-    expect(bottomStack).toContain("var(--app-surface-opacity, 0.96)");
-    expect(bottomStack).toContain("border-top: 1px solid color-mix(");
-    expect(bottomStack).toContain("backdrop-filter: var(--app-surface-backdrop-filter, none)");
+    expect(bottomStack).toContain("background: var(--material-overlay)");
+    expect(bottomStack).toContain(
+      "border-top: 1px solid var(--component-mix-border-default-84pct-transparent)"
+    );
+    expect(bottomStack).toContain("backdrop-filter: var(--material-backdrop-filter)");
     expect(dockShell).toContain(
       "padding: 3px calc(var(--mobile-safe-right) + var(--sp-4)) 0 calc(var(--mobile-safe-left) + var(--sp-4))"
     );
@@ -2344,7 +2559,7 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(hasRuleBlock(".mobile-supervisor-sheet__root")).toBe(false);
     expect(hasRuleBlock(".mobile-supervisor-sheet__detail-header")).toBe(false);
     expect(mobileFilesSegmented).toContain(
-      "border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent)"
+      "border-bottom: 1px solid var(--component-mix-border-default-78pct-transparent)"
     );
     expect(mobileFilesSegmented).toContain("border-radius: 0");
     expect(mobileFilesSegmented).not.toContain("linear-gradient(");
@@ -2365,13 +2580,13 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(mobileQuickJumpItem).toContain("grid-template-columns: minmax(0, 1fr)");
     expect(mobileSearchPanel).toContain("background: transparent");
     expect(mobileFilesSurface).toContain(
-      "border: 1px solid color-mix(in srgb, var(--border) 80%, transparent)"
+      "border: 1px solid var(--component-mix-border-default-80pct-transparent)"
     );
     expect(mobileFilesSurface).toContain("border-radius: var(--radius-md)");
     expect(mobileFilesSurface).toContain("box-shadow: none");
     expect(mobileFilesSurface).not.toContain("linear-gradient(");
     expect(mobileFilesGitSurface).toContain(
-      "border: 1px solid color-mix(in srgb, var(--border) 80%, transparent)"
+      "border: 1px solid var(--component-mix-border-default-80pct-transparent)"
     );
     expect(mobileFilesGitSurface).toContain("border-radius: var(--radius-md)");
     expect(mobileFilesGitSurface).toContain("box-shadow: none");
@@ -2383,7 +2598,7 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(mobileFileRow).toContain("min-height: 40px");
     expect(mobileFileRow).toContain("border-radius: 0");
     expect(mobileFileRowSelected).toContain(
-      "border-left: 2px solid color-mix(in srgb, var(--accent-blue) 88%, white 12%)"
+      "border-left: 2px solid var(--component-mix-status-info-fg-88pct-white-12pct)"
     );
     expect(drawerItem).toContain("border-radius: var(--radius-xl)");
     expect(drawerFooterButton).toContain("border-radius: var(--radius-md)");
@@ -2449,7 +2664,7 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(settingsInfoRowBase).toContain("display: grid");
     expect(settingsInfoRowBase).toContain("grid-template-columns: minmax(0, 1fr) auto");
     expect(settingsInfoRowBase).toContain("padding: var(--sp-3) 0");
-    expect(settingsInfoRowBase).toContain("border-bottom: 1px solid var(--border)");
+    expect(settingsInfoRowBase).toContain("border-bottom: 1px solid var(--border-default)");
     expect(settingsInfoRowMobile).toContain("grid-template-columns: 1fr");
     expect(settingsInfoLabel).toContain("text-transform: uppercase");
     expect(settingsInfoLabel).toContain("letter-spacing:");
@@ -2467,21 +2682,23 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(providerTabs).toContain("margin-bottom: var(--space-default)");
     expect(providerTab).toContain("background: transparent");
     expect(providerTab).toContain("border: 1px solid transparent");
-    expect(providerTabActive).toContain("background: var(--bg-active)");
+    expect(providerTabActive).toContain("background: var(--surface-active)");
     expect(providerTabActive).toContain("border-color: var(--border-focus)");
     expect(providerSubnav).toContain("gap: var(--sp-1)");
     expect(providerSubnav).toContain("margin-bottom: var(--space-default)");
-    expect(providerSubnavButtonActive).toContain("background: var(--bg-active)");
+    expect(providerSubnavButtonActive).toContain("background: var(--surface-active)");
     expect(providerSubnavButtonActive).toContain("border-color: var(--border-focus)");
     expect(providerMobileEntryBase).toContain("padding: var(--sp-3) 0");
-    expect(providerMobileEntryBase).toContain("border-top: 1px solid var(--border)");
+    expect(providerMobileEntryBase).toContain("border-top: 1px solid var(--border-default)");
     expect(providerMobileEntryBase).toContain("border-radius: 0");
     expect(providerMobileEntryBase).toContain("background: transparent");
     expect(providerMobileEntryMobile).toContain("padding-left: var(--sp-4)");
     expect(commandPreview).toContain("border-radius: var(--radius-sm)");
-    expect(commandPreview).toContain("background: color-mix");
-    expect(settingsFooter).toContain("background: var(--bg-surface)");
-    expect(settingsFooter).toContain("border-top: 1px solid var(--border)");
+    expect(commandPreview).toContain(
+      "background: var(--component-mix-surface-input-82pct-surface-panel-18pct)"
+    );
+    expect(settingsFooter).toContain("background: var(--surface-panel)");
+    expect(settingsFooter).toContain("border-top: 1px solid var(--border-default)");
     expect(settingsFooter).toContain("min-height: 32px");
     expect(settingsFooter).toContain("padding: var(--sp-3) var(--sp-6)");
   });
@@ -2503,7 +2720,9 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(hiddenFileInput).toContain("clip-path: inset(50%)");
     expect(appearancePanel).toContain("border: 1px solid");
     expect(appearancePanel).toContain("border-radius: var(--radius-lg)");
-    expect(appearancePanel).toContain("background: color-mix");
+    expect(appearancePanel).toContain(
+      "background: var(--component-mix-surface-input-72pct-surface-panel-28pct)"
+    );
     expect(assetSummaryBase).toContain("grid-template-columns: minmax(0, 1fr) auto");
     expect(assetId).toContain("font-family: var(--font-mono)");
     expect(actionsBase).toContain("justify-content: flex-end");
@@ -2511,7 +2730,9 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(materialGridBase).toContain("grid-template-columns: repeat(2, minmax(0, 1fr))");
     expect(metricField).toContain("margin-bottom: 0");
     expect(metricField).toContain("border-radius: var(--radius-md)");
-    expect(overridePanel).toContain("background: color-mix");
+    expect(overridePanel).toContain(
+      "background: var(--component-mix-surface-panel-74pct-transparent)"
+    );
     expect(overridePanel).toContain("border: 1px solid");
     expect(assetSummaryMobile).toContain("grid-template-columns: 1fr");
     expect(actionsMobile).toContain("justify-content: flex-start");
@@ -2534,7 +2755,7 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(pillHover).toContain("background: var(--state-hover-bg-subtle)");
     expect(pillHover).toContain("border-color: var(--state-selected-border)");
     expect(pillFocus).toContain("border-color: var(--state-focus-ring-color)");
-    expect(pillFocus).toContain("box-shadow: 0 0 0 var(--state-focus-ring-width)");
+    expect(pillFocus).toContain("box-shadow: var(--control-focus-ring)");
     expect(active).toContain("background: var(--state-selected-bg)");
     expect(active).toContain("border-color: var(--state-selected-border)");
     expect(active).not.toContain("background: var(--accent-blue)");
@@ -2551,12 +2772,12 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(notice).toContain("margin: 0 0 var(--space-default)");
     expect(notice).toContain("padding: var(--inset-control-block) var(--inset-control-inline)");
     expect(notice).toContain("border-radius: var(--radius-overlay)");
-    expect(notice).toContain("background: var(--surface-elevated-bg)");
+    expect(notice).toContain("background: var(--material-elevated)");
     expect(notice).toContain("overflow: hidden");
-    expect(warning).toContain("background: var(--state-warning-bg)");
-    expect(warning).toContain("border-color: var(--state-warning-border)");
-    expect(error).toContain("background: var(--state-error-bg)");
-    expect(error).toContain("border-color: var(--state-error-border)");
+    expect(warning).toContain("background: var(--status-warning-bg)");
+    expect(warning).toContain("border-color: var(--status-warning-border)");
+    expect(error).toContain("background: var(--status-danger-bg)");
+    expect(error).toContain("border-color: var(--status-danger-border)");
     expect(title).toContain("text-transform: uppercase");
     expect(title).toContain("font-size: var(--type-body-6-size)");
     expect(message).toContain("font-size: var(--type-body-5-size)");
@@ -2602,19 +2823,19 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(providerTabs).toContain("padding: 0");
     expect(providerTab).toContain("background: transparent");
     expect(providerTab).toContain("border-color: transparent");
-    expect(providerTabActive).toContain("background: var(--bg-active)");
+    expect(providerTabActive).toContain("background: var(--surface-active)");
     expect(providerTabActive).toContain("border-color: var(--border-focus)");
     expect(providerTabActive).not.toContain("var(--accent-blue)");
     expect(providerSubnav).toContain("background: transparent");
-    expect(providerSubnav).toContain("border-bottom: 1px solid var(--border)");
-    expect(providerSubnavActive).toContain("background: var(--bg-active)");
+    expect(providerSubnav).toContain("border-bottom: 1px solid var(--border-default)");
+    expect(providerSubnavActive).toContain("background: var(--surface-active)");
     expect(providerSubnavActive).toContain("border-color: var(--border-focus)");
     expect(shortcutsTabs).toContain("background: transparent");
     expect(shortcutsTabs).toContain("border: none");
     expect(shortcutsTabs).toContain("padding: 0");
     expect(shortcutsTab).toContain("background: transparent");
     expect(shortcutsTab).toContain("border-color: transparent");
-    expect(shortcutsTabActive).toContain("background: var(--bg-active)");
+    expect(shortcutsTabActive).toContain("background: var(--surface-active)");
     expect(shortcutsTabActive).toContain("border-color: var(--border-focus)");
     expect(shortcutsTabActive).not.toContain(
       "color-mix(in srgb, var(--accent-blue) 18%, var(--bg-surface))"
@@ -2629,13 +2850,13 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(keycap).toContain("display: inline-flex");
     expect(keycap).toContain("align-items: center");
     expect(keycap).toContain("justify-content: center");
-    expect(keycap).toContain("background: color-mix");
+    expect(keycap).toContain("background: var(--kbd-surface)");
     expect(keycap).toContain("color: var(--text-primary)");
     expect(keycap).toContain("border-radius: var(--radius-control-sm)");
-    expect(hover).toContain("border-color: var(--border-focus)");
-    expect(hover).toContain("background: var(--bg-active)");
-    expect(focus).toContain("border-color: var(--state-focus-ring-color)");
-    expect(focus).toContain("box-shadow: 0 0 0 var(--state-focus-ring-width)");
+    expect(hover).toContain("border-color: var(--border-subtle)");
+    expect(hover).toContain("background: var(--surface-active)");
+    expect(focus).toContain("border-color: var(--border-focus)");
+    expect(focus).toContain("box-shadow: var(--field-ring)");
   });
 
   it("keeps shortcut settings rows aligned with editor-pane list treatment instead of standalone cards", () => {
@@ -2657,24 +2878,26 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(categoryTabsMobile).toContain("padding: 0 var(--sp-4)");
     expect(categoryTab).toContain("background: transparent");
     expect(categoryTab).toContain("border: 1px solid transparent");
-    expect(categoryTabActive).toContain("background: var(--bg-active)");
+    expect(categoryTabActive).toContain("background: var(--surface-active)");
     expect(categoryTabActive).toContain("border-color: var(--border-focus)");
-    expect(categoryTabActive).not.toContain("rgba(108, 182, 255, 0.2)");
+    expect(categoryTabActive).not.toContain("var(--component-rgba-108-182-255-0-2)");
     expect(listBase).toContain("gap: 0");
-    expect(listBase).toContain("border-top: 1px solid var(--border)");
+    expect(listBase).toContain("border-top: 1px solid var(--border-default)");
     expect(listMobile).toContain("margin: 0");
     expect(itemBase).toContain("padding: var(--sp-3) var(--sp-4)");
     expect(itemBase).toContain("background: transparent");
     expect(itemBase).toContain("border: none");
-    expect(itemBase).toContain("border-bottom: 1px solid var(--border)");
+    expect(itemBase).toContain("border-bottom: 1px solid var(--border-default)");
     expect(itemBase).toContain("border-radius: 0");
     expect(itemMobile).toContain("flex-direction: column");
     expect(itemMobile).toContain("align-items: flex-start");
-    expect(customItem).toContain("background: color-mix");
+    expect(customItem).toContain(
+      "background: var(--component-mix-surface-active-78pct-status-warning-fg-22pct)"
+    );
     expect(customItem).not.toContain("rgba(241, 184, 106, 0.05)");
     expect(footerBase).toContain("display: flex");
     expect(footerBase).toContain("padding: var(--sp-3) var(--sp-4) 0");
-    expect(footerBase).toContain("border-top: 1px solid var(--border)");
+    expect(footerBase).toContain("border-top: 1px solid var(--border-default)");
     expect(footerMobile).toContain("padding-left: var(--sp-4)");
     expect(footerMobile).toContain("padding-right: var(--sp-4)");
   });
@@ -2723,14 +2946,16 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(configCardBodyFillHeightMonaco).toContain("flex: 1");
     expect(configCardBodyFillHeightMonaco).toContain("min-height: 0");
     expect(configCardBodyFillHeightActions).toContain("flex: 0 0 auto");
-    expect(configCardActionsBase).toContain("border-top: 1px solid var(--border)");
+    expect(configCardActionsBase).toContain("border-top: 1px solid var(--border-default)");
     expect(configCardActionsBase).toContain("background: transparent");
     expect(configEmptyStateBase).toContain("align-items: flex-start");
     expect(configEmptyStateBase).toContain("text-align: left");
     expect(configEmptyIcon).toContain("font-size: var(--text-sm)");
     expect(configEmptyIcon).not.toContain("48px");
-    expect(configErrorBase).toContain("background: color-mix");
-    expect(configErrorBase).toContain("border-top: 1px solid var(--border)");
+    expect(configErrorBase).toContain(
+      "background: var(--component-mix-status-danger-fg-10pct-surface-panel)"
+    );
+    expect(configErrorBase).toContain("border-top: 1px solid var(--border-default)");
   });
 
   it("keeps provider base controls aligned with inspector-style config rows on desktop and mobile", () => {
@@ -2753,15 +2978,17 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(configLabel).toContain("text-transform: uppercase");
     expect(configLabel).toContain("letter-spacing:");
     expect(configLabel).toContain("margin-bottom: 0");
-    expect(argsInput).toContain("background: color-mix");
-    expect(argsInput).toContain("border-color: var(--border)");
+    expect(argsInput).toContain(
+      "background: var(--component-mix-surface-input-82pct-surface-panel-18pct)"
+    );
+    expect(argsInput).toContain("border-color: var(--border-default)");
     expect(argsInput).toContain("font-family: var(--font-mono)");
     expect(commandPreview).toContain("min-height:");
     expect(commandPreview).toContain("white-space: pre-wrap");
     expect(commandPreview).toContain("border-radius: var(--radius-sm)");
     expect(commandPreview).not.toContain("word-break: break-all");
     expect(providerMobileEntryBase).toContain("border: none");
-    expect(providerMobileEntryBase).toContain("border-top: 1px solid var(--border)");
+    expect(providerMobileEntryBase).toContain("border-top: 1px solid var(--border-default)");
     expect(providerMobileEntryBase).toContain("border-radius: 0");
     expect(providerMobileEntryBase).toContain("padding: var(--sp-3) 0");
     expect(providerMobileEntryMobile).toContain("padding-left: var(--sp-4)");
@@ -2799,7 +3026,7 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(search).toContain("padding-inline: var(--inset-control-inline)");
     expect(search).toContain("min-height: var(--control-height-md)");
     expect(search).toContain("border-radius: var(--radius-panel)");
-    expect(search).toContain("background: color-mix(");
+    expect(search).toContain("background: var(--component-mix-surface-panel-90pct-surface-page)");
     expect(searchInput).toContain("font-size: var(--type-body-3-size)");
     expect(searchInput).toContain("line-height: var(--type-body-3-line-height)");
     expect(searchInput).toContain("font-weight: var(--type-body-3-weight)");
@@ -2860,8 +3087,12 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(openEditorsCloseAll).toContain("background: transparent");
     expect(openEditorsCloseAll).toContain("color: var(--text-secondary)");
     expect(openEditorsRow).toContain("grid-template-columns: minmax(0, 1fr) auto");
-    expect(searchControls).toContain("border-bottom: 1px solid color-mix(");
-    expect(searchControls).toContain("background: color-mix(");
+    expect(searchControls).toContain(
+      "border-bottom: 1px solid var(--component-mix-border-default-82pct-transparent)"
+    );
+    expect(searchControls).toContain(
+      "background: var(--component-mix-surface-panel-82pct-transparent)"
+    );
     expect(searchInput).toContain("min-height: 34px");
     expect(searchInput).toContain("border-radius: 4px");
     expect(searchInput).toContain("box-shadow: none");
@@ -2871,7 +3102,9 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(openEditorsItemLabel).toContain("text-overflow: ellipsis");
     expect(openEditorsItemLabel).toContain("white-space: nowrap");
     expect(searchGroupHeader).toContain("grid-template-columns: 14px minmax(0, 1fr) auto");
-    expect(searchGroupHeader).toContain("box-shadow: inset 0 -1px 0 color-mix(");
+    expect(searchGroupHeader).toContain(
+      "box-shadow: inset 0 -1px 0 var(--component-mix-border-default-96pct-transparent)"
+    );
     expect(searchGroupPath).toContain("font-family: var(--font-mono)");
     expect(searchGroupPath).toContain("font-size: var(--type-body-6-size)");
     expect(searchMatch).toContain("grid-template-columns: 40px minmax(0, 1fr)");
@@ -2880,21 +3113,27 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(quickOpen).toContain("border: 1px solid var(--surface-overlay-border)");
     expect(quickOpen).toContain("border-radius: var(--radius-overlay)");
     expect(quickOpen).toContain("background: var(--surface-overlay-bg)");
-    expect(quickOpenSearch).toContain("border-bottom: 1px solid color-mix(");
-    expect(quickOpenSearch).toContain("background: color-mix(");
+    expect(quickOpenSearch).toContain(
+      "border-bottom: 1px solid var(--component-mix-border-default-82pct-transparent)"
+    );
+    expect(quickOpenSearch).toContain(
+      "background: var(--component-mix-surface-panel-66pct-transparent)"
+    );
     expect(quickOpenItem).toContain("gap: var(--gap-compact)");
-    expect(quickOpenItem).toContain("box-shadow: inset 0 -1px 0 color-mix(");
+    expect(quickOpenItem).toContain(
+      "box-shadow: inset 0 -1px 0 var(--component-mix-border-default-96pct-transparent)"
+    );
     expect(quickOpenItemActive).toContain(
-      "background: color-mix(in srgb, var(--accent-blue) 12%, var(--bg-panel))"
+      "background: var(--component-mix-status-info-fg-12pct-surface-panel)"
     );
     expect(quickOpenItemSelected).toContain(
-      "background: color-mix(in srgb, var(--accent-blue) 12%, var(--bg-panel))"
+      "background: var(--component-mix-status-info-fg-12pct-surface-panel)"
     );
     expect(quickOpenPrimary).toContain("font-size: var(--type-body-3-size)");
     expect(quickOpenSecondary).toContain("font-size: var(--type-body-5-size)");
     expect(quickOpenSecondary).toContain("color: var(--text-secondary)");
     expect(quickOpenSelectedSecondary).toContain(
-      "color: color-mix(in srgb, var(--accent-blue) 52%, var(--text-secondary))"
+      "color: var(--component-mix-status-info-fg-52pct-text-secondary)"
     );
   });
 
@@ -3030,8 +3269,12 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(runningHeader).toContain("background:");
     expect(runningHeader).not.toContain("animation:");
     expect(runningDot).toContain("box-shadow:");
-    expect(runningBadge).toContain("border: 1px solid color-mix(");
-    expect(runningBadge).toContain("background: color-mix(in srgb, currentColor");
+    expect(runningBadge).toContain(
+      "border: 1px solid var(--component-mix-current-color-22pct-transparent)"
+    );
+    expect(runningBadge).toContain(
+      "background: var(--component-mix-current-color-12pct-transparent)"
+    );
     expect(runningBadge).not.toContain("animation:");
     expect(darkRunningBadge).toContain("box-shadow:");
     expect(lightRunningBadge).toContain("box-shadow:");
@@ -3132,8 +3375,10 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(tabKey).toContain("min-width: 28px");
     expect(enterKey).toContain("min-width: 34px");
     expect(upArrowKey).toContain("min-width: 20px");
-    expect(ctrlLocked).toContain("var(--accent-blue)");
-    expect(shiftArmed).toContain("var(--accent-blue)");
+    expect(ctrlLocked).toContain("var(--component-mix-status-info-fg-42pct-border-default)");
+    expect(ctrlLocked).toContain("var(--component-mix-status-info-fg-12pct-surface-panel)");
+    expect(shiftArmed).toContain("var(--component-mix-status-info-fg-28pct-border-default)");
+    expect(shiftArmed).toContain("var(--component-mix-status-info-fg-8pct-surface-panel)");
   });
 
   it("keeps the mobile fullscreen terminal chrome on a single compact tool surface", () => {
diff --git a/packages/web/src/styles/foundations.guard.test.ts b/packages/web/src/styles/foundations.guard.test.ts
index b6fa0567..7a0e562d 100644
--- a/packages/web/src/styles/foundations.guard.test.ts
+++ b/packages/web/src/styles/foundations.guard.test.ts
@@ -18,6 +18,7 @@ const sharedUiSources = [
   "src/components/ui/tag/index.module.css",
   "src/components/ui/badge/index.module.css",
   "src/components/ui/pill/index.module.css",
+  "src/components/ui/select/index.module.css",
   "src/components/ui/tooltip/index.module.css",
   "src/components/ui/notice/index.module.css",
   "src/components/ui/modal/index.module.css",
@@ -27,6 +28,9 @@ const sharedUiSources = [
   "src/components/ui/progress-bar/index.module.css",
   "src/components/ui/status-dot/index.module.css",
   "src/components/ui/empty-state/index.module.css",
+  "src/components/ui/confirm-dialog/index.module.css",
+  "src/components/ui/datetime-picker/index.module.css",
+  "src/components/ui/spinner/index.module.css",
 ].map((file) => [file, readFileSync(`${process.cwd()}/${file}`, "utf8")] as const);
 
 const rawFoundationPattern =
diff --git a/packages/web/src/styles/pane-layout-divider.theme.test.ts b/packages/web/src/styles/pane-layout-divider.theme.test.ts
new file mode 100644
index 00000000..86810e77
--- /dev/null
+++ b/packages/web/src/styles/pane-layout-divider.theme.test.ts
@@ -0,0 +1,44 @@
+// @vitest-environment node
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const stylesheet = readFileSync(`${process.cwd()}/src/styles/components.css`, "utf8");
+
+function getRuleBlocks(selector: string) {
+  const blocks: string[] = [];
+  const matcher = /([^{}]+)\{([^}]*)\}/g;
+  const normalizedSelector = selector.replace(/\s+/g, " ").trim();
+  let match: RegExpExecArray | null = null;
+
+  while ((match = matcher.exec(stylesheet)) !== null) {
+    const selectors = match[1]
+      .replace(/\/\*[\s\S]*?\*\//g, "")
+      .split(",")
+      .map((entry) => entry.replace(/\s+/g, " ").trim());
+
+    if (selectors.includes(normalizedSelector)) {
+      blocks.push(match[2]);
+    }
+  }
+
+  if (blocks.length === 0) {
+    throw new Error(`expected CSS rule for ${selector}`);
+  }
+
+  return blocks;
+}
+
+describe("pane-layout vertical divider styles", () => {
+  it("keeps stacked pane dividers visible on shared workspace surfaces", () => {
+    const divider = getRuleBlocks(".pane-layout-vertical-divider").join("\n");
+    const dividerLine = getRuleBlocks(".pane-layout-vertical-divider::after").join("\n");
+
+    expect(divider).toContain("width: 100%");
+    expect(divider).toContain("height: 10px");
+    expect(divider).toContain("margin-top: -5px");
+    expect(divider).toContain("margin-bottom: -5px");
+    expect(divider).toContain("background: linear-gradient(");
+    expect(divider).toContain("var(--component-mix-status-info-fg-24pct-transparent)");
+    expect(dividerLine).toContain("var(--component-mix-border-default-78pct-status-info-fg-22pct)");
+  });
+});
diff --git a/packages/web/src/styles/tokens-touch.test.ts b/packages/web/src/styles/tokens-touch.test.ts
index 4c88a99a..78eada1b 100644
--- a/packages/web/src/styles/tokens-touch.test.ts
+++ b/packages/web/src/styles/tokens-touch.test.ts
@@ -4,7 +4,7 @@ import { describe, expect, it } from "vitest";
 
 const stylesheet = readFileSync(`${process.cwd()}/src/styles/tokens.css`, "utf8");
 
-function getRuleBlock(selector: string): string {
+function getRuleBlocks(selector: string): string[] {
   const blocks: string[] = [];
   const matcher = /([^{}]+)\{([^}]*)\}/g;
   let match: RegExpExecArray | null = null;
@@ -25,6 +25,12 @@ function getRuleBlock(selector: string): string {
     }
   }
 
+  return blocks;
+}
+
+function getRuleBlock(selector: string): string {
+  const blocks = getRuleBlocks(selector);
+
   return blocks.join("\n");
 }
 
@@ -40,6 +46,10 @@ function getCustomProperty(block: string, name: string): string | null {
   return value;
 }
 
+function getDeclaredCustomProperties(block: string): string[] {
+  return [...block.matchAll(/^\s*(--[a-z0-9-]+)\s*:/gm)].map((match) => match[1]);
+}
+
 describe("tokens.css touch tokens", () => {
   const builtInThemes = [
     "mint-dark",
@@ -67,6 +77,128 @@ describe("tokens.css touch tokens", () => {
     "--icon-surface-error",
   ] as const;
 
+  const domainLayerTokens = [
+    "--git-status-added-fg",
+    "--git-status-added-bg",
+    "--git-status-added-border",
+    "--git-status-modified-fg",
+    "--git-status-modified-bg",
+    "--git-status-modified-border",
+    "--git-status-deleted-fg",
+    "--git-status-deleted-bg",
+    "--git-status-deleted-border",
+    "--git-status-untracked-fg",
+    "--git-status-untracked-bg",
+    "--git-status-untracked-border",
+    "--git-status-renamed-fg",
+    "--git-status-renamed-bg",
+    "--git-status-renamed-border",
+    "--diff-added-bg",
+    "--diff-added-border",
+    "--diff-modified-bg",
+    "--diff-modified-border",
+    "--diff-deleted-bg",
+    "--diff-deleted-border",
+    "--control-primary-bg",
+    "--control-primary-bg-hover",
+    "--control-primary-fg",
+    "--control-secondary-bg",
+    "--control-secondary-bg-hover",
+    "--control-secondary-border",
+    "--control-secondary-border-hover",
+    "--control-ghost-bg-hover",
+    "--control-ghost-fg",
+    "--control-danger-bg",
+    "--control-danger-fg",
+    "--control-spinner-track",
+    "--field-bg",
+    "--field-border",
+    "--field-border-hover",
+    "--field-ring",
+    "--field-invalid-ring",
+    "--kbd-surface",
+    "--menu-danger-hover-bg",
+    "--tag-info-bg",
+    "--tag-info-fg",
+    "--tag-success-bg",
+    "--tag-success-fg",
+    "--tag-warning-bg",
+    "--tag-warning-fg",
+    "--tag-danger-bg",
+    "--tag-danger-fg",
+    "--tag-accent-bg",
+    "--tag-accent-fg",
+    "--status-dot-idle",
+    "--status-dot-starting",
+    "--status-dot-running",
+    "--status-dot-complete",
+    "--status-dot-error",
+    "--status-dot-running-ring-1",
+    "--status-dot-running-ring-2",
+    "--status-dot-running-ring-3",
+  ] as const;
+
+  const forbiddenLegacyWorkspaceAliases = [
+    "--ws-sidebar-bg",
+    "--ws-activitybar-bg",
+    "--ws-statusbar-bg",
+    "--ws-session-bg",
+    "--ws-session-active-bg",
+    "--ws-session-header-bg",
+    "--ws-terminal-shell-bg",
+    "--ws-terminal-toolbar-bg",
+    "--ws-terminal-tabs-bg",
+    "--ws-editor-shell-bg",
+    "--ws-editor-toolbar-bg",
+  ] as const;
+
+  const forbiddenLegacyPublicAliases = [
+    "--bg-page",
+    "--bg-panel",
+    "--bg-elevated",
+    "--bg-surface",
+    "--bg-sidebar",
+    "--bg-terminal",
+    "--bg-hover",
+    "--bg-active",
+    "--bg-disabled",
+    "--bg-input",
+    "--accent-blue",
+    "--accent-green",
+    "--accent-amber",
+    "--accent-red",
+    "--accent-pink",
+    "--color-success",
+    "--color-warning",
+    "--color-error",
+    "--color-info",
+    "--border",
+    "--border-light",
+    "--border-error",
+    ...forbiddenLegacyWorkspaceAliases,
+    "--blue",
+    "--green",
+    "--amber",
+    "--pink",
+    "--bg",
+  ] as const;
+
+  const allowedThemeSpecificOverridePatterns = [
+    /^--ref-[a-z0-9-]+$/,
+    /^--surface-(?:panel|elevated|inverse|overlay-bg|overlay-backdrop)$/,
+    /^--status-(?:success|warning|danger|info)-(?:bg|border)$/,
+    /^--state-focus-ring-color$/,
+    /^--state-selected-(?:bg|border)$/,
+    /^--overlay-(?:backdrop|scrim|local-backdrop)$/,
+    /^--icon-(?:primary|secondary|muted|accent|success|warning|error|info)$/,
+    /^--icon-file-(?:folder|code|data|doc|media|default)$/,
+    /^--icon-git-(?:staged|modified|deleted|untracked)$/,
+    /^--icon-surface-(?:subtle|accent|success|warning|error|info)$/,
+    /^--shadow-(?:sm|md|lg|xl|glow)$/,
+    /^--scrollbar-thumb$/,
+    /^--accent-purple$/,
+  ] as const;
+
   it("defines named theme blocks for all built-in themes", () => {
     expect(stylesheet).toContain(':root,\n[data-theme="mint-dark"]');
     expect(stylesheet).toContain('[data-theme="mint-light"]');
@@ -88,6 +220,101 @@ describe("tokens.css touch tokens", () => {
     expect(root).toContain("--touch-hit-slop: 0px");
   });
 
+  it("defines the semantic color system layers on :root", () => {
+    const root = getRuleBlock(":root");
+
+    expect(root).toContain("--ref-fg-0:");
+    expect(root).toContain("--ref-bg-0:");
+    expect(root).toContain("--ref-border-0:");
+    expect(root).toContain("--ref-status-success:");
+    expect(root).toContain("--text-primary: var(--ref-fg-0)");
+    expect(root).toContain("--surface-page: var(--ref-bg-0)");
+    expect(root).toContain("--border-default: var(--ref-border-0)");
+    expect(root).toContain("--status-success-fg: var(--ref-status-success)");
+    expect(root).toContain("--material-panel:");
+    expect(root).toContain("--material-overlay:");
+    expect(root).toContain("--material-backdrop-filter:");
+    expect(root).toContain("--workspace-sidebar-surface:");
+    expect(root).toContain("--workspace-editor-toolbar-surface:");
+    expect(root).toContain("--git-status-added-bg:");
+    expect(root).toContain("--diff-added-bg:");
+    expect(root).toContain("--icon-primary:");
+    expect(root).toContain("--control-primary-bg:");
+    expect(root).toContain("--field-ring:");
+    expect(root).toContain("--tag-info-bg:");
+    expect(root).toContain("--status-dot-running-ring-2:");
+
+    for (const token of domainLayerTokens) {
+      expect(getCustomProperty(root, token), `:root should define ${token}`).not.toBeNull();
+    }
+  });
+
+  it("maps diff modified tokens to the planned info status palette", () => {
+    const root = getRuleBlock(":root");
+
+    expect(root).toContain("--diff-modified-bg: var(--status-info-bg)");
+    expect(root).toContain("--diff-modified-border: var(--status-info-border)");
+  });
+
+  it("forbids the legacy public color aliases on :root", () => {
+    const root = getRuleBlock(":root");
+
+    for (const token of forbiddenLegacyPublicAliases) {
+      expect(getCustomProperty(root, token), `:root should not publish ${token}`).toBeNull();
+    }
+  });
+
+  it("keeps root semantic compatibility tokens on direct semantic references", () => {
+    const root = getRuleBlock(":root");
+
+    expect(root).toContain("--text-muted: var(--text-tertiary)");
+    expect(root).toContain("--surface-page-bg: var(--surface-page)");
+    expect(root).toContain("--surface-panel-bg: var(--surface-panel)");
+    expect(root).toContain("--surface-elevated-bg: var(--surface-elevated)");
+    expect(root).toContain("--ws-backdrop-filter: var(--material-backdrop-filter)");
+    expect(root).toContain("--ws-content-bg: var(--workspace-content-surface)");
+    expect(root).toContain("--diff-removed-bg: var(--status-danger-bg)");
+    expect(root).toContain("--diff-removed-border: var(--status-danger-border)");
+  });
+
+  it("derives the shared native scrollbar palette from semantic surface tokens", () => {
+    const root = getRuleBlock(":root");
+
+    expect(getCustomProperty(root, "--scrollbar-width")).toBe("8px");
+    expect(getCustomProperty(root, "--scrollbar-track")).toBe(
+      "color-mix(in srgb, var(--surface-panel) 86%, var(--border-default) 14%)"
+    );
+    expect(getCustomProperty(root, "--scrollbar-thumb")).toBe(
+      "color-mix(in srgb, var(--border-default) 74%, var(--status-info-fg) 26%)"
+    );
+  });
+
+  it("limits explicit scrollbar thumb overrides to the high-contrast themes", () => {
+    const inheritedThemes = [
+      "mint-light",
+      "graphite-dark",
+      "graphite-light",
+      "nord-dark",
+      "nord-light",
+    ] as const;
+
+    for (const theme of inheritedThemes) {
+      const themeSpecificBlock = getRuleBlocks(`[data-theme="${theme}"]`).at(-1) ?? "";
+
+      expect(
+        getCustomProperty(themeSpecificBlock, "--scrollbar-thumb"),
+        `${theme} should inherit the shared scrollbar thumb palette`
+      ).toBeNull();
+    }
+
+    expect(
+      getCustomProperty(getRuleBlocks('[data-theme="hc-dark"]').at(-1) ?? "", "--scrollbar-thumb")
+    ).toBe("#ffffff");
+    expect(
+      getCustomProperty(getRuleBlocks('[data-theme="hc-light"]').at(-1) ?? "", "--scrollbar-thumb")
+    ).toBe("#5c5c5c");
+  });
+
   it("defines the shared foundation tokens on :root without changing code font-size plumbing", () => {
     const root = getRuleBlock(":root");
 
@@ -105,14 +332,24 @@ describe("tokens.css touch tokens", () => {
 
     expect(root).toContain("--state-focus-ring-color: var(--border-focus)");
     expect(root).toContain("--state-focus-ring-width: 2px");
-    expect(root).toContain("--state-hover-bg-subtle: var(--bg-hover)");
-    expect(root).toContain("--state-hover-bg-strong: var(--bg-active)");
-    expect(root).toContain("--state-selected-bg:");
+    expect(root).toContain("--state-hover-bg-subtle: var(--surface-hover)");
+    expect(root).toContain("--state-hover-bg-strong: var(--surface-active)");
+    expect(root).toContain(
+      "--state-selected-bg: color-mix(in srgb, var(--status-info-fg) 12%, var(--surface-panel))"
+    );
     expect(root).toContain("--state-disabled-bg:");
-    expect(root).toContain("--state-success-bg:");
-    expect(root).toContain("--state-warning-bg:");
-    expect(root).toContain("--state-error-bg:");
-    expect(root).toContain("--state-info-bg:");
+    expect(root).toContain(
+      "--state-success-bg: color-mix(in srgb, var(--status-success-fg) 14%, transparent)"
+    );
+    expect(root).toContain(
+      "--state-warning-bg: color-mix(in srgb, var(--status-warning-fg) 14%, transparent)"
+    );
+    expect(root).toContain(
+      "--state-error-bg: color-mix(in srgb, var(--status-danger-fg) 14%, transparent)"
+    );
+    expect(root).toContain(
+      "--state-info-bg: color-mix(in srgb, var(--status-info-fg) 14%, transparent)"
+    );
 
     expect(root).toContain("--gap-hairline:");
     expect(root).toContain("--gap-micro:");
@@ -214,33 +451,55 @@ describe("tokens.css touch tokens", () => {
   it("defines workspace material tokens for solid and glass workspace surfaces", () => {
     const root = getRuleBlock(":root");
 
+    expect(root).toContain("--material-backdrop-filter: none");
+    expect(root).toContain("--material-panel: var(--surface-panel)");
+    expect(root).toContain("--material-elevated: var(--surface-elevated)");
+    expect(root).toContain("--material-overlay:");
+    expect(root).toContain("--material-local-overlay:");
+    expect(root).toContain("--workspace-sidebar-surface: var(--surface-panel)");
+    expect(root).toContain("--workspace-terminal-shell-surface: var(--surface-panel)");
+    expect(root).toContain("--workspace-editor-toolbar-surface: var(--surface-elevated)");
+
     expect(root).toContain("--ws-backdrop-filter: none");
     expect(root).toContain("--ws-content-bg: transparent");
-    expect(root).toContain("--ws-sidebar-bg: var(--surface-panel-bg)");
-    expect(root).toContain("--ws-terminal-shell-bg: var(--surface-panel-bg)");
-    expect(root).toContain("--ws-editor-toolbar-bg: var(--surface-elevated-bg)");
     expect(root).toContain("--ws-level-0: transparent");
     expect(root).toContain("--ws-level-1: color-mix(");
     expect(root).toContain("--ws-level-4: color-mix(");
+
+    for (const token of forbiddenLegacyWorkspaceAliases) {
+      expect(getCustomProperty(root, token), `:root should not publish ${token}`).toBeNull();
+    }
   });
 
-  it("overrides workspace material tokens for glass and high-contrast runtime states", () => {
+  it("keeps the glass/high-contrast material outputs in the token layer", () => {
     const glassRoot = getRuleBlock(':root[data-appearance-glass="on"]');
     const highContrastDark = getRuleBlock(':root[data-theme="hc-dark"]');
-    const highContrastLight = getRuleBlock(':root[data-theme="hc-light"]');
-
-    expect(glassRoot).toContain("--ws-backdrop-filter: var(--app-surface-backdrop-filter, none)");
-    expect(glassRoot).toContain("--ws-sidebar-bg: var(--ws-level-3)");
-    expect(glassRoot).toContain("--ws-terminal-shell-bg: var(--ws-level-3)");
-    expect(glassRoot).toContain("--ws-editor-shell-bg: var(--ws-level-2)");
-
-    expect(highContrastDark).toContain("--ws-backdrop-filter: none");
-    expect(highContrastDark).toContain("--ws-sidebar-bg: var(--surface-panel-bg)");
-    expect(highContrastDark).toContain("--ws-editor-toolbar-bg: var(--surface-elevated-bg)");
+    expect(glassRoot).toContain(
+      "--material-backdrop-filter: var(--app-surface-backdrop-filter, none)"
+    );
+    expect(glassRoot).toContain("--material-panel: color-mix(");
+    expect(glassRoot).toContain("--workspace-sidebar-surface: var(--material-elevated)");
+    expect(glassRoot).toContain("--workspace-terminal-shell-surface: var(--material-elevated)");
+
+    for (const token of forbiddenLegacyWorkspaceAliases) {
+      expect(
+        getCustomProperty(glassRoot, token),
+        `glass root should not publish ${token}`
+      ).toBeNull();
+    }
 
-    expect(highContrastLight).toContain("--ws-backdrop-filter: none");
-    expect(highContrastLight).toContain("--ws-sidebar-bg: var(--surface-panel-bg)");
-    expect(highContrastLight).toContain("--ws-editor-toolbar-bg: var(--surface-elevated-bg)");
+    expect(highContrastDark).toContain("--material-backdrop-filter: none");
+    expect(highContrastDark).toContain("--material-panel: var(--surface-panel)");
+    expect(highContrastDark).toContain("--material-shell-page: var(--surface-page)");
+    expect(highContrastDark).toContain("--material-shell-topbar: var(--surface-elevated)");
+    expect(highContrastDark).toContain("--workspace-sidebar-surface: var(--surface-panel)");
+
+    for (const token of forbiddenLegacyWorkspaceAliases) {
+      expect(
+        getCustomProperty(highContrastDark, token),
+        `hc dark should not publish ${token}`
+      ).toBeNull();
+    }
   });
 
   it("overrides touch tokens on narrow viewport only", () => {
@@ -370,17 +629,17 @@ describe("tokens.css touch tokens", () => {
     const graphiteLight = getRuleBlock('[data-theme="graphite-light"]');
     const nordLight = getRuleBlock('[data-theme="nord-light"]');
 
-    expect(getCustomProperty(mintLight, "--bg-page")).toBe("#f3fbf7");
-    expect(getCustomProperty(mintLight, "--bg-sidebar")).toBe("#edf7f2");
-    expect(getCustomProperty(mintLight, "--border-focus")).toBe("#158f77");
+    expect(getCustomProperty(mintLight, "--ref-bg-0")).toBe("#f3fbf7");
+    expect(getCustomProperty(mintLight, "--ref-bg-2")).toBe("#edf7f2");
+    expect(getCustomProperty(mintLight, "--ref-border-focus")).toBe("#158f77");
 
-    expect(getCustomProperty(graphiteLight, "--bg-page")).toBe("#e7edf3");
-    expect(getCustomProperty(graphiteLight, "--bg-sidebar")).toBe("#dfe6ee");
-    expect(getCustomProperty(graphiteLight, "--border-focus")).toBe("#315fdd");
+    expect(getCustomProperty(graphiteLight, "--ref-bg-0")).toBe("#e7edf3");
+    expect(getCustomProperty(graphiteLight, "--ref-bg-2")).toBe("#dfe6ee");
+    expect(getCustomProperty(graphiteLight, "--ref-border-focus")).toBe("#315fdd");
 
-    expect(getCustomProperty(nordLight, "--bg-page")).toBe("#e3ebf4");
-    expect(getCustomProperty(nordLight, "--bg-sidebar")).toBe("#dbe4ef");
-    expect(getCustomProperty(nordLight, "--border-focus")).toBe("#5b7fa8");
+    expect(getCustomProperty(nordLight, "--ref-bg-0")).toBe("#e3ebf4");
+    expect(getCustomProperty(nordLight, "--ref-bg-2")).toBe("#dbe4ef");
+    expect(getCustomProperty(nordLight, "--ref-border-focus")).toBe("#5b7fa8");
   });
 
   it("separates the light theme interaction palette across families", () => {
@@ -388,18 +647,18 @@ describe("tokens.css touch tokens", () => {
     const graphiteLight = getRuleBlock('[data-theme="graphite-light"]');
     const nordLight = getRuleBlock('[data-theme="nord-light"]');
 
-    expect(getCustomProperty(mintLight, "--text-secondary")).toBe("#557067");
-    expect(getCustomProperty(mintLight, "--accent-blue")).toBe("#148a7a");
+    expect(getCustomProperty(mintLight, "--ref-fg-1")).toBe("#557067");
+    expect(getCustomProperty(mintLight, "--ref-status-info")).toBe("#148a7a");
     expect(getCustomProperty(mintLight, "--shadow-glow")).toBe("0 0 12px rgba(21, 143, 119, 0.18)");
 
-    expect(getCustomProperty(graphiteLight, "--text-secondary")).toBe("#4d5b6a");
-    expect(getCustomProperty(graphiteLight, "--accent-blue")).toBe("#315fdd");
+    expect(getCustomProperty(graphiteLight, "--ref-fg-1")).toBe("#4d5b6a");
+    expect(getCustomProperty(graphiteLight, "--ref-status-info")).toBe("#315fdd");
     expect(getCustomProperty(graphiteLight, "--shadow-glow")).toBe(
       "0 0 12px rgba(49, 95, 221, 0.16)"
     );
 
-    expect(getCustomProperty(nordLight, "--text-secondary")).toBe("#4d5a6f");
-    expect(getCustomProperty(nordLight, "--accent-blue")).toBe("#5b7fa8");
+    expect(getCustomProperty(nordLight, "--ref-fg-1")).toBe("#4d5a6f");
+    expect(getCustomProperty(nordLight, "--ref-status-info")).toBe("#5b7fa8");
     expect(getCustomProperty(nordLight, "--shadow-glow")).toBe("0 0 12px rgba(91, 127, 168, 0.18)");
   });
 
@@ -413,6 +672,67 @@ describe("tokens.css touch tokens", () => {
     }
   });
 
+  it("mirrors the layered token schema in every theme selector", () => {
+    for (const theme of builtInThemes) {
+      const block = getRuleBlock(`[data-theme="${theme}"]`);
+
+      expect(
+        getCustomProperty(block, "--ref-fg-0"),
+        `${theme} should define --ref-fg-0`
+      ).not.toBeNull();
+      expect(
+        getCustomProperty(block, "--surface-page"),
+        `${theme} should define --surface-page`
+      ).not.toBeNull();
+      expect(
+        getCustomProperty(block, "--status-info-fg"),
+        `${theme} should define --status-info-fg`
+      ).not.toBeNull();
+      expect(
+        getCustomProperty(block, "--material-panel"),
+        `${theme} should define --material-panel`
+      ).not.toBeNull();
+      expect(
+        getCustomProperty(block, "--workspace-sidebar-surface"),
+        `${theme} should define --workspace-sidebar-surface`
+      ).not.toBeNull();
+      expect(
+        getCustomProperty(block, "--control-primary-bg"),
+        `${theme} should define --control-primary-bg`
+      ).not.toBeNull();
+      expect(
+        getCustomProperty(block, "--field-ring"),
+        `${theme} should define --field-ring`
+      ).not.toBeNull();
+      expect(
+        getCustomProperty(block, "--tag-info-bg"),
+        `${theme} should define --tag-info-bg`
+      ).not.toBeNull();
+      expect(
+        getCustomProperty(block, "--status-dot-running-ring-2"),
+        `${theme} should define --status-dot-running-ring-2`
+      ).not.toBeNull();
+    }
+  });
+
+  it("limits theme-specific overrides to sanctioned public token categories", () => {
+    for (const theme of builtInThemes.filter((theme) => theme !== "mint-dark")) {
+      const blocks = getRuleBlocks(`[data-theme="${theme}"]`);
+      const themeSpecificBlock = blocks.at(-1) ?? "";
+      const disallowedOverrides = getDeclaredCustomProperties(themeSpecificBlock).filter(
+        (token) => !allowedThemeSpecificOverridePatterns.some((pattern) => pattern.test(token))
+      );
+
+      expect(blocks.length, `${theme} should have a theme-specific override block`).toBeGreaterThan(
+        1
+      );
+      expect(
+        disallowedOverrides,
+        `${theme} should only override sanctioned theme-local token categories`
+      ).toEqual([]);
+    }
+  });
+
   it("keeps actively themed foundation roles and shared defaults visible in theme blocks", () => {
     const mintDark = getRuleBlock('[data-theme="mint-dark"]');
     const graphiteLight = getRuleBlock('[data-theme="graphite-light"]');
diff --git a/packages/web/src/styles/tokens.css b/packages/web/src/styles/tokens.css
index 40d64f15..235a41b1 100644
--- a/packages/web/src/styles/tokens.css
+++ b/packages/web/src/styles/tokens.css
@@ -80,40 +80,40 @@
   /* ========== Foundation: State / Interaction ========== */
   --state-focus-ring-color: var(--border-focus);
   --state-focus-ring-width: 2px;
-  --state-hover-bg-subtle: var(--bg-hover);
-  --state-hover-bg-strong: var(--bg-active);
-  --state-active-bg: var(--bg-active);
-  --state-selected-bg: color-mix(in srgb, var(--accent-blue) 12%, var(--bg-panel));
-  --state-selected-border: color-mix(in srgb, var(--accent-blue) 22%, transparent);
-  --state-disabled-bg: var(--bg-disabled);
-  --state-disabled-border: var(--border);
+  --state-hover-bg-subtle: var(--surface-hover);
+  --state-hover-bg-strong: var(--surface-active);
+  --state-active-bg: var(--surface-active);
+  --state-selected-bg: color-mix(in srgb, var(--status-info-fg) 12%, var(--surface-panel));
+  --state-selected-border: color-mix(in srgb, var(--status-info-fg) 22%, transparent);
+  --state-disabled-bg: var(--surface-disabled);
+  --state-disabled-border: var(--border-default);
   --state-disabled-text: var(--text-disabled);
-  --state-success-bg: color-mix(in srgb, var(--color-success) 14%, transparent);
-  --state-success-border: color-mix(in srgb, var(--color-success) 28%, transparent);
-  --state-success-text: var(--color-success);
+  --state-success-bg: color-mix(in srgb, var(--status-success-fg) 14%, transparent);
+  --state-success-border: color-mix(in srgb, var(--status-success-fg) 28%, transparent);
+  --state-success-text: var(--status-success-fg);
   --state-success-icon: var(--icon-success);
-  --state-warning-bg: color-mix(in srgb, var(--color-warning) 14%, transparent);
-  --state-warning-border: color-mix(in srgb, var(--color-warning) 28%, transparent);
-  --state-warning-text: var(--color-warning);
+  --state-warning-bg: color-mix(in srgb, var(--status-warning-fg) 14%, transparent);
+  --state-warning-border: color-mix(in srgb, var(--status-warning-fg) 28%, transparent);
+  --state-warning-text: var(--status-warning-fg);
   --state-warning-icon: var(--icon-warning);
-  --state-error-bg: color-mix(in srgb, var(--color-error) 14%, transparent);
-  --state-error-border: color-mix(in srgb, var(--color-error) 28%, transparent);
-  --state-error-text: var(--color-error);
+  --state-error-bg: color-mix(in srgb, var(--status-danger-fg) 14%, transparent);
+  --state-error-border: color-mix(in srgb, var(--status-danger-fg) 28%, transparent);
+  --state-error-text: var(--status-danger-fg);
   --state-error-icon: var(--icon-error);
-  --state-info-bg: color-mix(in srgb, var(--color-info) 14%, transparent);
-  --state-info-border: color-mix(in srgb, var(--color-info) 28%, transparent);
-  --state-info-text: var(--color-info);
+  --state-info-bg: color-mix(in srgb, var(--status-info-fg) 14%, transparent);
+  --state-info-border: color-mix(in srgb, var(--status-info-fg) 28%, transparent);
+  --state-info-text: var(--status-info-fg);
   --state-info-icon: var(--icon-info);
 
   /* ========== Foundation: Surface / Overlay ========== */
-  --surface-page-bg: var(--bg-page);
-  --surface-panel-bg: var(--bg-panel);
-  --surface-elevated-bg: var(--bg-elevated);
-  --surface-overlay-bg: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
-  --surface-overlay-border: var(--border);
+  --surface-page-bg: var(--surface-page);
+  --surface-panel-bg: var(--surface-panel);
+  --surface-elevated-bg: var(--surface-elevated);
+  --surface-overlay-bg: color-mix(in srgb, var(--surface-elevated) 96%, transparent);
+  --surface-overlay-border: var(--border-default);
   --surface-overlay-shadow: var(--shadow-lg);
-  --surface-overlay-backdrop: color-mix(in srgb, var(--bg-page) 72%, black 28%);
-  --surface-sticky-bg: color-mix(in srgb, var(--bg-page) 96%, var(--bg-surface) 4%);
+  --surface-overlay-backdrop: color-mix(in srgb, var(--surface-page) 72%, black 28%);
+  --surface-sticky-bg: color-mix(in srgb, var(--surface-page) 96%, var(--surface-panel) 4%);
   --overlay-width-sm: 360px;
   --overlay-width-md: 480px;
   --overlay-width-lg: 680px;
@@ -145,18 +145,6 @@
     transparent
   );
 
-  --ws-sidebar-bg: var(--surface-panel-bg);
-  --ws-activitybar-bg: var(--surface-panel-bg);
-  --ws-statusbar-bg: var(--surface-panel-bg);
-  --ws-session-bg: var(--surface-panel-bg);
-  --ws-session-active-bg: var(--surface-elevated-bg);
-  --ws-session-header-bg: var(--surface-elevated-bg);
-  --ws-terminal-shell-bg: var(--surface-panel-bg);
-  --ws-terminal-toolbar-bg: var(--surface-elevated-bg);
-  --ws-terminal-tabs-bg: var(--surface-elevated-bg);
-  --ws-editor-shell-bg: var(--surface-panel-bg);
-  --ws-editor-toolbar-bg: var(--surface-elevated-bg);
-
   /* ========== Foundation: Code Surface Sub-Specs ========== */
   --terminal-panel-inset: 2px;
   --terminal-toolbar-gap: var(--gap-default);
@@ -287,13 +275,8 @@
   --text: var(--text-primary);
   --text-sec: var(--text-secondary);
   --text-ter: var(--text-tertiary);
-  --blue: var(--accent-blue);
-  --green: var(--accent-green);
-  --amber: var(--accent-amber);
-  --pink: var(--accent-pink);
   --sans: var(--font-sans);
   --mono: var(--font-mono);
-  --bg: var(--bg-page);
 
   /* ========== Component-Specific Tokens ========== */
 
@@ -334,24 +317,24 @@
   --terminal-line-height: 1.6;
   --terminal-scrollback: 5000;
   --terminal-height: 200px;
-  --terminal-bg: var(--bg-terminal);
-  --terminal-border: var(--border);
+  --terminal-bg: var(--surface-input);
+  --terminal-border: var(--border-default);
   --terminal-text: var(--text-primary);
-  --terminal-accent: var(--accent-blue);
-  --session-bg: var(--bg-panel);
-  --session-border: var(--border);
+  --terminal-accent: var(--status-info-fg);
+  --session-bg: var(--surface-panel);
+  --session-border: var(--border-default);
   --session-text: var(--text-primary);
-  --session-accent: var(--accent-green);
-  --editor-bg: var(--bg-surface);
-  --editor-border: var(--border);
+  --session-accent: var(--status-success-fg);
+  --editor-bg: var(--surface-panel);
+  --editor-border: var(--border-default);
   --editor-text: var(--text-primary);
   --editor-gutter: var(--text-tertiary);
-  --diff-added-bg: color-mix(in srgb, var(--color-success) 18%, transparent);
-  --diff-added-border: color-mix(in srgb, var(--color-success) 48%, var(--border));
-  --diff-removed-bg: color-mix(in srgb, var(--color-error) 18%, transparent);
-  --diff-removed-border: color-mix(in srgb, var(--color-error) 48%, var(--border));
-  --diff-modified-bg: color-mix(in srgb, var(--color-warning) 18%, transparent);
-  --diff-modified-border: color-mix(in srgb, var(--color-warning) 48%, var(--border));
+  --diff-added-bg: color-mix(in srgb, var(--status-success-fg) 18%, transparent);
+  --diff-added-border: color-mix(in srgb, var(--status-success-fg) 48%, var(--border-default));
+  --diff-removed-bg: color-mix(in srgb, var(--status-danger-fg) 18%, transparent);
+  --diff-removed-border: color-mix(in srgb, var(--status-danger-fg) 48%, var(--border-default));
+  --diff-modified-bg: color-mix(in srgb, var(--status-warning-fg) 18%, transparent);
+  --diff-modified-border: color-mix(in srgb, var(--status-warning-fg) 48%, var(--border-default));
 
   /* Status Dot */
   --status-dot-size: 8px;
@@ -362,16 +345,21 @@
   --workspace-session-map-idle: color-mix(
     in srgb,
     var(--text-tertiary) 90%,
-    var(--accent-blue) 10%
+    var(--status-info-fg) 10%
+  );
+  --workspace-session-map-empty: color-mix(
+    in srgb,
+    var(--text-tertiary) 56%,
+    var(--surface-panel) 44%
   );
-  --workspace-session-map-empty: color-mix(in srgb, var(--text-tertiary) 56%, var(--bg-panel) 44%);
 
   /* Progress Bar */
   --progress-height: 4px;
 
   /* Scrollbar */
   --scrollbar-width: 8px;
-  --scrollbar-track: transparent;
+  --scrollbar-track: color-mix(in srgb, var(--surface-panel) 86%, var(--border-default) 14%);
+  --scrollbar-thumb: color-mix(in srgb, var(--border-default) 74%, var(--status-info-fg) 26%);
 
   /* ========== Touch / Pointer (Mobile-Friendly Phase 0) ========== */
   /* Desktop defaults - overridden below for narrow viewport or coarse pointer. */
@@ -383,1075 +371,2101 @@
 }
 
 :root,
-[data-theme="mint-dark"] {
-  /* ========== Backgrounds ========== */
-  --bg-page: #0a1014;
-  --bg-surface: #11181f;
-  --bg-sidebar: #0d141a;
-  --bg-terminal: #0b1218;
-  --bg-hover: #1a2632;
-  --bg-active: #1e3040;
-  --bg-disabled: #151f28;
-  --bg-input: #0d141a;
-
-  /* ========== Borders ========== */
-  --border: #1e2a35;
-  --border-light: #263545;
-  --border-focus: #6cb6ff;
-  --border-error: #ff9eb0;
-
-  /* ========== Text ========== */
-  --text-primary: #e5edf3;
-  --text-secondary: #9fb0bc;
-  --text-tertiary: #728492;
-  --text-muted: var(--text-tertiary);
-  --text-disabled: #4a5b6a;
-  --text-inverse: #0a1014;
-
-  /* ========== Accents ========== */
-  --accent-blue: #6cb6ff;
-  --accent-green: #78d7b2;
-  --accent-amber: #f1b86a;
-  --accent-pink: #ff9eb0;
-  --accent-red: var(--color-error);
-  --accent-purple: #c792ea;
+[data-theme="mint-dark"],
+[data-theme="mint-light"],
+[data-theme="graphite-dark"],
+[data-theme="graphite-light"],
+[data-theme="nord-dark"],
+[data-theme="nord-light"],
+[data-theme="hc-dark"],
+[data-theme="hc-light"] {
+  /* Private reference layer */
+  --ref-fg-0: #e5edf3;
+  --ref-fg-1: #9fb0bc;
+  --ref-fg-2: #728492;
+  --ref-fg-3: #4a5b6a;
+  --ref-fg-inverse: #0a1014;
+  --ref-bg-0: #0a1014;
+  --ref-bg-1: #11181f;
+  --ref-bg-2: #0d141a;
+  --ref-bg-3: #151f28;
+  --ref-bg-4: #1a2632;
+  --ref-bg-5: #1e3040;
+  --ref-bg-6: #22303c;
+  --ref-border-0: #1e2a35;
+  --ref-border-1: #263545;
+  --ref-border-2: #314454;
+  --ref-border-focus: #6cb6ff;
+  --ref-border-danger: #ff9eb0;
+  --ref-status-success: #78d7b2;
+  --ref-status-warning: #f1b86a;
+  --ref-status-danger: #ff9eb0;
+  --ref-status-info: #6cb6ff;
+
+  /* Public semantic layer */
+  --text-primary: var(--ref-fg-0);
+  --text-secondary: var(--ref-fg-1);
+  --text-tertiary: var(--ref-fg-2);
+  --text-disabled: var(--ref-fg-3);
+  --text-inverse: var(--ref-fg-inverse);
+  --text-link: var(--ref-status-info);
+  --text-link-hover: color-mix(in srgb, var(--ref-status-info) 82%, white 18%);
+
+  --surface-page: var(--ref-bg-0);
+  --surface-panel: color-mix(in srgb, var(--ref-bg-1) 94%, var(--ref-bg-0));
+  --surface-elevated: color-mix(in srgb, var(--ref-bg-1) 98%, white 2%);
+  --surface-input: var(--ref-bg-2);
+  --surface-muted: var(--ref-bg-2);
+  --surface-hover: var(--ref-bg-4);
+  --surface-active: var(--ref-bg-5);
+  --surface-disabled: var(--ref-bg-3);
+
+  --border-default: var(--ref-border-0);
+  --border-subtle: var(--ref-border-1);
+  --border-strong: var(--ref-border-2);
+  --border-focus: var(--ref-border-focus);
+  --border-danger: var(--ref-border-danger);
+
+  --status-success-fg: var(--ref-status-success);
+  --status-success-bg: color-mix(in srgb, var(--ref-status-success) 18%, var(--surface-panel));
+  --status-success-border: color-mix(in srgb, var(--ref-status-success) 48%, var(--border-default));
+  --status-success-icon: var(--ref-status-success);
+  --status-warning-fg: var(--ref-status-warning);
+  --status-warning-bg: color-mix(in srgb, var(--ref-status-warning) 18%, var(--surface-panel));
+  --status-warning-border: color-mix(in srgb, var(--ref-status-warning) 48%, var(--border-default));
+  --status-warning-icon: var(--ref-status-warning);
+  --status-danger-fg: var(--ref-status-danger);
+  --status-danger-bg: color-mix(in srgb, var(--ref-status-danger) 18%, var(--surface-panel));
+  --status-danger-border: color-mix(in srgb, var(--ref-status-danger) 48%, var(--border-default));
+  --status-danger-icon: var(--ref-status-danger);
+  --status-info-fg: var(--ref-status-info);
+  --status-info-bg: color-mix(in srgb, var(--ref-status-info) 18%, var(--surface-panel));
+  --status-info-border: color-mix(in srgb, var(--ref-status-info) 48%, var(--border-default));
+  --status-info-icon: var(--ref-status-info);
+
+  /* Material layer */
+  --material-backdrop-filter: none;
+  --material-panel: var(--surface-panel);
+  --material-elevated: var(--surface-elevated);
+  --material-overlay: color-mix(
+    in srgb,
+    var(--surface-elevated) calc(var(--app-surface-opacity, 0.96) * 100%),
+    transparent
+  );
+  --material-local-overlay: color-mix(
+    in srgb,
+    var(--surface-panel) calc(var(--app-surface-opacity, 0.92) * 100%),
+    transparent
+  );
+  --material-shell-page: color-mix(
+    in srgb,
+    var(--surface-page) calc(var(--app-surface-opacity, 0.96) * 100%),
+    transparent
+  );
+  --material-shell-topbar: color-mix(
+    in srgb,
+    var(--surface-elevated) calc(var(--app-surface-opacity, 0.96) * 100%),
+    transparent
+  );
 
-  /* ========== Semantic Colors ========== */
-  --color-success: #78d7b2;
-  --color-warning: #f1b86a;
-  --color-error: #ff9eb0;
-  --color-info: #6cb6ff;
-  --bg-panel: color-mix(in srgb, var(--bg-surface) 94%, var(--bg-page));
-  --bg-elevated: color-mix(in srgb, var(--bg-surface) 98%, white 2%);
+  --workspace-sidebar-surface: var(--surface-panel);
+  --workspace-activitybar-surface: var(--surface-panel);
+  --workspace-statusbar-surface: var(--surface-panel);
+  --workspace-session-surface: var(--surface-panel);
+  --workspace-session-active-surface: var(--surface-elevated);
+  --workspace-session-header-surface: var(--surface-elevated);
+  --workspace-terminal-shell-surface: var(--surface-panel);
+  --workspace-terminal-toolbar-surface: var(--surface-elevated);
+  --workspace-terminal-tabs-surface: var(--surface-elevated);
+  --workspace-editor-shell-surface: var(--surface-panel);
+  --workspace-editor-toolbar-surface: var(--surface-elevated);
+  --workspace-editor-toolbar-border: color-mix(
+    in srgb,
+    var(--border-default) 72%,
+    var(--status-info-fg) 28%
+  );
+  --workspace-content-surface: transparent;
+  --settings-header-surface: var(--material-overlay);
+  --settings-sidebar-surface: var(--material-overlay);
+  --topbar-surface: var(--material-overlay);
+  --workspace-page-surface: var(--material-shell-page);
+  --workspace-session-idle-surface: var(--material-overlay);
+  --workspace-session-idle-header-surface: var(--material-overlay);
+  --workspace-bottom-terminal-surface: var(--material-overlay);
+  --agent-draft-surface: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--material-overlay) 78%, var(--surface-panel) 22%),
+    color-mix(in srgb, var(--material-overlay) 64%, var(--surface-page) 36%)
+  );
+  --agent-provider-card-surface: color-mix(in srgb, var(--material-overlay) 44%, transparent);
+  --mobile-sheet-file-surface: color-mix(
+    in srgb,
+    var(--material-overlay) 100%,
+    color-mix(in srgb, var(--surface-panel) 80%, transparent)
+  );
+  --workspace-session-mobile-active-surface: color-mix(
+    in srgb,
+    var(--surface-active) 76%,
+    var(--material-overlay) 24%
+  );
+  --selection-accent-bg: color-mix(in srgb, var(--status-info-fg) 18%, transparent);
+  --editor-dirty-indicator-fg: var(--status-warning-fg);
+  --session-focus-pulse-color: var(--status-success-fg);
+
+  /* Domain/component-role layer */
+  --git-status-added-fg: var(--status-success-fg);
+  --git-status-added-bg: var(--status-success-bg);
+  --git-status-added-border: var(--status-success-border);
+  --git-status-modified-fg: var(--status-warning-fg);
+  --git-status-modified-bg: var(--status-warning-bg);
+  --git-status-modified-border: var(--status-warning-border);
+  --git-status-deleted-fg: var(--status-danger-fg);
+  --git-status-deleted-bg: var(--status-danger-bg);
+  --git-status-deleted-border: var(--status-danger-border);
+  --git-status-untracked-fg: var(--status-info-fg);
+  --git-status-untracked-bg: var(--status-info-bg);
+  --git-status-untracked-border: var(--status-info-border);
+  --git-status-renamed-fg: var(--status-info-fg);
+  --git-status-renamed-bg: var(--status-info-bg);
+  --git-status-renamed-border: var(--status-info-border);
+
+  --diff-added-bg: var(--status-success-bg);
+  --diff-added-border: var(--status-success-border);
+  --diff-added-fg: var(--status-success-fg);
+  --diff-modified-bg: var(--status-info-bg);
+  --diff-modified-border: var(--status-info-border);
+  --diff-modified-fg: var(--status-info-fg);
+  --diff-deleted-bg: var(--status-danger-bg);
+  --diff-deleted-border: var(--status-danger-border);
+  --diff-deleted-fg: var(--status-danger-fg);
 
-  /* ========== Foundation: State / Surface / Overlay ========== */
-  --state-focus-ring-color: var(--border-focus);
-  --state-focus-ring-offset: 2px;
-  --state-focus-ring-width: 2px;
-  --state-hover-bg: var(--bg-hover);
-  --state-hover-border: var(--border-light);
-  --state-hover-text: var(--text-primary);
-  --state-active-bg: var(--bg-active);
-  --state-selected-bg: color-mix(in srgb, var(--accent-blue) 20%, var(--bg-surface));
-  --state-selected-border: color-mix(in srgb, var(--accent-blue) 52%, var(--border));
-  --state-selected-text: var(--text-primary);
-  --state-disabled-bg: var(--bg-disabled);
-  --state-disabled-border: var(--border);
-  --state-disabled-text: var(--text-disabled);
-  --state-success-bg: color-mix(in srgb, var(--color-success) 18%, var(--bg-surface));
-  --state-success-border: color-mix(in srgb, var(--color-success) 48%, var(--border));
-  --state-success-text: var(--color-success);
-  --state-warning-bg: color-mix(in srgb, var(--color-warning) 18%, var(--bg-surface));
-  --state-warning-border: color-mix(in srgb, var(--color-warning) 48%, var(--border));
-  --state-warning-text: var(--color-warning);
-  --state-error-bg: color-mix(in srgb, var(--color-error) 18%, var(--bg-surface));
-  --state-error-border: color-mix(in srgb, var(--color-error) 48%, var(--border));
-  --state-error-text: var(--color-error);
-  --state-info-bg: color-mix(in srgb, var(--color-info) 18%, var(--bg-surface));
-  --state-info-border: color-mix(in srgb, var(--color-info) 48%, var(--border));
-  --state-info-text: var(--color-info);
-  --surface-canvas: var(--bg-page);
-  --surface-panel: var(--bg-panel);
-  --surface-panel-border: var(--border);
-  --surface-elevated: var(--bg-elevated);
-  --surface-elevated-border: var(--border-light);
-  --surface-input: var(--bg-input);
-  --surface-input-border: var(--border);
-  --surface-muted: var(--bg-sidebar);
-  --surface-inverse: var(--text-primary);
-  --overlay-backdrop: color-mix(in srgb, var(--bg-page) 68%, transparent);
-  --overlay-scrim: color-mix(in srgb, var(--bg-page) 82%, transparent);
-  --overlay-panel: var(--bg-elevated);
-  --overlay-panel-border: var(--border-light);
-  --overlay-local-backdrop: color-mix(in srgb, var(--bg-page) 54%, transparent);
-  --overlay-local-panel: var(--bg-panel);
-  --overlay-local-panel-border: var(--border);
-
-  /* ========== Icon Tokens ========== */
   --icon-primary: var(--text-primary);
   --icon-secondary: var(--text-secondary);
   --icon-muted: var(--text-tertiary);
-  --icon-accent: var(--accent-green);
-  --icon-success: var(--color-success);
-  --icon-warning: var(--color-warning);
-  --icon-error: var(--color-error);
-  --icon-info: var(--color-info);
-
+  --icon-accent: var(--status-success-icon);
+  --icon-success: var(--status-success-icon);
+  --icon-warning: var(--status-warning-icon);
+  --icon-error: var(--status-danger-icon);
+  --icon-info: var(--status-info-icon);
   --icon-file-folder: #8adfc0;
-  --icon-file-code: var(--accent-blue);
+  --icon-file-code: var(--status-info-fg);
   --icon-file-data: var(--accent-purple);
   --icon-file-doc: #d7e2ec;
   --icon-file-media: #ffb7c5;
   --icon-file-default: var(--text-secondary);
-  --icon-git-staged: var(--color-success);
-  --icon-git-modified: var(--color-warning);
-  --icon-git-deleted: var(--color-error);
-  --icon-git-untracked: var(--color-info);
-
-  --icon-surface-subtle: color-mix(in srgb, var(--text-secondary) 18%, var(--bg-surface));
-  --icon-surface-accent: color-mix(in srgb, var(--accent-green) 24%, var(--bg-surface));
-  --icon-surface-success: color-mix(in srgb, var(--color-success) 24%, var(--bg-surface));
-  --icon-surface-warning: color-mix(in srgb, var(--color-warning) 24%, var(--bg-surface));
-  --icon-surface-error: color-mix(in srgb, var(--color-error) 24%, var(--bg-surface));
-  --icon-surface-info: color-mix(in srgb, var(--color-info) 24%, var(--bg-surface));
-
-  /* ========== Shadows ========== */
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
-  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
-  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
-  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
-  --shadow-glow: 0 0 12px rgba(120, 215, 178, 0.3);
-
-  /* Scrollbar */
-  --scrollbar-thumb: #263545;
-}
-
-[data-theme="mint-light"] {
-  /* ========== Backgrounds ========== */
-  --bg-page: #f3fbf7;
-  --bg-surface: #fcfffd;
-  --bg-sidebar: #edf7f2;
-  --bg-terminal: #fafbfc;
-  --bg-hover: #ddefe5;
-  --bg-active: #d1e8dc;
-  --bg-disabled: #f0f3f6;
-  --bg-input: #ffffff;
-
-  /* ========== Borders ========== */
-  --border: #c7d8cf;
-  --border-light: #d8e7df;
-  --border-focus: #158f77;
-  --border-error: #cf222e;
-
-  /* ========== Text ========== */
-  --text-primary: #1f2328;
-  --text-secondary: #557067;
-  --text-tertiary: #8b949e;
-  --text-muted: var(--text-tertiary);
-  --text-disabled: #6e7681;
-  --text-inverse: #ffffff;
-
-  /* ========== Accents ========== */
-  --accent-blue: #148a7a;
-  --accent-green: #1a7f37;
-  --accent-amber: #9a6700;
-  --accent-pink: #cf222e;
-  --accent-red: var(--color-error);
-  --accent-purple: #8250df;
-
-  /* ========== Semantic Colors ========== */
-  --color-success: #1a7f37;
-  --color-warning: #9a6700;
-  --color-error: #cf222e;
-  --color-info: #148a7a;
-  --bg-panel: color-mix(in srgb, var(--bg-surface) 92%, var(--bg-sidebar));
-  --bg-elevated: color-mix(in srgb, var(--bg-surface) 96%, white 4%);
-
-  /* ========== Foundation: State / Surface / Overlay ========== */
-  --state-focus-ring-color: var(--border-focus);
-  --state-focus-ring-offset: 2px;
-  --state-focus-ring-width: 2px;
-  --state-hover-bg: var(--bg-hover);
-  --state-hover-border: var(--border-light);
-  --state-hover-text: var(--text-primary);
-  --state-active-bg: var(--bg-active);
-  --state-selected-bg: color-mix(in srgb, var(--accent-blue) 16%, var(--bg-surface));
-  --state-selected-border: color-mix(in srgb, var(--accent-blue) 42%, var(--border));
-  --state-selected-text: var(--text-primary);
-  --state-disabled-bg: var(--bg-disabled);
-  --state-disabled-border: var(--border);
-  --state-disabled-text: var(--text-disabled);
-  --state-success-bg: color-mix(in srgb, var(--color-success) 14%, var(--bg-surface));
-  --state-success-border: color-mix(in srgb, var(--color-success) 36%, var(--border));
-  --state-success-text: var(--color-success);
-  --state-warning-bg: color-mix(in srgb, var(--color-warning) 14%, var(--bg-surface));
-  --state-warning-border: color-mix(in srgb, var(--color-warning) 36%, var(--border));
-  --state-warning-text: var(--color-warning);
-  --state-error-bg: color-mix(in srgb, var(--color-error) 14%, var(--bg-surface));
-  --state-error-border: color-mix(in srgb, var(--color-error) 36%, var(--border));
-  --state-error-text: var(--color-error);
-  --state-info-bg: color-mix(in srgb, var(--color-info) 14%, var(--bg-surface));
-  --state-info-border: color-mix(in srgb, var(--color-info) 36%, var(--border));
-  --state-info-text: var(--color-info);
-  --surface-canvas: var(--bg-page);
-  --surface-panel: var(--bg-panel);
-  --surface-panel-border: var(--border);
-  --surface-elevated: var(--bg-elevated);
-  --surface-elevated-border: var(--border-light);
-  --surface-input: var(--bg-input);
-  --surface-input-border: var(--border);
-  --surface-muted: var(--bg-sidebar);
-  --surface-inverse: var(--text-inverse);
-  --overlay-backdrop: color-mix(in srgb, #0f172a 26%, transparent);
-  --overlay-scrim: color-mix(in srgb, #0f172a 40%, transparent);
-  --overlay-panel: var(--bg-elevated);
-  --overlay-panel-border: var(--border-light);
-  --overlay-local-backdrop: color-mix(in srgb, #0f172a 18%, transparent);
-  --overlay-local-panel: var(--bg-panel);
-  --overlay-local-panel-border: var(--border);
-
-  /* ========== Icon Tokens ========== */
-  --icon-primary: var(--text-primary);
-  --icon-secondary: var(--text-secondary);
-  --icon-muted: var(--text-tertiary);
-  --icon-accent: var(--accent-blue);
-  --icon-success: var(--color-success);
-  --icon-warning: var(--color-warning);
-  --icon-error: var(--color-error);
-  --icon-info: var(--color-info);
-
-  --icon-file-folder: #1f9d7f;
-  --icon-file-code: #1373a5;
-  --icon-file-data: var(--accent-purple);
-  --icon-file-doc: #567065;
-  --icon-file-media: #c65f80;
-  --icon-file-default: var(--text-secondary);
-  --icon-git-staged: var(--color-success);
-  --icon-git-modified: var(--color-warning);
-  --icon-git-deleted: var(--color-error);
-  --icon-git-untracked: var(--color-info);
-
-  --icon-surface-subtle: color-mix(in srgb, var(--text-secondary) 16%, var(--bg-surface));
-  --icon-surface-accent: color-mix(in srgb, var(--accent-blue) 18%, var(--bg-surface));
-  --icon-surface-success: color-mix(in srgb, var(--color-success) 18%, var(--bg-surface));
-  --icon-surface-warning: color-mix(in srgb, var(--color-warning) 18%, var(--bg-surface));
-  --icon-surface-error: color-mix(in srgb, var(--color-error) 18%, var(--bg-surface));
-  --icon-surface-info: color-mix(in srgb, var(--color-info) 18%, var(--bg-surface));
-
-  /* ========== Shadows ========== */
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
-  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
-  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15);
-  --shadow-glow: 0 0 12px rgba(21, 143, 119, 0.18);
-
-  /* Scrollbar */
-  --scrollbar-thumb: #d0d7de;
-}
-
-[data-theme="graphite-dark"] {
-  /* ========== Backgrounds ========== */
-  --bg-page: #0d1014;
-  --bg-surface: #14171c;
-  --bg-sidebar: #101318;
-  --bg-terminal: #111317;
-  --bg-hover: #1c2026;
-  --bg-active: #252b33;
-  --bg-disabled: #161a20;
-  --bg-input: #101318;
-
-  /* ========== Borders ========== */
-  --border: #2a3038;
-  --border-light: #353c46;
-  --border-focus: #9bb8ff;
-  --border-error: #ffa198;
-
-  /* ========== Text ========== */
-  --text-primary: #e6e6e6;
-  --text-secondary: #a8b0ba;
-  --text-tertiary: #7d8590;
-  --text-muted: var(--text-tertiary);
-  --text-disabled: #5d6672;
-  --text-inverse: #111317;
-
-  /* ========== Accents ========== */
-  --accent-blue: #7aa2f7;
-  --accent-green: #8ddb8c;
-  --accent-amber: #dcb86a;
-  --accent-pink: #ff7b72;
-  --accent-red: var(--color-error);
-  --accent-purple: #c099ff;
-
-  /* ========== Semantic Colors ========== */
-  --color-success: #8ddb8c;
-  --color-warning: #dcb86a;
-  --color-error: #ff7b72;
-  --color-info: #7aa2f7;
-  --bg-panel: color-mix(in srgb, var(--bg-surface) 94%, var(--bg-page));
-  --bg-elevated: color-mix(in srgb, var(--bg-surface) 98%, white 2%);
-
-  /* ========== Foundation: State / Surface / Overlay ========== */
-  --state-focus-ring-color: var(--border-focus);
-  --state-focus-ring-offset: 2px;
-  --state-focus-ring-width: 2px;
-  --state-hover-bg: var(--bg-hover);
-  --state-hover-border: var(--border-light);
-  --state-hover-text: var(--text-primary);
-  --state-active-bg: var(--bg-active);
-  --state-selected-bg: color-mix(in srgb, var(--accent-blue) 20%, var(--bg-surface));
-  --state-selected-border: color-mix(in srgb, var(--accent-blue) 52%, var(--border));
-  --state-selected-text: var(--text-primary);
-  --state-disabled-bg: var(--bg-disabled);
-  --state-disabled-border: var(--border);
-  --state-disabled-text: var(--text-disabled);
-  --state-success-bg: color-mix(in srgb, var(--color-success) 18%, var(--bg-surface));
-  --state-success-border: color-mix(in srgb, var(--color-success) 48%, var(--border));
-  --state-success-text: var(--color-success);
-  --state-warning-bg: color-mix(in srgb, var(--color-warning) 18%, var(--bg-surface));
-  --state-warning-border: color-mix(in srgb, var(--color-warning) 48%, var(--border));
-  --state-warning-text: var(--color-warning);
-  --state-error-bg: color-mix(in srgb, var(--color-error) 18%, var(--bg-surface));
-  --state-error-border: color-mix(in srgb, var(--color-error) 48%, var(--border));
-  --state-error-text: var(--color-error);
-  --state-info-bg: color-mix(in srgb, var(--color-info) 18%, var(--bg-surface));
-  --state-info-border: color-mix(in srgb, var(--color-info) 48%, var(--border));
-  --state-info-text: var(--color-info);
-  --surface-canvas: var(--bg-page);
-  --surface-panel: var(--bg-panel);
-  --surface-panel-border: var(--border);
-  --surface-elevated: var(--bg-elevated);
-  --surface-elevated-border: var(--border-light);
-  --surface-input: var(--bg-input);
-  --surface-input-border: var(--border);
-  --surface-muted: var(--bg-sidebar);
-  --surface-inverse: var(--text-primary);
-  --overlay-backdrop: color-mix(in srgb, var(--bg-page) 68%, transparent);
-  --overlay-scrim: color-mix(in srgb, var(--bg-page) 82%, transparent);
-  --overlay-panel: var(--bg-elevated);
-  --overlay-panel-border: var(--border-light);
-  --overlay-local-backdrop: color-mix(in srgb, var(--bg-page) 54%, transparent);
-  --overlay-local-panel: var(--bg-panel);
-  --overlay-local-panel-border: var(--border);
-
-  /* ========== Icon Tokens ========== */
-  --icon-primary: var(--text-primary);
-  --icon-secondary: var(--text-secondary);
-  --icon-muted: var(--text-tertiary);
-  --icon-accent: #8fb1ff;
-  --icon-success: var(--color-success);
-  --icon-warning: var(--color-warning);
-  --icon-error: var(--color-error);
-  --icon-info: var(--color-info);
-
-  --icon-file-folder: #e1b86b;
-  --icon-file-code: var(--accent-blue);
-  --icon-file-data: var(--accent-purple);
-  --icon-file-doc: #c5ccd6;
-  --icon-file-media: #ff9f99;
-  --icon-file-default: var(--text-secondary);
-  --icon-git-staged: var(--color-success);
-  --icon-git-modified: var(--color-warning);
-  --icon-git-deleted: var(--color-error);
-  --icon-git-untracked: var(--color-info);
-
-  --icon-surface-subtle: color-mix(in srgb, var(--text-secondary) 18%, var(--bg-surface));
-  --icon-surface-accent: color-mix(in srgb, #8fb1ff 24%, var(--bg-surface));
-  --icon-surface-success: color-mix(in srgb, var(--color-success) 24%, var(--bg-surface));
-  --icon-surface-warning: color-mix(in srgb, var(--color-warning) 24%, var(--bg-surface));
-  --icon-surface-error: color-mix(in srgb, var(--color-error) 24%, var(--bg-surface));
-  --icon-surface-info: color-mix(in srgb, var(--color-info) 24%, var(--bg-surface));
-
-  /* ========== Shadows ========== */
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.42);
-  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.54);
-  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.64);
-  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.74);
-  --shadow-glow: 0 0 12px rgba(122, 162, 247, 0.24);
-
-  /* Scrollbar */
-  --scrollbar-thumb: #353c46;
-}
-
-[data-theme="graphite-light"] {
-  /* ========== Backgrounds ========== */
-  --bg-page: #e7edf3;
-  --bg-surface: #ffffff;
-  --bg-sidebar: #dfe6ee;
-  --bg-terminal: #f3f4f6;
-  --bg-hover: #d4dce5;
-  --bg-active: #c8d1dc;
-  --bg-disabled: #eef2f6;
-  --bg-input: #ffffff;
-
-  /* ========== Borders ========== */
-  --border: #b8c3cf;
-  --border-light: #ccd5de;
-  --border-focus: #315fdd;
-  --border-error: #d14343;
-
-  /* ========== Text ========== */
-  --text-primary: #1f2933;
-  --text-secondary: #4d5b6a;
-  --text-tertiary: #7b8794;
-  --text-muted: var(--text-tertiary);
-  --text-disabled: #9aa5b1;
-  --text-inverse: #ffffff;
-
-  /* ========== Accents ========== */
-  --accent-blue: #315fdd;
-  --accent-green: #15803d;
-  --accent-amber: #a16207;
-  --accent-pink: #d14343;
-  --accent-red: var(--color-error);
-  --accent-purple: #7c3aed;
-
-  /* ========== Semantic Colors ========== */
-  --color-success: #15803d;
-  --color-warning: #a16207;
-  --color-error: #d14343;
-  --color-info: #315fdd;
-  --bg-panel: color-mix(in srgb, var(--bg-surface) 92%, var(--bg-sidebar));
-  --bg-elevated: color-mix(in srgb, var(--bg-surface) 96%, white 4%);
-
-  /* ========== Foundation: State / Surface / Overlay ========== */
-  --state-focus-ring-color: var(--border-focus);
-  --state-focus-ring-offset: 2px;
-  --state-focus-ring-width: 2px;
-  --state-hover-bg: var(--bg-hover);
-  --state-hover-border: var(--border-light);
-  --state-hover-text: var(--text-primary);
-  --state-active-bg: var(--bg-active);
-  --state-selected-bg: color-mix(in srgb, var(--accent-blue) 16%, var(--bg-surface));
-  --state-selected-border: color-mix(in srgb, var(--accent-blue) 42%, var(--border));
-  --state-selected-text: var(--text-primary);
-  --state-disabled-bg: var(--bg-disabled);
-  --state-disabled-border: var(--border);
-  --state-disabled-text: var(--text-disabled);
-  --state-success-bg: color-mix(in srgb, var(--color-success) 14%, var(--bg-surface));
-  --state-success-border: color-mix(in srgb, var(--color-success) 36%, var(--border));
-  --state-success-text: var(--color-success);
-  --state-warning-bg: color-mix(in srgb, var(--color-warning) 14%, var(--bg-surface));
-  --state-warning-border: color-mix(in srgb, var(--color-warning) 36%, var(--border));
-  --state-warning-text: var(--color-warning);
-  --state-error-bg: color-mix(in srgb, var(--color-error) 14%, var(--bg-surface));
-  --state-error-border: color-mix(in srgb, var(--color-error) 36%, var(--border));
-  --state-error-text: var(--color-error);
-  --state-info-bg: color-mix(in srgb, var(--color-info) 14%, var(--bg-surface));
-  --state-info-border: color-mix(in srgb, var(--color-info) 36%, var(--border));
-  --state-info-text: var(--color-info);
-  --surface-canvas: var(--bg-page);
-  --surface-panel: var(--bg-panel);
-  --surface-panel-border: var(--border);
-  --surface-elevated: var(--bg-elevated);
-  --surface-elevated-border: var(--border-light);
-  --surface-input: var(--bg-input);
-  --surface-input-border: var(--border);
-  --surface-muted: var(--bg-sidebar);
-  --surface-inverse: var(--text-inverse);
-  --overlay-backdrop: color-mix(in srgb, #0f172a 26%, transparent);
-  --overlay-scrim: color-mix(in srgb, #0f172a 40%, transparent);
-  --overlay-panel: var(--bg-elevated);
-  --overlay-panel-border: var(--border-light);
-  --overlay-local-backdrop: color-mix(in srgb, #0f172a 18%, transparent);
-  --overlay-local-panel: var(--bg-panel);
-  --overlay-local-panel-border: var(--border);
-
-  /* ========== Icon Tokens ========== */
-  --icon-primary: var(--text-primary);
-  --icon-secondary: var(--text-secondary);
-  --icon-muted: var(--text-tertiary);
-  --icon-accent: #2f4fb8;
-  --icon-success: var(--color-success);
-  --icon-warning: var(--color-warning);
-  --icon-error: var(--color-error);
-  --icon-info: var(--color-info);
-
-  --icon-file-folder: #8a6324;
-  --icon-file-code: var(--accent-blue);
-  --icon-file-data: var(--accent-purple);
-  --icon-file-doc: #516171;
-  --icon-file-media: #bf5a5a;
-  --icon-file-default: var(--text-secondary);
-  --icon-git-staged: var(--color-success);
-  --icon-git-modified: var(--color-warning);
-  --icon-git-deleted: var(--color-error);
-  --icon-git-untracked: var(--color-info);
-
-  --icon-surface-subtle: color-mix(in srgb, var(--text-secondary) 16%, var(--bg-surface));
-  --icon-surface-accent: color-mix(in srgb, #2f4fb8 18%, var(--bg-surface));
-  --icon-surface-success: color-mix(in srgb, var(--color-success) 18%, var(--bg-surface));
-  --icon-surface-warning: color-mix(in srgb, var(--color-warning) 18%, var(--bg-surface));
-  --icon-surface-error: color-mix(in srgb, var(--color-error) 18%, var(--bg-surface));
-  --icon-surface-info: color-mix(in srgb, var(--color-info) 18%, var(--bg-surface));
-
-  /* ========== Shadows ========== */
-  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
-  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.1);
-  --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.12);
-  --shadow-xl: 0 16px 48px rgba(15, 23, 42, 0.16);
-  --shadow-glow: 0 0 12px rgba(49, 95, 221, 0.16);
-
-  /* Scrollbar */
-  --scrollbar-thumb: #c7d0da;
-}
-
-[data-theme="nord-dark"] {
-  /* ========== Backgrounds ========== */
-  --bg-page: #242933;
-  --bg-surface: #2e3440;
-  --bg-sidebar: #282e39;
-  --bg-terminal: #2e3440;
-  --bg-hover: #384152;
-  --bg-active: #434c5e;
-  --bg-disabled: #2b313c;
-  --bg-input: #272d38;
-
-  /* ========== Borders ========== */
-  --border: #4c566a;
-  --border-light: #616e88;
-  --border-focus: #88c0d0;
-  --border-error: #d08770;
-
-  /* ========== Text ========== */
-  --text-primary: #d8dee9;
-  --text-secondary: #b5c1d2;
-  --text-tertiary: #7b88a1;
-  --text-muted: var(--text-tertiary);
-  --text-disabled: #616e88;
-  --text-inverse: #2e3440;
-
-  /* ========== Accents ========== */
-  --accent-blue: #81a1c1;
-  --accent-green: #a3be8c;
-  --accent-amber: #ebcb8b;
-  --accent-pink: #bf616a;
-  --accent-red: var(--color-error);
-  --accent-purple: #b48ead;
-
-  /* ========== Semantic Colors ========== */
-  --color-success: #a3be8c;
-  --color-warning: #ebcb8b;
-  --color-error: #bf616a;
-  --color-info: #88c0d0;
-  --bg-panel: color-mix(in srgb, var(--bg-surface) 94%, var(--bg-page));
-  --bg-elevated: color-mix(in srgb, var(--bg-surface) 98%, white 2%);
-
-  /* ========== Foundation: State / Surface / Overlay ========== */
-  --state-focus-ring-color: var(--border-focus);
-  --state-focus-ring-offset: 2px;
-  --state-focus-ring-width: 2px;
-  --state-hover-bg: var(--bg-hover);
-  --state-hover-border: var(--border-light);
-  --state-hover-text: var(--text-primary);
-  --state-active-bg: var(--bg-active);
-  --state-selected-bg: color-mix(in srgb, var(--accent-blue) 20%, var(--bg-surface));
-  --state-selected-border: color-mix(in srgb, var(--accent-blue) 52%, var(--border));
-  --state-selected-text: var(--text-primary);
-  --state-disabled-bg: var(--bg-disabled);
-  --state-disabled-border: var(--border);
-  --state-disabled-text: var(--text-disabled);
-  --state-success-bg: color-mix(in srgb, var(--color-success) 18%, var(--bg-surface));
-  --state-success-border: color-mix(in srgb, var(--color-success) 48%, var(--border));
-  --state-success-text: var(--color-success);
-  --state-warning-bg: color-mix(in srgb, var(--color-warning) 18%, var(--bg-surface));
-  --state-warning-border: color-mix(in srgb, var(--color-warning) 48%, var(--border));
-  --state-warning-text: var(--color-warning);
-  --state-error-bg: color-mix(in srgb, var(--color-error) 18%, var(--bg-surface));
-  --state-error-border: color-mix(in srgb, var(--color-error) 48%, var(--border));
-  --state-error-text: var(--color-error);
-  --state-info-bg: color-mix(in srgb, var(--color-info) 18%, var(--bg-surface));
-  --state-info-border: color-mix(in srgb, var(--color-info) 48%, var(--border));
-  --state-info-text: var(--color-info);
-  --surface-canvas: var(--bg-page);
-  --surface-panel: var(--bg-panel);
-  --surface-panel-border: var(--border);
-  --surface-elevated: var(--bg-elevated);
-  --surface-elevated-border: var(--border-light);
-  --surface-input: var(--bg-input);
-  --surface-input-border: var(--border);
-  --surface-muted: var(--bg-sidebar);
-  --surface-inverse: var(--text-primary);
-  --overlay-backdrop: color-mix(in srgb, var(--bg-page) 68%, transparent);
-  --overlay-scrim: color-mix(in srgb, var(--bg-page) 82%, transparent);
-  --overlay-panel: var(--bg-elevated);
-  --overlay-panel-border: var(--border-light);
-  --overlay-local-backdrop: color-mix(in srgb, var(--bg-page) 54%, transparent);
-  --overlay-local-panel: var(--bg-panel);
-  --overlay-local-panel-border: var(--border);
-
-  /* ========== Icon Tokens ========== */
-  --icon-primary: var(--text-primary);
-  --icon-secondary: var(--text-secondary);
-  --icon-muted: var(--text-tertiary);
-  --icon-accent: #8fbcbb;
-  --icon-success: var(--color-success);
-  --icon-warning: var(--color-warning);
-  --icon-error: var(--color-error);
-  --icon-info: var(--color-info);
-
-  --icon-file-folder: #d8b76e;
-  --icon-file-code: var(--accent-blue);
-  --icon-file-data: var(--accent-purple);
-  --icon-file-doc: #c7d3e0;
-  --icon-file-media: #cf8c95;
-  --icon-file-default: var(--text-secondary);
-  --icon-git-staged: var(--color-success);
-  --icon-git-modified: var(--color-warning);
-  --icon-git-deleted: var(--color-error);
-  --icon-git-untracked: var(--color-info);
-
-  --icon-surface-subtle: color-mix(in srgb, var(--text-secondary) 20%, var(--bg-surface));
-  --icon-surface-accent: color-mix(in srgb, #8fbcbb 24%, var(--bg-surface));
-  --icon-surface-success: color-mix(in srgb, var(--color-success) 24%, var(--bg-surface));
-  --icon-surface-warning: color-mix(in srgb, var(--color-warning) 24%, var(--bg-surface));
-  --icon-surface-error: color-mix(in srgb, var(--color-error) 24%, var(--bg-surface));
-  --icon-surface-info: color-mix(in srgb, var(--color-info) 24%, var(--bg-surface));
-
-  /* ========== Shadows ========== */
-  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.36);
-  --shadow-md: 0 4px 12px rgba(17, 24, 39, 0.46);
-  --shadow-lg: 0 8px 32px rgba(17, 24, 39, 0.58);
-  --shadow-xl: 0 16px 48px rgba(17, 24, 39, 0.68);
-  --shadow-glow: 0 0 12px rgba(136, 192, 208, 0.26);
-
-  /* Scrollbar */
-  --scrollbar-thumb: #4c566a;
-}
-
-[data-theme="nord-light"] {
-  /* ========== Backgrounds ========== */
-  --bg-page: #e3ebf4;
-  --bg-surface: #f1f5fa;
-  --bg-sidebar: #dbe4ef;
-  --bg-terminal: #eceff4;
-  --bg-hover: #d2ddea;
-  --bg-active: #c8d4e2;
-  --bg-disabled: #edf1f6;
-  --bg-input: #f7f9fc;
-
-  /* ========== Borders ========== */
-  --border: #b8c6d7;
-  --border-light: #cad5e2;
-  --border-focus: #5b7fa8;
-  --border-error: #bf616a;
-
-  /* ========== Text ========== */
-  --text-primary: #2e3440;
-  --text-secondary: #4d5a6f;
-  --text-tertiary: #7b88a1;
-  --text-muted: var(--text-tertiary);
-  --text-disabled: #93a0b7;
-  --text-inverse: #ffffff;
-
-  /* ========== Accents ========== */
-  --accent-blue: #5b7fa8;
-  --accent-green: #4c7a5b;
-  --accent-amber: #a77f2f;
-  --accent-pink: #bf616a;
-  --accent-red: var(--color-error);
-  --accent-purple: #8f5b9c;
-
-  /* ========== Semantic Colors ========== */
-  --color-success: #4c7a5b;
-  --color-warning: #a77f2f;
-  --color-error: #bf616a;
-  --color-info: #5b7fa8;
-  --bg-panel: color-mix(in srgb, var(--bg-surface) 92%, var(--bg-sidebar));
-  --bg-elevated: color-mix(in srgb, var(--bg-surface) 96%, white 4%);
-
-  /* ========== Foundation: State / Surface / Overlay ========== */
-  --state-focus-ring-color: var(--border-focus);
-  --state-focus-ring-offset: 2px;
-  --state-focus-ring-width: 2px;
-  --state-hover-bg: var(--bg-hover);
-  --state-hover-border: var(--border-light);
-  --state-hover-text: var(--text-primary);
-  --state-active-bg: var(--bg-active);
-  --state-selected-bg: color-mix(in srgb, var(--accent-blue) 16%, var(--bg-surface));
-  --state-selected-border: color-mix(in srgb, var(--accent-blue) 42%, var(--border));
-  --state-selected-text: var(--text-primary);
-  --state-disabled-bg: var(--bg-disabled);
-  --state-disabled-border: var(--border);
-  --state-disabled-text: var(--text-disabled);
-  --state-success-bg: color-mix(in srgb, var(--color-success) 14%, var(--bg-surface));
-  --state-success-border: color-mix(in srgb, var(--color-success) 36%, var(--border));
-  --state-success-text: var(--color-success);
-  --state-warning-bg: color-mix(in srgb, var(--color-warning) 14%, var(--bg-surface));
-  --state-warning-border: color-mix(in srgb, var(--color-warning) 36%, var(--border));
-  --state-warning-text: var(--color-warning);
-  --state-error-bg: color-mix(in srgb, var(--color-error) 14%, var(--bg-surface));
-  --state-error-border: color-mix(in srgb, var(--color-error) 36%, var(--border));
-  --state-error-text: var(--color-error);
-  --state-info-bg: color-mix(in srgb, var(--color-info) 14%, var(--bg-surface));
-  --state-info-border: color-mix(in srgb, var(--color-info) 36%, var(--border));
-  --state-info-text: var(--color-info);
-  --surface-canvas: var(--bg-page);
-  --surface-panel: var(--bg-panel);
-  --surface-panel-border: var(--border);
-  --surface-elevated: var(--bg-elevated);
-  --surface-elevated-border: var(--border-light);
-  --surface-input: var(--bg-input);
-  --surface-input-border: var(--border);
-  --surface-muted: var(--bg-sidebar);
-  --surface-inverse: var(--text-inverse);
-  --overlay-backdrop: color-mix(in srgb, #243447 20%, transparent);
-  --overlay-scrim: color-mix(in srgb, #243447 32%, transparent);
-  --overlay-panel: var(--bg-elevated);
-  --overlay-panel-border: var(--border-light);
-  --overlay-local-backdrop: color-mix(in srgb, #243447 14%, transparent);
-  --overlay-local-panel: var(--bg-panel);
-  --overlay-local-panel-border: var(--border);
-
-  /* ========== Icon Tokens ========== */
-  --icon-primary: var(--text-primary);
-  --icon-secondary: var(--text-secondary);
-  --icon-muted: var(--text-tertiary);
-  --icon-accent: #6b8fb9;
-  --icon-success: var(--color-success);
-  --icon-warning: var(--color-warning);
-  --icon-error: var(--color-error);
-  --icon-info: var(--color-info);
-
-  --icon-file-folder: #b28a49;
-  --icon-file-code: var(--accent-blue);
-  --icon-file-data: var(--accent-purple);
-  --icon-file-doc: #5d6c82;
-  --icon-file-media: #b96f77;
-  --icon-file-default: var(--text-secondary);
-  --icon-git-staged: var(--color-success);
-  --icon-git-modified: var(--color-warning);
-  --icon-git-deleted: var(--color-error);
-  --icon-git-untracked: var(--color-info);
-
-  --icon-surface-subtle: color-mix(in srgb, var(--text-secondary) 16%, var(--bg-surface));
-  --icon-surface-accent: color-mix(in srgb, #6b8fb9 18%, var(--bg-surface));
-  --icon-surface-success: color-mix(in srgb, var(--color-success) 18%, var(--bg-surface));
-  --icon-surface-warning: color-mix(in srgb, var(--color-warning) 18%, var(--bg-surface));
-  --icon-surface-error: color-mix(in srgb, var(--color-error) 18%, var(--bg-surface));
-  --icon-surface-info: color-mix(in srgb, var(--color-info) 18%, var(--bg-surface));
-
-  /* ========== Shadows ========== */
-  --shadow-sm: 0 1px 2px rgba(46, 52, 64, 0.08);
-  --shadow-md: 0 4px 12px rgba(46, 52, 64, 0.1);
-  --shadow-lg: 0 8px 32px rgba(46, 52, 64, 0.12);
-  --shadow-xl: 0 16px 48px rgba(46, 52, 64, 0.15);
-  --shadow-glow: 0 0 12px rgba(91, 127, 168, 0.18);
-
-  /* Scrollbar */
-  --scrollbar-thumb: #c6ceda;
-}
-
-[data-theme="hc-dark"] {
-  /* ========== Backgrounds ========== */
-  --bg-page: #000000;
-  --bg-surface: #000000;
-  --bg-sidebar: #000000;
-  --bg-terminal: #000000;
-  --bg-hover: #141414;
-  --bg-active: #264f78;
-  --bg-disabled: #0d0d0d;
-  --bg-input: #000000;
-
-  /* ========== Borders ========== */
-  --border: #ffffff;
-  --border-light: #ffff00;
-  --border-focus: #ffff00;
-  --border-error: #ff4d4d;
-
-  /* ========== Text ========== */
-  --text-primary: #ffffff;
-  --text-secondary: #f0f0f0;
-  --text-tertiary: #d0d0d0;
-  --text-muted: var(--text-tertiary);
-  --text-disabled: #8f8f8f;
-  --text-inverse: #000000;
-
-  /* ========== Accents ========== */
-  --accent-blue: #66b3ff;
-  --accent-green: #00ff7f;
-  --accent-amber: #ffff66;
-  --accent-pink: #ff4d4d;
-  --accent-red: var(--color-error);
-  --accent-purple: #ff7fff;
-
-  /* ========== Semantic Colors ========== */
-  --color-success: #00ff7f;
-  --color-warning: #ffff66;
-  --color-error: #ff4d4d;
-  --color-info: #66b3ff;
-  --bg-panel: color-mix(in srgb, var(--bg-surface) 92%, #101010);
-  --bg-elevated: color-mix(in srgb, var(--bg-surface) 98%, white 2%);
-
-  /* ========== Foundation: State / Surface / Overlay ========== */
-  --state-focus-ring-color: var(--border-focus);
-  --state-focus-ring-offset: 2px;
-  --state-focus-ring-width: 2px;
-  --state-hover-bg: var(--bg-hover);
-  --state-hover-border: var(--border-light);
-  --state-hover-text: var(--text-primary);
-  --state-active-bg: var(--bg-active);
-  --state-selected-bg: color-mix(in srgb, var(--accent-blue) 24%, var(--bg-surface));
-  --state-selected-border: color-mix(in srgb, var(--accent-blue) 60%, var(--border));
-  --state-selected-text: var(--text-primary);
-  --state-disabled-bg: var(--bg-disabled);
-  --state-disabled-border: var(--border);
-  --state-disabled-text: var(--text-disabled);
-  --state-success-bg: color-mix(in srgb, var(--color-success) 24%, var(--bg-surface));
-  --state-success-border: color-mix(in srgb, var(--color-success) 56%, var(--border));
-  --state-success-text: var(--color-success);
-  --state-warning-bg: color-mix(in srgb, var(--color-warning) 24%, var(--bg-surface));
-  --state-warning-border: color-mix(in srgb, var(--color-warning) 56%, var(--border));
-  --state-warning-text: var(--color-warning);
-  --state-error-bg: color-mix(in srgb, var(--color-error) 24%, var(--bg-surface));
-  --state-error-border: color-mix(in srgb, var(--color-error) 56%, var(--border));
-  --state-error-text: var(--color-error);
-  --state-info-bg: color-mix(in srgb, var(--color-info) 24%, var(--bg-surface));
-  --state-info-border: color-mix(in srgb, var(--color-info) 56%, var(--border));
-  --state-info-text: var(--color-info);
-  --surface-canvas: var(--bg-page);
-  --surface-panel: var(--bg-panel);
-  --surface-panel-border: var(--border);
-  --surface-elevated: var(--bg-elevated);
-  --surface-elevated-border: var(--border-light);
-  --surface-input: var(--bg-input);
-  --surface-input-border: var(--border);
-  --surface-muted: var(--bg-sidebar);
-  --surface-inverse: var(--text-primary);
-  --overlay-backdrop: color-mix(in srgb, #000000 72%, transparent);
-  --overlay-scrim: color-mix(in srgb, #000000 84%, transparent);
-  --overlay-panel: var(--bg-elevated);
-  --overlay-panel-border: var(--border-light);
-  --overlay-local-backdrop: color-mix(in srgb, #000000 58%, transparent);
-  --overlay-local-panel: var(--bg-panel);
-  --overlay-local-panel-border: var(--border);
-
-  /* ========== Icon Tokens ========== */
-  --icon-primary: #ffffff;
-  --icon-secondary: #ffff00;
-  --icon-muted: #d0d0d0;
-  --icon-accent: #66b3ff;
-  --icon-success: #00ff7f;
-  --icon-warning: #ffff66;
-  --icon-error: #ff4d4d;
-  --icon-info: #66b3ff;
-
-  --icon-file-folder: #ffff00;
-  --icon-file-code: #66b3ff;
-  --icon-file-data: #ff7fff;
-  --icon-file-doc: #ffffff;
-  --icon-file-media: #ff4d4d;
-  --icon-file-default: #ffffff;
-  --icon-git-staged: #00ff7f;
-  --icon-git-modified: #ffff66;
-  --icon-git-deleted: #ff4d4d;
-  --icon-git-untracked: #66b3ff;
-
-  --icon-surface-subtle: color-mix(in srgb, #ffffff 20%, var(--bg-surface));
-  --icon-surface-accent: color-mix(in srgb, #66b3ff 28%, var(--bg-surface));
-  --icon-surface-success: color-mix(in srgb, #00ff7f 28%, var(--bg-surface));
-  --icon-surface-warning: color-mix(in srgb, #ffff66 28%, var(--bg-surface));
-  --icon-surface-error: color-mix(in srgb, #ff4d4d 28%, var(--bg-surface));
-  --icon-surface-info: color-mix(in srgb, #66b3ff 28%, var(--bg-surface));
-
-  /* ========== Shadows ========== */
-  --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.55);
-  --shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.72);
-  --shadow-lg: 0 0 0 2px rgba(255, 255, 255, 0.72);
-  --shadow-xl: 0 0 0 3px rgba(255, 255, 255, 0.8);
-  --shadow-glow: 0 0 0 2px rgba(255, 255, 0, 0.52);
-
-  /* Scrollbar */
-  --scrollbar-thumb: #ffffff;
-}
-
-[data-theme="hc-light"] {
-  /* ========== Backgrounds ========== */
-  --bg-page: #ffffff;
-  --bg-surface: #ffffff;
-  --bg-sidebar: #ffffff;
-  --bg-terminal: #ffffff;
-  --bg-hover: #eef4ff;
-  --bg-active: #add6ff;
-  --bg-disabled: #f3f3f3;
-  --bg-input: #ffffff;
-
-  /* ========== Borders ========== */
-  --border: #000000;
-  --border-light: #5c5c5c;
-  --border-focus: #0037da;
-  --border-error: #b00020;
-
-  /* ========== Text ========== */
-  --text-primary: #000000;
-  --text-secondary: #111111;
-  --text-tertiary: #333333;
-  --text-muted: var(--text-tertiary);
-  --text-disabled: #5c5c5c;
-  --text-inverse: #ffffff;
-
-  /* ========== Accents ========== */
-  --accent-blue: #0037da;
-  --accent-green: #006b3c;
-  --accent-amber: #7a5c00;
-  --accent-pink: #b00020;
-  --accent-red: var(--color-error);
-  --accent-purple: #7a00cc;
-
-  /* ========== Semantic Colors ========== */
-  --color-success: #006b3c;
-  --color-warning: #7a5c00;
-  --color-error: #b00020;
-  --color-info: #0037da;
-  --bg-panel: color-mix(in srgb, var(--bg-surface) 92%, #f0f0f0);
-  --bg-elevated: color-mix(in srgb, var(--bg-surface) 96%, white 4%);
-
-  /* ========== Foundation: State / Surface / Overlay ========== */
-  --state-focus-ring-color: var(--border-focus);
+  --icon-git-staged: var(--status-success-fg);
+  --icon-git-modified: var(--status-warning-fg);
+  --icon-git-deleted: var(--status-danger-fg);
+  --icon-git-untracked: var(--status-info-fg);
+  --icon-surface-subtle: color-mix(in srgb, var(--text-secondary) 18%, var(--surface-panel));
+  --icon-surface-accent: color-mix(in srgb, var(--icon-accent) 24%, var(--surface-panel));
+  --icon-surface-success: color-mix(in srgb, var(--status-success-fg) 24%, var(--surface-panel));
+  --icon-surface-warning: color-mix(in srgb, var(--status-warning-fg) 24%, var(--surface-panel));
+  --icon-surface-error: color-mix(in srgb, var(--status-danger-fg) 24%, var(--surface-panel));
+  --icon-surface-info: color-mix(in srgb, var(--status-info-fg) 24%, var(--surface-panel));
+
+  --control-focus-ring: 0 0 0 calc(var(--state-focus-ring-width) * 2)
+    color-mix(in srgb, var(--border-focus) 35%, transparent);
+  --control-primary-bg: var(--status-info-fg);
+  --control-primary-bg-hover: color-mix(in srgb, var(--status-info-fg) 84%, white 16%);
+  --control-primary-fg: var(--text-inverse);
+  --control-secondary-bg: color-mix(in srgb, var(--surface-panel) 84%, var(--status-info-fg) 16%);
+  --control-secondary-bg-hover: color-mix(
+    in srgb,
+    var(--surface-hover) 72%,
+    var(--status-info-fg) 28%
+  );
+  --control-secondary-border: color-mix(
+    in srgb,
+    var(--border-default) 70%,
+    var(--status-info-fg) 30%
+  );
+  --control-secondary-border-hover: color-mix(
+    in srgb,
+    var(--border-subtle) 70%,
+    var(--status-info-fg) 30%
+  );
+  --control-ghost-bg-hover: var(--surface-hover);
+  --control-ghost-fg: var(--text-secondary);
+  --control-danger-bg: var(--status-danger-fg);
+  --control-danger-fg: var(--text-inverse);
+  --control-spinner-track: color-mix(in srgb, currentColor 30%, var(--surface-page) 70%);
+
+  --field-bg: var(--surface-page);
+  --field-border: var(--border-default);
+  --field-border-hover: var(--border-subtle);
+  --field-ring: 0 0 0 var(--state-focus-ring-width)
+    color-mix(in srgb, var(--border-focus) 40%, transparent);
+  --field-invalid-ring: 0 0 0 1px color-mix(in srgb, var(--border-danger) 70%, transparent 30%);
+  --kbd-surface: color-mix(in srgb, var(--surface-input) 82%, var(--surface-panel) 18%);
+  --menu-danger-hover-bg: color-mix(in srgb, var(--status-danger-fg) 10%, var(--surface-panel));
+
+  --tag-info-bg: color-mix(in srgb, var(--status-info-fg) 15%, transparent);
+  --tag-info-fg: var(--status-info-fg);
+  --tag-success-bg: color-mix(in srgb, var(--status-success-fg) 15%, transparent);
+  --tag-success-fg: var(--status-success-fg);
+  --tag-warning-bg: color-mix(in srgb, var(--status-warning-fg) 15%, transparent);
+  --tag-warning-fg: var(--status-warning-fg);
+  --tag-danger-bg: color-mix(in srgb, var(--status-danger-fg) 15%, transparent);
+  --tag-danger-fg: var(--status-danger-fg);
+  --tag-accent-bg: color-mix(in srgb, var(--text-secondary) 15%, transparent);
+  --tag-accent-fg: var(--text-secondary);
+
+  --status-dot-idle: var(--text-tertiary);
+  --status-dot-starting: var(--status-warning-fg);
+  --status-dot-running: var(--status-info-fg);
+  --status-dot-complete: var(--status-success-fg);
+  --status-dot-error: var(--status-danger-fg);
+  --status-dot-idle-ring: color-mix(in srgb, var(--status-dot-idle) 18%, transparent);
+  --status-dot-starting-ring: color-mix(in srgb, var(--status-dot-starting) 18%, transparent);
+  --status-dot-running-ring-1: color-mix(in srgb, var(--status-info-fg) 26%, transparent);
+  --status-dot-running-ring-2: color-mix(in srgb, var(--status-info-fg) 12%, transparent);
+  --status-dot-running-ring-3: color-mix(in srgb, var(--status-info-fg) 22%, transparent);
+  --status-dot-running-ring-ghost: color-mix(in srgb, var(--status-dot-running) 28%, transparent);
+  --status-dot-running-ring-outer: color-mix(in srgb, var(--status-dot-running) 34%, transparent);
+  --status-dot-complete-ring: color-mix(in srgb, var(--status-dot-complete) 18%, transparent);
+  --status-dot-error-ring: color-mix(in srgb, var(--status-dot-error) 18%, transparent);
+
+  /* ========== Centralized Derived Component Visual Tokens ========== */
+  --component-mix-surface-panel-98pct-transparent: color-mix(
+    in srgb,
+    var(--surface-panel) 98%,
+    transparent
+  );
+  --component-mix-surface-page-96pct-surface-panel-4pct: color-mix(
+    in srgb,
+    var(--surface-page) 96%,
+    var(--surface-panel) 4%
+  );
+  --component-mix-border-default-82pct-transparent: color-mix(
+    in srgb,
+    var(--border-default) 82%,
+    transparent
+  );
+  --component-mix-surface-panel-66pct-transparent: color-mix(
+    in srgb,
+    var(--surface-panel) 66%,
+    transparent
+  );
+  --component-mix-text-tertiary-92pct-surface-panel: color-mix(
+    in srgb,
+    var(--text-tertiary) 92%,
+    var(--surface-panel)
+  );
+  --component-mix-border-default-96pct-transparent: color-mix(
+    in srgb,
+    var(--border-default) 96%,
+    transparent
+  );
+  --component-mix-status-info-fg-12pct-surface-panel: color-mix(
+    in srgb,
+    var(--status-info-fg) 12%,
+    var(--surface-panel)
+  );
+  --component-mix-status-info-fg-14pct-surface-panel: color-mix(
+    in srgb,
+    var(--status-info-fg) 14%,
+    var(--surface-panel)
+  );
+  --component-mix-border-focus-64pct-transparent: color-mix(
+    in srgb,
+    var(--border-focus) 64%,
+    transparent
+  );
+  --component-mix-status-info-fg-52pct-text-secondary: color-mix(
+    in srgb,
+    var(--status-info-fg) 52%,
+    var(--text-secondary)
+  );
+  --component-mix-surface-panel-92pct-surface-page: color-mix(
+    in srgb,
+    var(--surface-panel) 92%,
+    var(--surface-page)
+  );
+  --component-mix-surface-panel-94pct-surface-page: color-mix(
+    in srgb,
+    var(--surface-panel) 94%,
+    var(--surface-page)
+  );
+  --component-mix-border-default-84pct-transparent: color-mix(
+    in srgb,
+    var(--border-default) 84%,
+    transparent
+  );
+  --component-mix-status-info-fg-10pct-surface-panel: color-mix(
+    in srgb,
+    var(--status-info-fg) 10%,
+    var(--surface-panel)
+  );
+  --component-mix-border-default-64pct-transparent: color-mix(
+    in srgb,
+    var(--border-default) 64%,
+    transparent
+  );
+  --component-mix-surface-page-82pct-surface-panel-18pct: color-mix(
+    in srgb,
+    var(--surface-page) 82%,
+    var(--surface-panel) 18%
+  );
+  --component-mix-border-default-76pct-transparent: color-mix(
+    in srgb,
+    var(--border-default) 76%,
+    transparent
+  );
+  --component-mix-surface-page-94pct-surface-panel-6pct: color-mix(
+    in srgb,
+    var(--surface-page) 94%,
+    var(--surface-panel) 6%
+  );
+  --component-mix-status-info-fg-72pct-transparent: color-mix(
+    in srgb,
+    var(--status-info-fg) 72%,
+    transparent
+  );
+  --component-mix-status-info-fg-74pct-text-primary: color-mix(
+    in srgb,
+    var(--status-info-fg) 74%,
+    var(--text-primary)
+  );
+  --component-mix-border-default-44pct-transparent: color-mix(
+    in srgb,
+    var(--border-default) 44%,
+    transparent
+  );
+  --component-mix-status-danger-fg-76pct-text-primary: color-mix(
+    in srgb,
+    var(--status-danger-fg) 76%,
+    var(--text-primary)
+  );
+  --component-mix-status-info-fg-42pct-border-default-58pct: color-mix(
+    in srgb,
+    var(--status-info-fg) 42%,
+    var(--border-default) 58%
+  );
+  --component-mix-status-info-fg-18pct-transparent: color-mix(
+    in srgb,
+    var(--status-info-fg) 18%,
+    transparent
+  );
+  --component-mix-state-info-text-55pct-transparent: color-mix(
+    in srgb,
+    var(--state-info-text) 55%,
+    transparent
+  );
+  --component-mix-state-info-bg-12pct-transparent: color-mix(
+    in srgb,
+    var(--state-info-bg) 12%,
+    transparent
+  );
+  --component-mix-state-info-text-18pct-transparent: color-mix(
+    in srgb,
+    var(--state-info-text) 18%,
+    transparent
+  );
+  --component-mix-border-default-78pct-transparent: color-mix(
+    in srgb,
+    var(--border-default) 78%,
+    transparent
+  );
+  --component-mix-surface-input-72pct-surface-panel-28pct: color-mix(
+    in srgb,
+    var(--surface-input) 72%,
+    var(--surface-panel) 28%
+  );
+  --component-mix-border-default-70pct-transparent: color-mix(
+    in srgb,
+    var(--border-default) 70%,
+    transparent
+  );
+  --component-mix-surface-panel-82pct-transparent: color-mix(
+    in srgb,
+    var(--surface-panel) 82%,
+    transparent
+  );
+  --component-mix-surface-panel-78pct-transparent: color-mix(
+    in srgb,
+    var(--surface-panel) 78%,
+    transparent
+  );
+  --component-mix-border-default-68pct-transparent: color-mix(
+    in srgb,
+    var(--border-default) 68%,
+    transparent
+  );
+  --component-mix-surface-panel-74pct-transparent: color-mix(
+    in srgb,
+    var(--surface-panel) 74%,
+    transparent
+  );
+  --component-mix-surface-input-82pct-surface-panel-18pct: color-mix(
+    in srgb,
+    var(--surface-input) 82%,
+    var(--surface-panel) 18%
+  );
+  --component-mix-surface-page-92pct-surface-input-8pct: color-mix(
+    in srgb,
+    var(--surface-page) 92%,
+    var(--surface-input) 8%
+  );
+  --component-mix-border-default-56pct-transparent: color-mix(
+    in srgb,
+    var(--border-default) 56%,
+    transparent
+  );
+  --component-mix-surface-page-78pct-surface-panel-22pct: color-mix(
+    in srgb,
+    var(--surface-page) 78%,
+    var(--surface-panel) 22%
+  );
+  --component-mix-surface-page-80pct-surface-panel-20pct: color-mix(
+    in srgb,
+    var(--surface-page) 80%,
+    var(--surface-panel) 20%
+  );
+  --component-mix-status-info-fg-28pct-border-default: color-mix(
+    in srgb,
+    var(--status-info-fg) 28%,
+    var(--border-default)
+  );
+  --component-mix-status-info-fg-8pct-surface-panel: color-mix(
+    in srgb,
+    var(--status-info-fg) 8%,
+    var(--surface-panel)
+  );
+  --component-mix-status-info-fg-42pct-border-default: color-mix(
+    in srgb,
+    var(--status-info-fg) 42%,
+    var(--border-default)
+  );
+  --component-mix-status-info-fg-84pct-text-primary: color-mix(
+    in srgb,
+    var(--status-info-fg) 84%,
+    var(--text-primary)
+  );
+  --component-mix-border-default-78pct-status-info-fg-22pct: color-mix(
+    in srgb,
+    var(--border-default) 78%,
+    var(--status-info-fg) 22%
+  );
+  --component-mix-surface-elevated-92pct-transparent: color-mix(
+    in srgb,
+    var(--surface-elevated) 92%,
+    transparent
+  );
+  --component-mix-border-default-68pct-status-warning-fg-32pct: color-mix(
+    in srgb,
+    var(--border-default) 68%,
+    var(--status-warning-fg) 32%
+  );
+  --component-mix-status-info-fg-24pct-transparent: color-mix(
+    in srgb,
+    var(--status-info-fg) 24%,
+    transparent
+  );
+  --component-mix-border-default-62pct-transparent: color-mix(
+    in srgb,
+    var(--border-default) 62%,
+    transparent
+  );
+  --component-mix-border-focus-58pct-transparent: color-mix(
+    in srgb,
+    var(--border-focus) 58%,
+    transparent
+  );
+  --component-mix-state-selected-bg-72pct-transparent: color-mix(
+    in srgb,
+    var(--state-selected-bg) 72%,
+    transparent
+  );
+  --component-mix-surface-page-97pct-surface-panel-3pct: color-mix(
+    in srgb,
+    var(--surface-page) 97%,
+    var(--surface-panel) 3%
+  );
+  --component-mix-status-info-fg-88pct-white-12pct: color-mix(
+    in srgb,
+    var(--status-info-fg) 88%,
+    white 12%
+  );
+  --component-mix-border-default-42pct-transparent: color-mix(
+    in srgb,
+    var(--border-default) 42%,
+    transparent
+  );
+  --component-mix-status-warning-fg-8pct-surface-panel: color-mix(
+    in srgb,
+    var(--status-warning-fg) 8%,
+    var(--surface-panel)
+  );
+  --component-mix-border-default-88pct-transparent: color-mix(
+    in srgb,
+    var(--border-default) 88%,
+    transparent
+  );
+  --component-mix-status-danger-fg-34pct-border-default: color-mix(
+    in srgb,
+    var(--status-danger-fg) 34%,
+    var(--border-default)
+  );
+  --component-mix-status-danger-fg-84pct-text-primary: color-mix(
+    in srgb,
+    var(--status-danger-fg) 84%,
+    var(--text-primary)
+  );
+  --component-mix-surface-panel-72pct-status-info-fg-28pct: color-mix(
+    in srgb,
+    var(--surface-panel) 72%,
+    var(--status-info-fg) 28%
+  );
+  --component-rgba-108-182-255-0-2: rgba(108, 182, 255, 0.2);
+  --component-rgba-241-184-106-0-2: rgba(241, 184, 106, 0.2);
+  --component-rgba-120-215-178-0-2: rgba(120, 215, 178, 0.2);
+  --component-mix-state-success-border-40pct-transparent: color-mix(
+    in srgb,
+    var(--state-success-border) 40%,
+    transparent
+  );
+  --component-mix-state-info-border-40pct-transparent: color-mix(
+    in srgb,
+    var(--state-info-border) 40%,
+    transparent
+  );
+  --component-mix-state-warning-border-40pct-transparent: color-mix(
+    in srgb,
+    var(--state-warning-border) 40%,
+    transparent
+  );
+  --component-mix-state-error-border-40pct-transparent: color-mix(
+    in srgb,
+    var(--state-error-border) 40%,
+    transparent
+  );
+  --component-mix-surface-hover-76pct-status-info-fg-24pct: color-mix(
+    in srgb,
+    var(--surface-hover) 76%,
+    var(--status-info-fg) 24%
+  );
+  --component-mix-surface-panel-90pct-surface-page-10pct: color-mix(
+    in srgb,
+    var(--surface-panel) 90%,
+    var(--surface-page) 10%
+  );
+  --component-mix-surface-panel-88pct-surface-page-12pct: color-mix(
+    in srgb,
+    var(--surface-panel) 88%,
+    var(--surface-page) 12%
+  );
+  --component-mix-surface-page-44pct-surface-panel-56pct: color-mix(
+    in srgb,
+    var(--surface-page) 44%,
+    var(--surface-panel) 56%
+  );
+  --component-mix-border-default-68pct-surface-page-32pct: color-mix(
+    in srgb,
+    var(--border-default) 68%,
+    var(--surface-page) 32%
+  );
+  --component-mix-status-info-fg-7pct-surface-panel-93pct: color-mix(
+    in srgb,
+    var(--status-info-fg) 7%,
+    var(--surface-panel) 93%
+  );
+  --component-mix-status-info-fg-16pct-transparent: color-mix(
+    in srgb,
+    var(--status-info-fg) 16%,
+    transparent
+  );
+  --component-mix-border-default-70pct-surface-page-30pct: color-mix(
+    in srgb,
+    var(--border-default) 70%,
+    var(--surface-page) 30%
+  );
+  --component-mix-surface-page-74pct-surface-panel-26pct: color-mix(
+    in srgb,
+    var(--surface-page) 74%,
+    var(--surface-panel) 26%
+  );
+  --component-mix-surface-page-82pct-transparent: color-mix(
+    in srgb,
+    var(--surface-page) 82%,
+    transparent
+  );
+  --component-mix-status-success-fg-60pct-border-default-40pct: color-mix(
+    in srgb,
+    var(--status-success-fg) 60%,
+    var(--border-default) 40%
+  );
+  --component-mix-status-success-fg-70pct-surface-panel-30pct: color-mix(
+    in srgb,
+    var(--status-success-fg) 70%,
+    var(--surface-panel) 30%
+  );
+  --component-mix-status-info-fg-62pct-border-default-38pct: color-mix(
+    in srgb,
+    var(--status-info-fg) 62%,
+    var(--border-default) 38%
+  );
+  --component-mix-status-info-fg-62pct-surface-panel-38pct: color-mix(
+    in srgb,
+    var(--status-info-fg) 62%,
+    var(--surface-panel) 38%
+  );
+  --component-mix-border-default-72pct-surface-page-28pct: color-mix(
+    in srgb,
+    var(--border-default) 72%,
+    var(--surface-page) 28%
+  );
+  --component-mix-surface-page-68pct-surface-panel-32pct: color-mix(
+    in srgb,
+    var(--surface-page) 68%,
+    var(--surface-panel) 32%
+  );
+  --component-mix-icon-file-data-16pct-surface-panel: color-mix(
+    in srgb,
+    var(--icon-file-data) 16%,
+    var(--surface-panel)
+  );
+  --component-mix-border-default-90pct-transparent: color-mix(
+    in srgb,
+    var(--border-default) 90%,
+    transparent
+  );
+  --component-mix-surface-panel-88pct-surface-hover: color-mix(
+    in srgb,
+    var(--surface-panel) 88%,
+    var(--surface-hover)
+  );
+  --component-mix-border-strong-72pct-border-default: color-mix(
+    in srgb,
+    var(--border-strong) 72%,
+    var(--border-default)
+  );
+  --component-mix-surface-panel-92pct-surface-hover: color-mix(
+    in srgb,
+    var(--surface-panel) 92%,
+    var(--surface-hover)
+  );
+  --component-mix-icon-success-42pct-transparent: color-mix(
+    in srgb,
+    var(--icon-success) 42%,
+    transparent
+  );
+  --component-mix-surface-active-78pct-status-warning-fg-22pct: color-mix(
+    in srgb,
+    var(--surface-active) 78%,
+    var(--status-warning-fg) 22%
+  );
+  --component-mix-state-info-bg-78pct-surface-panel-22pct: color-mix(
+    in srgb,
+    var(--state-info-bg) 78%,
+    var(--surface-panel) 22%
+  );
+  --component-mix-state-focus-ring-color-24pct-transparent: color-mix(
+    in srgb,
+    var(--state-focus-ring-color) 24%,
+    transparent
+  );
+  --component-mix-status-info-fg-78pct-white-22pct: color-mix(
+    in srgb,
+    var(--status-info-fg) 78%,
+    white 22%
+  );
+  --component-mix-status-info-fg-92pct-black-8pct: color-mix(
+    in srgb,
+    var(--status-info-fg) 92%,
+    black 8%
+  );
+  --component-mix-state-focus-ring-color-35pct-transparent: color-mix(
+    in srgb,
+    var(--state-focus-ring-color) 35%,
+    transparent
+  );
+  --component-mix-status-info-fg-84pct-white-16pct: color-mix(
+    in srgb,
+    var(--status-info-fg) 84%,
+    white 16%
+  );
+  --component-mix-surface-panel-84pct-status-info-fg-16pct: color-mix(
+    in srgb,
+    var(--surface-panel) 84%,
+    var(--status-info-fg) 16%
+  );
+  --component-mix-border-default-70pct-status-info-fg-30pct: color-mix(
+    in srgb,
+    var(--border-default) 70%,
+    var(--status-info-fg) 30%
+  );
+  --component-mix-surface-hover-72pct-status-info-fg-28pct: color-mix(
+    in srgb,
+    var(--surface-hover) 72%,
+    var(--status-info-fg) 28%
+  );
+  --component-mix-border-subtle-70pct-status-info-fg-30pct: color-mix(
+    in srgb,
+    var(--border-subtle) 70%,
+    var(--status-info-fg) 30%
+  );
+  --component-mix-state-focus-ring-color-40pct-transparent: color-mix(
+    in srgb,
+    var(--state-focus-ring-color) 40%,
+    transparent
+  );
+  --component-mix-status-info-fg-15pct-transparent: color-mix(
+    in srgb,
+    var(--status-info-fg) 15%,
+    transparent
+  );
+  --component-mix-status-success-fg-15pct-transparent: color-mix(
+    in srgb,
+    var(--status-success-fg) 15%,
+    transparent
+  );
+  --component-mix-status-warning-fg-15pct-transparent: color-mix(
+    in srgb,
+    var(--status-warning-fg) 15%,
+    transparent
+  );
+  --component-mix-status-danger-fg-15pct-transparent: color-mix(
+    in srgb,
+    var(--status-danger-fg) 15%,
+    transparent
+  );
+  --component-mix-text-tertiary-15pct-transparent: color-mix(
+    in srgb,
+    var(--text-tertiary) 15%,
+    transparent
+  );
+  --component-mix-surface-panel-95pct-status-info-fg-5pct: color-mix(
+    in srgb,
+    var(--surface-panel) 95%,
+    var(--status-info-fg) 5%
+  );
+  --component-rgba-108-182-255-0-06: rgba(108, 182, 255, 0.06);
+  --component-mix-status-info-fg-40pct-transparent: color-mix(
+    in srgb,
+    var(--status-info-fg) 40%,
+    transparent
+  );
+  --component-mix-border-focus-44pct-transparent-56pct: color-mix(
+    in srgb,
+    var(--border-focus) 44%,
+    transparent 56%
+  );
+  --component-mix-border-focus-44pct-transparent-56pct: color-mix(
+    in srgb,
+    var(--border-focus) 44%,
+    transparent 56%
+  );
+  --component-mix-state-selected-bg-80pct-transparent: color-mix(
+    in srgb,
+    var(--state-selected-bg) 80%,
+    transparent
+  );
+  --component-rgba-108-182-255-0-08: rgba(108, 182, 255, 0.08);
+  --component-mix-status-info-fg-white-20pct: color-mix(in srgb, var(--status-info-fg), white 20%);
+  --component-rgba-255-255-255-0-02: rgba(255, 255, 255, 0.02);
+  --component-rgba-108-182-255-0-05: rgba(108, 182, 255, 0.05);
+  --component-rgba-10-16-20-0-88: rgba(10, 16, 20, 0.88);
+  --component-mix-surface-hover-72pct-transparent: color-mix(
+    in srgb,
+    var(--surface-hover) 72%,
+    transparent
+  );
+  --component-rgba-255-255-255-0-04: rgba(255, 255, 255, 0.04);
+  --component-rgba-255-255-255-0-015: rgba(255, 255, 255, 0.015);
+  --component-mix-surface-input-92pct-surface-page-8pct: color-mix(
+    in srgb,
+    var(--surface-input) 92%,
+    var(--surface-page) 8%
+  );
+  --component-mix-border-subtle-68pct-status-info-fg-32pct: color-mix(
+    in srgb,
+    var(--border-subtle) 68%,
+    var(--status-info-fg) 32%
+  );
+  --component-mix-surface-input-90pct-surface-page-10pct: color-mix(
+    in srgb,
+    var(--surface-input) 90%,
+    var(--surface-page) 10%
+  );
+  --component-mix-surface-panel-90pct-surface-input-10pct: color-mix(
+    in srgb,
+    var(--surface-panel) 90%,
+    var(--surface-input) 10%
+  );
+  --component-mix-surface-hover-72pct-surface-panel-28pct: color-mix(
+    in srgb,
+    var(--surface-hover) 72%,
+    var(--surface-panel) 28%
+  );
+  --component-mix-status-info-fg-22pct-transparent: color-mix(
+    in srgb,
+    var(--status-info-fg) 22%,
+    transparent
+  );
+  --component-rgba-18-26-34-0-94: rgba(18, 26, 34, 0.94);
+  --component-rgba-11-18-24-0-98: rgba(11, 18, 24, 0.98);
+  --component-mix-border-subtle-66pct-status-info-fg-34pct: color-mix(
+    in srgb,
+    var(--border-subtle) 66%,
+    var(--status-info-fg) 34%
+  );
+  --component-mix-border-default-72pct-status-info-fg-28pct: color-mix(
+    in srgb,
+    var(--border-default) 72%,
+    var(--status-info-fg) 28%
+  );
+  --component-rgba-18-26-34-0-96: rgba(18, 26, 34, 0.96);
+  --component-rgba-14-21-28-0-92: rgba(14, 21, 28, 0.92);
+  --component-blur-12px: blur(12px);
+  --component-mix-border-subtle-64pct-status-info-fg-36pct: color-mix(
+    in srgb,
+    var(--border-subtle) 64%,
+    var(--status-info-fg) 36%
+  );
+  --component-mix-surface-input-96pct-white-4pct: color-mix(
+    in srgb,
+    var(--surface-input) 96%,
+    white 4%
+  );
+  --component-mix-surface-input-88pct-surface-page-12pct: color-mix(
+    in srgb,
+    var(--surface-input) 88%,
+    var(--surface-page) 12%
+  );
+  --component-hex-ff5f57: #ff5f57;
+  --component-hex-febc2e: #febc2e;
+  --component-hex-28c840: #28c840;
+  --component-mix-border-subtle-70pct-transparent: color-mix(
+    in srgb,
+    var(--border-subtle) 70%,
+    transparent
+  );
+  --component-rgba-255-255-255-0-06: rgba(255, 255, 255, 0.06);
+  --component-rgba-8-12-16-0-56: rgba(8, 12, 16, 0.56);
+  --component-mix-surface-panel-97pct-white-3pct: color-mix(
+    in srgb,
+    var(--surface-panel) 97%,
+    white 3%
+  );
+  --component-mix-surface-panel-84pct-surface-input-16pct: color-mix(
+    in srgb,
+    var(--surface-panel) 84%,
+    var(--surface-input) 16%
+  );
+  --component-mix-surface-active-90pct-white-10pct: color-mix(
+    in srgb,
+    var(--surface-active) 90%,
+    white 10%
+  );
+  --component-mix-surface-active-94pct-surface-panel-6pct: color-mix(
+    in srgb,
+    var(--surface-active) 94%,
+    var(--surface-panel) 6%
+  );
+  --component-mix-white-6pct-transparent: color-mix(in srgb, white 6%, transparent);
+  --component-mix-status-success-fg-12pct-transparent: color-mix(
+    in srgb,
+    var(--status-success-fg) 12%,
+    transparent
+  );
+  --component-mix-status-info-fg-82pct-white-18pct: color-mix(
+    in srgb,
+    var(--status-info-fg) 82%,
+    white 18%
+  );
+  --component-hex-081118: #081118;
+  --component-mix-border-subtle-72pct-transparent: color-mix(
+    in srgb,
+    var(--border-subtle) 72%,
+    transparent
+  );
+  --component-rgba-18-26-34-0-8: rgba(18, 26, 34, 0.8);
+  --component-rgba-14-21-28-0-28: rgba(14, 21, 28, 0.28);
+  --component-mix-text-tertiary-82pct-status-info-fg-18pct: color-mix(
+    in srgb,
+    var(--text-tertiary) 82%,
+    var(--status-info-fg) 18%
+  );
+  --component-mix-surface-panel-bg-96pct-transparent: color-mix(
+    in srgb,
+    var(--surface-panel-bg) 96%,
+    transparent
+  );
+  --component-mix-white-4pct-transparent: color-mix(in srgb, white 4%, transparent);
+  --component-mix-text-tertiary-78pct-status-info-fg-22pct: color-mix(
+    in srgb,
+    var(--text-tertiary) 78%,
+    var(--status-info-fg) 22%
+  );
+  --component-mix-status-dot-current-color-var-text-tertiary-12pct-transparent: color-mix(
+    in srgb,
+    var(--status-dot-current-color, var(--text-tertiary)) 12%,
+    transparent
+  );
+  --component-mix-terminal-state-running-border-32pct-transparent: color-mix(
+    in srgb,
+    var(--terminal-state-running-border) 32%,
+    transparent
+  );
+  --component-mix-surface-input-98pct-white-2pct: color-mix(
+    in srgb,
+    var(--surface-input) 98%,
+    white 2%
+  );
+  --component-rgba-120-215-178-0-08: rgba(120, 215, 178, 0.08);
+  --component-rgba-108-182-255-0-1: rgba(108, 182, 255, 0.1);
+  --component-rgba-17-24-31-0-96: rgba(17, 24, 31, 0.96);
+  --component-rgba-10-16-20-0-98: rgba(10, 16, 20, 0.98);
+  --component-mix-text-tertiary-80pct-status-info-fg-20pct: color-mix(
+    in srgb,
+    var(--text-tertiary) 80%,
+    var(--status-info-fg) 20%
+  );
+  --component-rgba-13-20-26-0-96: rgba(13, 20, 26, 0.96);
+  --component-rgba-8-13-18-0-98: rgba(8, 13, 18, 0.98);
+  --component-rgba-17-24-31-0-98: rgba(17, 24, 31, 0.98);
+  --component-rgba-13-20-26-0-92: rgba(13, 20, 26, 0.92);
+  --component-rgba-13-20-26-0-98: rgba(13, 20, 26, 0.98);
+  --component-rgba-9-15-20-1: rgba(9, 15, 20, 1);
+  --component-mix-state-success-border-32pct-transparent: color-mix(
+    in srgb,
+    var(--state-success-border) 32%,
+    transparent
+  );
+  --component-mix-surface-hover-74pct-surface-panel-26pct: color-mix(
+    in srgb,
+    var(--surface-hover) 74%,
+    var(--surface-panel) 26%
+  );
+  --component-rgba-255-255-255-0-08: rgba(255, 255, 255, 0.08);
+  --component-rgba-108-182-255-0-22: rgba(108, 182, 255, 0.22);
+  --component-mix-surface-active-88pct-surface-page-12pct: color-mix(
+    in srgb,
+    var(--surface-active) 88%,
+    var(--surface-page) 12%
+  );
+  --component-mix-current-color-22pct-transparent: color-mix(
+    in srgb,
+    currentColor 22%,
+    transparent
+  );
+  --component-mix-current-color-12pct-transparent: color-mix(
+    in srgb,
+    currentColor 12%,
+    transparent
+  );
+  --component-mix-white-8pct-transparent: color-mix(in srgb, white 8%, transparent);
+  --component-mix-current-color-10pct-transparent: color-mix(
+    in srgb,
+    currentColor 10%,
+    transparent
+  );
+  --component-mix-current-color-16pct-transparent: color-mix(
+    in srgb,
+    currentColor 16%,
+    transparent
+  );
+  --component-mix-white-50pct-transparent: color-mix(in srgb, white 50%, transparent);
+  --component-mix-current-color-8pct-transparent: color-mix(in srgb, currentColor 8%, transparent);
+  --component-rgba-43-60-75-0-94: rgba(43, 60, 75, 0.94);
+  --component-rgba-30-44-56-0-98: rgba(30, 44, 56, 0.98);
+  --component-mix-border-subtle-72pct-status-info-fg-28pct: color-mix(
+    in srgb,
+    var(--border-subtle) 72%,
+    var(--status-info-fg) 28%
+  );
+  --component-mix-text-tertiary-84pct-status-info-fg-16pct: color-mix(
+    in srgb,
+    var(--text-tertiary) 84%,
+    var(--status-info-fg) 16%
+  );
+  --component-mix-surface-panel-82pct-surface-page-18pct: color-mix(
+    in srgb,
+    var(--surface-panel) 82%,
+    var(--surface-page) 18%
+  );
+  --component-mix-border-default-80pct-status-info-fg-20pct: color-mix(
+    in srgb,
+    var(--border-default) 80%,
+    var(--status-info-fg) 20%
+  );
+  --component-mix-surface-active-86pct-white-14pct: color-mix(
+    in srgb,
+    var(--surface-active) 86%,
+    white 14%
+  );
+  --component-mix-white-22pct-transparent: color-mix(in srgb, white 22%, transparent);
+  --component-mix-surface-panel-94pct-white-6pct: color-mix(
+    in srgb,
+    var(--surface-panel) 94%,
+    white 6%
+  );
+  --component-mix-surface-input-88pct-surface-panel-12pct: color-mix(
+    in srgb,
+    var(--surface-input) 88%,
+    var(--surface-panel) 12%
+  );
+  --component-mix-surface-input-94pct-white-6pct: color-mix(
+    in srgb,
+    var(--surface-input) 94%,
+    white 6%
+  );
+  --component-mix-surface-input-100pct-transparent: color-mix(
+    in srgb,
+    var(--surface-input) 100%,
+    transparent
+  );
+  --component-mix-surface-input-84pct-surface-page-16pct: color-mix(
+    in srgb,
+    var(--surface-input) 84%,
+    var(--surface-page) 16%
+  );
+  --component-mix-status-info-fg-16pct-white-22pct: color-mix(
+    in srgb,
+    var(--status-info-fg) 16%,
+    white 22%
+  );
+  --component-mix-session-focus-pulse-color-60pct-transparent: color-mix(
+    in srgb,
+    var(--session-focus-pulse-color) 60%,
+    transparent
+  );
+  --component-mix-session-focus-pulse-color-0pct-transparent: color-mix(
+    in srgb,
+    var(--session-focus-pulse-color) 0%,
+    transparent
+  );
+  --component-mix-session-focus-pulse-color-45pct-transparent: color-mix(
+    in srgb,
+    var(--session-focus-pulse-color) 45%,
+    transparent
+  );
+  --component-mix-surface-panel-78pct-status-info-fg-22pct: color-mix(
+    in srgb,
+    var(--surface-panel) 78%,
+    var(--status-info-fg) 22%
+  );
+  --component-mix-surface-panel-70pct-status-info-fg-30pct: color-mix(
+    in srgb,
+    var(--surface-panel) 70%,
+    var(--status-info-fg) 30%
+  );
+  --component-mix-surface-panel-88pct-transparent-12pct: color-mix(
+    in srgb,
+    var(--surface-panel) 88%,
+    transparent 12%
+  );
+  --component-mix-surface-panel-92pct-surface-hover-8pct: color-mix(
+    in srgb,
+    var(--surface-panel) 92%,
+    var(--surface-hover) 8%
+  );
+  --component-mix-status-danger-fg-10pct-surface-panel: color-mix(
+    in srgb,
+    var(--status-danger-fg) 10%,
+    var(--surface-panel)
+  );
+  --component-rgba-108-182-255-0-12: rgba(108, 182, 255, 0.12);
+  --component-mix-surface-panel-24pct-transparent: color-mix(
+    in srgb,
+    var(--surface-panel) 24%,
+    transparent
+  );
+  --component-mix-text-secondary-88pct-status-info-fg-12pct: color-mix(
+    in srgb,
+    var(--text-secondary) 88%,
+    var(--status-info-fg) 12%
+  );
+  --component-mix-status-warning-fg-36pct-border-default: color-mix(
+    in srgb,
+    var(--status-warning-fg) 36%,
+    var(--border-default)
+  );
+  --component-mix-status-warning-fg-12pct-surface-panel: color-mix(
+    in srgb,
+    var(--status-warning-fg) 12%,
+    var(--surface-panel)
+  );
+  --component-mix-status-danger-fg-42pct-border-default: color-mix(
+    in srgb,
+    var(--status-danger-fg) 42%,
+    var(--border-default)
+  );
+  --component-mix-surface-page-98pct-transparent: color-mix(
+    in srgb,
+    var(--surface-page) 98%,
+    transparent
+  );
+  --component-mix-text-tertiary-24pct-transparent: color-mix(
+    in srgb,
+    var(--text-tertiary) 24%,
+    transparent
+  );
+  --component-mix-border-default-86pct-transparent: color-mix(
+    in srgb,
+    var(--border-default) 86%,
+    transparent
+  );
+  --component-mix-surface-panel-90pct-transparent: color-mix(
+    in srgb,
+    var(--surface-panel) 90%,
+    transparent
+  );
+  --component-mix-status-info-fg-46pct-border-default: color-mix(
+    in srgb,
+    var(--status-info-fg) 46%,
+    var(--border-default)
+  );
+  --component-mix-status-info-fg-34pct-border-default: color-mix(
+    in srgb,
+    var(--status-info-fg) 34%,
+    var(--border-default)
+  );
+  --component-mix-border-default-74pct-transparent: color-mix(
+    in srgb,
+    var(--border-default) 74%,
+    transparent
+  );
+  --component-mix-status-info-fg-6pct-surface-page-94pct: color-mix(
+    in srgb,
+    var(--status-info-fg) 6%,
+    var(--surface-page) 94%
+  );
+  --component-mix-surface-page-98pct-surface-panel-2pct: color-mix(
+    in srgb,
+    var(--surface-page) 98%,
+    var(--surface-panel) 2%
+  );
+  --component-mix-text-tertiary-88pct-surface-panel: color-mix(
+    in srgb,
+    var(--text-tertiary) 88%,
+    var(--surface-panel)
+  );
+  --component-mix-surface-panel-96pct-transparent: color-mix(
+    in srgb,
+    var(--surface-panel) 96%,
+    transparent
+  );
+  --component-mix-fg-white-8pct-transparent: color-mix(in srgb, var(--fg-white) 8%, transparent);
+  --component-mix-surface-page-42pct-transparent: color-mix(
+    in srgb,
+    var(--surface-page) 42%,
+    transparent
+  );
+  --component-mix-surface-panel-96pct-surface-page: color-mix(
+    in srgb,
+    var(--surface-panel) 96%,
+    var(--surface-page)
+  );
+  --component-mix-fg-white-6pct-transparent: color-mix(in srgb, var(--fg-white) 6%, transparent);
+  --component-mix-status-info-fg-52pct-transparent: color-mix(
+    in srgb,
+    var(--status-info-fg) 52%,
+    transparent
+  );
+  --component-mix-status-info-fg-86pct-surface-panel: color-mix(
+    in srgb,
+    var(--status-info-fg) 86%,
+    var(--surface-panel)
+  );
+  --component-mix-surface-page-0pct-transparent: color-mix(
+    in srgb,
+    var(--surface-page) 0%,
+    transparent
+  );
+  --component-mix-border-default-80pct-transparent: color-mix(
+    in srgb,
+    var(--border-default) 80%,
+    transparent
+  );
+  --component-mix-surface-panel-88pct-surface-page: color-mix(
+    in srgb,
+    var(--surface-panel) 88%,
+    var(--surface-page)
+  );
+  --component-mix-fg-white-5pct-transparent: color-mix(in srgb, var(--fg-white) 5%, transparent);
+  --component-mix-surface-page-20pct-transparent: color-mix(
+    in srgb,
+    var(--surface-page) 20%,
+    transparent
+  );
+  --component-mix-text-secondary-86pct-status-info-fg-14pct: color-mix(
+    in srgb,
+    var(--text-secondary) 86%,
+    var(--status-info-fg) 14%
+  );
+  --component-mix-fg-white-4pct-transparent: color-mix(in srgb, var(--fg-white) 4%, transparent);
+  --component-mix-status-info-fg-30pct-border-default: color-mix(
+    in srgb,
+    var(--status-info-fg) 30%,
+    var(--border-default)
+  );
+  --component-mix-border-default-72pct-transparent: color-mix(
+    in srgb,
+    var(--border-default) 72%,
+    transparent
+  );
+  --component-mix-surface-page-76pct-surface-panel-24pct: color-mix(
+    in srgb,
+    var(--surface-page) 76%,
+    var(--surface-panel) 24%
+  );
+  --component-mix-surface-page-92pct-surface-panel-8pct: color-mix(
+    in srgb,
+    var(--surface-page) 92%,
+    var(--surface-panel) 8%
+  );
+  --component-mix-surface-page-18pct-transparent: color-mix(
+    in srgb,
+    var(--surface-page) 18%,
+    transparent
+  );
+  --component-mix-status-info-fg-12pct-surface-page: color-mix(
+    in srgb,
+    var(--status-info-fg) 12%,
+    var(--surface-page)
+  );
+  --component-mix-surface-input-96pct-surface-page: color-mix(
+    in srgb,
+    var(--surface-input) 96%,
+    var(--surface-page)
+  );
+  --component-mix-border-default-66pct-transparent: color-mix(
+    in srgb,
+    var(--border-default) 66%,
+    transparent
+  );
+  --component-mix-border-default-62pct-status-info-fg-38pct: color-mix(
+    in srgb,
+    var(--border-default) 62%,
+    var(--status-info-fg) 38%
+  );
+  --component-mix-border-default-54pct-transparent: color-mix(
+    in srgb,
+    var(--border-default) 54%,
+    transparent
+  );
+  --component-mix-surface-panel-64pct-status-info-fg-12pct: color-mix(
+    in srgb,
+    var(--surface-panel) 64%,
+    var(--status-info-fg) 12%
+  );
+  --component-mix-status-info-fg-76pct-transparent: color-mix(
+    in srgb,
+    var(--status-info-fg) 76%,
+    transparent
+  );
+  --component-mix-status-info-fg-14pct-transparent: color-mix(
+    in srgb,
+    var(--status-info-fg) 14%,
+    transparent
+  );
+  --component-mix-surface-panel-78pct-surface-page: color-mix(
+    in srgb,
+    var(--surface-panel) 78%,
+    var(--surface-page)
+  );
+  --component-mix-surface-hover-84pct-transparent: color-mix(
+    in srgb,
+    var(--surface-hover) 84%,
+    transparent
+  );
+  --component-mix-surface-panel-88pct-transparent: color-mix(
+    in srgb,
+    var(--surface-panel) 88%,
+    transparent
+  );
+  --component-mix-surface-page-16pct-transparent: color-mix(
+    in srgb,
+    var(--surface-page) 16%,
+    transparent
+  );
+  --component-mix-status-info-fg-10pct-surface-page: color-mix(
+    in srgb,
+    var(--status-info-fg) 10%,
+    var(--surface-page)
+  );
+  --component-mix-surface-panel-92pct-surface-elevated: color-mix(
+    in srgb,
+    var(--surface-panel) 92%,
+    var(--surface-elevated)
+  );
+  --component-mix-status-info-fg-12pct-transparent: color-mix(
+    in srgb,
+    var(--status-info-fg) 12%,
+    transparent
+  );
+  --component-mix-status-info-fg-8pct-transparent: color-mix(
+    in srgb,
+    var(--status-info-fg) 8%,
+    transparent
+  );
+  --component-mix-status-danger-fg-82pct-text-primary: color-mix(
+    in srgb,
+    var(--status-danger-fg) 82%,
+    var(--text-primary)
+  );
+  --component-mix-surface-panel-76pct-transparent: color-mix(
+    in srgb,
+    var(--surface-panel) 76%,
+    transparent
+  );
+  --component-mix-status-danger-fg-8pct-transparent: color-mix(
+    in srgb,
+    var(--status-danger-fg) 8%,
+    transparent
+  );
+  --component-mix-status-info-fg-26pct-transparent: color-mix(
+    in srgb,
+    var(--status-info-fg) 26%,
+    transparent
+  );
+  --component-mix-surface-panel-80pct-transparent: color-mix(
+    in srgb,
+    var(--surface-panel) 80%,
+    transparent
+  );
+  --component-mix-surface-hover-82pct-transparent: color-mix(
+    in srgb,
+    var(--surface-hover) 82%,
+    transparent
+  );
+  --component-mix-status-info-fg-10pct-transparent: color-mix(
+    in srgb,
+    var(--status-info-fg) 10%,
+    transparent
+  );
+  --component-mix-surface-page-95pct-surface-panel-5pct: color-mix(
+    in srgb,
+    var(--surface-page) 95%,
+    var(--surface-panel) 5%
+  );
+  --component-mix-surface-panel-96pct-surface-page-4pct: color-mix(
+    in srgb,
+    var(--surface-panel) 96%,
+    var(--surface-page) 4%
+  );
+  --component-mix-surface-panel-90pct-status-info-fg-10pct: color-mix(
+    in srgb,
+    var(--surface-panel) 90%,
+    var(--status-info-fg) 10%
+  );
+  --component-mix-border-default-36pct-transparent: color-mix(
+    in srgb,
+    var(--border-default) 36%,
+    transparent
+  );
+  --component-mix-icon-surface-subtle-82pct-surface-panel: color-mix(
+    in srgb,
+    var(--icon-surface-subtle) 82%,
+    var(--surface-panel)
+  );
+  --component-mix-status-info-fg-35pct-transparent: color-mix(
+    in srgb,
+    var(--status-info-fg) 35%,
+    transparent
+  );
+  --component-mix-status-info-fg-70pct-transparent: color-mix(
+    in srgb,
+    var(--status-info-fg) 70%,
+    transparent
+  );
+  --component-mix-surface-panel-90pct-surface-page: color-mix(
+    in srgb,
+    var(--surface-panel) 90%,
+    var(--surface-page)
+  );
+  --component-mix-surface-hover-92pct-transparent: color-mix(
+    in srgb,
+    var(--surface-hover) 92%,
+    transparent
+  );
+  --component-mix-status-info-fg-44pct-transparent: color-mix(
+    in srgb,
+    var(--status-info-fg) 44%,
+    transparent
+  );
+  --component-mix-surface-hover-88pct-transparent: color-mix(
+    in srgb,
+    var(--surface-hover) 88%,
+    transparent
+  );
+  --component-mix-state-selected-bg-76pct-transparent: color-mix(
+    in srgb,
+    var(--state-selected-bg) 76%,
+    transparent
+  );
+  --component-mix-surface-hover-90pct-transparent: color-mix(
+    in srgb,
+    var(--surface-hover) 90%,
+    transparent
+  );
+  --component-mix-status-success-fg-78pct-white-22pct: color-mix(
+    in srgb,
+    var(--status-success-fg) 78%,
+    white 22%
+  );
+  --component-mix-status-warning-fg-88pct-white-12pct: color-mix(
+    in srgb,
+    var(--status-warning-fg) 88%,
+    white 12%
+  );
+  --component-mix-status-info-fg-80pct-white-20pct: color-mix(
+    in srgb,
+    var(--status-info-fg) 80%,
+    white 20%
+  );
+  --component-hex-0b1020: #0b1020;
+  --component-mix-status-info-fg-90pct-white-10pct: color-mix(
+    in srgb,
+    var(--status-info-fg) 90%,
+    white 10%
+  );
+  --component-mix-status-success-fg-88pct-white-12pct: color-mix(
+    in srgb,
+    var(--status-success-fg) 88%,
+    white 12%
+  );
+  --component-mix-status-danger-fg-82pct-white-18pct: color-mix(
+    in srgb,
+    var(--status-danger-fg) 82%,
+    white 18%
+  );
+  --component-hex-b8a6e0: #b8a6e0;
+  --component-hex-8a8a93: #8a8a93;
+  --component-mix-text-tertiary-88pct-transparent: color-mix(
+    in srgb,
+    var(--text-tertiary) 88%,
+    transparent
+  );
+  --component-mix-status-info-fg-74pct-transparent: color-mix(
+    in srgb,
+    var(--status-info-fg) 74%,
+    transparent
+  );
+  --component-mix-status-info-fg-20pct-transparent: color-mix(
+    in srgb,
+    var(--status-info-fg) 20%,
+    transparent
+  );
+  --component-mix-surface-panel-50pct-surface-page-50pct: color-mix(
+    in srgb,
+    var(--surface-panel) 50%,
+    var(--surface-page) 50%
+  );
+  --component-mix-status-info-fg-85pct-white: color-mix(in srgb, var(--status-info-fg) 85%, white);
+  --component-mix-border-focus-84pct-transparent: color-mix(
+    in srgb,
+    var(--border-focus) 84%,
+    transparent
+  );
+  --component-mix-border-focus-76pct-transparent: color-mix(
+    in srgb,
+    var(--border-focus) 76%,
+    transparent
+  );
+  /* ========== End Derived Component Visual Tokens ========== */
+
+  /* Foundation compatibility */
+  --state-focus-ring-color: #6cb6ff;
   --state-focus-ring-offset: 2px;
   --state-focus-ring-width: 2px;
-  --state-hover-bg: var(--bg-hover);
-  --state-hover-border: var(--border-light);
+  --state-hover-bg: var(--surface-hover);
+  --state-hover-border: var(--border-subtle);
   --state-hover-text: var(--text-primary);
-  --state-active-bg: var(--bg-active);
-  --state-selected-bg: color-mix(in srgb, var(--accent-blue) 18%, var(--bg-surface));
-  --state-selected-border: color-mix(in srgb, var(--accent-blue) 44%, var(--border));
+  --state-active-bg: var(--surface-active);
+  --state-selected-bg: color-mix(in srgb, var(--status-info-fg) 20%, var(--surface-page));
+  --state-selected-border: color-mix(in srgb, var(--status-info-fg) 52%, var(--border-default));
   --state-selected-text: var(--text-primary);
-  --state-disabled-bg: var(--bg-disabled);
-  --state-disabled-border: var(--border-light);
+  --state-disabled-bg: var(--surface-disabled);
+  --state-disabled-border: var(--border-default);
   --state-disabled-text: var(--text-disabled);
-  --state-success-bg: color-mix(in srgb, var(--color-success) 16%, var(--bg-surface));
-  --state-success-border: color-mix(in srgb, var(--color-success) 38%, var(--border));
-  --state-success-text: var(--color-success);
-  --state-warning-bg: color-mix(in srgb, var(--color-warning) 16%, var(--bg-surface));
-  --state-warning-border: color-mix(in srgb, var(--color-warning) 38%, var(--border));
-  --state-warning-text: var(--color-warning);
-  --state-error-bg: color-mix(in srgb, var(--color-error) 16%, var(--bg-surface));
-  --state-error-border: color-mix(in srgb, var(--color-error) 38%, var(--border));
-  --state-error-text: var(--color-error);
-  --state-info-bg: color-mix(in srgb, var(--color-info) 16%, var(--bg-surface));
-  --state-info-border: color-mix(in srgb, var(--color-info) 38%, var(--border));
-  --state-info-text: var(--color-info);
-  --surface-canvas: var(--bg-page);
-  --surface-panel: var(--bg-panel);
-  --surface-panel-border: var(--border);
-  --surface-elevated: var(--bg-elevated);
-  --surface-elevated-border: var(--border-light);
-  --surface-input: var(--bg-input);
-  --surface-input-border: var(--border);
-  --surface-muted: var(--bg-sidebar);
-  --surface-inverse: var(--text-inverse);
-  --overlay-backdrop: color-mix(in srgb, #000000 20%, transparent);
-  --overlay-scrim: color-mix(in srgb, #000000 30%, transparent);
-  --overlay-panel: var(--bg-elevated);
-  --overlay-panel-border: var(--border-light);
-  --overlay-local-backdrop: color-mix(in srgb, #000000 14%, transparent);
-  --overlay-local-panel: var(--bg-panel);
-  --overlay-local-panel-border: var(--border);
-
-  /* ========== Icon Tokens ========== */
-  --icon-primary: #000000;
-  --icon-secondary: #111111;
-  --icon-muted: #333333;
-  --icon-accent: #0037da;
-  --icon-success: #006b3c;
-  --icon-warning: #7a5c00;
-  --icon-error: #b00020;
-  --icon-info: #0037da;
-
-  --icon-file-folder: #7a5c00;
-  --icon-file-code: #0037da;
-  --icon-file-data: #7a00cc;
-  --icon-file-doc: #000000;
-  --icon-file-media: #b00020;
-  --icon-file-default: #111111;
-  --icon-git-staged: #006b3c;
-  --icon-git-modified: #7a5c00;
-  --icon-git-deleted: #b00020;
-  --icon-git-untracked: #0037da;
-
-  --icon-surface-subtle: color-mix(in srgb, #000000 12%, var(--bg-surface));
-  --icon-surface-accent: color-mix(in srgb, #0037da 18%, var(--bg-surface));
-  --icon-surface-success: color-mix(in srgb, #006b3c 18%, var(--bg-surface));
-  --icon-surface-warning: color-mix(in srgb, #7a5c00 18%, var(--bg-surface));
-  --icon-surface-error: color-mix(in srgb, #b00020 18%, var(--bg-surface));
-  --icon-surface-info: color-mix(in srgb, #0037da 18%, var(--bg-surface));
-
-  /* ========== Shadows ========== */
-  --shadow-sm: 0 0 0 1px rgba(0, 0, 0, 0.18);
-  --shadow-md: 0 0 0 1px rgba(0, 0, 0, 0.3);
-  --shadow-lg: 0 0 0 2px rgba(0, 0, 0, 0.32);
-  --shadow-xl: 0 0 0 3px rgba(0, 0, 0, 0.36);
-  --shadow-glow: 0 0 0 2px rgba(0, 55, 218, 0.3);
-
-  /* Scrollbar */
-  --scrollbar-thumb: #5c5c5c;
-}
-
-[data-theme="mint-dark"] {
-  --gap-content: var(--sp-3);
-  --radius-overlay: var(--radius-xl);
-  --state-focus-ring-color: #6cb6ff;
+  --state-success-bg: var(--status-success-bg);
+  --state-success-border: var(--status-success-border);
+  --state-success-text: var(--status-success-fg);
+  --state-success-icon: var(--status-success-icon);
+  --state-warning-bg: var(--status-warning-bg);
+  --state-warning-border: var(--status-warning-border);
+  --state-warning-text: var(--status-warning-fg);
+  --state-warning-icon: var(--status-warning-icon);
+  --state-error-bg: var(--status-danger-bg);
+  --state-error-border: var(--status-danger-border);
+  --state-error-text: var(--status-danger-fg);
+  --state-error-icon: var(--status-danger-icon);
+  --state-info-bg: var(--status-info-bg);
+  --state-info-border: var(--status-info-border);
+  --state-info-text: var(--status-info-fg);
+  --state-info-icon: var(--status-info-icon);
+
+  --surface-canvas: var(--surface-page);
+  --surface-panel-border: var(--border-default);
+  --surface-elevated-border: var(--border-subtle);
+  --surface-input-border: var(--border-default);
+  --surface-inverse: var(--text-primary);
+  --overlay-backdrop: color-mix(in srgb, var(--surface-page) 68%, transparent);
+  --overlay-scrim: color-mix(in srgb, var(--surface-page) 82%, transparent);
+  --overlay-panel: var(--surface-elevated);
+  --overlay-panel-border: var(--border-subtle);
+  --overlay-local-backdrop: color-mix(in srgb, var(--surface-page) 54%, transparent);
+  --overlay-local-panel: var(--surface-panel);
+  --overlay-local-panel-border: var(--border-default);
+  --surface-page-bg: var(--surface-page);
+  --surface-panel-bg: var(--surface-panel);
+  --surface-elevated-bg: var(--surface-elevated);
   --surface-overlay-bg: color-mix(in srgb, #131b22 96%, transparent);
+  --surface-overlay-border: var(--border-default);
+  --surface-overlay-shadow: var(--shadow-lg);
+  --surface-overlay-backdrop: color-mix(in srgb, var(--surface-page) 72%, black 28%);
+  --surface-sticky-bg: color-mix(in srgb, var(--surface-page) 96%, var(--surface-panel) 4%);
+  --overlay-width-sm: 360px;
+  --overlay-width-md: 480px;
+  --overlay-width-lg: 680px;
+  --overlay-backdrop-opacity: 0.48;
+
+  --ws-backdrop-filter: var(--material-backdrop-filter);
+  --ws-content-bg: var(--workspace-content-surface);
+  --ws-level-0: transparent;
+  --ws-level-1: color-mix(
+    in srgb,
+    var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.96) * 40%),
+    transparent
+  );
+  --ws-level-2: color-mix(
+    in srgb,
+    var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.96) * 56%),
+    transparent
+  );
+  --ws-level-3: color-mix(
+    in srgb,
+    var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.96) * 72%),
+    transparent
+  );
+  --ws-level-4: color-mix(
+    in srgb,
+    var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.96) * 88%),
+    transparent
+  );
+  /* Existing compatibility tokens */
+  --diff-removed-bg: var(--status-danger-bg);
+  --diff-removed-border: var(--status-danger-border);
+  --diff-add-bg: var(--diff-added-bg);
+  --diff-modify-bg: var(--diff-modified-bg);
+  --diff-delete-bg: var(--diff-deleted-bg);
+  --text-muted: var(--text-tertiary);
+  --accent-purple: #c792ea;
 }
 
 [data-theme="mint-light"] {
-  --gap-content: var(--sp-3);
-  --radius-overlay: var(--radius-xl);
+  --ref-fg-0: #1f2328;
+  --ref-fg-1: #557067;
+  --ref-fg-2: #8b949e;
+  --ref-fg-3: #6e7681;
+  --ref-fg-inverse: #ffffff;
+  --ref-bg-0: #f3fbf7;
+  --ref-bg-1: #fcfffd;
+  --ref-bg-2: #edf7f2;
+  --ref-bg-3: #f0f3f6;
+  --ref-bg-4: #ddefe5;
+  --ref-bg-5: #d1e8dc;
+  --ref-bg-6: #c7d8cf;
+  --ref-border-0: #c7d8cf;
+  --ref-border-1: #d8e7df;
+  --ref-border-2: #b8ccc1;
+  --ref-border-focus: #158f77;
+  --ref-border-danger: #cf222e;
+  --ref-status-success: #1a7f37;
+  --ref-status-warning: #9a6700;
+  --ref-status-danger: #cf222e;
+  --ref-status-info: #148a7a;
+
+  --surface-panel: color-mix(in srgb, var(--ref-bg-1) 92%, var(--ref-bg-2));
+  --surface-elevated: color-mix(in srgb, var(--ref-bg-1) 96%, white 4%);
+  --status-success-bg: color-mix(in srgb, var(--ref-status-success) 14%, var(--surface-page));
+  --status-success-border: color-mix(in srgb, var(--ref-status-success) 36%, var(--border-default));
+  --status-warning-bg: color-mix(in srgb, var(--ref-status-warning) 14%, var(--surface-page));
+  --status-warning-border: color-mix(in srgb, var(--ref-status-warning) 36%, var(--border-default));
+  --status-danger-bg: color-mix(in srgb, var(--ref-status-danger) 14%, var(--surface-page));
+  --status-danger-border: color-mix(in srgb, var(--ref-status-danger) 36%, var(--border-default));
+  --status-info-bg: color-mix(in srgb, var(--ref-status-info) 14%, var(--surface-page));
+  --status-info-border: color-mix(in srgb, var(--ref-status-info) 36%, var(--border-default));
+
   --state-focus-ring-color: #158f77;
+  --state-selected-bg: color-mix(in srgb, var(--status-info-fg) 16%, var(--surface-page));
+  --state-selected-border: color-mix(in srgb, var(--status-info-fg) 42%, var(--border-default));
+  --surface-inverse: var(--text-inverse);
+  --overlay-backdrop: color-mix(in srgb, #0f172a 26%, transparent);
+  --overlay-scrim: color-mix(in srgb, #0f172a 40%, transparent);
+  --overlay-local-backdrop: color-mix(in srgb, #0f172a 18%, transparent);
   --surface-overlay-bg: color-mix(in srgb, #ffffff 96%, transparent);
+  --surface-overlay-backdrop: color-mix(in srgb, #0f172a 26%, transparent);
+
+  --icon-accent: #148a7a;
+  --icon-file-folder: #1f9d7f;
+  --icon-file-code: #1373a5;
+  --icon-file-data: var(--accent-purple);
+  --icon-file-doc: #567065;
+  --icon-file-media: #c65f80;
+  --icon-surface-subtle: color-mix(in srgb, var(--text-secondary) 16%, var(--surface-panel));
+  --icon-surface-accent: color-mix(in srgb, var(--icon-accent) 18%, var(--surface-panel));
+  --icon-surface-success: color-mix(in srgb, var(--status-success-fg) 18%, var(--surface-panel));
+  --icon-surface-warning: color-mix(in srgb, var(--status-warning-fg) 18%, var(--surface-panel));
+  --icon-surface-error: color-mix(in srgb, var(--status-danger-fg) 18%, var(--surface-panel));
+  --icon-surface-info: color-mix(in srgb, var(--status-info-fg) 18%, var(--surface-panel));
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
+  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15);
+  --shadow-glow: 0 0 12px rgba(21, 143, 119, 0.18);
+
+  --accent-purple: #8250df;
 }
 
 [data-theme="graphite-dark"] {
-  --gap-content: var(--sp-3);
-  --radius-overlay: var(--radius-xl);
+  --ref-fg-0: #e6e6e6;
+  --ref-fg-1: #a8b0ba;
+  --ref-fg-2: #7d8590;
+  --ref-fg-3: #5d6672;
+  --ref-fg-inverse: #111317;
+  --ref-bg-0: #0d1014;
+  --ref-bg-1: #14171c;
+  --ref-bg-2: #101318;
+  --ref-bg-3: #161a20;
+  --ref-bg-4: #1c2026;
+  --ref-bg-5: #252b33;
+  --ref-bg-6: #313842;
+  --ref-border-0: #2a3038;
+  --ref-border-1: #353c46;
+  --ref-border-2: #434c55;
+  --ref-border-focus: #9bb8ff;
+  --ref-border-danger: #ffa198;
+  --ref-status-success: #8ddb8c;
+  --ref-status-warning: #dcb86a;
+  --ref-status-danger: #ff7b72;
+  --ref-status-info: #7aa2f7;
+
   --state-focus-ring-color: #9bb8ff;
   --surface-overlay-bg: color-mix(in srgb, #1a1f27 96%, transparent);
+
+  --icon-accent: #8fb1ff;
+  --icon-file-folder: #e1b86b;
+  --icon-file-doc: #c5ccd6;
+  --icon-file-media: #ff9f99;
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.42);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.54);
+  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.64);
+  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.74);
+  --shadow-glow: 0 0 12px rgba(122, 162, 247, 0.24);
+
+  --accent-purple: #c099ff;
 }
 
 [data-theme="graphite-light"] {
-  --gap-content: var(--sp-3);
-  --radius-overlay: var(--radius-xl);
+  --ref-fg-0: #1f2933;
+  --ref-fg-1: #4d5b6a;
+  --ref-fg-2: #7b8794;
+  --ref-fg-3: #9aa5b1;
+  --ref-fg-inverse: #ffffff;
+  --ref-bg-0: #e7edf3;
+  --ref-bg-1: #ffffff;
+  --ref-bg-2: #dfe6ee;
+  --ref-bg-3: #eef2f6;
+  --ref-bg-4: #d4dce5;
+  --ref-bg-5: #c8d1dc;
+  --ref-bg-6: #b8c3cf;
+  --ref-border-0: #b8c3cf;
+  --ref-border-1: #ccd5de;
+  --ref-border-2: #aab7c6;
+  --ref-border-focus: #315fdd;
+  --ref-border-danger: #d14343;
+  --ref-status-success: #15803d;
+  --ref-status-warning: #a16207;
+  --ref-status-danger: #d14343;
+  --ref-status-info: #315fdd;
+
+  --surface-panel: color-mix(in srgb, var(--ref-bg-1) 92%, var(--ref-bg-2));
+  --surface-elevated: color-mix(in srgb, var(--ref-bg-1) 96%, white 4%);
+  --status-success-bg: color-mix(in srgb, var(--ref-status-success) 14%, var(--surface-page));
+  --status-success-border: color-mix(in srgb, var(--ref-status-success) 36%, var(--border-default));
+  --status-warning-bg: color-mix(in srgb, var(--ref-status-warning) 14%, var(--surface-page));
+  --status-warning-border: color-mix(in srgb, var(--ref-status-warning) 36%, var(--border-default));
+  --status-danger-bg: color-mix(in srgb, var(--ref-status-danger) 14%, var(--surface-page));
+  --status-danger-border: color-mix(in srgb, var(--ref-status-danger) 36%, var(--border-default));
+  --status-info-bg: color-mix(in srgb, var(--ref-status-info) 14%, var(--surface-page));
+  --status-info-border: color-mix(in srgb, var(--ref-status-info) 36%, var(--border-default));
+
   --state-focus-ring-color: #315fdd;
+  --state-selected-bg: color-mix(in srgb, var(--status-info-fg) 16%, var(--surface-page));
+  --state-selected-border: color-mix(in srgb, var(--status-info-fg) 42%, var(--border-default));
+  --surface-inverse: var(--text-inverse);
+  --overlay-backdrop: color-mix(in srgb, #0f172a 26%, transparent);
+  --overlay-scrim: color-mix(in srgb, #0f172a 40%, transparent);
+  --overlay-local-backdrop: color-mix(in srgb, #0f172a 18%, transparent);
   --surface-overlay-bg: color-mix(in srgb, #ffffff 96%, transparent);
+  --surface-overlay-backdrop: color-mix(in srgb, #0f172a 26%, transparent);
+
+  --icon-accent: #2f4fb8;
+  --icon-file-folder: #8a6324;
+  --icon-file-doc: #516171;
+  --icon-file-media: #bf5a5a;
+  --icon-surface-subtle: color-mix(in srgb, var(--text-secondary) 16%, var(--surface-panel));
+  --icon-surface-accent: color-mix(in srgb, var(--icon-accent) 18%, var(--surface-panel));
+  --icon-surface-success: color-mix(in srgb, var(--status-success-fg) 18%, var(--surface-panel));
+  --icon-surface-warning: color-mix(in srgb, var(--status-warning-fg) 18%, var(--surface-panel));
+  --icon-surface-error: color-mix(in srgb, var(--status-danger-fg) 18%, var(--surface-panel));
+  --icon-surface-info: color-mix(in srgb, var(--status-info-fg) 18%, var(--surface-panel));
+
+  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
+  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.1);
+  --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.12);
+  --shadow-xl: 0 16px 48px rgba(15, 23, 42, 0.16);
+  --shadow-glow: 0 0 12px rgba(49, 95, 221, 0.16);
+
+  --accent-purple: #7c3aed;
 }
 
 [data-theme="nord-dark"] {
-  --gap-content: var(--sp-3);
-  --radius-overlay: var(--radius-xl);
+  --ref-fg-0: #d8dee9;
+  --ref-fg-1: #b5c1d2;
+  --ref-fg-2: #7b88a1;
+  --ref-fg-3: #616e88;
+  --ref-fg-inverse: #2e3440;
+  --ref-bg-0: #242933;
+  --ref-bg-1: #2e3440;
+  --ref-bg-2: #282e39;
+  --ref-bg-3: #2b313c;
+  --ref-bg-4: #384152;
+  --ref-bg-5: #434c5e;
+  --ref-bg-6: #4b5566;
+  --ref-border-0: #4c566a;
+  --ref-border-1: #616e88;
+  --ref-border-2: #73809c;
+  --ref-border-focus: #88c0d0;
+  --ref-border-danger: #d08770;
+  --ref-status-success: #a3be8c;
+  --ref-status-warning: #ebcb8b;
+  --ref-status-danger: #bf616a;
+  --ref-status-info: #88c0d0;
+
   --state-focus-ring-color: #88c0d0;
   --surface-overlay-bg: color-mix(in srgb, #2e3440 96%, transparent);
+
+  --icon-accent: #8fbcbb;
+  --icon-file-folder: #d8b76e;
+  --icon-file-doc: #c7d3e0;
+  --icon-file-media: #cf8c95;
+  --icon-surface-subtle: color-mix(in srgb, var(--text-secondary) 20%, var(--surface-panel));
+  --icon-surface-accent: color-mix(in srgb, var(--icon-accent) 24%, var(--surface-panel));
+
+  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.36);
+  --shadow-md: 0 4px 12px rgba(17, 24, 39, 0.46);
+  --shadow-lg: 0 8px 32px rgba(17, 24, 39, 0.58);
+  --shadow-xl: 0 16px 48px rgba(17, 24, 39, 0.68);
+  --shadow-glow: 0 0 12px rgba(136, 192, 208, 0.26);
+
+  --accent-purple: #b48ead;
 }
 
 [data-theme="nord-light"] {
-  --gap-content: var(--sp-3);
-  --radius-overlay: var(--radius-xl);
+  --ref-fg-0: #2e3440;
+  --ref-fg-1: #4d5a6f;
+  --ref-fg-2: #7b88a1;
+  --ref-fg-3: #93a0b7;
+  --ref-fg-inverse: #ffffff;
+  --ref-bg-0: #e3ebf4;
+  --ref-bg-1: #f1f5fa;
+  --ref-bg-2: #dbe4ef;
+  --ref-bg-3: #edf1f6;
+  --ref-bg-4: #d2ddea;
+  --ref-bg-5: #c8d4e2;
+  --ref-bg-6: #b8c6d7;
+  --ref-border-0: #b8c6d7;
+  --ref-border-1: #cad5e2;
+  --ref-border-2: #aab9cc;
+  --ref-border-focus: #5b7fa8;
+  --ref-border-danger: #bf616a;
+  --ref-status-success: #4c7a5b;
+  --ref-status-warning: #a77f2f;
+  --ref-status-danger: #bf616a;
+  --ref-status-info: #5b7fa8;
+
+  --surface-panel: color-mix(in srgb, var(--ref-bg-1) 92%, var(--ref-bg-2));
+  --surface-elevated: color-mix(in srgb, var(--ref-bg-1) 96%, white 4%);
+  --status-success-bg: color-mix(in srgb, var(--ref-status-success) 14%, var(--surface-page));
+  --status-success-border: color-mix(in srgb, var(--ref-status-success) 36%, var(--border-default));
+  --status-warning-bg: color-mix(in srgb, var(--ref-status-warning) 14%, var(--surface-page));
+  --status-warning-border: color-mix(in srgb, var(--ref-status-warning) 36%, var(--border-default));
+  --status-danger-bg: color-mix(in srgb, var(--ref-status-danger) 14%, var(--surface-page));
+  --status-danger-border: color-mix(in srgb, var(--ref-status-danger) 36%, var(--border-default));
+  --status-info-bg: color-mix(in srgb, var(--ref-status-info) 14%, var(--surface-page));
+  --status-info-border: color-mix(in srgb, var(--ref-status-info) 36%, var(--border-default));
+
   --state-focus-ring-color: #5b7fa8;
+  --state-selected-bg: color-mix(in srgb, var(--status-info-fg) 16%, var(--surface-page));
+  --state-selected-border: color-mix(in srgb, var(--status-info-fg) 42%, var(--border-default));
+  --surface-inverse: var(--text-inverse);
+  --overlay-backdrop: color-mix(in srgb, #243447 20%, transparent);
+  --overlay-scrim: color-mix(in srgb, #243447 32%, transparent);
+  --overlay-local-backdrop: color-mix(in srgb, #243447 14%, transparent);
   --surface-overlay-bg: color-mix(in srgb, #ffffff 96%, transparent);
+  --surface-overlay-backdrop: color-mix(in srgb, #243447 20%, transparent);
+
+  --icon-accent: #6b8fb9;
+  --icon-file-folder: #b28a49;
+  --icon-file-doc: #5d6c82;
+  --icon-file-media: #b96f77;
+  --icon-surface-subtle: color-mix(in srgb, var(--text-secondary) 16%, var(--surface-panel));
+  --icon-surface-accent: color-mix(in srgb, var(--icon-accent) 18%, var(--surface-panel));
+  --icon-surface-success: color-mix(in srgb, var(--status-success-fg) 18%, var(--surface-panel));
+  --icon-surface-warning: color-mix(in srgb, var(--status-warning-fg) 18%, var(--surface-panel));
+  --icon-surface-error: color-mix(in srgb, var(--status-danger-fg) 18%, var(--surface-panel));
+  --icon-surface-info: color-mix(in srgb, var(--status-info-fg) 18%, var(--surface-panel));
+
+  --shadow-sm: 0 1px 2px rgba(46, 52, 64, 0.08);
+  --shadow-md: 0 4px 12px rgba(46, 52, 64, 0.1);
+  --shadow-lg: 0 8px 32px rgba(46, 52, 64, 0.12);
+  --shadow-xl: 0 16px 48px rgba(46, 52, 64, 0.15);
+  --shadow-glow: 0 0 12px rgba(91, 127, 168, 0.18);
+
+  --accent-purple: #8f5b9c;
 }
 
 [data-theme="hc-dark"] {
-  --gap-content: var(--sp-3);
-  --radius-overlay: var(--radius-xl);
+  --ref-fg-0: #ffffff;
+  --ref-fg-1: #f0f0f0;
+  --ref-fg-2: #d0d0d0;
+  --ref-fg-3: #8f8f8f;
+  --ref-fg-inverse: #000000;
+  --ref-bg-0: #000000;
+  --ref-bg-1: #000000;
+  --ref-bg-2: #000000;
+  --ref-bg-3: #0d0d0d;
+  --ref-bg-4: #141414;
+  --ref-bg-5: #264f78;
+  --ref-bg-6: #101010;
+  --ref-border-0: #ffffff;
+  --ref-border-1: #ffff00;
+  --ref-border-2: #ffff00;
+  --ref-border-focus: #ffff00;
+  --ref-border-danger: #ff4d4d;
+  --ref-status-success: #00ff7f;
+  --ref-status-warning: #ffff66;
+  --ref-status-danger: #ff4d4d;
+  --ref-status-info: #66b3ff;
+
+  --surface-panel: color-mix(in srgb, var(--ref-bg-1) 92%, var(--ref-bg-6));
+  --surface-elevated: color-mix(in srgb, var(--ref-bg-1) 98%, white 2%);
+  --status-success-bg: color-mix(in srgb, var(--ref-status-success) 24%, var(--surface-page));
+  --status-success-border: color-mix(in srgb, var(--ref-status-success) 56%, var(--border-default));
+  --status-warning-bg: color-mix(in srgb, var(--ref-status-warning) 24%, var(--surface-page));
+  --status-warning-border: color-mix(in srgb, var(--ref-status-warning) 56%, var(--border-default));
+  --status-danger-bg: color-mix(in srgb, var(--ref-status-danger) 24%, var(--surface-page));
+  --status-danger-border: color-mix(in srgb, var(--ref-status-danger) 56%, var(--border-default));
+  --status-info-bg: color-mix(in srgb, var(--ref-status-info) 24%, var(--surface-page));
+  --status-info-border: color-mix(in srgb, var(--ref-status-info) 56%, var(--border-default));
+
   --state-focus-ring-color: #ffff00;
+  --state-selected-bg: color-mix(in srgb, var(--status-info-fg) 24%, var(--surface-page));
+  --state-selected-border: color-mix(in srgb, var(--status-info-fg) 60%, var(--border-default));
   --surface-overlay-bg: color-mix(in srgb, #111111 96%, transparent);
+  --surface-overlay-backdrop: color-mix(in srgb, #000000 72%, transparent);
+  --overlay-backdrop: color-mix(in srgb, #000000 72%, transparent);
+  --overlay-scrim: color-mix(in srgb, #000000 84%, transparent);
+  --overlay-local-backdrop: color-mix(in srgb, #000000 58%, transparent);
+
+  --icon-primary: #ffffff;
+  --icon-secondary: #ffff00;
+  --icon-muted: #d0d0d0;
+  --icon-accent: #66b3ff;
+  --icon-success: #00ff7f;
+  --icon-warning: #ffff66;
+  --icon-error: #ff4d4d;
+  --icon-info: #66b3ff;
+  --icon-file-folder: #ffff00;
+  --icon-file-code: #66b3ff;
+  --icon-file-data: #ff7fff;
+  --icon-file-doc: #ffffff;
+  --icon-file-media: #ff4d4d;
+  --icon-file-default: #ffffff;
+  --icon-git-staged: #00ff7f;
+  --icon-git-modified: #ffff66;
+  --icon-git-deleted: #ff4d4d;
+  --icon-git-untracked: #66b3ff;
+  --icon-surface-subtle: color-mix(in srgb, #ffffff 20%, var(--surface-panel));
+  --icon-surface-accent: color-mix(in srgb, #66b3ff 28%, var(--surface-panel));
+  --icon-surface-success: color-mix(in srgb, #00ff7f 28%, var(--surface-panel));
+  --icon-surface-warning: color-mix(in srgb, #ffff66 28%, var(--surface-panel));
+  --icon-surface-error: color-mix(in srgb, #ff4d4d 28%, var(--surface-panel));
+  --icon-surface-info: color-mix(in srgb, #66b3ff 28%, var(--surface-panel));
+
+  --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.55);
+  --shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.72);
+  --shadow-lg: 0 0 0 2px rgba(255, 255, 255, 0.72);
+  --shadow-xl: 0 0 0 3px rgba(255, 255, 255, 0.8);
+  --shadow-glow: 0 0 0 2px rgba(255, 255, 0, 0.52);
+  --scrollbar-thumb: #ffffff;
+
+  --accent-purple: #ff7fff;
 }
 
 [data-theme="hc-light"] {
-  --gap-content: var(--sp-3);
-  --radius-overlay: var(--radius-xl);
+  --ref-fg-0: #000000;
+  --ref-fg-1: #111111;
+  --ref-fg-2: #333333;
+  --ref-fg-3: #5c5c5c;
+  --ref-fg-inverse: #ffffff;
+  --ref-bg-0: #ffffff;
+  --ref-bg-1: #ffffff;
+  --ref-bg-2: #ffffff;
+  --ref-bg-3: #f3f3f3;
+  --ref-bg-4: #eef4ff;
+  --ref-bg-5: #add6ff;
+  --ref-bg-6: #f0f0f0;
+  --ref-border-0: #000000;
+  --ref-border-1: #5c5c5c;
+  --ref-border-2: #5c5c5c;
+  --ref-border-focus: #0037da;
+  --ref-border-danger: #b00020;
+  --ref-status-success: #006b3c;
+  --ref-status-warning: #7a5c00;
+  --ref-status-danger: #b00020;
+  --ref-status-info: #0037da;
+
+  --surface-panel: color-mix(in srgb, var(--ref-bg-1) 92%, var(--ref-bg-6));
+  --surface-elevated: color-mix(in srgb, var(--ref-bg-1) 96%, white 4%);
+  --status-success-bg: color-mix(in srgb, var(--ref-status-success) 16%, var(--surface-page));
+  --status-success-border: color-mix(in srgb, var(--ref-status-success) 38%, var(--border-default));
+  --status-warning-bg: color-mix(in srgb, var(--ref-status-warning) 16%, var(--surface-page));
+  --status-warning-border: color-mix(in srgb, var(--ref-status-warning) 38%, var(--border-default));
+  --status-danger-bg: color-mix(in srgb, var(--ref-status-danger) 16%, var(--surface-page));
+  --status-danger-border: color-mix(in srgb, var(--ref-status-danger) 38%, var(--border-default));
+  --status-info-bg: color-mix(in srgb, var(--ref-status-info) 16%, var(--surface-page));
+  --status-info-border: color-mix(in srgb, var(--ref-status-info) 38%, var(--border-default));
+
   --state-focus-ring-color: #0037da;
+  --state-selected-bg: color-mix(in srgb, var(--status-info-fg) 18%, var(--surface-page));
+  --state-selected-border: color-mix(in srgb, var(--status-info-fg) 44%, var(--border-default));
+  --surface-inverse: var(--text-inverse);
   --surface-overlay-bg: color-mix(in srgb, #ffffff 96%, transparent);
+  --surface-overlay-backdrop: color-mix(in srgb, #000000 20%, transparent);
+  --overlay-backdrop: color-mix(in srgb, #000000 20%, transparent);
+  --overlay-scrim: color-mix(in srgb, #000000 30%, transparent);
+  --overlay-local-backdrop: color-mix(in srgb, #000000 14%, transparent);
+
+  --icon-primary: #000000;
+  --icon-secondary: #111111;
+  --icon-muted: #333333;
+  --icon-accent: #0037da;
+  --icon-success: #006b3c;
+  --icon-warning: #7a5c00;
+  --icon-error: #b00020;
+  --icon-info: #0037da;
+  --icon-file-folder: #7a5c00;
+  --icon-file-code: #0037da;
+  --icon-file-data: #7a00cc;
+  --icon-file-doc: #000000;
+  --icon-file-media: #b00020;
+  --icon-file-default: #111111;
+  --icon-git-staged: #006b3c;
+  --icon-git-modified: #7a5c00;
+  --icon-git-deleted: #b00020;
+  --icon-git-untracked: #0037da;
+  --icon-surface-subtle: color-mix(in srgb, #000000 12%, var(--surface-panel));
+  --icon-surface-accent: color-mix(in srgb, #0037da 18%, var(--surface-panel));
+  --icon-surface-success: color-mix(in srgb, #006b3c 18%, var(--surface-panel));
+  --icon-surface-warning: color-mix(in srgb, #7a5c00 18%, var(--surface-panel));
+  --icon-surface-error: color-mix(in srgb, #b00020 18%, var(--surface-panel));
+  --icon-surface-info: color-mix(in srgb, #0037da 18%, var(--surface-panel));
+
+  --shadow-sm: 0 0 0 1px rgba(0, 0, 0, 0.18);
+  --shadow-md: 0 0 0 1px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 0 0 2px rgba(0, 0, 0, 0.32);
+  --shadow-xl: 0 0 0 3px rgba(0, 0, 0, 0.36);
+  --shadow-glow: 0 0 0 2px rgba(0, 55, 218, 0.3);
+  --scrollbar-thumb: #5c5c5c;
+
+  --accent-purple: #7a00cc;
 }
 
 :root[data-appearance-glass="on"] {
-  --ws-backdrop-filter: var(--app-surface-backdrop-filter, none);
-  --ws-sidebar-bg: var(--ws-level-3);
-  --ws-activitybar-bg: var(--ws-level-2);
-  --ws-statusbar-bg: var(--ws-level-3);
-  --ws-session-bg: var(--ws-level-2);
-  --ws-session-active-bg: var(--ws-level-3);
-  --ws-session-header-bg: var(--ws-level-3);
-  --ws-terminal-shell-bg: var(--ws-level-3);
-  --ws-terminal-toolbar-bg: var(--ws-level-2);
-  --ws-terminal-tabs-bg: var(--ws-level-2);
-  --ws-editor-shell-bg: var(--ws-level-2);
-  --ws-editor-toolbar-bg: var(--ws-level-3);
+  --material-backdrop-filter: var(--app-surface-backdrop-filter, none);
+  --material-panel: color-mix(
+    in srgb,
+    var(--surface-panel) calc(var(--app-surface-opacity, 0.96) * 100%),
+    transparent
+  );
+  --material-elevated: color-mix(
+    in srgb,
+    var(--surface-elevated) calc(var(--app-surface-opacity, 0.92) * 100%),
+    transparent
+  );
+  --material-overlay: color-mix(
+    in srgb,
+    var(--surface-elevated) calc(var(--app-surface-opacity, 0.88) * 100%),
+    transparent
+  );
+  --material-local-overlay: color-mix(
+    in srgb,
+    var(--surface-panel) calc(var(--app-surface-opacity, 0.84) * 100%),
+    transparent
+  );
+  --material-shell-page: color-mix(
+    in srgb,
+    var(--surface-page) calc(var(--app-surface-opacity, 0.96) * 100%),
+    transparent
+  );
+  --material-shell-topbar: color-mix(
+    in srgb,
+    var(--surface-elevated) calc(var(--app-surface-opacity, 0.96) * 100%),
+    transparent
+  );
+  --workspace-sidebar-surface: var(--material-elevated);
+  --workspace-activitybar-surface: var(--material-panel);
+  --workspace-statusbar-surface: var(--material-elevated);
+  --workspace-session-surface: var(--material-panel);
+  --workspace-session-active-surface: var(--material-elevated);
+  --workspace-session-header-surface: var(--material-elevated);
+  --workspace-terminal-shell-surface: var(--material-elevated);
+  --workspace-terminal-toolbar-surface: var(--material-panel);
+  --workspace-terminal-tabs-surface: var(--material-panel);
+  --workspace-editor-shell-surface: var(--material-panel);
+  --workspace-editor-toolbar-surface: var(--material-elevated);
+  --workspace-editor-toolbar-border: color-mix(
+    in srgb,
+    var(--border-default) 72%,
+    var(--status-info-fg) 28%
+  );
+  --ws-backdrop-filter: var(--material-backdrop-filter);
 }
 
 :root[data-theme="hc-dark"],
 :root[data-theme="hc-light"] {
+  --material-backdrop-filter: none;
+  --material-panel: var(--surface-panel);
+  --material-elevated: var(--surface-elevated);
+  --material-overlay: var(--surface-elevated);
+  --material-local-overlay: var(--surface-panel);
+  --material-shell-page: var(--surface-page);
+  --material-shell-topbar: var(--surface-elevated);
+  --workspace-sidebar-surface: var(--surface-panel);
+  --workspace-activitybar-surface: var(--surface-panel);
+  --workspace-statusbar-surface: var(--surface-panel);
+  --workspace-session-surface: var(--surface-panel);
+  --workspace-session-active-surface: var(--surface-elevated);
+  --workspace-session-header-surface: var(--surface-elevated);
+  --workspace-terminal-shell-surface: var(--surface-panel);
+  --workspace-terminal-toolbar-surface: var(--surface-elevated);
+  --workspace-terminal-tabs-surface: var(--surface-elevated);
+  --workspace-editor-shell-surface: var(--surface-panel);
+  --workspace-editor-toolbar-surface: var(--surface-elevated);
+  --workspace-editor-toolbar-border: color-mix(
+    in srgb,
+    var(--border-default) 72%,
+    var(--status-info-fg) 28%
+  );
   --ws-backdrop-filter: none;
-  --ws-sidebar-bg: var(--surface-panel-bg);
-  --ws-activitybar-bg: var(--surface-panel-bg);
-  --ws-statusbar-bg: var(--surface-panel-bg);
-  --ws-session-bg: var(--surface-panel-bg);
-  --ws-session-active-bg: var(--surface-elevated-bg);
-  --ws-session-header-bg: var(--surface-elevated-bg);
-  --ws-terminal-shell-bg: var(--surface-panel-bg);
-  --ws-terminal-toolbar-bg: var(--surface-elevated-bg);
-  --ws-terminal-tabs-bg: var(--surface-elevated-bg);
-  --ws-editor-shell-bg: var(--surface-panel-bg);
-  --ws-editor-toolbar-bg: var(--surface-elevated-bg);
 }
 
 /* ========== Mobile / Touch Override (Phase 0) ========== */