From b6aa570fcc255935c52ce39459bb32976729b52a Mon Sep 17 00:00:00 2001
From: t <t@t.t>
Date: Wed, 16 Sep 2026 17:09:48 +0800
Subject: [PATCH] fix(ui): remove glass chrome appearance

---
 apps/desktop/src/main/rpc.ts                  |   4 +-
 apps/desktop/src/main/window.test.ts          |  39 ++----
 apps/desktop/src/main/window.ts               |  50 +------
 apps/desktop/src/renderer/src/App.tsx         |  10 +-
 .../src/features/changes/ChangesView.tsx      |   6 +-
 .../src/features/composer/Composer.tsx        |   6 +-
 .../renderer/src/features/composer/DESIGN.md  |   6 +-
 .../src/features/composer/FilePopup.tsx       |   2 +-
 .../src/features/composer/ModelSelector.tsx   |   2 +-
 .../src/features/diffs/DiffViewer.tsx         |   2 +-
 .../renderer/src/features/focus/FocusPill.tsx |   2 +-
 .../src/features/github/HubWorkspace.tsx      |  10 +-
 .../src/features/palette/CommandPalette.tsx   |   2 +-
 .../providers/AgentConfigSettings.tsx         |   2 +-
 .../features/search/ContentSearchOverlay.tsx  |   2 +-
 .../features/session/ChildSessionActivity.tsx |   2 +-
 .../src/features/session/SessionView.test.tsx |   1 -
 .../src/features/session/SessionView.tsx      |   4 +-
 .../settings/AdvancedSettings.test.tsx        |   1 -
 .../settings/AppearanceSettings.test.tsx      |  24 +---
 .../features/settings/AppearanceSettings.tsx  |  29 +---
 .../settings/NotificationsSettings.test.tsx   |   1 -
 .../settings/PermissionsSettings.test.tsx     |   1 -
 .../features/settings/PermissionsSettings.tsx |   2 +-
 .../src/features/settings/SettingsSearch.tsx  |   2 +-
 .../settings/SettingsWorkspace.test.tsx       |   1 -
 .../features/settings/SettingsWorkspace.tsx   |   6 +-
 .../settings/useEngineSettings.test.ts        |   8 +-
 .../renderer/src/features/split/drag-split.ts |   2 +-
 .../src/features/terminal/TerminalDock.tsx    |   2 +-
 .../src/features/transcript/MessageRail.tsx   |   2 +-
 .../src/features/welcome/WelcomePanel.tsx     |   2 +-
 .../src/renderer/src/lib/theme-persistence.ts |   8 +-
 .../src/renderer/src/shell/ContextMenu.tsx    |   2 +-
 .../src/renderer/src/shell/Sidebar.tsx        |  22 +--
 .../src/renderer/src/shell/Titlebar.tsx       |   6 +-
 .../desktop/src/renderer/src/styles/index.css |   4 +-
 packages/contracts/src/contracts.test.ts      |  10 +-
 packages/contracts/src/settings.ts            |   4 -
 packages/engine/src/settings.test.ts          |   8 +-
 packages/ui/package.json                      |   2 +-
 packages/ui/src/color.ts                      |   2 +-
 packages/ui/src/components/Dialog.tsx         |   2 +-
 packages/ui/src/components/Popover.tsx        |   2 +-
 packages/ui/src/glass.css                     | 131 ------------------
 packages/ui/src/surface-effects.css           |  62 +++++++++
 packages/ui/src/theme-provider.test.tsx       |  65 +++------
 packages/ui/src/theme-provider.tsx            |  42 ++----
 packages/ui/src/themes.test.ts                |   2 -
 packages/ui/src/themes.ts                     |  51 +------
 packages/ui/src/tokens.css                    |  40 +-----
 packages/ui/src/wallpaper-css.test.ts         |  14 +-
 packages/ui/src/wallpaper.css                 |  43 ++----
 53 files changed, 226 insertions(+), 531 deletions(-)
 delete mode 100644 packages/ui/src/glass.css
 create mode 100644 packages/ui/src/surface-effects.css

diff --git a/apps/desktop/src/main/rpc.ts b/apps/desktop/src/main/rpc.ts
index 5c888103..d40685ac 100644
--- a/apps/desktop/src/main/rpc.ts
+++ b/apps/desktop/src/main/rpc.ts
@@ -1167,9 +1167,7 @@ export function registerRpc(contents: WebContents, options: RegisterRpcOptions =
     return { done: true }
   })
 
