diff --git a/src/App.tsx b/src/App.tsx
index dbed6f47f..cc8ef304b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -617,7 +617,7 @@ function AppInner() {
 
   return (
     <>
-      <div className="bg-bg-dark flex h-screen overflow-hidden [@media(max-width:768px)]:flex-col">
+      <div className="flex h-screen overflow-hidden bg-neutral-900 [@media(max-width:768px)]:flex-col">
         <LeftSidebar
           onSelectWorkspace={handleWorkspaceSwitch}
           onAddProject={handleAddProjectCallback}
@@ -654,7 +654,7 @@ function AppInner() {
               </ErrorBoundary>
             ) : (
               <div
-                className="[&_p]:text-muted mx-auto w-full max-w-3xl text-center [&_h2]:mb-4 [&_h2]:font-bold [&_h2]:tracking-tight [&_h2]:text-white [&_p]:leading-[1.6]"
+                className="mx-auto w-full max-w-3xl text-center [&_h2]:mb-4 [&_h2]:font-bold [&_h2]:tracking-tight [&_h2]:text-white [&_p]:leading-[1.6] [&_p]:text-neutral-400"
                 style={{
                   padding: "clamp(40px, 10vh, 100px) 20px",
                   fontSize: "clamp(14px, 2vw, 16px)",
diff --git a/src/components/AIView.tsx b/src/components/AIView.tsx
index 13991ffeb..686af1969 100644
--- a/src/components/AIView.tsx
+++ b/src/components/AIView.tsx
@@ -240,7 +240,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
     return (
       <div
         className={cn(
-          "flex flex-1 flex-row bg-dark text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+          "flex flex-1 flex-row bg-neutral-900 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
           className
         )}
         style={{ containerType: "inline-size" }}
@@ -279,7 +279,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
     return (
       <div
         className={cn(
-          "flex flex-1 flex-row bg-dark text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+          "flex flex-1 flex-row bg-neutral-900 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
           className
         )}
         style={{ containerType: "inline-size" }}
@@ -295,7 +295,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
     return (
       <div
         className={cn(
-          "flex flex-1 flex-row bg-dark text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+          "flex flex-1 flex-row bg-neutral-900 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
           className
         )}
         style={{ containerType: "inline-size" }}
@@ -313,7 +313,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
   return (
     <div
       className={cn(
-        "flex flex-1 flex-row bg-dark text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+        "flex flex-1 flex-row bg-neutral-900 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
         className
       )}
       style={{ containerType: "inline-size" }}
diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx
index f42675942..08e0deb92 100644
--- a/src/components/ChatInput.tsx
+++ b/src/components/ChatInput.tsx
@@ -723,7 +723,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
 
   return (
     <div
-      className="bg-separator border-border-light relative flex flex-col gap-1 border-t px-[15px] pt-[5px] pb-[15px]"
+      className="relative flex flex-col gap-1 border-t border-neutral-800 bg-neutral-800 px-[15px] pt-[5px] pb-[15px]"
       style={{ containerType: "inline-size" }}
       data-component="ChatInputSection"
     >
@@ -810,7 +810,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
           <div className="max-@[700px]:hidden ml-auto flex items-center gap-1.5">
             <div
               className={cn(
-                "flex gap-0 bg-toggle-bg rounded",
+                "flex gap-0 bg-neutral-800 rounded",
                 "[&>button:first-of-type]:rounded-l [&>button:last-of-type]:rounded-r",
                 mode === "exec" &&
                   "[&>button:first-of-type]:bg-exec-mode [&>button:first-of-type]:text-white [&>button:first-of-type]:hover:bg-exec-mode-hover",
diff --git a/src/components/ChatInputToast.tsx b/src/components/ChatInputToast.tsx
index b9993cd4a..f0a8e679a 100644
--- a/src/components/ChatInputToast.tsx
+++ b/src/components/ChatInputToast.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useCallback } from "react";
 import { cn } from "@/lib/utils";
 
 const toastTypeStyles: Record<"success" | "error", string> = {
-  success: "bg-toast-success-bg border border-accent-dark text-toast-success-text",
+  success: "bg-toast-success-bg border border-sky-700 text-toast-success-text",
   error: "bg-toast-error-bg border border-toast-error-border text-toast-error-text",
 };
 
@@ -22,7 +22,7 @@ interface ChatInputToastProps {
 }
 
 export const SolutionLabel: React.FC<{ children: ReactNode }> = ({ children }) => (
-  <div className="text-muted-light mb-1 text-[10px] uppercase">{children}</div>
+  <div className="text-neutral-400-light mb-1 text-[10px] uppercase">{children}</div>
 );
 
 export const ChatInputToast: React.FC<ChatInputToastProps> = ({ toast, onDismiss }) => {
@@ -71,9 +71,9 @@ export const ChatInputToast: React.FC<ChatInputToastProps> = ({ toast, onDismiss
             <span className="text-sm leading-none">⚠</span>
             <div className="flex-1">
               {toast.title && <div className="mb-1.5 font-semibold">{toast.title}</div>}
-              <div className="text-light mt-1.5 leading-[1.4]">{toast.message}</div>
+              <div className="mt-1.5 leading-[1.4] text-neutral-300">{toast.message}</div>
               {toast.solution && (
-                <div className="bg-dark font-monospace text-code-type mt-2 rounded px-2 py-1.5 text-[11px]">
+                <div className="font-monospace text-code-type mt-2 rounded bg-neutral-900 px-2 py-1.5 text-[11px]">
                   {toast.solution}
                 </div>
               )}
diff --git a/src/components/ChatMetaSidebar.tsx b/src/components/ChatMetaSidebar.tsx
index 909b3af61..436380e6f 100644
--- a/src/components/ChatMetaSidebar.tsx
+++ b/src/components/ChatMetaSidebar.tsx
@@ -59,7 +59,7 @@ const ChatMetaSidebarComponent: React.FC<ChatMetaSidebarProps> = ({ workspaceId,
   return (
     <div
       className={cn(
-        "bg-separator border-l border-border-light flex flex-col overflow-hidden transition-[width] duration-200 flex-shrink-0",
+        "bg-neutral-800 border-l border-neutral-800 flex flex-col overflow-hidden transition-[width] duration-200 flex-shrink-0",
         showCollapsed ? "w-5 sticky right-0 z-10 shadow-[-2px_0_4px_rgba(0,0,0,0.2)]" : "w-80"
       )}
       role="complementary"
diff --git a/src/components/CommandPalette.stories.tsx b/src/components/CommandPalette.stories.tsx
index 90fd91ca0..a3d7f4b11 100644
--- a/src/components/CommandPalette.stories.tsx
+++ b/src/components/CommandPalette.stories.tsx
@@ -132,7 +132,7 @@ const PaletteDemo: React.FC<{ autoOpen?: boolean }> = ({ autoOpen = true }) => {
     <>
       <button
         onClick={() => open()}
-        className="bg-accent-dark font-primary hover:bg-accent-hover active:bg-accent-dark cursor-pointer self-start rounded border-none px-4 py-2 text-[13px] text-white"
+        className="bg-sky-600-dark font-primary hover:bg-sky-600-hover active:bg-sky-600-dark cursor-pointer self-start rounded border-none px-4 py-2 text-[13px] text-white"
       >
         Open Command Palette (⌘⇧P)
       </button>
@@ -174,8 +174,8 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   render: () => (
-    <div className="bg-dark flex min-h-[600px] flex-col gap-5 p-5">
-      <div className="bg-separator border-border-light text-bright font-primary [&_kbd]:bg-dark [&_kbd]:border-border-light [&_kbd]:font-monospace rounded border p-4 text-[13px] leading-[1.6] [&_kbd]:rounded-[3px] [&_kbd]:border [&_kbd]:px-1.5 [&_kbd]:py-0.5 [&_kbd]:text-[11px]">
+    <div className="flex min-h-[600px] flex-col gap-5 bg-neutral-900 p-5">
+      <div className="font-primary [&_kbd]:font-monospace rounded border border-neutral-800 bg-neutral-900 p-4 text-[13px] leading-[1.6] text-neutral-300 [&_kbd]:rounded-[3px] [&_kbd]:border [&_kbd]:border-neutral-800 [&_kbd]:bg-neutral-900 [&_kbd]:px-1.5 [&_kbd]:py-0.5 [&_kbd]:text-[11px]">
         <strong>Command Palette</strong>
         <br />
         <br />
diff --git a/src/components/CommandPalette.tsx b/src/components/CommandPalette.tsx
index 307b20b73..5db591b5a 100644
--- a/src/components/CommandPalette.tsx
+++ b/src/components/CommandPalette.tsx
@@ -362,12 +362,12 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
       }}
     >
       <Command
-        className="bg-separator border-border text-lighter font-primary w-[min(720px,92vw)] overflow-hidden rounded-lg border shadow-[0_10px_40px_rgba(0,0,0,0.4)]"
+        className="font-primary w-[min(720px,92vw)] overflow-hidden rounded-lg border border-neutral-800 bg-neutral-900 text-neutral-100 shadow-[0_10px_40px_rgba(0,0,0,0.4)]"
         onMouseDown={(e: React.MouseEvent) => e.stopPropagation()}
         shouldFilter={shouldUseCmdkFilter}
       >
         <Command.Input
-          className="bg-darker text-lighter border-hover w-full border-b border-none px-3.5 py-3 text-sm outline-none"
+          className="w-full border-b border-none border-neutral-900 bg-neutral-900 px-3.5 py-3 text-sm text-neutral-100 outline-none"
           value={query}
           onValueChange={handleQueryChange}
           placeholder={
@@ -403,12 +403,12 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
             <Command.Group
               key={group.name}
               heading={group.name}
-              className="[&[cmdk-group-heading]]:text-subdued [&[cmdk-group-heading]]:px-2.5 [&[cmdk-group-heading]]:py-1 [&[cmdk-group-heading]]:text-[11px] [&[cmdk-group-heading]]:tracking-[0.08em] [&[cmdk-group-heading]]:uppercase [&[cmdk-group]]:px-1.5 [&[cmdk-group]]:py-2"
+              className="[&[cmdk-group-heading]]:px-2.5 [&[cmdk-group-heading]]:py-1 [&[cmdk-group-heading]]:text-[11px] [&[cmdk-group-heading]]:tracking-[0.08em] [&[cmdk-group-heading]]:text-neutral-400 [&[cmdk-group-heading]]:uppercase [&[cmdk-group]]:px-1.5 [&[cmdk-group]]:py-2"
             >
               {group.items.map((item) => (
                 <Command.Item
                   key={item.id}
-                  className="hover:bg-hover aria-selected:bg-hover mx-1 my-0.5 grid cursor-pointer grid-cols-[1fr_auto] items-center gap-2 rounded-md px-3 py-2 text-[13px]"
+                  className="mx-1 my-0.5 grid cursor-pointer grid-cols-[1fr_auto] items-center gap-2 rounded-md px-3 py-2 text-[13px] hover:bg-neutral-900 aria-selected:bg-neutral-900"
                   onSelect={() => {
                     if ("prompt" in item && item.prompt) {
                       addRecent(item.id);
@@ -433,12 +433,12 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
                     {"subtitle" in item && item.subtitle && (
                       <>
                         <br />
-                        <span className="text-subdued text-xs">{item.subtitle}</span>
+                        <span className="text-xs text-neutral-400">{item.subtitle}</span>
                       </>
                     )}
                   </div>
                   {"shortcutHint" in item && item.shortcutHint && (
-                    <span className="text-subdued font-monospace text-[11px]">
+                    <span className="font-monospace text-[11px] text-neutral-400">
                       {item.shortcutHint}
                     </span>
                   )}
diff --git a/src/components/CommandSuggestions.tsx b/src/components/CommandSuggestions.tsx
index fd607c3ea..06356fbaf 100644
--- a/src/components/CommandSuggestions.tsx
+++ b/src/components/CommandSuggestions.tsx
@@ -93,7 +93,7 @@ export const CommandSuggestions: React.FC<CommandSuggestionsProps> = ({
         activeSuggestion ? `${resolvedListId}-option-${activeSuggestion.id}` : undefined
       }
       data-command-suggestions
-      className="bg-separator border-border-light absolute right-0 bottom-full left-0 z-[100] mb-2 flex max-h-[200px] flex-col overflow-y-auto rounded border shadow-[0_-4px_12px_rgba(0,0,0,0.4)]"
+      className="absolute right-0 bottom-full left-0 z-[100] mb-2 flex max-h-[200px] flex-col overflow-y-auto rounded border border-neutral-800 bg-neutral-900 shadow-[0_-4px_12px_rgba(0,0,0,0.4)]"
     >
       {suggestions.map((suggestion, index) => (
         <div
@@ -104,17 +104,17 @@ export const CommandSuggestions: React.FC<CommandSuggestionsProps> = ({
           role="option"
           aria-selected={index === selectedIndex}
           className={cn(
-            "px-2.5 py-1.5 cursor-pointer transition-colors duration-150 flex items-center justify-between gap-3 hover:bg-accent-darker",
-            index === selectedIndex ? "bg-accent-darker" : "bg-transparent"
+            "px-2.5 py-1.5 cursor-pointer transition-colors duration-150 flex items-center justify-between gap-3 hover:bg-sky-600-darker",
+            index === selectedIndex ? "bg-sky-600-darker" : "bg-transparent"
           )}
         >
-          <div className="text-accent font-monospace shrink-0 text-xs">{suggestion.display}</div>
-          <div className="text-medium truncate text-right text-[11px]">
+          <div className="font-monospace shrink-0 text-xs text-sky-600">{suggestion.display}</div>
+          <div className="truncate text-right text-[11px] text-neutral-400">
             {suggestion.description}
           </div>
         </div>
       ))}
-      <div className="border-border-light bg-dark text-placeholder [&_span]:text-medium shrink-0 border-t px-2.5 py-1 text-center text-[10px] [&_span]:font-medium">
+      <div className="shrink-0 border-t border-neutral-800 bg-neutral-900 px-2.5 py-1 text-center text-[10px] text-neutral-400 [&_span]:font-medium [&_span]:text-neutral-400">
         <span>Tab</span> to complete • <span>↑↓</span> to navigate • <span>Esc</span> to dismiss
       </div>
     </div>
diff --git a/src/components/Context1MCheckbox.tsx b/src/components/Context1MCheckbox.tsx
index 37e6290b3..748fcc044 100644
--- a/src/components/Context1MCheckbox.tsx
+++ b/src/components/Context1MCheckbox.tsx
@@ -22,7 +22,9 @@ export const Context1MCheckbox: React.FC<Context1MCheckboxProps> = ({ modelStrin
         1M Context
       </label>
       <TooltipWrapper inline>
-        <span className="text-muted flex cursor-help items-center text-[10px] leading-none">?</span>
+        <span className="flex cursor-help items-center text-[10px] leading-none text-neutral-400">
+          ?
+        </span>
         <Tooltip className="tooltip" align="center" width="auto">
           Enable 1M token context window (beta feature for Claude Sonnet 4/4.5)
         </Tooltip>
diff --git a/src/components/DirectorySelectModal.tsx b/src/components/DirectorySelectModal.tsx
index d3b3a4dde..e0fdb63c8 100644
--- a/src/components/DirectorySelectModal.tsx
+++ b/src/components/DirectorySelectModal.tsx
@@ -82,7 +82,7 @@ export const DirectorySelectModal: React.FC = () => {
         onKeyDown={handleKeyDown}
         placeholder="/home/user/projects/my-project"
         autoFocus
-        className="bg-modal-bg border-border-medium focus:border-accent placeholder:text-muted mb-5 w-full rounded border px-3 py-2 font-mono text-sm text-white focus:outline-none"
+        className="mb-5 w-full rounded border border-neutral-700 bg-neutral-900 px-3 py-2 font-mono text-sm text-white placeholder:text-neutral-400 focus:border-sky-600 focus:outline-none"
       />
       {error && <div className="text-error -mt-3 mb-3 text-xs">{error}</div>}
       <ModalActions>
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
index 65c5ac57b..a1c009d15 100644
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@@ -42,7 +42,7 @@ export class ErrorBoundary extends Component<Props, State> {
       }
 
       return (
-        <div className="bg-error-bg-dark border-danger-soft text-danger-soft m-5 rounded border p-5">
+        <div className="bg-error-bg-neutral-900 m-5 rounded border border-red-600 p-5 text-red-400">
           <h3 className="m-0 mb-2.5 text-base">
             Something went wrong{this.props.workspaceInfo && ` in ${this.props.workspaceInfo}`}
           </h3>
@@ -59,7 +59,7 @@ export class ErrorBoundary extends Component<Props, State> {
           )}
           <button
             onClick={this.handleReset}
-            className="bg-danger-soft hover:bg-info-light cursor-pointer rounded-sm border-none px-4 py-2 text-sm text-white"
+            className="cursor-pointer rounded-sm border-none bg-red-600 px-4 py-2 text-sm text-white hover:bg-red-500"
           >
             Reset
           </button>
diff --git a/src/components/GitStatusIndicatorView.tsx b/src/components/GitStatusIndicatorView.tsx
index 638129017..76af4333c 100644
--- a/src/components/GitStatusIndicatorView.tsx
+++ b/src/components/GitStatusIndicatorView.tsx
@@ -62,7 +62,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
   if (!gitStatus) {
     return (
       <span
-        className="text-accent relative mr-1.5 flex items-center gap-1 font-mono text-[11px]"
+        className="relative mr-1.5 flex items-center gap-1 font-mono text-[11px] text-sky-600"
         aria-hidden="true"
       />
     );
@@ -72,7 +72,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
   if (gitStatus.ahead === 0 && gitStatus.behind === 0 && !gitStatus.dirty) {
     return (
       <span
-        className="text-accent relative mr-1.5 flex items-center gap-1 font-mono text-[11px]"
+        className="relative mr-1.5 flex items-center gap-1 font-mono text-[11px] text-sky-600"
         aria-hidden="true"
       />
     );
@@ -81,7 +81,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
   // Render colored indicator characters
   const renderIndicators = (indicators: string) => {
     return (
-      <span className="text-placeholder mr-2 shrink-0 font-mono whitespace-pre">
+      <span className="mr-2 shrink-0 font-mono whitespace-pre text-neutral-400">
         {Array.from(indicators).map((char, index) => (
           <span key={index} style={{ color: getIndicatorColor(index) }}>
             {char}
@@ -98,10 +98,10 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
     }
 
     return (
-      <div className="border-separator-light mb-2 flex flex-col gap-0.5 border-b pb-2">
+      <div className="border-neutral-900-light mb-2 flex flex-col gap-0.5 border-b pb-2">
         {branchHeaders.map((header, index) => (
           <div key={index} className="flex gap-2 font-mono leading-snug">
-            <span className="text-placeholder mr-2 shrink-0 font-mono whitespace-pre">
+            <span className="mr-2 shrink-0 font-mono whitespace-pre text-neutral-400">
               {/* Create spacing to align with column */}
               {Array.from({ length: header.columnIndex }).map((_, i) => (
                 <span key={i} style={{ color: getIndicatorColor(i) }}>
@@ -110,7 +110,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
               ))}
               <span style={{ color: getIndicatorColor(header.columnIndex) }}>!</span>
             </span>
-            <span className="text-foreground">[{header.branch}]</span>
+            <span className="text-neutral-300">[{header.branch}]</span>
           </div>
         ))}
       </div>
@@ -128,20 +128,20 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
     const isTruncated = dirtyFiles.length > LIMIT;
 
     return (
-      <div className="border-separator-light mb-2 border-b pb-2">
+      <div className="border-neutral-900-light mb-2 border-b pb-2">
         <div className="text-git-dirty mb-1 font-mono font-semibold">Uncommitted changes:</div>
         <div className="flex flex-col gap-px">
           {displayFiles.map((line, index) => (
             <div
               key={index}
-              className="text-foreground font-mono text-[11px] leading-snug whitespace-pre"
+              className="font-mono text-[11px] leading-snug whitespace-pre text-neutral-300"
             >
               {line}
             </div>
           ))}
         </div>
         {isTruncated && (
-          <div className="text-muted-light mt-1 text-[10px] italic">
+          <div className="text-neutral-400-light mt-1 text-[10px] italic">
             (showing {LIMIT} of {dirtyFiles.length} files)
           </div>
         )}
@@ -172,9 +172,9 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
             <div key={`${commit.hash}-${index}`} className="flex flex-col gap-0.5">
               <div className="flex gap-2 font-mono leading-snug">
                 {renderIndicators(commit.indicators)}
-                <span className="text-accent shrink-0 select-all">{commit.hash}</span>
-                <span className="text-muted-light shrink-0">{commit.date}</span>
-                <span className="text-foreground flex-1 break-words">{commit.subject}</span>
+                <span className="shrink-0 text-sky-600 select-all">{commit.hash}</span>
+                <span className="text-neutral-400-light shrink-0">{commit.date}</span>
+                <span className="flex-1 break-words text-neutral-300">{commit.subject}</span>
               </div>
             </div>
           ))}
@@ -187,7 +187,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
   const tooltipElement = (
     <div
       className={cn(
-        "fixed z-[10000] bg-modal-bg text-foreground border border-separator-light rounded px-3 py-2 text-[11px] font-mono whitespace-pre max-w-96 max-h-[400px] overflow-auto shadow-[0_4px_12px_rgba(0,0,0,0.5)] pointer-events-auto transition-opacity duration-200",
+        "fixed z-[10000] bg-neutral-900 text-neutral-300 border border-neutral-900-light rounded px-3 py-2 text-[11px] font-mono whitespace-pre max-w-96 max-h-[400px] overflow-auto shadow-[0_4px_12px_rgba(0,0,0,0.5)] pointer-events-auto transition-opacity duration-200",
         showTooltip ? "opacity-100 visible" : "opacity-0 invisible"
       )}
       style={{
@@ -208,7 +208,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
         ref={onContainerRef}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
-        className="text-accent relative mr-1.5 flex items-center gap-1 font-mono text-[11px]"
+        className="relative mr-1.5 flex items-center gap-1 font-mono text-[11px] text-sky-600"
       >
         {gitStatus.ahead > 0 && (
           <span className="flex items-center font-normal">↑{gitStatus.ahead}</span>
diff --git a/src/components/ImageAttachments.tsx b/src/components/ImageAttachments.tsx
index 2f2c75ab7..adfa71ddb 100644
--- a/src/components/ImageAttachments.tsx
+++ b/src/components/ImageAttachments.tsx
@@ -19,7 +19,7 @@ export const ImageAttachments: React.FC<ImageAttachmentsProps> = ({ images, onRe
       {images.map((image) => (
         <div
           key={image.id}
-          className="border-border-light bg-dark relative h-20 w-20 overflow-hidden rounded border"
+          className="relative h-20 w-20 overflow-hidden rounded border border-neutral-800 bg-neutral-900"
         >
           <img src={image.url} alt="Attached image" className="h-full w-full object-cover" />
           <button
diff --git a/src/components/KebabMenu.tsx b/src/components/KebabMenu.tsx
index 808441863..33ea4e186 100644
--- a/src/components/KebabMenu.tsx
+++ b/src/components/KebabMenu.tsx
@@ -74,7 +74,7 @@ export const KebabMenu: React.FC<KebabMenuProps> = ({ items, className }) => {
       ref={buttonRef}
       onClick={() => setIsOpen(!isOpen)}
       className={cn(
-        "border border-white/20 text-foreground text-[10px] py-0.5 px-2 rounded-[3px] cursor-pointer transition-all duration-200 font-primary flex items-center justify-center whitespace-nowrap",
+        "border border-white/20 text-neutral-300 text-[10px] py-0.5 px-2 rounded-[3px] cursor-pointer transition-all duration-200 font-primary flex items-center justify-center whitespace-nowrap",
         isOpen ? "bg-white/10" : "bg-none",
         "hover:bg-white/10 hover:border-white/30",
         "disabled:opacity-50 disabled:cursor-not-allowed",
@@ -98,7 +98,7 @@ export const KebabMenu: React.FC<KebabMenuProps> = ({ items, className }) => {
         createPortal(
           <div
             ref={menuRef}
-            className="bg-dark border-border-light fixed z-[10000] min-w-40 overflow-hidden rounded-[3px] border shadow-[0_4px_16px_rgba(0,0,0,0.8)]"
+            className="fixed z-[10000] min-w-40 overflow-hidden rounded-[3px] border border-neutral-800 bg-neutral-900 shadow-[0_4px_16px_rgba(0,0,0,0.8)]"
             style={{
               top: `${dropdownPosition.top}px`,
               left: `${dropdownPosition.left}px`,
@@ -113,10 +113,10 @@ export const KebabMenu: React.FC<KebabMenuProps> = ({ items, className }) => {
                   "w-full border-none border-b border-modal-bg text-xs py-2 px-3 text-left transition-all duration-150 font-primary flex items-center gap-2",
                   "last:border-b-0",
                   item.disabled
-                    ? "bg-dark text-muted-light cursor-not-allowed opacity-50 hover:bg-dark hover:text-muted-light"
+                    ? "bg-neutral-900 text-neutral-400-light cursor-not-allowed opacity-50 hover:bg-neutral-900 hover:text-neutral-400-light"
                     : item.active
-                      ? "bg-white/15 text-foreground cursor-pointer hover:bg-white/15 hover:text-white"
-                      : "bg-dark text-foreground cursor-pointer hover:bg-white/15 hover:text-white"
+                      ? "bg-white/15 text-neutral-300 cursor-pointer hover:bg-white/15 hover:text-white"
+                      : "bg-neutral-900 text-neutral-300 cursor-pointer hover:bg-white/15 hover:text-white"
                 )}
               >
                 {item.emoji && (
diff --git a/src/components/LeftSidebar.tsx b/src/components/LeftSidebar.tsx
index 2232f2860..1fc93d571 100644
--- a/src/components/LeftSidebar.tsx
+++ b/src/components/LeftSidebar.tsx
@@ -40,9 +40,9 @@ export function LeftSidebar(props: LeftSidebarProps) {
           className={cn(
             "hidden max-md:flex fixed top-3 left-3 z-[998]",
             "w-10 h-10 bg-separator border border-border-light rounded-md cursor-pointer",
-            "items-center justify-center text-foreground text-xl transition-all duration-200",
+            "items-center justify-center text-neutral-300 text-xl transition-all duration-200",
             "shadow-[0_2px_4px_rgba(0,0,0,0.3)]",
-            "hover:bg-hover hover:border-bg-light",
+            "hover:bg-hover hover:border-border-light",
             "active:scale-95"
           )}
         >
@@ -62,7 +62,7 @@ export function LeftSidebar(props: LeftSidebarProps) {
       {/* Sidebar */}
       <div
         className={cn(
-          "h-screen bg-separator border-r border-dark flex flex-col shrink-0",
+          "h-screen bg-separator border-r border-border flex flex-col shrink-0",
           "transition-all duration-200 overflow-hidden relative z-[100]",
           collapsed ? "w-8" : "w-72",
           "max-md:fixed max-md:left-0 max-md:top-0 max-md:w-72 max-md:z-[1000]",
diff --git a/src/components/Messages/AssistantMessage.tsx b/src/components/Messages/AssistantMessage.tsx
index b60d1a137..a936ba7bb 100644
--- a/src/components/Messages/AssistantMessage.tsx
+++ b/src/components/Messages/AssistantMessage.tsx
@@ -84,7 +84,7 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({
     // Empty streaming state
     if (isStreaming && !content) {
       return (
-        <div className="font-primary text-secondary text-[13px] italic">
+        <div className="font-primary text-[13px] text-neutral-400 italic">
           Waiting for response...
         </div>
       );
@@ -105,7 +105,7 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({
     // Completed text renders as static content
     return content ? (
       showRaw ? (
-        <pre className="text-text bg-code-bg m-0 rounded-sm p-2 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap">
+        <pre className="bg-code-bg m-0 rounded-sm p-2 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap text-neutral-300">
           {content}
         </pre>
       ) : (
diff --git a/src/components/Messages/ChatBarrier/StreamingBarrier.tsx b/src/components/Messages/ChatBarrier/StreamingBarrier.tsx
index 3ebff7b4b..f8b5f4226 100644
--- a/src/components/Messages/ChatBarrier/StreamingBarrier.tsx
+++ b/src/components/Messages/ChatBarrier/StreamingBarrier.tsx
@@ -23,11 +23,13 @@ export const StreamingBarrier: React.FC<StreamingBarrierProps> = ({
         {tokenCount !== undefined && (
           <span className="text-assistant-border font-mono text-[11px] whitespace-nowrap select-none">
             ~{tokenCount.toLocaleString()} tokens
-            {tps !== undefined && tps > 0 && <span className="text-dim ml-1">@ {tps} t/s</span>}
+            {tps !== undefined && tps > 0 && (
+              <span className="ml-1 text-neutral-400">@ {tps} t/s</span>
+            )}
           </span>
         )}
       </div>
-      <div className="text-muted ml-auto text-[11px] whitespace-nowrap select-none">
+      <div className="ml-auto text-[11px] whitespace-nowrap text-neutral-400 select-none">
         {cancelText}
       </div>
     </div>
diff --git a/src/components/Messages/HistoryHiddenMessage.tsx b/src/components/Messages/HistoryHiddenMessage.tsx
index d0124a1f7..4ab5c25b4 100644
--- a/src/components/Messages/HistoryHiddenMessage.tsx
+++ b/src/components/Messages/HistoryHiddenMessage.tsx
@@ -14,8 +14,8 @@ export const HistoryHiddenMessage: React.FC<HistoryHiddenMessageProps> = ({
   return (
     <div
       className={cn(
-        "my-5 py-3 px-[15px] bg-white/[0.03] border-l-[3px] border-accent rounded-sm",
-        "text-muted text-xs font-normal text-center font-sans",
+        "my-5 py-3 px-[15px] bg-white/[0.03] border-l-[3px] border-sky-600 rounded-sm",
+        "text-neutral-400 text-xs font-normal text-center font-sans",
         className
       )}
     >
diff --git a/src/components/Messages/Mermaid.tsx b/src/components/Messages/Mermaid.tsx
index 222267aa0..07b59f918 100644
--- a/src/components/Messages/Mermaid.tsx
+++ b/src/components/Messages/Mermaid.tsx
@@ -32,7 +32,7 @@ mermaid.initialize({
 const getButtonStyle = (disabled = false): CSSProperties => ({
   background: disabled ? "rgba(255, 255, 255, 0.05)" : "rgba(255, 255, 255, 0.1)",
   border: "1px solid rgba(255, 255, 255, 0.2)",
-  color: disabled ? "var(--color-text-secondary)" : "var(--color-text)",
+  color: disabled ? "theme(colors.gray.600)" : "theme(colors.gray.200)",
   padding: "6px 10px",
   cursor: disabled ? "not-allowed" : "pointer",
   borderRadius: "4px",
@@ -89,7 +89,7 @@ const DiagramModal: React.FC<{ children: ReactNode; onClose: () => void }> = ({
             right: "16px",
             background: "rgba(255, 255, 255, 0.1)",
             border: "1px solid rgba(255, 255, 255, 0.2)",
-            color: "var(--color-text)",
+            color: "theme(colors.gray.200)",
             padding: "8px 16px",
             cursor: "pointer",
             borderRadius: "4px",
@@ -191,7 +191,7 @@ export const Mermaid: React.FC<{ chart: string }> = ({ chart }) => {
       return (
         <div
           style={{
-            color: "var(--color-text-secondary)",
+            color: "theme(colors.gray.600)",
             background: "var(--color-code-bg)",
             padding: "12px",
             fontStyle: "italic",
diff --git a/src/components/Messages/MessageWindow.tsx b/src/components/Messages/MessageWindow.tsx
index c89f9192d..f10174238 100644
--- a/src/components/Messages/MessageWindow.tsx
+++ b/src/components/Messages/MessageWindow.tsx
@@ -68,7 +68,7 @@ export const MessageWindow: React.FC<MessageWindowProps> = ({
     >
       {backgroundEffect}
       <div
-        className="text-message-header relative z-10 flex items-center justify-between border-b border-white/10 bg-white/5 px-3 py-1 text-[11px] font-medium"
+        className="relative z-10 flex items-center justify-between border-b border-white/10 bg-white/5 px-3 py-1 text-[11px] font-medium text-neutral-300"
         data-message-header
       >
         <div className="flex min-w-0 flex-1 items-baseline gap-3" data-message-header-left>
@@ -124,7 +124,7 @@ export const MessageWindow: React.FC<MessageWindowProps> = ({
       </div>
       <div className="relative z-10 m-3" data-message-content>
         {showJson ? (
-          <pre className="text-light m-0 overflow-x-auto rounded-sm bg-black/30 p-2 font-mono text-[11px] leading-snug whitespace-pre-wrap">
+          <pre className="m-0 overflow-x-auto rounded-sm bg-black/30 p-2 font-mono text-[11px] leading-snug whitespace-pre-wrap text-neutral-300">
             {JSON.stringify(message, null, 2)}
           </pre>
         ) : (
diff --git a/src/components/Messages/StreamErrorMessage.tsx b/src/components/Messages/StreamErrorMessage.tsx
index e02bc0824..c3d6511a6 100644
--- a/src/components/Messages/StreamErrorMessage.tsx
+++ b/src/components/Messages/StreamErrorMessage.tsx
@@ -16,7 +16,7 @@ export const StreamErrorMessage: React.FC<StreamErrorMessageProps> = ({ message,
       <div className="font-primary text-error mb-3 flex items-center gap-2.5 text-[13px] font-semibold tracking-wide">
         <span className="text-base leading-none">●</span>
         <span>Stream Error</span>
-        <span className="text-secondary rounded-sm bg-black/40 px-2 py-0.5 font-mono text-[10px] tracking-wider uppercase">
+        <span className="rounded-sm bg-black/40 px-2 py-0.5 font-mono text-[10px] tracking-wider text-neutral-400 uppercase">
           {message.errorType}
         </span>
         {showCount && (
@@ -25,7 +25,7 @@ export const StreamErrorMessage: React.FC<StreamErrorMessageProps> = ({ message,
           </span>
         )}
       </div>
-      <div className="text-foreground font-mono text-[13px] leading-relaxed break-words">
+      <div className="font-mono text-[13px] leading-relaxed break-words text-neutral-300">
         {message.error}
       </div>
     </div>
diff --git a/src/components/Messages/TerminalOutput.tsx b/src/components/Messages/TerminalOutput.tsx
index c6c370ee6..7a0a1a0ab 100644
--- a/src/components/Messages/TerminalOutput.tsx
+++ b/src/components/Messages/TerminalOutput.tsx
@@ -17,7 +17,7 @@ export const TerminalOutput: React.FC<TerminalOutputProps> = ({
       className={cn(
         "m-0 p-2 bg-black/30 rounded-sm font-mono text-[11px] leading-relaxed",
         "overflow-x-auto max-h-[300px] overflow-y-auto whitespace-pre-wrap break-all",
-        isError ? "text-danger-soft" : "text-light",
+        isError ? "text-danger-soft" : "text-neutral-300",
         className
       )}
     >
diff --git a/src/components/Messages/UserMessage.tsx b/src/components/Messages/UserMessage.tsx
index c83b28005..4d7d0eaf2 100644
--- a/src/components/Messages/UserMessage.tsx
+++ b/src/components/Messages/UserMessage.tsx
@@ -100,7 +100,7 @@ export const UserMessage: React.FC<UserMessageProps> = ({
       className={className}
     >
       {content && (
-        <pre className="text-subtle m-0 font-mono text-xs leading-4 break-words whitespace-pre-wrap opacity-90">
+        <pre className="m-0 font-mono text-xs leading-4 break-words whitespace-pre-wrap text-neutral-400 opacity-90">
           {content}
         </pre>
       )}
@@ -111,7 +111,7 @@ export const UserMessage: React.FC<UserMessageProps> = ({
               key={idx}
               src={img.url}
               alt={`Attachment ${idx + 1}`}
-              className="border-border-light max-h-[300px] max-w-80 rounded border"
+              className="max-h-[300px] max-w-80 rounded border border-neutral-800"
             />
           ))}
         </div>
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index c3307ee93..998b5d481 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -28,7 +28,7 @@ export const ModalContent: React.FC<
 > = ({ children, maxWidth = "500px", maxHeight, className, ...props }) => (
   <div
     className={cn(
-      "bg-dark rounded-lg p-6 w-[90%] flex flex-col shadow-lg border border-border",
+      "bg-neutral-900 rounded-lg p-6 w-[90%] flex flex-col shadow-lg border border-neutral-800",
       "[&_h2]:mt-0 [&_h2]:mb-2 [&_h2]:text-white",
       className
     )}
@@ -44,7 +44,7 @@ export const ModalSubtitle: React.FC<{
   id?: string;
   className?: string;
 }> = ({ children, id, className }) => (
-  <p id={id} className={cn("text-muted text-sm mb-5", className)}>
+  <p id={id} className={cn("text-neutral-400 text-sm mb-5", className)}>
     {children}
   </p>
 );
@@ -57,9 +57,9 @@ export const ModalInfo: React.FC<{
   <div
     id={id}
     className={cn(
-      "bg-modal-bg border border-border-medium rounded p-3 mb-5 text-[13px]",
-      "[&_p]:m-0 [&_p]:mb-2 [&_p]:text-muted [&_p:last-child]:mb-0",
-      "[&_code]:text-accent [&_code]:font-mono",
+      "bg-neutral-900 border border-neutral-700 rounded p-3 mb-5 text-[13px]",
+      "[&_p]:m-0 [&_p]:mb-2 [&_p]:text-neutral-400 [&_p:last-child]:mb-0",
+      "[&_code]:text-sky-600 [&_code]:font-mono",
       className
     )}
   >
@@ -83,7 +83,7 @@ export const ErrorLabel: React.FC<{ children: React.ReactNode; className?: strin
   className,
 }) => (
   <div
-    className={cn("text-[11px] text-foreground-secondary uppercase tracking-wide mb-2", className)}
+    className={cn("text-[11px] text-neutral-300-secondary uppercase tracking-wide mb-2", className)}
   >
     {children}
   </div>
@@ -95,8 +95,8 @@ export const ErrorCodeBlock: React.FC<{ children: React.ReactNode; className?: s
 }) => (
   <pre
     className={cn(
-      "bg-background-secondary border border-border rounded p-3",
-      "text-xs font-mono text-foreground overflow-x-auto whitespace-pre-wrap break-words leading-relaxed",
+      "bg-neutral-900-secondary border border-neutral-800 rounded p-3",
+      "text-xs font-mono text-neutral-300 overflow-x-auto whitespace-pre-wrap break-words leading-relaxed",
       className
     )}
   >
@@ -121,7 +121,9 @@ export const WarningTitle: React.FC<{ children: React.ReactNode; className?: str
 export const WarningText: React.FC<{ children: React.ReactNode; className?: string }> = ({
   children,
   className,
-}) => <div className={cn("text-[13px] text-foreground leading-normal", className)}>{children}</div>;
+}) => (
+  <div className={cn("text-[13px] text-neutral-300 leading-normal", className)}>{children}</div>
+);
 
 // Button components
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -144,7 +146,7 @@ export const Button: React.FC<ButtonProps> = ({ children, className, ...props })
 export const CancelButton: React.FC<ButtonProps> = ({ children, className, ...props }) => (
   <Button
     className={cn(
-      "bg-border-medium text-foreground hover:bg-border-darker disabled:hover:bg-border-medium",
+      "bg-neutral-700 text-neutral-300 hover:bg-neutral-800 disabled:hover:bg-neutral-700",
       className
     )}
     {...props}
@@ -155,7 +157,7 @@ export const CancelButton: React.FC<ButtonProps> = ({ children, className, ...pr
 
 export const PrimaryButton: React.FC<ButtonProps> = ({ children, className, ...props }) => (
   <Button
-    className={cn("bg-accent text-white hover:bg-accent-dark disabled:hover:bg-accent", className)}
+    className={cn("bg-sky-600 text-white hover:bg-sky-700 disabled:hover:bg-sky-600", className)}
     {...props}
   >
     {children}
diff --git a/src/components/ModelSelector.tsx b/src/components/ModelSelector.tsx
index 64d729836..5dcbc324f 100644
--- a/src/components/ModelSelector.tsx
+++ b/src/components/ModelSelector.tsx
@@ -185,7 +185,7 @@ export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
       return (
         <div ref={containerRef} className="relative flex items-center gap-1">
           <div
-            className="text-muted-light font-monospace dir-rtl hover:bg-hover max-w-36 cursor-pointer truncate rounded-sm px-1 py-0.5 text-left font-mono text-[10px] leading-[11px] transition-colors duration-200"
+            className="text-neutral-400-light font-monospace dir-rtl max-w-36 cursor-pointer truncate rounded-sm px-1 py-0.5 text-left font-mono text-[10px] leading-[11px] transition-colors duration-200 hover:bg-neutral-900"
             onClick={handleClick}
           >
             {value}
@@ -203,14 +203,14 @@ export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
             onChange={handleInputChange}
             onKeyDown={handleKeyDown}
             placeholder="provider:model-name"
-            className="text-light bg-dark border-border-light font-monospace focus:border-exec-mode w-48 rounded-sm border px-1 py-0.5 text-[10px] leading-[11px] outline-none"
+            className="font-monospace focus:border-exec-mode w-48 rounded-sm border border-neutral-800 bg-neutral-900 px-1 py-0.5 text-[10px] leading-[11px] text-neutral-300 outline-none"
           />
           {error && (
             <div className="text-danger-soft font-monospace mt-0.5 text-[9px]">{error}</div>
           )}
         </div>
         {showDropdown && filteredModels.length > 0 && (
-          <div className="bg-separator border-border-light absolute bottom-full left-0 z-[1000] mb-1 max-h-[200px] min-w-80 overflow-y-auto rounded border shadow-[0_4px_12px_rgba(0,0,0,0.3)]">
+          <div className="absolute bottom-full left-0 z-[1000] mb-1 max-h-[200px] min-w-80 overflow-y-auto rounded border border-neutral-800 bg-neutral-900 shadow-[0_4px_12px_rgba(0,0,0,0.3)]">
             {filteredModels.map((model, index) => (
               <div
                 key={model}
@@ -219,8 +219,8 @@ export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
                   "text-[11px] font-monospace py-1.5 px-2.5 cursor-pointer transition-colors duration-100",
                   "first:rounded-t last:rounded-b",
                   index === highlightedIndex
-                    ? "text-white bg-hover"
-                    : "text-light bg-transparent hover:bg-hover hover:text-white"
+                    ? "text-white bg-neutral-900"
+                    : "text-neutral-300 bg-transparent hover:bg-neutral-900 hover:text-white"
                 )}
                 onClick={() => handleSelectModel(model)}
               >
diff --git a/src/components/NewWorkspaceModal.tsx b/src/components/NewWorkspaceModal.tsx
index 9b1d7e51f..9d2bc192f 100644
--- a/src/components/NewWorkspaceModal.tsx
+++ b/src/components/NewWorkspaceModal.tsx
@@ -163,7 +163,7 @@ const NewWorkspaceModal: React.FC<NewWorkspaceModalProps> = ({
             required
             aria-required="true"
           />
-          {error && <div className="text-danger-light mt-1.5 text-[13px]">{error}</div>}
+          {error && <div className="mt-1.5 text-[13px] text-red-400">{error}</div>}
         </div>
 
         <div className={formFieldClasses}>
@@ -196,7 +196,7 @@ const NewWorkspaceModal: React.FC<NewWorkspaceModalProps> = ({
             />
           )}
           {!hasBranches && (
-            <div className="text-danger-light mt-1.5 text-[13px]">
+            <div className="mt-1.5 text-[13px] text-red-400">
               No branches were detected automatically. Enter the trunk branch manually.
             </div>
           )}
@@ -237,7 +237,7 @@ const NewWorkspaceModal: React.FC<NewWorkspaceModalProps> = ({
               required
               aria-required="true"
             />
-            <div className="text-muted mt-1.5 text-[13px]">
+            <div className="mt-1.5 text-[13px] text-neutral-400">
               Workspace will be created at ~/cmux/{branchName || "<branch-name>"} on remote host
             </div>
           </div>
@@ -254,8 +254,8 @@ const NewWorkspaceModal: React.FC<NewWorkspaceModalProps> = ({
 
         {branchName.trim() && (
           <div>
-            <div className="text-muted mb-2 font-sans text-xs">Equivalent command:</div>
-            <div className="bg-dark border-border-light text-light mt-5 rounded border p-3 font-mono text-[13px] break-all whitespace-pre-wrap">
+            <div className="mb-2 font-sans text-xs text-neutral-400">Equivalent command:</div>
+            <div className="mt-5 rounded border border-neutral-700 bg-neutral-900 p-3 font-mono text-[13px] break-all whitespace-pre-wrap text-neutral-300">
               {formatNewCommand(
                 branchName.trim(),
                 trunkBranch.trim() || undefined,
diff --git a/src/components/PinnedTodoList.tsx b/src/components/PinnedTodoList.tsx
index 2e06db5fe..6b9471cec 100644
--- a/src/components/PinnedTodoList.tsx
+++ b/src/components/PinnedTodoList.tsx
@@ -44,7 +44,7 @@ export const PinnedTodoList: React.FC<PinnedTodoListProps> = ({ workspaceId }) =
   return (
     <div className="bg-panel-background m-0 max-h-[300px] overflow-y-auto border-t border-dashed border-[hsl(0deg_0%_28.64%)]">
       <div
-        className="text-secondary flex cursor-pointer items-center gap-1 px-2 pt-1 pb-0.5 font-mono text-[10px] font-semibold tracking-wider select-none hover:opacity-80"
+        className="flex cursor-pointer items-center gap-1 px-2 pt-1 pb-0.5 font-mono text-[10px] font-semibold tracking-wider text-neutral-400 select-none hover:opacity-80"
         onClick={() => setExpanded(!expanded)}
       >
         <span
diff --git a/src/components/ProjectSidebar.tsx b/src/components/ProjectSidebar.tsx
index 17ada1e8e..d09caf821 100644
--- a/src/components/ProjectSidebar.tsx
+++ b/src/components/ProjectSidebar.tsx
@@ -136,14 +136,14 @@ const ProjectDragLayer: React.FC = () => {
   return (
     <div className="pointer-events-none fixed inset-0 z-[9999] cursor-grabbing">
       <div style={{ transform: `translate(${currentOffset.x + 10}px, ${currentOffset.y + 10}px)` }}>
-        <div className="bg-hover/95 text-foreground border-l-accent flex w-fit max-w-72 min-w-44 items-center rounded border-l-[3px] px-3 py-1.5 shadow-[0_6px_24px_rgba(0,0,0,0.4)]">
-          <span className="text-dim mr-1.5 text-xs">⠿</span>
-          <span className="text-muted mr-2 text-[10px]">▶</span>
+        <div className="border-l-accent flex w-fit max-w-72 min-w-44 items-center rounded border-l-[3px] bg-neutral-800/95 px-3 py-1.5 text-neutral-300 shadow-[0_6px_24px_rgba(0,0,0,0.4)]">
+          <span className="mr-1.5 text-xs text-neutral-400">⠿</span>
+          <span className="mr-2 text-[10px] text-neutral-400">▶</span>
           <div className="min-w-0 flex-1">
-            <div className="text-foreground truncate text-sm font-medium tracking-[0.2px]">
+            <div className="truncate text-sm font-medium tracking-[0.2px] text-neutral-300">
               {name}
             </div>
-            <div className="text-muted-dark font-monospace mt-0.5 truncate text-[11px]">
+            <div className="font-monospace mt-0.5 truncate text-[11px] text-neutral-400">
               {abbrevPath}
             </div>
           </div>
@@ -416,21 +416,21 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
       <DndProvider backend={HTML5Backend}>
         <ProjectDragLayer />
         <div
-          className="font-primary bg-dark border-border-light flex flex-1 flex-col overflow-hidden border-r"
+          className="font-primary flex flex-1 flex-col overflow-hidden border-r border-neutral-800 bg-neutral-800"
           role="navigation"
           aria-label="Projects"
         >
           {!collapsed && (
             <>
-              <div className="border-dark bg-separator flex items-center justify-between border-b p-4">
-                <h2 className="text-foreground m-0 text-[13px] font-semibold tracking-[0.8px] uppercase">
+              <div className="flex items-center justify-between border-b border-neutral-950 bg-neutral-800 p-4">
+                <h2 className="m-0 text-[13px] font-semibold tracking-[0.8px] text-neutral-300 uppercase">
                   Projects
                 </h2>
                 <TooltipWrapper inline>
                   <button
                     onClick={onAddProject}
                     aria-label="Add project"
-                    className="text-foreground hover:bg-hover hover:border-border-light flex h-6 w-6 cursor-pointer items-center justify-center rounded border border-transparent bg-transparent p-0 text-lg transition-all duration-200"
+                    className="flex h-6 w-6 cursor-pointer items-center justify-center rounded border border-transparent bg-transparent p-0 text-lg text-neutral-300 transition-all duration-200 hover:border-neutral-800 hover:bg-neutral-800"
                   >
                     +
                   </button>
@@ -442,10 +442,10 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
               <div className="flex-1 overflow-y-auto">
                 {projects.size === 0 ? (
                   <div className="px-4 py-8 text-center">
-                    <p className="text-muted mb-4 text-[13px]">No projects</p>
+                    <p className="mb-4 text-[13px] text-neutral-400">No projects</p>
                     <button
                       onClick={onAddProject}
-                      className="bg-accent hover:bg-accent-dark cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white transition-colors duration-200"
+                      className="hover:bg-sky-600-dark cursor-pointer rounded border-none bg-sky-600 px-4 py-2 text-[13px] text-white transition-colors duration-200"
                     >
                       Add Project
                     </button>
@@ -461,7 +461,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                     const isExpanded = expandedProjects.has(projectPath);
 
                     return (
-                      <div key={projectPath} className="border-hover border-b">
+                      <div key={projectPath} className="border-b border-neutral-900">
                         <DraggableProjectItem
                           projectPath={projectPath}
                           onReorder={handleReorder}
@@ -482,24 +482,24 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                           <span
                             data-drag-handle
                             aria-hidden
-                            className="text-dim mr-1.5 cursor-grab text-xs opacity-0 transition-opacity duration-150 select-none"
+                            className="mr-1.5 cursor-grab text-xs text-neutral-400 opacity-0 transition-opacity duration-150 select-none"
                           >
                             ⠿
                           </span>
                           <span
                             data-project-path={projectPath}
                             aria-hidden="true"
-                            className="text-muted mr-2 shrink-0 text-[10px] transition-transform duration-200"
+                            className="mr-2 shrink-0 text-[10px] text-neutral-400 transition-transform duration-200"
                             style={{ transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)" }}
                           >
                             ▶
                           </span>
                           <div className="min-w-0 flex-1 pr-2">
-                            <div className="text-foreground truncate text-sm font-medium tracking-[0.2px]">
+                            <div className="truncate text-sm font-medium tracking-[0.2px] text-neutral-300">
                               {projectName}
                             </div>
                             <TooltipWrapper inline>
-                              <div className="text-muted-dark font-monospace mt-px truncate text-[11px]">
+                              <div className="font-monospace mt-px truncate text-[11px] text-neutral-400">
                                 {abbreviatePath(projectPath)}
                               </div>
                               <Tooltip className="tooltip" align="left">
@@ -515,7 +515,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                               }}
                               aria-label={`Manage secrets for ${projectName}`}
                               data-project-path={projectPath}
-                              className="text-muted-dark hover:text-accent hover:bg-accent/10 mr-1 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-[3px] border-none bg-transparent text-sm opacity-0 transition-all duration-200"
+                              className="mr-1 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-[3px] border-none bg-transparent text-sm text-neutral-400 opacity-0 transition-all duration-200 hover:bg-sky-600/10 hover:text-sky-600"
                             >
                               🔑
                             </button>
@@ -532,7 +532,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                               title="Remove project"
                               aria-label={`Remove project ${projectName}`}
                               data-project-path={projectPath}
-                              className="text-muted-dark hover:text-danger-light hover:bg-danger-light/10 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-[3px] border-none bg-transparent text-base opacity-0 transition-all duration-200"
+                              className="flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-[3px] border-none bg-transparent text-base text-neutral-400 opacity-0 transition-all duration-200 hover:bg-red-400/10 hover:text-red-400"
                             >
                               ×
                             </button>
@@ -544,12 +544,12 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
 
                         {isExpanded && (
                           <div id={workspaceListId}>
-                            <div className="border-hover border-b px-3 py-2 pl-[22px]">
+                            <div className="border-b border-neutral-900 px-3 py-2 pl-[22px]">
                               <button
                                 onClick={() => onAddWorkspace(projectPath)}
                                 data-project-path={projectPath}
                                 aria-label={`Add workspace to ${projectName}`}
-                                className="text-muted border-border-medium hover:bg-hover hover:border-border-darker hover:text-foreground w-full cursor-pointer rounded border border-dashed bg-transparent px-3 py-1.5 text-left text-[13px] transition-all duration-200"
+                                className="hover:border-neutral-800-darker w-full cursor-pointer rounded border border-dashed border-neutral-700 bg-transparent px-3 py-1.5 text-left text-[13px] text-neutral-400 transition-all duration-200 hover:bg-neutral-800 hover:text-neutral-300"
                               >
                                 + New Workspace
                                 {selectedWorkspace?.projectPath === projectPath &&
@@ -592,16 +592,16 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                                             : `Expand workspaces older than ${formatOldWorkspaceThreshold()}`
                                         }
                                         aria-expanded={showOldWorkspaces}
-                                        className="text-muted border-hover hover:text-label [&:hover_.arrow]:text-label flex w-full cursor-pointer items-center justify-between border-t border-none bg-transparent px-3 py-2 pl-[22px] text-xs font-medium transition-all duration-150 hover:bg-white/[0.03]"
+                                        className="border-hover flex w-full cursor-pointer items-center justify-between border-t border-none bg-transparent px-3 py-2 pl-[22px] text-xs font-medium text-neutral-400 transition-all duration-150 hover:bg-white/[0.03] hover:text-neutral-400 [&:hover_.arrow]:text-neutral-400"
                                       >
                                         <div className="flex items-center gap-1.5">
                                           <span>Older than {formatOldWorkspaceThreshold()}</span>
-                                          <span className="text-dim font-normal">
+                                          <span className="font-normal text-neutral-400">
                                             ({old.length})
                                           </span>
                                         </div>
                                         <span
-                                          className="arrow text-dim text-[11px] transition-transform duration-200 ease-in-out"
+                                          className="arrow text-[11px] text-neutral-400 transition-transform duration-200 ease-in-out"
                                           style={{
                                             transform: showOldWorkspaces
                                               ? "rotate(90deg)"
@@ -629,7 +629,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
           <TooltipWrapper inline>
             <button
               onClick={onToggleCollapsed}
-              className="text-muted border-dark hover:bg-hover hover:text-foreground mt-auto flex h-9 w-full cursor-pointer items-center justify-center border-t border-none bg-transparent p-0 text-sm transition-all duration-200"
+              className="mt-auto flex h-9 w-full cursor-pointer items-center justify-center border-t border-none border-neutral-950 bg-transparent p-0 text-sm text-neutral-400 transition-all duration-200 hover:bg-neutral-800 hover:text-neutral-300"
             >
               {collapsed ? "»" : "«"}
             </button>
diff --git a/src/components/RightSidebar.tsx b/src/components/RightSidebar.tsx
index 87543006c..c76633d22 100644
--- a/src/components/RightSidebar.tsx
+++ b/src/components/RightSidebar.tsx
@@ -201,7 +201,7 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
       <div className={cn("flex-row h-full", !showCollapsed ? "flex" : "hidden")}>
         {/* Render meter when Review tab is active */}
         {selectedTab === "review" && (
-          <div className="bg-separator border-border-light flex w-5 shrink-0 flex-col border-r">
+          <div className="flex w-5 shrink-0 flex-col border-r border-neutral-800 bg-neutral-800">
             {verticalMeter}
           </div>
         )}
@@ -211,8 +211,8 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
           <div
             className={cn(
               "w-1 flex-shrink-0 z-10 transition-[background] duration-150",
-              "bg-border-light cursor-col-resize hover:bg-accent",
-              isResizing && "bg-accent"
+              "bg-border-neutral-800 cursor-col-resize hover:bg-sky-600",
+              isResizing && "bg-sky-600"
             )}
             onMouseDown={(e) => onStartResize(e as unknown as React.MouseEvent)}
           />
@@ -220,7 +220,7 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
 
         <div className="flex min-w-0 flex-1 flex-col">
           <div
-            className="bg-background-secondary border-border flex border-b [&>*]:flex-1"
+            className="bg-neutral-800-secondary flex border-b border-neutral-800 [&>*]:flex-1"
             role="tablist"
             aria-label="Metadata views"
           >
@@ -229,8 +229,8 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
                 className={cn(
                   "w-full py-2.5 px-[15px] border-none border-solid cursor-pointer font-primary text-[13px] font-medium transition-all duration-200",
                   selectedTab === "costs"
-                    ? "text-white bg-separator border-b-2 border-b-plan-mode"
-                    : "bg-transparent text-secondary border-b-2 border-b-transparent hover:bg-background-secondary hover:text-foreground"
+                    ? "text-white bg-neutral-800 border-b-2 border-b-plan-mode"
+                    : "bg-transparent text-neutral-400 border-b-2 border-b-transparent hover:bg-neutral-800-secondary hover:text-neutral-300"
                 )}
                 onClick={() => setSelectedTab("costs")}
                 id={costsTabId}
@@ -250,8 +250,8 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
                 className={cn(
                   "w-full py-2.5 px-[15px] border-none border-solid cursor-pointer font-primary text-[13px] font-medium transition-all duration-200",
                   selectedTab === "review"
-                    ? "text-white bg-separator border-b-2 border-b-plan-mode"
-                    : "bg-transparent text-secondary border-b-2 border-b-transparent hover:bg-background-secondary hover:text-foreground"
+                    ? "text-white bg-neutral-800 border-b-2 border-b-plan-mode"
+                    : "bg-transparent text-neutral-400 border-b-2 border-b-transparent hover:bg-neutral-800-secondary hover:text-neutral-300"
                 )}
                 onClick={() => setSelectedTab("review")}
                 id={reviewTabId}
diff --git a/src/components/RightSidebar/CodeReview/FileTree.tsx b/src/components/RightSidebar/CodeReview/FileTree.tsx
index 40e53d900..48eb50e5e 100644
--- a/src/components/RightSidebar/CodeReview/FileTree.tsx
+++ b/src/components/RightSidebar/CodeReview/FileTree.tsx
@@ -146,9 +146,9 @@ const TreeNodeContent: React.FC<{
               className={cn(
                 "flex-1",
                 isFullyRead &&
-                  "text-dim line-through [text-decoration-color:var(--color-read)] [text-decoration-thickness:2px]",
-                isUnknownState && !isFullyRead && "text-dim",
-                !isFullyRead && !isUnknownState && "text-muted"
+                  "text-neutral-400 line-through [text-decoration-color:var(--color-read)] [text-decoration-thickness:2px]",
+                isUnknownState && !isFullyRead && "text-neutral-400",
+                !isFullyRead && !isUnknownState && "text-neutral-400"
               )}
             >
               {node.name || "/"}
@@ -181,9 +181,9 @@ const TreeNodeContent: React.FC<{
               className={cn(
                 "flex-1",
                 isFullyRead &&
-                  "text-dim line-through [text-decoration-color:var(--color-read)] [text-decoration-thickness:2px]",
-                isUnknownState && !isFullyRead && "text-dim",
-                !isFullyRead && !isUnknownState && "text-foreground"
+                  "text-neutral-400 line-through [text-decoration-color:var(--color-read)] [text-decoration-thickness:2px]",
+                isUnknownState && !isFullyRead && "text-neutral-400",
+                !isFullyRead && !isUnknownState && "text-neutral-300"
               )}
             >
               {node.name}
@@ -246,11 +246,11 @@ export const FileTree: React.FC<FileTreeExternalProps> = ({
 
   return (
     <>
-      <div className="border-border-light text-foreground font-primary flex items-center gap-2 border-b px-3 py-2 text-xs font-medium">
+      <div className="font-primary flex items-center gap-2 border-b border-neutral-800 px-3 py-2 text-xs font-medium text-neutral-300">
         <span>Files Changed</span>
         {selectedPath && (
           <button
-            className="text-muted font-primary hover:text-foreground ml-auto cursor-pointer rounded-[3px] border-none bg-transparent px-2 py-0.5 text-[11px] transition-all duration-200 hover:bg-white/5"
+            className="font-primary ml-auto cursor-pointer rounded-[3px] border-none bg-transparent px-2 py-0.5 text-[11px] text-neutral-400 transition-all duration-200 hover:bg-white/5 hover:text-neutral-300"
             onClick={() => onSelectFile(null)}
           >
             Clear filter
@@ -259,7 +259,7 @@ export const FileTree: React.FC<FileTreeExternalProps> = ({
       </div>
       <div className="font-monospace min-h-0 flex-1 overflow-y-auto p-3 text-xs">
         {isLoading && !root ? (
-          <div className="text-muted py-5 text-center">Loading file tree...</div>
+          <div className="py-5 text-center text-neutral-400">Loading file tree...</div>
         ) : root ? (
           root.children.map((child) => (
             <TreeNodeContent
@@ -274,7 +274,7 @@ export const FileTree: React.FC<FileTreeExternalProps> = ({
             />
           ))
         ) : (
-          <div className="text-muted py-5 text-center">No files changed</div>
+          <div className="py-5 text-center text-neutral-400">No files changed</div>
         )}
       </div>
     </>
diff --git a/src/components/RightSidebar/CodeReview/HunkViewer.tsx b/src/components/RightSidebar/CodeReview/HunkViewer.tsx
index a8a4b6e34..1e397b71f 100644
--- a/src/components/RightSidebar/CodeReview/HunkViewer.tsx
+++ b/src/components/RightSidebar/CodeReview/HunkViewer.tsx
@@ -138,9 +138,9 @@ export const HunkViewer = React.memo<HunkViewerProps>(
     return (
       <div
         className={cn(
-          "bg-dark border rounded mb-3 overflow-hidden cursor-pointer transition-all duration-200",
+          "bg-neutral-900 border rounded mb-3 overflow-hidden cursor-pointer transition-all duration-200",
           "focus:outline-none focus-visible:outline-none",
-          isRead ? "border-read" : "border-border-light",
+          isRead ? "border-read" : "border-neutral-800",
           isSelected && "border-review-accent shadow-[0_0_0_1px_var(--color-review-accent)]"
         )}
         onClick={onClick}
@@ -148,7 +148,7 @@ export const HunkViewer = React.memo<HunkViewerProps>(
         tabIndex={0}
         data-hunk-id={hunkId}
       >
-        <div className="bg-separator border-border-light font-monospace flex items-center justify-between gap-2 border-b px-3 py-2 text-xs">
+        <div className="font-monospace flex items-center justify-between gap-2 border-b border-neutral-800 bg-neutral-900 px-3 py-2 text-xs">
           {isRead && (
             <TooltipWrapper inline>
               <span
@@ -163,7 +163,7 @@ export const HunkViewer = React.memo<HunkViewerProps>(
             </TooltipWrapper>
           )}
           <div
-            className="text-foreground min-w-0 truncate font-medium"
+            className="min-w-0 truncate font-medium text-neutral-300"
             dangerouslySetInnerHTML={{ __html: highlightedFilePath }}
           />
           <div className="flex shrink-0 items-center gap-2 text-[11px] whitespace-nowrap">
@@ -173,13 +173,13 @@ export const HunkViewer = React.memo<HunkViewerProps>(
                 {deletions > 0 && <span className="text-warning-light">-{deletions}</span>}
               </span>
             )}
-            <span className="text-muted">
+            <span className="text-neutral-400">
               ({lineCount} {lineCount === 1 ? "line" : "lines"})
             </span>
             {onToggleRead && (
               <TooltipWrapper inline>
                 <button
-                  className="border-border-light text-muted hover:border-read hover:text-read flex cursor-pointer items-center gap-1 rounded-[3px] border bg-transparent px-1.5 py-0.5 text-[11px] transition-all duration-200 hover:bg-white/5 active:scale-95"
+                  className="hover:border-read hover:text-read flex cursor-pointer items-center gap-1 rounded-[3px] border border-neutral-800 bg-transparent px-1.5 py-0.5 text-[11px] text-neutral-400 transition-all duration-200 hover:bg-white/5 active:scale-95"
                   data-hunk-id={hunkId}
                   onClick={handleToggleRead}
                   aria-label={`Mark as read (${formatKeybind(KEYBINDS.TOGGLE_HUNK_READ)})`}
@@ -195,7 +195,7 @@ export const HunkViewer = React.memo<HunkViewerProps>(
         </div>
 
         {isPureRename ? (
-          <div className="text-muted bg-code-keyword-overlay-light before:text-code-keyword flex items-center gap-2 p-3 text-[11px] before:text-sm before:content-['→']">
+          <div className="bg-code-keyword-overlay-light before:text-code-keyword flex items-center gap-2 p-3 text-[11px] text-neutral-400 before:text-sm before:content-['→']">
             Renamed from <code>{hunk.oldPath}</code>
           </div>
         ) : isExpanded ? (
@@ -219,7 +219,7 @@ export const HunkViewer = React.memo<HunkViewerProps>(
           </div>
         ) : (
           <div
-            className="text-muted hover:text-foreground cursor-pointer px-3 py-2 text-center text-[11px] italic"
+            className="cursor-pointer px-3 py-2 text-center text-[11px] text-neutral-400 italic hover:text-neutral-300"
             onClick={handleToggleExpand}
           >
             {isRead && "Hunk marked as read. "}Click to expand ({lineCount} lines) or press{" "}
@@ -229,7 +229,7 @@ export const HunkViewer = React.memo<HunkViewerProps>(
 
         {hasManualState && isExpanded && !isPureRename && (
           <div
-            className="text-muted hover:text-foreground cursor-pointer px-3 py-2 text-center text-[11px] italic"
+            className="cursor-pointer px-3 py-2 text-center text-[11px] text-neutral-400 italic hover:text-neutral-300"
             onClick={handleToggleExpand}
           >
             Click here or press {formatKeybind(KEYBINDS.TOGGLE_HUNK_COLLAPSE)} to collapse
diff --git a/src/components/RightSidebar/CodeReview/RefreshButton.tsx b/src/components/RightSidebar/CodeReview/RefreshButton.tsx
index a7f6a2ecd..2a22a6bc3 100644
--- a/src/components/RightSidebar/CodeReview/RefreshButton.tsx
+++ b/src/components/RightSidebar/CodeReview/RefreshButton.tsx
@@ -54,8 +54,8 @@ export const RefreshButton: React.FC<RefreshButtonProps> = ({ onClick, isLoading
         className={cn(
           "flex items-center justify-center bg-transparent border-none p-0.5 transition-colors duration-[1500ms] ease-out",
           animationState === "spinning"
-            ? "text-accent cursor-default hover:text-accent"
-            : "text-muted cursor-pointer hover:text-foreground",
+            ? "text-sky-600 cursor-default hover:text-sky-600"
+            : "text-neutral-400 cursor-pointer hover:text-neutral-300",
           animationState === "stopping" && "cursor-default"
         )}
       >
diff --git a/src/components/RightSidebar/CodeReview/ReviewControls.tsx b/src/components/RightSidebar/CodeReview/ReviewControls.tsx
index a4989c207..9a6863859 100644
--- a/src/components/RightSidebar/CodeReview/ReviewControls.tsx
+++ b/src/components/RightSidebar/CodeReview/ReviewControls.tsx
@@ -82,9 +82,9 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
   const showSetDefault = filters.diffBase !== defaultBase;
 
   return (
-    <div className="bg-separator border-border-light flex flex-wrap items-center gap-3 border-b px-3 py-2 text-[11px]">
+    <div className="flex flex-wrap items-center gap-3 border-b border-neutral-800 bg-neutral-900 px-3 py-2 text-[11px]">
       {onRefresh && <RefreshButton onClick={onRefresh} isLoading={isLoading} />}
-      <label className="text-muted font-medium whitespace-nowrap">Base:</label>
+      <label className="font-medium whitespace-nowrap text-neutral-400">Base:</label>
       <input
         type="text"
         list="base-suggestions"
@@ -93,7 +93,7 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
         onBlur={handleBaseBlur}
         onKeyDown={handleBaseKeyDown}
         placeholder="HEAD, main, etc."
-        className="bg-dark text-foreground border-border-medium hover:border-accent focus:border-accent placeholder:text-dim w-36 rounded border px-2 py-1 font-mono text-[11px] transition-[border-color] duration-200 focus:outline-none"
+        className="w-36 rounded border border-neutral-700 bg-neutral-900 px-2 py-1 font-mono text-[11px] text-neutral-300 transition-[border-color] duration-200 placeholder:text-neutral-400 hover:border-sky-600 focus:border-sky-600 focus:outline-none"
       />
       <datalist id="base-suggestions">
         <option value="HEAD" />
@@ -109,13 +109,13 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
       {showSetDefault && (
         <button
           onClick={handleSetDefault}
-          className="text-muted font-primary hover:bg-white-overlay-light hover:text-foreground cursor-pointer rounded border-none bg-transparent px-2 py-0.5 text-[11px] whitespace-nowrap transition-all duration-200"
+          className="font-primary hover:bg-white-overlay-light cursor-pointer rounded border-none bg-transparent px-2 py-0.5 text-[11px] whitespace-nowrap text-neutral-400 transition-all duration-200 hover:text-neutral-300"
         >
           Set Default
         </button>
       )}
 
-      <label className="text-foreground flex cursor-pointer items-center gap-1.5 text-[11px] whitespace-nowrap hover:text-white [&_input[type='checkbox']]:cursor-pointer">
+      <label className="flex cursor-pointer items-center gap-1.5 text-[11px] whitespace-nowrap text-neutral-300 hover:text-white [&_input[type='checkbox']]:cursor-pointer">
         <input
           type="checkbox"
           checked={filters.includeUncommitted}
@@ -124,7 +124,7 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
         Uncommitted
       </label>
 
-      <label className="text-foreground flex cursor-pointer items-center gap-1.5 text-[11px] whitespace-nowrap hover:text-white [&_input[type='checkbox']]:cursor-pointer">
+      <label className="flex cursor-pointer items-center gap-1.5 text-[11px] whitespace-nowrap text-neutral-300 hover:text-white [&_input[type='checkbox']]:cursor-pointer">
         <input type="checkbox" checked={filters.showReadHunks} onChange={handleShowReadToggle} />
         Show read
       </label>
@@ -136,9 +136,9 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
         onRefresh={onRefresh}
       />
 
-      <div className="bg-border-light h-4 w-px" />
+      <div className="bg-border-neutral-800 h-4 w-px" />
 
-      <div className="text-muted rounded border border-transparent bg-transparent px-2.5 py-1 text-[11px] font-medium whitespace-nowrap">
+      <div className="rounded border border-transparent bg-transparent px-2.5 py-1 text-[11px] font-medium whitespace-nowrap text-neutral-400">
         {stats.read} read / {stats.total} total
       </div>
     </div>
diff --git a/src/components/RightSidebar/CodeReview/ReviewPanel.tsx b/src/components/RightSidebar/CodeReview/ReviewPanel.tsx
index 2b1357130..49c20785e 100644
--- a/src/components/RightSidebar/CodeReview/ReviewPanel.tsx
+++ b/src/components/RightSidebar/CodeReview/ReviewPanel.tsx
@@ -532,7 +532,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
       tabIndex={0}
       onFocus={() => setIsPanelFocused(true)}
       onBlur={() => setIsPanelFocused(false)}
-      className="bg-dark [container-type:inline-size] flex h-full min-h-0 flex-col outline-none [container-name:review-panel] focus-within:shadow-[inset_0_0_0_1px_rgba(0,122,204,0.2)]"
+      className="[container-type:inline-size] flex h-full min-h-0 flex-col bg-neutral-900 outline-none [container-name:review-panel] focus-within:shadow-[inset_0_0_0_1px_rgba(0,122,204,0.2)]"
     >
       {/* Always show controls so user can change diff base */}
       <ReviewControls
@@ -551,122 +551,105 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
           {error}
         </div>
       ) : isLoadingHunks && hunks.length === 0 && !fileTree ? (
-        <div className="text-muted flex h-full items-center justify-center text-sm">
+        <div className="flex h-full items-center justify-center text-sm text-neutral-400">
           Loading diff...
         </div>
       ) : (
-        <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
-          {truncationWarning && (
-            <div className="bg-warning/10 border-warning/30 text-warning mx-3 my-3 flex items-center gap-1.5 rounded border px-3 py-1.5 text-[10px] leading-[1.3] before:text-xs before:content-['⚠️']">
-              {truncationWarning}
-            </div>
-          )}
-
-          {/* Search bar - always visible at top, not sticky */}
-          <div className="border-border-light bg-separator border-b px-3 py-2">
-            <div className="border-border-light bg-dark hover:border-border-gray focus-within:border-accent focus-within:hover:border-accent flex items-stretch overflow-hidden rounded border transition-[border-color] duration-150">
-              <input
-                ref={searchInputRef}
-                type="text"
-                placeholder={`Search in files and hunks... (${formatKeybind(KEYBINDS.FOCUS_REVIEW_SEARCH)})`}
-                value={searchState.input}
-                onChange={(e) => setSearchState({ ...searchState, input: e.target.value })}
-                className="text-foreground placeholder:text-dim focus:bg-separator flex h-full flex-1 items-center border-none bg-transparent px-2.5 py-1.5 font-sans text-xs leading-[1.4] outline-none"
-              />
-              <TooltipWrapper inline>
-                <button
-                  className={cn(
-                    "py-1.5 px-2.5 border-none border-l border-light text-[11px] font-monospace font-semibold leading-[1.4] cursor-pointer outline-none transition-all duration-150 whitespace-nowrap flex items-center h-full",
-                    searchState.useRegex
-                      ? "bg-review-bg-blue text-accent-light shadow-[inset_0_0_0_1px_rgba(77,184,255,0.4)] hover:bg-review-bg-info hover:text-accent-light"
-                      : "bg-transparent text-subtle hover:bg-separator hover:text-foreground",
-                    "active:translate-y-px"
-                  )}
-                  onClick={() =>
-                    setSearchState({ ...searchState, useRegex: !searchState.useRegex })
-                  }
-                >
-                  .*
-                </button>
-                <Tooltip position="bottom">
-                  {searchState.useRegex ? "Using regex search" : "Using substring search"}
-                </Tooltip>
-              </TooltipWrapper>
-              <TooltipWrapper inline>
-                <button
-                  className={cn(
-                    "py-1.5 px-2.5 border-none border-l border-light text-[11px] font-monospace font-semibold leading-[1.4] cursor-pointer outline-none transition-all duration-150 whitespace-nowrap flex items-center h-full",
-                    searchState.matchCase
-                      ? "bg-review-bg-blue text-accent-light shadow-[inset_0_0_0_1px_rgba(77,184,255,0.4)] hover:bg-review-bg-info hover:text-accent-light"
-                      : "bg-transparent text-subtle hover:bg-separator hover:text-foreground",
-                    "active:translate-y-px"
-                  )}
-                  onClick={() =>
-                    setSearchState({ ...searchState, matchCase: !searchState.matchCase })
-                  }
-                >
-                  Aa
-                </button>
-                <Tooltip position="bottom">
-                  {searchState.matchCase
-                    ? "Match case (case-sensitive)"
-                    : "Ignore case (case-insensitive)"}
-                </Tooltip>
-              </TooltipWrapper>
-            </div>
-          </div>
+        <div className="flex min-h-0 flex-1 flex-row overflow-hidden @[800px]:flex-col">
+          <div className="order-1 flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+            {truncationWarning && (
+              <div className="bg-warning/10 border-warning/30 text-warning mx-3 my-3 flex items-center gap-1.5 rounded border px-3 py-1.5 text-[10px] leading-[1.3] before:text-xs before:content-['⚠️']">
+                {truncationWarning}
+              </div>
+            )}
 
-          {/* Single scrollable area containing both file tree and hunks */}
-          <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
-            {/* FileTree at the top */}
-            {(fileTree ?? isLoadingTree) && (
-              <div className="border-border-light flex w-full flex-[0_0_auto] flex-col overflow-hidden border-b">
-                <FileTree
-                  root={fileTree}
-                  selectedPath={selectedFilePath}
-                  onSelectFile={setSelectedFilePath}
-                  isLoading={isLoadingTree}
-                  getFileReadStatus={getFileReadStatus}
-                  workspaceId={workspaceId}
+            <div className="border-b border-neutral-800 bg-neutral-900 px-3 py-2">
+              <div className="hover:border-neutral-800-gray flex items-stretch overflow-hidden rounded border border-neutral-800 bg-neutral-900 transition-[border-color] duration-150 focus-within:border-sky-600 focus-within:hover:border-sky-600">
+                <input
+                  ref={searchInputRef}
+                  type="text"
+                  placeholder={`Search in files and hunks... (${formatKeybind(KEYBINDS.FOCUS_REVIEW_SEARCH)})`}
+                  value={searchState.input}
+                  onChange={(e) => setSearchState({ ...searchState, input: e.target.value })}
+                  className="flex h-full flex-1 items-center border-none bg-transparent px-2.5 py-1.5 font-sans text-xs leading-[1.4] text-neutral-300 outline-none placeholder:text-neutral-400 focus:bg-neutral-900"
                 />
+                <TooltipWrapper inline>
+                  <button
+                    className={cn(
+                      "py-1.5 px-2.5 border-none border-l border-neutral-800 text-[11px] font-monospace font-semibold leading-[1.4] cursor-pointer outline-none transition-all duration-150 whitespace-nowrap flex items-center h-full",
+                      searchState.useRegex
+                        ? "bg-review-bg-blue text-sky-600-light shadow-[inset_0_0_0_1px_rgba(77,184,255,0.4)] hover:bg-review-bg-info hover:text-sky-600-light"
+                        : "bg-transparent text-neutral-400 hover:bg-neutral-900 hover:text-neutral-300",
+                      "active:translate-y-px"
+                    )}
+                    onClick={() =>
+                      setSearchState({ ...searchState, useRegex: !searchState.useRegex })
+                    }
+                  >
+                    .*
+                  </button>
+                  <Tooltip position="bottom">
+                    {searchState.useRegex ? "Using regex search" : "Using substring search"}
+                  </Tooltip>
+                </TooltipWrapper>
+                <TooltipWrapper inline>
+                  <button
+                    className={cn(
+                      "py-1.5 px-2.5 border-none border-l border-neutral-800 text-[11px] font-monospace font-semibold leading-[1.4] cursor-pointer outline-none transition-all duration-150 whitespace-nowrap flex items-center h-full",
+                      searchState.matchCase
+                        ? "bg-review-bg-blue text-sky-600-light shadow-[inset_0_0_0_1px_rgba(77,184,255,0.4)] hover:bg-review-bg-info hover:text-sky-600-light"
+                        : "bg-transparent text-neutral-400 hover:bg-neutral-900 hover:text-neutral-300",
+                      "active:translate-y-px"
+                    )}
+                    onClick={() =>
+                      setSearchState({ ...searchState, matchCase: !searchState.matchCase })
+                    }
+                  >
+                    Aa
+                  </button>
+                  <Tooltip position="bottom">
+                    {searchState.matchCase
+                      ? "Match case (case-sensitive)"
+                      : "Ignore case (case-insensitive)"}
+                  </Tooltip>
+                </TooltipWrapper>
               </div>
-            )}
+            </div>
 
-            {/* Hunks below the file tree */}
-            <div className="flex flex-[0_0_auto] flex-col p-3">
+            <div className="min-h-0 flex-1 overflow-y-auto p-3">
               {hunks.length === 0 ? (
-                <div className="text-muted flex flex-col items-center justify-start gap-3 px-6 pt-12 pb-6 text-center">
-                  <div className="text-foreground text-base font-medium">No changes found</div>
+                <div className="flex flex-col items-center justify-start gap-3 px-6 pt-12 pb-6 text-center text-neutral-400">
+                  <div className="text-base font-medium text-neutral-300">No changes found</div>
                   <div className="text-[13px] leading-[1.5]">
                     No changes found for the selected diff base.
                     <br />
                     Try selecting a different base or make some changes.
                   </div>
                   {diagnosticInfo && (
-                    <details className="bg-modal-bg border-border-light [&_summary]:text-muted mt-4 w-full max-w-96 cursor-pointer rounded border p-3 [&_summary]:flex [&_summary]:list-none [&_summary]:items-center [&_summary]:gap-1.5 [&_summary]:text-xs [&_summary]:font-medium [&_summary]:select-none [&_summary::-webkit-details-marker]:hidden [&_summary::before]:text-[10px] [&_summary::before]:transition-transform [&_summary::before]:duration-200 [&_summary::before]:content-['▶'] [&[open]_summary::before]:rotate-90">
+                    <details className="mt-4 w-full max-w-96 cursor-pointer rounded border border-neutral-800 bg-neutral-900 p-3 [&_summary]:flex [&_summary]:list-none [&_summary]:items-center [&_summary]:gap-1.5 [&_summary]:text-xs [&_summary]:font-medium [&_summary]:text-neutral-400 [&_summary]:select-none [&_summary::-webkit-details-marker]:hidden [&_summary::before]:text-[10px] [&_summary::before]:transition-transform [&_summary::before]:duration-200 [&_summary::before]:content-['▶'] [&[open]_summary::before]:rotate-90">
                       <summary>Show diagnostic info</summary>
-                      <div className="font-monospace text-foreground mt-3 text-[11px] leading-[1.6]">
-                        <div className="[&:not(:last-child)]:border-border-light grid grid-cols-[140px_1fr] gap-3 py-1 [&:not(:last-child)]:border-b">
-                          <div className="text-muted font-medium">Command:</div>
-                          <div className="text-foreground break-all select-all">
+                      <div className="font-monospace mt-3 text-[11px] leading-[1.6] text-neutral-300">
+                        <div className="grid grid-cols-[140px_1fr] gap-3 py-1 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-neutral-800">
+                          <div className="font-medium text-neutral-400">Command:</div>
+                          <div className="break-all text-neutral-300 select-all">
                             {diagnosticInfo.command}
                           </div>
                         </div>
-                        <div className="[&:not(:last-child)]:border-border-light grid grid-cols-[140px_1fr] gap-3 py-1 [&:not(:last-child)]:border-b">
-                          <div className="text-muted font-medium">Output size:</div>
-                          <div className="text-foreground break-all select-all">
+                        <div className="grid grid-cols-[140px_1fr] gap-3 py-1 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-neutral-800">
+                          <div className="font-medium text-neutral-400">Output size:</div>
+                          <div className="break-all text-neutral-300 select-all">
                             {diagnosticInfo.outputLength.toLocaleString()} bytes
                           </div>
                         </div>
-                        <div className="[&:not(:last-child)]:border-border-light grid grid-cols-[140px_1fr] gap-3 py-1 [&:not(:last-child)]:border-b">
-                          <div className="text-muted font-medium">Files parsed:</div>
-                          <div className="text-foreground break-all select-all">
+                        <div className="grid grid-cols-[140px_1fr] gap-3 py-1 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-neutral-800">
+                          <div className="font-medium text-neutral-400">Files parsed:</div>
+                          <div className="break-all text-neutral-300 select-all">
                             {diagnosticInfo.fileDiffCount}
                           </div>
                         </div>
                         <div className="grid grid-cols-[140px_1fr] gap-3 py-1">
-                          <div className="text-muted font-medium">Hunks extracted:</div>
-                          <div className="text-foreground break-all select-all">
+                          <div className="font-medium text-neutral-400">Hunks extracted:</div>
+                          <div className="break-all text-neutral-300 select-all">
                             {diagnosticInfo.hunkCount}
                           </div>
                         </div>
@@ -675,7 +658,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
                   )}
                 </div>
               ) : filteredHunks.length === 0 ? (
-                <div className="text-muted flex flex-col items-center justify-start gap-3 px-6 pt-12 pb-6 text-center">
+                <div className="flex flex-col items-center justify-start gap-3 px-6 pt-12 pb-6 text-center text-neutral-400">
                   <div className="text-[13px] leading-[1.5]">
                     {debouncedSearchTerm.trim()
                       ? `No hunks match "${debouncedSearchTerm}". Try a different search term.`
@@ -708,6 +691,20 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
               )}
             </div>
           </div>
+
+          {/* FileTree positioning handled by CSS order property */}
+          {(fileTree ?? isLoadingTree) && (
+            <div className="order-2 flex min-h-0 w-80 shrink-0 flex-col overflow-hidden border-l border-neutral-800 @[800px]:order-0 @[800px]:h-auto @[800px]:w-full @[800px]:flex-[0_0_auto] @[800px]:border-b @[800px]:border-l-0 @[800px]:border-neutral-800">
+              <FileTree
+                root={fileTree}
+                selectedPath={selectedFilePath}
+                onSelectFile={setSelectedFilePath}
+                isLoading={isLoadingTree}
+                getFileReadStatus={getFileReadStatus}
+                workspaceId={workspaceId}
+              />
+            </div>
+          )}
         </div>
       )}
     </div>
diff --git a/src/components/RightSidebar/CodeReview/UntrackedStatus.tsx b/src/components/RightSidebar/CodeReview/UntrackedStatus.tsx
index 91c6b890b..ee0f9cca9 100644
--- a/src/components/RightSidebar/CodeReview/UntrackedStatus.tsx
+++ b/src/components/RightSidebar/CodeReview/UntrackedStatus.tsx
@@ -127,7 +127,7 @@ export const UntrackedStatus: React.FC<UntrackedStatusProps> = ({
           "py-1 px-2.5 rounded font-medium text-[11px] whitespace-nowrap transition-all duration-200",
           hasUntracked
             ? "bg-review-bg-warning border border-review-warning text-info-yellow cursor-pointer hover:bg-review-warning-light hover:border-review-warning-medium"
-            : "bg-transparent border border-transparent text-muted cursor-default"
+            : "bg-transparent border border-transparent text-neutral-400 cursor-default"
         )}
         onClick={() => hasUntracked && setShowTooltip(!showTooltip)}
       >
@@ -135,15 +135,15 @@ export const UntrackedStatus: React.FC<UntrackedStatusProps> = ({
       </div>
 
       {showTooltip && hasUntracked && (
-        <div className="bg-modal-bg border-bg-medium animate-in fade-in slide-in-from-top-1 absolute top-[calc(100%+8px)] right-0 z-[1000] max-w-96 min-w-48 rounded border p-2 shadow-[0_4px_12px_rgba(0,0,0,0.3)] duration-150">
-          <div className="text-foreground border-border-light mb-2 border-b pb-1.5 text-[11px] font-semibold">
+        <div className="border-bg-medium animate-in fade-in slide-in-from-top-1 absolute top-[calc(100%+8px)] right-0 z-[1000] max-w-96 min-w-48 rounded border bg-neutral-900 p-2 shadow-[0_4px_12px_rgba(0,0,0,0.3)] duration-150">
+          <div className="mb-2 border-b border-neutral-800 pb-1.5 text-[11px] font-semibold text-neutral-300">
             Untracked Files ({count})
           </div>
           <div className="mb-2 max-h-[200px] overflow-y-auto">
             {untrackedFiles.map((file) => (
               <div
                 key={file}
-                className="text-label hover:bg-bg-subtle truncate px-1 py-0.5 font-mono text-[11px]"
+                className="truncate px-1 py-0.5 font-mono text-[11px] text-neutral-400 hover:bg-neutral-800"
               >
                 {file}
               </div>
@@ -153,10 +153,10 @@ export const UntrackedStatus: React.FC<UntrackedStatusProps> = ({
             onClick={() => void handleTrackAll()}
             disabled={isTracking}
             className={cn(
-              "w-full py-1 px-2 bg-transparent text-muted border border-border-medium rounded text-[11px] cursor-pointer transition-all duration-200 font-primary",
-              "hover:bg-white-overlay-light hover:text-foreground hover:border-border-subtle",
+              "w-full py-1 px-2 bg-transparent text-neutral-400 border border-neutral-700 rounded text-[11px] cursor-pointer transition-all duration-200 font-primary",
+              "hover:bg-white-overlay-light hover:text-neutral-300 hover:border-neutral-800-subtle",
               "active:bg-white-overlay",
-              "disabled:text-border-darker disabled:border-border disabled:cursor-not-allowed disabled:bg-transparent"
+              "disabled:text-neutral-800 disabled:border-neutral-800 disabled:cursor-not-allowed disabled:bg-transparent"
             )}
           >
             {isTracking ? "Tracking..." : "Track All"}
diff --git a/src/components/RightSidebar/ConsumerBreakdown.tsx b/src/components/RightSidebar/ConsumerBreakdown.tsx
index 21893ddbd..e492e5ffe 100644
--- a/src/components/RightSidebar/ConsumerBreakdown.tsx
+++ b/src/components/RightSidebar/ConsumerBreakdown.tsx
@@ -12,16 +12,16 @@ interface ConsumerBreakdownProps {
 
 const ConsumerBreakdownComponent: React.FC<ConsumerBreakdownProps> = ({ consumers }) => {
   if (consumers.isCalculating) {
-    return <div className="text-secondary py-3 italic">Calculating consumer breakdown...</div>;
+    return <div className="py-3 text-neutral-400 italic">Calculating consumer breakdown...</div>;
   }
 
   if (consumers.consumers.length === 0) {
-    return <div className="text-dim py-3 text-left italic">No consumer data available</div>;
+    return <div className="py-3 text-left text-neutral-400 italic">No consumer data available</div>;
   }
 
   return (
     <>
-      <div className="text-muted mb-2 text-xs">
+      <div className="mb-2 text-xs text-neutral-400">
         Tokenizer: <span>{consumers.tokenizerName}</span>
       </div>
       <div className="flex flex-col gap-3">
@@ -39,7 +39,7 @@ const ConsumerBreakdownComponent: React.FC<ConsumerBreakdownProps> = ({ consumer
           return (
             <div key={consumer.name} className="mb-2 flex flex-col gap-1">
               <div className="mb-1 flex items-center justify-between">
-                <span className="text-foreground flex items-center gap-1 font-medium">
+                <span className="flex items-center gap-1 font-medium text-neutral-300">
                   {consumer.name}
                   {consumer.name === "web_search" && (
                     <TooltipWrapper inline>
@@ -51,12 +51,12 @@ const ConsumerBreakdownComponent: React.FC<ConsumerBreakdownProps> = ({ consumer
                     </TooltipWrapper>
                   )}
                 </span>
-                <span className="text-muted text-xs">
+                <span className="text-xs text-neutral-400">
                   {tokenDisplay} ({consumer.percentage.toFixed(1)}%)
                 </span>
               </div>
               <div className="flex flex-col gap-1">
-                <div className="bg-hover flex h-2 w-full overflow-hidden rounded">
+                <div className="flex h-2 w-full overflow-hidden rounded bg-neutral-900">
                   {consumer.fixedTokens && consumer.variableTokens ? (
                     <>
                       <div
@@ -85,7 +85,7 @@ const ConsumerBreakdownComponent: React.FC<ConsumerBreakdownProps> = ({ consumer
                   )}
                 </div>
                 {consumer.fixedTokens && consumer.variableTokens && (
-                  <div className="text-dim text-left text-[11px]">
+                  <div className="text-left text-[11px] text-neutral-400">
                     Tool definition: {formatTokens(consumer.fixedTokens)} • Usage:{" "}
                     {formatTokens(consumer.variableTokens)}
                   </div>
diff --git a/src/components/RightSidebar/CostsTab.tsx b/src/components/RightSidebar/CostsTab.tsx
index 5808da625..788208563 100644
--- a/src/components/RightSidebar/CostsTab.tsx
+++ b/src/components/RightSidebar/CostsTab.tsx
@@ -69,8 +69,8 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
   // Only show empty state if truly no data anywhere
   if (!hasAnyData) {
     return (
-      <div className="text-light font-primary text-[13px] leading-relaxed">
-        <div className="text-secondary px-5 py-10 text-center">
+      <div className="font-primary text-[13px] leading-relaxed text-neutral-300">
+        <div className="px-5 py-10 text-center text-neutral-400">
           <p>No messages yet.</p>
           <p>Send a message to see token usage statistics.</p>
         </div>
@@ -90,7 +90,7 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
       : sumUsageHistory(usage.usageHistory);
 
   return (
-    <div className="text-light font-primary text-[13px] leading-relaxed">
+    <div className="font-primary text-[13px] leading-relaxed text-neutral-300">
       {hasUsageData && (
         <div data-testid="context-usage-section" className="mt-2 mb-5">
           <div data-testid="context-usage-list" className="flex flex-col gap-3">
@@ -163,17 +163,17 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
                 <>
                   <div data-testid="context-usage" className="relative mb-2 flex flex-col gap-1">
                     <div className="flex items-baseline justify-between">
-                      <span className="text-foreground inline-flex items-baseline gap-1 font-medium">
+                      <span className="inline-flex items-baseline gap-1 font-medium text-neutral-300">
                         Context Usage
                       </span>
-                      <span className="text-muted text-xs">
+                      <span className="text-xs text-neutral-400">
                         {totalDisplay}
                         {maxDisplay}
                         {` (${totalPercentage.toFixed(1)}%)`}
                       </span>
                     </div>
                     <div className="relative w-full">
-                      <div className="bg-border-light flex h-1.5 w-full overflow-hidden rounded-[3px]">
+                      <div className="bg-border-neutral-800 flex h-1.5 w-full overflow-hidden rounded-[3px]">
                         {cachedPercentage > 0 && (
                           <div
                             className="h-full transition-[width] duration-300"
@@ -219,7 +219,7 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
                     </div>
                   </div>
                   {showWarning && (
-                    <div className="text-subtle mt-2 text-[11px] italic">
+                    <div className="mt-2 text-[11px] text-neutral-400 italic">
                       Unknown model limits - showing relative usage only
                     </div>
                   )}
@@ -348,7 +348,7 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
                         className="mb-2 flex items-baseline justify-between"
                       >
                         <div className="flex items-center gap-3">
-                          <span className="text-foreground inline-flex items-baseline gap-1 font-medium">
+                          <span className="inline-flex items-baseline gap-1 font-medium text-neutral-300">
                             Cost
                           </span>
                           <ToggleGroup
@@ -357,12 +357,12 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
                             onChange={setViewMode}
                           />
                         </div>
-                        <span className="text-muted text-xs">
+                        <span className="text-xs text-neutral-400">
                           {formatCostWithDollar(totalCost)}
                         </span>
                       </div>
                       <div className="relative w-full">
-                        <div className="bg-border-light flex h-1.5 w-full overflow-hidden rounded-[3px]">
+                        <div className="bg-border-neutral-800 flex h-1.5 w-full overflow-hidden rounded-[3px]">
                           {cachedCostPercentage > 0 && (
                             <div
                               className="h-full transition-[width] duration-300"
@@ -413,14 +413,14 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
                     className="mt-1 w-full border-collapse text-[11px]"
                   >
                     <thead>
-                      <tr className="border-border-light border-b">
-                        <th className="text-muted py-1 pr-2 text-left font-medium [&:last-child]:pr-0 [&:last-child]:text-right">
+                      <tr className="border-b border-neutral-800">
+                        <th className="py-1 pr-2 text-left font-medium text-neutral-400 [&:last-child]:pr-0 [&:last-child]:text-right">
                           Component
                         </th>
-                        <th className="text-muted py-1 pr-2 text-left font-medium [&:last-child]:pr-0 [&:last-child]:text-right">
+                        <th className="py-1 pr-2 text-left font-medium text-neutral-400 [&:last-child]:pr-0 [&:last-child]:text-right">
                           Tokens
                         </th>
-                        <th className="text-muted py-1 pr-2 text-left font-medium [&:last-child]:pr-0 [&:last-child]:text-right">
+                        <th className="py-1 pr-2 text-left font-medium text-neutral-400 [&:last-child]:pr-0 [&:last-child]:text-right">
                           Cost
                         </th>
                       </tr>
@@ -435,7 +435,7 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
 
                         return (
                           <tr key={component.name}>
-                            <td className="text-foreground py-1 pr-2 [&:last-child]:pr-0 [&:last-child]:text-right">
+                            <td className="py-1 pr-2 text-neutral-300 [&:last-child]:pr-0 [&:last-child]:text-right">
                               <div className="flex items-center gap-1.5">
                                 <div
                                   className="h-2 w-2 shrink-0 rounded-sm"
@@ -444,12 +444,12 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
                                 {component.name}
                               </div>
                             </td>
-                            <td className="text-foreground py-1 pr-2 [&:last-child]:pr-0 [&:last-child]:text-right">
+                            <td className="py-1 pr-2 text-neutral-300 [&:last-child]:pr-0 [&:last-child]:text-right">
                               {formatTokens(component.tokens)}
                             </td>
-                            <td className="text-foreground py-1 pr-2 [&:last-child]:pr-0 [&:last-child]:text-right">
+                            <td className="py-1 pr-2 text-neutral-300 [&:last-child]:pr-0 [&:last-child]:text-right">
                               {isNegligible ? (
-                                <span className="text-dim italic">{costDisplay}</span>
+                                <span className="text-neutral-400 italic">{costDisplay}</span>
                               ) : (
                                 costDisplay
                               )}
@@ -467,7 +467,7 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
       )}
 
       <div className="mb-6">
-        <h3 className="text-subtle m-0 mb-3 text-sm font-semibold tracking-wide uppercase">
+        <h3 className="m-0 mb-3 text-sm font-semibold tracking-wide text-neutral-400 uppercase">
           Breakdown by Consumer
         </h3>
         <ConsumerBreakdown consumers={consumers} />
diff --git a/src/components/RightSidebar/TokenMeter.tsx b/src/components/RightSidebar/TokenMeter.tsx
index f0dbf0ff9..c58fa7823 100644
--- a/src/components/RightSidebar/TokenMeter.tsx
+++ b/src/components/RightSidebar/TokenMeter.tsx
@@ -19,7 +19,7 @@ const TokenMeterComponent: React.FC<TokenMeterProps> = ({
   return (
     <div
       className={cn(
-        "bg-border-light overflow-hidden flex",
+        "bg-border-neutral-800 overflow-hidden flex",
         orientation === "horizontal"
           ? "rounded w-full h-1.5 flex-row"
           : "rounded-[4px] w-2 h-full flex-col",
diff --git a/src/components/RightSidebar/VerticalTokenMeter.tsx b/src/components/RightSidebar/VerticalTokenMeter.tsx
index f4eee373c..36d05825d 100644
--- a/src/components/RightSidebar/VerticalTokenMeter.tsx
+++ b/src/components/RightSidebar/VerticalTokenMeter.tsx
@@ -11,12 +11,12 @@ const VerticalTokenMeterComponent: React.FC<{ data: TokenMeterData }> = ({ data
 
   return (
     <div
-      className="bg-separator border-border-light flex h-full w-5 flex-col items-center border-l py-3"
+      className="flex h-full w-5 flex-col items-center border-l border-neutral-800 bg-neutral-900 py-3"
       data-component="vertical-token-meter"
     >
       {data.maxTokens && (
         <div
-          className="font-primary text-foreground mb-1 shrink-0 text-center text-[8px] font-semibold"
+          className="font-primary mb-1 shrink-0 text-center text-[8px] font-semibold text-neutral-300"
           data-label="context-percentage"
         >
           {Math.round(data.totalPercentage)}
@@ -49,12 +49,12 @@ const VerticalTokenMeterComponent: React.FC<{ data: TokenMeterData }> = ({ data
                   data-tooltip-content="usage-breakdown"
                 >
                   <div
-                    className="text-foreground text-[13px] font-semibold"
+                    className="text-[13px] font-semibold text-neutral-300"
                     data-tooltip-title="last-request"
                   >
                     Last Request
                   </div>
-                  <div className="border-border-light my-1 border-t" data-divider="top" />
+                  <div className="my-1 border-t border-neutral-800" data-divider="top" />
                   {data.segments.map((seg, i) => (
                     <div
                       key={i}
@@ -72,14 +72,14 @@ const VerticalTokenMeterComponent: React.FC<{ data: TokenMeterData }> = ({ data
                         />
                         <span data-label="segment-name">{getSegmentLabel(seg.type)}</span>
                       </div>
-                      <span className="text-foreground font-medium" data-value="tokens">
+                      <span className="font-medium text-neutral-300" data-value="tokens">
                         {formatTokens(seg.tokens)}
                       </span>
                     </div>
                   ))}
-                  <div className="border-border-light my-1 border-t" data-divider="bottom" />
+                  <div className="my-1 border-t border-neutral-800" data-divider="bottom" />
                   <div
-                    className="text-muted text-[11px]"
+                    className="text-[11px] text-neutral-400"
                     data-summary="total"
                     data-total-tokens={data.totalTokens}
                     data-max-tokens={data.maxTokens}
@@ -88,7 +88,7 @@ const VerticalTokenMeterComponent: React.FC<{ data: TokenMeterData }> = ({ data
                     {data.maxTokens && ` / ${formatTokens(data.maxTokens)}`}
                     {data.maxTokens && ` (${data.totalPercentage.toFixed(1)}%)`}
                   </div>
-                  <div className="text-dim mt-2 text-[10px] italic">
+                  <div className="mt-2 text-[10px] text-neutral-400 italic">
                     💡 Expand your viewport to see full details
                   </div>
                 </div>
diff --git a/src/components/SecretsModal.tsx b/src/components/SecretsModal.tsx
index b05c1fac9..42996ebbb 100644
--- a/src/components/SecretsModal.tsx
+++ b/src/components/SecretsModal.tsx
@@ -140,9 +140,11 @@ const SecretsModal: React.FC<SecretsModalProps> = ({
 
       <div className="mb-4 min-h-[200px] flex-1 overflow-y-auto">
         {secrets.length === 0 ? (
-          <div className="text-muted px-4 py-8 text-center text-[13px]">No secrets configured</div>
+          <div className="px-4 py-8 text-center text-[13px] text-neutral-400">
+            No secrets configured
+          </div>
         ) : (
-          <div className="[&>label]:text-muted grid grid-cols-[1fr_1fr_auto_auto] items-end gap-1 [&>label]:mb-0.5 [&>label]:text-[11px]">
+          <div className="grid grid-cols-[1fr_1fr_auto_auto] items-end gap-1 [&>label]:mb-0.5 [&>label]:text-[11px] [&>label]:text-neutral-400">
             <label>Key</label>
             <label>Value</label>
             <div /> {/* Empty cell for eye icon column */}
@@ -155,7 +157,7 @@ const SecretsModal: React.FC<SecretsModalProps> = ({
                   onChange={(e) => updateSecret(index, "key", e.target.value)}
                   placeholder="SECRET_NAME"
                   disabled={isLoading}
-                  className="bg-modal-bg border-border-medium focus:border-accent placeholder:text-dim w-full rounded border px-2.5 py-1.5 font-mono text-[13px] text-white focus:outline-none"
+                  className="w-full rounded border border-neutral-700 bg-neutral-900 px-2.5 py-1.5 font-mono text-[13px] text-white placeholder:text-neutral-400 focus:border-sky-600 focus:outline-none"
                 />
                 <input
                   type={visibleSecrets.has(index) ? "text" : "password"}
@@ -163,13 +165,13 @@ const SecretsModal: React.FC<SecretsModalProps> = ({
                   onChange={(e) => updateSecret(index, "value", e.target.value)}
                   placeholder="secret value"
                   disabled={isLoading}
-                  className="bg-modal-bg border-border-medium focus:border-accent placeholder:text-dim w-full rounded border px-2.5 py-1.5 font-mono text-[13px] text-white focus:outline-none"
+                  className="w-full rounded border border-neutral-700 bg-neutral-900 px-2.5 py-1.5 font-mono text-[13px] text-white placeholder:text-neutral-400 focus:border-sky-600 focus:outline-none"
                 />
                 <button
                   type="button"
                   onClick={() => toggleVisibility(index)}
                   disabled={isLoading}
-                  className="text-muted hover:text-foreground flex cursor-pointer items-center justify-center self-center rounded-sm border-none bg-transparent px-1 py-0.5 text-base transition-all duration-200"
+                  className="flex cursor-pointer items-center justify-center self-center rounded-sm border-none bg-transparent px-1 py-0.5 text-base text-neutral-400 transition-all duration-200 hover:text-neutral-300"
                 >
                   <ToggleVisibilityIcon visible={visibleSecrets.has(index)} />
                 </button>
@@ -177,7 +179,7 @@ const SecretsModal: React.FC<SecretsModalProps> = ({
                   type="button"
                   onClick={() => removeSecret(index)}
                   disabled={isLoading}
-                  className="text-danger-light border-danger-light hover:bg-danger-light/10 cursor-pointer rounded border bg-transparent px-2.5 py-1.5 text-[13px] transition-all duration-200"
+                  className="border-danger-light cursor-pointer rounded border bg-transparent px-2.5 py-1.5 text-[13px] text-red-400 transition-all duration-200 hover:bg-red-400/10"
                 >
                   ×
                 </button>
@@ -190,7 +192,7 @@ const SecretsModal: React.FC<SecretsModalProps> = ({
       <button
         onClick={addSecret}
         disabled={isLoading}
-        className="text-muted border-border-medium hover:bg-hover hover:border-border-darker hover:text-foreground mb-4 w-full cursor-pointer rounded border border-dashed bg-transparent px-3 py-2 text-[13px] transition-all duration-200"
+        className="hover:border-neutral-800-darker mb-4 w-full cursor-pointer rounded border border-dashed border-neutral-700 bg-transparent px-3 py-2 text-[13px] text-neutral-400 transition-all duration-200 hover:bg-neutral-900 hover:text-neutral-300"
       >
         + Add Secret
       </button>
diff --git a/src/components/ThinkingSlider.stories.tsx b/src/components/ThinkingSlider.stories.tsx
index 815c2f036..800ae0a07 100644
--- a/src/components/ThinkingSlider.stories.tsx
+++ b/src/components/ThinkingSlider.stories.tsx
@@ -39,19 +39,19 @@ export const Default: Story = {};
 
 export const DifferentModels: Story = {
   render: () => (
-    <div className="bg-dark flex min-w-80 flex-col gap-[30px] p-10">
+    <div className="flex min-w-80 flex-col gap-[30px] bg-neutral-900 p-10">
       <div>
-        <div className="text-muted-light font-primary mb-2 text-xs">Claude Sonnet 4.5</div>
+        <div className="text-neutral-400-light font-primary mb-2 text-xs">Claude Sonnet 4.5</div>
         <ThinkingSliderComponent modelString="anthropic:claude-sonnete-4-5" />
       </div>
 
       <div>
-        <div className="text-muted-light font-primary mb-2 text-xs">Claude Opus 4.1</div>
+        <div className="text-neutral-400-light font-primary mb-2 text-xs">Claude Opus 4.1</div>
         <ThinkingSliderComponent modelString="anthropic:claude-opus-4-1" />
       </div>
 
       <div>
-        <div className="text-muted-light font-primary mb-2 text-xs">GPT-5 Codex</div>
+        <div className="text-neutral-400-light font-primary mb-2 text-xs">GPT-5 Codex</div>
         <ThinkingSliderComponent modelString="openai:gpt-5-codex" />
       </div>
     </div>
@@ -60,12 +60,12 @@ export const DifferentModels: Story = {
 
 export const InteractiveDemo: Story = {
   render: () => (
-    <div className="bg-dark flex min-w-80 flex-col gap-[30px] p-10">
-      <div className="text-bright font-primary mb-2.5 text-[13px]">
+    <div className="flex min-w-80 flex-col gap-[30px] bg-neutral-900 p-10">
+      <div className="font-primary mb-2.5 text-[13px] text-neutral-300">
         Try moving the slider to see the purple glow effect intensify:
       </div>
       <ThinkingSliderComponent modelString="claude-3-5-sonnet-20241022" />
-      <div className="text-muted-light font-primary mt-2.5 text-[11px]">
+      <div className="text-neutral-400-light font-primary mt-2.5 text-[11px]">
         • <strong>Off</strong>: No thinking (gray)
         <br />• <strong>Low</strong>: Minimal thinking (light purple)
         <br />• <strong>Medium</strong>: Moderate thinking (purple)
@@ -95,17 +95,17 @@ export const InteractiveDemo: Story = {
 export const LockedThinking: Story = {
   args: { modelString: "openai:gpt-5-pro" },
   render: (args) => (
-    <div className="bg-dark flex min-w-80 flex-col gap-[30px] p-10">
-      <div className="text-bright font-primary mb-2.5 text-[13px]">
+    <div className="flex min-w-80 flex-col gap-[30px] bg-neutral-900 p-10">
+      <div className="font-primary mb-2.5 text-[13px] text-neutral-300">
         Some models have locked thinking levels based on their capabilities:
       </div>
       <div>
-        <div className="text-muted-light font-primary mb-2 text-xs">
+        <div className="text-neutral-400-light font-primary mb-2 text-xs">
           GPT-5-Pro (locked to &ldquo;high&rdquo;)
         </div>
         <ThinkingSliderComponent modelString={args.modelString} />
       </div>
-      <div className="text-muted-light font-primary mt-2.5 text-[11px]">
+      <div className="text-neutral-400-light font-primary mt-2.5 text-[11px]">
         Hover over the locked indicator to see why it&apos;s fixed.
       </div>
     </div>
diff --git a/src/components/TipsCarousel.stories.tsx b/src/components/TipsCarousel.stories.tsx
index 1334d84eb..9742c00ab 100644
--- a/src/components/TipsCarousel.stories.tsx
+++ b/src/components/TipsCarousel.stories.tsx
@@ -24,12 +24,12 @@ export const Default: Story = {
 
 export const WithExplanation: Story = {
   render: () => (
-    <div className="bg-dark flex min-w-96 flex-col gap-5 p-5">
-      <div className="text-bright font-primary text-[13px]">
+    <div className="flex min-w-96 flex-col gap-5 bg-neutral-900 p-5">
+      <div className="font-primary text-[13px] text-neutral-300">
         Tips rotate automatically based on time. Hover to see the gradient effect:
       </div>
       <TipsCarousel fixedTipIndex={0} />
-      <div className="text-muted-light font-primary text-[11px]">
+      <div className="text-neutral-400-light font-primary text-[11px]">
         Tips change every hour to provide variety and convey UX information.
       </div>
     </div>
@@ -38,10 +38,10 @@ export const WithExplanation: Story = {
 
 export const DebugControls: Story = {
   render: () => (
-    <div className="bg-dark flex min-w-96 flex-col gap-5 p-5">
-      <div className="text-bright font-primary text-[13px]">For debugging, you can use:</div>
+    <div className="flex min-w-96 flex-col gap-5 bg-neutral-900 p-5">
+      <div className="font-primary text-[13px] text-neutral-300">For debugging, you can use:</div>
       <TipsCarousel fixedTipIndex={1} />
-      <div className="text-muted-light font-monospace bg-modal-bg rounded p-3 text-[11px]">
+      <div className="text-neutral-400-light font-monospace rounded bg-neutral-900 p-3 text-[11px]">
         <div>window.setTip(0) // Show first tip</div>
         <div>window.setTip(1) // Show second tip</div>
         <div>window.clearTip() // Return to auto-rotation</div>
@@ -53,10 +53,10 @@ export const DebugControls: Story = {
 export const InContext: Story = {
   render: () => {
     return (
-      <div className="bg-separator border-border-light font-primary flex items-center gap-3 border-b px-3 py-2">
+      <div className="font-primary flex items-center gap-3 border-b border-neutral-800 bg-neutral-900 px-3 py-2">
         <div className="flex items-center gap-2">
-          <span className="text-muted-light text-[11px]">Workspace:</span>
-          <span className="text-bright text-[11px]">main</span>
+          <span className="text-neutral-400-light text-[11px]">Workspace:</span>
+          <span className="text-[11px] text-neutral-300">main</span>
         </div>
         <div
           style={{
@@ -68,7 +68,7 @@ export const InContext: Story = {
           <TipsCarousel fixedTipIndex={0} />
         </div>
         <div className="flex items-center gap-2">
-          <span className="text-muted-light text-[11px]">Mode: Plan</span>
+          <span className="text-neutral-400-light text-[11px]">Mode: Plan</span>
         </div>
       </div>
     );
diff --git a/src/components/TipsCarousel.tsx b/src/components/TipsCarousel.tsx
index c18b9efc3..cdae8dcad 100644
--- a/src/components/TipsCarousel.tsx
+++ b/src/components/TipsCarousel.tsx
@@ -14,11 +14,11 @@ const TIPS = [
     content: (
       <>
         Navigate workspaces with{" "}
-        <span className="keybind font-primary text-[color-mix(in_srgb,var(--color-text),transparent_30%)] transition-colors duration-300">
+        <span className="keybind font-primary text-[color-mix(in_srgb,theme(colors.gray.200),transparent_30%)] transition-colors duration-300">
           {formatKeybind(KEYBINDS.PREV_WORKSPACE)}
         </span>{" "}
         and{" "}
-        <span className="keybind font-primary text-[color-mix(in_srgb,var(--color-text),transparent_30%)] transition-colors duration-300">
+        <span className="keybind font-primary text-[color-mix(in_srgb,theme(colors.gray.200),transparent_30%)] transition-colors duration-300">
           {formatKeybind(KEYBINDS.NEXT_WORKSPACE)}
         </span>
       </>
@@ -28,7 +28,7 @@ const TIPS = [
     content: (
       <>
         Use{" "}
-        <code className="command font-monospace text-[color-mix(in_srgb,var(--color-text),transparent_30%)] transition-colors duration-300">
+        <code className="command font-monospace text-[color-mix(in_srgb,theme(colors.gray.200),transparent_30%)] transition-colors duration-300">
           /truncate 50
         </code>{" "}
         to trim the first 50% of the chat from context
@@ -80,12 +80,12 @@ export const TipsCarousel: React.FC<TipsCarouselProps> = ({ fixedTipIndex }) =>
       role="status"
       aria-live="polite"
       aria-atomic="true"
-      className="text-text font-primary [&:hover_.tip-label]:text-text [&:hover_.tip-content]:text-text mt-[3px] flex cursor-default items-center gap-1.5 rounded px-2 py-1 text-[11px] leading-5 transition-all duration-300 hover:bg-[linear-gradient(135deg,color-mix(in_srgb,var(--color-plan-mode),transparent_85%)_0%,color-mix(in_srgb,var(--color-exec-mode),transparent_85%)_50%,color-mix(in_srgb,var(--color-thinking-mode),transparent_85%)_100%)] [&:hover_.command]:text-white [&:hover_.keybind]:text-white"
+      className="font-primary mt-[3px] flex cursor-default items-center gap-1.5 rounded px-2 py-1 text-[11px] leading-5 text-neutral-300 transition-all duration-300 hover:bg-[linear-gradient(135deg,color-mix(in_srgb,var(--color-plan-mode),transparent_85%)_0%,color-mix(in_srgb,var(--color-exec-mode),transparent_85%)_50%,color-mix(in_srgb,var(--color-thinking-mode),transparent_85%)_100%)] [&:hover_.command]:text-white [&:hover_.keybind]:text-white [&:hover_.tip-content]:text-neutral-300 [&:hover_.tip-label]:text-neutral-300"
     >
-      <span className="tip-label font-medium text-[color-mix(in_srgb,var(--color-text-secondary),transparent_20%)] transition-colors duration-300">
+      <span className="tip-label font-medium text-[color-mix(in_srgb,theme(colors.gray.600),transparent_20%)] transition-colors duration-300">
         Tip:
       </span>
-      <span className="tip-content text-secondary transition-colors duration-300">
+      <span className="tip-content text-neutral-400 transition-colors duration-300">
         {TIPS[currentTipIndex]?.content}
       </span>
     </div>
diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx
index 80313ee96..5debd96c8 100644
--- a/src/components/TitleBar.tsx
+++ b/src/components/TitleBar.tsx
@@ -214,7 +214,7 @@ export function TitleBar() {
   const showUpdateIndicator = true;
 
   return (
-    <div className="bg-dark border-border-light font-primary text-muted flex shrink-0 items-center justify-between border-b px-4 py-2 text-[11px] select-none">
+    <div className="font-primary flex shrink-0 items-center justify-between border-b border-neutral-800 bg-neutral-900 px-4 py-2 text-[11px] text-neutral-400 select-none">
       <div className="mr-4 flex min-w-0 items-center gap-2">
         {showUpdateIndicator && (
           <TooltipWrapper>
diff --git a/src/components/TodoList.tsx b/src/components/TodoList.tsx
index 003b9e260..f3539fc8c 100644
--- a/src/components/TodoList.tsx
+++ b/src/components/TodoList.tsx
@@ -17,7 +17,7 @@ const statusBorderColors: Record<TodoItem["status"], string> = {
 const statusTextColors: Record<TodoItem["status"], string> = {
   completed: "#888",
   in_progress: "#2196f3",
-  pending: "var(--color-text)",
+  pending: "theme(colors.gray.200)",
 };
 
 /**
@@ -114,7 +114,7 @@ export const TodoList: React.FC<TodoListProps> = ({ todos }) => {
             style={{
               background: statusBgColors[todo.status],
               borderLeftColor: statusBorderColors[todo.status],
-              color: "var(--color-text)",
+              color: "theme(colors.gray.200)",
             }}
           >
             <div className="mt-px shrink-0 text-xs opacity-80">{getStatusIcon(todo.status)}</div>
diff --git a/src/components/ToggleGroup.stories.tsx b/src/components/ToggleGroup.stories.tsx
index aa288764c..a4373e341 100644
--- a/src/components/ToggleGroup.stories.tsx
+++ b/src/components/ToggleGroup.stories.tsx
@@ -174,7 +174,7 @@ const StyledModeToggle = ({
 }) => (
   <div
     className={cn(
-      "flex gap-0 bg-toggle-bg rounded",
+      "flex gap-0 bg-neutral-900 rounded",
       mode === "exec" &&
         "[&_button:first-of-type]:bg-exec-mode [&_button:first-of-type]:text-white [&_button:first-of-type:hover]:bg-exec-mode-hover",
       mode === "plan" &&
@@ -260,8 +260,8 @@ export const WithStateDisplay: Story = {
           value={value}
           onChange={(newValue) => updateArgs({ value: newValue })}
         />
-        <div className="text-muted-light font-primary text-xs">
-          Current selection: <strong className="text-bright">{value}</strong>
+        <div className="text-neutral-400-light font-primary text-xs">
+          Current selection: <strong className="text-neutral-300">{value}</strong>
         </div>
       </div>
     );
@@ -316,17 +316,17 @@ export const MultipleGroups: Story = {
     return (
       <div className="flex flex-col gap-5 p-5">
         <div>
-          <div className="text-muted-light font-primary mb-1.5 text-[11px]">Theme</div>
+          <div className="text-neutral-400-light font-primary mb-1.5 text-[11px]">Theme</div>
           <ToggleGroup options={themeOptions} value={theme} onChange={handleThemeChange} />
         </div>
 
         <div>
-          <div className="text-muted-light font-primary mb-1.5 text-[11px]">Size</div>
+          <div className="text-neutral-400-light font-primary mb-1.5 text-[11px]">Size</div>
           <ToggleGroup options={sizeOptions} value={size} onChange={handleSizeChange} />
         </div>
 
         <div>
-          <div className="text-muted-light font-primary mb-1.5 text-[11px]">Layout</div>
+          <div className="text-neutral-400-light font-primary mb-1.5 text-[11px]">Layout</div>
           <ToggleGroup options={layoutOptions} value={layout} onChange={handleLayoutChange} />
         </div>
       </div>
diff --git a/src/components/ToggleGroup.tsx b/src/components/ToggleGroup.tsx
index 6388a2a65..810e1fc1d 100644
--- a/src/components/ToggleGroup.tsx
+++ b/src/components/ToggleGroup.tsx
@@ -14,7 +14,7 @@ interface ToggleGroupProps<T extends string> {
 
 export function ToggleGroup<T extends string>({ options, value, onChange }: ToggleGroupProps<T>) {
   return (
-    <div className="bg-toggle-bg flex gap-0 rounded">
+    <div className="flex gap-0 rounded bg-neutral-900">
       {options.map((option) => {
         const isActive = value === option.value;
         return (
@@ -26,7 +26,7 @@ export function ToggleGroup<T extends string>({ options, value, onChange }: Togg
             className={cn(
               "px-2 py-1 text-[11px] font-sans rounded-sm border-none cursor-pointer transition-all duration-150 bg-transparent",
               isActive
-                ? "text-toggle-text-active bg-toggle-active font-medium"
+                ? "text-toggle-text-active bg-neutral-800 font-medium"
                 : "text-toggle-text font-normal hover:text-toggle-text-hover hover:bg-toggle-hover",
               isActive && option.activeClassName
             )}
diff --git a/src/components/Tooltip.stories.tsx b/src/components/Tooltip.stories.tsx
index b348633c4..3b2477998 100644
--- a/src/components/Tooltip.stories.tsx
+++ b/src/components/Tooltip.stories.tsx
@@ -18,7 +18,7 @@ export const BasicTooltip: Story = {
   args: { children: "This is a helpful tooltip" },
   render: () => (
     <TooltipWrapper>
-      <button className="bg-accent-dark font-primary hover:bg-accent-hover cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white">
+      <button className="bg-sky-600-dark font-primary hover:bg-sky-600-hover cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white">
         Hover me
       </button>
       <Tooltip>This is a helpful tooltip</Tooltip>
@@ -66,14 +66,14 @@ export const TooltipPositions: Story = {
   render: () => (
     <div className="flex flex-wrap gap-5 p-10">
       <TooltipWrapper>
-        <button className="bg-accent-dark font-primary hover:bg-accent-hover cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white">
+        <button className="bg-sky-600-dark font-primary hover:bg-sky-600-hover cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white">
           Top (default)
         </button>
         <Tooltip position="top">Tooltip appears above</Tooltip>
       </TooltipWrapper>
 
       <TooltipWrapper>
-        <button className="bg-accent-dark font-primary hover:bg-accent-hover cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white">
+        <button className="bg-sky-600-dark font-primary hover:bg-sky-600-hover cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white">
           Bottom
         </button>
         <Tooltip position="bottom">Tooltip appears below</Tooltip>
@@ -87,21 +87,21 @@ export const TooltipAlignments: Story = {
   render: () => (
     <div className="flex flex-wrap gap-5 p-10">
       <TooltipWrapper>
-        <button className="bg-accent-dark font-primary hover:bg-accent-hover cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white">
+        <button className="bg-sky-600-dark font-primary hover:bg-sky-600-hover cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white">
           Left Aligned
         </button>
         <Tooltip align="left">Left-aligned tooltip</Tooltip>
       </TooltipWrapper>
 
       <TooltipWrapper>
-        <button className="bg-accent-dark font-primary hover:bg-accent-hover cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white">
+        <button className="bg-sky-600-dark font-primary hover:bg-sky-600-hover cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white">
           Center Aligned
         </button>
         <Tooltip align="center">Center-aligned tooltip</Tooltip>
       </TooltipWrapper>
 
       <TooltipWrapper>
-        <button className="bg-accent-dark font-primary hover:bg-accent-hover cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white">
+        <button className="bg-sky-600-dark font-primary hover:bg-sky-600-hover cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white">
           Right Aligned
         </button>
         <Tooltip align="right">Right-aligned tooltip</Tooltip>
@@ -114,7 +114,7 @@ export const WideTooltip: Story = {
   args: { children: "Tooltip content" },
   render: () => (
     <TooltipWrapper>
-      <button className="bg-accent-dark font-primary hover:bg-accent-hover cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white">
+      <button className="bg-sky-600-dark font-primary hover:bg-sky-600-hover cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white">
         Hover for detailed info
       </button>
       <Tooltip width="wide">
@@ -161,7 +161,7 @@ export const KeyboardShortcut: Story = {
   args: { children: "Tooltip content" },
   render: () => (
     <TooltipWrapper>
-      <button className="bg-accent-dark font-primary hover:bg-accent-hover cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white">
+      <button className="bg-sky-600-dark font-primary hover:bg-sky-600-hover cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white">
         Save File
       </button>
       <Tooltip align="center">
@@ -175,7 +175,7 @@ export const LongContent: Story = {
   args: { children: "Tooltip content" },
   render: () => (
     <TooltipWrapper>
-      <button className="bg-accent-dark font-primary hover:bg-accent-hover cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white">
+      <button className="bg-sky-600-dark font-primary hover:bg-sky-600-hover cursor-pointer rounded border-none px-4 py-2 text-[13px] text-white">
         Documentation
       </button>
       <Tooltip width="wide">
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index a07b8506d..c81c58be9 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -219,8 +219,8 @@ export const Tooltip: React.FC<TooltipProps> = ({
         opacity: tooltipState.isPositioned ? 1 : 0,
       }}
       className={cn(
-        "bg-modal-bg text-foreground text-left rounded px-[10px] py-[6px] z-[9999]",
-        "text-[11px] font-normal font-sans border border-separator-light shadow-[0_2px_8px_rgba(0,0,0,0.4)]",
+        "bg-neutral-900 text-neutral-300 text-left rounded px-[10px] py-[6px] z-[9999]",
+        "text-[11px] font-normal font-sans border border-neutral-900-light shadow-[0_2px_8px_rgba(0,0,0,0.4)]",
         width === "wide" ? "whitespace-normal max-w-80 w-max" : "whitespace-nowrap",
         interactive ? "pointer-events-auto" : "pointer-events-none",
         className
@@ -243,7 +243,12 @@ export const HelpIndicator: React.FC<{ className?: string; children?: React.Reac
   children,
 }) => (
   <span
-    className={cn("text-muted flex cursor-help items-center text-[10px] leading-none", className)}
+    className={cn(
+      "text-neutral-400 text-[7px] cursor-help inline-block align-baseline",
+      "border border-neutral-800-subtle rounded-full w-2.5 h-[10px] leading-[8px]",
+      "text-center font-bold mb-[2px]",
+      className
+    )}
   >
     {children}
   </span>
diff --git a/src/components/VimTextArea.tsx b/src/components/VimTextArea.tsx
index 0fc29f34b..8c5821015 100644
--- a/src/components/VimTextArea.tsx
+++ b/src/components/VimTextArea.tsx
@@ -220,12 +220,12 @@ export const VimTextArea = React.forwardRef<HTMLTextAreaElement, VimTextAreaProp
             autoComplete="off"
             {...rest}
             className={cn(
-              "w-full border text-light py-1.5 px-2 rounded font-mono text-[13px] resize-none min-h-8 max-h-[50vh] overflow-y-auto",
-              "placeholder:text-placeholder",
+              "w-full border text-neutral-300 py-1.5 px-2 rounded font-mono text-[13px] resize-none min-h-8 max-h-[50vh] overflow-y-auto",
+              "placeholder:text-neutral-400",
               "focus:outline-none",
               isEditing
                 ? "bg-editing-mode-alpha border-editing-mode focus:border-editing-mode"
-                : "bg-dark border-border-light",
+                : "bg-neutral-900 border-neutral-800",
               !isEditing && (mode === "plan" ? "focus:border-plan-mode" : "focus:border-exec-mode"),
               vimMode === "normal"
                 ? "caret-transparent selection:bg-white/50"
diff --git a/src/components/WorkspaceListItem.tsx b/src/components/WorkspaceListItem.tsx
index 8c1a68f15..f62d40991 100644
--- a/src/components/WorkspaceListItem.tsx
+++ b/src/components/WorkspaceListItem.tsx
@@ -129,7 +129,7 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
       >
         <TooltipWrapper inline>
           <button
-            className="text-muted hover:text-foreground col-start-1 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center border-none bg-transparent p-0 text-base opacity-0 transition-all duration-200 hover:rounded-sm hover:bg-white/10"
+            className="hover:text-foreground col-start-1 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center border-none bg-transparent p-0 text-base text-neutral-400 opacity-0 transition-all duration-200 hover:rounded-sm hover:bg-white/10"
             onClick={(e) => {
               e.stopPropagation();
               void onRemoveWorkspace(workspaceId, e.currentTarget);
diff --git a/src/components/shared/DiffRenderer.tsx b/src/components/shared/DiffRenderer.tsx
index ebd375f57..46f189354 100644
--- a/src/components/shared/DiffRenderer.tsx
+++ b/src/components/shared/DiffRenderer.tsx
@@ -41,7 +41,7 @@ const getDiffLineColor = (type: DiffLineType): string => {
       return "#2196f3";
     case "context":
     default:
-      return "var(--color-text)";
+      return "theme(colors.gray.200)";
   }
 };
 
@@ -51,18 +51,18 @@ const getLineContentColor = (type: DiffLineType): string => {
     case "header":
       return "#2196f3";
     case "context":
-      return "var(--color-text-secondary)";
+      return "theme(colors.gray.600)";
     case "add":
     case "remove":
-      return "var(--color-text)";
+      return "theme(colors.gray.200)";
   }
 };
 
 // Helper function for computing contrast color for add/remove indicators
 const getContrastColor = (type: DiffLineType): string => {
   return type === "add" || type === "remove"
-    ? "color-mix(in srgb, var(--color-text-secondary), white 50%)"
-    : "var(--color-text-secondary)";
+    ? "color-mix(in srgb, theme(colors.gray.600), white 50%)"
+    : "theme(colors.gray.600)";
 };
 
 /**
@@ -336,12 +336,12 @@ const ReviewNoteInput: React.FC<ReviewNoteInputProps> = React.memo(
 
     return (
       <div
-        className="bg-dark m-0 border-t px-2 py-1.5"
+        className="m-0 border-t bg-neutral-900 px-2 py-1.5"
         style={{ borderColor: "hsl(from var(--color-review-accent) h s l / 0.3)" }}
       >
         <textarea
           ref={textareaRef}
-          className="bg-dark text-text placeholder:text-muted w-full resize-none overflow-y-hidden rounded-sm border px-2 py-1.5 font-mono text-xs leading-[1.4] focus:border-[hsl(from_var(--color-review-accent)_h_s_l_/_0.6)] focus:outline-none"
+          className="w-full resize-none overflow-y-hidden rounded-sm border bg-neutral-900 px-2 py-1.5 font-mono text-xs leading-[1.4] text-neutral-300 placeholder:text-neutral-400 focus:border-[hsl(from_var(--color-review-accent)_h_s_l_/_0.6)] focus:outline-none"
           style={{
             minHeight: "calc(12px * 1.4 * 3 + 12px)",
             borderColor: "hsl(from var(--color-review-accent) h s l / 0.4)",
diff --git a/src/components/tools/BashToolCall.tsx b/src/components/tools/BashToolCall.tsx
index 5247c02df..eb0817846 100644
--- a/src/components/tools/BashToolCall.tsx
+++ b/src/components/tools/BashToolCall.tsx
@@ -67,11 +67,11 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({
           <span>🔧</span>
           <Tooltip>bash</Tooltip>
         </TooltipWrapper>
-        <span className="text-text font-monospace max-w-96 truncate">{args.script}</span>
+        <span className="font-monospace max-w-96 truncate text-neutral-300">{args.script}</span>
         <span
           className="ml-2 text-[10px] whitespace-nowrap [@container(max-width:500px)]:hidden"
           style={{
-            color: isPending ? "var(--color-pending)" : "var(--color-text-secondary)",
+            color: isPending ? "var(--color-pending)" : "theme(colors.gray.600)",
           }}
         >
           timeout: {args.timeout_secs ?? BASH_DEFAULT_TIMEOUT_SECS}s
diff --git a/src/components/tools/FileEditToolCall.tsx b/src/components/tools/FileEditToolCall.tsx
index bb40ee70e..32b66e69b 100644
--- a/src/components/tools/FileEditToolCall.tsx
+++ b/src/components/tools/FileEditToolCall.tsx
@@ -128,17 +128,17 @@ export const FileEditToolCall: React.FC<FileEditToolCallProps> = ({
 
   return (
     <ToolContainer expanded={expanded}>
-      <ToolHeader className="hover:text-secondary cursor-default">
+      <ToolHeader className="cursor-default hover:text-neutral-400">
         <div
           onClick={toggleExpanded}
-          className="hover:text-text flex flex-1 cursor-pointer items-center gap-2"
+          className="flex flex-1 cursor-pointer items-center gap-2 hover:text-neutral-300"
         >
           <ExpandIcon expanded={expanded}>▶</ExpandIcon>
           <TooltipWrapper inline>
             <span>✏️</span>
             <Tooltip>{toolName}</Tooltip>
           </TooltipWrapper>
-          <span className="text-text font-monospace max-w-96 truncate">{filePath}</span>
+          <span className="font-monospace max-w-96 truncate text-neutral-300">{filePath}</span>
         </div>
         {!(result && result.success && result.diff) && (
           <StatusIndicator status={status}>{getStatusDisplay(status)}</StatusIndicator>
@@ -177,7 +177,7 @@ export const FileEditToolCall: React.FC<FileEditToolCallProps> = ({
 
           {status === "executing" && !result && (
             <DetailSection>
-              <div className="text-secondary text-[11px]">
+              <div className="text-[11px] text-neutral-400">
                 Waiting for result
                 <LoadingDots />
               </div>
diff --git a/src/components/tools/ProposePlanToolCall.tsx b/src/components/tools/ProposePlanToolCall.tsx
index 715d5198a..98c6005fd 100644
--- a/src/components/tools/ProposePlanToolCall.tsx
+++ b/src/components/tools/ProposePlanToolCall.tsx
@@ -128,7 +128,7 @@ export const ProposePlanToolCall: React.FC<ProposePlanToolCallProps> = ({
                 )}
                 <button
                   onClick={() => void copyToClipboard(args.plan)}
-                  className="text-muted hover:text-plan-mode cursor-pointer rounded-sm bg-transparent px-2 py-1 font-mono text-[10px] transition-all duration-150 active:translate-y-px"
+                  className="hover:text-plan-mode cursor-pointer rounded-sm bg-transparent px-2 py-1 font-mono text-[10px] text-neutral-400 transition-all duration-150 active:translate-y-px"
                   style={{
                     border: "1px solid rgba(136, 136, 136, 0.3)",
                   }}
@@ -192,7 +192,7 @@ export const ProposePlanToolCall: React.FC<ProposePlanToolCallProps> = ({
 
             {status === "completed" && (
               <div
-                className="text-muted mt-3 pt-3 text-[11px] leading-normal italic"
+                className="mt-3 pt-3 text-[11px] leading-normal text-neutral-400 italic"
                 style={{
                   borderTop:
                     "1px solid color-mix(in srgb, var(--color-plan-mode), transparent 80%)",
diff --git a/src/components/tools/shared/ToolPrimitives.tsx b/src/components/tools/shared/ToolPrimitives.tsx
index 7276cb9ee..8c6d1b85c 100644
--- a/src/components/tools/shared/ToolPrimitives.tsx
+++ b/src/components/tools/shared/ToolPrimitives.tsx
@@ -28,7 +28,7 @@ export const ToolHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
 }) => (
   <div
     className={cn(
-      "flex items-center gap-2 cursor-pointer select-none text-secondary hover:text-foreground",
+      "flex items-center gap-2 cursor-pointer select-none text-neutral-400 hover:text-neutral-300",
       className
     )}
     {...props}
@@ -70,7 +70,7 @@ const getStatusColor = (status: string) => {
     case "interrupted":
       return "text-interrupted";
     default:
-      return "text-foreground-secondary";
+      return "text-neutral-300-secondary";
   }
 };
 
@@ -97,7 +97,7 @@ export const ToolDetails: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
   className,
   ...props
 }) => (
-  <div className={cn("mt-2 pt-2 border-t border-white/5 text-foreground", className)} {...props} />
+  <div className={cn("mt-2 pt-2 border-t border-white/5 text-neutral-300", className)} {...props} />
 );
 
 export const DetailSection: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
@@ -110,7 +110,7 @@ export const DetailLabel: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
   ...props
 }) => (
   <div
-    className={cn("text-[10px] text-foreground-secondary mb-1 uppercase tracking-wide", className)}
+    className={cn("text-[10px] text-neutral-300-secondary mb-1 uppercase tracking-wide", className)}
     {...props}
   />
 );
@@ -149,7 +149,7 @@ interface HeaderButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement
 export const HeaderButton: React.FC<HeaderButtonProps> = ({ active, className, ...props }) => (
   <button
     className={cn(
-      "border border-white/20 text-foreground px-2 py-0.5 rounded-sm cursor-pointer text-[10px]",
+      "border border-white/20 text-neutral-300 px-2 py-0.5 rounded-sm cursor-pointer text-[10px]",
       "transition-all duration-200 whitespace-nowrap hover:bg-white/10 hover:border-white/30",
       active && "bg-white/10",
       className
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 87ce3b990..5c37e9442 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -8,13 +8,13 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-button-bg text-button-text shadow hover:bg-button-hover",
+        default: "bg-neutral-800 text-button-text shadow hover:bg-button-hover",
         destructive: "bg-error text-white shadow-sm hover:bg-error/90",
         outline:
-          "border border-input-border bg-transparent shadow-sm hover:bg-button-bg hover:text-button-text",
+          "border border-input-border bg-transparent shadow-sm hover:bg-neutral-800 hover:text-button-text",
         secondary:
-          "bg-background-secondary text-foreground shadow-sm hover:bg-background-secondary/80",
-        ghost: "hover:bg-button-bg hover:text-button-text",
+          "bg-neutral-900-secondary text-neutral-300 shadow-sm hover:bg-neutral-900-secondary/80",
+        ghost: "hover:bg-neutral-800 hover:text-button-text",
         link: "text-plan-mode underline-offset-4 hover:underline",
       },
       size: {
diff --git a/src/styles/globals.css b/src/styles/globals.css
index fe9226437..9bde01333 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,5 +1,4 @@
 @import "tailwindcss";
-@source "../node_modules/streamdown/dist/index.js";
 
 @theme {
   /* Mode Colors */
@@ -15,7 +14,6 @@
   --color-edit-mode-hover: hsl(120 50% 47%);
   --color-edit-mode-light: hsl(120 50% 62%);
   
-  --color-read: hsl(210 70% 40%);
   --color-editing-mode: hsl(30 100% 50%);
   --color-pending: hsl(30 100% 70%);
   
@@ -27,151 +25,33 @@
   --color-thinking-mode-light: hsl(271 76% 65%);
   --color-thinking-border: hsl(271 76% 53%);
   
-  /* Background & Layout */
-  --color-background: hsl(0 0% 12%);
-  --color-background-secondary: hsl(60 1% 15%);
-  --color-border: hsl(240 2% 25%);
-  --color-foreground: hsl(0 0% 83%);
-  --color-secondary: hsl(0 0% 42%);
-  
-  /* Code */
+  /* Status & Special */
+  --color-interrupted: hsl(38 92% 50%);
+  --color-review-accent: hsl(48 70% 50%);
+  --color-git-dirty: hsl(38 92% 50%);
   --color-code-bg: hsl(0 6.43% 8.04%);
   
-  /* Buttons */
-  --color-button-bg: hsl(0 0% 24%);
-  --color-button-text: hsl(0 0% 80%);
-  --color-button-hover: hsl(0 0% 29%);
+  /* Sidebar and border colors - kept minimal for semantic meaning */
+  --color-separator: hsl(0 0% 15%);          /* #252526 - base sidebar bg */
+  --color-hover: hsl(0 0% 16.5%);            /* #2a2a2b - hover/selected states */
+  --color-border: hsl(0 0% 25%);             /* #404040 - base borders */
+  --color-border-light: hsl(0 0% 27%);       /* #464647 - lighter borders */
+  --color-accent: hsl(207 100% 40%);         /* #007acc - VS Code blue */
   
-  /* Messages */
+  /* Message Borders */
   --color-user-border: hsl(0 0% 38%);
-  --color-user-border-hover: hsl(0 0% 44%);
   --color-assistant-border: hsl(207 45% 40%);
-  --color-assistant-border-hover: hsl(207 45% 50%);
-  --color-message-header: hsl(0 0% 80%);
   
-  /* Tokens */
-  --color-token-prompt: hsl(0 0% 40%);
-  --color-token-completion: hsl(207 100% 40%);
-  --color-token-variable: hsl(207 100% 40%);
-  --color-token-fixed: hsl(0 0% 40%);
+  /* Token Colors */
   --color-token-input: hsl(120 40% 35%);
   --color-token-output: hsl(207 100% 40%);
   --color-token-cached: hsl(0 0% 50%);
   
-  /* Toggle */
-  --color-toggle-bg: hsl(0 0% 16.5%);
-  --color-toggle-active: hsl(0 0% 22.7%);
-  --color-toggle-hover: hsl(0 0% 17.6%);
-  --color-toggle-text: hsl(0 0% 53.3%);
-  --color-toggle-text-active: hsl(0 0% 100%);
-  --color-toggle-text-hover: hsl(0 0% 66.7%);
-  
-  /* Status */
-  --color-interrupted: hsl(38 92% 50%);
-  --color-review-accent: hsl(48 70% 50%);
-  --color-git-dirty: hsl(38 92% 50%);
+  /* Errors */
   --color-error: hsl(0 70% 50%);
   --color-error-bg: hsl(0 32% 18%);
+  --color-error-bg-dark: hsl(0 33% 13%);
   
-  /* Input */
-  --color-input-bg: hsl(0 0% 12%);
-  --color-input-text: hsl(0 0% 80%);
-  --color-input-border: hsl(207 51% 59%);
-  --color-input-border-focus: hsl(193 91% 64%);
-  
-  /* Scrollbar */
-  --color-scrollbar-track: hsl(0 0% 18%);
-  --color-scrollbar-thumb: hsl(0 0% 32%);
-  --color-scrollbar-thumb-hover: hsl(0 0% 42%);
-  
-  /* Additional Semantic Colors */
-  --color-muted: hsl(0 0% 53%);              /* #888 - muted text */
-  --color-muted-light: hsl(0 0% 50%);        /* #808080 - muted light */
-  --color-muted-dark: hsl(0 0% 43%);         /* #6e6e6e - muted darker */
-  --color-placeholder: hsl(0 0% 42%);        /* #6b6b6b - placeholder */
-  --color-subtle: hsl(0 0% 60%);             /* #999 - subtle */
-  --color-dim: hsl(0 0% 42%);                /* #666 - dimmed */
-  --color-light: hsl(0 0% 83%);              /* #d4d4d4 - light */
-  --color-lighter: hsl(0 0% 90%);            /* #e5e5e5 - lighter */
-  --color-bright: hsl(0 0% 80%);             /* #cccccc - bright */
-  --color-subdued: hsl(0 0% 60%);            /* #9a9a9a - subdued */
-  --color-label: hsl(0 0% 67%);              /* #aaa - label */
-  --color-gray: hsl(0 0% 48%);               /* #7a7a7a - gray */
-  --color-medium: hsl(0 0% 59%);             /* #969696 - medium */
-  
-  --color-border-light: hsl(240 3% 25%);     /* #3e3e42 - lighter borders */
-  --color-border-medium: hsl(0 0% 27%);      /* #444 - medium borders */
-  --color-border-darker: hsl(0 0% 33%);      /* #555 - darker borders */
-  --color-border-subtle: hsl(0 0% 40%);      /* #666 - subtle border */
-  --color-border-gray: hsl(240 1% 31%);      /* #4e4e52 - gray border */
-  
-  --color-dark: hsl(0 0% 11.5%);             /* #1e1e1e - dark backgrounds */
-  --color-darker: hsl(0 0% 8.6%);            /* #161616 - darker backgrounds */
-  --color-hover: hsl(0 0% 16.5%);            /* #2a2a2b - hover states */
-  --color-bg-medium: hsl(0 0% 27%);          /* #454545 - medium bg */
-  --color-bg-light: hsl(0 0% 30%);           /* #4c4c4c - light bg */
-  --color-bg-subtle: hsl(240 3% 22%);        /* #37373d - subtle bg */
-  
-  --color-separator: hsl(0 0% 15%);          /* #252526 - separators */
-  --color-separator-light: hsl(0 0% 27%);    /* #464647 - lighter separator */
-  --color-modal-bg: hsl(0 0% 18%);           /* #2d2d30 - modal backgrounds */
-  
-  --color-accent: hsl(207 100% 40%);         /* #007acc - VS Code blue */
-  --color-accent-hover: hsl(207 100% 45%);   /* #1177bb - accent hover */
-  --color-accent-dark: hsl(207 100% 37%);    /* #0e639c - darker accent */
-  --color-accent-darker: hsl(202 100% 23%);  /* #094771 - even darker accent */
-  --color-accent-light: hsl(198 100% 65%);   /* #4db8ff - lighter accent */
-  
-  --color-success: hsl(122 39% 49%);         /* #4caf50 - success green */
-  --color-success-light: hsl(123 46% 64%);   /* #4ade80 - lighter success */
-  
-  --color-danger: hsl(4 90% 58%);            /* #f44336 - error red */
-  --color-danger-light: hsl(0 91% 71%);      /* #ff5555 - lighter error red */
-  --color-danger-soft: hsl(6 93% 71%);       /* #f48771 - softer error */
-  
-  --color-warning: hsl(45 100% 51%);         /* #ffc107 - warning yellow */
-  --color-warning-light: hsl(0 91% 71%);     /* #f87171 - lighter warning/error */
-  
-  /* Code syntax highlighting */
-  --color-code-type: hsl(197 71% 73%);       /* #9cdcfe - type annotations */
-  --color-code-keyword: hsl(210 59% 63%);    /* #6496ff - keywords */
-  
-  /* Toast and notification backgrounds */
-  --color-toast-success-bg: hsl(207 100% 37% / 0.13);  /* #0e639c with 20% opacity */
-  --color-toast-success-text: hsl(207 100% 60%);       /* #3794ff */
-  --color-toast-error-bg: hsl(5 89% 60% / 0.15);       /* #f14836 with 15% opacity */
-  --color-toast-error-text: hsl(5 89% 60%);            /* #f14836 */
-  --color-toast-error-border: hsl(5 89% 60%);          /* #f14836 */
-  --color-toast-fatal-bg: hsl(0 33% 18%);              /* #2d1f1f - fatal error bg */
-  --color-toast-fatal-border: hsl(0 36% 26%);          /* #5a2c2c - fatal error border */
-  
-  /* Semi-transparent overlays */
-  --color-danger-overlay: hsl(4 90% 58% / 0.1);        /* danger with 10% opacity */
-  --color-warning-overlay: hsl(45 100% 51% / 0.1);     /* warning with 10% opacity */
-  --color-gray-overlay: hsl(0 0% 39% / 0.05);          /* gray with 5% opacity */
-  --color-white-overlay-light: hsl(0 0% 100% / 0.05);  /* white with 5% opacity */
-  --color-white-overlay: hsl(0 0% 100% / 0.1);         /* white with 10% opacity */
-  --color-selection: hsl(204 100% 60% / 0.5);          /* selection blue with 50% opacity */
-  --color-vim-status: hsl(0 0% 83% / 0.6);             /* status text with 60% opacity */
-  --color-code-keyword-overlay-light: hsl(210 100% 70% / 0.05); /* code keyword with 5% opacity */
-  --color-code-keyword-overlay: hsl(210 100% 70% / 0.2); /* code keyword with 20% opacity */
-  
-  /* Info/status colors */
-  --color-info-light: hsl(5 100% 75%);       /* #ff9980 - light info/error */
-  --color-info-yellow: hsl(38 100% 64%);     /* #ffb347 - yellow info */
-  
-  /* Review/diff backgrounds */
-  --color-review-bg-blue: hsl(201 31% 22%);  /* #2a3a4a - review background */
-  --color-review-bg-info: hsl(202 33% 24%);  /* #2a4050 - info background */
-  --color-review-bg-warning: hsl(40 100% 12%); /* #3e2a00 - warning bg dark */
-  --color-review-warning: hsl(38 100% 25%);    /* #806000 - warning dark */
-  --color-review-warning-medium: hsl(38 100% 32%); /* #a07000 - warning medium */
-  --color-review-warning-light: hsl(40 100% 20%);  /* #4a3200 - warning light bg */
-  
-  /* Error backgrounds */
-  --color-error-bg-dark: hsl(0 33% 13%);     /* #3c1f1f - dark error bg */
-  
-  /* Radius */
   --radius: 0.5rem;
 }
 
@@ -179,47 +59,20 @@
   /* Legacy RGB for special uses */
   --plan-mode-rgb: 31, 107, 184;
   
-  /* Legacy CSS var format - keep for gradual migration */
-  --color-plan-mode: hsl(210 70% 40%);
-  --color-plan-mode-hover: hsl(210 70% 52%);
+  /* Alpha variants for mode colors */
   --color-plan-mode-alpha: hsla(210 70% 40% / 0.1);
-  --color-exec-mode: hsl(268.56 94.04% 55.19%);
-  --color-edit-mode: hsl(120 50% 35%);
-  --color-editing-mode: hsl(30 100% 50%);
   --color-editing-mode-alpha: hsla(30 100% 50% / 0.1);
-  --color-read: hsl(210 70% 40%);
-  --color-thinking-mode: hsl(271 76% 53%);
-  --color-pending: hsl(30 100% 70%);
-  --color-interrupted: hsl(38 92% 50%);
-  --color-code-bg: hsl(0 6.43% 8.04%);
-  --color-border: hsl(240 2% 25%);
-  --color-text: hsl(0 0% 83%);
-  --color-text-secondary: hsl(0 0% 42%);
-  --color-user-border: hsl(0 0% 38%);
-  --color-assistant-border: hsl(207 45% 40%);
-  --color-review-accent: hsl(48 70% 50%);
-  --color-token-input: hsl(120 40% 35%);
-  --color-token-output: hsl(207 100% 40%);
-  --color-token-variable: hsl(207 100% 40%);
-  --color-token-fixed: hsl(0 0% 40%);
-  --color-token-cached: hsl(0 0% 50%);
 
   /* Font Variables */
-  /* Primary UI Font - System fonts for best native appearance */
-  --font-primary:
-    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue",
-    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  
-  /* Monospace Font - Code and technical content */
-  --font-monospace:
-    "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "Courier New", monospace,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-primary: IBM Plex Sans, sans-serif;
+  --font-monospace: JetBrains Mono, Consolas, Monaco, monospace;
 }
 
 body {
-  background-color: var(--color-background);
-  color: var(--color-foreground);
-  font-family: var(--font-primary);
+  @apply bg-neutral-900 text-neutral-300;
+  font-family:
+    IBM Plex Sans,
+    sans-serif;
   font-size: 14px;
 }
 
@@ -230,22 +83,21 @@ body {
 }
 
 ::-webkit-scrollbar-track {
-  background: var(--color-scrollbar-track);
+  @apply bg-neutral-800;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--color-scrollbar-thumb);
-  border-radius: 4px;
+  @apply bg-neutral-500 rounded;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--color-scrollbar-thumb-hover);
+  @apply bg-neutral-400;
 }
 
 /* Firefox scrollbar */
 * {
   scrollbar-width: thin;
-  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
+  scrollbar-color: theme(colors.neutral.500) theme(colors.neutral.800);
 }
 
 /* Root container */
@@ -276,7 +128,11 @@ body,
 }
 
 code {
-  font-family: var(--font-monospace);
+  font-family:
+    JetBrains Mono,
+    Consolas,
+    Monaco,
+    monospace;
 }
 
 /* Native tooltips */
@@ -292,8 +148,8 @@ code {
   transform: translateX(-50%);
   margin-bottom: 8px;
   padding: 6px 10px;
-  background: var(--color-modal-bg);
-  color: var(--color-foreground);
+  background: #2d2d30;
+  color: #d4d4d4;
   border: 1px solid #464647;
   border-radius: 4px;
   font-size: 11px;
@@ -307,7 +163,7 @@ code {
 .plan-content {
   font-size: 12px;
   line-height: 1.6;
-  color: var(--color-text-light);
+  @apply text-neutral-300;
 }
 
 .plan-content h1,
@@ -322,7 +178,7 @@ code {
 
 .plan-content h1,
 .plan-content h2 {
-  color: color-mix(in srgb, var(--color-plan-mode) 60%, var(--color-text) 40%);
+  color: color-mix(in srgb, var(--color-plan-mode) 60%, theme(colors.neutral.200) 40%);
 }
 
 .plan-content h1 {
@@ -341,7 +197,7 @@ code {
 .plan-content h4,
 .plan-content h5,
 .plan-content h6 {
-  color: var(--color-foreground);
+  @apply text-neutral-300;
 }
 
 .plan-content h3 {
@@ -413,7 +269,7 @@ code {
   border-left: 3px solid var(--color-plan-mode);
   padding-left: 12px;
   margin: 8px 0;
-  color: var(--color-secondary);
+  color: theme(colors.neutral.600);
   font-style: italic;
 }
 
@@ -426,7 +282,7 @@ code {
   margin-bottom: 3px;
   border-width: 5px;
   border-style: solid;
-  border-color: var(--color-modal-bg) transparent transparent transparent;
+  border-color: #2d2d30 transparent transparent transparent;
   z-index: 1000;
   pointer-events: none;
 }
@@ -436,7 +292,7 @@ code {
   font-family: var(--font-primary);
   font-size: 14px;
   line-height: 1.6;
-  color: var(--color-foreground);
+  color: theme(colors.neutral.200);
   white-space: normal;
 }
 
@@ -468,7 +324,9 @@ code {
   font-size: 13px;
 }
 
-
+.markdown-content p {
+  margin: 0.8em 0;
+}
 
 /* Remove default margins on first and last elements */
 .markdown-content > :first-child {
@@ -494,8 +352,7 @@ code {
 }
 
 .markdown-content li {
-  margin: 0;
-  padding: 0 0 4px 0;
+  margin: 0.4em 0;
   display: list-item;
 }
 
@@ -519,14 +376,14 @@ code {
 .markdown-content pre code {
   background: none;
   padding: 0;
-  color: var(--color-foreground);
+  color: theme(colors.neutral.200);
 }
 
 .markdown-content blockquote {
-  border-left: 3px solid var(--color-border);
+  border-left: 3px solid theme(colors.neutral.800);
   padding-left: 12px;
   margin: 1em 0;
-  color: var(--color-secondary);
+  color: theme(colors.neutral.600);
   font-style: italic;
 }
 
@@ -540,12 +397,12 @@ code {
 
 .markdown-content hr {
   border: none;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid theme(colors.neutral.800);
   margin: 1.4em 0;
 }
 
 .markdown-content a {
-  color: var(--color-accent);
+  color: theme(colors.sky.600);
   text-decoration: none;
 }
 
@@ -561,7 +418,7 @@ code {
 
 .markdown-content table th,
 .markdown-content table td {
-  border: 1px solid var(--color-border);
+  border: 1px solid theme(colors.neutral.800);
   padding: 6px 12px;
   text-align: left;
 }
@@ -766,7 +623,7 @@ pre code {
   height: 4px;
   -webkit-appearance: none;
   appearance: none;
-  background: var(--color-border-light);
+  background: theme(colors.neutral.800);
   outline: none;
   border-radius: 2px;
   transition: box-shadow 0.2s ease;
@@ -856,30 +713,3 @@ pre code {
     background-position: 0% 50%;
   }
 }
-
-/* Font utility classes */
-.font-primary {
-  font-family: var(--font-primary);
-}
-
-.font-monospace {
-  font-family: var(--font-monospace);
-}
-
-/* Text color utility classes */
-
-/* Checkbox utility classes */
-input[type="checkbox"] {
-  @apply relative m-0 h-3 w-3 cursor-pointer appearance-none rounded-sm border border-border-light bg-dark;
-  @apply hover:border-accent;
-  @apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2;
-  @apply checked:bg-accent checked:border-accent;
-  @apply checked:after:absolute checked:after:top-[2px] checked:after:left-[4px] checked:after:h-[6px] checked:after:w-[2.5px];
-  @apply checked:after:rotate-45 checked:after:border-r-[1.5px] checked:after:border-b-[1.5px];
-  @apply checked:after:border-solid checked:after:border-white checked:after:content-[''];
-}
-
-.text-dim {
-  color: var(--color-dim);
-}
-