🤖 fix: use subtle grey tones for cache and input token colors

- Change Cache Create from orange to lighter grey (matching Cache Read family)
- Change Input from saturated green to muted grey-green
- Update storybook comment to reflect new color scheme

These changes create a more cohesive, less distracting token meter display.

Author: ammar-agent

src/browser/stories/App.rightsidebar.stories.tsx

@@ -103,7 +103,7 @@ export const CostsTab: AppStory = {
 
 /**
  * Costs tab showing cache create vs cache read differentiation.
- * Cache create (orange) is typically more expensive than cache read (grey).
+ * Cache create is more expensive than cache read; both render in grey tones.
  * This story uses realistic Anthropic-style usage where most input is cached.
  */
 export const CostsTabWithCacheCreate: AppStory = {

src/browser/styles/globals.css

@@ -128,10 +128,10 @@
     --color-token-completion: hsl(207 100% 40%);
     --color-token-variable: hsl(207 100% 40%);
     --color-token-fixed: hsl(0 0% 40%);
-    --color-token-input: hsl(120 40% 35%);
+    --color-token-input: hsl(120 8% 45%);
     --color-token-output: hsl(207 100% 40%);
     --color-token-cached: hsl(0 0% 50%);
-    --color-token-cache-create: hsl(30 90% 50%);
+    --color-token-cache-create: hsl(0 0% 65%);
 
     /* Plan surfaces */
     --surface-plan-gradient: linear-gradient(
@@ -381,10 +381,10 @@
   --color-token-completion: hsl(207 90% 40%);
   --color-token-variable: hsl(207 90% 40%);
   --color-token-fixed: hsl(210 18% 32%);
-  --color-token-input: hsl(125 45% 36%);
+  --color-token-input: hsl(125 10% 45%);
   --color-token-output: hsl(207 90% 40%);
   --color-token-cached: hsl(210 16% 50%);
-  --color-token-cache-create: hsl(30 85% 45%);
+  --color-token-cache-create: hsl(210 12% 62%);
 
   --surface-plan-gradient: linear-gradient(
     135deg,
@@ -621,10 +621,10 @@
   --color-token-completion: #268bd2;
   --color-token-variable: #268bd2;
   --color-token-fixed: #657b83;
-  --color-token-input: #859900;
+  --color-token-input: #7a8a7a;
   --color-token-output: #268bd2;
   --color-token-cached: #839496;
-  --color-token-cache-create: #cb4b16;
+  --color-token-cache-create: #93a1a1;
 
   --surface-plan-gradient: linear-gradient(135deg, color-mix(in srgb, var(--color-plan-mode), transparent 94%) 0%, color-mix(in srgb, var(--color-plan-mode), transparent 97%) 100%);
   --surface-plan-border: color-mix(in srgb, var(--color-plan-mode), transparent 78%);
@@ -836,10 +836,10 @@
   --color-token-completion: #268bd2;
   --color-token-variable: #268bd2;
   --color-token-fixed: #657b83;
-  --color-token-input: #859900;
+  --color-token-input: #7a8a7a;
   --color-token-output: #268bd2;
   --color-token-cached: #586e75;
-  --color-token-cache-create: #cb4b16;
+  --color-token-cache-create: #6c7c82;
 
   --surface-plan-gradient: linear-gradient(135deg, color-mix(in srgb, var(--color-plan-mode), transparent 92%) 0%, color-mix(in srgb, var(--color-plan-mode), transparent 95%) 100%);
   --surface-plan-border: color-mix(in srgb, var(--color-plan-mode), transparent 70%);