fix(chrome): retone Search / Ask / Copy buttons to warp.dev neutral grey

The shared --warp-control-* palette was sourced from the Oz webapp brand
ladder (gray-700/800/900 = #414651/#252b37/#181d27), which carries
~11–24% blue saturation. Against the neutral #121212 docs canvas this
read as visibly cool/blue chips on Search, Ask, and Copy.

Repoint the palette to the warp.dev marketing brand neutrals
(--color-neutral-* in warp-marketing-site-static/.../global.css) so the
trio reads as one grayscale chrome family instead of blue stickers
floating on neutral page bg. Body prose tokens (--sl-color-gray-*)
intentionally stay on the Oz ladder; only the chrome controls move.

Light-mode surface tokens (gray-100/200/300) are already neutral and
kept; the higher-tier hover/text/icon entries swap to the warp.dev
neutrals for consistency.

Fallback literals in kapa.css and CopyPageButton.astro are updated in
lockstep so the chrome can't drift if var() ever falls back.

Top topic nav (Terminal / Agents / Reference) is intentionally
untouched — replaces the misdirected #15.

Co-Authored-By: Oz <oz-agent@warp.dev>

Author: hongyi-chen

src/components/CopyPageButton.astro

@@ -234,10 +234,10 @@ const claudeUrl = `https://claude.ai/new?q=${prompt}`;
     gap: 0.375rem;
     height: 2.25rem;
     padding: 0 0.625rem;
-    border: 1px solid var(--warp-control-border, hsl(210, 5%, 22%));
+    border: 1px solid var(--warp-control-border, #404040);
     border-radius: var(--sl-radius-sm);
-    background: var(--warp-control-bg, #1a1a1a);
-    color: var(--warp-control-text, hsl(210, 4%, 72%));
+    background: var(--warp-control-bg, #1e1e1d);
+    color: var(--warp-control-text, #dbdbdb);
     font-family: var(--__sl-font, 'Inter', sans-serif);
     font-size: var(--sl-text-sm);
     font-weight: 400;
@@ -253,8 +253,8 @@ const claudeUrl = `https://claude.ai/new?q=${prompt}`;
 
   .copy-dropdown-trigger:hover,
   .copy-dropdown-trigger.active {
-    border-color: var(--warp-control-border-hover, hsl(210, 5%, 30%));
-    background: var(--warp-control-bg-hover, hsl(210, 6%, 16%));
+    border-color: var(--warp-control-border-hover, #585756);
+    background: var(--warp-control-bg-hover, #292929);
     color: var(--warp-control-text-hover, hsl(40, 20%, 97%));
   }
 
@@ -359,9 +359,9 @@ const claudeUrl = `https://claude.ai/new?q=${prompt}`;
     top: 50%;
     transform: translateY(-50%);
     padding: 0.375rem 0.5rem;
-    border: 1px solid var(--warp-control-border-hover, hsl(210, 5%, 30%));
+    border: 1px solid var(--warp-control-border-hover, #585756);
     border-radius: var(--sl-radius-sm);
-    background: var(--warp-control-bg, #1a1a1a);
+    background: var(--warp-control-bg, #1e1e1d);
     color: var(--sl-color-text-accent);
     font-size: var(--sl-text-2xs);
     font-family: var(--__sl-font, var(--sl-font));

src/styles/kapa.css

@@ -29,9 +29,9 @@
 		display: inline-flex;
 		align-items: center;
 		gap: 0.375rem;
-		border: 1px solid var(--warp-control-border, #414651);
+		border: 1px solid var(--warp-control-border, #404040);
 		border-radius: var(--sl-radius-sm);
-		background: var(--warp-control-bg, #181d27);
+		background: var(--warp-control-bg, #1e1e1d);
 		color: var(--warp-control-text, #dbdbdb);
 		cursor: pointer;
 		font-family: var(--__sl-font, 'Inter', sans-serif);
@@ -71,9 +71,9 @@
 		   right edge. */
 		right: 0;
 		padding: 0.375rem 0.5rem;
-		border: 1px solid var(--warp-control-border-hover, #535862);
+		border: 1px solid var(--warp-control-border-hover, #585756);
 		border-radius: var(--sl-radius-sm);
-		background: var(--warp-control-bg, #181d27);
+		background: var(--warp-control-bg, #1e1e1d);
 		color: var(--warp-control-text-hover, hsl(40, 20%, 97%));
 		font-family: var(--__sl-font, 'Inter', sans-serif);
 		font-size: var(--sl-text-2xs);
@@ -106,7 +106,7 @@
 		width: 14px;
 		height: 14px;
 		flex: none;
-		color: var(--warp-control-icon, #a4a7ae);
+		color: var(--warp-control-icon, #9d9d9b);
 		transition: color 0.15s ease;
 	}
 
@@ -141,8 +141,8 @@
 	}
 
 	.warp-kapa-button:hover {
-		border-color: var(--warp-control-border-hover, #535862);
-		background: var(--warp-control-bg-hover, #252b37);
+		border-color: var(--warp-control-border-hover, #585756);
+		background: var(--warp-control-bg-hover, #292929);
 		color: var(--warp-control-text-hover, hsl(40, 20%, 97%));
 	}
 

src/styles/warp-components.css

@@ -716,36 +716,38 @@ starlight-file-tree .directory > details > summary {
 /* Shared chrome palette (Scalar tokens — mirror `src/pages/api.astro`).
    Inherited by Search, Ask, Copy, and any future chrome surface.
 
-   Dark-mode tokens map directly to the Oz webapp brand ladder (Oz
-   `gray-300`/`gray-400`/`gray-700`/`gray-800`/`gray-900`) so chips read as
-   raised surfaces against the `#121212` canvas with a single source of
-   truth shared with the light-mode block below. `--warp-control-text-hover`
-   keeps the warm-white `warp.dev` brand color (`#faf9f6`, matches
-   `--sl-color-white` in dark mode) for one step of extra accent against
-   `gray-300` body text. */
+   Dark-mode tokens are sourced from the warp.dev marketing brand ladder
+   (`warp-marketing-site-static/frontend/pages/global.css` §`--color-neutral-*`)
+   instead of the Oz webapp ladder. The Oz tier-700/800/900 greys carry
+   ~11–24% blue saturation, which read as visibly cool chips against the
+   neutral `#121212` canvas; the warp.dev neutrals sit at near-zero saturation
+   with a slight warm tilt (matching `--sl-color-white`'s warm off-white)
+   so the trio looks like one grayscale chrome family rather than blue
+   stickers floating on neutral page bg. Body prose tokens
+   (`--sl-color-gray-*`) intentionally stay on the Oz ladder — only the
+   chrome controls move. */
 body {
-  --warp-control-bg: #181d27;            /* Oz gray-900 — raised surface */
-  --warp-control-bg-hover: #252b37;      /* Oz gray-800 */
-  --warp-control-border: #414651;        /* Oz gray-700 */
-  --warp-control-border-hover: #535862;  /* Oz gray-600 */
-  --warp-control-text: #dbdbdb;          /* Oz gray-300 — text-secondary */
+  --warp-control-bg: #1e1e1d;            /* warp.dev neutral-95 — raised surface */
+  --warp-control-bg-hover: #292929;      /* warp.dev neutral-90 */
+  --warp-control-border: #404040;        /* warp.dev neutral-80 */
+  --warp-control-border-hover: #585756;  /* warp.dev neutral-70 */
+  --warp-control-text: #dbdbdb;          /* Oz gray-300 — text-secondary (kept; already neutral) */
   --warp-control-text-hover: hsl(40, 20%, 97%); /* warp.dev warm off-white */
-  --warp-control-icon: #a4a7ae;          /* Oz gray-400 — text-tertiary */
+  --warp-control-icon: #9d9d9b;          /* warp.dev neutral-40 — text-tertiary */
 }
 
 :root[data-theme='light'] body {
-  /* Light-mode tokens map directly to the Oz webapp brand surface ladder
-     (`gray-100`/`gray-200`/`gray-300`/`gray-400`) so chips remain visibly
-     distinct against the pure-white canvas. The previous warm-grey chip
-     (`hsl(40, 12%, 92%)`) was tuned against the old `#faf9f6` warm canvas
-     and washed out on `#ffffff`. Hover is one step darker than rest. */
-  --warp-control-bg: #f3f3f3;        /* Oz gray-100 / brand surface.1 */
-  --warp-control-bg-hover: #e7e7e7;  /* Oz gray-200 / brand surface.2 */
-  --warp-control-border: #dbdbdb;    /* Oz gray-300 / brand surface.3 */
-  --warp-control-border-hover: #a4a7ae; /* Oz gray-400 */
-  --warp-control-text: #414651;      /* Oz gray-700 — text-secondary */
-  --warp-control-text-hover: #0a0d12;/* Oz gray-950 */
-  --warp-control-icon: #535862;      /* Oz gray-600 — text-tertiary */
+  /* Light-mode tokens keep the neutral surface/border ladder (`gray-100`
+     /`gray-200`/`gray-300`) — those values already sit near zero saturation.
+     The hover/text/icon entries swap from cool Oz tier-600/700 greys to the
+     warp.dev neutral ladder so the trio reads grayscale in both themes. */
+  --warp-control-bg: #f3f3f3;        /* Oz gray-100 / brand surface.1 (kept) */
+  --warp-control-bg-hover: #e7e7e7;  /* Oz gray-200 / brand surface.2 (kept) */
+  --warp-control-border: #dbdbdb;    /* Oz gray-300 / brand surface.3 (kept) */
+  --warp-control-border-hover: #9d9d9b; /* warp.dev neutral-40 */
+  --warp-control-text: #404040;      /* warp.dev neutral-80 — text-secondary */
+  --warp-control-text-hover: #121212;/* warp.dev canvas black */
+  --warp-control-icon: #585756;      /* warp.dev neutral-70 — text-tertiary */
 }
 
 .warp-sidebar-search {