diff --git a/src/components/AIView.tsx b/src/components/AIView.tsx
index 721b68704..161c87139 100644
--- a/src/components/AIView.tsx
+++ b/src/components/AIView.tsx
@@ -245,12 +245,12 @@ const AIViewInner: React.FC<AIViewProps> = ({
     return (
       <div
         className={cn(
-          "flex flex-1 flex-row bg-bg-dark text-text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+          "flex flex-1 flex-row bg-dark text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
           className
         )}
         style={{ containerType: "inline-size" }}
       >
-        <div className="flex-1 flex flex-col items-center justify-center h-full text-[#6b6b6b] text-center">
+        <div className="flex-1 flex flex-col items-center justify-center h-full text-placeholder text-center">
           <h3 className="m-0 mb-2.5 text-base font-medium">Loading workspace...</h3>
         </div>
       </div>
@@ -286,12 +286,12 @@ const AIViewInner: React.FC<AIViewProps> = ({
     return (
       <div
         className={cn(
-          "flex flex-1 flex-row bg-bg-dark text-text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+          "flex flex-1 flex-row bg-dark text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
           className
         )}
         style={{ containerType: "inline-size" }}
       >
-        <div className="flex-1 flex flex-col items-center justify-center h-full text-[#6b6b6b] text-center">
+        <div className="flex-1 flex flex-col items-center justify-center h-full text-placeholder text-center">
           <h3 className="m-0 mb-2.5 text-base font-medium">Loading workspace...</h3>
         </div>
       </div>
@@ -302,12 +302,12 @@ const AIViewInner: React.FC<AIViewProps> = ({
     return (
       <div
         className={cn(
-          "flex flex-1 flex-row bg-bg-dark text-text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+          "flex flex-1 flex-row bg-dark text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
           className
         )}
         style={{ containerType: "inline-size" }}
       >
-        <div className="flex-1 flex flex-col items-center justify-center h-full text-[#6b6b6b] text-center">
+        <div className="flex-1 flex flex-col items-center justify-center h-full text-placeholder text-center">
           <h3 className="m-0 mb-2.5 text-base font-medium">No Workspace Selected</h3>
           <p className="m-0 text-[13px]">
             Select a workspace from the sidebar to view and interact with Claude
@@ -320,7 +320,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
   return (
     <div
       className={cn(
-        "flex flex-1 flex-row bg-bg-dark text-text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+        "flex flex-1 flex-row bg-dark text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
         className
       )}
       style={{ containerType: "inline-size" }}
@@ -378,7 +378,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
             className="h-full overflow-y-auto p-[15px] whitespace-pre-wrap break-words leading-[1.5]"
           >
             {mergedMessages.length === 0 ? (
-              <div className="flex-1 flex flex-col items-center justify-center h-full text-[#6b6b6b] text-center [&_h3]:m-0 [&_h3]:mb-2.5 [&_h3]:text-base [&_h3]:font-medium [&_p]:m-0 [&_p]:text-[13px]">
+              <div className="flex-1 flex flex-col items-center justify-center h-full text-placeholder text-center [&_h3]:m-0 [&_h3]:mb-2.5 [&_h3]:text-base [&_h3]:font-medium [&_p]:m-0 [&_p]:text-[13px]">
                 <h3>No Messages Yet</h3>
                 <p>Send a message below to begin</p>
               </div>
diff --git a/src/components/ChatInputToast.tsx b/src/components/ChatInputToast.tsx
index e7d53fbea..5960311f8 100644
--- a/src/components/ChatInputToast.tsx
+++ b/src/components/ChatInputToast.tsx
@@ -3,8 +3,8 @@ import React, { useEffect, useCallback } from "react";
 import { cn } from "@/lib/utils";
 
 const toastTypeStyles: Record<"success" | "error", string> = {
-  success: "bg-[#0e639c20] border border-[#0e639c] text-[#3794ff]",
-  error: "bg-[#f1483620] border border-[#f14836] text-[#f14836]",
+  success: "bg-toast-success-bg border border-accent-dark text-toast-success-text",
+  error: "bg-toast-error-bg border border-toast-error-border text-toast-error-text",
 };
 
 export interface Toast {
@@ -22,7 +22,7 @@ interface ChatInputToastProps {
 }
 
 export const SolutionLabel: React.FC<{ children: ReactNode }> = ({ children }) => (
-  <div className="text-[#808080] text-[10px] mb-1 uppercase">{children}</div>
+  <div className="text-muted-light text-[10px] mb-1 uppercase">{children}</div>
 );
 
 export const ChatInputToast: React.FC<ChatInputToastProps> = ({ toast, onDismiss }) => {
@@ -65,15 +65,15 @@ export const ChatInputToast: React.FC<ChatInputToastProps> = ({ toast, onDismiss
         <div
           role="alert"
           aria-live="assertive"
-          className="bg-[#2d1f1f] border border-[#5a2c2c] rounded px-3 py-2.5 text-xs text-[#f48771] animate-[toastSlideIn_0.2s_ease-out] shadow-[0_4px_12px_rgba(0,0,0,0.3)]"
+          className="bg-toast-fatal-bg border border-toast-fatal-border rounded px-3 py-2.5 text-xs text-danger-soft animate-[toastSlideIn_0.2s_ease-out] shadow-[0_4px_12px_rgba(0,0,0,0.3)]"
         >
           <div className="flex items-start gap-1.5">
             <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-text-light leading-[1.4] mt-1.5">{toast.message}</div>
+              <div className="text-light leading-[1.4] mt-1.5">{toast.message}</div>
               {toast.solution && (
-                <div className="bg-bg-dark rounded px-2 py-1.5 mt-2 font-monospace text-[11px] text-[#9cdcfe]">
+                <div className="bg-dark rounded px-2 py-1.5 mt-2 font-monospace text-[11px] text-code-type">
                   {toast.solution}
                 </div>
               )}
diff --git a/src/components/CommandPalette.stories.tsx b/src/components/CommandPalette.stories.tsx
index 33d45d8d8..a72b30186 100644
--- a/src/components/CommandPalette.stories.tsx
+++ b/src/components/CommandPalette.stories.tsx
@@ -132,7 +132,7 @@ const PaletteDemo: React.FC<{ autoOpen?: boolean }> = ({ autoOpen = true }) => {
     <>
       <button
         onClick={() => open()}
-        className="py-2 px-4 bg-[#0e639c] text-white border-none rounded cursor-pointer font-primary text-[13px] self-start hover:bg-[#1177bb] active:bg-[#0d5689]"
+        className="py-2 px-4 bg-accent-dark text-white border-none rounded cursor-pointer font-primary text-[13px] self-start hover:bg-accent-hover active:bg-accent-dark"
       >
         Open Command Palette (⌘⇧P)
       </button>
@@ -174,8 +174,8 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   render: () => (
-    <div className="min-h-[600px] bg-[#1e1e1e] p-5 flex flex-col gap-5">
-      <div className="p-4 bg-[#252526] border border-[#3e3e42] rounded text-[#cccccc] font-primary text-[13px] leading-[1.6] [&_kbd]:py-0.5 [&_kbd]:px-1.5 [&_kbd]:bg-[#1e1e1e] [&_kbd]:border [&_kbd]:border-[#3e3e42] [&_kbd]:rounded-[3px] [&_kbd]:font-monospace [&_kbd]:text-[11px]">
+    <div className="min-h-[600px] bg-dark p-5 flex flex-col gap-5">
+      <div className="p-4 bg-separator border border-border-light rounded text-bright font-primary text-[13px] leading-[1.6] [&_kbd]:py-0.5 [&_kbd]:px-1.5 [&_kbd]:bg-dark [&_kbd]:border [&_kbd]:border-border-light [&_kbd]:rounded-[3px] [&_kbd]:font-monospace [&_kbd]:text-[11px]">
         <strong>Command Palette</strong>
         <br />
         <br />
diff --git a/src/components/CommandPalette.tsx b/src/components/CommandPalette.tsx
index 75514c051..658db4715 100644
--- a/src/components/CommandPalette.tsx
+++ b/src/components/CommandPalette.tsx
@@ -364,12 +364,12 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
       }}
     >
       <Command
-        className="w-[min(720px,92vw)] bg-[#1f1f1f] border border-[#333] rounded-lg shadow-[0_10px_40px_rgba(0,0,0,0.4)] text-[#e5e5e5] font-primary overflow-hidden"
+        className="w-[min(720px,92vw)] bg-separator border border-border rounded-lg shadow-[0_10px_40px_rgba(0,0,0,0.4)] text-lighter font-primary overflow-hidden"
         onMouseDown={(e: React.MouseEvent) => e.stopPropagation()}
         shouldFilter={shouldUseCmdkFilter}
       >
         <Command.Input
-          className="w-full py-3 px-3.5 bg-[#161616] text-[#e5e5e5] border-none outline-none text-sm border-b border-[#2a2a2a]"
+          className="w-full py-3 px-3.5 bg-darker text-lighter border-none outline-none text-sm border-b border-hover"
           value={query}
           onValueChange={handleQueryChange}
           placeholder={
@@ -405,12 +405,12 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
             <Command.Group
               key={group.name}
               heading={group.name}
-              className="[&[cmdk-group]]:py-2 [&[cmdk-group]]:px-1.5 [&[cmdk-group-heading]]:py-1 [&[cmdk-group-heading]]:px-2.5 [&[cmdk-group-heading]]:text-[#9a9a9a] [&[cmdk-group-heading]]:text-[11px] [&[cmdk-group-heading]]:uppercase [&[cmdk-group-heading]]:tracking-[0.08em]"
+              className="[&[cmdk-group]]:py-2 [&[cmdk-group]]:px-1.5 [&[cmdk-group-heading]]:py-1 [&[cmdk-group-heading]]:px-2.5 [&[cmdk-group-heading]]:text-subdued [&[cmdk-group-heading]]:text-[11px] [&[cmdk-group-heading]]:uppercase [&[cmdk-group-heading]]:tracking-[0.08em]"
             >
               {group.items.map((item) => (
                 <Command.Item
                   key={item.id}
-                  className="grid grid-cols-[1fr_auto] items-center gap-2 py-2 px-3 text-[13px] cursor-pointer rounded-md my-0.5 mx-1 hover:bg-[#2a2a2a] aria-selected:bg-[#2f2f2f]"
+                  className="grid grid-cols-[1fr_auto] items-center gap-2 py-2 px-3 text-[13px] cursor-pointer rounded-md my-0.5 mx-1 hover:bg-hover aria-selected:bg-hover"
                   onSelect={() => {
                     if ("prompt" in item && item.prompt) {
                       addRecent(item.id);
@@ -435,12 +435,12 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
                     {"subtitle" in item && item.subtitle && (
                       <>
                         <br />
-                        <span className="text-[#9a9a9a] text-xs">{item.subtitle}</span>
+                        <span className="text-subdued text-xs">{item.subtitle}</span>
                       </>
                     )}
                   </div>
                   {"shortcutHint" in item && item.shortcutHint && (
-                    <span className="text-[#9a9a9a] text-[11px] font-monospace">
+                    <span className="text-subdued text-[11px] font-monospace">
                       {item.shortcutHint}
                     </span>
                   )}
@@ -449,7 +449,7 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
             </Command.Group>
           ))}
           {!hasAnyItems && (
-            <div className="p-4 text-[#7a7a7a] text-[13px]">{emptyText ?? "No results"}</div>
+            <div className="p-4 text-gray text-[13px]">{emptyText ?? "No results"}</div>
           )}
         </Command.List>
       </Command>
diff --git a/src/components/CommandSuggestions.tsx b/src/components/CommandSuggestions.tsx
index f2f985beb..a6d7696b3 100644
--- a/src/components/CommandSuggestions.tsx
+++ b/src/components/CommandSuggestions.tsx
@@ -104,19 +104,19 @@ export const CommandSuggestions: React.FC<CommandSuggestionsProps> = ({
           role="option"
           aria-selected={index === selectedIndex}
           className={cn(
-            "px-2.5 py-1.5 cursor-pointer transition-colors duration-150 flex items-center justify-between gap-3 hover:bg-[#094771]",
-            index === selectedIndex ? "bg-[#094771]" : "bg-transparent"
+            "px-2.5 py-1.5 cursor-pointer transition-colors duration-150 flex items-center justify-between gap-3 hover:bg-accent-darker",
+            index === selectedIndex ? "bg-accent-darker" : "bg-transparent"
           )}
         >
-          <div className="text-[#569cd6] font-monospace text-xs flex-shrink-0">
+          <div className="text-accent font-monospace text-xs flex-shrink-0">
             {suggestion.display}
           </div>
-          <div className="text-[#969696] text-[11px] text-right overflow-hidden text-ellipsis whitespace-nowrap">
+          <div className="text-medium text-[11px] text-right overflow-hidden text-ellipsis whitespace-nowrap">
             {suggestion.description}
           </div>
         </div>
       ))}
-      <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">
+      <div className="px-2.5 py-1 border-t border-border-light bg-dark text-placeholder text-[10px] text-center flex-shrink-0 [&_span]:text-medium [&_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 bf58a4f02..246a458ac 100644
--- a/src/components/Context1MCheckbox.tsx
+++ b/src/components/Context1MCheckbox.tsx
@@ -22,7 +22,7 @@ export const Context1MCheckbox: React.FC<Context1MCheckboxProps> = ({ modelStrin
           type="checkbox"
           checked={use1M}
           onChange={(e) => setUse1M(e.target.checked)}
-          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"
+          className="cursor-pointer w-[11px] h-[11px] m-0 appearance-none border border-border-light rounded-sm 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>
diff --git a/src/components/DirectorySelectModal.tsx b/src/components/DirectorySelectModal.tsx
index 4f227f229..d65657e91 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-modal-bg border border-[#444] rounded text-white text-sm font-mono mb-5 focus:outline-none focus:border-accent placeholder:text-muted"
+        className="w-full px-3 py-2 bg-modal-bg border border-border-medium 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/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
index 8d3f18725..fcce56530 100644
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@@ -42,7 +42,7 @@ export class ErrorBoundary extends Component<Props, State> {
       }
 
       return (
-        <div className="p-5 bg-[#3c1f1f] border border-[#f48771] rounded text-[#f48771] m-5">
+        <div className="p-5 bg-error-bg-dark border border-danger-soft rounded text-danger-soft m-5">
           <h3 className="m-0 mb-2.5 text-base">
             Something went wrong{this.props.workspaceInfo && ` in ${this.props.workspaceInfo}`}
           </h3>
@@ -59,7 +59,7 @@ export class ErrorBoundary extends Component<Props, State> {
           )}
           <button
             onClick={this.handleReset}
-            className="py-2 px-4 bg-[#f48771] text-white border-none rounded-sm cursor-pointer text-sm hover:bg-[#ff9980]"
+            className="py-2 px-4 bg-danger-soft text-white border-none rounded-sm cursor-pointer text-sm hover:bg-info-light"
           >
             Reset
           </button>
diff --git a/src/components/GitStatusIndicatorView.tsx b/src/components/GitStatusIndicatorView.tsx
index 367278e98..bfcbd743b 100644
--- a/src/components/GitStatusIndicatorView.tsx
+++ b/src/components/GitStatusIndicatorView.tsx
@@ -62,7 +62,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
   if (!gitStatus) {
     return (
       <span
-        className="text-[#569cd6] text-[11px] flex items-center gap-1 mr-1.5 font-mono relative"
+        className="text-accent text-[11px] flex items-center gap-1 mr-1.5 font-mono relative"
         aria-hidden="true"
       />
     );
@@ -72,7 +72,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
   if (gitStatus.ahead === 0 && gitStatus.behind === 0 && !gitStatus.dirty) {
     return (
       <span
-        className="text-[#569cd6] text-[11px] flex items-center gap-1 mr-1.5 font-mono relative"
+        className="text-accent text-[11px] flex items-center gap-1 mr-1.5 font-mono relative"
         aria-hidden="true"
       />
     );
@@ -81,7 +81,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
   // Render colored indicator characters
   const renderIndicators = (indicators: string) => {
     return (
-      <span className="text-[#6b6b6b] whitespace-pre flex-shrink-0 font-mono mr-2">
+      <span className="text-placeholder whitespace-pre flex-shrink-0 font-mono mr-2">
         {Array.from(indicators).map((char, index) => (
           <span key={index} style={{ color: getIndicatorColor(index) }}>
             {char}
@@ -98,10 +98,10 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
     }
 
     return (
-      <div className="flex flex-col gap-0.5 mb-2 pb-2 border-b border-[#464647]">
+      <div className="flex flex-col gap-0.5 mb-2 pb-2 border-b border-separator-light">
         {branchHeaders.map((header, index) => (
           <div key={index} className="flex gap-2 font-mono leading-snug">
-            <span className="text-[#6b6b6b] whitespace-pre flex-shrink-0 font-mono mr-2">
+            <span className="text-placeholder whitespace-pre flex-shrink-0 font-mono mr-2">
               {/* Create spacing to align with column */}
               {Array.from({ length: header.columnIndex }).map((_, i) => (
                 <span key={i} style={{ color: getIndicatorColor(i) }}>
@@ -128,7 +128,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
     const isTruncated = dirtyFiles.length > LIMIT;
 
     return (
-      <div className="mb-2 pb-2 border-b border-[#464647]">
+      <div className="mb-2 pb-2 border-b border-separator-light">
         <div className="text-git-dirty font-semibold mb-1 font-mono">Uncommitted changes:</div>
         <div className="flex flex-col gap-px">
           {displayFiles.map((line, index) => (
@@ -141,7 +141,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
           ))}
         </div>
         {isTruncated && (
-          <div className="text-[#808080] italic mt-1 text-[10px]">
+          <div className="text-muted-light italic mt-1 text-[10px]">
             (showing {LIMIT} of {dirtyFiles.length} files)
           </div>
         )}
@@ -172,8 +172,8 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
             <div key={`${commit.hash}-${index}`} className="flex flex-col gap-0.5">
               <div className="flex gap-2 font-mono leading-snug">
                 {renderIndicators(commit.indicators)}
-                <span className="text-[#569cd6] flex-shrink-0 select-all">{commit.hash}</span>
-                <span className="text-[#808080] flex-shrink-0">{commit.date}</span>
+                <span className="text-accent flex-shrink-0 select-all">{commit.hash}</span>
+                <span className="text-muted-light flex-shrink-0">{commit.date}</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-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",
+        "fixed z-[10000] bg-modal-bg text-foreground border border-separator-light rounded px-3 py-2 text-[11px] font-mono whitespace-pre max-w-[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={{
@@ -208,7 +208,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
         ref={onContainerRef}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
-        className="text-[#569cd6] text-[11px] flex items-center gap-1 mr-1.5 font-mono relative"
+        className="text-accent text-[11px] flex items-center gap-1 mr-1.5 font-mono relative"
       >
         {gitStatus.ahead > 0 && (
           <span className="flex items-center font-normal">↑{gitStatus.ahead}</span>
diff --git a/src/components/ImageAttachments.tsx b/src/components/ImageAttachments.tsx
index 82a55a060..8f4dff0cd 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-border-light bg-bg-dark"
+          className="relative w-20 h-20 rounded overflow-hidden border border-border-light 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 01f87b570..f0e219896 100644
--- a/src/components/KebabMenu.tsx
+++ b/src/components/KebabMenu.tsx
@@ -98,7 +98,7 @@ export const KebabMenu: React.FC<KebabMenuProps> = ({ items, className }) => {
         createPortal(
           <div
             ref={menuRef}
-            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"
+            className="fixed 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`,
@@ -110,13 +110,13 @@ export const KebabMenu: React.FC<KebabMenuProps> = ({ items, className }) => {
                 onClick={() => handleItemClick(item)}
                 title={item.tooltip}
                 className={cn(
-                  "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",
+                  "w-full border-none border-b border-modal-bg text-xs py-2 px-3 text-left transition-all duration-150 font-primary flex items-center gap-2",
                   "last:border-b-0",
                   item.disabled
-                    ? "bg-bg-dark text-[#808080] cursor-not-allowed opacity-50 hover:bg-bg-dark hover:text-[#808080]"
+                    ? "bg-dark text-muted-light cursor-not-allowed opacity-50 hover:bg-dark hover:text-muted-light"
                     : item.active
                       ? "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"
+                      : "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 3a1545898..53c7dbfb0 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-separator border border-[#3c3c3c] rounded-md cursor-pointer",
+            "w-10 h-10 bg-separator border border-border-light rounded-md cursor-pointer",
             "items-center justify-center text-foreground text-xl transition-all duration-200",
             "shadow-[0_2px_4px_rgba(0,0,0,0.3)]",
-            "hover:bg-bg-hover hover:border-[#4c4c4c]",
+            "hover:bg-hover hover:border-bg-light",
             "active:scale-95"
           )}
         >
@@ -69,7 +69,7 @@ export function LeftSidebar(props: LeftSidebarProps) {
       {/* Sidebar */}
       <div
         className={cn(
-          "h-screen bg-separator border-r border-[#1e1e1e] flex flex-col shrink-0",
+          "h-screen bg-separator border-r border-dark 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/RetryBarrier.tsx b/src/components/Messages/ChatBarrier/RetryBarrier.tsx
index c9f4d199e..81c029119 100644
--- a/src/components/Messages/ChatBarrier/RetryBarrier.tsx
+++ b/src/components/Messages/ChatBarrier/RetryBarrier.tsx
@@ -116,7 +116,7 @@ export const RetryBarrier: React.FC<RetryBarrierProps> = ({
           </div>
         </div>
         <button
-          className="bg-transparent border border-warning rounded px-4 py-2 font-primary text-xs font-semibold text-warning cursor-pointer transition-all duration-200 whitespace-nowrap hover:bg-[rgba(255,165,0,0.1)] hover:-translate-y-px active:translate-y-0 disabled:opacity-50 disabled:cursor-not-allowed"
+          className="bg-transparent border border-warning rounded px-4 py-2 font-primary text-xs font-semibold text-warning cursor-pointer transition-all duration-200 whitespace-nowrap hover:bg-warning-overlay hover:-translate-y-px active:translate-y-0 disabled:opacity-50 disabled:cursor-not-allowed"
           onClick={handleStopAutoRetry}
         >
           Stop Auto-Retry
diff --git a/src/components/Messages/HistoryHiddenMessage.tsx b/src/components/Messages/HistoryHiddenMessage.tsx
index 109ddb767..d0124a1f7 100644
--- a/src/components/Messages/HistoryHiddenMessage.tsx
+++ b/src/components/Messages/HistoryHiddenMessage.tsx
@@ -14,7 +14,7 @@ export const HistoryHiddenMessage: React.FC<HistoryHiddenMessageProps> = ({
   return (
     <div
       className={cn(
-        "my-5 py-3 px-[15px] bg-white/[0.03] border-l-[3px] border-[#569cd6] rounded-sm",
+        "my-5 py-3 px-[15px] bg-white/[0.03] border-l-[3px] border-accent rounded-sm",
         "text-muted text-xs font-normal text-center font-sans",
         className
       )}
diff --git a/src/components/Messages/MessageWindow.tsx b/src/components/Messages/MessageWindow.tsx
index 2f15a4547..034c4e97c 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-text-light bg-black/30 p-2 rounded-sm overflow-x-auto">
+          <pre className="m-0 font-mono text-[11px] leading-snug whitespace-pre-wrap 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 82b8a8140..c6c370ee6 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-text-light",
+        isError ? "text-danger-soft" : "text-light",
         className
       )}
     >
diff --git a/src/components/Messages/UserMessage.tsx b/src/components/Messages/UserMessage.tsx
index 193b81393..84de5f70e 100644
--- a/src/components/Messages/UserMessage.tsx
+++ b/src/components/Messages/UserMessage.tsx
@@ -121,7 +121,7 @@ export const UserMessage: React.FC<UserMessageProps> = ({
       className={className}
     >
       {content && (
-        <pre className="m-0 font-mono text-xs leading-4 whitespace-pre-wrap break-words text-[#999999] opacity-90">
+        <pre className="m-0 font-mono text-xs leading-4 whitespace-pre-wrap break-words text-subtle opacity-90">
           {content}
         </pre>
       )}
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 9f3131e3a..c3307ee93 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-bg-dark rounded-lg p-6 w-[90%] flex flex-col shadow-lg border border-[#333]",
+      "bg-dark rounded-lg p-6 w-[90%] flex flex-col shadow-lg border border-border",
       "[&_h2]:mt-0 [&_h2]:mb-2 [&_h2]:text-white",
       className
     )}
@@ -57,9 +57,9 @@ export const ModalInfo: React.FC<{
   <div
     id={id}
     className={cn(
-      "bg-modal-bg border border-[#444] rounded p-3 mb-5 text-[13px]",
+      "bg-modal-bg border border-border-medium rounded p-3 mb-5 text-[13px]",
       "[&_p]:m-0 [&_p]:mb-2 [&_p]:text-muted [&_p:last-child]:mb-0",
-      "[&_code]:text-[#569cd6] [&_code]:font-mono",
+      "[&_code]:text-accent [&_code]:font-mono",
       className
     )}
   >
@@ -143,7 +143,10 @@ export const Button: React.FC<ButtonProps> = ({ children, className, ...props })
 
 export const CancelButton: React.FC<ButtonProps> = ({ children, className, ...props }) => (
   <Button
-    className={cn("bg-[#444] text-foreground hover:bg-[#555] disabled:hover:bg-[#444]", className)}
+    className={cn(
+      "bg-border-medium text-foreground hover:bg-border-darker disabled:hover:bg-border-medium",
+      className
+    )}
     {...props}
   >
     {children}
diff --git a/src/components/ModelSelector.tsx b/src/components/ModelSelector.tsx
index 0a877d483..519321ffe 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-bg-hover"
+            className="font-mono text-[10px] text-muted-light 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-hover"
             onClick={handleClick}
           >
             {value}
@@ -203,9 +203,11 @@ export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
             onChange={handleInputChange}
             onKeyDown={handleKeyDown}
             placeholder="provider:model-name"
-            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"
+            className="text-[10px] text-light 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>}
+          {error && (
+            <div className="text-[9px] text-danger-soft font-monospace mt-0.5">{error}</div>
+          )}
         </div>
         {showDropdown && filteredModels.length > 0 && (
           <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">
@@ -217,8 +219,8 @@ export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
                   "text-[11px] font-monospace py-1.5 px-2.5 cursor-pointer transition-colors duration-100",
                   "first:rounded-t last:rounded-b",
                   index === highlightedIndex
-                    ? "text-white bg-bg-hover"
-                    : "text-text-light bg-transparent hover:bg-bg-hover hover:text-white"
+                    ? "text-white bg-hover"
+                    : "text-light bg-transparent hover:bg-hover hover:text-white"
                 )}
                 onClick={() => handleSelectModel(model)}
               >
diff --git a/src/components/NewWorkspaceModal.tsx b/src/components/NewWorkspaceModal.tsx
index d2313fce6..6b116b4d6 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-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">
+        <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-border-medium [&_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-border-medium [&_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">
@@ -134,10 +134,10 @@ const NewWorkspaceModal: React.FC<NewWorkspaceModalProps> = ({
             required
             aria-required="true"
           />
-          {error && <div className="text-[#ff5555] text-[13px] mt-1.5">{error}</div>}
+          {error && <div className="text-danger-light text-[13px] mt-1.5">{error}</div>}
         </div>
 
-        <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">
+        <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-border-medium [&_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-border-medium [&_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
@@ -167,7 +167,7 @@ const NewWorkspaceModal: React.FC<NewWorkspaceModalProps> = ({
             />
           )}
           {!hasBranches && (
-            <div className="text-[#ff5555] text-[13px] mt-1.5">
+            <div className="text-danger-light text-[13px] mt-1.5">
               No branches were detected automatically. Enter the trunk branch manually.
             </div>
           )}
@@ -183,7 +183,7 @@ const NewWorkspaceModal: React.FC<NewWorkspaceModalProps> = ({
         {branchName.trim() && (
           <div>
             <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">
+            <div className="mt-5 p-3 bg-dark border border-border-light rounded font-mono text-[13px] 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 383ef65b5..b4a7102c8 100644
--- a/src/components/ProjectSidebar.tsx
+++ b/src/components/ProjectSidebar.tsx
@@ -81,8 +81,8 @@ const DraggableProjectItemBase: React.FC<DraggableProjectItemProps> = ({
         "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-accent/[0.08]",
-        selected && "bg-bg-hover border-l-accent",
-        "hover:bg-bg-hover hover:[&_button]:opacity-100 hover:[&_[data-drag-handle]]:opacity-100"
+        selected && "bg-hover border-l-accent",
+        "hover:bg-hover hover:[&_button]:opacity-100 hover:[&_[data-drag-handle]]:opacity-100"
       )}
       {...rest}
     >
@@ -136,14 +136,14 @@ 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-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]">
+        <div className="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-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">
+            <div className="text-muted-dark text-[11px] mt-0.5 whitespace-nowrap overflow-hidden text-ellipsis font-monospace">
               {abbrevPath}
             </div>
           </div>
@@ -422,7 +422,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
         >
           {!collapsed && (
             <>
-              <div className="flex justify-between items-center p-4 border-b border-b-bg-dark">
+              <div className="flex justify-between items-center p-4 border-b border-dark">
                 <h2 className="m-0 text-[13px] font-semibold text-foreground uppercase tracking-[0.8px]">
                   Projects
                 </h2>
@@ -430,7 +430,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                   <button
                     onClick={onAddProject}
                     aria-label="Add project"
-                    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]"
+                    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-hover hover:border-border-light"
                   >
                     +
                   </button>
@@ -461,7 +461,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                     const isExpanded = expandedProjects.has(projectPath);
 
                     return (
-                      <div key={projectPath} className="border-b border-bg-hover">
+                      <div key={projectPath} className="border-b border-hover">
                         <DraggableProjectItem
                           projectPath={projectPath}
                           onReorder={handleReorder}
@@ -499,7 +499,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                               {projectName}
                             </div>
                             <TooltipWrapper inline>
-                              <div className="text-[#6e6e6e] text-[11px] mt-px whitespace-nowrap overflow-hidden text-ellipsis font-monospace">
+                              <div className="text-muted-dark text-[11px] mt-px whitespace-nowrap overflow-hidden text-ellipsis font-monospace">
                                 {abbreviatePath(projectPath)}
                               </div>
                               <Tooltip className="tooltip" align="left">
@@ -515,7 +515,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                               }}
                               aria-label={`Manage secrets for ${projectName}`}
                               data-project-path={projectPath}
-                              className="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"
+                              className="w-5 h-5 bg-transparent text-muted-dark 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-accent hover:bg-accent/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-[#ff5555]/10"
+                              className="w-5 h-5 bg-transparent text-muted-dark border-none rounded-[3px] cursor-pointer text-base flex items-center justify-center transition-all duration-200 opacity-0 flex-shrink-0 hover:text-danger-light hover:bg-danger-light/10"
                             >
                               ×
                             </button>
@@ -543,13 +543,13 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                         </DraggableProjectItem>
 
                         {isExpanded && (
-                          <div id={workspaceListId} className="bg-[#1a1a1a]">
-                            <div className="py-2 px-3 pl-[22px] border-b border-bg-hover">
+                          <div id={workspaceListId} className="bg-separator">
+                            <div className="py-2 px-3 pl-[22px] border-b border-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-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"
+                                className="w-full py-1.5 px-3 bg-transparent text-muted border border-dashed border-border-medium rounded cursor-pointer text-[13px] transition-all duration-200 text-left hover:bg-hover hover:border-border-darker hover:text-foreground"
                               >
                                 + New Workspace
                                 {selectedWorkspace?.projectPath === projectPath &&
@@ -592,7 +592,7 @@ 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-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]"
+                                        className="w-full py-2 px-3 pl-[22px] bg-transparent text-muted border-none border-t border-hover cursor-pointer text-xs transition-all duration-150 flex items-center justify-between font-medium hover:bg-white/[0.03] hover:text-label [&:hover_.arrow]:text-label"
                                       >
                                         <div className="flex items-center gap-1.5">
                                           <span>Older than {formatOldWorkspaceThreshold()}</span>
@@ -629,7 +629,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
           <TooltipWrapper inline>
             <button
               onClick={onToggleCollapsed}
-              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"
+              className="w-full h-9 bg-transparent text-muted border-none border-t border-dark cursor-pointer text-sm flex items-center justify-center p-0 transition-all duration-200 mt-auto hover:bg-hover hover:text-foreground"
             >
               {collapsed ? "»" : "«"}
             </button>
diff --git a/src/components/RightSidebar.tsx b/src/components/RightSidebar.tsx
index e98b713e4..eba2b216d 100644
--- a/src/components/RightSidebar.tsx
+++ b/src/components/RightSidebar.tsx
@@ -211,7 +211,7 @@ 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-accent",
+              "bg-border-light cursor-col-resize hover:bg-accent",
               isResizing && "bg-accent"
             )}
             onMouseDown={(e) => onStartResize(e as unknown as React.MouseEvent)}
diff --git a/src/components/RightSidebar/CodeReview/FileTree.tsx b/src/components/RightSidebar/CodeReview/FileTree.tsx
index 3e3b87d6c..c62c483fa 100644
--- a/src/components/RightSidebar/CodeReview/FileTree.tsx
+++ b/src/components/RightSidebar/CodeReview/FileTree.tsx
@@ -127,7 +127,7 @@ const TreeNodeContent: React.FC<{
       <div
         className={cn(
           "py-1 px-2 cursor-pointer select-none flex items-center gap-2 rounded my-0.5",
-          isSelected ? "bg-[rgba(100,150,255,0.2)]" : "bg-transparent hover:bg-white/5"
+          isSelected ? "bg-code-keyword-overlay" : "bg-transparent hover:bg-white/5"
         )}
         style={{ paddingLeft: `${depth * 16 + 8}px` }}
         onClick={handleClick}
@@ -163,13 +163,13 @@ const TreeNodeContent: React.FC<{
                     (isOpen ? (
                       <span>+{node.totalStats.additions}</span>
                     ) : (
-                      <span className="text-[#4ade80]">+{node.totalStats.additions}</span>
+                      <span className="text-success-light">+{node.totalStats.additions}</span>
                     ))}
                   {node.totalStats.deletions > 0 &&
                     (isOpen ? (
                       <span>-{node.totalStats.deletions}</span>
                     ) : (
-                      <span className="text-[#f87171]">-{node.totalStats.deletions}</span>
+                      <span className="text-warning-light">-{node.totalStats.deletions}</span>
                     ))}
                 </span>
               )}
@@ -191,10 +191,10 @@ const TreeNodeContent: React.FC<{
             {node.stats && (
               <span className="flex gap-2 text-[11px]">
                 {node.stats.additions > 0 && (
-                  <span className="text-[#4ade80]">+{node.stats.additions}</span>
+                  <span className="text-success-light">+{node.stats.additions}</span>
                 )}
                 {node.stats.deletions > 0 && (
-                  <span className="text-[#f87171]">-{node.stats.deletions}</span>
+                  <span className="text-warning-light">-{node.stats.deletions}</span>
                 )}
               </span>
             )}
diff --git a/src/components/RightSidebar/CodeReview/HunkViewer.tsx b/src/components/RightSidebar/CodeReview/HunkViewer.tsx
index 8fc77a72d..9e20506a5 100644
--- a/src/components/RightSidebar/CodeReview/HunkViewer.tsx
+++ b/src/components/RightSidebar/CodeReview/HunkViewer.tsx
@@ -138,11 +138,10 @@ export const HunkViewer = React.memo<HunkViewerProps>(
     return (
       <div
         className={cn(
-          "bg-bg-dark border rounded mb-3 overflow-hidden cursor-pointer transition-all duration-200",
+          "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-border-light",
-          isSelected &&
-            "border-[var(--color-review-accent)] shadow-[0_0_0_1px_var(--color-review-accent)]"
+          isRead ? "border-read" : "border-border-light",
+          isSelected && "border-review-accent shadow-[0_0_0_1px_var(--color-review-accent)]"
         )}
         onClick={onClick}
         role="button"
@@ -153,7 +152,7 @@ export const HunkViewer = React.memo<HunkViewerProps>(
           {isRead && (
             <TooltipWrapper inline>
               <span
-                className="inline-flex items-center text-[var(--color-read)] text-sm mr-1"
+                className="inline-flex items-center text-read text-sm mr-1"
                 aria-label="Marked as read"
               >
                 ✓
@@ -170,8 +169,8 @@ export const HunkViewer = React.memo<HunkViewerProps>(
           <div className="flex items-center gap-2 text-[11px] whitespace-nowrap flex-shrink-0">
             {!isPureRename && (
               <span className="flex gap-2 text-[11px]">
-                {additions > 0 && <span className="text-[#4ade80]">+{additions}</span>}
-                {deletions > 0 && <span className="text-[#f87171]">-{deletions}</span>}
+                {additions > 0 && <span className="text-success-light">+{additions}</span>}
+                {deletions > 0 && <span className="text-warning-light">-{deletions}</span>}
               </span>
             )}
             <span className="text-muted">
@@ -180,7 +179,7 @@ export const HunkViewer = React.memo<HunkViewerProps>(
             {onToggleRead && (
               <TooltipWrapper inline>
                 <button
-                  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"
+                  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-read hover:text-read active:scale-95"
                   data-hunk-id={hunkId}
                   onClick={handleToggleRead}
                   aria-label={`Mark as read (${formatKeybind(KEYBINDS.TOGGLE_HUNK_READ)})`}
@@ -196,7 +195,7 @@ export const HunkViewer = React.memo<HunkViewerProps>(
         </div>
 
         {isPureRename ? (
-          <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]">
+          <div className="p-3 text-muted text-[11px] flex items-center gap-2 bg-code-keyword-overlay-light before:content-['→'] before:text-sm before:text-code-keyword">
             Renamed from <code>{hunk.oldPath}</code>
           </div>
         ) : isExpanded ? (
diff --git a/src/components/RightSidebar/CodeReview/ReviewControls.tsx b/src/components/RightSidebar/CodeReview/ReviewControls.tsx
index 73b35ffcb..147d95d6d 100644
--- a/src/components/RightSidebar/CodeReview/ReviewControls.tsx
+++ b/src/components/RightSidebar/CodeReview/ReviewControls.tsx
@@ -93,7 +93,7 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
         onBlur={handleBaseBlur}
         onKeyDown={handleBaseKeyDown}
         placeholder="HEAD, main, etc."
-        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"
+        className="py-1 px-2 bg-dark text-foreground border border-border-medium 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,7 +109,7 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
       {showSetDefault && (
         <button
           onClick={handleSetDefault}
-          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"
+          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-white-overlay-light hover:text-foreground"
         >
           Set Default
         </button>
@@ -136,7 +136,7 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
         onRefresh={onRefresh}
       />
 
-      <div className="w-px h-4 bg-[#3e3e42]" />
+      <div className="w-px h-4 bg-border-light" />
 
       <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
diff --git a/src/components/RightSidebar/CodeReview/ReviewPanel.tsx b/src/components/RightSidebar/CodeReview/ReviewPanel.tsx
index 88d398ec2..850e1a01f 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-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)]"
+      className="flex flex-col h-full min-h-0 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,7 +547,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
       />
 
       {error ? (
-        <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">
+        <div className="p-6 text-danger-soft bg-danger-soft/10 border border-danger-soft/30 rounded m-3 font-monospace text-xs leading-[1.5] whitespace-pre-wrap break-words">
           {error}
         </div>
       ) : isLoadingHunks && hunks.length === 0 && !fileTree ? (
@@ -558,28 +558,28 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
         <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-[#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">
+              <div className="bg-warning/10 border border-warning/30 rounded py-1.5 px-3 mx-3 my-3 text-warning 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-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">
+              <div className="flex items-stretch border border-border-light rounded overflow-hidden bg-dark transition-[border-color] duration-150 hover:border-border-gray 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-foreground text-xs font-sans leading-[1.4] outline-none flex items-center h-full placeholder:text-text-dim 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-separator"
                 />
                 <TooltipWrapper inline>
                   <button
                     className={cn(
-                      "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",
+                      "py-1.5 px-2.5 border-none border-l border-light text-[11px] font-monospace font-semibold leading-[1.4] cursor-pointer outline-none transition-all duration-150 whitespace-nowrap flex items-center h-full",
                       searchState.useRegex
-                        ? "bg-[#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-separator hover:text-foreground",
+                        ? "bg-review-bg-blue text-accent-light shadow-[inset_0_0_0_1px_rgba(77,184,255,0.4)] hover:bg-review-bg-info hover:text-accent-light"
+                        : "bg-transparent text-subtle hover:bg-separator hover:text-foreground",
                       "active:translate-y-px"
                     )}
                     onClick={() =>
@@ -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-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",
+                      "py-1.5 px-2.5 border-none border-l border-light text-[11px] font-monospace font-semibold leading-[1.4] cursor-pointer outline-none transition-all duration-150 whitespace-nowrap flex items-center h-full",
                       searchState.matchCase
-                        ? "bg-[#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-separator hover:text-foreground",
+                        ? "bg-review-bg-blue text-accent-light shadow-[inset_0_0_0_1px_rgba(77,184,255,0.4)] hover:bg-review-bg-info hover:text-accent-light"
+                        : "bg-transparent text-subtle hover:bg-separator hover:text-foreground",
                       "active:translate-y-px"
                     )}
                     onClick={() =>
diff --git a/src/components/RightSidebar/CodeReview/UntrackedStatus.tsx b/src/components/RightSidebar/CodeReview/UntrackedStatus.tsx
index 363481407..5c79968d8 100644
--- a/src/components/RightSidebar/CodeReview/UntrackedStatus.tsx
+++ b/src/components/RightSidebar/CodeReview/UntrackedStatus.tsx
@@ -126,7 +126,7 @@ export const UntrackedStatus: React.FC<UntrackedStatusProps> = ({
         className={cn(
           "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-review-bg-warning border border-review-warning text-info-yellow cursor-pointer hover:bg-review-warning-light hover:border-review-warning-medium"
             : "bg-transparent border border-transparent text-muted cursor-default"
         )}
         onClick={() => hasUntracked && setShowTooltip(!showTooltip)}
@@ -135,7 +135,7 @@ export const UntrackedStatus: React.FC<UntrackedStatusProps> = ({
       </div>
 
       {showTooltip && hasUntracked && (
-        <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="absolute top-[calc(100%+8px)] right-0 bg-modal-bg border border-bg-medium 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>
@@ -143,7 +143,7 @@ export const UntrackedStatus: React.FC<UntrackedStatusProps> = ({
             {untrackedFiles.map((file) => (
               <div
                 key={file}
-                className="text-[11px] text-[#aaa] py-0.5 px-1 font-mono whitespace-nowrap overflow-hidden text-ellipsis hover:bg-[#37373d]"
+                className="text-[11px] text-label py-0.5 px-1 font-mono whitespace-nowrap overflow-hidden text-ellipsis hover:bg-bg-subtle"
               >
                 {file}
               </div>
@@ -153,10 +153,10 @@ export const UntrackedStatus: React.FC<UntrackedStatusProps> = ({
             onClick={() => void handleTrackAll()}
             disabled={isTracking}
             className={cn(
-              "w-full py-1 px-2 bg-transparent text-muted border border-[#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"
+              "w-full py-1 px-2 bg-transparent text-muted border border-border-medium rounded text-[11px] cursor-pointer transition-all duration-200 font-primary",
+              "hover:bg-white-overlay-light hover:text-foreground hover:border-border-subtle",
+              "active:bg-white-overlay",
+              "disabled:text-border-darker disabled:border-border disabled:cursor-not-allowed disabled:bg-transparent"
             )}
           >
             {isTracking ? "Tracking..." : "Track All"}
diff --git a/src/components/RightSidebar/ConsumerBreakdown.tsx b/src/components/RightSidebar/ConsumerBreakdown.tsx
index ababfc525..02b465eeb 100644
--- a/src/components/RightSidebar/ConsumerBreakdown.tsx
+++ b/src/components/RightSidebar/ConsumerBreakdown.tsx
@@ -56,7 +56,7 @@ const ConsumerBreakdownComponent: React.FC<ConsumerBreakdownProps> = ({ consumer
                 </span>
               </div>
               <div className="flex flex-col gap-1">
-                <div className="w-full h-2 bg-[#2a2a2a] rounded overflow-hidden flex">
+                <div className="w-full h-2 bg-hover rounded overflow-hidden flex">
                   {consumer.fixedTokens && consumer.variableTokens ? (
                     <>
                       <div
diff --git a/src/components/RightSidebar/CostsTab.tsx b/src/components/RightSidebar/CostsTab.tsx
index 74134ab41..90aca67bd 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-text-light font-primary text-[13px] leading-relaxed">
+      <div className="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-text-light font-primary text-[13px] leading-relaxed">
+    <div className="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">
@@ -173,7 +173,7 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
                       </span>
                     </div>
                     <div className="relative w-full">
-                      <div className="w-full h-1.5 bg-[#3e3e42] rounded-[3px] overflow-hidden flex">
+                      <div className="w-full h-1.5 bg-border-light rounded-[3px] overflow-hidden flex">
                         {cachedPercentage > 0 && (
                           <div
                             className="h-full transition-[width] duration-300"
@@ -219,7 +219,7 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
                     </div>
                   </div>
                   {showWarning && (
-                    <div className="text-[#999999] text-[11px] mt-2 italic">
+                    <div className="text-subtle text-[11px] mt-2 italic">
                       Unknown model limits - showing relative usage only
                     </div>
                   )}
@@ -362,7 +362,7 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
                         </span>
                       </div>
                       <div className="relative w-full">
-                        <div className="w-full h-1.5 bg-[#3e3e42] rounded-[3px] overflow-hidden flex">
+                        <div className="w-full h-1.5 bg-border-light rounded-[3px] overflow-hidden flex">
                           {cachedCostPercentage > 0 && (
                             <div
                               className="h-full transition-[width] duration-300"
@@ -467,7 +467,7 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
       )}
 
       <div className="mb-6">
-        <h3 className="text-[#999999] text-sm font-semibold m-0 mb-3 uppercase tracking-wide">
+        <h3 className="text-subtle text-sm font-semibold m-0 mb-3 uppercase tracking-wide">
           Breakdown by Consumer
         </h3>
         <ConsumerBreakdown consumers={consumers} />
diff --git a/src/components/RightSidebar/TokenMeter.tsx b/src/components/RightSidebar/TokenMeter.tsx
index d1bd89443..f0dbf0ff9 100644
--- a/src/components/RightSidebar/TokenMeter.tsx
+++ b/src/components/RightSidebar/TokenMeter.tsx
@@ -19,7 +19,7 @@ const TokenMeterComponent: React.FC<TokenMeterProps> = ({
   return (
     <div
       className={cn(
-        "bg-[#3e3e42] overflow-hidden flex",
+        "bg-border-light overflow-hidden flex",
         orientation === "horizontal"
           ? "rounded w-full h-1.5 flex-row"
           : "rounded-[4px] w-2 h-full flex-col",
diff --git a/src/components/SecretsModal.tsx b/src/components/SecretsModal.tsx
index 2bd90cd0f..03da6b06a 100644
--- a/src/components/SecretsModal.tsx
+++ b/src/components/SecretsModal.tsx
@@ -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-modal-bg border border-[#444] rounded text-white text-[13px] font-mono w-full focus:outline-none focus:border-accent placeholder:text-text-dim"
+                  className="py-1.5 px-2.5 bg-modal-bg border border-border-medium 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,7 +163,7 @@ 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-modal-bg border border-[#444] rounded text-white text-[13px] font-mono w-full focus:outline-none focus:border-accent placeholder:text-text-dim"
+                  className="py-1.5 px-2.5 bg-modal-bg border border-border-medium rounded text-white text-[13px] font-mono w-full focus:outline-none focus:border-accent placeholder:text-text-dim"
                 />
                 <button
                   type="button"
@@ -177,7 +177,7 @@ const SecretsModal: React.FC<SecretsModalProps> = ({
                   type="button"
                   onClick={() => removeSecret(index)}
                   disabled={isLoading}
-                  className="py-1.5 px-2.5 bg-transparent text-[#ff5555] border border-[#ff5555] rounded cursor-pointer text-[13px] transition-all duration-200 hover:bg-[#ff5555]/10"
+                  className="py-1.5 px-2.5 bg-transparent text-danger-light border border-danger-light rounded cursor-pointer text-[13px] transition-all duration-200 hover:bg-danger-light/10"
                 >
                   ×
                 </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-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"
+        className="w-full py-2 px-3 bg-transparent text-muted border border-dashed border-border-medium rounded cursor-pointer text-[13px] transition-all duration-200 mb-4 hover:bg-hover hover:border-border-darker hover:text-foreground"
       >
         + Add Secret
       </button>
diff --git a/src/components/StatusIndicator.stories.tsx b/src/components/StatusIndicator.stories.tsx
index 287efbbf6..626086aab 100644
--- a/src/components/StatusIndicator.stories.tsx
+++ b/src/components/StatusIndicator.stories.tsx
@@ -60,22 +60,24 @@ export const AllStates: Story = {
     <div className="flex gap-[30px] p-5 items-center flex-wrap">
       <div className="flex flex-col gap-2 items-center">
         <StatusIndicator streaming={false} unread={false} />
-        <span className="text-[11px] text-[#808080] font-primary">Default</span>
+        <span className="text-[11px] text-muted-light font-primary">Default</span>
       </div>
 
       <div className="flex flex-col gap-2 items-center">
         <StatusIndicator streaming={true} unread={false} />
-        <span className="text-[11px] text-[#808080] font-primary">Streaming</span>
+        <span className="text-[11px] text-muted-light font-primary">Streaming</span>
       </div>
 
       <div className="flex flex-col gap-2 items-center">
         <StatusIndicator streaming={false} unread={true} />
-        <span className="text-[11px] text-[#808080] font-primary">Unread</span>
+        <span className="text-[11px] text-muted-light font-primary">Unread</span>
       </div>
 
       <div className="flex flex-col gap-2 items-center">
         <StatusIndicator streaming={true} unread={true} />
-        <span className="text-[11px] text-[#808080] font-primary">Streaming (unread ignored)</span>
+        <span className="text-[11px] text-muted-light font-primary">
+          Streaming (unread ignored)
+        </span>
       </div>
     </div>
   ),
@@ -87,27 +89,27 @@ export const DifferentSizes: Story = {
     <div className="flex gap-[30px] p-5 items-center flex-wrap">
       <div className="flex flex-col gap-2 items-center">
         <StatusIndicator streaming={false} unread={true} size={4} />
-        <span className="text-[11px] text-[#808080] font-primary">4px</span>
+        <span className="text-[11px] text-muted-light font-primary">4px</span>
       </div>
 
       <div className="flex flex-col gap-2 items-center">
         <StatusIndicator streaming={false} unread={true} size={8} />
-        <span className="text-[11px] text-[#808080] font-primary">8px (default)</span>
+        <span className="text-[11px] text-muted-light font-primary">8px (default)</span>
       </div>
 
       <div className="flex flex-col gap-2 items-center">
         <StatusIndicator streaming={false} unread={true} size={12} />
-        <span className="text-[11px] text-[#808080] font-primary">12px</span>
+        <span className="text-[11px] text-muted-light font-primary">12px</span>
       </div>
 
       <div className="flex flex-col gap-2 items-center">
         <StatusIndicator streaming={false} unread={true} size={16} />
-        <span className="text-[11px] text-[#808080] font-primary">16px</span>
+        <span className="text-[11px] text-muted-light font-primary">16px</span>
       </div>
 
       <div className="flex flex-col gap-2 items-center">
         <StatusIndicator streaming={false} unread={true} size={20} />
-        <span className="text-[11px] text-[#808080] font-primary">20px</span>
+        <span className="text-[11px] text-muted-light font-primary">20px</span>
       </div>
     </div>
   ),
@@ -243,17 +245,17 @@ export const InContext: Story = {
   render: () => {
     return (
       <div className="flex flex-col gap-2">
-        <div className="flex items-center gap-2 py-2 px-3 bg-[#2d2d30] rounded font-primary text-[13px] text-[#cccccc]">
+        <div className="flex items-center gap-2 py-2 px-3 bg-modal-bg rounded font-primary text-[13px] text-bright">
           <StatusIndicator streaming={false} unread={false} />
           <span>workspace-feature-branch</span>
         </div>
 
-        <div className="flex items-center gap-2 py-2 px-3 bg-[#2d2d30] rounded font-primary text-[13px] text-[#cccccc]">
+        <div className="flex items-center gap-2 py-2 px-3 bg-modal-bg rounded font-primary text-[13px] text-bright">
           <StatusIndicator streaming={true} unread={false} />
           <span>workspace-main (streaming)</span>
         </div>
 
-        <div className="flex items-center gap-2 py-2 px-3 bg-[#2d2d30] rounded font-primary text-[13px] text-[#cccccc]">
+        <div className="flex items-center gap-2 py-2 px-3 bg-modal-bg rounded font-primary text-[13px] text-bright">
           <StatusIndicator streaming={false} unread={true} />
           <span>workspace-bugfix (3 unread)</span>
         </div>
diff --git a/src/components/StatusIndicator.tsx b/src/components/StatusIndicator.tsx
index 283c4e071..56757b1ee 100644
--- a/src/components/StatusIndicator.tsx
+++ b/src/components/StatusIndicator.tsx
@@ -30,7 +30,7 @@ const StatusIndicatorInner: React.FC<StatusIndicatorProps> = ({
     [streaming, onClick]
   );
 
-  const bgColor = streaming ? "bg-assistant-border" : unread ? "bg-white" : "bg-[#6e6e6e]";
+  const bgColor = streaming ? "bg-assistant-border" : unread ? "bg-white" : "bg-muted-dark";
 
   const cursor = onClick && !streaming ? "cursor-pointer" : "cursor-default";
 
diff --git a/src/components/ThinkingSlider.stories.tsx b/src/components/ThinkingSlider.stories.tsx
index 74782521c..62c341872 100644
--- a/src/components/ThinkingSlider.stories.tsx
+++ b/src/components/ThinkingSlider.stories.tsx
@@ -39,19 +39,19 @@ export const Default: Story = {};
 
 export const DifferentModels: Story = {
   render: () => (
-    <div className="flex flex-col gap-[30px] p-10 bg-[#1e1e1e] min-w-[300px]">
+    <div className="flex flex-col gap-[30px] p-10 bg-dark min-w-[300px]">
       <div>
-        <div className="text-xs text-[#808080] font-primary mb-2">Claude Sonnet 4.5</div>
+        <div className="text-xs text-muted-light font-primary mb-2">Claude Sonnet 4.5</div>
         <ThinkingSliderComponent modelString="anthropic:claude-sonnete-4-5" />
       </div>
 
       <div>
-        <div className="text-xs text-[#808080] font-primary mb-2">Claude Opus 4.1</div>
+        <div className="text-xs text-muted-light font-primary mb-2">Claude Opus 4.1</div>
         <ThinkingSliderComponent modelString="anthropic:claude-opus-4-1" />
       </div>
 
       <div>
-        <div className="text-xs text-[#808080] font-primary mb-2">GPT-5 Codex</div>
+        <div className="text-xs text-muted-light font-primary mb-2">GPT-5 Codex</div>
         <ThinkingSliderComponent modelString="openai:gpt-5-codex" />
       </div>
     </div>
@@ -60,12 +60,12 @@ export const DifferentModels: Story = {
 
 export const InteractiveDemo: Story = {
   render: () => (
-    <div className="flex flex-col gap-[30px] p-10 bg-[#1e1e1e] min-w-[300px]">
-      <div className="text-[13px] text-[#cccccc] font-primary mb-2.5">
+    <div className="flex flex-col gap-[30px] p-10 bg-dark min-w-[300px]">
+      <div className="text-[13px] text-bright font-primary mb-2.5">
         Try moving the slider to see the purple glow effect intensify:
       </div>
       <ThinkingSliderComponent modelString="claude-3-5-sonnet-20241022" />
-      <div className="text-[11px] text-[#808080] font-primary mt-2.5">
+      <div className="text-[11px] text-muted-light font-primary mt-2.5">
         • <strong>Off</strong>: No thinking (gray)
         <br />• <strong>Low</strong>: Minimal thinking (light purple)
         <br />• <strong>Medium</strong>: Moderate thinking (purple)
@@ -95,17 +95,17 @@ export const InteractiveDemo: Story = {
 export const LockedThinking: Story = {
   args: { modelString: "openai:gpt-5-pro" },
   render: (args) => (
-    <div className="flex flex-col gap-[30px] p-10 bg-[#1e1e1e] min-w-[300px]">
-      <div className="text-[13px] text-[#cccccc] font-primary mb-2.5">
+    <div className="flex flex-col gap-[30px] p-10 bg-dark min-w-[300px]">
+      <div className="text-[13px] text-bright font-primary mb-2.5">
         Some models have locked thinking levels based on their capabilities:
       </div>
       <div>
-        <div className="text-xs text-[#808080] font-primary mb-2">
+        <div className="text-xs text-muted-light font-primary mb-2">
           GPT-5-Pro (locked to &ldquo;high&rdquo;)
         </div>
         <ThinkingSliderComponent modelString={args.modelString} />
       </div>
-      <div className="text-[11px] text-[#808080] font-primary mt-2.5">
+      <div className="text-[11px] text-muted-light font-primary mt-2.5">
         Hover over the locked indicator to see why it&apos;s fixed.
       </div>
     </div>
diff --git a/src/components/ThinkingSlider.tsx b/src/components/ThinkingSlider.tsx
index 01f6d3286..1f64f8863 100644
--- a/src/components/ThinkingSlider.tsx
+++ b/src/components/ThinkingSlider.tsx
@@ -96,7 +96,7 @@ export const ThinkingSliderComponent: React.FC<ThinkingControlProps> = ({ modelS
     return (
       <TooltipWrapper>
         <div className="flex items-center gap-2 ml-5">
-          <label className="text-[10px] text-[#606060] select-none">Thinking:</label>
+          <label className="text-[10px] text-subdued select-none">Thinking:</label>
           <span
             className="min-w-[45px] uppercase select-none transition-all duration-200"
             style={textStyle}
@@ -128,7 +128,7 @@ export const ThinkingSliderComponent: React.FC<ThinkingControlProps> = ({ modelS
   return (
     <TooltipWrapper>
       <div className="flex items-center gap-2 ml-5">
-        <label htmlFor={sliderId} className="text-[10px] text-[#606060] select-none">
+        <label htmlFor={sliderId} className="text-[10px] text-subdued select-none">
           Thinking:
         </label>
         <input
diff --git a/src/components/TipsCarousel.stories.tsx b/src/components/TipsCarousel.stories.tsx
index b68972a70..57f6adba8 100644
--- a/src/components/TipsCarousel.stories.tsx
+++ b/src/components/TipsCarousel.stories.tsx
@@ -24,12 +24,12 @@ export const Default: Story = {
 
 export const WithExplanation: Story = {
   render: () => (
-    <div className="flex flex-col gap-5 p-5 bg-[#1e1e1e] min-w-[500px]">
-      <div className="text-[13px] text-[#cccccc] font-primary">
+    <div className="flex flex-col gap-5 p-5 bg-dark min-w-[500px]">
+      <div className="text-[13px] text-bright font-primary">
         Tips rotate automatically based on time. Hover to see the gradient effect:
       </div>
       <TipsCarousel fixedTipIndex={0} />
-      <div className="text-[11px] text-[#808080] font-primary">
+      <div className="text-[11px] text-muted-light font-primary">
         Tips change every hour to provide variety and convey UX information.
       </div>
     </div>
@@ -38,10 +38,10 @@ export const WithExplanation: Story = {
 
 export const DebugControls: Story = {
   render: () => (
-    <div className="flex flex-col gap-5 p-5 bg-[#1e1e1e] min-w-[500px]">
-      <div className="text-[13px] text-[#cccccc] font-primary">For debugging, you can use:</div>
+    <div className="flex flex-col gap-5 p-5 bg-dark min-w-[500px]">
+      <div className="text-[13px] text-bright font-primary">For debugging, you can use:</div>
       <TipsCarousel fixedTipIndex={1} />
-      <div className="text-[11px] text-[#808080] font-monospace p-3 bg-[#2d2d30] rounded">
+      <div className="text-[11px] text-muted-light font-monospace p-3 bg-modal-bg rounded">
         <div>window.setTip(0) // Show first tip</div>
         <div>window.setTip(1) // Show second tip</div>
         <div>window.clearTip() // Return to auto-rotation</div>
@@ -53,10 +53,10 @@ export const DebugControls: Story = {
 export const InContext: Story = {
   render: () => {
     return (
-      <div className="flex items-center gap-3 py-2 px-3 bg-[#252526] border-b border-[#3e3e42] font-primary">
+      <div className="flex items-center gap-3 py-2 px-3 bg-separator border-b border-border-light font-primary">
         <div className="flex items-center gap-2">
-          <span className="text-[11px] text-[#808080]">Workspace:</span>
-          <span className="text-[11px] text-[#cccccc]">main</span>
+          <span className="text-[11px] text-muted-light">Workspace:</span>
+          <span className="text-[11px] text-bright">main</span>
         </div>
         <div
           style={{
@@ -68,7 +68,7 @@ export const InContext: Story = {
           <TipsCarousel fixedTipIndex={0} />
         </div>
         <div className="flex items-center gap-2">
-          <span className="text-[11px] text-[#808080]">Mode: Plan</span>
+          <span className="text-[11px] text-muted-light">Mode: Plan</span>
         </div>
       </div>
     );
diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx
index 6f2dc5830..1d5f26391 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-bg-dark 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-dark border-b border-border-light flex items-center justify-between font-primary text-[11px] text-muted select-none flex-shrink-0">
       <div className="flex items-center gap-2 min-w-0 mr-4">
         {showUpdateIndicator && (
           <TooltipWrapper>
diff --git a/src/components/ToggleGroup.stories.tsx b/src/components/ToggleGroup.stories.tsx
index b55c170b1..1ebba3ff8 100644
--- a/src/components/ToggleGroup.stories.tsx
+++ b/src/components/ToggleGroup.stories.tsx
@@ -260,8 +260,8 @@ export const WithStateDisplay: Story = {
           value={value}
           onChange={(newValue) => updateArgs({ value: newValue })}
         />
-        <div className="text-xs text-[#808080] font-primary">
-          Current selection: <strong className="text-[#cccccc]">{value}</strong>
+        <div className="text-xs text-muted-light font-primary">
+          Current selection: <strong className="text-bright">{value}</strong>
         </div>
       </div>
     );
@@ -316,17 +316,17 @@ export const MultipleGroups: Story = {
     return (
       <div className="flex flex-col gap-5 p-5">
         <div>
-          <div className="text-[11px] text-[#808080] mb-1.5 font-primary">Theme</div>
+          <div className="text-[11px] text-muted-light mb-1.5 font-primary">Theme</div>
           <ToggleGroup options={themeOptions} value={theme} onChange={handleThemeChange} />
         </div>
 
         <div>
-          <div className="text-[11px] text-[#808080] mb-1.5 font-primary">Size</div>
+          <div className="text-[11px] text-muted-light mb-1.5 font-primary">Size</div>
           <ToggleGroup options={sizeOptions} value={size} onChange={handleSizeChange} />
         </div>
 
         <div>
-          <div className="text-[11px] text-[#808080] mb-1.5 font-primary">Layout</div>
+          <div className="text-[11px] text-muted-light mb-1.5 font-primary">Layout</div>
           <ToggleGroup options={layoutOptions} value={layout} onChange={handleLayoutChange} />
         </div>
       </div>
diff --git a/src/components/Tooltip.stories.tsx b/src/components/Tooltip.stories.tsx
index e7dd732a4..11011cece 100644
--- a/src/components/Tooltip.stories.tsx
+++ b/src/components/Tooltip.stories.tsx
@@ -18,7 +18,7 @@ export const BasicTooltip: Story = {
   args: { children: "This is a helpful tooltip" },
   render: () => (
     <TooltipWrapper>
-      <button className="py-2 px-4 bg-[#0e639c] text-white border-none rounded cursor-pointer font-primary text-[13px] hover:bg-[#1177bb]">
+      <button className="py-2 px-4 bg-accent-dark text-white border-none rounded cursor-pointer font-primary text-[13px] hover:bg-accent-hover">
         Hover me
       </button>
       <Tooltip>This is a helpful tooltip</Tooltip>
@@ -66,14 +66,14 @@ export const TooltipPositions: Story = {
   render: () => (
     <div className="flex gap-5 p-10 flex-wrap">
       <TooltipWrapper>
-        <button className="py-2 px-4 bg-[#0e639c] text-white border-none rounded cursor-pointer font-primary text-[13px] hover:bg-[#1177bb]">
+        <button className="py-2 px-4 bg-accent-dark text-white border-none rounded cursor-pointer font-primary text-[13px] hover:bg-accent-hover">
           Top (default)
         </button>
         <Tooltip position="top">Tooltip appears above</Tooltip>
       </TooltipWrapper>
 
       <TooltipWrapper>
-        <button className="py-2 px-4 bg-[#0e639c] text-white border-none rounded cursor-pointer font-primary text-[13px] hover:bg-[#1177bb]">
+        <button className="py-2 px-4 bg-accent-dark text-white border-none rounded cursor-pointer font-primary text-[13px] hover:bg-accent-hover">
           Bottom
         </button>
         <Tooltip position="bottom">Tooltip appears below</Tooltip>
@@ -87,21 +87,21 @@ export const TooltipAlignments: Story = {
   render: () => (
     <div className="flex gap-5 p-10 flex-wrap">
       <TooltipWrapper>
-        <button className="py-2 px-4 bg-[#0e639c] text-white border-none rounded cursor-pointer font-primary text-[13px] hover:bg-[#1177bb]">
+        <button className="py-2 px-4 bg-accent-dark text-white border-none rounded cursor-pointer font-primary text-[13px] hover:bg-accent-hover">
           Left Aligned
         </button>
         <Tooltip align="left">Left-aligned tooltip</Tooltip>
       </TooltipWrapper>
 
       <TooltipWrapper>
-        <button className="py-2 px-4 bg-[#0e639c] text-white border-none rounded cursor-pointer font-primary text-[13px] hover:bg-[#1177bb]">
+        <button className="py-2 px-4 bg-accent-dark text-white border-none rounded cursor-pointer font-primary text-[13px] hover:bg-accent-hover">
           Center Aligned
         </button>
         <Tooltip align="center">Center-aligned tooltip</Tooltip>
       </TooltipWrapper>
 
       <TooltipWrapper>
-        <button className="py-2 px-4 bg-[#0e639c] text-white border-none rounded cursor-pointer font-primary text-[13px] hover:bg-[#1177bb]">
+        <button className="py-2 px-4 bg-accent-dark text-white border-none rounded cursor-pointer font-primary text-[13px] hover:bg-accent-hover">
           Right Aligned
         </button>
         <Tooltip align="right">Right-aligned tooltip</Tooltip>
@@ -114,7 +114,7 @@ export const WideTooltip: Story = {
   args: { children: "Tooltip content" },
   render: () => (
     <TooltipWrapper>
-      <button className="py-2 px-4 bg-[#0e639c] text-white border-none rounded cursor-pointer font-primary text-[13px] hover:bg-[#1177bb]">
+      <button className="py-2 px-4 bg-accent-dark text-white border-none rounded cursor-pointer font-primary text-[13px] hover:bg-accent-hover">
         Hover for detailed info
       </button>
       <Tooltip width="wide">
@@ -161,7 +161,7 @@ export const KeyboardShortcut: Story = {
   args: { children: "Tooltip content" },
   render: () => (
     <TooltipWrapper>
-      <button className="py-2 px-4 bg-[#0e639c] text-white border-none rounded cursor-pointer font-primary text-[13px] hover:bg-[#1177bb]">
+      <button className="py-2 px-4 bg-accent-dark text-white border-none rounded cursor-pointer font-primary text-[13px] hover:bg-accent-hover">
         Save File
       </button>
       <Tooltip align="center">
@@ -175,7 +175,7 @@ export const LongContent: Story = {
   args: { children: "Tooltip content" },
   render: () => (
     <TooltipWrapper>
-      <button className="py-2 px-4 bg-[#0e639c] text-white border-none rounded cursor-pointer font-primary text-[13px] hover:bg-[#1177bb]">
+      <button className="py-2 px-4 bg-accent-dark text-white border-none rounded cursor-pointer font-primary text-[13px] hover:bg-accent-hover">
         Documentation
       </button>
       <Tooltip width="wide">
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index 51c2dba05..4d85b6458 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -220,7 +220,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
       }}
       className={cn(
         "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)]",
+        "text-[11px] font-normal font-sans border border-separator-light 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",
         className
@@ -245,7 +245,7 @@ export const HelpIndicator: React.FC<{ className?: string; children?: React.Reac
   <span
     className={cn(
       "text-text-dim text-[7px] cursor-help inline-block align-baseline",
-      "border border-[#666] rounded-full w-[10px] h-[10px] leading-[8px]",
+      "border border-border-subtle 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 d4665b89e..0321350fe 100644
--- a/src/components/VimTextArea.tsx
+++ b/src/components/VimTextArea.tsx
@@ -155,7 +155,7 @@ export const VimTextArea = React.forwardRef<HTMLTextAreaElement, VimTextAreaProp
     return (
       <div style={{ width: "100%" }} data-component="VimTextAreaContainer">
         <div
-          className="text-[9px] text-[rgba(212,212,212,0.6)] tracking-[0.8px] select-none h-[11px] leading-[11px] mb-px flex items-center justify-between gap-1"
+          className="text-[9px] text-vim-status tracking-[0.8px] select-none h-[11px] leading-[11px] mb-px flex items-center justify-between gap-1"
           aria-live="polite"
         >
           <div className="flex items-center gap-1">
@@ -209,16 +209,16 @@ export const VimTextArea = React.forwardRef<HTMLTextAreaElement, VimTextAreaProp
             autoComplete="off"
             {...rest}
             className={cn(
-              "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]",
+              "w-full border text-light py-1.5 px-2 rounded font-mono text-[13px] resize-none min-h-8 max-h-[50vh] overflow-y-auto",
+              "placeholder:text-placeholder",
               "focus:outline-none",
               isEditing
-                ? "bg-[var(--color-editing-mode-alpha)] border-[var(--color-editing-mode)] focus:border-[var(--color-editing-mode)]"
-                : "bg-bg-dark border-border-light",
+                ? "bg-editing-mode-alpha border-editing-mode focus:border-editing-mode"
+                : "bg-dark border-border-light",
               !isEditing && (mode === "plan" ? "focus:border-plan-mode" : "focus:border-exec-mode"),
               vimMode === "normal"
                 ? "caret-transparent selection:bg-white/50"
-                : "caret-white selection:bg-[rgba(51,153,255,0.5)]"
+                : "caret-white selection:bg-selection"
             )}
           />
           {vimMode === "normal" && value.length === 0 && (
diff --git a/src/components/WorkspaceListItem.tsx b/src/components/WorkspaceListItem.tsx
index 6b99bf3c7..25632fe72 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-bg-hover [&:hover_button]:opacity-100",
-          isSelected && "bg-bg-hover 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-hover [&:hover_button]:opacity-100",
+          isSelected && "bg-hover border-l-[#569cd6]"
         )}
         onClick={() =>
           onSelectWorkspace({
diff --git a/src/components/shared/DiffRenderer.tsx b/src/components/shared/DiffRenderer.tsx
index afd1b98db..10800a11b 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-bg-dark border-t m-0"
+        className="py-1.5 px-2 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-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)]"
+          className="w-full px-2 py-1.5 font-mono text-xs leading-[1.4] 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 18ec0385c..e6ca04902 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-danger 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-danger-overlay rounded border-l-2 border-danger">
                     {result.error}
                   </div>
                 </DetailSection>
@@ -115,7 +115,7 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({
               {result.output && (
                 <DetailSection>
                   <DetailLabel>Output</DetailLabel>
-                  <pre className="m-0 px-2 py-1.5 bg-[var(--color-code-bg)] rounded border-l-2 border-[#4caf50] text-[11px] leading-[1.4] whitespace-pre-wrap break-words max-h-[200px] overflow-y-auto">
+                  <pre className="m-0 px-2 py-1.5 bg-code-bg rounded border-l-2 border-success text-[11px] leading-[1.4] whitespace-pre-wrap break-words max-h-[200px] overflow-y-auto">
                     {result.output}
                   </pre>
                 </DetailSection>
diff --git a/src/components/tools/FileEditToolCall.tsx b/src/components/tools/FileEditToolCall.tsx
index 5a8a005c7..d4cf2ebc3 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-danger 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-danger-overlay rounded border-l-2 border-danger">
         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-danger 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-danger-overlay rounded border-l-2 border-danger">
                     {result.error}
                   </div>
                 </DetailSection>
diff --git a/src/components/tools/FileReadToolCall.tsx b/src/components/tools/FileReadToolCall.tsx
index 719fa9add..39d98f672 100644
--- a/src/components/tools/FileReadToolCall.tsx
+++ b/src/components/tools/FileReadToolCall.tsx
@@ -96,7 +96,7 @@ export const FileReadToolCall: React.FC<FileReadToolCallProps> = ({
       {expanded && (
         <ToolDetails>
           <DetailSection>
-            <div className="flex flex-wrap gap-4 px-2 py-1.5 bg-[var(--color-code-bg)] rounded text-[11px] leading-[1.4]">
+            <div className="flex flex-wrap gap-4 px-2 py-1.5 bg-code-bg rounded text-[11px] leading-[1.4]">
               <div className="flex gap-1.5">
                 <span className="text-secondary font-medium">Path:</span>
                 <span className="text-text font-monospace break-all">{args.filePath}</span>
@@ -121,7 +121,7 @@ export const FileReadToolCall: React.FC<FileReadToolCallProps> = ({
               {result.success === false && result.error && (
                 <DetailSection>
                   <DetailLabel>Error</DetailLabel>
-                  <div className="text-danger 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-danger-overlay rounded border-l-2 border-danger">
                     {result.error}
                   </div>
                 </DetailSection>
@@ -130,7 +130,7 @@ export const FileReadToolCall: React.FC<FileReadToolCallProps> = ({
               {result.success && result.content && parsedContent && (
                 <DetailSection>
                   <DetailLabel>Content</DetailLabel>
-                  <div className="m-0 px-2 py-1.5 bg-[var(--color-code-bg)] rounded text-[11px] leading-[1.4] max-h-[200px] overflow-y-auto flex">
+                  <div className="m-0 px-2 py-1.5 bg-code-bg rounded text-[11px] leading-[1.4] max-h-[200px] overflow-y-auto flex">
                     <div className="text-secondary opacity-40 pr-3 mr-2 border-r border-white/10 select-none text-right min-w-[40px] font-monospace">
                       {parsedContent.lineNumbers.map((lineNum, i) => (
                         <div key={i}>{lineNum}</div>
diff --git a/src/components/tools/shared/ToolPrimitives.tsx b/src/components/tools/shared/ToolPrimitives.tsx
index b7a558dc4..7276cb9ee 100644
--- a/src/components/tools/shared/ToolPrimitives.tsx
+++ b/src/components/tools/shared/ToolPrimitives.tsx
@@ -13,7 +13,7 @@ interface ToolContainerProps extends React.HTMLAttributes<HTMLDivElement> {
 export const ToolContainer: React.FC<ToolContainerProps> = ({ expanded, className, ...props }) => (
   <div
     className={cn(
-      "my-2 bg-[rgba(100,100,100,0.05)] rounded font-mono text-[11px] transition-all duration-200",
+      "my-2 bg-gray-overlay rounded font-mono text-[11px] transition-all duration-200",
       "[container-type:inline-size]",
       expanded ? "py-2 px-3" : "py-1 px-3",
       className
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 35e5d11d9..b037e429f 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -85,21 +85,90 @@
   
   /* Additional Semantic Colors */
   --color-muted: hsl(0 0% 53%);              /* #888 - muted text */
+  --color-muted-light: hsl(0 0% 50%);        /* #808080 - muted light */
+  --color-muted-dark: hsl(0 0% 43%);         /* #6e6e6e - muted darker */
+  --color-placeholder: hsl(0 0% 42%);        /* #6b6b6b - placeholder */
+  --color-subtle: hsl(0 0% 60%);             /* #999 - subtle */
+  --color-dim: hsl(0 0% 42%);                /* #666 - dimmed */
+  --color-light: hsl(0 0% 83%);              /* #d4d4d4 - light */
+  --color-lighter: hsl(0 0% 90%);            /* #e5e5e5 - lighter */
+  --color-bright: hsl(0 0% 80%);             /* #cccccc - bright */
+  --color-subdued: hsl(0 0% 60%);            /* #9a9a9a - subdued */
+  --color-label: hsl(0 0% 67%);              /* #aaa - label */
+  --color-gray: hsl(0 0% 48%);               /* #7a7a7a - gray */
+  --color-medium: hsl(0 0% 59%);             /* #969696 - medium */
+  
   --color-border-light: hsl(240 3% 25%);     /* #3e3e42 - lighter borders */
   --color-border-medium: hsl(0 0% 27%);      /* #444 - medium borders */
-  --color-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-border-darker: hsl(0 0% 33%);      /* #555 - darker borders */
+  --color-border-subtle: hsl(0 0% 40%);      /* #666 - subtle border */
+  --color-border-gray: hsl(240 1% 31%);      /* #4e4e52 - gray border */
+  
+  --color-dark: hsl(0 0% 11.5%);             /* #1e1e1e - dark backgrounds */
+  --color-darker: hsl(0 0% 8.6%);            /* #161616 - darker backgrounds */
+  --color-hover: hsl(0 0% 16.5%);            /* #2a2a2b - hover states */
+  --color-bg-medium: hsl(0 0% 27%);          /* #454545 - medium bg */
+  --color-bg-light: hsl(0 0% 30%);           /* #4c4c4c - light bg */
+  --color-bg-subtle: hsl(240 3% 22%);        /* #37373d - subtle bg */
+  
+  --color-separator: hsl(0 0% 15%);          /* #252526 - separators */
+  --color-separator-light: hsl(0 0% 27%);    /* #464647 - lighter separator */
+  --color-modal-bg: hsl(0 0% 18%);           /* #2d2d30 - modal backgrounds */
+  
   --color-accent: hsl(207 100% 40%);         /* #007acc - VS Code blue */
+  --color-accent-hover: hsl(207 100% 45%);   /* #1177bb - accent hover */
   --color-accent-dark: hsl(207 100% 37%);    /* #0e639c - darker accent */
+  --color-accent-darker: hsl(202 100% 23%);  /* #094771 - even darker accent */
+  --color-accent-light: hsl(198 100% 65%);   /* #4db8ff - lighter accent */
+  
   --color-success: hsl(122 39% 49%);         /* #4caf50 - success green */
+  --color-success-light: hsl(123 46% 64%);   /* #4ade80 - lighter success */
+  
   --color-danger: hsl(4 90% 58%);            /* #f44336 - error red */
-  --color-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 */
+  --color-danger-light: hsl(0 91% 71%);      /* #ff5555 - lighter error red */
+  --color-danger-soft: hsl(6 93% 71%);       /* #f48771 - softer error */
+  
+  --color-warning: hsl(45 100% 51%);         /* #ffc107 - warning yellow */
+  --color-warning-light: hsl(0 91% 71%);     /* #f87171 - lighter warning/error */
+  
+  /* Code syntax highlighting */
+  --color-code-type: hsl(197 71% 73%);       /* #9cdcfe - type annotations */
+  --color-code-keyword: hsl(210 59% 63%);    /* #6496ff - keywords */
+  
+  /* Toast and notification backgrounds */
+  --color-toast-success-bg: hsl(207 100% 37% / 0.13);  /* #0e639c with 20% opacity */
+  --color-toast-success-text: hsl(207 100% 60%);       /* #3794ff */
+  --color-toast-error-bg: hsl(5 89% 60% / 0.15);       /* #f14836 with 15% opacity */
+  --color-toast-error-text: hsl(5 89% 60%);            /* #f14836 */
+  --color-toast-error-border: hsl(5 89% 60%);          /* #f14836 */
+  --color-toast-fatal-bg: hsl(0 33% 18%);              /* #2d1f1f - fatal error bg */
+  --color-toast-fatal-border: hsl(0 36% 26%);          /* #5a2c2c - fatal error border */
+  
+  /* Semi-transparent overlays */
+  --color-danger-overlay: hsl(4 90% 58% / 0.1);        /* danger with 10% opacity */
+  --color-warning-overlay: hsl(45 100% 51% / 0.1);     /* warning with 10% opacity */
+  --color-gray-overlay: hsl(0 0% 39% / 0.05);          /* gray with 5% opacity */
+  --color-white-overlay-light: hsl(0 0% 100% / 0.05);  /* white with 5% opacity */
+  --color-white-overlay: hsl(0 0% 100% / 0.1);         /* white with 10% opacity */
+  --color-selection: hsl(204 100% 60% / 0.5);          /* selection blue with 50% opacity */
+  --color-vim-status: hsl(0 0% 83% / 0.6);             /* status text with 60% opacity */
+  --color-code-keyword-overlay-light: hsl(210 100% 70% / 0.05); /* code keyword with 5% opacity */
+  --color-code-keyword-overlay: hsl(210 100% 70% / 0.2); /* code keyword with 20% opacity */
+  
+  /* Info/status colors */
+  --color-info-light: hsl(5 100% 75%);       /* #ff9980 - light info/error */
+  --color-info-yellow: hsl(38 100% 64%);     /* #ffb347 - yellow info */
+  
+  /* Review/diff backgrounds */
+  --color-review-bg-blue: hsl(201 31% 22%);  /* #2a3a4a - review background */
+  --color-review-bg-info: hsl(202 33% 24%);  /* #2a4050 - info background */
+  --color-review-bg-warning: hsl(40 100% 12%); /* #3e2a00 - warning bg dark */
+  --color-review-warning: hsl(38 100% 25%);    /* #806000 - warning dark */
+  --color-review-warning-medium: hsl(38 100% 32%); /* #a07000 - warning medium */
+  --color-review-warning-light: hsl(40 100% 20%);  /* #4a3200 - warning light bg */
+  
+  /* Error backgrounds */
+  --color-error-bg-dark: hsl(0 33% 13%);     /* #3c1f1f - dark error bg */
   
   /* Radius */
   --radius: 0.5rem;