From 754cd59d5037ebaacd401395a475001539755ab0 Mon Sep 17 00:00:00 2001
From: Kyle Carberry <kyle@carberry.com>
Date: Wed, 22 Oct 2025 22:44:42 -0400
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=A4=96=20Replace=20hardcoded=20colors?=
 =?UTF-8?q?=20with=20Tailwind=20semantic=20utilities?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add 16 semantic color variables to @theme in globals.css
  - Text colors: muted, text-dim, text-light, text-lighter, text-subdued
  - Background colors: bg-dark, bg-darker, bg-hover, separator, modal-bg
  - Border colors: border-light, border-medium
  - Accent colors: accent, accent-dark
  - Status colors: success, danger

- Replace ~90 common hardcoded hex colors across 43 files
  - ReviewPanel.tsx (30 colors), ProjectSidebar.tsx (26 colors)
  - CostsTab, GitStatusIndicatorView, FileTree, AIView, and 38+ more

- Update global styles (tooltips, markdown, plan content) to use CSS variables

- Remaining ~215 colors are intentional (syntax highlighting, git indicators, etc.)

Benefits:
- Single source of truth for common UI colors
- Consistent semantic naming
- Theme-ready architecture
- ~30% reduction in hardcoded colors

Generated with `cmux`
---
 src/App.tsx                                   |  4 +-
 src/components/AIView.tsx                     | 16 +++---
 src/components/ChatInput.tsx                  |  2 +-
 src/components/ChatInputToast.tsx             |  4 +-
 src/components/ChatMetaSidebar.tsx            |  2 +-
 src/components/CommandSuggestions.tsx         |  4 +-
 src/components/Context1MCheckbox.tsx          |  6 +-
 src/components/DirectorySelectModal.tsx       |  2 +-
 src/components/GitStatusIndicatorView.tsx     |  8 +--
 src/components/ImageAttachments.tsx           |  2 +-
 src/components/KebabMenu.tsx                  | 10 ++--
 src/components/LeftSidebar.tsx                |  8 +--
 .../Messages/ChatBarrier/StreamingBarrier.tsx |  4 +-
 .../Messages/HistoryHiddenMessage.tsx         |  2 +-
 src/components/Messages/MessageWindow.tsx     |  2 +-
 src/components/Messages/TerminalOutput.tsx    |  2 +-
 src/components/Messages/UserMessage.tsx       |  2 +-
 src/components/Modal.tsx                      | 12 ++--
 src/components/ModelSelector.tsx              | 10 ++--
 src/components/NewWorkspaceModal.tsx          |  8 +--
 src/components/ProjectSidebar.tsx             | 48 ++++++++--------
 src/components/RightSidebar.tsx               | 14 ++---
 .../RightSidebar/CodeReview/FileTree.tsx      | 20 +++----
 .../RightSidebar/CodeReview/HunkViewer.tsx    | 18 +++---
 .../RightSidebar/CodeReview/RefreshButton.tsx |  4 +-
 .../CodeReview/ReviewControls.tsx             | 14 ++---
 .../RightSidebar/CodeReview/ReviewPanel.tsx   | 56 +++++++++----------
 .../CodeReview/UntrackedStatus.tsx            | 10 ++--
 .../RightSidebar/ConsumerBreakdown.tsx        | 10 ++--
 src/components/RightSidebar/CostsTab.tsx      | 28 +++++-----
 .../RightSidebar/VerticalTokenMeter.tsx       | 16 +++---
 src/components/SecretsModal.tsx               | 12 ++--
 src/components/TitleBar.tsx                   |  2 +-
 src/components/Tooltip.tsx                    |  4 +-
 src/components/VimTextArea.tsx                |  4 +-
 src/components/WorkspaceListItem.tsx          |  8 +--
 src/components/shared/DiffRenderer.tsx        |  4 +-
 src/components/tools/BashToolCall.tsx         |  2 +-
 src/components/tools/FileEditToolCall.tsx     |  4 +-
 src/components/tools/FileReadToolCall.tsx     |  2 +-
 src/components/tools/ProposePlanToolCall.tsx  |  4 +-
 .../tools/shared/ToolPrimitives.tsx           |  6 +-
 src/styles/globals.css                        | 32 ++++++++---
 43 files changed, 225 insertions(+), 207 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 3720b7748..17b1606f5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -662,7 +662,7 @@ function AppInner() {
 
   return (
     <>
-      <div className="flex h-screen overflow-hidden bg-[#1e1e1e] [@media(max-width:768px)]:flex-col">
+      <div className="flex h-screen overflow-hidden bg-bg-dark [@media(max-width:768px)]:flex-col">
         <LeftSidebar
           projects={projects}
           workspaceMetadata={workspaceMetadata}
@@ -701,7 +701,7 @@ function AppInner() {
               </ErrorBoundary>
             ) : (
               <div
-                className="text-center max-w-[800px] mx-auto w-full [&_h2]:text-white [&_h2]:mb-4 [&_h2]:font-bold [&_h2]:tracking-tight [&_p]:text-[#888] [&_p]:leading-[1.6]"
+                className="text-center max-w-[800px] mx-auto w-full [&_h2]:text-white [&_h2]:mb-4 [&_h2]:font-bold [&_h2]:tracking-tight [&_p]:text-muted [&_p]:leading-[1.6]"
                 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 a7bf17d9f..721b68704 100644
--- a/src/components/AIView.tsx
+++ b/src/components/AIView.tsx
@@ -245,7 +245,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
     return (
       <div
         className={cn(
-          "flex flex-1 flex-row bg-[#1e1e1e] text-[#d4d4d4] overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+          "flex flex-1 flex-row bg-bg-dark text-text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
           className
         )}
         style={{ containerType: "inline-size" }}
@@ -286,7 +286,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
     return (
       <div
         className={cn(
-          "flex flex-1 flex-row bg-[#1e1e1e] text-[#d4d4d4] overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+          "flex flex-1 flex-row bg-bg-dark text-text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
           className
         )}
         style={{ containerType: "inline-size" }}
@@ -302,7 +302,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
     return (
       <div
         className={cn(
-          "flex flex-1 flex-row bg-[#1e1e1e] text-[#d4d4d4] overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+          "flex flex-1 flex-row bg-bg-dark text-text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
           className
         )}
         style={{ containerType: "inline-size" }}
@@ -320,7 +320,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
   return (
     <div
       className={cn(
-        "flex flex-1 flex-row bg-[#1e1e1e] text-[#d4d4d4] overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+        "flex flex-1 flex-row bg-bg-dark text-text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
         className
       )}
       style={{ containerType: "inline-size" }}
@@ -329,8 +329,8 @@ const AIViewInner: React.FC<AIViewProps> = ({
         ref={chatAreaRef}
         className="flex-1 min-w-[400px] flex flex-col [@media(max-width:768px)]:min-w-0 [@media(max-width:768px)]:w-full [@media(max-width:768px)]:max-h-full"
       >
-        <div className="py-1 px-[15px] bg-[#252526] border-b border-[#3e3e42] flex justify-between items-center [@media(max-width:768px)]:py-2 [@media(max-width:768px)]:pl-[60px] [@media(max-width:768px)]:flex-wrap [@media(max-width:768px)]:gap-2">
-          <div className="font-semibold text-[#ccc] flex items-center gap-2 min-w-0 overflow-hidden">
+        <div className="py-1 px-[15px] bg-separator border-b border-border-light flex justify-between items-center [@media(max-width:768px)]:py-2 [@media(max-width:768px)]:pl-[60px] [@media(max-width:768px)]:flex-wrap [@media(max-width:768px)]:gap-2">
+          <div className="font-semibold text-foreground flex items-center gap-2 min-w-0 overflow-hidden">
             <StatusIndicator
               streaming={canInterrupt}
               title={
@@ -345,13 +345,13 @@ const AIViewInner: React.FC<AIViewProps> = ({
             <span className="font-mono text-xs whitespace-nowrap overflow-hidden text-ellipsis min-w-0">
               {projectName} / {branch}
             </span>
-            <span className="font-mono text-[#888] font-normal text-[11px] whitespace-nowrap overflow-hidden text-ellipsis min-w-0">
+            <span className="font-mono text-muted font-normal text-[11px] whitespace-nowrap overflow-hidden text-ellipsis min-w-0">
               {namedWorkspacePath}
             </span>
             <TooltipWrapper inline>
               <button
                 onClick={handleOpenTerminal}
-                className="bg-transparent border-none cursor-pointer p-1 flex items-center justify-center text-[#888] transition-colors hover:text-[#ccc] [&_svg]:w-4 [&_svg]:h-4"
+                className="bg-transparent border-none cursor-pointer p-1 flex items-center justify-center text-muted transition-colors hover:text-foreground [&_svg]:w-4 [&_svg]:h-4"
               >
                 <svg viewBox="0 0 16 16" fill="currentColor">
                   <path d="M0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0114.25 15H1.75A1.75 1.75 0 010 13.25V2.75zm1.75-.25a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25H1.75zM7.25 8a.75.75 0 01-.22.53l-2.25 2.25a.75.75 0 01-1.06-1.06L5.44 8 3.72 6.28a.75.75 0 111.06-1.06l2.25 2.25c.141.14.22.331.22.53zm1.5 1.5a.75.75 0 000 1.5h3a.75.75 0 000-1.5h-3z" />
diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx
index 1975f03f3..b1ab6ac21 100644
--- a/src/components/ChatInput.tsx
+++ b/src/components/ChatInput.tsx
@@ -704,7 +704,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
 
   return (
     <div
-      className="relative pt-[5px] px-[15px] pb-[15px] bg-[#252526] border-t border-[#3e3e42] flex flex-col gap-1"
+      className="relative pt-[5px] px-[15px] pb-[15px] bg-separator border-t border-border-light flex flex-col gap-1"
       style={{ containerType: "inline-size" }}
       data-component="ChatInputSection"
     >
diff --git a/src/components/ChatInputToast.tsx b/src/components/ChatInputToast.tsx
index 12bd99ca1..e7d53fbea 100644
--- a/src/components/ChatInputToast.tsx
+++ b/src/components/ChatInputToast.tsx
@@ -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="font-semibold mb-1.5">{toast.title}</div>}
-              <div className="text-[#d4d4d4] leading-[1.4] mt-1.5">{toast.message}</div>
+              <div className="text-text-light leading-[1.4] mt-1.5">{toast.message}</div>
               {toast.solution && (
-                <div className="bg-[#1e1e1e] rounded px-2 py-1.5 mt-2 font-monospace text-[11px] text-[#9cdcfe]">
+                <div className="bg-bg-dark rounded px-2 py-1.5 mt-2 font-monospace text-[11px] text-[#9cdcfe]">
                   {toast.solution}
                 </div>
               )}
diff --git a/src/components/ChatMetaSidebar.tsx b/src/components/ChatMetaSidebar.tsx
index 4ae5dc40b..756dd937a 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-[#252526] border-l border-[#3e3e42] flex flex-col overflow-hidden transition-[width] duration-200 flex-shrink-0",
+        "bg-separator border-l border-border-light 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-[300px]"
       )}
       role="complementary"
diff --git a/src/components/CommandSuggestions.tsx b/src/components/CommandSuggestions.tsx
index 4f27f2c1c..f2f985beb 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="absolute bottom-full left-0 right-0 mb-2 bg-[#252526] border border-[#3e3e42] rounded shadow-[0_-4px_12px_rgba(0,0,0,0.4)] max-h-[200px] overflow-y-auto z-[100] flex flex-col"
+      className="absolute bottom-full left-0 right-0 mb-2 bg-separator border border-border-light rounded shadow-[0_-4px_12px_rgba(0,0,0,0.4)] max-h-[200px] overflow-y-auto z-[100] flex flex-col"
     >
       {suggestions.map((suggestion, index) => (
         <div
@@ -116,7 +116,7 @@ export const CommandSuggestions: React.FC<CommandSuggestionsProps> = ({
           </div>
         </div>
       ))}
-      <div className="px-2.5 py-1 border-t border-[#3e3e42] bg-[#1e1e1e] text-[#6b6b6b] text-[10px] text-center flex-shrink-0 [&_span]:text-[#969696] [&_span]:font-medium">
+      <div className="px-2.5 py-1 border-t border-border-light bg-bg-dark text-[#6b6b6b] text-[10px] text-center flex-shrink-0 [&_span]:text-[#969696] [&_span]:font-medium">
         <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 240f178fc..b49e723b3 100644
--- a/src/components/Context1MCheckbox.tsx
+++ b/src/components/Context1MCheckbox.tsx
@@ -17,17 +17,17 @@ export const Context1MCheckbox: React.FC<Context1MCheckboxProps> = ({ modelStrin
 
   return (
     <div className="flex items-center gap-1.5 ml-2">
-      <label className="flex items-center gap-1 text-[10px] text-[#ccc] cursor-pointer select-none whitespace-nowrap overflow-hidden text-ellipsis hover:text-white">
+      <label className="flex items-center gap-1 text-[10px] text-foreground cursor-pointer select-none whitespace-nowrap overflow-hidden text-ellipsis hover:text-white">
         <input
           type="checkbox"
           checked={use1M}
           onChange={(e) => setUse1M(e.target.checked)}
-          className="cursor-pointer w-[11px] h-[11px] m-0 appearance-none border border-[#3e3e42] rounded-sm bg-[#1e1e1e] relative hover:border-[#007acc] checked:bg-[#007acc] checked:border-[#007acc] checked:after:content-[''] checked:after:absolute checked:after:left-[3px] checked:after:top-0 checked:after:w-[3px] checked:after:h-[6px] checked:after:border-solid checked:after:border-white checked:after:border-r-[1.5px] checked:after:border-b-[1.5px] checked:after:rotate-45"
+          className="cursor-pointer w-[11px] h-[11px] m-0 appearance-none border border-border-light rounded-sm bg-bg-dark relative hover:border-accent checked:bg-accent checked:border-accent checked:after:content-[''] checked:after:absolute checked:after:left-[3px] checked:after:top-0 checked:after:w-[3px] checked:after:h-[6px] checked:after:border-solid checked:after:border-white checked:after:border-r-[1.5px] checked:after:border-b-[1.5px] checked:after:rotate-45"
         />
         1M Context
       </label>
       <TooltipWrapper inline>
-        <span className="cursor-help text-[#888] text-[10px] leading-none flex items-center">
+        <span className="cursor-help text-muted text-[10px] leading-none flex items-center">
           ?
         </span>
         <Tooltip className="tooltip" align="center" width="auto">
diff --git a/src/components/DirectorySelectModal.tsx b/src/components/DirectorySelectModal.tsx
index d54fb76ce..4f227f229 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="w-full px-3 py-2 bg-[#2d2d2d] border border-[#444] rounded text-white text-sm font-mono mb-5 focus:outline-none focus:border-[#007acc] placeholder:text-[#888]"
+        className="w-full px-3 py-2 bg-modal-bg border border-[#444] rounded text-white text-sm font-mono mb-5 focus:outline-none focus:border-accent placeholder:text-muted"
       />
       {error && <div className="text-error text-xs -mt-3 mb-3">{error}</div>}
       <ModalActions>
diff --git a/src/components/GitStatusIndicatorView.tsx b/src/components/GitStatusIndicatorView.tsx
index 99ee635ca..367278e98 100644
--- a/src/components/GitStatusIndicatorView.tsx
+++ b/src/components/GitStatusIndicatorView.tsx
@@ -110,7 +110,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
               ))}
               <span style={{ color: getIndicatorColor(header.columnIndex) }}>!</span>
             </span>
-            <span className="text-[#cccccc]">[{header.branch}]</span>
+            <span className="text-foreground">[{header.branch}]</span>
           </div>
         ))}
       </div>
@@ -134,7 +134,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
           {displayFiles.map((line, index) => (
             <div
               key={index}
-              className="text-[#cccccc] font-mono text-[11px] leading-snug whitespace-pre"
+              className="text-foreground font-mono text-[11px] leading-snug whitespace-pre"
             >
               {line}
             </div>
@@ -174,7 +174,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
                 {renderIndicators(commit.indicators)}
                 <span className="text-[#569cd6] flex-shrink-0 select-all">{commit.hash}</span>
                 <span className="text-[#808080] flex-shrink-0">{commit.date}</span>
-                <span className="text-[#cccccc] flex-1 break-words">{commit.subject}</span>
+                <span className="text-foreground flex-1 break-words">{commit.subject}</span>
               </div>
             </div>
           ))}
@@ -187,7 +187,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
   const tooltipElement = (
     <div
       className={cn(
-        "fixed z-[10000] bg-[#2d2d30] text-[#cccccc] border border-[#464647] rounded px-3 py-2 text-[11px] font-mono whitespace-pre max-w-[600px] 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-modal-bg text-foreground border border-[#464647] rounded px-3 py-2 text-[11px] font-mono whitespace-pre max-w-[600px] 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={{
diff --git a/src/components/ImageAttachments.tsx b/src/components/ImageAttachments.tsx
index 9dde8bc38..82a55a060 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="relative w-20 h-20 rounded overflow-hidden border border-[#3e3e42] bg-[#1e1e1e]"
+          className="relative w-20 h-20 rounded overflow-hidden border border-border-light bg-bg-dark"
         >
           <img src={image.url} alt="Attached image" className="w-full h-full object-cover" />
           <button
diff --git a/src/components/KebabMenu.tsx b/src/components/KebabMenu.tsx
index 61340f320..01f87b570 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-[#cccccc] 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-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",
         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="fixed bg-[#1e1e1e] border border-[#3e3e42] rounded-[3px] shadow-[0_4px_16px_rgba(0,0,0,0.8)] z-[10000] min-w-[160px] overflow-hidden"
+            className="fixed bg-bg-dark border border-border-light rounded-[3px] shadow-[0_4px_16px_rgba(0,0,0,0.8)] z-[10000] min-w-[160px] overflow-hidden"
             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-[#2d2d30] 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-[#1e1e1e] text-[#808080] cursor-not-allowed opacity-50 hover:bg-[#1e1e1e] hover:text-[#808080]"
+                    ? "bg-bg-dark text-[#808080] cursor-not-allowed opacity-50 hover:bg-bg-dark hover:text-[#808080]"
                     : item.active
-                      ? "bg-white/15 text-[#cccccc] cursor-pointer hover:bg-white/15 hover:text-white"
-                      : "bg-[#1e1e1e] text-[#cccccc] cursor-pointer hover:bg-white/15 hover:text-white"
+                      ? "bg-white/15 text-foreground cursor-pointer hover:bg-white/15 hover:text-white"
+                      : "bg-bg-dark text-foreground cursor-pointer hover:bg-white/15 hover:text-white"
                 )}
               >
                 {item.emoji && (
diff --git a/src/components/LeftSidebar.tsx b/src/components/LeftSidebar.tsx
index 0bd6753f9..3a1545898 100644
--- a/src/components/LeftSidebar.tsx
+++ b/src/components/LeftSidebar.tsx
@@ -46,10 +46,10 @@ export function LeftSidebar(props: LeftSidebarProps) {
           aria-label="Open sidebar menu"
           className={cn(
             "hidden max-md:flex fixed top-3 left-3 z-[998]",
-            "w-10 h-10 bg-[#252526] border border-[#3c3c3c] rounded-md cursor-pointer",
-            "items-center justify-center text-[#ccc] text-xl transition-all duration-200",
+            "w-10 h-10 bg-separator border border-[#3c3c3c] rounded-md cursor-pointer",
+            "items-center justify-center text-foreground text-xl transition-all duration-200",
             "shadow-[0_2px_4px_rgba(0,0,0,0.3)]",
-            "hover:bg-[#2a2a2b] hover:border-[#4c4c4c]",
+            "hover:bg-bg-hover hover:border-[#4c4c4c]",
             "active:scale-95"
           )}
         >
@@ -69,7 +69,7 @@ export function LeftSidebar(props: LeftSidebarProps) {
       {/* Sidebar */}
       <div
         className={cn(
-          "h-screen bg-[#252526] border-r border-[#1e1e1e] flex flex-col shrink-0",
+          "h-screen bg-separator border-r border-[#1e1e1e] flex flex-col shrink-0",
           "transition-all duration-200 overflow-hidden relative z-[100]",
           collapsed ? "w-8" : "w-[280px]",
           "max-md:fixed max-md:left-0 max-md:top-0 max-md:w-[280px] max-md:z-[1000]",
diff --git a/src/components/Messages/ChatBarrier/StreamingBarrier.tsx b/src/components/Messages/ChatBarrier/StreamingBarrier.tsx
index cd44d0019..396aab82c 100644
--- a/src/components/Messages/ChatBarrier/StreamingBarrier.tsx
+++ b/src/components/Messages/ChatBarrier/StreamingBarrier.tsx
@@ -23,11 +23,11 @@ export const StreamingBarrier: React.FC<StreamingBarrierProps> = ({
         {tokenCount !== undefined && (
           <span className="font-mono text-[11px] text-assistant-border select-none whitespace-nowrap">
             ~{tokenCount.toLocaleString()} tokens
-            {tps !== undefined && tps > 0 && <span className="text-[#666] ml-1">@ {tps} t/s</span>}
+            {tps !== undefined && tps > 0 && <span className="text-text-dim ml-1">@ {tps} t/s</span>}
           </span>
         )}
       </div>
-      <div className="text-[11px] text-[#888] select-none whitespace-nowrap ml-auto">
+      <div className="text-[11px] text-muted select-none whitespace-nowrap ml-auto">
         {cancelText}
       </div>
     </div>
diff --git a/src/components/Messages/HistoryHiddenMessage.tsx b/src/components/Messages/HistoryHiddenMessage.tsx
index 8243ca844..109ddb767 100644
--- a/src/components/Messages/HistoryHiddenMessage.tsx
+++ b/src/components/Messages/HistoryHiddenMessage.tsx
@@ -15,7 +15,7 @@ export const HistoryHiddenMessage: React.FC<HistoryHiddenMessageProps> = ({
     <div
       className={cn(
         "my-5 py-3 px-[15px] bg-white/[0.03] border-l-[3px] border-[#569cd6] rounded-sm",
-        "text-[#888] text-xs font-normal text-center font-sans",
+        "text-muted text-xs font-normal text-center font-sans",
         className
       )}
     >
diff --git a/src/components/Messages/MessageWindow.tsx b/src/components/Messages/MessageWindow.tsx
index a896ae973..2f15a4547 100644
--- a/src/components/Messages/MessageWindow.tsx
+++ b/src/components/Messages/MessageWindow.tsx
@@ -124,7 +124,7 @@ export const MessageWindow: React.FC<MessageWindowProps> = ({
       </div>
       <div className="relative z-10 p-3" data-message-content>
         {showJson ? (
-          <pre className="m-0 font-mono text-[11px] leading-snug whitespace-pre-wrap text-[#d4d4d4] bg-black/30 p-2 rounded-sm overflow-x-auto">
+          <pre className="m-0 font-mono text-[11px] leading-snug whitespace-pre-wrap text-text-light bg-black/30 p-2 rounded-sm overflow-x-auto">
             {JSON.stringify(message, null, 2)}
           </pre>
         ) : (
diff --git a/src/components/Messages/TerminalOutput.tsx b/src/components/Messages/TerminalOutput.tsx
index e63a577f2..82b8a8140 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-[#f48771]" : "text-[#d4d4d4]",
+        isError ? "text-[#f48771]" : "text-text-light",
         className
       )}
     >
diff --git a/src/components/Messages/UserMessage.tsx b/src/components/Messages/UserMessage.tsx
index 545435ef2..193b81393 100644
--- a/src/components/Messages/UserMessage.tsx
+++ b/src/components/Messages/UserMessage.tsx
@@ -132,7 +132,7 @@ export const UserMessage: React.FC<UserMessageProps> = ({
               key={idx}
               src={img.url}
               alt={`Attachment ${idx + 1}`}
-              className="max-w-[300px] max-h-[300px] rounded border border-[#3e3e42]"
+              className="max-w-[300px] max-h-[300px] rounded border border-border-light"
             />
           ))}
         </div>
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index f00b2f1c0..5a79ac25f 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-[#1e1e1e] rounded-lg p-6 w-[90%] flex flex-col shadow-lg border border-[#333]",
+      "bg-bg-dark rounded-lg p-6 w-[90%] flex flex-col shadow-lg border border-[#333]",
       "[&_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-[#888] text-sm mb-5", className)}>
+  <p id={id} className={cn("text-muted text-sm mb-5", className)}>
     {children}
   </p>
 );
@@ -57,8 +57,8 @@ export const ModalInfo: React.FC<{
   <div
     id={id}
     className={cn(
-      "bg-[#2d2d2d] border border-[#444] rounded p-3 mb-5 text-[13px]",
-      "[&_p]:m-0 [&_p]:mb-2 [&_p]:text-[#888] [&_p:last-child]:mb-0",
+      "bg-modal-bg border border-[#444] rounded p-3 mb-5 text-[13px]",
+      "[&_p]:m-0 [&_p]:mb-2 [&_p]:text-muted [&_p:last-child]:mb-0",
       "[&_code]:text-[#569cd6] [&_code]:font-mono",
       className
     )}
@@ -143,7 +143,7 @@ export const Button: React.FC<ButtonProps> = ({ children, className, ...props })
 
 export const CancelButton: React.FC<ButtonProps> = ({ children, className, ...props }) => (
   <Button
-    className={cn("bg-[#444] text-[#ccc] hover:bg-[#555] disabled:hover:bg-[#444]", className)}
+    className={cn("bg-[#444] text-foreground hover:bg-[#555] disabled:hover:bg-[#444]", className)}
     {...props}
   >
     {children}
@@ -153,7 +153,7 @@ export const CancelButton: React.FC<ButtonProps> = ({ children, className, ...pr
 export const PrimaryButton: React.FC<ButtonProps> = ({ children, className, ...props }) => (
   <Button
     className={cn(
-      "bg-[#007acc] text-white hover:bg-[#005a9e] disabled:hover:bg-[#007acc]",
+      "bg-accent text-white hover:bg-accent-dark disabled:hover:bg-accent",
       className
     )}
     {...props}
diff --git a/src/components/ModelSelector.tsx b/src/components/ModelSelector.tsx
index 09205c235..0a877d483 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="font-mono text-[10px] text-[#808080] font-monospace leading-[11px] cursor-pointer py-0.5 px-1 rounded-sm transition-colors duration-200 whitespace-nowrap overflow-hidden text-ellipsis max-w-[150px] dir-rtl text-left hover:bg-[#2a2a2b]"
+            className="font-mono text-[10px] text-[#808080] font-monospace leading-[11px] cursor-pointer py-0.5 px-1 rounded-sm transition-colors duration-200 whitespace-nowrap overflow-hidden text-ellipsis max-w-[150px] dir-rtl text-left hover:bg-bg-hover"
             onClick={handleClick}
           >
             {value}
@@ -203,12 +203,12 @@ export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
             onChange={handleInputChange}
             onKeyDown={handleKeyDown}
             placeholder="provider:model-name"
-            className="text-[10px] text-[#d4d4d4] bg-[#1e1e1e] border border-[#3e3e42] rounded-sm py-0.5 px-1 font-monospace leading-[11px] w-[200px] outline-none focus:border-exec-mode"
+            className="text-[10px] text-text-light bg-bg-dark border border-border-light rounded-sm py-0.5 px-1 font-monospace leading-[11px] w-[200px] outline-none focus:border-exec-mode"
           />
           {error && <div className="text-[9px] text-[#f48771] font-monospace mt-0.5">{error}</div>}
         </div>
         {showDropdown && filteredModels.length > 0 && (
-          <div className="absolute bottom-full left-0 mb-1 bg-[#252526] border border-[#3e3e42] rounded shadow-[0_4px_12px_rgba(0,0,0,0.3)] z-[1000] min-w-[300px] max-h-[200px] overflow-y-auto">
+          <div className="absolute bottom-full left-0 mb-1 bg-separator border border-border-light rounded shadow-[0_4px_12px_rgba(0,0,0,0.3)] z-[1000] min-w-[300px] max-h-[200px] overflow-y-auto">
             {filteredModels.map((model, index) => (
               <div
                 key={model}
@@ -217,8 +217,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-[#2a2a2b]"
-                    : "text-[#d4d4d4] bg-transparent hover:bg-[#2a2a2b] hover:text-white"
+                    ? "text-white bg-bg-hover"
+                    : "text-text-light bg-transparent hover:bg-bg-hover hover:text-white"
                 )}
                 onClick={() => handleSelectModel(model)}
               >
diff --git a/src/components/NewWorkspaceModal.tsx b/src/components/NewWorkspaceModal.tsx
index 08269f43b..d2313fce6 100644
--- a/src/components/NewWorkspaceModal.tsx
+++ b/src/components/NewWorkspaceModal.tsx
@@ -100,7 +100,7 @@ const NewWorkspaceModal: React.FC<NewWorkspaceModalProps> = ({
       describedById={infoId}
     >
       <form onSubmit={(event) => void handleSubmit(event)}>
-        <div className="mb-5 [&_label]:block [&_label]:mb-2 [&_label]:text-[#ccc] [&_label]:text-sm [&_input]:w-full [&_input]:py-2 [&_input]:px-3 [&_input]:bg-[#2d2d2d] [&_input]:border [&_input]:border-[#444] [&_input]:rounded [&_input]:text-white [&_input]:text-sm [&_input]:focus:outline-none [&_input]:focus:border-[#007acc] [&_input]:disabled:opacity-60 [&_input]:disabled:cursor-not-allowed [&_select]:w-full [&_select]:py-2 [&_select]:px-3 [&_select]:bg-[#2d2d2d] [&_select]:border [&_select]:border-[#444] [&_select]:rounded [&_select]:text-white [&_select]:text-sm [&_select]:focus:outline-none [&_select]:focus:border-[#007acc] [&_select]:disabled:opacity-60 [&_select]:disabled:cursor-not-allowed [&_select]:cursor-pointer [&_option]:bg-[#2d2d2d] [&_option]:text-white">
+        <div className="mb-5 [&_label]:block [&_label]:mb-2 [&_label]:text-foreground [&_label]:text-sm [&_input]:w-full [&_input]:py-2 [&_input]:px-3 [&_input]:bg-modal-bg [&_input]:border [&_input]:border-[#444] [&_input]:rounded [&_input]:text-white [&_input]:text-sm [&_input]:focus:outline-none [&_input]:focus:border-accent [&_input]:disabled:opacity-60 [&_input]:disabled:cursor-not-allowed [&_select]:w-full [&_select]:py-2 [&_select]:px-3 [&_select]:bg-modal-bg [&_select]:border [&_select]:border-[#444] [&_select]:rounded [&_select]:text-white [&_select]:text-sm [&_select]:focus:outline-none [&_select]:focus:border-accent [&_select]:disabled:opacity-60 [&_select]:disabled:cursor-not-allowed [&_select]:cursor-pointer [&_option]:bg-modal-bg [&_option]:text-white">
           <label htmlFor="branchName">
             <TooltipWrapper inline>
               <span className="underline decoration-dotted decoration-[#666] underline-offset-2 cursor-help">
@@ -137,7 +137,7 @@ const NewWorkspaceModal: React.FC<NewWorkspaceModalProps> = ({
           {error && <div className="text-[#ff5555] text-[13px] mt-1.5">{error}</div>}
         </div>
 
-        <div className="mb-5 [&_label]:block [&_label]:mb-2 [&_label]:text-[#ccc] [&_label]:text-sm [&_input]:w-full [&_input]:py-2 [&_input]:px-3 [&_input]:bg-[#2d2d2d] [&_input]:border [&_input]:border-[#444] [&_input]:rounded [&_input]:text-white [&_input]:text-sm [&_input]:focus:outline-none [&_input]:focus:border-[#007acc] [&_input]:disabled:opacity-60 [&_input]:disabled:cursor-not-allowed [&_select]:w-full [&_select]:py-2 [&_select]:px-3 [&_select]:bg-[#2d2d2d] [&_select]:border [&_select]:border-[#444] [&_select]:rounded [&_select]:text-white [&_select]:text-sm [&_select]:focus:outline-none [&_select]:focus:border-[#007acc] [&_select]:disabled:opacity-60 [&_select]:disabled:cursor-not-allowed [&_select]:cursor-pointer [&_option]:bg-[#2d2d2d] [&_option]:text-white">
+        <div className="mb-5 [&_label]:block [&_label]:mb-2 [&_label]:text-foreground [&_label]:text-sm [&_input]:w-full [&_input]:py-2 [&_input]:px-3 [&_input]:bg-modal-bg [&_input]:border [&_input]:border-[#444] [&_input]:rounded [&_input]:text-white [&_input]:text-sm [&_input]:focus:outline-none [&_input]:focus:border-accent [&_input]:disabled:opacity-60 [&_input]:disabled:cursor-not-allowed [&_select]:w-full [&_select]:py-2 [&_select]:px-3 [&_select]:bg-modal-bg [&_select]:border [&_select]:border-[#444] [&_select]:rounded [&_select]:text-white [&_select]:text-sm [&_select]:focus:outline-none [&_select]:focus:border-accent [&_select]:disabled:opacity-60 [&_select]:disabled:cursor-not-allowed [&_select]:cursor-pointer [&_option]:bg-modal-bg [&_option]:text-white">
           <label htmlFor="trunkBranch">Trunk Branch:</label>
           {hasBranches ? (
             <select
@@ -182,8 +182,8 @@ const NewWorkspaceModal: React.FC<NewWorkspaceModalProps> = ({
 
         {branchName.trim() && (
           <div>
-            <div className="text-xs text-[#888] mb-2 font-sans">Equivalent command:</div>
-            <div className="mt-5 p-3 bg-[#1e1e1e] border border-[#3e3e42] rounded font-mono text-[13px] text-[#d4d4d4] whitespace-pre-wrap break-all">
+            <div className="text-xs text-muted mb-2 font-sans">Equivalent command:</div>
+            <div className="mt-5 p-3 bg-bg-dark border border-border-light rounded font-mono text-[13px] text-text-light whitespace-pre-wrap break-all">
               {formatNewCommand(branchName.trim(), trunkBranch.trim() || undefined)}
             </div>
           </div>
diff --git a/src/components/ProjectSidebar.tsx b/src/components/ProjectSidebar.tsx
index 072e4c017..383ef65b5 100644
--- a/src/components/ProjectSidebar.tsx
+++ b/src/components/ProjectSidebar.tsx
@@ -80,9 +80,9 @@ const DraggableProjectItemBase: React.FC<DraggableProjectItemProps> = ({
       className={cn(
         "py-1 px-3 flex items-center border-l-transparent transition-all duration-150",
         isDragging ? "cursor-grabbing opacity-40 [&_*]:!cursor-grabbing" : "cursor-grab",
-        isOver && "bg-[rgba(0,122,204,0.08)]",
-        selected && "bg-[#2a2a2b] border-l-[#007acc]",
-        "hover:bg-[#2a2a2b] hover:[&_button]:opacity-100 hover:[&_[data-drag-handle]]:opacity-100"
+        isOver && "bg-accent/[0.08]",
+        selected && "bg-bg-hover border-l-accent",
+        "hover:bg-bg-hover hover:[&_button]:opacity-100 hover:[&_[data-drag-handle]]:opacity-100"
       )}
       {...rest}
     >
@@ -136,11 +136,11 @@ const ProjectDragLayer: React.FC = () => {
   return (
     <div className="fixed pointer-events-none z-[9999] inset-0 cursor-grabbing">
       <div style={{ transform: `translate(${currentOffset.x + 10}px, ${currentOffset.y + 10}px)` }}>
-        <div className="bg-[rgba(42,42,43,0.95)] text-[#ccc] py-1.5 px-3 border-l-[3px] border-l-[#007acc] shadow-[0_6px_24px_rgba(0,0,0,0.4)] rounded flex items-center w-fit max-w-[280px] min-w-[180px]">
-          <span className="mr-1.5 text-[#666] text-xs">⠿</span>
-          <span className="mr-2 text-[#888] text-[10px]">▶</span>
+        <div className="bg-bg-hover/95 text-foreground py-1.5 px-3 border-l-[3px] border-l-accent shadow-[0_6px_24px_rgba(0,0,0,0.4)] rounded flex items-center w-fit max-w-[280px] min-w-[180px]">
+          <span className="mr-1.5 text-text-dim text-xs">⠿</span>
+          <span className="mr-2 text-muted text-[10px]">▶</span>
           <div className="flex-1 min-w-0">
-            <div className="text-[#cccccc] text-sm font-medium whitespace-nowrap overflow-hidden text-ellipsis tracking-[0.2px]">
+            <div className="text-foreground text-sm font-medium whitespace-nowrap overflow-hidden text-ellipsis tracking-[0.2px]">
               {name}
             </div>
             <div className="text-[#6e6e6e] text-[11px] mt-0.5 whitespace-nowrap overflow-hidden text-ellipsis font-monospace">
@@ -422,15 +422,15 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
         >
           {!collapsed && (
             <>
-              <div className="flex justify-between items-center p-4 border-b border-b-[#1e1e1e]">
-                <h2 className="m-0 text-[13px] font-semibold text-[#cccccc] uppercase tracking-[0.8px]">
+              <div className="flex justify-between items-center p-4 border-b border-b-bg-dark">
+                <h2 className="m-0 text-[13px] font-semibold text-foreground uppercase tracking-[0.8px]">
                   Projects
                 </h2>
                 <TooltipWrapper inline>
                   <button
                     onClick={onAddProject}
                     aria-label="Add project"
-                    className="w-6 h-6 bg-transparent text-[#cccccc] border border-transparent rounded cursor-pointer text-lg flex items-center justify-center p-0 transition-all duration-200 hover:bg-[#2a2a2b] hover:border-[#3c3c3c]"
+                    className="w-6 h-6 bg-transparent text-foreground border border-transparent rounded cursor-pointer text-lg flex items-center justify-center p-0 transition-all duration-200 hover:bg-bg-hover hover:border-[#3c3c3c]"
                   >
                     +
                   </button>
@@ -442,10 +442,10 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
               <div className="flex-1 overflow-y-auto">
                 {projects.size === 0 ? (
                   <div className="py-8 px-4 text-center">
-                    <p className="text-[#888] text-[13px] mb-4">No projects</p>
+                    <p className="text-muted text-[13px] mb-4">No projects</p>
                     <button
                       onClick={onAddProject}
-                      className="bg-[#007acc] text-white border-none rounded py-2 px-4 text-[13px] cursor-pointer transition-colors duration-200 hover:bg-[#005a9e]"
+                      className="bg-accent text-white border-none rounded py-2 px-4 text-[13px] cursor-pointer transition-colors duration-200 hover:bg-accent-dark"
                     >
                       Add Project
                     </button>
@@ -461,7 +461,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                     const isExpanded = expandedProjects.has(projectPath);
 
                     return (
-                      <div key={projectPath} className="border-b border-[#2a2a2b]">
+                      <div key={projectPath} className="border-b border-bg-hover">
                         <DraggableProjectItem
                           projectPath={projectPath}
                           onReorder={handleReorder}
@@ -482,20 +482,20 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                           <span
                             data-drag-handle
                             aria-hidden
-                            className="text-[#666] text-xs mr-1.5 cursor-grab opacity-0 select-none transition-opacity duration-150"
+                            className="text-text-dim text-xs mr-1.5 cursor-grab opacity-0 select-none transition-opacity duration-150"
                           >
                             ⠿
                           </span>
                           <span
                             data-project-path={projectPath}
                             aria-hidden="true"
-                            className="text-[#888] text-[10px] mr-2 transition-transform duration-200 flex-shrink-0"
+                            className="text-muted text-[10px] mr-2 transition-transform duration-200 flex-shrink-0"
                             style={{ transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)" }}
                           >
                             ▶
                           </span>
                           <div className="flex-1 min-w-0 pr-2">
-                            <div className="text-[#cccccc] text-sm font-medium whitespace-nowrap overflow-hidden text-ellipsis tracking-[0.2px]">
+                            <div className="text-foreground text-sm font-medium whitespace-nowrap overflow-hidden text-ellipsis tracking-[0.2px]">
                               {projectName}
                             </div>
                             <TooltipWrapper inline>
@@ -515,7 +515,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                               }}
                               aria-label={`Manage secrets for ${projectName}`}
                               data-project-path={projectPath}
-                              className="w-5 h-5 bg-transparent text-[#6e6e6e] border-none rounded-[3px] cursor-pointer text-sm flex items-center justify-center transition-all duration-200 opacity-0 flex-shrink-0 mr-1 hover:text-[#569cd6] hover:bg-[rgba(86,156,214,0.1)]"
+                              className="w-5 h-5 bg-transparent text-[#6e6e6e] border-none rounded-[3px] cursor-pointer text-sm flex items-center justify-center transition-all duration-200 opacity-0 flex-shrink-0 mr-1 hover:text-[#569cd6] hover:bg-[#569cd6]/10"
                             >
                               🔑
                             </button>
@@ -532,7 +532,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                               title="Remove project"
                               aria-label={`Remove project ${projectName}`}
                               data-project-path={projectPath}
-                              className="w-5 h-5 bg-transparent text-[#6e6e6e] border-none rounded-[3px] cursor-pointer text-base flex items-center justify-center transition-all duration-200 opacity-0 flex-shrink-0 hover:text-[#ff5555] hover:bg-[rgba(255,85,85,0.1)]"
+                              className="w-5 h-5 bg-transparent text-[#6e6e6e] border-none rounded-[3px] cursor-pointer text-base flex items-center justify-center transition-all duration-200 opacity-0 flex-shrink-0 hover:text-[#ff5555] hover:bg-[#ff5555]/10"
                             >
                               ×
                             </button>
@@ -544,12 +544,12 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
 
                         {isExpanded && (
                           <div id={workspaceListId} className="bg-[#1a1a1a]">
-                            <div className="py-2 px-3 pl-[22px] border-b border-[#2a2a2b]">
+                            <div className="py-2 px-3 pl-[22px] border-b border-bg-hover">
                               <button
                                 onClick={() => onAddWorkspace(projectPath)}
                                 data-project-path={projectPath}
                                 aria-label={`Add workspace to ${projectName}`}
-                                className="w-full py-1.5 px-3 bg-transparent text-[#888] border border-dashed border-[#444] rounded cursor-pointer text-[13px] transition-all duration-200 text-left hover:bg-[#2a2a2b] hover:border-[#555] hover:text-[#ccc]"
+                                className="w-full py-1.5 px-3 bg-transparent text-muted border border-dashed border-[#444] rounded cursor-pointer text-[13px] transition-all duration-200 text-left hover:bg-bg-hover hover:border-[#555] hover:text-foreground"
                               >
                                 + New Workspace
                                 {selectedWorkspace?.projectPath === projectPath &&
@@ -592,16 +592,16 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                                             : `Expand workspaces older than ${formatOldWorkspaceThreshold()}`
                                         }
                                         aria-expanded={showOldWorkspaces}
-                                        className="w-full py-2 px-3 pl-[22px] bg-transparent text-[#858585] border-none border-t border-t-[#2a2a2b] cursor-pointer text-xs transition-all duration-150 flex items-center justify-between font-medium hover:bg-[rgba(255,255,255,0.03)] hover:text-[#aaa] [&:hover_.arrow]:text-[#aaa]"
+                                        className="w-full py-2 px-3 pl-[22px] bg-transparent text-[#858585] border-none border-t border-t-bg-hover cursor-pointer text-xs transition-all duration-150 flex items-center justify-between font-medium hover:bg-white/[0.03] hover:text-[#aaa] [&:hover_.arrow]:text-[#aaa]"
                                       >
                                         <div className="flex items-center gap-1.5">
                                           <span>Older than {formatOldWorkspaceThreshold()}</span>
-                                          <span className="text-[#666] font-normal">
+                                          <span className="text-text-dim font-normal">
                                             ({old.length})
                                           </span>
                                         </div>
                                         <span
-                                          className="arrow text-[11px] text-[#666] transition-transform duration-200 ease-in-out"
+                                          className="arrow text-[11px] text-text-dim 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="w-full h-9 bg-transparent text-[#888] border-none border-t border-t-[#1e1e1e] cursor-pointer text-sm flex items-center justify-center p-0 transition-all duration-200 mt-auto hover:bg-[#2a2a2b] hover:text-[#ccc]"
+              className="w-full h-9 bg-transparent text-muted border-none border-t border-t-bg-dark cursor-pointer text-sm flex items-center justify-center p-0 transition-all duration-200 mt-auto hover:bg-bg-hover hover:text-foreground"
             >
               {collapsed ? "»" : "«"}
             </button>
diff --git a/src/components/RightSidebar.tsx b/src/components/RightSidebar.tsx
index dc29c965d..e98b713e4 100644
--- a/src/components/RightSidebar.tsx
+++ b/src/components/RightSidebar.tsx
@@ -49,10 +49,10 @@ const SidebarContainer: React.FC<SidebarContainerProps> = ({
   return (
     <div
       className={cn(
-        "bg-[#252526] border-l border-[#3e3e42] flex flex-col overflow-hidden flex-shrink-0",
+        "bg-separator border-l border-border-light flex flex-col overflow-hidden flex-shrink-0",
         customWidth ? "" : "transition-[width] duration-200",
         collapsed && "sticky right-0 z-10 shadow-[-2px_0_4px_rgba(0,0,0,0.2)]",
-        "max-md:border-l-0 max-md:border-t max-md:border-[#3e3e42]",
+        "max-md:border-l-0 max-md:border-t max-md:border-border-light",
         collapsed && "max-md:w-0 max-md:absolute max-md:bottom-0",
         !collapsed && "max-md:w-full max-md:relative max-md:max-h-[50vh]"
       )}
@@ -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="w-5 bg-[#252526] border-r border-[#3e3e42] flex flex-col flex-shrink-0">
+          <div className="w-5 bg-separator border-r border-border-light flex flex-col flex-shrink-0">
             {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-[#3e3e42] cursor-col-resize hover:bg-[#007acc]",
-              isResizing && "bg-[#007acc]"
+              "bg-[#3e3e42] cursor-col-resize hover:bg-accent",
+              isResizing && "bg-accent"
             )}
             onMouseDown={(e) => onStartResize(e as unknown as React.MouseEvent)}
           />
@@ -229,7 +229,7 @@ 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-[#252526] border-b-2 border-b-plan-mode"
+                    ? "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"
                 )}
                 onClick={() => setSelectedTab("costs")}
@@ -250,7 +250,7 @@ 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-[#252526] border-b-2 border-b-plan-mode"
+                    ? "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"
                 )}
                 onClick={() => setSelectedTab("review")}
diff --git a/src/components/RightSidebar/CodeReview/FileTree.tsx b/src/components/RightSidebar/CodeReview/FileTree.tsx
index d555cc578..3e3b87d6c 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-[#666] line-through [text-decoration-color:var(--color-read)] [text-decoration-thickness:2px]",
-                isUnknownState && !isFullyRead && "text-[#666]",
-                !isFullyRead && !isUnknownState && "text-[#888]"
+                  "text-text-dim line-through [text-decoration-color:var(--color-read)] [text-decoration-thickness:2px]",
+                isUnknownState && !isFullyRead && "text-text-dim",
+                !isFullyRead && !isUnknownState && "text-muted"
               )}
             >
               {node.name || "/"}
@@ -181,9 +181,9 @@ const TreeNodeContent: React.FC<{
               className={cn(
                 "flex-1",
                 isFullyRead &&
-                  "text-[#666] line-through [text-decoration-color:var(--color-read)] [text-decoration-thickness:2px]",
-                isUnknownState && !isFullyRead && "text-[#666]",
-                !isFullyRead && !isUnknownState && "text-[#ccc]"
+                  "text-text-dim line-through [text-decoration-color:var(--color-read)] [text-decoration-thickness:2px]",
+                isUnknownState && !isFullyRead && "text-text-dim",
+                !isFullyRead && !isUnknownState && "text-foreground"
               )}
             >
               {node.name}
@@ -246,11 +246,11 @@ export const FileTree: React.FC<FileTreeExternalProps> = ({
 
   return (
     <>
-      <div className="py-2 px-3 border-b border-[#3e3e42] text-xs font-medium text-[#ccc] font-primary flex items-center gap-2">
+      <div className="py-2 px-3 border-b border-border-light text-xs font-medium text-foreground font-primary flex items-center gap-2">
         <span>Files Changed</span>
         {selectedPath && (
           <button
-            className="py-0.5 px-2 bg-transparent text-[#888] border-none rounded-[3px] text-[11px] cursor-pointer transition-all duration-200 font-primary ml-auto hover:bg-white/5 hover:text-[#ccc]"
+            className="py-0.5 px-2 bg-transparent text-muted border-none rounded-[3px] text-[11px] cursor-pointer transition-all duration-200 font-primary ml-auto hover:bg-white/5 hover:text-foreground"
             onClick={() => onSelectFile(null)}
           >
             Clear filter
@@ -259,7 +259,7 @@ export const FileTree: React.FC<FileTreeExternalProps> = ({
       </div>
       <div className="flex-1 min-h-0 p-3 overflow-y-auto font-monospace text-xs">
         {isLoading && !root ? (
-          <div className="py-5 text-[#888] text-center">Loading file tree...</div>
+          <div className="py-5 text-muted text-center">Loading file tree...</div>
         ) : root ? (
           root.children.map((child) => (
             <TreeNodeContent
@@ -274,7 +274,7 @@ export const FileTree: React.FC<FileTreeExternalProps> = ({
             />
           ))
         ) : (
-          <div className="py-5 text-[#888] text-center">No files changed</div>
+          <div className="py-5 text-muted text-center">No files changed</div>
         )}
       </div>
     </>
diff --git a/src/components/RightSidebar/CodeReview/HunkViewer.tsx b/src/components/RightSidebar/CodeReview/HunkViewer.tsx
index 99abff631..8fc77a72d 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-[#1e1e1e] border rounded mb-3 overflow-hidden cursor-pointer transition-all duration-200",
+          "bg-bg-dark border rounded mb-3 overflow-hidden cursor-pointer transition-all duration-200",
           "focus:outline-none focus-visible:outline-none",
-          isRead ? "border-[var(--color-read)]" : "border-[#3e3e42]",
+          isRead ? "border-[var(--color-read)]" : "border-border-light",
           isSelected &&
             "border-[var(--color-review-accent)] shadow-[0_0_0_1px_var(--color-review-accent)]"
         )}
@@ -149,7 +149,7 @@ export const HunkViewer = React.memo<HunkViewerProps>(
         tabIndex={0}
         data-hunk-id={hunkId}
       >
-        <div className="bg-[#252526] py-2 px-3 border-b border-[#3e3e42] flex justify-between items-center font-monospace text-xs gap-2">
+        <div className="bg-separator py-2 px-3 border-b border-border-light flex justify-between items-center font-monospace text-xs gap-2">
           {isRead && (
             <TooltipWrapper inline>
               <span
@@ -164,7 +164,7 @@ export const HunkViewer = React.memo<HunkViewerProps>(
             </TooltipWrapper>
           )}
           <div
-            className="text-[#cccccc] font-medium whitespace-nowrap overflow-hidden text-ellipsis min-w-0"
+            className="text-foreground font-medium whitespace-nowrap overflow-hidden text-ellipsis min-w-0"
             dangerouslySetInnerHTML={{ __html: highlightedFilePath }}
           />
           <div className="flex items-center gap-2 text-[11px] whitespace-nowrap flex-shrink-0">
@@ -174,13 +174,13 @@ export const HunkViewer = React.memo<HunkViewerProps>(
                 {deletions > 0 && <span className="text-[#f87171]">-{deletions}</span>}
               </span>
             )}
-            <span className="text-[#888888]">
+            <span className="text-muted">
               ({lineCount} {lineCount === 1 ? "line" : "lines"})
             </span>
             {onToggleRead && (
               <TooltipWrapper inline>
                 <button
-                  className="bg-transparent border border-[#3e3e42] rounded-[3px] py-0.5 px-1.5 text-[#888] text-[11px] cursor-pointer transition-all duration-200 flex items-center gap-1 hover:bg-white/5 hover:border-[var(--color-read)] hover:text-[var(--color-read)] active:scale-95"
+                  className="bg-transparent border border-border-light rounded-[3px] py-0.5 px-1.5 text-muted text-[11px] cursor-pointer transition-all duration-200 flex items-center gap-1 hover:bg-white/5 hover:border-[var(--color-read)] hover:text-[var(--color-read)] active:scale-95"
                   data-hunk-id={hunkId}
                   onClick={handleToggleRead}
                   aria-label={`Mark as read (${formatKeybind(KEYBINDS.TOGGLE_HUNK_READ)})`}
@@ -196,7 +196,7 @@ export const HunkViewer = React.memo<HunkViewerProps>(
         </div>
 
         {isPureRename ? (
-          <div className="p-3 text-[#888] text-[11px] flex items-center gap-2 bg-[rgba(100,150,255,0.05)] before:content-['→'] before:text-sm before:text-[#6496ff]">
+          <div className="p-3 text-muted text-[11px] flex items-center gap-2 bg-[rgba(100,150,255,0.05)] before:content-['→'] before:text-sm before:text-[#6496ff]">
             Renamed from <code>{hunk.oldPath}</code>
           </div>
         ) : isExpanded ? (
@@ -220,7 +220,7 @@ export const HunkViewer = React.memo<HunkViewerProps>(
           </div>
         ) : (
           <div
-            className="py-2 px-3 text-center text-[#888] text-[11px] italic cursor-pointer hover:text-[#ccc]"
+            className="py-2 px-3 text-center text-muted text-[11px] italic cursor-pointer hover:text-foreground"
             onClick={handleToggleExpand}
           >
             {isRead && "Hunk marked as read. "}Click to expand ({lineCount} lines) or press{" "}
@@ -230,7 +230,7 @@ export const HunkViewer = React.memo<HunkViewerProps>(
 
         {hasManualState && isExpanded && !isPureRename && (
           <div
-            className="py-2 px-3 text-center text-[#888] text-[11px] italic cursor-pointer hover:text-[#ccc]"
+            className="py-2 px-3 text-center text-muted text-[11px] italic cursor-pointer hover:text-foreground"
             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 a5e9442f8..a7f6a2ecd 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-[#007acc] cursor-default hover:text-[#007acc]"
-            : "text-[#888] cursor-pointer hover:text-[#ccc]",
+            ? "text-accent cursor-default hover:text-accent"
+            : "text-muted cursor-pointer hover:text-foreground",
           animationState === "stopping" && "cursor-default"
         )}
       >
diff --git a/src/components/RightSidebar/CodeReview/ReviewControls.tsx b/src/components/RightSidebar/CodeReview/ReviewControls.tsx
index d6278d706..73b35ffcb 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="py-2 px-3 bg-[#252526] border-b border-[#3e3e42] flex gap-3 items-center flex-wrap text-[11px]">
+    <div className="py-2 px-3 bg-separator border-b border-border-light flex gap-3 items-center flex-wrap text-[11px]">
       {onRefresh && <RefreshButton onClick={onRefresh} isLoading={isLoading} />}
-      <label className="text-[#888] font-medium whitespace-nowrap">Base:</label>
+      <label className="text-muted font-medium whitespace-nowrap">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="py-1 px-2 bg-[#1e1e1e] text-[#ccc] border border-[#444] rounded text-[11px] font-mono w-[140px] transition-[border-color] duration-200 hover:border-[#007acc] focus:outline-none focus:border-[#007acc] placeholder:text-[#666]"
+        className="py-1 px-2 bg-bg-dark text-foreground border border-[#444] rounded text-[11px] font-mono w-[140px] transition-[border-color] duration-200 hover:border-accent focus:outline-none focus:border-accent placeholder:text-text-dim"
       />
       <datalist id="base-suggestions">
         <option value="HEAD" />
@@ -109,13 +109,13 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
       {showSetDefault && (
         <button
           onClick={handleSetDefault}
-          className="py-0.5 px-2 bg-transparent text-[#888] border-none rounded text-[11px] cursor-pointer transition-all duration-200 font-primary whitespace-nowrap hover:bg-[rgba(255,255,255,0.05)] hover:text-[#ccc]"
+          className="py-0.5 px-2 bg-transparent text-muted border-none rounded text-[11px] cursor-pointer transition-all duration-200 font-primary whitespace-nowrap hover:bg-[rgba(255,255,255,0.05)] hover:text-foreground"
         >
           Set Default
         </button>
       )}
 
-      <label className="flex items-center gap-1.5 text-[#ccc] text-[11px] cursor-pointer whitespace-nowrap hover:text-white [&_input[type='checkbox']]:cursor-pointer">
+      <label className="flex items-center gap-1.5 text-foreground text-[11px] cursor-pointer whitespace-nowrap 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="flex items-center gap-1.5 text-[#ccc] text-[11px] cursor-pointer whitespace-nowrap hover:text-white [&_input[type='checkbox']]:cursor-pointer">
+      <label className="flex items-center gap-1.5 text-foreground text-[11px] cursor-pointer whitespace-nowrap hover:text-white [&_input[type='checkbox']]:cursor-pointer">
         <input type="checkbox" checked={filters.showReadHunks} onChange={handleShowReadToggle} />
         Show read
       </label>
@@ -138,7 +138,7 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
 
       <div className="w-px h-4 bg-[#3e3e42]" />
 
-      <div className="py-1 px-2.5 rounded font-medium text-[11px] bg-transparent border border-transparent whitespace-nowrap text-[#888]">
+      <div className="py-1 px-2.5 rounded font-medium text-[11px] bg-transparent border border-transparent whitespace-nowrap text-muted">
         {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 6ad86cd50..88d398ec2 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="flex flex-col h-full min-h-0 bg-[#1e1e1e] [container-type:inline-size] [container-name:review-panel] outline-none focus-within:shadow-[inset_0_0_0_1px_rgba(0,122,204,0.2)]"
+      className="flex flex-col h-full min-h-0 bg-bg-dark [container-type:inline-size] [container-name:review-panel] outline-none focus-within:shadow-[inset_0_0_0_1px_rgba(0,122,204,0.2)]"
     >
       {/* Always show controls so user can change diff base */}
       <ReviewControls
@@ -547,39 +547,39 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
       />
 
       {error ? (
-        <div className="p-6 text-[#f48771] bg-[rgba(244,135,113,0.1)] border border-[rgba(244,135,113,0.3)] rounded m-3 font-monospace text-xs leading-[1.5] whitespace-pre-wrap break-words">
+        <div className="p-6 text-[#f48771] bg-[#f48771]/10 border border-[#f48771]/30 rounded m-3 font-monospace text-xs leading-[1.5] whitespace-pre-wrap break-words">
           {error}
         </div>
       ) : isLoadingHunks && hunks.length === 0 && !fileTree ? (
-        <div className="flex items-center justify-center h-full text-[#888] text-sm">
+        <div className="flex items-center justify-center h-full text-muted text-sm">
           Loading diff...
         </div>
       ) : (
         <div className="flex flex-row flex-1 min-h-0 overflow-hidden @[800px]:flex-col">
           <div className="flex-1 min-h-0 flex flex-col overflow-hidden min-w-0 order-1">
             {truncationWarning && (
-              <div className="bg-[rgba(255,193,7,0.1)] border border-[rgba(255,193,7,0.3)] rounded py-1.5 px-3 mx-3 my-3 text-[#ffc107] text-[10px] flex items-center gap-1.5 leading-[1.3] before:content-['⚠️'] before:text-xs">
+              <div className="bg-[#ffc107]/10 border border-[#ffc107]/30 rounded py-1.5 px-3 mx-3 my-3 text-[#ffc107] text-[10px] flex items-center gap-1.5 leading-[1.3] before:content-['⚠️'] before:text-xs">
                 {truncationWarning}
               </div>
             )}
 
-            <div className="py-2 px-3 border-b border-[#3e3e42] bg-[#252526]">
-              <div className="flex items-stretch border border-[#3e3e42] rounded overflow-hidden bg-[#1e1e1e] transition-[border-color] duration-150 hover:border-[#4e4e52] focus-within:border-[#007acc] focus-within:hover:border-[#007acc]">
+            <div className="py-2 px-3 border-b border-border-light bg-separator">
+              <div className="flex items-stretch border border-border-light rounded overflow-hidden bg-bg-dark transition-[border-color] duration-150 hover:border-[#4e4e52] focus-within:border-accent focus-within:hover:border-accent">
                 <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-1 py-1.5 px-2.5 bg-transparent border-none text-[#ccc] text-xs font-sans leading-[1.4] outline-none flex items-center h-full placeholder:text-[#666] focus:bg-[#1a1a1a]"
+                  className="flex-1 py-1.5 px-2.5 bg-transparent border-none text-foreground text-xs font-sans leading-[1.4] outline-none flex items-center h-full placeholder:text-text-dim focus:bg-[#1a1a1a]"
                 />
                 <TooltipWrapper inline>
                   <button
                     className={cn(
-                      "py-1.5 px-2.5 border-none border-l border-l-[#3e3e42] text-[11px] font-monospace font-semibold leading-[1.4] cursor-pointer outline-none transition-all duration-150 whitespace-nowrap flex items-center h-full",
+                      "py-1.5 px-2.5 border-none border-l 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-[#2a3a4a] text-[#4db8ff] shadow-[inset_0_0_0_1px_rgba(77,184,255,0.4)] hover:bg-[#2a4050] hover:text-[#4db8ff]"
-                        : "bg-transparent text-[#999] hover:bg-[#252526] hover:text-[#ccc]",
+                        : "bg-transparent text-[#999] hover:bg-separator hover:text-foreground",
                       "active:translate-y-px"
                     )}
                     onClick={() =>
@@ -595,10 +595,10 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
                 <TooltipWrapper inline>
                   <button
                     className={cn(
-                      "py-1.5 px-2.5 border-none border-l border-l-[#3e3e42] text-[11px] font-monospace font-semibold leading-[1.4] cursor-pointer outline-none transition-all duration-150 whitespace-nowrap flex items-center h-full",
+                      "py-1.5 px-2.5 border-none border-l 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-[#2a3a4a] text-[#4db8ff] shadow-[inset_0_0_0_1px_rgba(77,184,255,0.4)] hover:bg-[#2a4050] hover:text-[#4db8ff]"
-                        : "bg-transparent text-[#999] hover:bg-[#252526] hover:text-[#ccc]",
+                        : "bg-transparent text-[#999] hover:bg-separator hover:text-foreground",
                       "active:translate-y-px"
                     )}
                     onClick={() =>
@@ -618,38 +618,38 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
 
             <div className="flex-1 min-h-0 overflow-y-auto p-3">
               {hunks.length === 0 ? (
-                <div className="flex flex-col items-center justify-start pt-12 px-6 pb-6 text-[#888] text-center gap-3">
-                  <div className="text-base font-medium text-[#ccc]">No changes found</div>
+                <div className="flex flex-col items-center justify-start pt-12 px-6 pb-6 text-muted text-center gap-3">
+                  <div className="text-base font-medium text-foreground">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="mt-4 max-w-[500px] w-full bg-[#2d2d2d] border border-[#3e3e42] rounded p-3 cursor-pointer [&_summary]:text-[#888] [&_summary]:text-xs [&_summary]:font-medium [&_summary]:select-none [&_summary]:list-none [&_summary]:flex [&_summary]:items-center [&_summary]:gap-1.5 [&_summary::-webkit-details-marker]:hidden [&_summary::before]:content-['▶'] [&_summary::before]:text-[10px] [&_summary::before]:transition-transform [&_summary::before]:duration-200 [&[open]_summary::before]:rotate-90">
+                    <details className="mt-4 max-w-[500px] w-full bg-modal-bg border border-border-light rounded p-3 cursor-pointer [&_summary]:text-muted [&_summary]:text-xs [&_summary]:font-medium [&_summary]:select-none [&_summary]:list-none [&_summary]:flex [&_summary]:items-center [&_summary]:gap-1.5 [&_summary::-webkit-details-marker]:hidden [&_summary::before]:content-['▶'] [&_summary::before]:text-[10px] [&_summary::before]:transition-transform [&_summary::before]:duration-200 [&[open]_summary::before]:rotate-90">
                       <summary>Show diagnostic info</summary>
-                      <div className="mt-3 font-monospace text-[11px] text-[#ccc] leading-[1.6]">
-                        <div className="grid grid-cols-[140px_1fr] gap-3 py-1 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-[#3e3e42]">
-                          <div className="text-[#888] font-medium">Command:</div>
-                          <div className="text-[#ccc] break-all select-all">
+                      <div className="mt-3 font-monospace text-[11px] text-foreground leading-[1.6]">
+                        <div className="grid grid-cols-[140px_1fr] gap-3 py-1 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-border-light">
+                          <div className="text-muted font-medium">Command:</div>
+                          <div className="text-foreground break-all select-all">
                             {diagnosticInfo.command}
                           </div>
                         </div>
-                        <div className="grid grid-cols-[140px_1fr] gap-3 py-1 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-[#3e3e42]">
-                          <div className="text-[#888] font-medium">Output size:</div>
-                          <div className="text-[#ccc] break-all select-all">
+                        <div className="grid grid-cols-[140px_1fr] gap-3 py-1 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-border-light">
+                          <div className="text-muted font-medium">Output size:</div>
+                          <div className="text-foreground break-all select-all">
                             {diagnosticInfo.outputLength.toLocaleString()} bytes
                           </div>
                         </div>
-                        <div className="grid grid-cols-[140px_1fr] gap-3 py-1 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-[#3e3e42]">
-                          <div className="text-[#888] font-medium">Files parsed:</div>
-                          <div className="text-[#ccc] break-all select-all">
+                        <div className="grid grid-cols-[140px_1fr] gap-3 py-1 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-border-light">
+                          <div className="text-muted font-medium">Files parsed:</div>
+                          <div className="text-foreground break-all select-all">
                             {diagnosticInfo.fileDiffCount}
                           </div>
                         </div>
                         <div className="grid grid-cols-[140px_1fr] gap-3 py-1">
-                          <div className="text-[#888] font-medium">Hunks extracted:</div>
-                          <div className="text-[#ccc] break-all select-all">
+                          <div className="text-muted font-medium">Hunks extracted:</div>
+                          <div className="text-foreground break-all select-all">
                             {diagnosticInfo.hunkCount}
                           </div>
                         </div>
@@ -658,7 +658,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
                   )}
                 </div>
               ) : filteredHunks.length === 0 ? (
-                <div className="flex flex-col items-center justify-start pt-12 px-6 pb-6 text-[#888] text-center gap-3">
+                <div className="flex flex-col items-center justify-start pt-12 px-6 pb-6 text-muted text-center gap-3">
                   <div className="text-[13px] leading-[1.5]">
                     {debouncedSearchTerm.trim()
                       ? `No hunks match "${debouncedSearchTerm}". Try a different search term.`
@@ -694,7 +694,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
 
           {/* FileTree positioning handled by CSS order property */}
           {(fileTree ?? isLoadingTree) && (
-            <div className="w-[300px] flex-shrink-0 border-l border-[#3e3e42] flex flex-col overflow-hidden min-h-0 order-2 @[800px]:w-full @[800px]:h-auto @[800px]:flex-[0_0_auto] @[800px]:border-l-0 @[800px]:border-b @[800px]:border-[#3e3e42] @[800px]:order-0">
+            <div className="w-[300px] flex-shrink-0 border-l border-border-light flex flex-col overflow-hidden min-h-0 order-2 @[800px]:w-full @[800px]:h-auto @[800px]:flex-[0_0_auto] @[800px]:border-l-0 @[800px]:border-b @[800px]:border-border-light @[800px]:order-0">
               <FileTree
                 root={fileTree}
                 selectedPath={selectedFilePath}
diff --git a/src/components/RightSidebar/CodeReview/UntrackedStatus.tsx b/src/components/RightSidebar/CodeReview/UntrackedStatus.tsx
index 744ff18f8..363481407 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-[#3e2a00] border border-[#806000] text-[#ffb347] cursor-pointer hover:bg-[#4a3200] hover:border-[#a07000]"
-            : "bg-transparent border border-transparent text-[#888] cursor-default"
+            : "bg-transparent border border-transparent text-muted cursor-default"
         )}
         onClick={() => hasUntracked && setShowTooltip(!showTooltip)}
       >
@@ -135,8 +135,8 @@ export const UntrackedStatus: React.FC<UntrackedStatusProps> = ({
       </div>
 
       {showTooltip && hasUntracked && (
-        <div className="absolute top-[calc(100%+8px)] right-0 bg-[#2d2d30] border border-[#454545] rounded p-2 min-w-[200px] max-w-[400px] z-[1000] shadow-[0_4px_12px_rgba(0,0,0,0.3)] animate-in fade-in slide-in-from-top-1 duration-150">
-          <div className="text-[11px] font-semibold text-[#ccc] mb-2 pb-1.5 border-b border-[#3e3e42]">
+        <div className="absolute top-[calc(100%+8px)] right-0 bg-modal-bg border border-[#454545] rounded p-2 min-w-[200px] max-w-[400px] z-[1000] shadow-[0_4px_12px_rgba(0,0,0,0.3)] animate-in fade-in slide-in-from-top-1 duration-150">
+          <div className="text-[11px] font-semibold text-foreground mb-2 pb-1.5 border-b border-border-light">
             Untracked Files ({count})
           </div>
           <div className="max-h-[200px] overflow-y-auto mb-2">
@@ -153,8 +153,8 @@ export const UntrackedStatus: React.FC<UntrackedStatusProps> = ({
             onClick={() => void handleTrackAll()}
             disabled={isTracking}
             className={cn(
-              "w-full py-1 px-2 bg-transparent text-[#888] border border-[#444] rounded text-[11px] cursor-pointer transition-all duration-200 font-primary",
-              "hover:bg-[rgba(255,255,255,0.05)] hover:text-[#ccc] hover:border-[#666]",
+              "w-full py-1 px-2 bg-transparent text-muted border border-[#444] rounded text-[11px] cursor-pointer transition-all duration-200 font-primary",
+              "hover:bg-[rgba(255,255,255,0.05)] hover:text-foreground hover:border-[#666]",
               "active:bg-[rgba(255,255,255,0.1)]",
               "disabled:text-[#555] disabled:border-[#333] disabled:cursor-not-allowed disabled:bg-transparent"
             )}
diff --git a/src/components/RightSidebar/ConsumerBreakdown.tsx b/src/components/RightSidebar/ConsumerBreakdown.tsx
index 118ddc8c2..ababfc525 100644
--- a/src/components/RightSidebar/ConsumerBreakdown.tsx
+++ b/src/components/RightSidebar/ConsumerBreakdown.tsx
@@ -16,12 +16,12 @@ const ConsumerBreakdownComponent: React.FC<ConsumerBreakdownProps> = ({ consumer
   }
 
   if (consumers.consumers.length === 0) {
-    return <div className="text-[#666666] italic py-3 text-left">No consumer data available</div>;
+    return <div className="text-text-dim italic py-3 text-left">No consumer data available</div>;
   }
 
   return (
     <>
-      <div className="text-[#888888] text-xs mb-2">
+      <div className="text-muted text-xs mb-2">
         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="flex flex-col gap-1 mb-2">
               <div className="flex justify-between items-center mb-1">
-                <span className="text-[#cccccc] font-medium flex items-center gap-1">
+                <span className="text-foreground font-medium flex items-center gap-1">
                   {consumer.name}
                   {consumer.name === "web_search" && (
                     <TooltipWrapper inline>
@@ -51,7 +51,7 @@ const ConsumerBreakdownComponent: React.FC<ConsumerBreakdownProps> = ({ consumer
                     </TooltipWrapper>
                   )}
                 </span>
-                <span className="text-[#888888] text-xs">
+                <span className="text-muted text-xs">
                   {tokenDisplay} ({consumer.percentage.toFixed(1)}%)
                 </span>
               </div>
@@ -85,7 +85,7 @@ const ConsumerBreakdownComponent: React.FC<ConsumerBreakdownProps> = ({ consumer
                   )}
                 </div>
                 {consumer.fixedTokens && consumer.variableTokens && (
-                  <div className="text-[#666666] text-[11px] text-left">
+                  <div className="text-text-dim text-[11px] text-left">
                     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 2a91e349b..74134ab41 100644
--- a/src/components/RightSidebar/CostsTab.tsx
+++ b/src/components/RightSidebar/CostsTab.tsx
@@ -69,7 +69,7 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
   // Only show empty state if truly no data anywhere
   if (!hasAnyData) {
     return (
-      <div className="text-[#d4d4d4] font-primary text-[13px] leading-relaxed">
+      <div className="text-text-light font-primary text-[13px] leading-relaxed">
         <div className="text-secondary text-center py-10 px-5">
           <p>No messages yet.</p>
           <p>Send a message to see token usage statistics.</p>
@@ -90,7 +90,7 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
       : sumUsageHistory(usage.usageHistory);
 
   return (
-    <div className="text-[#d4d4d4] font-primary text-[13px] leading-relaxed">
+    <div className="text-text-light font-primary text-[13px] leading-relaxed">
       {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,10 +163,10 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
                 <>
                   <div data-testid="context-usage" className="flex flex-col gap-1 mb-2 relative">
                     <div className="flex justify-between items-baseline">
-                      <span className="text-[#cccccc] font-medium inline-flex items-baseline gap-1">
+                      <span className="text-foreground font-medium inline-flex items-baseline gap-1">
                         Context Usage
                       </span>
-                      <span className="text-[#888888] text-xs">
+                      <span className="text-muted text-xs">
                         {totalDisplay}
                         {maxDisplay}
                         {` (${totalPercentage.toFixed(1)}%)`}
@@ -348,7 +348,7 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
                         className="flex justify-between items-baseline mb-2"
                       >
                         <div className="flex gap-3 items-center">
-                          <span className="text-[#cccccc] font-medium inline-flex items-baseline gap-1">
+                          <span className="text-foreground font-medium inline-flex items-baseline gap-1">
                             Cost
                           </span>
                           <ToggleGroup
@@ -357,7 +357,7 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
                             onChange={setViewMode}
                           />
                         </div>
-                        <span className="text-[#888888] text-xs">
+                        <span className="text-muted text-xs">
                           {formatCostWithDollar(totalCost)}
                         </span>
                       </div>
@@ -413,14 +413,14 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
                     className="w-full mt-1 border-collapse text-[11px]"
                   >
                     <thead>
-                      <tr className="border-b border-[#3e3e42]">
-                        <th className="text-left text-[#888888] font-medium py-1 pr-2 [&:last-child]:text-right [&:last-child]:pr-0">
+                      <tr className="border-b border-border-light">
+                        <th className="text-left text-muted font-medium py-1 pr-2 [&:last-child]:text-right [&:last-child]:pr-0">
                           Component
                         </th>
-                        <th className="text-left text-[#888888] font-medium py-1 pr-2 [&:last-child]:text-right [&:last-child]:pr-0">
+                        <th className="text-left text-muted font-medium py-1 pr-2 [&:last-child]:text-right [&:last-child]:pr-0">
                           Tokens
                         </th>
-                        <th className="text-left text-[#888888] font-medium py-1 pr-2 [&:last-child]:text-right [&:last-child]:pr-0">
+                        <th className="text-left text-muted font-medium py-1 pr-2 [&:last-child]:text-right [&:last-child]:pr-0">
                           Cost
                         </th>
                       </tr>
@@ -435,7 +435,7 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
 
                         return (
                           <tr key={component.name}>
-                            <td className="py-1 pr-2 text-[#cccccc] [&:last-child]:text-right [&:last-child]:pr-0">
+                            <td className="py-1 pr-2 text-foreground [&:last-child]:text-right [&:last-child]:pr-0">
                               <div className="flex items-center gap-1.5">
                                 <div
                                   className="w-2 h-2 rounded-sm flex-shrink-0"
@@ -444,12 +444,12 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
                                 {component.name}
                               </div>
                             </td>
-                            <td className="py-1 pr-2 text-[#cccccc] [&:last-child]:text-right [&:last-child]:pr-0">
+                            <td className="py-1 pr-2 text-foreground [&:last-child]:text-right [&:last-child]:pr-0">
                               {formatTokens(component.tokens)}
                             </td>
-                            <td className="py-1 pr-2 text-[#cccccc] [&:last-child]:text-right [&:last-child]:pr-0">
+                            <td className="py-1 pr-2 text-foreground [&:last-child]:text-right [&:last-child]:pr-0">
                               {isNegligible ? (
-                                <span className="text-[#666666] italic">{costDisplay}</span>
+                                <span className="text-text-dim italic">{costDisplay}</span>
                               ) : (
                                 costDisplay
                               )}
diff --git a/src/components/RightSidebar/VerticalTokenMeter.tsx b/src/components/RightSidebar/VerticalTokenMeter.tsx
index 195c5582a..0334e02aa 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="w-5 h-full flex flex-col items-center py-3 bg-[#252526] border-l border-[#3e3e42]"
+      className="w-5 h-full flex flex-col items-center py-3 bg-separator border-l border-border-light"
       data-component="vertical-token-meter"
     >
       {data.maxTokens && (
         <div
-          className="font-primary text-[8px] font-semibold text-[#cccccc] mb-1 text-center flex-shrink-0"
+          className="font-primary text-[8px] font-semibold text-foreground mb-1 text-center flex-shrink-0"
           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="font-semibold text-[13px] text-[#cccccc]"
+                    className="font-semibold text-[13px] text-foreground"
                     data-tooltip-title="last-request"
                   >
                     Last Request
                   </div>
-                  <div className="border-t border-[#3e3e42] my-1" data-divider="top" />
+                  <div className="border-t border-border-light my-1" 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-[#cccccc] font-medium" data-value="tokens">
+                      <span className="text-foreground font-medium" data-value="tokens">
                         {formatTokens(seg.tokens)}
                       </span>
                     </div>
                   ))}
-                  <div className="border-t border-[#3e3e42] my-1" data-divider="bottom" />
+                  <div className="border-t border-border-light my-1" data-divider="bottom" />
                   <div
-                    className="text-[#888] text-[11px]"
+                    className="text-muted text-[11px]"
                     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-[#666] text-[10px] mt-2 italic">
+                  <div className="text-text-dim text-[10px] mt-2 italic">
                     💡 Expand your viewport to see full details
                   </div>
                 </div>
diff --git a/src/components/SecretsModal.tsx b/src/components/SecretsModal.tsx
index 4e9bbe22b..2bd90cd0f 100644
--- a/src/components/SecretsModal.tsx
+++ b/src/components/SecretsModal.tsx
@@ -140,9 +140,9 @@ const SecretsModal: React.FC<SecretsModalProps> = ({
 
       <div className="flex-1 overflow-y-auto mb-4 min-h-[200px]">
         {secrets.length === 0 ? (
-          <div className="py-8 px-4 text-center text-[#888] text-[13px]">No secrets configured</div>
+          <div className="py-8 px-4 text-center text-muted text-[13px]">No secrets configured</div>
         ) : (
-          <div className="grid grid-cols-[1fr_1fr_auto_auto] gap-1 items-end [&>label]:text-[11px] [&>label]:text-[#888] [&>label]:mb-0.5">
+          <div className="grid grid-cols-[1fr_1fr_auto_auto] gap-1 items-end [&>label]:text-[11px] [&>label]:text-muted [&>label]:mb-0.5">
             <label>Key</label>
             <label>Value</label>
             <div /> {/* Empty cell for eye icon column */}
@@ -155,7 +155,7 @@ const SecretsModal: React.FC<SecretsModalProps> = ({
                   onChange={(e) => updateSecret(index, "key", e.target.value)}
                   placeholder="SECRET_NAME"
                   disabled={isLoading}
-                  className="py-1.5 px-2.5 bg-[#2d2d2d] border border-[#444] rounded text-white text-[13px] font-mono w-full focus:outline-none focus:border-[#007acc] placeholder:text-[#666]"
+                  className="py-1.5 px-2.5 bg-modal-bg border border-[#444] rounded text-white text-[13px] font-mono w-full focus:outline-none focus:border-accent placeholder:text-text-dim"
                 />
                 <input
                   type={visibleSecrets.has(index) ? "text" : "password"}
@@ -163,13 +163,13 @@ const SecretsModal: React.FC<SecretsModalProps> = ({
                   onChange={(e) => updateSecret(index, "value", e.target.value)}
                   placeholder="secret value"
                   disabled={isLoading}
-                  className="py-1.5 px-2.5 bg-[#2d2d2d] border border-[#444] rounded text-white text-[13px] font-mono w-full focus:outline-none focus:border-[#007acc] placeholder:text-[#666]"
+                  className="py-1.5 px-2.5 bg-modal-bg border border-[#444] rounded text-white text-[13px] font-mono w-full focus:outline-none focus:border-accent placeholder:text-text-dim"
                 />
                 <button
                   type="button"
                   onClick={() => toggleVisibility(index)}
                   disabled={isLoading}
-                  className="bg-transparent border-none text-[#888] cursor-pointer text-base px-1 py-0.5 rounded-sm transition-all duration-200 flex items-center justify-center self-center hover:text-[#ccc]"
+                  className="bg-transparent border-none text-muted cursor-pointer text-base px-1 py-0.5 rounded-sm transition-all duration-200 flex items-center justify-center self-center hover:text-foreground"
                 >
                   <ToggleVisibilityIcon visible={visibleSecrets.has(index)} />
                 </button>
@@ -190,7 +190,7 @@ const SecretsModal: React.FC<SecretsModalProps> = ({
       <button
         onClick={addSecret}
         disabled={isLoading}
-        className="w-full py-2 px-3 bg-transparent text-[#888] border border-dashed border-[#444] rounded cursor-pointer text-[13px] transition-all duration-200 mb-4 hover:bg-[#2a2a2b] hover:border-[#555] hover:text-[#ccc]"
+        className="w-full py-2 px-3 bg-transparent text-muted border border-dashed border-[#444] rounded cursor-pointer text-[13px] transition-all duration-200 mb-4 hover:bg-bg-hover hover:border-[#555] hover:text-foreground"
       >
         + Add Secret
       </button>
diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx
index 5900ba654..6f2dc5830 100644
--- a/src/components/TitleBar.tsx
+++ b/src/components/TitleBar.tsx
@@ -214,7 +214,7 @@ export function TitleBar() {
   const showUpdateIndicator = true;
 
   return (
-    <div className="px-4 py-2 bg-[#1e1e1e] border-b border-[#3c3c3c] flex items-center justify-between font-primary text-[11px] text-[#858585] select-none flex-shrink-0">
+    <div className="px-4 py-2 bg-bg-dark border-b border-[#3c3c3c] flex items-center justify-between font-primary text-[11px] text-[#858585] select-none flex-shrink-0">
       <div className="flex items-center gap-2 min-w-0 mr-4">
         {showUpdateIndicator && (
           <TooltipWrapper>
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index 5a64ee8fa..51c2dba05 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -219,7 +219,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
         opacity: tooltipState.isPositioned ? 1 : 0,
       }}
       className={cn(
-        "bg-[#2d2d30] text-[#cccccc] text-left rounded px-[10px] py-[6px] z-[9999]",
+        "bg-modal-bg text-foreground text-left rounded px-[10px] py-[6px] z-[9999]",
         "text-[11px] font-normal font-sans border border-[#464647] shadow-[0_2px_8px_rgba(0,0,0,0.4)]",
         width === "wide" ? "whitespace-normal max-w-[300px] w-max" : "whitespace-nowrap",
         interactive ? "pointer-events-auto" : "pointer-events-none",
@@ -244,7 +244,7 @@ export const HelpIndicator: React.FC<{ className?: string; children?: React.Reac
 }) => (
   <span
     className={cn(
-      "text-[#666] text-[7px] cursor-help inline-block align-baseline",
+      "text-text-dim text-[7px] cursor-help inline-block align-baseline",
       "border border-[#666] rounded-full w-[10px] h-[10px] leading-[8px]",
       "text-center font-bold mb-[2px]",
       className
diff --git a/src/components/VimTextArea.tsx b/src/components/VimTextArea.tsx
index 1dfd9246b..d4665b89e 100644
--- a/src/components/VimTextArea.tsx
+++ b/src/components/VimTextArea.tsx
@@ -209,12 +209,12 @@ export const VimTextArea = React.forwardRef<HTMLTextAreaElement, VimTextAreaProp
             autoComplete="off"
             {...rest}
             className={cn(
-              "w-full border text-[#d4d4d4] py-1.5 px-2 rounded font-mono text-[13px] resize-none min-h-8 max-h-[50vh] overflow-y-auto",
+              "w-full border text-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-[#6b6b6b]",
               "focus:outline-none",
               isEditing
                 ? "bg-[var(--color-editing-mode-alpha)] border-[var(--color-editing-mode)] focus:border-[var(--color-editing-mode)]"
-                : "bg-[#1e1e1e] border-[#3e3e42]",
+                : "bg-bg-dark border-border-light",
               !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 87abdf12c..6b99bf3c7 100644
--- a/src/components/WorkspaceListItem.tsx
+++ b/src/components/WorkspaceListItem.tsx
@@ -132,8 +132,8 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
     <React.Fragment>
       <div
         className={cn(
-          "py-1.5 px-3 pl-7 cursor-pointer grid grid-cols-[auto_auto_1fr_auto] gap-2 items-center border-l-[3px] border-transparent transition-all duration-150 text-[13px] relative hover:bg-[#2a2a2b] [&:hover_button]:opacity-100",
-          isSelected && "bg-[#2a2a2b] border-l-[#569cd6]"
+          "py-1.5 px-3 pl-7 cursor-pointer grid grid-cols-[auto_auto_1fr_auto] gap-2 items-center border-l-[3px] border-transparent transition-all duration-150 text-[13px] relative hover:bg-bg-hover [&:hover_button]:opacity-100",
+          isSelected && "bg-bg-hover border-l-[#569cd6]"
         )}
         onClick={() =>
           onSelectWorkspace({
@@ -162,7 +162,7 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
       >
         <TooltipWrapper inline>
           <button
-            className="opacity-0 bg-transparent text-[#888] border-none cursor-pointer text-base p-0 w-5 h-5 flex items-center justify-center transition-all duration-200 flex-shrink-0 col-start-1 hover:text-[#ccc] hover:bg-white/10 hover:rounded-sm"
+            className="opacity-0 bg-transparent text-muted border-none cursor-pointer text-base p-0 w-5 h-5 flex items-center justify-center transition-all duration-200 flex-shrink-0 col-start-1 hover:text-foreground hover:bg-white/10 hover:rounded-sm"
             onClick={(e) => {
               e.stopPropagation();
               void onRemoveWorkspace(workspaceId, e.currentTarget);
@@ -195,7 +195,7 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
           />
         ) : (
           <span
-            className="text-[#ccc] text-[14px] whitespace-nowrap overflow-hidden text-ellipsis cursor-pointer px-1 py-0.5 rounded-sm transition-colors duration-200 min-w-0 text-right hover:bg-white/5"
+            className="text-foreground text-[14px] whitespace-nowrap overflow-hidden text-ellipsis cursor-pointer px-1 py-0.5 rounded-sm transition-colors duration-200 min-w-0 text-right hover:bg-white/5"
             onDoubleClick={(e) => {
               e.stopPropagation();
               startRenaming();
diff --git a/src/components/shared/DiffRenderer.tsx b/src/components/shared/DiffRenderer.tsx
index 48cb7e0c1..afd1b98db 100644
--- a/src/components/shared/DiffRenderer.tsx
+++ b/src/components/shared/DiffRenderer.tsx
@@ -336,12 +336,12 @@ const ReviewNoteInput: React.FC<ReviewNoteInputProps> = React.memo(
 
     return (
       <div
-        className="py-1.5 px-2 bg-[#1e1e1e] border-t m-0"
+        className="py-1.5 px-2 bg-bg-dark border-t m-0"
         style={{ borderColor: "hsl(from var(--color-review-accent) h s l / 0.3)" }}
       >
         <textarea
           ref={textareaRef}
-          className="w-full px-2 py-1.5 font-mono text-xs leading-[1.4] bg-[#1e1e1e] border rounded-sm text-text resize-none overflow-y-hidden placeholder:text-[#888] focus:outline-none focus:border-[hsl(from_var(--color-review-accent)_h_s_l_/_0.6)]"
+          className="w-full px-2 py-1.5 font-mono text-xs leading-[1.4] bg-bg-dark border rounded-sm text-text resize-none overflow-y-hidden placeholder:text-muted focus:outline-none focus:border-[hsl(from_var(--color-review-accent)_h_s_l_/_0.6)]"
           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 a14a47aca..18ec0385c 100644
--- a/src/components/tools/BashToolCall.tsx
+++ b/src/components/tools/BashToolCall.tsx
@@ -106,7 +106,7 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({
               {result.success === false && result.error && (
                 <DetailSection>
                   <DetailLabel>Error</DetailLabel>
-                  <div className="text-[#f44336] text-[11px] px-2 py-1.5 bg-[rgba(244,67,54,0.1)] rounded border-l-2 border-[#f44336]">
+                  <div className="text-danger text-[11px] px-2 py-1.5 bg-[rgba(244,67,54,0.1)] rounded border-l-2 border-[#f44336]">
                     {result.error}
                   </div>
                 </DetailSection>
diff --git a/src/components/tools/FileEditToolCall.tsx b/src/components/tools/FileEditToolCall.tsx
index bd3c96fcf..5a8a005c7 100644
--- a/src/components/tools/FileEditToolCall.tsx
+++ b/src/components/tools/FileEditToolCall.tsx
@@ -83,7 +83,7 @@ function renderDiff(
     ));
   } catch (error) {
     return (
-      <div className="text-[#f44336] text-[11px] px-2 py-1.5 bg-[rgba(244,67,54,0.1)] rounded border-l-2 border-[#f44336]">
+      <div className="text-danger text-[11px] px-2 py-1.5 bg-[rgba(244,67,54,0.1)] rounded border-l-2 border-[#f44336]">
         Failed to parse diff: {String(error)}
       </div>
     );
@@ -164,7 +164,7 @@ export const FileEditToolCall: React.FC<FileEditToolCallProps> = ({
               {result.success === false && result.error && (
                 <DetailSection>
                   <DetailLabel>Error</DetailLabel>
-                  <div className="text-[#f44336] text-[11px] px-2 py-1.5 bg-[rgba(244,67,54,0.1)] rounded border-l-2 border-[#f44336]">
+                  <div className="text-danger text-[11px] px-2 py-1.5 bg-[rgba(244,67,54,0.1)] rounded border-l-2 border-[#f44336]">
                     {result.error}
                   </div>
                 </DetailSection>
diff --git a/src/components/tools/FileReadToolCall.tsx b/src/components/tools/FileReadToolCall.tsx
index 6601f7695..719fa9add 100644
--- a/src/components/tools/FileReadToolCall.tsx
+++ b/src/components/tools/FileReadToolCall.tsx
@@ -121,7 +121,7 @@ export const FileReadToolCall: React.FC<FileReadToolCallProps> = ({
               {result.success === false && result.error && (
                 <DetailSection>
                   <DetailLabel>Error</DetailLabel>
-                  <div className="text-[#f44336] text-[11px] px-2 py-1.5 bg-[rgba(244,67,54,0.1)] rounded border-l-2 border-[#f44336]">
+                  <div className="text-danger text-[11px] px-2 py-1.5 bg-[rgba(244,67,54,0.1)] rounded border-l-2 border-[#f44336]">
                     {result.error}
                   </div>
                 </DetailSection>
diff --git a/src/components/tools/ProposePlanToolCall.tsx b/src/components/tools/ProposePlanToolCall.tsx
index 08828db56..cec89d34c 100644
--- a/src/components/tools/ProposePlanToolCall.tsx
+++ b/src/components/tools/ProposePlanToolCall.tsx
@@ -135,7 +135,7 @@ export const ProposePlanToolCall: React.FC<ProposePlanToolCallProps> = ({
                 )}
                 <button
                   onClick={() => void handleCopy()}
-                  className="px-2 py-1 text-[10px] font-mono text-[#888] bg-transparent rounded-sm cursor-pointer transition-all duration-150 active:translate-y-px hover:text-plan-mode"
+                  className="px-2 py-1 text-[10px] font-mono text-muted bg-transparent rounded-sm cursor-pointer transition-all duration-150 active:translate-y-px hover:text-plan-mode"
                   style={{
                     border: "1px solid rgba(136, 136, 136, 0.3)",
                   }}
@@ -199,7 +199,7 @@ export const ProposePlanToolCall: React.FC<ProposePlanToolCallProps> = ({
 
             {status === "completed" && (
               <div
-                className="mt-3 pt-3 text-[11px] text-[#888] italic leading-normal"
+                className="mt-3 pt-3 text-[11px] text-muted italic leading-normal"
                 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 9674609bf..b7a558dc4 100644
--- a/src/components/tools/shared/ToolPrimitives.tsx
+++ b/src/components/tools/shared/ToolPrimitives.tsx
@@ -64,9 +64,9 @@ const getStatusColor = (status: string) => {
     case "executing":
       return "text-pending";
     case "completed":
-      return "text-[#4caf50]";
+      return "text-success";
     case "failed":
-      return "text-[#f44336]";
+      return "text-danger";
     case "interrupted":
       return "text-interrupted";
     default:
@@ -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-[#ccc] px-2 py-0.5 rounded-sm cursor-pointer text-[10px]",
+      "border border-white/20 text-foreground 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/styles/globals.css b/src/styles/globals.css
index fe0fa80ac..35e5d11d9 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -83,6 +83,24 @@
   --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-border-light: hsl(240 3% 25%);     /* #3e3e42 - lighter borders */
+  --color-border-medium: hsl(0 0% 27%);      /* #444 - medium borders */
+  --color-bg-hover: hsl(0 0% 16.5%);         /* #2a2a2b - hover states */
+  --color-bg-dark: hsl(0 0% 11.5%);          /* #1e1e1e - dark backgrounds */
+  --color-bg-darker: hsl(0 0% 8.6%);         /* #161616 - darker backgrounds */
+  --color-accent: hsl(207 100% 40%);         /* #007acc - VS Code blue */
+  --color-accent-dark: hsl(207 100% 37%);    /* #0e639c - darker accent */
+  --color-success: hsl(122 39% 49%);         /* #4caf50 - success green */
+  --color-danger: hsl(4 90% 58%);            /* #f44336 - error red */
+  --color-text-dim: hsl(0 0% 42%);           /* #666 - dimmed text */
+  --color-text-light: hsl(0 0% 83%);         /* #d4d4d4 - light text */
+  --color-text-lighter: hsl(0 0% 90%);       /* #e5e5e5 - lighter text */
+  --color-text-subdued: hsl(0 0% 60%);       /* #9a9a9a - subdued text */
+  --color-separator: hsl(0 0% 15%);          /* #252526 - separators */
+  --color-modal-bg: hsl(0 0% 18%);           /* #2d2d30 - modal backgrounds */
+  
   /* Radius */
   --radius: 0.5rem;
 }
@@ -203,8 +221,8 @@ code {
   transform: translateX(-50%);
   margin-bottom: 8px;
   padding: 6px 10px;
-  background: #2d2d30;
-  color: #cccccc;
+  background: var(--color-modal-bg);
+  color: var(--color-foreground);
   border: 1px solid #464647;
   border-radius: 4px;
   font-size: 11px;
@@ -218,7 +236,7 @@ code {
 .plan-content {
   font-size: 12px;
   line-height: 1.6;
-  color: #d4d4d4;
+  color: var(--color-text-light);
 }
 
 .plan-content h1,
@@ -324,7 +342,7 @@ code {
   border-left: 3px solid var(--color-plan-mode);
   padding-left: 12px;
   margin: 8px 0;
-  color: #a0a0a0;
+  color: var(--color-secondary);
   font-style: italic;
 }
 
@@ -337,7 +355,7 @@ code {
   margin-bottom: 3px;
   border-width: 5px;
   border-style: solid;
-  border-color: #2d2d30 transparent transparent transparent;
+  border-color: var(--color-modal-bg) transparent transparent transparent;
   z-index: 1000;
   pointer-events: none;
 }
@@ -457,7 +475,7 @@ code {
 }
 
 .markdown-content a {
-  color: #569cd6;
+  color: var(--color-accent);
   text-decoration: none;
 }
 
@@ -597,7 +615,7 @@ pre code {
   height: 4px;
   -webkit-appearance: none;
   appearance: none;
-  background: #3e3e42;
+  background: var(--color-border-light);
   outline: none;
   border-radius: 2px;
   transition: box-shadow 0.2s ease;

From 7cbe8441b094108ff6fdb964ff0f27a052e6f408 Mon Sep 17 00:00:00 2001
From: Kyle Carberry <kyle@carberry.com>
Date: Wed, 22 Oct 2025 22:47:52 -0400
Subject: [PATCH 2/2] Fix prettier formatting

---
 src/components/Context1MCheckbox.tsx                     | 4 +---
 src/components/Messages/ChatBarrier/StreamingBarrier.tsx | 4 +++-
 src/components/Modal.tsx                                 | 5 +----
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/Context1MCheckbox.tsx b/src/components/Context1MCheckbox.tsx
index b49e723b3..bf58a4f02 100644
--- a/src/components/Context1MCheckbox.tsx
+++ b/src/components/Context1MCheckbox.tsx
@@ -27,9 +27,7 @@ export const Context1MCheckbox: React.FC<Context1MCheckboxProps> = ({ modelStrin
         1M Context
       </label>
       <TooltipWrapper inline>
-        <span className="cursor-help text-muted text-[10px] leading-none flex items-center">
-          ?
-        </span>
+        <span className="cursor-help text-muted text-[10px] leading-none flex items-center">?</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/Messages/ChatBarrier/StreamingBarrier.tsx b/src/components/Messages/ChatBarrier/StreamingBarrier.tsx
index 396aab82c..743d9442c 100644
--- a/src/components/Messages/ChatBarrier/StreamingBarrier.tsx
+++ b/src/components/Messages/ChatBarrier/StreamingBarrier.tsx
@@ -23,7 +23,9 @@ export const StreamingBarrier: React.FC<StreamingBarrierProps> = ({
         {tokenCount !== undefined && (
           <span className="font-mono text-[11px] text-assistant-border select-none whitespace-nowrap">
             ~{tokenCount.toLocaleString()} tokens
-            {tps !== undefined && tps > 0 && <span className="text-text-dim ml-1">@ {tps} t/s</span>}
+            {tps !== undefined && tps > 0 && (
+              <span className="text-text-dim ml-1">@ {tps} t/s</span>
+            )}
           </span>
         )}
       </div>
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 5a79ac25f..9f3131e3a 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -152,10 +152,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-accent text-white hover:bg-accent-dark disabled:hover:bg-accent", className)}
     {...props}
   >
     {children}