feat(ui): refine gem-blue acrylic palette and focus borders

Derive the gem-blue palette with OKLCH tonal and complementary-color
rules while preserving acrylic opacity, blur and surface hierarchy.

Darker focus tokens exposed stacked field rings, fallback outlines and
persistent basemap selection rings. Keep fallback focus styles in the
base layer and use one themed field boundary or inset card stroke.
Preserve keyboard focus, invalid states and native input semantics.

Add browser regression coverage for pointer and keyboard focus, all
basemap presentations, narrow layouts and rendered contrast.

Validation in an isolated checkout: pnpm lint, pnpm typecheck,
pnpm test (393 tests), focused browser suites and pnpm build.

src/styles.css

@@ -7,25 +7,25 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme inline {
-  --color-background: hsl(var(--background));
-  --color-foreground: hsl(var(--foreground));
-  --color-card: hsl(var(--card));
-  --color-card-foreground: hsl(var(--card-foreground));
-  --color-popover: hsl(var(--popover));
-  --color-popover-foreground: hsl(var(--popover-foreground));
-  --color-primary: hsl(var(--primary));
+  --color-background: var(--surface-dock);
+  --color-foreground: var(--ink);
+  --color-card: var(--surface-reading);
+  --color-card-foreground: var(--ink);
+  --color-popover: var(--surface-reading);
+  --color-popover-foreground: var(--ink);
+  --color-primary: var(--action-blue);
   --color-primary-foreground: hsl(var(--primary-foreground));
-  --color-secondary: hsl(var(--secondary));
-  --color-secondary-foreground: hsl(var(--secondary-foreground));
-  --color-muted: hsl(var(--muted));
-  --color-muted-foreground: hsl(var(--muted-foreground));
-  --color-accent: hsl(var(--accent));
-  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-secondary: var(--surface-control);
+  --color-secondary-foreground: var(--ink);
+  --color-muted: var(--surface-control);
+  --color-muted-foreground: var(--ink-muted);
+  --color-accent: var(--action-selection-soft);
+  --color-accent-foreground: var(--action-blue-hover);
   --color-destructive: hsl(var(--destructive));
   --color-destructive-foreground: hsl(var(--destructive-foreground));
-  --color-border: hsl(var(--border));
-  --color-input: hsl(var(--input));
-  --color-ring: hsl(var(--ring));
+  --color-border: var(--surface-border);
+  --color-input: var(--surface-border);
+  --color-ring: var(--action-blue-hover);
   --radius-lg: var(--radius);
   --radius-md: calc(var(--radius) - 2px);
   --radius-sm: calc(var(--radius) - 4px);
@@ -66,6 +66,13 @@
     border-color: var(--color-gray-200, currentColor);
   }
 