-  // Live theme change: repaint native chrome (Windows overlay symbols + the OS
-  // light/dark hint). Window material is fixed at creation, so a glass <-> opaque
-  // switch only takes full effect on the next launch.
+  // Live theme change: repaint Windows overlay symbols and the OS light/dark hint.
   r.register('theme.apply', (params) => {
     const win = BrowserWindow.fromWebContents(contents)
     if (!win) return { applied: false }
diff --git a/apps/desktop/src/main/window.test.ts b/apps/desktop/src/main/window.test.ts
index e905c254..3e8d2ee1 100644
--- a/apps/desktop/src/main/window.test.ts
+++ b/apps/desktop/src/main/window.test.ts
@@ -18,30 +18,15 @@ describe('theme registries agree across packages', () => {
 })
 
 describe('themeWindowChrome', () => {
-  it('requests platform translucency for glass themes', () => {
-    expect(themeWindowChrome(themes.obsidian, 'win32')).toMatchObject({
-      backgroundColor: '#00000000',
-      backgroundMaterial: 'acrylic',
-    })
-    expect(themeWindowChrome(themes.obsidian, 'darwin')).toMatchObject({
-      vibrancy: 'under-window',
-      visualEffectState: 'active',
-    })
-    expect(themeWindowChrome(themes.obsidian, 'linux')).toMatchObject({ transparent: true })
-  })
-
-  it('gives opaque themes a solid background and no translucency', () => {
-    for (const platform of ['win32', 'darwin', 'linux'] as const) {
-      const chrome = themeWindowChrome(themes.graphite, platform)
-      expect(chrome.backgroundMaterial).toBeUndefined()
-      expect(chrome.vibrancy).toBeUndefined()
-      expect(chrome.transparent).toBeUndefined()
+  it('gives every theme a solid background', () => {
+    for (const theme of Object.values(themes)) {
+      const chrome = themeWindowChrome(theme)
       expect(chrome.backgroundColor).toMatch(/^#[0-9a-f]{6}$/)
     }
   })
 
   it('never flashes black for light themes', () => {
-    const chrome = themeWindowChrome(themes.porcelain, 'win32')
+    const chrome = themeWindowChrome(themes.porcelain)
     const red = parseInt(chrome.backgroundColor.slice(1, 3), 16)
     expect(red).toBeGreaterThan(0xd0)
     // Overlay symbols must be dark on a light backdrop.
@@ -49,17 +34,15 @@ describe('themeWindowChrome', () => {
   })
 
   it('derives the overlay symbol color from the theme foreground', () => {
-    expect(themeWindowChrome(themes.obsidian, 'win32').symbolColor).toMatch(/^#[0-9a-f]{6}$/)
-    expect(themeWindowChrome(themes.obsidian, 'win32').symbolColor).not.toBe(
-      themeWindowChrome(themes.porcelain, 'win32').symbolColor,
+    expect(themeWindowChrome(themes.obsidian).symbolColor).toMatch(/^#[0-9a-f]{6}$/)
+    expect(themeWindowChrome(themes.obsidian).symbolColor).not.toBe(
+      themeWindowChrome(themes.porcelain).symbolColor,
     )
   })
 
-  it('differs between a glass theme and an opaque theme', () => {
-    const glass = themeWindowChrome(themes.nocturne, 'win32')
-    const opaque = themeWindowChrome(themes.verdant, 'win32')
-    expect(glass.backgroundColor).not.toBe(opaque.backgroundColor)
-    expect(glass.backgroundMaterial).toBe('acrylic')
-    expect(opaque.backgroundMaterial).toBeUndefined()
+  it('uses each theme background rather than a shared transparent value', () => {
+    expect(themeWindowChrome(themes.nocturne).backgroundColor).not.toBe(
+      themeWindowChrome(themes.verdant).backgroundColor,
+    )
   })
 })
diff --git a/apps/desktop/src/main/window.ts b/apps/desktop/src/main/window.ts
index a7bf4f17..bac945f4 100644
--- a/apps/desktop/src/main/window.ts
+++ b/apps/desktop/src/main/window.ts
@@ -7,15 +7,9 @@ import { appDisplayName } from './dev-instance'
 import { getSettingsStore } from './store'
 
 /**
- * Platform chrome strategy (PLAN §8):
- *  - Windows: hidden frame + native titleBarOverlay (snap/max/min preserved),
- *    backgroundMaterial 'acrylic' when the active theme opts into glass
- *  - macOS:   hiddenInset traffic lights + vibrancy 'under-window' (glass only)
- *  - Linux:   hidden frame; custom controls ship in the renderer titlebar;
- *    transparent window for glass themes (compositor blur not guaranteed)
- *
- * Opaque themes get a solid `backgroundColor` from their own `bg` token, so a
- * light theme never flashes black before the renderer paints.
+ * The native window always uses a solid `backgroundColor` from the active
+ * theme's `bg` token, so no desktop content bleeds through and a light theme
+ * never flashes black before the renderer paints.
  *
  * Window bounds persist across launches via the settings store.
  */
@@ -31,32 +25,12 @@ export const PACKAGED_CONTENT_SECURITY_POLICY =
 export interface ThemeWindowChrome {
   backgroundColor: string
   symbolColor: string
-  transparent?: true
-  backgroundMaterial?: 'acrylic'
-  vibrancy?: 'under-window'
-  visualEffectState?: 'active'
 }
 
-/**
- * Native window options derived from a theme. Glass themes request the
- * platform's translucency and a fully transparent backdrop; opaque themes get
- * the theme's own background so the first frame matches the UI.
- */
-export function themeWindowChrome(
-  theme: Theme,
-  platform: NodeJS.Platform = process.platform,
-): ThemeWindowChrome {
+/** Native window colors derived from a theme. */
+export function themeWindowChrome(theme: Theme): ThemeWindowChrome {
   const symbolColor = oklchToHex(theme.colors.fg) ?? FALLBACK_SYMBOL
-  if (!theme.glass) {
-    return { backgroundColor: oklchToHex(theme.colors.bg) ?? FALLBACK_BG, symbolColor }
-  }
-  const translucent =
-    platform === 'win32'
-      ? { backgroundMaterial: 'acrylic' as const }
-      : platform === 'darwin'
-        ? { vibrancy: 'under-window' as const, visualEffectState: 'active' as const }
-        : { transparent: true as const }
-  return { backgroundColor: '#00000000', symbolColor, ...translucent }
+  return { backgroundColor: oklchToHex(theme.colors.bg) ?? FALLBACK_BG, symbolColor }
 }
 
 /** The theme the window should paint, per persisted settings. */
@@ -66,8 +40,7 @@ export function persistedTheme(): Theme {
 
 /**
  * Repaints native chrome for a live theme change: the Windows overlay symbol
- * color and the OS-level light/dark hint. Window material cannot change after
- * creation, so glass transitions land on the next launch.
+ * color and the OS-level light/dark hint.
  */
 export function applyThemeToWindow(win: BrowserWindow, theme: Theme): void {
   const chrome = themeWindowChrome(theme)
@@ -97,15 +70,6 @@ export function createMainWindow(): BrowserWindow {
       process.platform === 'win32'
         ? { color: '#00000000', symbolColor: chrome.symbolColor, height: 38 }
         : false,
-    // Glass: the desktop shows through the shell chrome. Windows gets DWM
-    // acrylic; macOS gets native vibrancy; Linux composites its own blur via
-    // CSS backdrop-filter inside a transparent window. Opaque themes skip all
-    // three and render on the solid backgroundColor above.
-    ...(chrome.backgroundMaterial ? { backgroundMaterial: chrome.backgroundMaterial } : {}),
-    ...(chrome.vibrancy
-      ? { vibrancy: chrome.vibrancy, visualEffectState: chrome.visualEffectState }
-      : {}),
-    ...(chrome.transparent ? { transparent: true } : {}),
     webPreferences: {
       preload: join(import.meta.dirname, '../preload/index.cjs'),
       sandbox: true,
diff --git a/apps/desktop/src/renderer/src/App.tsx b/apps/desktop/src/renderer/src/App.tsx
index 3c8385da..800c2030 100644
--- a/apps/desktop/src/renderer/src/App.tsx
+++ b/apps/desktop/src/renderer/src/App.tsx
@@ -742,7 +742,7 @@ function Shell() {
 
   if (settingsOpen || hubOpen) {
     return (
-      <div className="ari-glass-pane flex h-full flex-col">
+      <div className="ari-wallpaper-pane flex h-full flex-col">
         <Titlebar
           activeTool={settingsOpen ? 'settings' : 'github'}
           onSelectTool={selectWorkspaceTool}
@@ -778,7 +778,7 @@ function Shell() {
 
   if (galleryOpen) {
     return (
-      <div className="ari-glass-pane flex h-full flex-col bg-bg">
+      <div className="ari-wallpaper-pane flex h-full flex-col bg-bg">
         <header className="flex h-[var(--ari-titlebar-height)] shrink-0 items-center gap-2 pl-3">
           <span className="text-fg text-xs font-semibold tracking-[0.18em]">ARI</span>
           <span className="text-fg-subtle text-xs">/</span>
@@ -800,7 +800,7 @@ function Shell() {
   }
 
   return (
-    <div className="ari-glass-pane flex h-full flex-col">
+    <div className="ari-wallpaper-pane flex h-full flex-col">
       <Titlebar
         activeTool={settingsOpen ? 'settings' : (fullPage ?? inspector)}
         onSelectTool={selectWorkspaceTool}
@@ -809,7 +809,7 @@ function Shell() {
       />
       <div className="flex min-h-0 flex-1">
         {sidebarOpen ? (
-          <aside className="ari-glass flex shrink-0 flex-col" style={{ width: sidebar.width }}>
+          <aside className="flex shrink-0 flex-col bg-surface-0" style={{ width: sidebar.width }}>
             <SidebarHeader
               onSearch={() => sidebarSearchRef.current?.focus()}
               onCollapse={toggleSidebar}
@@ -1076,7 +1076,7 @@ function Shell() {
                             type="button"
                             aria-label="Close inspector"
                             onClick={() => setInspector(null)}
-                            className="flex h-6 w-6 items-center justify-center rounded-md text-fg-subtle transition-colors hover:bg-glass-hover hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
+                            className="flex h-6 w-6 items-center justify-center rounded-md text-fg-subtle transition-colors hover:bg-surface-2 hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
                           >
                             <X size={13} />
                           </button>
diff --git a/apps/desktop/src/renderer/src/features/changes/ChangesView.tsx b/apps/desktop/src/renderer/src/features/changes/ChangesView.tsx
index f9815107..2f78b096 100644
--- a/apps/desktop/src/renderer/src/features/changes/ChangesView.tsx
+++ b/apps/desktop/src/renderer/src/features/changes/ChangesView.tsx
@@ -233,7 +233,7 @@ export function ShipSection({
             disabled={busy || !hasChanges}
             placeholder={hasChanges ? 'Commit message — stages all changes' : 'Worktree clean'}
             aria-label="Commit message"
-            className="h-7 min-w-0 flex-1 rounded-md border border-border bg-glass-input px-2 text-xs text-fg placeholder:text-fg-subtle focus:border-border-strong focus:outline-none"
+            className="h-7 min-w-0 flex-1 rounded-md border border-border bg-surface-1 px-2 text-xs text-fg placeholder:text-fg-subtle focus:border-border-strong focus:outline-none"
           />
           <button
             type="button"
@@ -253,7 +253,7 @@ export function ShipSection({
             onChange={(e) => setPrTitle(e.target.value)}
             aria-label="Pull request title"
             placeholder="PR title"
-            className="h-7 w-full rounded-md border border-border bg-glass-input px-2 text-xs text-fg placeholder:text-fg-subtle focus:border-border-strong focus:outline-none"
+            className="h-7 w-full rounded-md border border-border bg-surface-1 px-2 text-xs text-fg placeholder:text-fg-subtle focus:border-border-strong focus:outline-none"
           />
           <textarea
             value={prBody}
@@ -261,7 +261,7 @@ export function ShipSection({
             aria-label="Pull request description"
             placeholder="Description (optional)"
             rows={3}
-            className="w-full resize-none rounded-md border border-border bg-glass-input px-2 py-1 text-xs text-fg placeholder:text-fg-subtle focus:border-border-strong focus:outline-none"
+            className="w-full resize-none rounded-md border border-border bg-surface-1 px-2 py-1 text-xs text-fg placeholder:text-fg-subtle focus:border-border-strong focus:outline-none"
           />
           <div className="flex items-center gap-2">
             <button
diff --git a/apps/desktop/src/renderer/src/features/composer/Composer.tsx b/apps/desktop/src/renderer/src/features/composer/Composer.tsx
index 71bfb554..e360e678 100644
--- a/apps/desktop/src/renderer/src/features/composer/Composer.tsx
+++ b/apps/desktop/src/renderer/src/features/composer/Composer.tsx
@@ -90,7 +90,7 @@ const MAX_HEIGHT = 260
 const RUNNING_PLACEHOLDER = 'Message will queue…'
 
 /**
- * Message composer: one glass plate. Draft on top; agent + permission on
+ * Message composer: one elevated surface. Draft on top; agent + permission on
  * the left of the foot, stash + send on the right. Enter sends, Shift+Enter
  * breaks the line. The @file popover sits above the field. Pasted or
  * dropped images land in an attachment strip inside the plate and are handed
@@ -397,7 +397,7 @@ export function Composer({
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: 4 }}
             transition={transitions.fadeUp}
-            className="mb-2 rounded-md border border-border bg-glass-input py-1.5 text-xs text-fg-muted"
+            className="mb-2 rounded-md border border-border bg-surface-1 py-1.5 text-xs text-fg-muted"
           >
             <div className="flex items-center gap-2 px-3">
               <Clock size={12} className="shrink-0 text-fg-subtle" />
@@ -551,7 +551,7 @@ export function Composer({
                       animate={{ opacity: 1, y: 0, scale: 1 }}
                       exit={{ opacity: 0, y: 4, scale: 0.97 }}
                       transition={transitions.menuIn}
-                      className="ari-glass-overlay absolute bottom-full right-0 z-40 mb-2 max-h-72 w-80 overflow-y-auto rounded-lg border border-border p-1 shadow-2"
+                      className="absolute bottom-full right-0 z-40 mb-2 max-h-72 w-80 overflow-y-auto rounded-lg border border-border bg-surface-2 p-1 shadow-2"
                       role="menu"
                       aria-label="Stashed prompts"
                     >
diff --git a/apps/desktop/src/renderer/src/features/composer/DESIGN.md b/apps/desktop/src/renderer/src/features/composer/DESIGN.md
index 08f30f3b..2c9b5dab 100644
--- a/apps/desktop/src/renderer/src/features/composer/DESIGN.md
+++ b/apps/desktop/src/renderer/src/features/composer/DESIGN.md
@@ -12,13 +12,13 @@
 
 ## Evidence
 
-- Local: M22 cloned T3 (provider-chip pill, left send, `focus-within` halo, icon rail in an earlier pass). Neighbors use ghost chips, `rounded-lg`, `focus-visible` rings, Geist, glass overlays.
+- Local: M22 cloned T3 (provider-chip pill, left send, `focus-within` halo, icon rail in an earlier pass). Neighbors use ghost chips, `rounded-lg`, `focus-visible` rings, Geist, and elevated overlays.
 - Contrast: T3 (icon rail, starred recents, Ctrl+N, left send) and Cursor (right circular send). Ari is agent-first, not model-marketplace-first.
 - Inference: users pick an *agent* then a model; the chrome should say that.
 
 ## Thesis
 
-One glass plate. Identity is a **mono letter mark** (C Claude, X Codex, O OpenCode, A Ari Core) plus the model name — not an all-caps vendor chip and not a logo rail. Context (agent, permission) sits left; prompt actions (stash, send) sit right. Send is a rounded-md square, not a circle, so it shares geometry with the chips. No leftover `focus-within` halo after clicking a chip; keyboard rings stay on `:focus-visible`.
+One elevated surface. Identity is a **mono letter mark** (C Claude, X Codex, O OpenCode, A Ari Core) plus the model name — not an all-caps vendor chip and not a logo rail. Context (agent, permission) sits left; prompt actions (stash, send) sit right. Send is a rounded-md square, not a circle, so it shares geometry with the chips. No leftover `focus-within` halo after clicking a chip; keyboard rings stay on `:focus-visible`.
 
 ## Picker (2026-08-25 revision)
 
@@ -42,7 +42,7 @@ The dock above the plate is preserved by leaving it in normal flow: the rail's `
 
 ## Semantic reuse
 
-- Color: `bg-glass-input`, `border-border`, `bg-surface-2` hover/active, `bg-accent` only on an armed send, `text-fg-subtle` for marks/hints.
+- Color: `bg-surface-1`, `border-border`, `bg-surface-2` hover/active, `bg-accent` only on an armed send, `text-fg-subtle` for marks/hints.
 - Type: Geist UI + Geist Mono for the mark and hints.
 - Radius: plate `rounded-lg`; chips/send `rounded-md`; mark `rounded-sm`.
 - Motion: named `transition-colors` / `transition-transform`; chevron rotates; `motion-reduce:transition-none`.
diff --git a/apps/desktop/src/renderer/src/features/composer/FilePopup.tsx b/apps/desktop/src/renderer/src/features/composer/FilePopup.tsx
index c0b481ef..b0dd2154 100644
--- a/apps/desktop/src/renderer/src/features/composer/FilePopup.tsx
+++ b/apps/desktop/src/renderer/src/features/composer/FilePopup.tsx
@@ -73,7 +73,7 @@ export function FilePopup({ items, onSelect, onClose }: FilePopupProps) {
       initial="hidden"
       animate="visible"
       variants={menuInVariants}
-      className="ari-glass-overlay overflow-hidden rounded-md border border-border shadow-lg"
+      className="overflow-hidden rounded-md border border-border bg-surface-2 shadow-lg"
     >
       <ul role="listbox" aria-label="File mentions" className="max-h-[232px] overflow-y-auto p-1">
         {items.map((path, index) => {
diff --git a/apps/desktop/src/renderer/src/features/composer/ModelSelector.tsx b/apps/desktop/src/renderer/src/features/composer/ModelSelector.tsx
index 388255df..70b06aba 100644
--- a/apps/desktop/src/renderer/src/features/composer/ModelSelector.tsx
+++ b/apps/desktop/src/renderer/src/features/composer/ModelSelector.tsx
@@ -473,7 +473,7 @@ export function ModelSelector({
         <div
           role="presentation"
           onKeyDown={onMenuKeyDown}
-          className="ari-glass-overlay absolute bottom-full left-0 z-50 mb-2 flex w-[25rem] flex-col overflow-hidden rounded-lg border border-border shadow-2"
+          className="absolute bottom-full left-0 z-50 mb-2 flex w-[25rem] flex-col overflow-hidden rounded-lg border border-border bg-surface-2 shadow-2"
         >
           <div className="relative border-b border-border">
             <Search
diff --git a/apps/desktop/src/renderer/src/features/diffs/DiffViewer.tsx b/apps/desktop/src/renderer/src/features/diffs/DiffViewer.tsx
index ad9bc301..f69ec2ab 100644
--- a/apps/desktop/src/renderer/src/features/diffs/DiffViewer.tsx
+++ b/apps/desktop/src/renderer/src/features/diffs/DiffViewer.tsx
@@ -100,7 +100,7 @@ function HunkRow({ line, path, onComment }: { line: DiffLine; path?: string; onC
             rows={2}
             aria-label={`Review note for ${path ?? 'line'}`}
             placeholder="Review note — sent with your next message (Mod+Enter to save)"
-            className="w-full resize-none rounded-sm border border-border bg-glass-input px-2 py-1 font-mono text-xs text-fg placeholder:text-fg-subtle focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
+            className="w-full resize-none rounded-sm border border-border bg-surface-1 px-2 py-1 font-mono text-xs text-fg placeholder:text-fg-subtle focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
           />
           <div className="mt-1 flex items-center justify-end gap-1">
             <button
diff --git a/apps/desktop/src/renderer/src/features/focus/FocusPill.tsx b/apps/desktop/src/renderer/src/features/focus/FocusPill.tsx
index eadadaff..989b8024 100644
--- a/apps/desktop/src/renderer/src/features/focus/FocusPill.tsx
+++ b/apps/desktop/src/renderer/src/features/focus/FocusPill.tsx
@@ -60,7 +60,7 @@ const iconButton =
   'flex size-7 items-center justify-center rounded-md text-fg-muted transition-colors hover:bg-surface-2 hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring disabled:opacity-40'
 
 const fieldInput =
-  'h-7 rounded-md border border-border bg-glass-input px-2 text-xs text-fg placeholder:text-fg-subtle focus:border-border-strong focus:outline-none'
+  'h-7 rounded-md border border-border bg-surface-1 px-2 text-xs text-fg placeholder:text-fg-subtle focus:border-border-strong focus:outline-none'
 
 /**
  * Compact header pill combining music state and an optional focus timer.
diff --git a/apps/desktop/src/renderer/src/features/github/HubWorkspace.tsx b/apps/desktop/src/renderer/src/features/github/HubWorkspace.tsx
index f853fc98..1e3c9a7b 100644
--- a/apps/desktop/src/renderer/src/features/github/HubWorkspace.tsx
+++ b/apps/desktop/src/renderer/src/features/github/HubWorkspace.tsx
@@ -167,14 +167,14 @@ export function HubWorkspace({ projects, initialProjectId, onBack }: HubWorkspac
 
   return (
     <div className="flex min-h-0 flex-1">
-      <aside className="ari-glass flex w-[var(--ari-sidebar-width)] shrink-0 flex-col">
+      <aside className="flex w-[var(--ari-sidebar-width)] shrink-0 flex-col bg-surface-0">
         <div className="flex items-center gap-1.5 px-2 pb-1 pt-3">
           <button
             type="button"
             aria-label="Back"
             title="Back to workspace"
             onClick={onBack}
-            className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-fg-subtle transition-colors hover:bg-glass-hover hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
+            className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-fg-subtle transition-colors hover:bg-surface-2 hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
           >
             <ArrowLeft size={14} strokeWidth={1.8} aria-hidden />
           </button>
@@ -199,7 +199,7 @@ export function HubWorkspace({ projects, initialProjectId, onBack }: HubWorkspac
                       className={`flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring ${
                         selected
                           ? 'bg-accent-subtle font-medium text-fg'
-                          : 'text-fg-muted hover:bg-glass-hover hover:text-fg'
+                          : 'text-fg-muted hover:bg-surface-2 hover:text-fg'
                       }`}
                     >
                       <span className="min-w-0 truncate">{entry.name}</span>
@@ -252,7 +252,7 @@ export function HubWorkspace({ projects, initialProjectId, onBack }: HubWorkspac
                     aria-label="Refresh"
                     title="Refresh"
                     onClick={() => setReloadToken((token) => token + 1)}
-                    className="ml-auto flex size-7 items-center justify-center rounded-md text-fg-subtle transition-colors hover:bg-glass-hover hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
+                    className="ml-auto flex size-7 items-center justify-center rounded-md text-fg-subtle transition-colors hover:bg-surface-2 hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
                   >
                     <RefreshCw size={13} aria-hidden />
                   </button>
@@ -290,7 +290,7 @@ export function HubWorkspace({ projects, initialProjectId, onBack }: HubWorkspac
                             aria-current={selected ? 'true' : undefined}
                             onClick={() => setSelectedNumber(item.number)}
                             className={`flex w-full flex-col gap-1 px-3 py-2.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent-ring ${
-                              selected ? 'bg-accent-subtle' : 'hover:bg-glass-hover'
+                              selected ? 'bg-accent-subtle' : 'hover:bg-surface-2'
                             }`}
                           >
                             <span className="flex items-start gap-2">
diff --git a/apps/desktop/src/renderer/src/features/palette/CommandPalette.tsx b/apps/desktop/src/renderer/src/features/palette/CommandPalette.tsx
index 7cd14da2..f3778207 100644
--- a/apps/desktop/src/renderer/src/features/palette/CommandPalette.tsx
+++ b/apps/desktop/src/renderer/src/features/palette/CommandPalette.tsx
@@ -110,7 +110,7 @@ export function CommandPalette({ open, onClose, commands }: CommandPaletteProps)
             aria-modal="true"
             aria-label="Command palette"
             onClick={(event) => event.stopPropagation()}
-            className="mt-[12vh] h-fit w-[min(560px,90vw)] overflow-hidden rounded-lg border border-border ari-glass-overlay"
+            className="mt-[12vh] h-fit w-[min(560px,90vw)] overflow-hidden rounded-lg border border-border bg-surface-2"
             style={{ boxShadow: 'var(--ari-shadow-3)' }}
           >
             <div className="flex h-12 items-center gap-2 border-b border-border px-4">
diff --git a/apps/desktop/src/renderer/src/features/providers/AgentConfigSettings.tsx b/apps/desktop/src/renderer/src/features/providers/AgentConfigSettings.tsx
index cae63845..baabe13b 100644
--- a/apps/desktop/src/renderer/src/features/providers/AgentConfigSettings.tsx
+++ b/apps/desktop/src/renderer/src/features/providers/AgentConfigSettings.tsx
@@ -138,7 +138,7 @@ export function AgentConfigSettings() {
               className={`rounded-md border px-2.5 py-1 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring ${
                 entry === kind
                   ? 'border-accent-ring bg-accent-subtle font-medium text-fg'
-                  : 'border-border text-fg-muted hover:bg-glass-hover hover:text-fg'
+                  : 'border-border text-fg-muted hover:bg-surface-2 hover:text-fg'
               }`}
             >
               {KIND_LABELS[entry] ?? entry}
diff --git a/apps/desktop/src/renderer/src/features/search/ContentSearchOverlay.tsx b/apps/desktop/src/renderer/src/features/search/ContentSearchOverlay.tsx
index 61f511ed..ac388657 100644
--- a/apps/desktop/src/renderer/src/features/search/ContentSearchOverlay.tsx
+++ b/apps/desktop/src/renderer/src/features/search/ContentSearchOverlay.tsx
@@ -176,7 +176,7 @@ export function ContentSearchOverlay({ open, onClose, root, scope }: ContentSear
             aria-modal="true"
             aria-label="Project content search"
             onClick={(event) => event.stopPropagation()}
-            className="mt-[12vh] flex h-fit w-[min(640px,92vw)] flex-col overflow-hidden rounded-lg border border-border ari-glass-overlay"
+            className="mt-[12vh] flex h-fit w-[min(640px,92vw)] flex-col overflow-hidden rounded-lg border border-border bg-surface-2"
             style={{ boxShadow: 'var(--ari-shadow-3)' }}
           >
             <div className="flex h-12 items-center gap-2 border-b border-border px-4">
diff --git a/apps/desktop/src/renderer/src/features/session/ChildSessionActivity.tsx b/apps/desktop/src/renderer/src/features/session/ChildSessionActivity.tsx
index 4be4c99b..8b0debfe 100644
--- a/apps/desktop/src/renderer/src/features/session/ChildSessionActivity.tsx
+++ b/apps/desktop/src/renderer/src/features/session/ChildSessionActivity.tsx
@@ -46,7 +46,7 @@ export function ChildSessionActivity({
                       onOpen?.(session.id)
                       setOpen(false)
                     }}
-                    className="flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors hover:bg-glass-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
+                    className="flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
                   >
                     <span className="flex size-2.5 shrink-0 items-center justify-center">
                       {activity ? (
diff --git a/apps/desktop/src/renderer/src/features/session/SessionView.test.tsx b/apps/desktop/src/renderer/src/features/session/SessionView.test.tsx
index 97452457..ec613a65 100644
--- a/apps/desktop/src/renderer/src/features/session/SessionView.test.tsx
+++ b/apps/desktop/src/renderer/src/features/session/SessionView.test.tsx
@@ -68,7 +68,6 @@ const SETTINGS = {
   appearance: {
     themeId: 'obsidian',
     mode: 'system',
-    glass: true,
     reducedMotion: false,
     wallpaper: 'none',
   },
diff --git a/apps/desktop/src/renderer/src/features/session/SessionView.tsx b/apps/desktop/src/renderer/src/features/session/SessionView.tsx
index fdebc19e..10edc83e 100644
--- a/apps/desktop/src/renderer/src/features/session/SessionView.tsx
+++ b/apps/desktop/src/renderer/src/features/session/SessionView.tsx
@@ -1145,7 +1145,7 @@ export function EffortChip({
         <div
           role="listbox"
           aria-label="Effort"
-          className="ari-glass-overlay absolute bottom-full left-0 z-50 mb-2 w-52 overflow-hidden rounded-lg border border-border p-1 shadow-2"
+          className="absolute bottom-full left-0 z-50 mb-2 w-52 overflow-hidden rounded-lg border border-border bg-surface-2 p-1 shadow-2"
         >
           {options.map((option) => (
             <button
@@ -1337,7 +1337,7 @@ export function PermissionModeChip({
           role="listbox"
           aria-label="Permission mode"
           onKeyDown={onMenuKeyDown}
-          className="ari-glass-overlay absolute bottom-full left-0 z-50 mb-2 w-56 overflow-hidden rounded-lg border border-border p-1 shadow-2"
+          className="absolute bottom-full left-0 z-50 mb-2 w-56 overflow-hidden rounded-lg border border-border bg-surface-2 p-1 shadow-2"
         >
           {entries.map((m) => {
             const selected = m === current
diff --git a/apps/desktop/src/renderer/src/features/settings/AdvancedSettings.test.tsx b/apps/desktop/src/renderer/src/features/settings/AdvancedSettings.test.tsx
index d860a01b..3c6a339a 100644
--- a/apps/desktop/src/renderer/src/features/settings/AdvancedSettings.test.tsx
+++ b/apps/desktop/src/renderer/src/features/settings/AdvancedSettings.test.tsx
@@ -29,7 +29,6 @@ const engineSettings: Settings = {
   appearance: {
     themeId: 'obsidian',
     mode: 'system',
-    glass: true,
     reducedMotion: false,
     wallpaper: 'none',
   },
diff --git a/apps/desktop/src/renderer/src/features/settings/AppearanceSettings.test.tsx b/apps/desktop/src/renderer/src/features/settings/AppearanceSettings.test.tsx
index cb48431b..7db5328c 100644
--- a/apps/desktop/src/renderer/src/features/settings/AppearanceSettings.test.tsx
+++ b/apps/desktop/src/renderer/src/features/settings/AppearanceSettings.test.tsx
@@ -21,7 +21,6 @@ const engineSettings: Settings = {
   appearance: {
     themeId: 'obsidian',
     mode: 'system',
-    glass: true,
     reducedMotion: false,
     wallpaper: 'none',
   },
@@ -73,26 +72,6 @@ describe('AppearanceSettings', () => {
     )
   })
 
-  it('offers the glass toggle only for glass-capable themes', async () => {
-    renderPage()
-    const user = userEvent.setup()
-
-    await user.click(screen.getByRole('radio', { name: /Nocturne/ }))
-    const glass = await screen.findByRole('switch', { name: 'Glass chrome' })
-    expect(glass).toHaveAttribute('aria-checked', 'true')
-
-    await user.click(glass)
-    await waitFor(() => {
-      expect(document.documentElement.dataset['ariGlass']).toBe('off')
-    })
-
-    // Graphite is opaque by design — no toggle at all.
-    await user.click(screen.getByRole('radio', { name: /Graphite/ }))
-    await waitFor(() => {
-      expect(screen.queryByRole('switch', { name: 'Glass chrome' })).not.toBeInTheDocument()
-    })
-  })
-
   it('lists every bundled wallpaper and applies the selection to the html attribute', async () => {
     renderPage()
     expect(screen.getByRole('radiogroup', { name: 'Wallpaper' })).toBeInTheDocument()
@@ -115,7 +94,7 @@ describe('AppearanceSettings', () => {
     })
   })
 
-  it('offers no visibility control — one uniform glass look per wallpaper', async () => {
+  it('offers no visibility control for wallpapers', async () => {
     renderPage()
     const user = userEvent.setup()
     await user.click(screen.getByRole('radio', { name: /Anime City/ }))
@@ -132,7 +111,6 @@ describe('AppearanceSettings', () => {
       appearance: {
         themeId: 'obsidian',
         mode: 'system',
-        glass: true,
         reducedMotion: true,
         wallpaper: 'none',
       },
diff --git a/apps/desktop/src/renderer/src/features/settings/AppearanceSettings.tsx b/apps/desktop/src/renderer/src/features/settings/AppearanceSettings.tsx
index 6235925c..004da487 100644
--- a/apps/desktop/src/renderer/src/features/settings/AppearanceSettings.tsx
+++ b/apps/desktop/src/renderer/src/features/settings/AppearanceSettings.tsx
@@ -33,7 +33,7 @@ function ThemePreview({ theme }: { theme: Theme }) {
         style={{ background: colors['surface-0'], borderRight: `1px solid ${colors.border}` }}
       >
         {line('60%', colors['fg-subtle'])}
-        <span className="mt-0.5 h-1.5 rounded-sm" style={{ background: colors['glass-active'] }} />
+        <span className="mt-0.5 h-1.5 rounded-sm" style={{ background: colors['surface-2'] }} />
         {line('80%', colors['surface-3'])}
         {line('65%', colors['surface-3'])}
       </span>
@@ -72,7 +72,7 @@ function ThemeCard({
       className={`flex w-full items-center gap-3 rounded-lg border px-3 py-2.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring ${
         selected
           ? 'border-accent/60 bg-accent-subtle'
-          : 'border-border bg-glass-input hover:border-border-strong hover:bg-glass-hover'
+          : 'border-border bg-surface-1 hover:border-border-strong hover:bg-surface-2'
       }`}
     >
       {chips}
@@ -173,14 +173,13 @@ function WallpaperGroup({
 
 /**
  * Appearance settings: theme picker (Light/Dark groups plus "Follow system"),
- * the wallpaper picker, the glass opt-in for glass-capable themes, and reduced
- * motion. Theme and wallpaper state live in the ThemeProvider, which persists
- * through the engine settings store; reduced motion is written here directly.
+ * wallpaper picker, and reduced motion. Theme and wallpaper state live in the
+ * ThemeProvider, which persists through the engine settings store; reduced
+ * motion is written here directly.
  */
 export function AppearanceSettings() {
   const { settings, update } = useEngineSettings()
-  const { mode, setMode, theme, glassPreference, glassEnabled, setGlass, wallpaper, setWallpaper } =
-    useTheme()
+  const { mode, setMode, theme, wallpaper, setWallpaper } = useTheme()
   const reducedMotion = settings?.appearance.reducedMotion ?? false
 
   const handleReducedMotionChange = (checked: boolean) => {
@@ -217,22 +216,6 @@ export function AppearanceSettings() {
       <WallpaperGroup theme={theme} selected={wallpaper} onSelect={setWallpaper} />
 
       <div className="mt-4">
-        {theme.glass ? (
-          <SettingsRow
-            label="Glass chrome"
-            hint={
-              glassEnabled
-                ? 'Translucent sidebar, titlebar, and overlays.'
-                : 'Disabled by the system reduced-transparency setting.'
-            }
-          >
-            <Switch
-              checked={glassPreference}
-              onCheckedChange={setGlass}
-              aria-label="Glass chrome"
-            />
-          </SettingsRow>
-        ) : null}
         <SettingsRow label="Reduce motion" hint="Minimize animations throughout the app.">
           <Switch
             checked={reducedMotion}
diff --git a/apps/desktop/src/renderer/src/features/settings/NotificationsSettings.test.tsx b/apps/desktop/src/renderer/src/features/settings/NotificationsSettings.test.tsx
index ae3d4d81..41ccc2ec 100644
--- a/apps/desktop/src/renderer/src/features/settings/NotificationsSettings.test.tsx
+++ b/apps/desktop/src/renderer/src/features/settings/NotificationsSettings.test.tsx
@@ -20,7 +20,6 @@ const engineSettings: Settings = {
   appearance: {
     themeId: 'obsidian',
     mode: 'system',
-    glass: true,
     reducedMotion: false,
     wallpaper: 'none',
   },
diff --git a/apps/desktop/src/renderer/src/features/settings/PermissionsSettings.test.tsx b/apps/desktop/src/renderer/src/features/settings/PermissionsSettings.test.tsx
index ac6364be..42980748 100644
--- a/apps/desktop/src/renderer/src/features/settings/PermissionsSettings.test.tsx
+++ b/apps/desktop/src/renderer/src/features/settings/PermissionsSettings.test.tsx
@@ -20,7 +20,6 @@ const engineSettings: Settings = {
   appearance: {
     themeId: 'obsidian',
     mode: 'system',
-    glass: true,
     reducedMotion: false,
     wallpaper: 'none',
   },
diff --git a/apps/desktop/src/renderer/src/features/settings/PermissionsSettings.tsx b/apps/desktop/src/renderer/src/features/settings/PermissionsSettings.tsx
index 88abd465..bf76958d 100644
--- a/apps/desktop/src/renderer/src/features/settings/PermissionsSettings.tsx
+++ b/apps/desktop/src/renderer/src/features/settings/PermissionsSettings.tsx
@@ -107,7 +107,7 @@ export function PermissionsSettings() {
                 className={`flex w-full items-start gap-3 rounded-lg border px-3 py-2.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring ${
                   selected
                     ? 'border-accent/60 bg-accent-subtle'
-                    : 'border-border bg-glass-input hover:border-border-strong hover:bg-glass-hover'
+                    : 'border-border bg-surface-1 hover:border-border-strong hover:bg-surface-2'
                 }`}
               >
                 <span className="min-w-0 flex-1">
diff --git a/apps/desktop/src/renderer/src/features/settings/SettingsSearch.tsx b/apps/desktop/src/renderer/src/features/settings/SettingsSearch.tsx
index dd6c295b..4afc3f47 100644
--- a/apps/desktop/src/renderer/src/features/settings/SettingsSearch.tsx
+++ b/apps/desktop/src/renderer/src/features/settings/SettingsSearch.tsx
@@ -21,7 +21,7 @@ export const SETTINGS_SEARCH_INDEX = [
   {
     section: 'settings-appearance',
     label: 'Theme',
-    keywords: 'comet glass accent light dark preview appearance',
+    keywords: 'theme accent light dark preview appearance',
   },
   {
     section: 'settings-appearance',
diff --git a/apps/desktop/src/renderer/src/features/settings/SettingsWorkspace.test.tsx b/apps/desktop/src/renderer/src/features/settings/SettingsWorkspace.test.tsx
index 16919ff3..ae9a471c 100644
--- a/apps/desktop/src/renderer/src/features/settings/SettingsWorkspace.test.tsx
+++ b/apps/desktop/src/renderer/src/features/settings/SettingsWorkspace.test.tsx
@@ -29,7 +29,6 @@ const engineSettings: Settings = {
   appearance: {
     themeId: 'obsidian',
     mode: 'system',
-    glass: true,
     reducedMotion: false,
     wallpaper: 'none',
   },
diff --git a/apps/desktop/src/renderer/src/features/settings/SettingsWorkspace.tsx b/apps/desktop/src/renderer/src/features/settings/SettingsWorkspace.tsx
index 1aeaf739..1826819f 100644
--- a/apps/desktop/src/renderer/src/features/settings/SettingsWorkspace.tsx
+++ b/apps/desktop/src/renderer/src/features/settings/SettingsWorkspace.tsx
@@ -83,7 +83,7 @@ export function SettingsWorkspace({
 
   return (
     <div className="flex min-h-0 flex-1">
-      <aside className="ari-glass flex w-[var(--ari-sidebar-width)] shrink-0 flex-col">
+      <aside className="flex w-[var(--ari-sidebar-width)] shrink-0 flex-col bg-surface-0">
         {/* Back leads the header rather than sitting in a footer. The row is
             below the titlebar, so it clears the macOS hiddenInset traffic
             lights without needing a leading inset. */}
@@ -93,7 +93,7 @@ export function SettingsWorkspace({
             aria-label="Back"
             title="Back to workspace"
             onClick={onBack}
-            className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-fg-subtle transition-colors hover:bg-glass-hover hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
+            className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-fg-subtle transition-colors hover:bg-surface-2 hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
           >
             <ArrowLeft size={14} strokeWidth={1.8} aria-hidden />
           </button>
@@ -119,7 +119,7 @@ export function SettingsWorkspace({
                     className={`flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring ${
                       selected
                         ? 'bg-accent-subtle font-medium text-fg'
-                        : 'text-fg-muted hover:bg-glass-hover hover:text-fg'
+                        : 'text-fg-muted hover:bg-surface-2 hover:text-fg'
                     }`}
                   >
                     <Icon size={15} strokeWidth={1.8} className="shrink-0 opacity-80" aria-hidden />
diff --git a/apps/desktop/src/renderer/src/features/settings/useEngineSettings.test.ts b/apps/desktop/src/renderer/src/features/settings/useEngineSettings.test.ts
index d51ddfa0..4819c9b3 100644
--- a/apps/desktop/src/renderer/src/features/settings/useEngineSettings.test.ts
+++ b/apps/desktop/src/renderer/src/features/settings/useEngineSettings.test.ts
@@ -16,7 +16,6 @@ const baseSettings: Settings = {
   appearance: {
     themeId: 'obsidian',
     mode: 'system',
-    glass: true,
     reducedMotion: false,
     wallpaper: 'none',
   },
@@ -58,7 +57,6 @@ describe('useEngineSettings', () => {
       appearance: {
         themeId: 'obsidian',
         mode: 'system',
-        glass: true,
         reducedMotion: true,
         wallpaper: 'none',
       },
@@ -69,11 +67,13 @@ describe('useEngineSettings', () => {
 
     let returned: Settings | undefined
     await act(async () => {
-      returned = await result.current.update({ appearance: { themeId: 'obsidian', mode: 'system', glass: true, reducedMotion: true } })
+      returned = await result.current.update({
+        appearance: { themeId: 'obsidian', mode: 'system', reducedMotion: true },
+      })
     })
 
     expect(invoke).toHaveBeenCalledWith('settings.update', {
-      appearance: { themeId: 'obsidian', mode: 'system', glass: true, reducedMotion: true },
+      appearance: { themeId: 'obsidian', mode: 'system', reducedMotion: true },
     })
     expect(returned).toEqual(updated)
     expect(result.current.settings).toEqual(updated)
diff --git a/apps/desktop/src/renderer/src/features/split/drag-split.ts b/apps/desktop/src/renderer/src/features/split/drag-split.ts
index 5a39fbfa..602bc1af 100644
--- a/apps/desktop/src/renderer/src/features/split/drag-split.ts
+++ b/apps/desktop/src/renderer/src/features/split/drag-split.ts
@@ -55,7 +55,7 @@ export function readDragPane(event: DragEvent<HTMLElement>): string | null {
 function setDragChip(event: DragEvent<HTMLElement>, title: string): void {
   const chip = document.createElement('div')
   chip.textContent = title
-  chip.className = 'ari-glass-overlay'
+  chip.className = 'bg-surface-2'
   Object.assign(chip.style, {
     position: 'fixed',
     top: '-1000px',
diff --git a/apps/desktop/src/renderer/src/features/terminal/TerminalDock.tsx b/apps/desktop/src/renderer/src/features/terminal/TerminalDock.tsx
index 03abbb2b..25259a76 100644
--- a/apps/desktop/src/renderer/src/features/terminal/TerminalDock.tsx
+++ b/apps/desktop/src/renderer/src/features/terminal/TerminalDock.tsx
@@ -305,7 +305,7 @@ function RailButton({
       aria-label={label}
       title={label}
       onClick={onClick}
-      className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-fg-subtle transition-colors hover:bg-glass-hover hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
+      className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-fg-subtle transition-colors hover:bg-surface-2 hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
     >
       {children}
     </button>
diff --git a/apps/desktop/src/renderer/src/features/transcript/MessageRail.tsx b/apps/desktop/src/renderer/src/features/transcript/MessageRail.tsx
index 37153a93..327f330f 100644
--- a/apps/desktop/src/renderer/src/features/transcript/MessageRail.tsx
+++ b/apps/desktop/src/renderer/src/features/transcript/MessageRail.tsx
@@ -52,7 +52,7 @@ export function MessageRail({
             {hovered === entry.key ? (
               <span
                 role="tooltip"
-                className="ari-glass-overlay pointer-events-none absolute right-5 top-0 w-64 rounded-lg border border-border px-2.5 py-1.5 shadow-2"
+                className="pointer-events-none absolute right-5 top-0 w-64 rounded-lg border border-border bg-surface-2 px-2.5 py-1.5 shadow-2"
               >
                 <span className="line-clamp-3 block whitespace-pre-wrap break-words text-left text-2xs leading-snug text-fg-muted">
                   {entry.text}
diff --git a/apps/desktop/src/renderer/src/features/welcome/WelcomePanel.tsx b/apps/desktop/src/renderer/src/features/welcome/WelcomePanel.tsx
index 8b8717ce..b229dadb 100644
--- a/apps/desktop/src/renderer/src/features/welcome/WelcomePanel.tsx
+++ b/apps/desktop/src/renderer/src/features/welcome/WelcomePanel.tsx
@@ -280,7 +280,7 @@ export function WelcomePanel({
         {needsSetup ? (
           <form
             onSubmit={(e) => void connect(e)}
-            className="flex flex-col gap-3 rounded-xl border border-border bg-glass-input p-4"
+            className="flex flex-col gap-3 rounded-xl border border-border bg-surface-1 p-4"
           >
             <div className="flex items-center gap-2">
               <PlugZap size={14} className="text-accent" />
diff --git a/apps/desktop/src/renderer/src/lib/theme-persistence.ts b/apps/desktop/src/renderer/src/lib/theme-persistence.ts
index 132ec8ab..80a01539 100644
--- a/apps/desktop/src/renderer/src/lib/theme-persistence.ts
+++ b/apps/desktop/src/renderer/src/lib/theme-persistence.ts
@@ -12,11 +12,11 @@ const log = createLogger('renderer:theme')
 export const themePersistence: ThemePersistence = {
   async load() {
     const settings = await rpc.invoke('settings.get')
-    const { themeId, mode, glass, wallpaper } = settings.appearance
-    return { themeId, mode, glass, wallpaper }
+    const { themeId, mode, wallpaper } = settings.appearance
+    return { themeId, mode, wallpaper }
   },
-  async save({ themeId, mode, glass, wallpaper }) {
-    await rpc.invoke('settings.update', { appearance: { themeId, mode, glass, wallpaper } })
+  async save({ themeId, mode, wallpaper }) {
+    await rpc.invoke('settings.update', { appearance: { themeId, mode, wallpaper } })
     await rpc.invoke('theme.apply', { themeId }).catch((error: unknown) => {
       log.warn('theme.apply failed; native chrome may lag', { error })
       return { applied: false }
diff --git a/apps/desktop/src/renderer/src/shell/ContextMenu.tsx b/apps/desktop/src/renderer/src/shell/ContextMenu.tsx
index 54a2bce1..4f42d1d7 100644
--- a/apps/desktop/src/renderer/src/shell/ContextMenu.tsx
+++ b/apps/desktop/src/renderer/src/shell/ContextMenu.tsx
@@ -101,7 +101,7 @@ export function ContextMenu({
         role="menu"
         aria-label={label}
         style={{ left: position.x, top: position.y, width: MENU_WIDTH }}
-        className="ari-glass-overlay fixed z-[61] overflow-hidden rounded-lg border border-border p-1 shadow-2"
+        className="fixed z-[61] overflow-hidden rounded-lg border border-border bg-surface-2 p-1 shadow-2"
       >
         {items.map((item, index) => {
           const Icon = item.icon
diff --git a/apps/desktop/src/renderer/src/shell/Sidebar.tsx b/apps/desktop/src/renderer/src/shell/Sidebar.tsx
index 26eaee91..42198897 100644
--- a/apps/desktop/src/renderer/src/shell/Sidebar.tsx
+++ b/apps/desktop/src/renderer/src/shell/Sidebar.tsx
@@ -107,11 +107,11 @@ function SessionTreeGuides({ lastAtDepth }: { lastAtDepth: readonly boolean[] })
 }
 
 const ICON_BTN =
-  'flex size-7 items-center justify-center rounded-md text-fg-subtle transition-colors hover:bg-glass-hover hover:text-fg active:bg-glass-active focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring'
+  'flex size-7 items-center justify-center rounded-md text-fg-subtle transition-colors hover:bg-surface-2 hover:text-fg active:bg-surface-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring'
 
 /** Small trailing affordance (session / project menu) revealed on row hover. */
 const ROW_ACTION_BTN =
-  'flex size-5 items-center justify-center rounded-sm text-fg-subtle hover:bg-glass-active hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring'
+  'flex size-5 items-center justify-center rounded-sm text-fg-subtle hover:bg-surface-2 hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring'
 
 /** Hover cluster that takes over the timestamp slot. */
 const ROW_ACTION_CLUSTER =
@@ -251,7 +251,7 @@ function SessionRow({
               setEditing(false)
             }
           }}
-          className="min-w-0 flex-1 rounded-sm border border-border bg-glass-input px-1.5 py-0.5 text-sm text-fg focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
+          className="min-w-0 flex-1 rounded-sm border border-border bg-surface-1 px-1.5 py-0.5 text-sm text-fg focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
         />
         <button
           type="button"
@@ -345,8 +345,8 @@ function SessionRow({
             ? 'bg-accent/15 text-fg'
             : isActive ? 'bg-accent/15 text-fg font-medium'
             : activity !== undefined
-              ? 'text-fg hover:bg-glass-hover'
-              : 'text-fg-muted hover:bg-glass-hover hover:text-fg'
+              ? 'text-fg hover:bg-surface-2'
+              : 'text-fg-muted hover:bg-surface-2 hover:text-fg'
         }`}
       >
         <span className="flex size-3 shrink-0 items-center justify-center">
@@ -525,7 +525,7 @@ function SessionList({
                       expanded ? `Collapse children of ${s.title}` : `Expand children of ${s.title}`
                     }
                     aria-expanded={expanded}
-                    className="flex size-4 shrink-0 items-center justify-center rounded-sm text-fg-subtle transition-colors hover:bg-glass-hover hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
+                    className="flex size-4 shrink-0 items-center justify-center rounded-sm text-fg-subtle transition-colors hover:bg-surface-2 hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
                     onClick={() => toggle(s.id)}
                     onKeyDown={(event) => {
                       if (
@@ -613,7 +613,7 @@ function CollapsibleSessions({
           aria-expanded={open}
           onClick={() => setOpen((o) => !o)}
           onContextMenu={(e) => menu.open('archived', e)}
-          className="flex h-8 min-w-0 flex-1 items-center gap-2 rounded-md px-2 text-left text-fg-muted transition-colors hover:bg-glass-hover hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
+          className="flex h-8 min-w-0 flex-1 items-center gap-2 rounded-md px-2 text-left text-fg-muted transition-colors hover:bg-surface-2 hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
         >
           <ContextMark variant="archived" active={shelfActive} />
           <span className="min-w-0 flex-1 truncate text-sm font-medium">{label}</span>
@@ -815,7 +815,7 @@ function ProjectGroupSection({
               drag.controls.start(e)
             }}
             onContextMenu={(e) => menu.open(menuId, e)}
-            className={`flex h-8 min-w-0 flex-1 items-center gap-2 rounded-md px-2 text-left transition-colors hover:bg-glass-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring ${
+            className={`flex h-8 min-w-0 flex-1 items-center gap-2 rounded-md px-2 text-left transition-colors hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring ${
               missing ? 'opacity-60' : ''
             } ${isActiveGroup ? 'text-fg' : 'text-fg-muted hover:text-fg'}`}
           >
@@ -1451,7 +1451,7 @@ export function SessionsUnderProjects({
           aria-label="New session"
           title="New session (Mod+N)"
           onClick={(e) => onNewSession?.(anchorBelow(e.currentTarget))}
-          className="flex h-8 w-full items-center gap-2 rounded-lg border border-border bg-glass-input px-2.5 text-[13px] font-medium text-fg transition-colors hover:border-border-strong hover:bg-glass-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
+          className="flex h-8 w-full items-center gap-2 rounded-lg border border-border bg-surface-1 px-2.5 text-[13px] font-medium text-fg transition-colors hover:border-border-strong hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
         >
           <SquarePen size={14} strokeWidth={1.8} aria-hidden className="text-fg-muted" />
           New session
@@ -1464,7 +1464,7 @@ export function SessionsUnderProjects({
           aria-label="Add project"
           title="Add a folder as a project"
           onClick={() => onOpenProject?.()}
-          className="flex h-8 w-full items-center gap-2 rounded-lg border border-border bg-glass-input px-2.5 text-[13px] font-medium text-fg transition-colors hover:border-border-strong hover:bg-glass-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
+          className="flex h-8 w-full items-center gap-2 rounded-lg border border-border bg-surface-1 px-2.5 text-[13px] font-medium text-fg transition-colors hover:border-border-strong hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
         >
           <FolderPlus size={14} strokeWidth={1.8} aria-hidden className="text-fg-muted" />
           Add project
@@ -1614,7 +1614,7 @@ export function SidebarSearch({
           }}
           placeholder="Search…"
           aria-label="Search sessions"
-          className="h-7 w-full rounded-lg border border-border bg-glass-input pl-7 pr-2 text-xs text-fg placeholder:text-fg-subtle focus:border-border-strong focus:outline-none"
+          className="h-7 w-full rounded-lg border border-border bg-surface-1 pl-7 pr-2 text-xs text-fg placeholder:text-fg-subtle focus:border-border-strong focus:outline-none"
         />
       </div>
     </div>
diff --git a/apps/desktop/src/renderer/src/shell/Titlebar.tsx b/apps/desktop/src/renderer/src/shell/Titlebar.tsx
index 2af42ddc..4f2a4a99 100644
--- a/apps/desktop/src/renderer/src/shell/Titlebar.tsx
+++ b/apps/desktop/src/renderer/src/shell/Titlebar.tsx
@@ -63,7 +63,7 @@ export function Titlebar({
 
   return (
     <header
-      className="ari-glass flex h-[var(--ari-titlebar-height)] shrink-0 items-center border-b border-border/50"
+      className="flex h-[var(--ari-titlebar-height)] shrink-0 items-center border-b border-border/50 bg-surface-0"
       style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
     >
       <div
@@ -75,7 +75,7 @@ export function Titlebar({
             aria-label="Expand sidebar"
             title="Expand sidebar (Ctrl+B)"
             onClick={onExpandSidebar}
-            className="flex size-7 items-center justify-center rounded-md text-fg-subtle transition-colors hover:bg-glass-hover hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
+            className="flex size-7 items-center justify-center rounded-md text-fg-subtle transition-colors hover:bg-surface-2 hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
             style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
           >
             <PanelLeftOpen size={15} aria-hidden />
@@ -178,7 +178,7 @@ function WindowButton({
       aria-label={label}
       onClick={onClick}
       className={`flex w-11 items-center justify-center text-fg-muted transition-colors ${
-        danger ? 'hover:bg-danger hover:text-fg-on-accent' : 'hover:bg-glass-hover hover:text-fg'
+        danger ? 'hover:bg-danger hover:text-fg-on-accent' : 'hover:bg-surface-2 hover:text-fg'
       }`}
     >
       {children}
diff --git a/apps/desktop/src/renderer/src/styles/index.css b/apps/desktop/src/renderer/src/styles/index.css
index 3e84c4b2..da7f1075 100644
--- a/apps/desktop/src/renderer/src/styles/index.css
+++ b/apps/desktop/src/renderer/src/styles/index.css
@@ -6,7 +6,7 @@
    takes its image URL from the provider rather than a relative `url()`. */
 @import 'tailwindcss';
 @import '@ari/ui/tokens.css';
-@import '@ari/ui/glass.css';
+@import '@ari/ui/surface-effects.css';
 @import '@ari/ui/wallpaper.css';
 @import '@ari/ui/scroll-area.css';
 
@@ -20,7 +20,7 @@
 @source '../../../../../../packages/ui/src';
 
 /* Map Ari tokens onto Tailwind's theme so utilities like `bg-surface-1`
-   resolve to live CSS variables and follow the single glass appearance. */
+   resolve to live CSS variables and follow the active palette. */
 @theme inline {
   --color-bg: var(--ari-bg);
   --color-surface-0: var(--ari-surface-0);
diff --git a/packages/contracts/src/contracts.test.ts b/packages/contracts/src/contracts.test.ts
index c4264f4e..08e22b9d 100644
--- a/packages/contracts/src/contracts.test.ts
+++ b/packages/contracts/src/contracts.test.ts
@@ -201,7 +201,7 @@ describe('contracts', () => {
     expect(settingsUpdateSchema.safeParse({ appearance: { wallpaper: 'aurora' } }).success).toBe(
       false,
     )
-    // The visibility-look field was retired in M26.5 (one uniform glass look);
+    // The visibility-look field was retired in M26.5;
     // zod strips it rather than rejecting, so a stale caller can't write it.
     expect(settingsUpdateSchema.parse({ appearance: { wallpaperLook: 'vivid' } })).toEqual({
       appearance: {},
@@ -233,6 +233,14 @@ describe('contracts', () => {
     expect(parsed.appearance).not.toHaveProperty('wallpaperLook')
   })
 
+  it('drops the retired glass preference from stored settings and patches', () => {
+    const parsed = settingsSchema.parse({ version: 1, appearance: { glass: true } })
+    expect(parsed.appearance).not.toHaveProperty('glass')
+    expect(settingsUpdateSchema.parse({ appearance: { glass: false } })).toEqual({
+      appearance: {},
+    })
+  })
+
   it('validates fs.writeTextFile scope params and rejects malformed payloads', () => {
     const params = { projectId: 'proj_1', path: 'src/main.ts', content: 'export {}\n' }
     expect(rpcParams['fs.writeTextFile'].parse(params)).toEqual(params)
diff --git a/packages/contracts/src/settings.ts b/packages/contracts/src/settings.ts
index 1a836649..0d3b9dab 100644
--- a/packages/contracts/src/settings.ts
+++ b/packages/contracts/src/settings.ts
@@ -32,7 +32,6 @@ export type WallpaperSetting = z.infer<typeof wallpaperSchema>
 const defaultAppearance = {
   themeId: 'obsidian',
   mode: 'system',
-  glass: true,
   reducedMotion: false,
   wallpaper: 'none',
 } as const
@@ -53,8 +52,6 @@ export const settingsSchema = z.object({
         .default(defaultAppearance.themeId),
       /** User's selection: 'system' tracks the OS, otherwise a pinned theme. */
       mode: themeModeSchema.default(defaultAppearance.mode),
-      /** Opt-in translucent chrome; only honored by glass-capable themes. */
-      glass: z.boolean().default(defaultAppearance.glass),
       reducedMotion: z.boolean().default(defaultAppearance.reducedMotion),
       /** Bundled background scene composited under the themed UI, or 'none'. */
       wallpaper: wallpaperSchema.default(defaultAppearance.wallpaper),
@@ -103,7 +100,6 @@ export const settingsUpdateSchema = z.object({
     .object({
       themeId: themeIdSchema,
       mode: themeModeSchema,
-      glass: z.boolean(),
       reducedMotion: z.boolean(),
       wallpaper: wallpaperSchema,
     })
diff --git a/packages/engine/src/settings.test.ts b/packages/engine/src/settings.test.ts
index 1ecc7cb2..37476208 100644
--- a/packages/engine/src/settings.test.ts
+++ b/packages/engine/src/settings.test.ts
@@ -33,7 +33,7 @@ describe('SettingsStore', () => {
     const settings = await store.load()
     expect(settings.appearance.themeId).toBe('obsidian')
     expect(settings.appearance.mode).toBe('system')
-    expect(settings.appearance.glass).toBe(true)
+    expect(settings.appearance).not.toHaveProperty('glass')
     expect(settings.sessions.defaultPermissionMode).toBe('ask')
     const raw: unknown = JSON.parse(await readFile(join(dir, 'settings.json'), 'utf8'))
     expect((raw as { version: number }).version).toBe(1)
@@ -78,12 +78,16 @@ describe('SettingsStore', () => {
     const { writeFile } = await import('node:fs/promises')
     await writeFile(
       join(dir, 'settings.json'),
-      JSON.stringify({ version: 1, appearance: { themeId: 'comet-glass', reducedMotion: true } }),
+      JSON.stringify({
+        version: 1,
+        appearance: { themeId: 'comet-glass', glass: false, reducedMotion: true },
+      }),
       'utf8',
     )
     const settings = await new SettingsStore({ dir }).load()
     expect(settings.appearance.themeId).toBe('obsidian')
     expect(settings.appearance.reducedMotion).toBe(true)
+    expect(settings.appearance).not.toHaveProperty('glass')
   })
 
   it('drops unknown fields via schema validation', async () => {
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 204cb3b6..b13525c4 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "exports": {
     "./tokens.css": "./src/tokens.css",
-    "./glass.css": "./src/glass.css",
+    "./surface-effects.css": "./src/surface-effects.css",
     "./wallpaper.css": "./src/wallpaper.css",
     "./fonts": "./src/fonts.ts",
     "./scroll-area.css": "./src/scroll-area.css",
diff --git a/packages/ui/src/color.ts b/packages/ui/src/color.ts
index ff2a8d0d..9a0ed1cc 100644
--- a/packages/ui/src/color.ts
+++ b/packages/ui/src/color.ts
@@ -78,7 +78,7 @@ function encodeSrgb(channel: number): number {
  * Converts an `oklch(...)` literal to `#rrggbb`. Electron's `backgroundColor`
  * and `titleBarOverlay.symbolColor` only accept hex, so theme colors have to
  * be flattened before they cross into the main process. Alpha is dropped: the
- * window backdrop must be opaque for non-glass themes.
+ * window backdrop must remain opaque.
  * Returns null when the literal cannot be parsed.
  */
 export function oklchToHex(value: string): string | null {
diff --git a/packages/ui/src/components/Dialog.tsx b/packages/ui/src/components/Dialog.tsx
index 99074286..a0123a8b 100644
--- a/packages/ui/src/components/Dialog.tsx
+++ b/packages/ui/src/components/Dialog.tsx
@@ -142,7 +142,7 @@ export function DialogContent({
             variants={menuInVariants}
             style={style}
             className={[
-              'ari-glass-overlay border border-border rounded-lg shadow-2 outline-none',
+              'bg-surface-2 border border-border rounded-lg shadow-2 outline-none',
               SIZE_CLASS[size],
               className,
             ]
diff --git a/packages/ui/src/components/Popover.tsx b/packages/ui/src/components/Popover.tsx
index bee138bc..286faae9 100644
--- a/packages/ui/src/components/Popover.tsx
+++ b/packages/ui/src/components/Popover.tsx
@@ -181,7 +181,7 @@ export function PopoverContent({
           exit="exit"
           variants={menuInVariants}
           style={{ ...floatingStyles, transformOrigin: transformOriginFor(placement), ...style }}
-          className={['z-50 ari-glass-overlay border border-border rounded-lg shadow-2 p-3', className]
+          className={['z-50 bg-surface-2 border border-border rounded-lg shadow-2 p-3', className]
             .filter(Boolean)
             .join(' ')}
           {...rest}
diff --git a/packages/ui/src/glass.css b/packages/ui/src/glass.css
deleted file mode 100644
index f6507f40..00000000
--- a/packages/ui/src/glass.css
+++ /dev/null
@@ -1,131 +0,0 @@
-/*
- * Glass layer — translucent chrome, opt-in per theme.
- *
- * The `.ari-glass*` classes ship OPAQUE by default (surface tokens), because
- * every theme must be legible without a blurred backdrop. Blur + the
- * translucent `--ari-glass-*` planes only apply while <html> carries
- * `data-ari-glass="on"`, which the ThemeProvider sets when the active theme is
- * glass-capable, the user has glass enabled, and the OS does not report
- * reduced transparency.
- *
- * `backdrop-filter` blurs whatever sits behind an element INSIDE the window;
- * the window itself additionally shows the desktop through Electron's native
- * acrylic/vibrancy (main/window.ts), which is likewise only requested for
- * glass themes.
- */
-
-/* Opaque substrate — the baseline every theme renders on. */
-.ari-glass {
-  background: var(--ari-surface-0);
-}
-.ari-glass-overlay {
-  background: var(--ari-surface-2);
-}
-.ari-glass-input {
-  background: var(--ari-surface-1);
-}
-.ari-glass-hover:hover {
-  background: var(--ari-surface-2);
-}
-.ari-glass-active {
-  background: var(--ari-surface-2);
-}
-
-/* Glass on: translucent planes + blur. Shell planes on the window backdrop
-   (sidebar, titlebar, footer). */
-[data-ari-glass='on'] .ari-glass {
-  background: var(--ari-glass-scrim);
-  -webkit-backdrop-filter: blur(28px) saturate(1.35);
-  backdrop-filter: blur(28px) saturate(1.35);
-}
-
-/* Floating surfaces — popovers, menus, dialogs, palette. */
-[data-ari-glass='on'] .ari-glass-overlay {
-  background: var(--ari-glass-overlay);
-  -webkit-backdrop-filter: blur(32px) saturate(1.4);
-  backdrop-filter: blur(32px) saturate(1.4);
-}
-
-/* Input plates / composer pill / cards resting on glass. */
-[data-ari-glass='on'] .ari-glass-input {
-  background: var(--ari-glass-input);
-  -webkit-backdrop-filter: blur(20px) saturate(1.3);
-  backdrop-filter: blur(20px) saturate(1.3);
-}
-
-/* Hover wash for rows and buttons sitting ON glass — one recipe both places,
-   selection adds only a ring (comet glass_hover). */
-[data-ari-glass='on'] .ari-glass-hover:hover {
-  background: var(--ari-glass-hover);
-}
-[data-ari-glass='on'] .ari-glass-active {
-  background: var(--ari-glass-active);
-}
-
-/* Modern haptic depth & double-bezel layered materials */
-.ari-double-bezel {
-  position: relative;
-  box-shadow:
-    inset 0 1px 0 0 var(--ari-inner-stroke),
-    var(--ari-shadow-3);
-}
-
-.ari-composer-shell {
-  background: var(--ari-surface-1);
-  border: 1px solid var(--ari-border);
-  box-shadow:
-    inset 0 1px 0 0 var(--ari-inner-stroke),
-    var(--ari-shadow-3);
-  transition:
-    border-color var(--ari-dur-fast) var(--ari-ease-out-expo),
-    box-shadow var(--ari-dur-fast) var(--ari-ease-out-expo);
-}
-
-.ari-composer-shell:focus-within {
-  border-color: var(--ari-border-strong);
-  box-shadow:
-    inset 0 1px 0 0 var(--ari-border),
-    0 0 0 1px var(--ari-accent-ring),
-    var(--ari-shadow-3);
-}
-
-[data-ari-glass='on'] .ari-composer-shell {
-  background: var(--ari-glass-input);
-  -webkit-backdrop-filter: blur(28px) saturate(1.4);
-  backdrop-filter: blur(28px) saturate(1.4);
-}
-
-.ari-card-elevated {
-  background: var(--ari-surface-1);
-  border: 1px solid var(--ari-border);
-  box-shadow:
-    inset 0 1px 0 0 var(--ari-inner-stroke),
-    var(--ari-shadow-1);
-  transition:
-    background-color var(--ari-dur-fast) var(--ari-ease-out-expo),
-    border-color var(--ari-dur-fast) var(--ari-ease-out-expo),
-    box-shadow var(--ari-dur-fast) var(--ari-ease-out-expo);
-}
-
-.ari-card-elevated:hover {
-  border-color: var(--ari-border-strong);
-  background: var(--ari-surface-2);
-  box-shadow:
-    inset 0 1px 0 0 var(--ari-border),
-    var(--ari-shadow-2);
-}
-
-.ari-glow-pill {
-  position: relative;
-  isolation: isolate;
-}
-
-.ari-glow-pill::after {
-  content: '';
-  position: absolute;
-  inset: -1px;
-  border-radius: inherit;
-  background: radial-gradient(circle at 50% 0%, var(--ari-accent-subtle), transparent 70%);
-  pointer-events: none;
-  opacity: 0.8;
-}
diff --git a/packages/ui/src/surface-effects.css b/packages/ui/src/surface-effects.css
new file mode 100644
index 00000000..f79fa8d5
--- /dev/null
+++ b/packages/ui/src/surface-effects.css
@@ -0,0 +1,62 @@
+/* Shared depth and focus treatments for elevated surfaces. */
+
+.ari-double-bezel {
+  position: relative;
+  box-shadow:
+    inset 0 1px 0 0 var(--ari-inner-stroke),
+    var(--ari-shadow-3);
+}
+
+.ari-composer-shell {
+  background: var(--ari-surface-1);
+  border: 1px solid var(--ari-border);
+  box-shadow:
+    inset 0 1px 0 0 var(--ari-inner-stroke),
+    var(--ari-shadow-3);
+  transition:
+    border-color var(--ari-dur-fast) var(--ari-ease-out-expo),
+    box-shadow var(--ari-dur-fast) var(--ari-ease-out-expo);
+}
+
+.ari-composer-shell:focus-within {
+  border-color: var(--ari-border-strong);
+  box-shadow:
+    inset 0 1px 0 0 var(--ari-border),
+    0 0 0 1px var(--ari-accent-ring),
+    var(--ari-shadow-3);
+}
+
+.ari-card-elevated {
+  background: var(--ari-surface-1);
+  border: 1px solid var(--ari-border);
+  box-shadow:
+    inset 0 1px 0 0 var(--ari-inner-stroke),
+    var(--ari-shadow-1);
+  transition:
+    background-color var(--ari-dur-fast) var(--ari-ease-out-expo),
+    border-color var(--ari-dur-fast) var(--ari-ease-out-expo),
+    box-shadow var(--ari-dur-fast) var(--ari-ease-out-expo);
+}
+
+.ari-card-elevated:hover {
+  border-color: var(--ari-border-strong);
+  background: var(--ari-surface-2);
+  box-shadow:
+    inset 0 1px 0 0 var(--ari-border),
+    var(--ari-shadow-2);
+}
+
+.ari-glow-pill {
+  position: relative;
+  isolation: isolate;
+}
+
+.ari-glow-pill::after {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  background: radial-gradient(circle at 50% 0%, var(--ari-accent-subtle), transparent 70%);
+  pointer-events: none;
+  opacity: 0.8;
+}
diff --git a/packages/ui/src/theme-provider.test.tsx b/packages/ui/src/theme-provider.test.tsx
index b08e3bf8..eb7763d0 100644
--- a/packages/ui/src/theme-provider.test.tsx
+++ b/packages/ui/src/theme-provider.test.tsx
@@ -23,22 +23,19 @@ function Probe() {
     themeId,
     mode,
     resolvedScheme,
-    glassEnabled,
     setTheme,
     setMode,
-    setGlass,
     wallpaper,
     setWallpaper,
   } = useTheme()
   return (
     <div>
       <output data-testid="state">
-        {`${themeId}|${mode}|${resolvedScheme}|${glassEnabled}|${wallpaper}`}
+        {`${themeId}|${mode}|${resolvedScheme}|${wallpaper}`}
       </output>
       <button onClick={() => setTheme('porcelain')}>light</button>
       <button onClick={() => setTheme('nocturne')}>nocturne</button>
       <button onClick={() => setMode('system')}>system</button>
-      <button onClick={() => setGlass(false)}>glass off</button>
       <button onClick={() => setWallpaper('anime-city')}>wallpaper on</button>
       <button onClick={() => setWallpaper('none')}>wallpaper off</button>
     </div>
@@ -65,8 +62,8 @@ describe('ThemeProvider', () => {
     )
     await waitFor(() => expect(root()['ariTheme']).toBe('obsidian'))
     expect(root()['ariScheme']).toBe('dark')
-    expect(root()['ariGlass']).toBe('on')
-    expect(screen.getByTestId('state')).toHaveTextContent('obsidian|system|dark|true|none')
+    expect(root()['ariGlass']).toBeUndefined()
+    expect(screen.getByTestId('state')).toHaveTextContent('obsidian|system|dark|none')
   })
 
   it('picks the light theme when the OS prefers light', async () => {
@@ -78,8 +75,7 @@ describe('ThemeProvider', () => {
     )
     await waitFor(() => expect(root()['ariTheme']).toBe('porcelain'))
     expect(root()['ariScheme']).toBe('light')
-    // Porcelain is opaque, so glass is off even though the user opted in.
-    expect(root()['ariGlass']).toBe('off')
+    expect(root()['ariGlass']).toBeUndefined()
   })
 
   it('swaps both attributes when a theme is pinned', async () => {
@@ -92,41 +88,16 @@ describe('ThemeProvider', () => {
     await user.click(screen.getByText('light'))
     await waitFor(() => expect(root()['ariTheme']).toBe('porcelain'))
     expect(root()['ariScheme']).toBe('light')
-    expect(screen.getByTestId('state')).toHaveTextContent('porcelain|porcelain|light|false|none')
+    expect(screen.getByTestId('state')).toHaveTextContent('porcelain|porcelain|light|none')
 
     await user.click(screen.getByText('system'))
     await waitFor(() => expect(root()['ariTheme']).toBe('obsidian'))
   })
 
-  it('honors the glass opt-out on a glass-capable theme', async () => {
-    render(
-      <ThemeProvider>
-        <Probe />
-      </ThemeProvider>,
-    )
-    const user = userEvent.setup()
-    await user.click(screen.getByText('nocturne'))
-    await waitFor(() => expect(root()['ariGlass']).toBe('on'))
-    await user.click(screen.getByText('glass off'))
-    await waitFor(() => expect(root()['ariGlass']).toBe('off'))
-  })
-
-  it('forces glass off under prefers-reduced-transparency', async () => {
-    stubMatchMedia(['prefers-color-scheme: dark', 'prefers-reduced-transparency'])
-    render(
-      <ThemeProvider>
-        <Probe />
-      </ThemeProvider>,
-    )
-    await waitFor(() => expect(root()['ariTheme']).toBe('obsidian'))
-    expect(root()['ariGlass']).toBe('off')
-    expect(screen.getByTestId('state')).toHaveTextContent('obsidian|system|dark|false|none')
-  })
-
   it('round-trips preferences through the injected persistence', async () => {
     const saved: unknown[] = []
     const persistence: ThemePersistence = {
-      load: () => Promise.resolve({ mode: 'verdant', glass: false, wallpaper: 'anime-city' }),
+      load: () => Promise.resolve({ mode: 'verdant', wallpaper: 'anime-city' }),
       save: (prefs) => {
         saved.push(prefs)
         return Promise.resolve()
@@ -141,7 +112,6 @@ describe('ThemeProvider', () => {
     await waitFor(() =>
       expect(saved).toContainEqual({
         mode: 'verdant',
-        glass: false,
         wallpaper: 'anime-city',
         themeId: 'verdant',
       }),
@@ -196,7 +166,7 @@ describe('ThemeProvider', () => {
   it('paints the cached scene URL before React mounts', () => {
     localStorage.setItem(
       'ari.theme',
-      JSON.stringify({ mode: 'obsidian', glass: true, wallpaper: 'moon-landscape' }),
+      JSON.stringify({ mode: 'obsidian', wallpaper: 'moon-landscape' }),
     )
     stubMatchMedia(['prefers-color-scheme: dark'])
     applyCachedTheme()
@@ -208,7 +178,7 @@ describe('ThemeProvider', () => {
   it('ignores a retired look field in the durable copy and the cache', async () => {
     const persistence: ThemePersistence = {
       load: () =>
-        Promise.resolve({ mode: 'verdant', glass: false, wallpaperLook: 'vivid' } as never),
+        Promise.resolve({ mode: 'verdant', wallpaperLook: 'vivid' } as never),
       save: () => Promise.resolve(),
     }
     const { unmount } = render(
@@ -223,7 +193,7 @@ describe('ThemeProvider', () => {
 
     localStorage.setItem(
       'ari.theme',
-      JSON.stringify({ mode: 'verdant', glass: false, wallpaper: 'anime-city', wallpaperLook: 'vivid' }),
+      JSON.stringify({ mode: 'verdant', wallpaper: 'anime-city', wallpaperLook: 'vivid' }),
     )
     applyCachedTheme()
     // The scene still paints pre-hydration; the stale look is simply ignored.
@@ -233,8 +203,8 @@ describe('ThemeProvider', () => {
 
   it('never saves the cached default over the durable copy before it loads', async () => {
     const saved: unknown[] = []
-    let release: (value: { mode: 'verdant'; glass: false }) => void = () => undefined
-    const pending = new Promise<{ mode: 'verdant'; glass: false }>((resolve) => {
+    let release: (value: { mode: 'verdant' }) => void = () => undefined
+    const pending = new Promise<{ mode: 'verdant' }>((resolve) => {
       release = resolve
     })
     const persistence: ThemePersistence = {
@@ -251,10 +221,10 @@ describe('ThemeProvider', () => {
     )
     // The cache says 'system'; saving that now would erase the stored verdant.
     expect(saved).toEqual([])
-    release({ mode: 'verdant', glass: false })
+    release({ mode: 'verdant' })
     await waitFor(() => expect(root()['ariTheme']).toBe('verdant'))
     expect(saved).toEqual([
-      { mode: 'verdant', glass: false, wallpaper: 'none', themeId: 'verdant' },
+      { mode: 'verdant', wallpaper: 'none', themeId: 'verdant' },
     ])
   })
 
@@ -277,16 +247,15 @@ describe('applyCachedTheme', () => {
     localStorage.setItem('ari.theme', JSON.stringify({ mode: 'porcelain', glass: true }))
     stubMatchMedia([])
     applyCachedTheme()
-    // Porcelain is light and opaque, so no glass regardless of the opt-in.
     expect(root()['ariTheme']).toBe('porcelain')
     expect(root()['ariScheme']).toBe('light')
-    expect(root()['ariGlass']).toBe('off')
+    expect(root()['ariGlass']).toBeUndefined()
   })
 
   it('paints the cached wallpaper attribute before React mounts', () => {
     localStorage.setItem(
       'ari.theme',
-      JSON.stringify({ mode: 'nocturne', glass: true, wallpaper: 'moon-landscape' }),
+      JSON.stringify({ mode: 'nocturne', wallpaper: 'moon-landscape' }),
     )
     stubMatchMedia(['prefers-color-scheme: dark'])
     applyCachedTheme()
@@ -296,7 +265,7 @@ describe('applyCachedTheme', () => {
   it('drops a stale wallpaper cache value and leaves no attribute', () => {
     localStorage.setItem(
       'ari.theme',
-      JSON.stringify({ mode: 'obsidian', glass: true, wallpaper: 'aurora-borealis' }),
+      JSON.stringify({ mode: 'obsidian', wallpaper: 'aurora-borealis' }),
     )
     stubMatchMedia(['prefers-color-scheme: dark'])
     applyCachedTheme()
@@ -307,6 +276,6 @@ describe('applyCachedTheme', () => {
     stubMatchMedia(['prefers-color-scheme: dark'])
     applyCachedTheme()
     expect(root()['ariTheme']).toBe('obsidian')
-    expect(root()['ariGlass']).toBe('on')
+    expect(root()['ariGlass']).toBeUndefined()
   })
 })
diff --git a/packages/ui/src/theme-provider.tsx b/packages/ui/src/theme-provider.tsx
index cf489b3f..e7e8e941 100644
--- a/packages/ui/src/theme-provider.tsx
+++ b/packages/ui/src/theme-provider.tsx
@@ -6,11 +6,10 @@ import { isWallpaperSetting, wallpapers } from './wallpapers'
 import type { WallpaperSetting } from './wallpapers'
 
 /**
- * Theme engine. Owns the active theme, the `system` follow mode, the glass
- * opt-in, and the wallpaper selection, and reflects them onto `<html>` as
- * `data-ari-theme`, `data-ari-scheme`, `data-ari-glass` and
- * `data-ari-wallpaper` — the hooks tokens.css, glass.css and wallpaper.css
- * key off, so no component needs to know which theme is active.
+ * Theme engine. Owns the active theme, the `system` follow mode, and the
+ * wallpaper selection, and reflects them onto `<html>` as `data-ari-theme`,
+ * `data-ari-scheme`, and `data-ari-wallpaper` so no component needs to know
+ * which theme is active.
  *
  * Persistence is injected (`persistence` prop) because @ari/ui must not depend
  * on the desktop RPC client; the renderer passes an engine-settings adapter.
@@ -23,9 +22,7 @@ export type ThemeMode = 'system' | ThemeId
 
 export interface ThemePreferences {
   mode: ThemeMode
-  /** Glass opt-in; only glass-capable themes act on it. */
-  glass: boolean
-  /** Bundled background scene the app's glass shows, or 'none'. */
+  /** Bundled background scene shown behind the themed UI, or 'none'. */
   wallpaper: WallpaperSetting
 }
 
@@ -45,11 +42,6 @@ export interface ThemeContextValue {
   mode: ThemeMode
   setMode: (mode: ThemeMode) => void
   resolvedScheme: 'light' | 'dark'
-  /** True when translucent chrome is actually in effect. */
-  glassEnabled: boolean
-  /** The raw opt-in, independent of theme capability / reduced transparency. */
-  glassPreference: boolean
-  setGlass: (enabled: boolean) => void
   /** Active wallpaper selection ('none' = plain theme background). */
   wallpaper: WallpaperSetting
   setWallpaper: (wallpaper: WallpaperSetting) => void
@@ -73,14 +65,12 @@ function readCache(): ThemePreferences {
     if (raw) {
       const parsed: unknown = JSON.parse(raw)
       if (parsed && typeof parsed === 'object') {
-        const { mode, glass, wallpaper } = parsed as {
+        const { mode, wallpaper } = parsed as {
           mode?: unknown
-          glass?: unknown
           wallpaper?: unknown
         }
         return {
           mode: mode === 'system' || isThemeId(mode) ? mode : 'system',
-          glass: typeof glass === 'boolean' ? glass : true,
           wallpaper: isWallpaperSetting(wallpaper) ? wallpaper : 'none',
         }
       }
@@ -88,7 +78,7 @@ function readCache(): ThemePreferences {
   } catch {
     // storage unavailable or corrupt — defaults apply
   }
-  return { mode: 'system', glass: true, wallpaper: 'none' }
+  return { mode: 'system', wallpaper: 'none' }
 }
 
 function writeCache(prefs: ThemePreferences): void {
@@ -134,8 +124,7 @@ export function applyCachedTheme(): void {
   const root = document.documentElement
   root.dataset['ariTheme'] = theme.id
   root.dataset['ariScheme'] = theme.scheme
-  const glass = theme.glass && prefs.glass && !matches('(prefers-reduced-transparency: reduce)')
-  root.dataset['ariGlass'] = glass ? 'on' : 'off'
+  delete root.dataset['ariGlass']
   applyWallpaperAttr(root, prefs.wallpaper)
 }
 
@@ -166,7 +155,6 @@ export function ThemeProvider({
 }) {
   const [prefs, setPrefs] = useState<ThemePreferences>(readCache)
   const prefersDark = useMediaQuery('(prefers-color-scheme: dark)')
-  const reducedTransparency = useMediaQuery('(prefers-reduced-transparency: reduce)')
   // Gates the save effect: writing the localStorage cache back before the
   // durable copy has been read would clobber it with a stale value.
   const [hydrated, setHydrated] = useState(!persistence)
@@ -181,7 +169,6 @@ export function ThemeProvider({
         if (stored) {
           setPrefs((current) => ({
             mode: stored.mode === 'system' || isThemeId(stored.mode) ? stored.mode : current.mode,
-            glass: typeof stored.glass === 'boolean' ? stored.glass : current.glass,
             wallpaper: isWallpaperSetting(stored.wallpaper) ? stored.wallpaper : current.wallpaper,
           }))
         }
@@ -200,15 +187,14 @@ export function ThemeProvider({
 
   const theme =
     prefs.mode === 'system' ? systemTheme(prefersDark) : (themes[prefs.mode] ?? themes[defaultThemeId])
-  const glassEnabled = theme.glass && prefs.glass && !reducedTransparency
 
   useEffect(() => {
     const root = document.documentElement
     root.dataset['ariTheme'] = theme.id
     root.dataset['ariScheme'] = theme.scheme
-    root.dataset['ariGlass'] = glassEnabled ? 'on' : 'off'
+    delete root.dataset['ariGlass']
     applyWallpaperAttr(root, prefs.wallpaper)
-  }, [theme.id, theme.scheme, glassEnabled, prefs.wallpaper])
+  }, [theme.id, theme.scheme, prefs.wallpaper])
 
   useEffect(() => {
     writeCache(prefs)
@@ -220,9 +206,6 @@ export function ThemeProvider({
     setPrefs((current) => ({ ...current, mode }))
   }, [])
   const setTheme = useCallback((id: ThemeId) => setMode(id), [setMode])
-  const setGlass = useCallback((glass: boolean) => {
-    setPrefs((current) => ({ ...current, glass }))
-  }, [])
   const setWallpaper = useCallback((wallpaper: WallpaperSetting) => {
     setPrefs((current) => ({ ...current, wallpaper }))
   }, [])
@@ -235,13 +218,10 @@ export function ThemeProvider({
       mode: prefs.mode,
       setMode,
       resolvedScheme: theme.scheme,
-      glassEnabled,
-      glassPreference: prefs.glass,
-      setGlass,
       wallpaper: prefs.wallpaper,
       setWallpaper,
     }),
-    [theme, setTheme, prefs.mode, setMode, glassEnabled, prefs.glass, setGlass, prefs.wallpaper, setWallpaper],
+    [theme, setTheme, prefs.mode, setMode, prefs.wallpaper, setWallpaper],
   )
 
   return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
diff --git a/packages/ui/src/themes.test.ts b/packages/ui/src/themes.test.ts
index b54b61b6..06c3e996 100644
--- a/packages/ui/src/themes.test.ts
+++ b/packages/ui/src/themes.test.ts
@@ -25,8 +25,6 @@ describe('theme registry', () => {
     expect(themeIds).toHaveLength(6)
     expect(themeList.filter((t) => t.scheme === 'dark').length).toBeGreaterThanOrEqual(2)
     expect(themeList.filter((t) => t.scheme === 'light')).toHaveLength(2)
-    expect(themeList.some((t) => t.glass)).toBe(true)
-    expect(themeList.some((t) => !t.glass)).toBe(true)
   })
 
   it.each(themeList)('$id defines every color role exactly once', (theme) => {
diff --git a/packages/ui/src/themes.ts b/packages/ui/src/themes.ts
index 14cee8dd..fa2cf743 100644
--- a/packages/ui/src/themes.ts
+++ b/packages/ui/src/themes.ts
@@ -40,11 +40,6 @@ export const themeColorRoles = [
   'info-subtle',
   'busy',
   'busy-subtle',
-  'glass-scrim',
-  'glass-overlay',
-  'glass-input',
-  'glass-hover',
-  'glass-active',
   'shadow-1',
   'shadow-2',
   'shadow-3',
@@ -67,8 +62,6 @@ export interface Theme {
   /** One-line description shown under the label in the picker. */
   description: string
   scheme: 'light' | 'dark'
-  /** Whether the theme opts into translucent chrome (acrylic/vibrancy + blur). */
-  glass: boolean
   colors: Record<ThemeColorRole, string>
 }
 
@@ -77,9 +70,8 @@ export const defaultThemeId: ThemeId = 'obsidian'
 const obsidian: Theme = {
   id: 'obsidian',
   label: 'Obsidian',
-  description: 'Near-black glass with an indigo accent. Ari’s signature look.',
+  description: 'Near-black surfaces with an indigo accent. Ari’s signature look.',
   scheme: 'dark',
-  glass: true,
   colors: {
     bg: 'oklch(0.095 0.008 278)',
     'surface-0': 'oklch(0.12 0.011 278)',
@@ -109,11 +101,6 @@ const obsidian: Theme = {
     'info-subtle': 'oklch(0.78 0.13 212 / 14%)',
     busy: 'oklch(0.72 0.2 350)',
     'busy-subtle': 'oklch(0.72 0.2 350 / 14%)',
-    'glass-scrim': 'oklch(0.088 0.009 278 / 78%)',
-    'glass-overlay': 'oklch(0.33 0.028 278 / 34%)',
-    'glass-input': 'oklch(0.95 0.012 278 / 4.5%)',
-    'glass-hover': 'oklch(0.93 0.012 278 / 9%)',
-    'glass-active': 'oklch(0.93 0.012 278 / 14%)',
     'shadow-1': '0 1px 2px oklch(0 0 0 / 35%)',
     'shadow-2': '0 4px 16px oklch(0 0 0 / 40%)',
     'shadow-3': '0 12px 40px oklch(0 0 0 / 50%)',
@@ -123,9 +110,8 @@ const obsidian: Theme = {
 const graphite: Theme = {
   id: 'graphite',
   label: 'Graphite',
-  description: 'Opaque warm charcoal with a warm amber accent. No blur.',
+  description: 'Warm charcoal surfaces with a warm amber accent.',
   scheme: 'dark',
-  glass: false,
   colors: {
     bg: 'oklch(0.145 0.006 65)',
     'surface-0': 'oklch(0.185 0.007 65)',
@@ -155,11 +141,6 @@ const graphite: Theme = {
     'info-subtle': 'oklch(0.76 0.11 235 / 15%)',
     busy: 'oklch(0.75 0.15 330)',
     'busy-subtle': 'oklch(0.75 0.15 330 / 15%)',
-    'glass-scrim': 'oklch(0.185 0.007 65)',
-    'glass-overlay': 'oklch(0.28 0.011 65)',
-    'glass-input': 'oklch(0.23 0.009 65)',
-    'glass-hover': 'oklch(0.95 0.008 70 / 8%)',
-    'glass-active': 'oklch(0.95 0.008 70 / 13%)',
     'shadow-1': '0 1px 2px oklch(0 0 0 / 40%)',
     'shadow-2': '0 4px 16px oklch(0 0 0 / 45%)',
     'shadow-3': '0 12px 40px oklch(0 0 0 / 55%)',
@@ -169,9 +150,8 @@ const graphite: Theme = {
 const nocturne: Theme = {
   id: 'nocturne',
   label: 'Nocturne',
-  description: 'Deep indigo night with a cyan accent and frosted chrome.',
+  description: 'Deep indigo surfaces with a cyan accent.',
   scheme: 'dark',
-  glass: true,
   colors: {
     bg: 'oklch(0.13 0.032 271)',
     'surface-0': 'oklch(0.165 0.036 271)',
@@ -201,11 +181,6 @@ const nocturne: Theme = {
     'info-subtle': 'oklch(0.78 0.115 255 / 15%)',
     busy: 'oklch(0.75 0.17 305)',
     'busy-subtle': 'oklch(0.75 0.17 305 / 15%)',
-    'glass-scrim': 'oklch(0.13 0.032 271 / 76%)',
-    'glass-overlay': 'oklch(0.32 0.05 268 / 32%)',
-    'glass-input': 'oklch(0.9 0.04 250 / 6%)',
-    'glass-hover': 'oklch(0.92 0.03 250 / 9%)',
-    'glass-active': 'oklch(0.92 0.03 250 / 14%)',
     'shadow-1': '0 1px 2px oklch(0.05 0.03 270 / 45%)',
     'shadow-2': '0 4px 16px oklch(0.05 0.03 270 / 50%)',
     'shadow-3': '0 12px 40px oklch(0.04 0.03 270 / 60%)',
@@ -215,9 +190,8 @@ const nocturne: Theme = {
 const verdant: Theme = {
   id: 'verdant',
   label: 'Verdant',
-  description: 'Dark moss surfaces with a lime accent. Opaque and low-glare.',
+  description: 'Dark moss surfaces with a lime accent. Low-glare.',
   scheme: 'dark',
-  glass: false,
   colors: {
     bg: 'oklch(0.145 0.024 152)',
     'surface-0': 'oklch(0.18 0.027 152)',
@@ -247,11 +221,6 @@ const verdant: Theme = {
     'info-subtle': 'oklch(0.79 0.11 215 / 15%)',
     busy: 'oklch(0.78 0.15 195)',
     'busy-subtle': 'oklch(0.78 0.15 195 / 15%)',
-    'glass-scrim': 'oklch(0.18 0.027 152)',
-    'glass-overlay': 'oklch(0.27 0.034 150)',
-    'glass-input': 'oklch(0.22 0.03 151)',
-    'glass-hover': 'oklch(0.92 0.03 150 / 8%)',
-    'glass-active': 'oklch(0.92 0.03 150 / 13%)',
     'shadow-1': '0 1px 2px oklch(0.05 0.02 150 / 42%)',
     'shadow-2': '0 4px 16px oklch(0.05 0.02 150 / 48%)',
     'shadow-3': '0 12px 40px oklch(0.04 0.02 150 / 58%)',
@@ -263,7 +232,6 @@ const porcelain: Theme = {
   label: 'Porcelain',
   description: 'Cool off-white paper with a soft violet accent.',
   scheme: 'light',
-  glass: false,
   colors: {
     bg: 'oklch(0.985 0.003 285)',
     'surface-0': 'oklch(0.968 0.006 285)',
@@ -293,11 +261,6 @@ const porcelain: Theme = {
     'info-subtle': 'oklch(0.5 0.14 250 / 13%)',
     busy: 'oklch(0.52 0.19 340)',
     'busy-subtle': 'oklch(0.52 0.19 340 / 13%)',
-    'glass-scrim': 'oklch(0.99 0.003 285 / 82%)',
-    'glass-overlay': 'oklch(1 0 0 / 78%)',
-    'glass-input': 'oklch(1 0 0 / 72%)',
-    'glass-hover': 'oklch(0.28 0.02 285 / 6%)',
-    'glass-active': 'oklch(0.28 0.02 285 / 11%)',
     'shadow-1': '0 1px 2px oklch(0.3 0.02 285 / 10%)',
     'shadow-2': '0 4px 16px oklch(0.3 0.02 285 / 12%)',
     'shadow-3': '0 12px 40px oklch(0.3 0.02 285 / 16%)',
@@ -309,7 +272,6 @@ const sandstone: Theme = {
   label: 'Sandstone',
   description: 'Warm paper tones with a deep teal accent.',
   scheme: 'light',
-  glass: false,
   colors: {
     bg: 'oklch(0.975 0.012 84)',
     'surface-0': 'oklch(0.955 0.017 82)',
@@ -339,11 +301,6 @@ const sandstone: Theme = {
     'info-subtle': 'oklch(0.505 0.13 240 / 13%)',
     busy: 'oklch(0.52 0.17 350)',
     'busy-subtle': 'oklch(0.52 0.17 350 / 13%)',
-    'glass-scrim': 'oklch(0.98 0.012 84 / 84%)',
-    'glass-overlay': 'oklch(0.995 0.008 84 / 80%)',
-    'glass-input': 'oklch(1 0.004 84 / 74%)',
-    'glass-hover': 'oklch(0.3 0.03 62 / 7%)',
-    'glass-active': 'oklch(0.3 0.03 62 / 12%)',
     'shadow-1': '0 1px 2px oklch(0.35 0.04 62 / 12%)',
     'shadow-2': '0 4px 16px oklch(0.35 0.04 62 / 14%)',
     'shadow-3': '0 12px 40px oklch(0.35 0.04 62 / 18%)',
diff --git a/packages/ui/src/tokens.css b/packages/ui/src/tokens.css
index 2b119f34..433e7fde 100644
--- a/packages/ui/src/tokens.css
+++ b/packages/ui/src/tokens.css
@@ -76,7 +76,7 @@ html {
   --ari-dur-slow: 260ms;
 }
 
-/* Obsidian — Near-black glass with an indigo accent. Ari’s signature look. (dark, glass-capable) */
+/* Obsidian — Near-black surfaces with an indigo accent. Ari’s signature look. */
 :root,
 [data-ari-theme='obsidian'] {
   /* surfaces */
@@ -118,12 +118,6 @@ html {
   --ari-busy: oklch(0.72 0.2 350);
   --ari-busy-subtle: oklch(0.72 0.2 350 / 14%);
 
-  /* glass planes (opaque in non-glass themes) */
-  --ari-glass-scrim: oklch(0.088 0.009 278 / 78%);
-  --ari-glass-overlay: oklch(0.33 0.028 278 / 34%);
-  --ari-glass-input: oklch(0.95 0.012 278 / 4.5%);
-  --ari-glass-hover: oklch(0.93 0.012 278 / 9%);
-  --ari-glass-active: oklch(0.93 0.012 278 / 14%);
 
   /* elevation */
   --ari-shadow-1: 0 1px 2px oklch(0 0 0 / 35%);
@@ -173,12 +167,6 @@ html {
   --ari-busy: oklch(0.75 0.15 330);
   --ari-busy-subtle: oklch(0.75 0.15 330 / 15%);
 
-  /* glass planes (opaque in non-glass themes) */
-  --ari-glass-scrim: oklch(0.185 0.007 65);
-  --ari-glass-overlay: oklch(0.28 0.011 65);
-  --ari-glass-input: oklch(0.23 0.009 65);
-  --ari-glass-hover: oklch(0.95 0.008 70 / 8%);
-  --ari-glass-active: oklch(0.95 0.008 70 / 13%);
 
   /* elevation */
   --ari-shadow-1: 0 1px 2px oklch(0 0 0 / 40%);
@@ -188,7 +176,7 @@ html {
   color-scheme: dark;
 }
 
-/* Nocturne — Deep indigo night with a cyan accent and frosted chrome. (dark, glass-capable) */
+/* Nocturne — Deep indigo surfaces with a cyan accent. */
 [data-ari-theme='nocturne'] {
   /* surfaces */
   --ari-bg: oklch(0.13 0.032 271);
@@ -228,12 +216,6 @@ html {
   --ari-busy: oklch(0.75 0.17 305);
   --ari-busy-subtle: oklch(0.75 0.17 305 / 15%);
 
-  /* glass planes (opaque in non-glass themes) */
-  --ari-glass-scrim: oklch(0.13 0.032 271 / 76%);
-  --ari-glass-overlay: oklch(0.32 0.05 268 / 32%);
-  --ari-glass-input: oklch(0.9 0.04 250 / 6%);
-  --ari-glass-hover: oklch(0.92 0.03 250 / 9%);
-  --ari-glass-active: oklch(0.92 0.03 250 / 14%);
 
   /* elevation */
   --ari-shadow-1: 0 1px 2px oklch(0.05 0.03 270 / 45%);
@@ -283,12 +265,6 @@ html {
   --ari-busy: oklch(0.78 0.15 195);
   --ari-busy-subtle: oklch(0.78 0.15 195 / 15%);
 
-  /* glass planes (opaque in non-glass themes) */
-  --ari-glass-scrim: oklch(0.18 0.027 152);
-  --ari-glass-overlay: oklch(0.27 0.034 150);
-  --ari-glass-input: oklch(0.22 0.03 151);
-  --ari-glass-hover: oklch(0.92 0.03 150 / 8%);
-  --ari-glass-active: oklch(0.92 0.03 150 / 13%);
 
   /* elevation */
   --ari-shadow-1: 0 1px 2px oklch(0.05 0.02 150 / 42%);
@@ -338,12 +314,6 @@ html {
   --ari-busy: oklch(0.52 0.19 340);
   --ari-busy-subtle: oklch(0.52 0.19 340 / 13%);
 
-  /* glass planes (opaque in non-glass themes) */
-  --ari-glass-scrim: oklch(0.99 0.003 285 / 82%);
-  --ari-glass-overlay: oklch(1 0 0 / 78%);
-  --ari-glass-input: oklch(1 0 0 / 72%);
-  --ari-glass-hover: oklch(0.28 0.02 285 / 6%);
-  --ari-glass-active: oklch(0.28 0.02 285 / 11%);
 
   /* elevation */
   --ari-shadow-1: 0 1px 2px oklch(0.3 0.02 285 / 10%);
@@ -393,12 +363,6 @@ html {
   --ari-busy: oklch(0.52 0.17 350);
   --ari-busy-subtle: oklch(0.52 0.17 350 / 13%);
 
-  /* glass planes (opaque in non-glass themes) */
-  --ari-glass-scrim: oklch(0.98 0.012 84 / 84%);
-  --ari-glass-overlay: oklch(0.995 0.008 84 / 80%);
-  --ari-glass-input: oklch(1 0.004 84 / 74%);
-  --ari-glass-hover: oklch(0.3 0.03 62 / 7%);
-  --ari-glass-active: oklch(0.3 0.03 62 / 12%);
 
   /* elevation */
   --ari-shadow-1: 0 1px 2px oklch(0.35 0.04 62 / 12%);
diff --git a/packages/ui/src/wallpaper-css.test.ts b/packages/ui/src/wallpaper-css.test.ts
index b41bdbda..12e69790 100644
--- a/packages/ui/src/wallpaper-css.test.ts
+++ b/packages/ui/src/wallpaper-css.test.ts
@@ -11,15 +11,15 @@ import { describe, expect, it } from 'vitest'
 const css = readFileSync(resolve(process.cwd(), 'src/wallpaper.css'), 'utf8')
 
 describe('wallpaper.css', () => {
-  it('paints one continuous plate carrying the glass recipe', () => {
-    expect(css).toContain('[data-ari-wallpaper] .ari-glass-pane {')
-    expect(css).toMatch(/\.ari-glass-pane \{[^}]*background: var\(--ari-glass-scrim\)/)
-    expect(css).toMatch(/\.ari-glass-pane \{[^}]*backdrop-filter: blur\(28px\) saturate\(1\.35\)/)
+  it('paints one continuous wallpaper pane', () => {
+    expect(css).toContain('[data-ari-wallpaper] .ari-wallpaper-pane {')
+    expect(css).toMatch(/\.ari-wallpaper-pane \{[^}]*background: var\(--ari-wallpaper-pane\)/)
+    expect(css).toMatch(/\.ari-wallpaper-pane \{[^}]*backdrop-filter: blur\(28px\) saturate\(1\.35\)/)
   })
 
   it('neutralizes nested chrome and pane fills so no surface double-tints', () => {
-    expect(css).toContain('[data-ari-wallpaper] .ari-glass-pane .ari-glass,')
-    expect(css).toContain('[data-ari-wallpaper] .ari-glass-pane .bg-bg {')
+    expect(css).toContain('[data-ari-wallpaper] .ari-wallpaper-pane .bg-surface-0,')
+    expect(css).toContain('[data-ari-wallpaper] .ari-wallpaper-pane .bg-bg {')
     expect(css).toMatch(/\.bg-bg \{[^}]*background-color: transparent/)
   })
 
@@ -41,7 +41,7 @@ describe('wallpaper.css', () => {
     expect(css).toContain('@media (prefers-reduced-transparency: reduce)')
     const media = css.slice(css.indexOf('@media (prefers-reduced-transparency: reduce)'))
     expect(media).toContain('backdrop-filter: none')
-    expect(media).toContain('--ari-glass-scrim')
+    expect(media).toContain('--ari-wallpaper-pane')
   })
 
   it('derives every color from theme tokens (no raw literals outside tokens.css)', () => {
diff --git a/packages/ui/src/wallpaper.css b/packages/ui/src/wallpaper.css
index 33507420..94281718 100644
--- a/packages/ui/src/wallpaper.css
+++ b/packages/ui/src/wallpaper.css
@@ -1,5 +1,5 @@
 /*
- * Wallpaper compositing — a bundled scene shown through the app's own glass.
+ * Wallpaper compositing — a bundled scene behind the themed UI.
  *
  * `<html>` carries `data-ari-wallpaper="<id>"` only while a wallpaper is
  * active (the ThemeProvider removes it for 'none'), so every rule here is
@@ -7,34 +7,23 @@
  *
  * Composite model: the scene is painted once as a fixed layer behind
  * everything (`body::before`, `z-index: -1`, above the propagated canvas
- * background), and the window's whole content area sits on ONE continuous
- * glass plate — `.ari-glass-pane`, carrying the exact recipe the sidebar and
- * titlebar use (`--ari-glass-scrim` + the same blur/saturate). So the entire
- * app reads like the sidebar does over a wallpaper: translucent, lightly
- * tinted, with no pane darker or blurrier than its neighbor.
+ * background), and the window's whole content area sits on one continuous
+ * wallpaper pane. The pane is lightly tinted so the scene remains visible
+ * without changing the native window's opaque chrome.
  *
  * One plate, not many, is deliberate: separately-plated columns stack tints
  * where they meet and show a backdrop-filter fringe along the seam. With a
  * single plate, structure comes from hairline borders instead, and nothing
- * inside re-tints — `.ari-glass` chrome and `.bg-bg` pane fills go
- * transparent within the plate.
+ * inside re-tints — structural backgrounds go transparent within the pane.
  *
  * Theme colors are never hardcoded: the tint derives from the surface ramp via
  * `color-mix`, so all six palettes tint their wallpaper automatically. These
- * declarations load after tokens.css/glass.css and are unlayered, so they win
- * cascade ties.
- *
- * Floating surfaces (popovers, dialogs, palette) keep their own
- * `.ari-glass-overlay` material so they still read as above the plate, and
- * input plates keep `.ari-glass-input`.
+ * declarations load after tokens.css and surface-effects.css and are
+ * unlayered, so they win cascade ties.
  */
 
 [data-ari-wallpaper] {
-  /* Glass planes rest on the wallpaper instead of the desktop, so they take
-     theme-derived translucency in every theme, not just glass-capable ones. */
-  --ari-glass-scrim: color-mix(in oklab, var(--ari-surface-0) 72%, transparent);
-  --ari-glass-overlay: color-mix(in oklab, var(--ari-surface-2) 82%, transparent);
-  --ari-glass-input: color-mix(in oklab, var(--ari-surface-1) 85%, transparent);
+  --ari-wallpaper-pane: color-mix(in oklab, var(--ari-surface-0) 72%, transparent);
 }
 
 /* The scene. Negative z-index paints it above the canvas background but below
@@ -60,9 +49,9 @@
   background-position: center;
 }
 
-/* The single plate: one continuous frosted surface for the whole window. */
-[data-ari-wallpaper] .ari-glass-pane {
-  background: var(--ari-glass-scrim);
+/* One continuous wallpaper treatment for the whole window. */
+[data-ari-wallpaper] .ari-wallpaper-pane {
+  background: var(--ari-wallpaper-pane);
   -webkit-backdrop-filter: blur(28px) saturate(1.35);
   backdrop-filter: blur(28px) saturate(1.35);
 }
@@ -71,8 +60,8 @@
    transparent so sidebar, titlebar, and every content pane share one tone.
    Borders and content surfaces (bg-surface-*) are untouched, so structure
    still reads. */
-[data-ari-wallpaper] .ari-glass-pane .ari-glass,
-[data-ari-wallpaper] .ari-glass-pane .bg-bg {
+[data-ari-wallpaper] .ari-wallpaper-pane .bg-surface-0,
+[data-ari-wallpaper] .ari-wallpaper-pane .bg-bg {
   background-color: transparent;
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
@@ -82,11 +71,9 @@
    drop the blur and raise the tint so contrast never depends on blur. */
 @media (prefers-reduced-transparency: reduce) {
   [data-ari-wallpaper] {
-    --ari-glass-scrim: color-mix(in oklab, var(--ari-surface-0) 92%, transparent);
-    --ari-glass-overlay: color-mix(in oklab, var(--ari-surface-2) 94%, transparent);
-    --ari-glass-input: color-mix(in oklab, var(--ari-surface-1) 95%, transparent);
+    --ari-wallpaper-pane: color-mix(in oklab, var(--ari-surface-0) 92%, transparent);
   }
-  [data-ari-wallpaper] .ari-glass-pane {
+  [data-ari-wallpaper] .ari-wallpaper-pane {
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
   }