+  /* Fallback only: component focus styles take precedence over this layer. */
+  input:focus-visible,
+  button:not([data-slot="button"]):focus-visible {
+    outline: 2px solid var(--action-focus-ring);
+    outline-offset: 2px;
+  }
+
   :where(*) {
     scrollbar-width: thin;
     scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
@@ -107,20 +114,28 @@
 
 :root {
   color-scheme: light;
-  background: oklch(94.5% 0.012 250);
-  --canvas-map: oklch(94.5% 0.012 250);
-  --canvas-map-grid: rgba(37, 99, 235, 0.06);
-  --acrylic-navigation: rgba(234, 243, 250, 0.64);
-  --acrylic-panel: rgba(223, 235, 246, 0.56);
-  --acrylic-control: rgba(242, 248, 253, 0.74);
-  --agent-floating-reading-surface: rgba(235, 244, 251, 0.82);
-  --agent-floating-reading-item: rgba(249, 251, 254, 0.72);
-  --agent-floating-reading-item-hover: rgba(249, 251, 254, 0.9);
-  --agent-floating-reading-active: rgba(219, 234, 254, 0.82);
-  --agent-user-message-surface: rgba(224, 229, 249, 0.92);
-  --agent-user-message-border: rgba(79, 70, 229, 0.22);
-  --agent-white-acrylic-surface: rgba(255, 255, 255, 0.86);
-  --agent-operational-surface: rgba(255, 255, 255, 0.86);
+  --palette-paper: #F5F7FA;
+  --palette-frost: #E6E9F2;
+  --palette-brand: #4263C7;
+  --palette-sand: color-mix(in oklab, var(--palette-champagne) 40%, var(--palette-paper));
+  --palette-champagne: #D6C294;
+  --surface-navigation: color-mix(in oklab, var(--palette-brand) 8%, var(--palette-frost));
+  --surface-panel: var(--palette-frost);
+  --surface-subtle: #EBEEF5;
+  background: var(--canvas-map);
+  --canvas-map: var(--palette-paper);
+  --canvas-map-grid: color-mix(in srgb, var(--palette-brand) 8%, transparent);
+  --acrylic-navigation: color-mix(in srgb, var(--surface-navigation) 64%, transparent);
+  --acrylic-panel: color-mix(in srgb, var(--surface-panel) 56%, transparent);
+  --acrylic-control: color-mix(in srgb, var(--surface-subtle) 74%, transparent);
+  --agent-floating-reading-surface: color-mix(in srgb, var(--surface-panel) 82%, transparent);
+  --agent-floating-reading-item: color-mix(in srgb, var(--palette-paper) 72%, transparent);
+  --agent-floating-reading-item-hover: color-mix(in srgb, var(--palette-paper) 90%, transparent);
+  --agent-floating-reading-active: color-mix(in srgb, var(--action-selection-soft) 82%, transparent);
+  --agent-user-message-surface: color-mix(in srgb, var(--action-selection-soft) 92%, transparent);
+  --agent-user-message-border: var(--action-selection-border);
+  --agent-white-acrylic-surface: color-mix(in srgb, var(--palette-paper) 86%, transparent);
+  --agent-operational-surface: color-mix(in srgb, var(--surface-subtle) 86%, transparent);
   --acrylic-panel-blur: 24px;
   --acrylic-control-blur: 18px;
   --acrylic-backdrop-saturation: 1.08;
@@ -136,7 +151,7 @@
   --scrollbar-thumb-active: rgba(71, 85, 105, 0.36);
   --acrylic-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.035'/%3E%3C/svg%3E");
   --acrylic-border: rgba(255, 255, 255, 0.52);
-  --acrylic-outline: rgba(63, 83, 108, 0.18);
+  --acrylic-outline: color-mix(in srgb, var(--ink) 20%, transparent);
   --acrylic-highlight: rgba(255, 255, 255, 0.68);
   --shadow-navigation: 0 1px 0 rgba(48, 65, 85, 0.14);
   --shadow-panel: 0 12px 32px rgba(15, 33, 55, 0.14);
@@ -147,103 +162,76 @@
     0 18px 42px rgba(15, 33, 55, 0.18), 0 4px 12px rgba(15, 33, 55, 0.1),
     inset 0 1px 0 rgba(255, 255, 255, 0.72);
   --shadow-agent-operational: 0 12px 32px rgba(15, 33, 55, 0.14), 0 3px 10px rgba(15, 33, 55, 0.08);
-  --surface-dock: oklch(96.5% 0.012 248);
-  --surface-control: rgba(239, 246, 252, 0.92);
-  --surface-well: rgba(213, 227, 239, 0.66);
-  --surface-reading: rgba(250, 252, 254, 0.96);
-  --glass-transient: rgba(232, 242, 250, 0.66);
-  --surface-border: oklch(86.5% 0.012 250);
-  --surface-divider: oklch(90.5% 0.009 250);
+  --surface-dock: var(--surface-subtle);
+  --surface-control: color-mix(in srgb, var(--surface-subtle) 92%, transparent);
+  --surface-well: color-mix(in srgb, var(--surface-panel) 66%, transparent);
+  --surface-reading: color-mix(in srgb, var(--palette-paper) 96%, transparent);
+  --glass-transient: color-mix(in srgb, var(--surface-panel) 66%, transparent);
+  --surface-border: #BEC2CD;
+  --surface-divider: #D5D9E1;
   --surface-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
   --radius-control: 12px;
   --radius-panel: 16px;
-  --action-blue: #2563eb;
-  --action-blue-hover: #1d4ed8;
-  --action-blue-pressed: #1e40af;
-  --action-soft: oklch(96.8% 0.018 255.5);
-  --action-soft-pressed: oklch(94.8% 0.028 255.5);
-  --action-selection-soft: #e8f1ff;
-  --action-selection-soft-hover: #dbeafe;
-  --action-selection-soft-pressed: #cfe2ff;
-  --action-selection-border: rgba(59, 130, 246, 0.2);
-  --action-border: oklch(88.2% 0.015 250);
-  --action-border-hover: rgba(37, 99, 235, 0.3);
-  --action-border-pressed: rgba(37, 99, 235, 0.44);
+  --action-blue: var(--palette-brand);
+  --action-blue-hover: #3653B0;
+  --action-blue-pressed: #2B469C;
+  --action-soft: var(--surface-subtle);
+  --action-soft-pressed: var(--surface-panel);
+  --action-selection-soft: #DAE5FD;
+  --action-selection-soft-hover: color-mix(in oklab, var(--palette-brand) 12%, var(--palette-frost));
+  --action-selection-soft-pressed: color-mix(in oklab, var(--palette-brand) 20%, var(--palette-frost));
+  --action-selection-border: var(--palette-brand);
+  --action-border: var(--surface-border);
+  --action-border-hover: var(--palette-brand);
+  --action-border-pressed: var(--action-blue);
   --action-danger: #dc2626;
   --action-danger-hover: #b91c1c;
   --action-danger-pressed: #991b1b;
-  --action-focus-ring: rgba(37, 99, 235, 0.34);
-  --action-focus-offset: rgba(250, 252, 254, 0.96);
-  --action-shadow-primary: 0 5px 12px rgba(37, 99, 235, 0.2);
+  --action-focus-ring: var(--action-blue-hover);
+  --field-focus-border: var(--action-blue-hover);
+  --action-focus-offset: var(--surface-reading);
+  --action-shadow-primary: 0 5px 12px rgba(66, 99, 199, 0.2);
   --action-shadow-secondary: 0 2px 5px rgba(15, 33, 55, 0.08);
-  --action-shadow-primary-pressed: 0 1px 3px rgba(30, 64, 175, 0.18);
+  --action-shadow-primary-pressed: 0 1px 3px rgba(43, 70, 156, 0.18);
   --action-shadow-secondary-pressed: 0 1px 2px rgba(15, 33, 55, 0.06);
-  --ink: #0f172a;
+  --ink: #232935;
+  --ink-muted: #4E5566;
   --status-neutral-soft: oklch(96.9% 0.005 247.9);
   --status-neutral-border: oklch(90.6% 0.013 244.3);
   --status-neutral-foreground: oklch(46.5% 0.04 253.9);
   --status-neutral-mark: oklch(66% 0.039 253.6);
-  --status-info-soft: oklch(97.1% 0.011 256.7);
-  --status-info-border: oklch(90.7% 0.031 252.7);
-  --status-info-foreground: oklch(48.9% 0.124 258);
-  --status-info-mark: oklch(59.7% 0.124 257.2);
+  --status-info-soft: var(--surface-subtle);
+  --status-info-border: var(--surface-border);
+  --status-info-foreground: var(--action-blue-hover);
+  --status-info-mark: var(--action-blue);
   --status-success-soft: oklch(97.2% 0.011 158.8);
   --status-success-border: oklch(90.4% 0.031 159);
   --status-success-foreground: oklch(51.2% 0.086 163.6);
   --status-success-mark: oklch(62% 0.107 162);
-  --status-warning-soft: oklch(97.2% 0.016 82.8);
-  --status-warning-border: oklch(89.5% 0.049 77.2);
-  --status-warning-foreground: oklch(51.8% 0.105 62.8);
-  --status-warning-mark: oklch(67.2% 0.126 65.2);
+  --status-warning-soft: color-mix(in oklab, var(--palette-champagne) 25%, var(--palette-paper));
+  --status-warning-border: color-mix(in oklab, var(--palette-champagne) 40%, var(--palette-paper));
+  --status-warning-foreground: #604D1D;
+  --status-warning-mark: #977D3C;
   --status-danger-soft: oklch(96.5% 0.01 17.3);
   --status-danger-border: oklch(87.8% 0.031 17.8);
   --status-danger-foreground: oklch(50.5% 0.118 22.2);
   --status-danger-mark: oklch(62.6% 0.142 22);
-  --tone-agent: oklch(95% 0.035 290);
-  --background: 210 40% 98%;
-  --foreground: 222 47% 11%;
-  --card: 0 0% 100%;
-  --card-foreground: 222 47% 11%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 222 47% 11%;
-  --primary: 221 83% 53%;
+  --tone-agent: var(--surface-subtle);
   --primary-foreground: 210 40% 98%;
-  --secondary: 214 32% 91%;
-  --secondary-foreground: 222 47% 11%;
-  --muted: 210 40% 96%;
-  --muted-foreground: 215 16% 47%;
-  --accent: 210 40% 96%;
-  --accent-foreground: 222 47% 11%;
   --destructive: 0 84% 60%;
   --destructive-foreground: 210 40% 98%;
-  --border: 214 32% 91%;
-  --input: 214 32% 91%;
-  --ring: 221 83% 53%;
   --radius: 0.5rem;
 }
 
 [data-basemap-tone="satellite"] {
-  --acrylic-navigation: rgba(232, 241, 249, 0.8);
-  --acrylic-panel: rgba(220, 232, 243, 0.72);
-  --acrylic-control: rgba(241, 247, 252, 0.86);
-  --agent-floating-reading-surface: rgba(228, 239, 247, 0.88);
-  --agent-floating-reading-item: rgba(247, 251, 254, 0.78);
-  --agent-floating-reading-item-hover: rgba(249, 252, 255, 0.92);
-  --agent-floating-reading-active: rgba(219, 234, 254, 0.88);
-  --agent-user-message-surface: rgba(222, 227, 249, 0.94);
-  --agent-user-message-border: rgba(79, 70, 229, 0.28);
-  --agent-white-acrylic-surface: rgba(255, 255, 255, 0.9);
-  --agent-operational-surface: rgba(255, 255, 255, 0.9);
-  --acrylic-panel-blur: 24px;
-  --acrylic-control-blur: 18px;
+  --acrylic-navigation: color-mix(in srgb, var(--surface-navigation) 80%, transparent);
+  --acrylic-panel: color-mix(in srgb, var(--surface-panel) 72%, transparent);
+  --acrylic-control: color-mix(in srgb, var(--surface-subtle) 86%, transparent);
+  --agent-floating-reading-surface: color-mix(in srgb, var(--surface-panel) 88%, transparent);
+  --glass-transient: color-mix(in srgb, var(--surface-panel) 76%, transparent);
   --acrylic-backdrop-saturation: 1.02;
-  --acrylic-exclusion: rgba(255, 255, 255, 0.04);
-  --acrylic-luminosity: rgba(255, 255, 255, 0.1);
-  --surface-control: rgba(242, 248, 253, 0.96);
-  --surface-well: rgba(217, 230, 241, 0.78);
-  --surface-reading: rgba(252, 253, 255, 0.985);
-  --glass-transient: rgba(232, 242, 250, 0.76);
-  --acrylic-outline: rgba(43, 63, 86, 0.28);
+  --agent-floating-acrylic-backdrop: blur(var(--acrylic-control-blur))
+    saturate(var(--acrylic-backdrop-saturation));
   --shadow-panel: 0 14px 36px rgba(7, 18, 32, 0.22);
   --shadow-agent-history-bottom: 0 14px 14px -14px rgba(7, 18, 32, 0.4);
   --shadow-control: 0 7px 20px rgba(7, 18, 32, 0.16);
@@ -252,6 +240,15 @@
     0 20px 46px rgba(7, 18, 32, 0.26), 0 5px 14px rgba(7, 18, 32, 0.16),
     inset 0 1px 0 rgba(255, 255, 255, 0.68);
   --shadow-agent-operational: 0 14px 36px rgba(7, 18, 32, 0.2), 0 4px 12px rgba(7, 18, 32, 0.12);
+  --agent-floating-reading-item: color-mix(in srgb, var(--palette-paper) 78%, transparent);
+  --agent-floating-reading-item-hover: color-mix(in srgb, var(--palette-paper) 92%, transparent);
+  --agent-floating-reading-active: color-mix(in srgb, var(--action-selection-soft) 88%, transparent);
+  --agent-user-message-surface: color-mix(in srgb, var(--action-selection-soft) 94%, transparent);
+  --agent-white-acrylic-surface: color-mix(in srgb, var(--palette-paper) 90%, transparent);
+  --agent-operational-surface: color-mix(in srgb, var(--surface-subtle) 90%, transparent);
+  --surface-control: color-mix(in srgb, var(--surface-subtle) 96%, transparent);
+  --surface-well: color-mix(in srgb, var(--surface-panel) 78%, transparent);
+  --surface-reading: color-mix(in srgb, var(--palette-paper) 98.5%, transparent);
 }
 
 * {
@@ -271,9 +268,30 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-input:focus-visible {
-  outline: 2px solid #0f172a;
-  outline-offset: 2px;
+/* A field or its group owns one focus boundary; inner controls stay borderless. */
+.form-field {
+  outline: 0;
+}
+
+.form-field:is(:focus, :focus-within) {
+  border-color: var(--field-focus-border);
+}
+
+.form-field-inset:focus-visible {
+  outline: 1px solid var(--field-focus-border);
+  outline-offset: -1px;
+}
+
+.form-field[aria-invalid="true"],
+.form-field:has([aria-invalid="true"]) {
+  --field-focus-border: var(--action-danger);
+  border-color: var(--field-focus-border);
+}
+
+@media (forced-colors: active) {
+  .form-field:is(:focus, :focus-within) {
+    --field-focus-border: Highlight;
+  }
 }
 
 button {
@@ -286,11 +304,6 @@ button:not([data-slot="button"]) {
   transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
 }
 
-button:not([data-slot="button"]):focus-visible {
-  outline: 2px solid var(--action-focus-ring);
-  outline-offset: 2px;
-}
-
 button:not([data-slot="button"]):not(:disabled):active {
   filter: brightness(0.97) saturate(1.02);
   outline: 1px solid var(--action-border-pressed);
@@ -321,33 +334,33 @@ button.action-control[aria-pressed="true"]:not(:disabled):active {
 button.action-control[data-selection-tone="soft"][aria-pressed="true"]:not(:disabled) {
   border-color: var(--action-selection-border);
   background-color: var(--action-selection-soft);
-  color: var(--action-blue);
+  color: var(--action-blue-hover);
 }
 
 button.action-control[data-selection-tone="soft"][aria-pressed="true"]:not(:disabled)
   .header-control-icon {
   background-color: rgba(255, 255, 255, 0.68);
-  color: #3b82f6;
+  color: var(--action-blue-hover);
 }
 
 @media (hover: hover) {
   button.action-control[data-selection-tone="soft"][aria-pressed="true"]:not(:disabled):hover {
     border-color: var(--action-border-hover);
     background-color: var(--action-selection-soft-hover);
-    color: var(--action-blue);
+    color: var(--action-blue-pressed);
   }
 
   button.action-control[data-selection-tone="soft"][aria-pressed="true"]:not(:disabled):hover
     .header-control-icon {
     background-color: rgba(255, 255, 255, 0.82);
-    color: var(--action-blue);
+    color: var(--action-blue-hover);
   }
 }
 
 button.action-control[data-selection-tone="soft"][aria-pressed="true"]:not(:disabled):active {
   border-color: var(--action-border-pressed);
   background-color: var(--action-selection-soft-pressed);
-  color: var(--action-blue-hover);
+  color: var(--action-blue-pressed);
   box-shadow: var(--action-shadow-secondary-pressed);
   filter: none;
 }
@@ -432,7 +445,7 @@ button:disabled {
   background-color: var(--acrylic-control);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.86),
-    0 0 0 1px rgba(59, 130, 246, 0.14),
+    0 0 0 1px var(--acrylic-outline),
     var(--shadow-control);
   backdrop-filter: blur(var(--acrylic-control-blur)) saturate(var(--acrylic-backdrop-saturation));
   -webkit-backdrop-filter: blur(var(--acrylic-control-blur))
@@ -475,7 +488,7 @@ button:disabled {
 
 .material-tone-agent {
   background-color: var(--tone-agent);
-  box-shadow: inset 0 1px 0 rgba(196, 181, 253, 0.42);
+  box-shadow: inset 0 1px 0 var(--surface-border);
 }
 
 .status-tone-neutral {
@@ -558,13 +571,20 @@ button:disabled {
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
   :root,
   [data-basemap-tone] {
-    --agent-floating-reading-surface: rgba(250, 252, 255, 0.98);
-    --agent-floating-reading-item: rgba(250, 252, 255, 0.98);
-    --agent-floating-reading-item-hover: rgba(255, 255, 255, 0.98);
-    --agent-floating-reading-active: rgba(232, 241, 255, 0.98);
-    --agent-user-message-surface: rgba(238, 240, 252, 0.98);
-    --agent-white-acrylic-surface: rgba(255, 255, 255, 0.98);
-    --agent-operational-surface: rgba(255, 255, 255, 0.98);
+    --surface-reading: var(--palette-paper);
+    --surface-control: var(--surface-subtle);
+    --surface-well: var(--surface-panel);
+    --acrylic-navigation: var(--surface-navigation);
+    --acrylic-panel: var(--surface-panel);
+    --acrylic-control: var(--surface-subtle);
+    --glass-transient: var(--surface-panel);
+    --agent-floating-reading-surface: var(--surface-panel);
+    --agent-floating-reading-item: var(--surface-subtle);
+    --agent-floating-reading-item-hover: var(--surface-reading);
+    --agent-floating-reading-active: var(--action-selection-soft);
+    --agent-user-message-surface: var(--action-selection-soft);
+    --agent-white-acrylic-surface: var(--surface-reading);
+    --agent-operational-surface: var(--surface-subtle);
     --agent-floating-acrylic-backdrop: none;
   }
 
@@ -572,7 +592,6 @@ button:disabled {
   .acrylic-panel,
   .acrylic-control,
   .glass-transient {
-    background-color: rgba(250, 252, 255, 0.98);
     background-image: none;
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
@@ -582,13 +601,20 @@ button:disabled {
 @media (prefers-reduced-transparency: reduce) {
   :root,
   [data-basemap-tone] {
-    --agent-floating-reading-surface: rgba(250, 252, 255, 0.98);
-    --agent-floating-reading-item: rgba(250, 252, 255, 0.98);
-    --agent-floating-reading-item-hover: rgba(255, 255, 255, 0.98);
-    --agent-floating-reading-active: rgba(232, 241, 255, 0.98);
-    --agent-user-message-surface: rgba(238, 240, 252, 0.98);
-    --agent-white-acrylic-surface: rgba(255, 255, 255, 0.98);
-    --agent-operational-surface: rgba(255, 255, 255, 0.98);
+    --surface-reading: var(--palette-paper);
+    --surface-control: var(--surface-subtle);
+    --surface-well: var(--surface-panel);
+    --acrylic-navigation: var(--surface-navigation);
+    --acrylic-panel: var(--surface-panel);
+    --acrylic-control: var(--surface-subtle);
+    --glass-transient: var(--surface-panel);
+    --agent-floating-reading-surface: var(--surface-panel);
+    --agent-floating-reading-item: var(--surface-subtle);
+    --agent-floating-reading-item-hover: var(--surface-reading);
+    --agent-floating-reading-active: var(--action-selection-soft);
+    --agent-user-message-surface: var(--action-selection-soft);
+    --agent-white-acrylic-surface: var(--surface-reading);
+    --agent-operational-surface: var(--surface-subtle);
     --agent-floating-acrylic-backdrop: none;
   }
 
@@ -596,22 +622,10 @@ button:disabled {
   .acrylic-panel,
   .acrylic-control,
   .glass-transient {
-    background-color: rgba(250, 252, 255, 0.98);
     background-image: none;
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
   }
-
-  .surface-well,
-  .surface-control,
-  .surface-reading {
-    background-color: rgba(255, 255, 255, 0.98);
-    background-image: none;
-  }
-
-  .material-tone-agent {
-    background-color: #f5f3ff;
-  }
 }
 
 @media (forced-colors: active) {
@@ -746,6 +760,11 @@ button:disabled {
   border: 0;
 }
 
+.agent-panel-composer.form-field:focus-within {
+  outline: 1px solid var(--field-focus-border);
+  outline-offset: -1px;
+}
+
 .agent-panel-operational-float {
   top: 4.75rem;
   background-color: var(--agent-operational-surface);
@@ -775,10 +794,8 @@ button.agent-history-session-trigger:not(:disabled):active {
   outline: none;
 }
 
-.agent-history-rename-input,
-.agent-history-rename-input:focus-visible {
-  border-color: #cbd5e1;
-  outline: none;
+.agent-history-rename-input {
+  border-color: var(--surface-border);
   box-shadow: none;
 }
 
@@ -787,12 +804,12 @@ button.agent-history-session-trigger:not(:disabled):active {
 }
 
 .agent-panel-conversation {
-  background: rgba(232, 240, 248, 0.12);
+  background: transparent;
 }
 
 .agent-panel-conversation-canvas {
   border-radius: var(--radius-control);
-  background: rgba(232, 240, 248, 0.18);
+  background: var(--surface-subtle);
 }
 
 .agent-panel-conversation button:not([data-slot="button"]):not(:disabled):active {
@@ -912,7 +929,7 @@ button.agent-history-session-trigger:not(:disabled):active {
 .workbench-agent-dock .agent-panel-shell {
   border: 0;
   border-radius: 0;
-  background: #f7f9fb;
+  background: var(--surface-dock);
   box-shadow: 1px 0 0 rgba(15, 23, 42, 0.08);
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
@@ -962,25 +979,23 @@ button.agent-history-session-trigger:not(:disabled):active {
 }
 
 .agent-panel-primary-icon:disabled {
-  background: #93c5fd;
+  background: var(--palette-brand);
   color: rgba(255, 255, 255, 0.86);
 }
 
 .agent-panel-shell[data-agent-presentation="desktop-dock"],
 .agent-panel-overlay[data-agent-presentation="desktop-dock"] {
-  --agent-dock-surface: oklch(97.2% 0.005 250);
-  --agent-dock-band: oklch(98.5% 0.003 250);
+  --agent-dock-surface: var(--surface-subtle);
+  --agent-dock-band: color-mix(in srgb, var(--palette-paper) 55%, transparent);
   --agent-dock-control-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(15, 23, 42, 0.04);
-  --agent-dock-overlay-surface: rgba(255, 255, 255, 0.94);
+  --agent-dock-overlay-surface: color-mix(in srgb, var(--palette-paper) 94%, transparent);
   --agent-dock-overlay-backdrop: blur(12px) saturate(1.03);
   --agent-dock-overlay-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
-  --surface-control: #ffffff;
-  --surface-reading: #ffffff;
-  --agent-user-message-surface: oklch(96.5% 0.018 255);
+  --agent-user-message-surface: var(--action-selection-soft);
   --agent-user-message-border: transparent;
   --agent-floating-reading-item: transparent;
-  --agent-floating-reading-item-hover: oklch(97.2% 0.005 250);
+  --agent-floating-reading-item-hover: var(--surface-subtle);
   --agent-floating-reading-active: var(--action-selection-soft);
   --radius-panel: 12px;
 }
@@ -1025,8 +1040,7 @@ button.agent-history-session-trigger:not(:disabled):active {
 }
 
 .agent-panel-shell[data-agent-presentation="desktop-dock"] form.agent-panel-control:focus-within {
-  border-color: var(--action-blue);
-  box-shadow: var(--agent-dock-control-shadow), 0 0 0 2px rgba(37, 99, 235, 0.12);
+  border-color: var(--field-focus-border);
 }
 
 .agent-panel-shell[data-agent-presentation="desktop-dock"] :where(button) {
@@ -1126,14 +1140,14 @@ button.agent-history-session-trigger:not(:disabled):active {
 
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
   .agent-panel-overlay[data-agent-presentation="desktop-dock"] {
-    --agent-dock-overlay-surface: #ffffff;
+    --agent-dock-overlay-surface: var(--palette-paper);
     --agent-dock-overlay-backdrop: none;
   }
 }
 
 @media (prefers-reduced-transparency: reduce) {
   .agent-panel-overlay[data-agent-presentation="desktop-dock"] {
-    --agent-dock-overlay-surface: #ffffff;
+    --agent-dock-overlay-surface: var(--palette-paper);
     --agent-dock-overlay-backdrop: none;
   }
 }
@@ -1253,8 +1267,8 @@ button.agent-history-session-trigger:not(:disabled):active {
 }
 
 .agent-panel-confirmation {
-  border: 1px solid rgba(253, 186, 116, 0.46);
-  background: rgba(255, 247, 237, 0.82);
+  border: 1px solid var(--status-warning-border);
+  background: var(--status-warning-soft);
 }
 
 .agent-panel-enter {