diff --git a/src/components/AccessibilityHelp.tsx b/src/components/AccessibilityHelp.tsx
index ec682d5a..16fbf5bc 100644
--- a/src/components/AccessibilityHelp.tsx
+++ b/src/components/AccessibilityHelp.tsx
@@ -350,7 +350,7 @@ export function AccessibilityHelp() {
           class="w-full px-3 py-2 rounded-md text-sm"
           style={{
             background: "var(--surface-base)",
-            color: "var(--text-base)",
+            color: "var(--text-primary)",
             border: "1px solid var(--border-weak)",
             outline: "none",
           }}
@@ -384,7 +384,7 @@ export function AccessibilityHelp() {
                       class="flex items-center justify-between px-2 py-1.5 rounded"
                       style={{ background: "var(--surface-base)" }}
                     >
-                      <span class="text-sm" style={{ color: "var(--text-base)" }}>
+                      <span class="text-sm" style={{ color: "var(--text-primary)" }}>
                         {shortcut.description}
                       </span>
                       <kbd
@@ -423,7 +423,7 @@ export function AccessibilityHelp() {
             <h3
               class="text-sm font-semibold px-2 py-1.5 rounded mb-2"
               style={{
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
                 background: "var(--surface-base)",
               }}
             >
@@ -457,7 +457,7 @@ export function AccessibilityHelp() {
             <h3
               class="text-sm font-semibold px-2 py-1.5 rounded mb-2 flex items-center gap-2"
               style={{
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
                 background: "var(--surface-base)",
               }}
             >
@@ -533,7 +533,7 @@ export function AccessibilityHelp() {
         <div class="flex items-center gap-3 mb-3">
           <Icon name="font" size={16} style={{ color: "var(--accent)" }} />
           <div>
-            <div class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+            <div class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
               Font Size
             </div>
             <div class="text-xs" style={{ color: "var(--text-weak)" }}>
@@ -567,7 +567,7 @@ export function AccessibilityHelp() {
             class="text-xs font-mono px-2 py-1 rounded"
             style={{
               background: "var(--background-base)",
-              color: "var(--text-base)",
+              color: "var(--text-primary)",
               "min-width": "48px",
               "text-align": "center",
             }}
@@ -593,7 +593,7 @@ export function AccessibilityHelp() {
           class="w-full px-4 py-2 text-sm rounded-md transition-colors"
           style={{
             background: "var(--surface-raised)",
-            color: "var(--text-base)",
+            color: "var(--text-primary)",
             border: "1px solid var(--border-weak)",
           }}
           onMouseEnter={(e) => {
@@ -640,7 +640,7 @@ export function AccessibilityHelp() {
               <h2
                 id="accessibility-help-title"
                 class="text-lg font-semibold"
-                style={{ color: "var(--text-base)" }}
+                style={{ color: "var(--text-primary)" }}
               >
                 Accessibility Help
               </h2>
@@ -824,7 +824,7 @@ function SettingToggle(props: SettingToggleProps) {
       <div class="flex items-center gap-3">
         <span style={{ color: "var(--accent)" }}>{props.icon}</span>
         <div>
-          <div class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+          <div class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
             {props.title}
           </div>
           <div class="text-xs" style={{ color: "var(--text-weak)" }}>
diff --git a/src/components/ActivityIndicator.tsx b/src/components/ActivityIndicator.tsx
index 110ba914..0a36290d 100644
--- a/src/components/ActivityIndicator.tsx
+++ b/src/components/ActivityIndicator.tsx
@@ -101,7 +101,7 @@ function TaskItem(props: TaskItemProps) {
         <div class="flex items-center gap-2">
           <span
             class="text-xs font-medium truncate"
-            style={{ color: "var(--text-base)" }}
+            style={{ color: "var(--text-primary)" }}
           >
             {props.task.title}
           </span>
diff --git a/src/components/AgentsManager.tsx b/src/components/AgentsManager.tsx
index 3e6c91ac..669e8fcf 100644
--- a/src/components/AgentsManager.tsx
+++ b/src/components/AgentsManager.tsx
@@ -487,7 +487,7 @@ Guidelines for generating agents:
           style={{ "border-color": "var(--border-weak)" }}
         >
           <div class="flex items-center gap-2">
-            <span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+            <span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
               {mode() === "list" ? "Agents" : mode() === "ai" ? "Generate Agent with AI" : mode() === "create" ? "Create Agent" : "Edit Agent"}
             </span>
           </div>
@@ -510,7 +510,7 @@ Guidelines for generating agents:
                 class="flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded border transition-colors hover:bg-[var(--surface-raised)]"
                 style={{ 
                   "border-color": "var(--border-base)",
-                  color: "var(--text-base)"
+                  color: "var(--text-primary)"
                 }}
               >
                 <Icon name="bolt" size={16} />
@@ -557,7 +557,7 @@ Guidelines for generating agents:
                     <div class="flex items-start justify-between">
                       <div class="flex-1 min-w-0">
                         <div class="flex items-center gap-2">
-                          <span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+                          <span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
                             {agent.name}
                           </span>
                           <span 
@@ -602,7 +602,7 @@ Guidelines for generating agents:
             <div class="space-y-4">
               <div class="text-center mb-6">
                 <Icon name="bolt" size={32} style={{ color: "var(--text-weak)" }} class="mx-auto mb-2" />
-                <p class="text-sm" style={{ color: "var(--text-base)" }}>
+                <p class="text-sm" style={{ color: "var(--text-primary)" }}>
                   Describe the agent you want to create
                 </p>
                 <p class="text-xs mt-1" style={{ color: "var(--text-weaker)" }}>
@@ -622,7 +622,7 @@ Guidelines for generating agents:
                     style={{ 
                       "border-color": formScope() === "project" ? "var(--text-weak)" : "var(--border-weak)",
                       background: formScope() === "project" ? "var(--surface-raised)" : "transparent",
-                      color: "var(--text-base)"
+                      color: "var(--text-primary)"
                     }}
                   >
                     <Icon name="folder" size={14} />
@@ -634,7 +634,7 @@ Guidelines for generating agents:
                     style={{ 
                       "border-color": formScope() === "user" ? "var(--text-weak)" : "var(--border-weak)",
                       background: formScope() === "user" ? "var(--surface-raised)" : "transparent",
-                      color: "var(--text-base)"
+                      color: "var(--text-primary)"
                     }}
                   >
                     <Icon name="user" size={14} />
@@ -657,7 +657,7 @@ Guidelines for generating agents:
                   style={{ 
                     background: "var(--background-base)",
                     "border-color": "var(--border-base)",
-                    color: "var(--text-base)"
+                    color: "var(--text-primary)"
                   }}
                   disabled={generating()}
                 />
@@ -735,7 +735,7 @@ Guidelines for generating agents:
                     style={{ 
                       "border-color": formScope() === "project" ? "var(--text-weak)" : "var(--border-weak)",
                       background: formScope() === "project" ? "var(--surface-raised)" : "transparent",
-                      color: "var(--text-base)"
+                      color: "var(--text-primary)"
                     }}
                   >
                     <Icon name="folder" size={14} />
@@ -747,7 +747,7 @@ Guidelines for generating agents:
                     style={{ 
                       "border-color": formScope() === "user" ? "var(--text-weak)" : "var(--border-weak)",
                       background: formScope() === "user" ? "var(--surface-raised)" : "transparent",
-                      color: "var(--text-base)"
+                      color: "var(--text-primary)"
                     }}
                   >
                     <Icon name="user" size={14} />
@@ -770,7 +770,7 @@ Guidelines for generating agents:
                   style={{ 
                     background: "var(--background-base)",
                     "border-color": "var(--border-base)",
-                    color: "var(--text-base)"
+                    color: "var(--text-primary)"
                   }}
                 />
               </div>
@@ -789,7 +789,7 @@ Guidelines for generating agents:
                   style={{ 
                     background: "var(--background-base)",
                     "border-color": "var(--border-base)",
-                    color: "var(--text-base)"
+                    color: "var(--text-primary)"
                   }}
                 />
               </div>
@@ -825,7 +825,7 @@ Guidelines for generating agents:
                         class="flex items-center gap-2 px-2 py-1.5 rounded text-xs text-left transition-colors"
                         style={{ 
                           background: formTools().includes(tool.id) ? "var(--surface-raised)" : "transparent",
-                          color: "var(--text-base)"
+                          color: "var(--text-primary)"
                         }}
                       >
                         <span style={{ color: formTools().includes(tool.id) ? "var(--text-base)" : "var(--text-weaker)" }}>
@@ -850,7 +850,7 @@ Guidelines for generating agents:
                   style={{ 
                     background: "var(--background-base)",
                     "border-color": "var(--border-base)",
-                    color: "var(--text-base)"
+                    color: "var(--text-primary)"
                   }}
                 >
                   <For each={MODELS}>
@@ -875,7 +875,7 @@ Guidelines for generating agents:
                   style={{ 
                     background: "var(--background-base)",
                     "border-color": "var(--border-base)",
-                    color: "var(--text-base)"
+                    color: "var(--text-primary)"
                   }}
                 />
               </div>
diff --git a/src/components/CallHierarchyView.tsx b/src/components/CallHierarchyView.tsx
index e608276b..386dd3b3 100644
--- a/src/components/CallHierarchyView.tsx
+++ b/src/components/CallHierarchyView.tsx
@@ -587,7 +587,7 @@ function CallHierarchyNode(props: CallHierarchyNodeProps) {
         {/* Function name */}
         <span
           class="text-sm font-medium truncate"
-          style={{ color: "var(--text-base)" }}
+          style={{ color: "var(--text-primary)" }}
         >
           {hierarchyItem().name}
         </span>
@@ -1416,7 +1416,7 @@ export function CallHierarchyView(props: CallHierarchyViewProps) {
             <Show when={rootItem()}>
               <div class="flex items-center gap-2 flex-1 min-w-0">
                 {getSymbolIcon(rootItem()!.kind)}
-                <span class="text-sm font-medium truncate" style={{ color: "var(--text-base)" }}>
+                <span class="text-sm font-medium truncate" style={{ color: "var(--text-primary)" }}>
                   {rootItem()!.name}
                 </span>
                 <span class="text-xs" style={{ color: "var(--text-weak)" }}>
@@ -1550,7 +1550,7 @@ export function CallHierarchyView(props: CallHierarchyViewProps) {
                 <Show when={preview() && !preview()!.loading && preview()!.content.length > 0}>
                   <pre
                     class="text-xs font-mono leading-relaxed"
-                    style={{ color: "var(--text-base)" }}
+                    style={{ color: "var(--text-primary)" }}
                   >
                     <For each={preview()!.content as unknown as Array<{ lineNumber: number; content: string; isHighlighted: boolean }>}>
                       {(line) => (
diff --git a/src/components/CommandCenter.tsx b/src/components/CommandCenter.tsx
index 0523d38b..e56aca92 100644
--- a/src/components/CommandCenter.tsx
+++ b/src/components/CommandCenter.tsx
@@ -476,6 +476,7 @@ export function CommandCenter() {
       {/* Input Field */}
       <Show when={isFocused() || isExpanded()}>
         <input
+          aria-label="Search commands"
           ref={inputRef}
           type="text"
           value={query()}
diff --git a/src/components/CommandPalette.tsx b/src/components/CommandPalette.tsx
index f2440f83..d00c4df2 100644
--- a/src/components/CommandPalette.tsx
+++ b/src/components/CommandPalette.tsx
@@ -381,6 +381,7 @@ export function CommandPalette() {
         <div 
           id="quick-input-list"
           role="listbox"
+          aria-label="Command palette options"
           style={{ "line-height": "18px" }}
         >
           <div 
diff --git a/src/components/DirectoryPicker.tsx b/src/components/DirectoryPicker.tsx
index dca79ec3..13b5074b 100644
--- a/src/components/DirectoryPicker.tsx
+++ b/src/components/DirectoryPicker.tsx
@@ -196,7 +196,7 @@ export function DirectoryPicker(props: DirectoryPickerProps) {
             }}
             placeholder="New folder name..."
             class="flex-1 text-xs bg-transparent outline-none"
-            style={{ color: "var(--text-base)" }}
+            style={{ color: "var(--text-primary)" }}
             autofocus
           />
           <button
@@ -255,7 +255,7 @@ export function DirectoryPicker(props: DirectoryPickerProps) {
                 class="w-full flex items-center gap-2 px-3 py-2 hover:bg-[var(--surface-raised)] transition-colors text-left"
               >
 <Icon name="folder" size={14} class="shrink-0" style={{ color: "var(--text-weak)" }} />
-                <span class="text-xs truncate" style={{ color: "var(--text-base)" }}>
+                <span class="text-xs truncate" style={{ color: "var(--text-primary)" }}>
                   {entry.name}
                 </span>
               </button>
@@ -275,7 +275,7 @@ export function DirectoryPicker(props: DirectoryPickerProps) {
           </div>
           <div 
             class="text-xs font-mono truncate"
-            style={{ color: "var(--text-base)" }}
+            style={{ color: "var(--text-primary)" }}
             title={currentPath()}
           >
             {currentPath()}
@@ -297,7 +297,7 @@ export function DirectoryPicker(props: DirectoryPickerProps) {
             class="px-2 py-1 text-xs rounded transition-colors"
             style={{ 
               background: "var(--surface-raised)",
-              color: "var(--text-base)"
+              color: "var(--text-primary)"
             }}
           >
             select
diff --git a/src/components/EmmetWrapDialog.tsx b/src/components/EmmetWrapDialog.tsx
index 237d5c14..8920e573 100644
--- a/src/components/EmmetWrapDialog.tsx
+++ b/src/components/EmmetWrapDialog.tsx
@@ -145,7 +145,7 @@ export function EmmetWrapDialog() {
                 class="w-full px-3 py-2 rounded text-[14px] outline-none border transition-colors"
                 style={{ 
                   background: "var(--background-base)",
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                   "border-color": "var(--border-default)",
                 }}
                 value={abbreviation()}
@@ -174,7 +174,7 @@ export function EmmetWrapDialog() {
                 class="p-3 rounded text-[13px] font-mono overflow-x-auto max-h-[120px] overflow-y-auto"
                 style={{ 
                   background: "var(--background-base)",
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                   "white-space": "pre-wrap",
                   "word-break": "break-word",
                 }}
diff --git a/src/components/FileFinder.tsx b/src/components/FileFinder.tsx
index 9f487dca..5e4cc26c 100644
--- a/src/components/FileFinder.tsx
+++ b/src/components/FileFinder.tsx
@@ -1008,11 +1008,11 @@ export function FileFinder() {
         </Show>
 
         {/* Results list - Design specs: max-height 400px */}
-        <div 
+        <div
           id="file-finder-list"
           role="listbox"
-          style={{
-            "max-height": "400px",
+          aria-label="File finder results"
+          style={{            "max-height": "400px",
             overflow: "auto",
             "overscroll-behavior": "contain",
           }}
diff --git a/src/components/FormatterSelector.tsx b/src/components/FormatterSelector.tsx
index 7c9ec921..95ec2b7b 100644
--- a/src/components/FormatterSelector.tsx
+++ b/src/components/FormatterSelector.tsx
@@ -504,7 +504,7 @@ export function FormatterPromptDialog(props: FormatterPromptDialogProps) {
         >
           {/* Header */}
           <div class="px-4 py-3 border-b" style={{ "border-color": "var(--border-weak)" }}>
-            <h2 class="text-lg font-semibold" style={{ color: "var(--text-base)" }}>
+            <h2 class="text-lg font-semibold" style={{ color: "var(--text-primary)" }}>
               Choose a Formatter
             </h2>
             <p class="text-sm mt-1" style={{ color: "var(--text-weaker)" }}>
@@ -548,7 +548,7 @@ export function FormatterPromptDialog(props: FormatterPromptDialogProps) {
                       </div>
                       <div class="flex-1 min-w-0">
                         <div class="flex items-center gap-2">
-                          <span class="font-medium" style={{ color: "var(--text-base)" }}>
+                          <span class="font-medium" style={{ color: "var(--text-primary)" }}>
                             {FORMATTER_DISPLAY_NAMES[formatterId]}
                           </span>
                           <Show when={!isAvailable()}>
@@ -592,7 +592,7 @@ export function FormatterPromptDialog(props: FormatterPromptDialogProps) {
                     </div>
                     <div class="flex-1 min-w-0">
                       <div class="flex items-center gap-2">
-                        <span class="font-medium" style={{ color: "var(--text-base)" }}>
+                        <span class="font-medium" style={{ color: "var(--text-primary)" }}>
                           {provider.name}
                         </span>
                         <span
diff --git a/src/components/Journal.tsx b/src/components/Journal.tsx
index 61b8a0be..d0398504 100644
--- a/src/components/Journal.tsx
+++ b/src/components/Journal.tsx
@@ -282,7 +282,7 @@ export function JournalPanel() {
                 </button>
                 
                 <div class="text-center">
-                  <span class="font-medium" style={{ color: "var(--text-base)" }}>
+                  <span class="font-medium" style={{ color: "var(--text-primary)" }}>
                     {MONTHS[journal.state.selectedDate.getMonth()]} {journal.state.selectedDate.getFullYear()}
                   </span>
                 </div>
@@ -380,7 +380,7 @@ export function JournalPanel() {
                         {(template) => (
                           <button
                             class="w-full px-3 py-2 text-left text-sm hover:bg-white/10 transition-colors"
-                            style={{ color: "var(--text-base)" }}
+                            style={{ color: "var(--text-primary)" }}
                             onClick={() => handleNewEntry(template.id)}
                           >
                             {template.name}
@@ -406,7 +406,7 @@ export function JournalPanel() {
                     type="text"
                     placeholder="Search journal entries..."
                     class="flex-1 bg-transparent outline-none text-sm"
-                    style={{ color: "var(--text-base)" }}
+                    style={{ color: "var(--text-primary)" }}
                     value={searchInput()}
                     onInput={(e) => setSearchInput(e.currentTarget.value)}
                     onKeyDown={handleSearchKeyDown}
@@ -426,7 +426,7 @@ export function JournalPanel() {
               </div>
 
               {/* Search results */}
-              <div class="flex-1 overflow-y-auto">
+              <div class="flex-1 overflow-y-auto" role="region" aria-label="Entries list">
                 <Show when={journal.state.isSearching}>
                   <div class="p-4 text-center">
                     <div class="animate-spin w-6 h-6 border-2 border-current border-t-transparent rounded-full mx-auto" style={{ color: "var(--accent-primary)" }} />
@@ -453,7 +453,7 @@ export function JournalPanel() {
                         >
                           <div class="flex items-center gap-2 mb-1">
                             <Icon name="file-lines" class="w-4 h-4 shrink-0" style={{ color: "var(--text-weak)" }} />
-                            <span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+                            <span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
                               {formatDisplayDate(entry.date)}
                             </span>
                           </div>
@@ -485,7 +485,7 @@ export function JournalPanel() {
                   <div class="min-w-0">
                     <h2
                       class="font-medium truncate"
-                      style={{ color: "var(--text-base)" }}
+                      style={{ color: "var(--text-primary)" }}
                     >
                       {formatDisplayDate(journal.state.currentEntry!.date)}
                     </h2>
@@ -562,7 +562,7 @@ export function JournalPanel() {
                       class="w-full h-full p-4 resize-none outline-none font-mono text-sm"
                       style={{
                         background: "transparent",
-                        color: "var(--text-base)",
+                        color: "var(--text-primary)",
                       }}
                       value={journal.state.currentEntry?.content || ""}
                       onInput={(e) => journal.updateEntryContent(e.currentTarget.value)}
diff --git a/src/components/MultiDiffView.tsx b/src/components/MultiDiffView.tsx
index 43df68a4..9915d2c9 100644
--- a/src/components/MultiDiffView.tsx
+++ b/src/components/MultiDiffView.tsx
@@ -566,7 +566,7 @@ export function MultiDiffView(props: MultiDiffViewProps) {
               ) : (
                 <Icon name="chevron-right" class="w-3.5 h-3.5" style={{ color: "var(--text-weak)" }} />
               )}
-              <Text size="xs" weight="medium" style={{ color: "var(--text-base)" }}>
+              <Text size="xs" weight="medium" style={{ color: "var(--text-primary)" }}>
                 {sectionProps.title}
               </Text>
               <Badge
@@ -599,7 +599,7 @@ export function MultiDiffView(props: MultiDiffViewProps) {
       >
         {/* Title and stats */}
         <div class="flex items-center gap-3">
-          <span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+          <span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
             {props.title || "Changes"}
           </span>
           <div class="flex items-center gap-2 text-xs">
@@ -759,7 +759,7 @@ export function MultiDiffView(props: MultiDiffViewProps) {
                 >
                   <div class="flex items-center gap-2">
                     {getStatusIcon(file().status)}
-                    <span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+                    <span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
                       {file().path}
                     </span>
                     <Show when={file().oldPath}>
diff --git a/src/components/MultiLineSearchInput.tsx b/src/components/MultiLineSearchInput.tsx
index 369bc0bd..3b1d36c3 100644
--- a/src/components/MultiLineSearchInput.tsx
+++ b/src/components/MultiLineSearchInput.tsx
@@ -189,7 +189,7 @@ export function MultiLineSearchInput(props: MultiLineSearchInputProps) {
                 border: "none",
                 "font-size": "13px",
                 "min-width": "0",
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
               }}
               value={displayValue()}
               onInput={(e) => props.onChange(e.currentTarget.value.replace(/\\n/g, '\n'))}
@@ -244,7 +244,7 @@ export function MultiLineSearchInput(props: MultiLineSearchInputProps) {
               "line-height": "1.4",
               resize: "none",
               "min-width": "0",
-              color: "var(--text-base)",
+              color: "var(--text-primary)",
               "min-height": "36px",
               "max-height": "120px",
               overflow: "auto",
diff --git a/src/components/ProjectSearch.tsx b/src/components/ProjectSearch.tsx
index 252aec11..cc766eef 100644
--- a/src/components/ProjectSearch.tsx
+++ b/src/components/ProjectSearch.tsx
@@ -163,20 +163,20 @@ function highlightMatch(text: string, start: number, end: number): JSX.Element {
   
   return (
     <>
-      <span style={{ color: "var(--text-base)" }}>{text.slice(0, safeStart)}</span>
+      <span style={{ color: "var(--text-primary)" }}>{text.slice(0, safeStart)}</span>
       <span 
         style={{ 
           padding: "0 4px",
           "border-radius": "var(--cortex-radius-sm)",
           "font-weight": "600",
           background: "rgba(234, 179, 8, 0.4)",
-          color: "var(--text-base)",
+          color: "var(--text-primary)",
           "box-shadow": "0 0 0 1px rgba(234, 179, 8, 0.6)",
         }}
       >
         {text.slice(safeStart, safeEnd)}
       </span>
-      <span style={{ color: "var(--text-base)" }}>{text.slice(safeEnd)}</span>
+      <span style={{ color: "var(--text-primary)" }}>{text.slice(safeEnd)}</span>
     </>
   );
 }
@@ -1049,7 +1049,7 @@ export function ProjectSearch() {
           >
             <div style={{ display: "flex", "align-items": "center", gap: "8px" }}>
               <Icon name="magnifying-glass" style={{ width: "16px", height: "16px", color: "var(--text-weak)" }} />
-              <span style={{ "font-size": "13px", "font-weight": "500", color: "var(--text-base)" }}>
+              <span style={{ "font-size": "13px", "font-weight": "500", color: "var(--text-primary)" }}>
                 Search in Project
               </span>
             </div>
@@ -1122,7 +1122,7 @@ export function ProjectSearch() {
                       border: "none",
                       "font-size": "13px",
                       "min-width": "0",
-                      color: "var(--text-base)"
+                      color: "var(--text-primary)"
                     }}
                     value={query()}
                     onInput={(e) => setQuery(e.currentTarget.value)}
@@ -1265,7 +1265,7 @@ export function ProjectSearch() {
                           overflow: "hidden",
                           "text-overflow": "ellipsis",
                           "white-space": "nowrap",
-                          color: "var(--text-base)" 
+                          color: "var(--text-primary)" 
                         }}
                       >
                         {item}
@@ -1389,7 +1389,7 @@ export function ProjectSearch() {
                     border: "none",
                     "font-size": "13px",
                     "min-width": "0",
-                    color: "var(--text-base)"
+                    color: "var(--text-primary)"
                   }}
                   value={replaceText()}
                   onInput={(e) => {
@@ -1652,7 +1652,7 @@ export function ProjectSearch() {
                       outline: "none",
                       border: "none",
                       background: "transparent",
-                      color: "var(--text-base)",
+                      color: "var(--text-primary)",
                     }}
                     value={includePattern()}
                     onInput={(e) => setIncludePattern(e.currentTarget.value)}
@@ -1768,7 +1768,7 @@ export function ProjectSearch() {
                             border: "none",
                             cursor: "pointer",
                             background: includeHistoryIndex() === index() ? "var(--surface-active)" : "transparent",
-                            color: "var(--text-base)",
+                            color: "var(--text-primary)",
                             overflow: "hidden",
                             "text-overflow": "ellipsis",
                             "white-space": "nowrap",
@@ -1811,7 +1811,7 @@ export function ProjectSearch() {
                       outline: "none",
                       border: "none",
                       background: "transparent",
-                      color: "var(--text-base)",
+                      color: "var(--text-primary)",
                     }}
                     value={excludePattern()}
                     onInput={(e) => setExcludePattern(e.currentTarget.value)}
@@ -1927,7 +1927,7 @@ export function ProjectSearch() {
                             border: "none",
                             cursor: "pointer",
                             background: excludeHistoryIndex() === index() ? "var(--surface-active)" : "transparent",
-                            color: "var(--text-base)",
+                            color: "var(--text-primary)",
                             overflow: "hidden",
                             "text-overflow": "ellipsis",
                             "white-space": "nowrap",
@@ -1981,7 +1981,7 @@ export function ProjectSearch() {
               }}
             >
               <Icon name="spinner" style={{ width: "14px", height: "14px", animation: "spin 1s linear infinite", color: "var(--accent-primary)" }} />
-              <span style={{ color: "var(--text-base)" }}>
+              <span style={{ color: "var(--text-primary)" }}>
                 Indexing for AI search: {semanticSearch.state.indexingProgress}%
               </span>
               <button
@@ -2091,7 +2091,7 @@ export function ProjectSearch() {
                       }
                     </span>
                     <Icon name="file" style={{ width: "16px", height: "16px", "flex-shrink": "0", color: "var(--accent-primary)" }} />
-                    <span style={{ "font-size": "13px", "font-weight": "bold", overflow: "hidden", "text-overflow": "ellipsis", "white-space": "nowrap", color: "var(--text-base)" }}>
+                    <span style={{ "font-size": "13px", "font-weight": "bold", overflow: "hidden", "text-overflow": "ellipsis", "white-space": "nowrap", color: "var(--text-primary)" }}>
                       {getFileName(result.file)}
                     </span>
                     <Show when={getFileDirectory(result.file)}>
@@ -2362,7 +2362,7 @@ export function ProjectSearch() {
                   }}
                 >
                   <Icon name="bolt" style={{ width: "14px", height: "14px", color: "var(--accent-primary)" }} />
-                  <span style={{ "font-size": "11px", "font-weight": "500", color: "var(--text-base)" }}>
+                  <span style={{ "font-size": "11px", "font-weight": "500", color: "var(--text-primary)" }}>
                     AI Semantic Matches
                   </span>
                   <span 
@@ -2409,7 +2409,7 @@ export function ProjectSearch() {
                       }}
                     >
                       <Icon name="file" style={{ width: "14px", height: "14px", "flex-shrink": "0", color: "var(--text-weak)" }} />
-                      <span style={{ "font-size": "12px", "font-weight": "500", overflow: "hidden", "text-overflow": "ellipsis", "white-space": "nowrap", color: "var(--text-base)" }}>
+                      <span style={{ "font-size": "12px", "font-weight": "500", overflow: "hidden", "text-overflow": "ellipsis", "white-space": "nowrap", color: "var(--text-primary)" }}>
                         {getFileName(aiResult.file)}
                       </span>
                       <Show when={getFileDirectory(aiResult.file)}>
diff --git a/src/components/ProjectSymbols.tsx b/src/components/ProjectSymbols.tsx
index c32e5db5..4c1e8809 100644
--- a/src/components/ProjectSymbols.tsx
+++ b/src/components/ProjectSymbols.tsx
@@ -759,7 +759,7 @@ export function ProjectSymbols() {
                   outline: "none", 
                   border: "none",
                   "font-size": "14px",
-                  color: "var(--text-base)" 
+                  color: "var(--text-primary)" 
                 }}
                 value={query()}
                 onInput={(e) => handleQueryChange(e.currentTarget.value)}
@@ -858,7 +858,7 @@ export function ProjectSymbols() {
                       background: index() === selectedIndex()
                         ? "var(--surface-active)"
                         : "transparent",
-                      color: "var(--text-base)",
+                      color: "var(--text-primary)",
                     }}
                     data-selected={index() === selectedIndex()}
                     onMouseEnter={() => setSelectedIndex(index())}
@@ -948,7 +948,7 @@ export function ProjectSymbols() {
                     "font-family": "'JetBrains Mono', monospace",
                     "line-height": "1.5",
                     margin: "0",
-                    color: "var(--text-base)" 
+                    color: "var(--text-primary)" 
                   }}
                 >
                   <For each={previewContent() as unknown as Array<{ lineNumber: number; content: string; isSymbolLine: boolean }>}>
diff --git a/src/components/RecentProjects.tsx b/src/components/RecentProjects.tsx
index 880c0ef9..7b4e0459 100644
--- a/src/components/RecentProjects.tsx
+++ b/src/components/RecentProjects.tsx
@@ -148,7 +148,7 @@ export function RecentProjectsModal(props: RecentProjectsModalProps) {
               value={searchQuery()}
               onInput={(e) => setSearchQuery(e.currentTarget.value)}
               class="flex-1 bg-transparent outline-none text-sm"
-              style={{ color: "var(--text-base)" }}
+              style={{ color: "var(--text-primary)" }}
             />
             <Show when={searchQuery()}>
               <button
@@ -267,7 +267,7 @@ function RecentProjectItem(props: RecentProjectItemProps) {
         <div class="flex items-center gap-2">
           <span
             class="text-sm font-medium truncate"
-            style={{ color: "var(--text-base)" }}
+            style={{ color: "var(--text-primary)" }}
           >
             {props.project.name}
           </span>
@@ -399,7 +399,7 @@ export function RecentProjectsList(props: RecentProjectsListProps) {
                 <div class="flex items-center gap-2">
                   <span
                     class="text-sm truncate"
-                    style={{ color: "var(--text-base)" }}
+                    style={{ color: "var(--text-primary)" }}
                   >
                     {project.name}
                   </span>
@@ -486,7 +486,7 @@ export function WelcomePageRecentProjects(props: WelcomePageRecentProjectsProps)
             style={{
               background: "var(--surface-base)",
               border: "1px solid var(--border-weak)",
-              color: "var(--text-base)",
+              color: "var(--text-primary)",
             }}
           />
         </div>
@@ -545,7 +545,7 @@ export function WelcomePageRecentProjects(props: WelcomePageRecentProjectsProps)
                 class="mt-4 px-4 py-2 text-sm rounded-lg transition-colors"
                 style={{
                   background: "var(--surface-raised)",
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                 }}
               >
                 Open Folder
diff --git a/src/components/RecentWorkspaces.tsx b/src/components/RecentWorkspaces.tsx
index a94d6e2e..6de590c4 100644
--- a/src/components/RecentWorkspaces.tsx
+++ b/src/components/RecentWorkspaces.tsx
@@ -174,7 +174,7 @@ export function RecentWorkspacesModal(props: RecentWorkspacesModalProps) {
               value={searchQuery()}
               onInput={(e) => setSearchQuery(e.currentTarget.value)}
               class="flex-1 bg-transparent outline-none text-sm"
-              style={{ color: "var(--text-base)" }}
+              style={{ color: "var(--text-primary)" }}
             />
             <Show when={searchQuery()}>
               <button
@@ -320,7 +320,7 @@ function RecentWorkspaceItem(props: RecentWorkspaceItemProps) {
         <div class="flex items-center gap-2">
           <span
             class="text-sm font-medium truncate"
-            style={{ color: "var(--text-base)" }}
+            style={{ color: "var(--text-primary)" }}
           >
             {props.workspace.name}
           </span>
@@ -442,7 +442,7 @@ export function RecentWorkspacesList(props: RecentWorkspacesListProps) {
               </Show>
               <div class="flex-1 min-w-0 text-left">
                 <div class="flex items-center gap-2">
-                  <span class="text-sm truncate" style={{ color: "var(--text-base)" }}>
+                  <span class="text-sm truncate" style={{ color: "var(--text-primary)" }}>
                     {ws.name}
                   </span>
                   <Show when={ws.folderCount > 1}>
diff --git a/src/components/ReferencesView.tsx b/src/components/ReferencesView.tsx
index 9c5da7e8..4ae479f2 100644
--- a/src/components/ReferencesView.tsx
+++ b/src/components/ReferencesView.tsx
@@ -803,7 +803,7 @@ export function ReferencesView() {
                 </button>
               </Show>
               <Icon name="magnifying-glass" style={{ width: "16px", height: "16px", color: "var(--text-weak)" }} />
-              <span style={{ "font-size": "13px", "font-weight": "500", color: "var(--text-base)" }}>
+              <span style={{ "font-size": "13px", "font-weight": "500", color: "var(--text-primary)" }}>
                 {showHistory()
                   ? "Reference History"
                   : currentSearch()
@@ -907,7 +907,7 @@ export function ReferencesView() {
                             overflow: "hidden",
                             "text-overflow": "ellipsis",
                             "white-space": "nowrap",
-                            color: "var(--text-base)"
+                            color: "var(--text-primary)"
                           }}
                         >
                           {search.symbolName}
@@ -967,7 +967,7 @@ export function ReferencesView() {
                     border: "none",
                     "font-size": "13px",
                     "min-width": "0",
-                    color: "var(--text-base)"
+                    color: "var(--text-primary)"
                   }}
                   value={searchQuery()}
                   onInput={(e) => setSearchQuery(e.currentTarget.value)}
@@ -1188,7 +1188,7 @@ export function ReferencesView() {
                             overflow: "hidden",
                             "text-overflow": "ellipsis",
                             "white-space": "nowrap",
-                            color: "var(--text-base)"
+                            color: "var(--text-primary)"
                           }}
                         >
                           {fileGroup.fileName}
diff --git a/src/components/SearchEditor.tsx b/src/components/SearchEditor.tsx
index 6ba76dae..3eadc36f 100644
--- a/src/components/SearchEditor.tsx
+++ b/src/components/SearchEditor.tsx
@@ -1100,7 +1100,7 @@ export function SearchEditor(props: SearchEditorProps) {
           >
             <div style={{ display: "flex", "align-items": "center", gap: "8px" }}>
               <Icon name="magnifying-glass" style={{ width: "16px", height: "16px", color: "var(--text-weak)" }} />
-              <span style={{ "font-size": "13px", "font-weight": "500", color: "var(--text-base)" }}>
+              <span style={{ "font-size": "13px", "font-weight": "500", color: "var(--text-primary)" }}>
                 Search Editor
               </span>
               <Show when={hasEdits()}>
@@ -1243,7 +1243,7 @@ export function SearchEditor(props: SearchEditorProps) {
                   border: "none",
                   "font-size": "13px",
                   "min-width": "0",
-                  color: "var(--text-base)"
+                  color: "var(--text-primary)"
                 }}
                 value={query()}
                 onInput={(e) => setQuery(e.currentTarget.value)}
@@ -1288,7 +1288,7 @@ export function SearchEditor(props: SearchEditorProps) {
                   outline: "none",
                   border: "none",
                   background: "var(--background-base)",
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                 }}
                 value={includePattern()}
                 onInput={(e) => setIncludePattern(e.currentTarget.value)}
@@ -1303,7 +1303,7 @@ export function SearchEditor(props: SearchEditorProps) {
                   outline: "none",
                   border: "none",
                   background: "var(--background-base)",
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                 }}
                 value={excludePattern()}
                 onInput={(e) => setExcludePattern(e.currentTarget.value)}
@@ -1465,7 +1465,7 @@ export function SearchEditor(props: SearchEditorProps) {
                           overflow: "hidden",
                           "text-overflow": "ellipsis",
                           "white-space": "nowrap",
-                          color: "var(--text-base)"
+                          color: "var(--text-primary)"
                         }}
                       >
                         {getFileName(result.file)}
@@ -1639,7 +1639,7 @@ export function SearchEditor(props: SearchEditorProps) {
                 border: "none",
                 background: "transparent",
                 cursor: "pointer",
-                color: "var(--text-base)"
+                color: "var(--text-primary)"
               }}
               onMouseEnter={(e) => e.currentTarget.style.background = "rgba(255, 255, 255, 0.1)"}
               onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
@@ -1672,7 +1672,7 @@ export function SearchEditor(props: SearchEditorProps) {
                 border: "none",
                 background: "transparent",
                 cursor: "pointer",
-                color: "var(--text-base)"
+                color: "var(--text-primary)"
               }}
               onMouseEnter={(e) => e.currentTarget.style.background = "rgba(255, 255, 255, 0.1)"}
               onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
@@ -1705,7 +1705,7 @@ export function SearchEditor(props: SearchEditorProps) {
                   border: "none",
                   background: "transparent",
                   cursor: "pointer",
-                  color: "var(--text-base)"
+                  color: "var(--text-primary)"
                 }}
                 onMouseEnter={(e) => e.currentTarget.style.background = "rgba(255, 255, 255, 0.1)"}
                 onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
diff --git a/src/components/SemanticSearch.tsx b/src/components/SemanticSearch.tsx
index 1cc84705..d776d77b 100644
--- a/src/components/SemanticSearch.tsx
+++ b/src/components/SemanticSearch.tsx
@@ -266,7 +266,7 @@ export function SemanticSearch(props: SemanticSearchProps) {
         }}
       >
         <Icon name="spinner" class="w-3.5 h-3.5 animate-spin" style={{ color: "var(--accent-primary)" }} />
-        <span style={{ color: "var(--text-base)" }}>
+        <span style={{ color: "var(--text-primary)" }}>
           Indexing: {semanticSearch.state.indexingProgress}%
         </span>
         <Show when={semanticSearch.state.indexingCurrentFile}>
@@ -318,19 +318,19 @@ export function SemanticSearch(props: SemanticSearchProps) {
       >
         <div class="flex justify-between">
           <span style={{ color: "var(--text-weak)" }}>Indexed Files:</span>
-          <span style={{ color: "var(--text-base)" }}>{stats().totalFiles}</span>
+          <span style={{ color: "var(--text-primary)" }}>{stats().totalFiles}</span>
         </div>
         <div class="flex justify-between">
           <span style={{ color: "var(--text-weak)" }}>Total Chunks:</span>
-          <span style={{ color: "var(--text-base)" }}>{stats().totalChunks}</span>
+          <span style={{ color: "var(--text-primary)" }}>{stats().totalChunks}</span>
         </div>
         <div class="flex justify-between">
           <span style={{ color: "var(--text-weak)" }}>Cache Size:</span>
-          <span style={{ color: "var(--text-base)" }}>{(stats().cacheSize / 1024).toFixed(1)} KB</span>
+          <span style={{ color: "var(--text-primary)" }}>{(stats().cacheSize / 1024).toFixed(1)} KB</span>
         </div>
         <div class="flex justify-between">
           <span style={{ color: "var(--text-weak)" }}>Model:</span>
-          <span style={{ color: "var(--text-base)" }}>{semanticSearch.state.modelId}</span>
+          <span style={{ color: "var(--text-primary)" }}>{semanticSearch.state.modelId}</span>
         </div>
       </div>
     </Show>
@@ -444,7 +444,7 @@ export function SemanticSearch(props: SemanticSearchProps) {
           >
             <div class="flex items-center gap-2">
               <Icon name="bolt" class="w-4 h-4" style={{ color: "var(--accent-primary)" }} />
-              <span class="text-[13px] font-medium" style={{ color: "var(--text-base)" }}>
+              <span class="text-[13px] font-medium" style={{ color: "var(--text-primary)" }}>
                 AI Search
               </span>
               <Show when={semanticSearch.state.indexedFilesCount > 0}>
@@ -487,7 +487,7 @@ export function SemanticSearch(props: SemanticSearchProps) {
                 type="text"
                 placeholder="Search with natural language..."
                 class="flex-1 bg-transparent outline-none text-[13px] min-w-0"
-                style={{ color: "var(--text-base)" }}
+                style={{ color: "var(--text-primary)" }}
                 value={query()}
                 onInput={(e) => setQuery(e.currentTarget.value)}
               />
@@ -535,7 +535,7 @@ export function SemanticSearch(props: SemanticSearchProps) {
                         }
                       </span>
                       <Icon name="file" class="w-3.5 h-3.5 shrink-0" style={{ color: "var(--text-weak)" }} />
-                      <span class="text-[12px] font-medium truncate" style={{ color: "var(--text-base)" }}>
+                      <span class="text-[12px] font-medium truncate" style={{ color: "var(--text-primary)" }}>
                         {getFileName(result.file)}
                       </span>
                       <Show when={getDirectory(result.file)}>
@@ -629,7 +629,7 @@ export function SemanticSearch(props: SemanticSearchProps) {
           type="text"
           placeholder="AI Search..."
           class="flex-1 bg-transparent outline-none text-[12px] min-w-0"
-          style={{ color: "var(--text-base)" }}
+          style={{ color: "var(--text-primary)" }}
           value={query()}
           onInput={(e) => setQuery(e.currentTarget.value)}
         />
@@ -650,7 +650,7 @@ export function SemanticSearch(props: SemanticSearchProps) {
                 onClick={() => handleResultClick(result)}
               >
                 <Icon name="file" class="w-3.5 h-3.5 shrink-0" style={{ color: "var(--text-weak)" }} />
-                <span class="text-[11px] truncate flex-1" style={{ color: "var(--text-base)" }}>
+                <span class="text-[11px] truncate flex-1" style={{ color: "var(--text-primary)" }}>
                   {getFileName(result.file)}:{result.startLine + 1}
                 </span>
                 <span 
diff --git a/src/components/TerminalProfilePicker.tsx b/src/components/TerminalProfilePicker.tsx
index 19eb4f81..fb72f501 100644
--- a/src/components/TerminalProfilePicker.tsx
+++ b/src/components/TerminalProfilePicker.tsx
@@ -171,7 +171,7 @@ function ProfileEditor(props: ProfileEditorProps) {
         >
           <div class="flex items-center gap-2">
             <Icon name={iconName()} class="w-4 h-4" style={{ color: color() }} />
-            <span class="font-medium" style={{ color: "var(--text-base)" }}>
+            <span class="font-medium" style={{ color: "var(--text-primary)" }}>
               {props.isNew ? "New Terminal Profile" : "Edit Profile"}
             </span>
           </div>
@@ -200,7 +200,7 @@ function ProfileEditor(props: ProfileEditorProps) {
               style={{
                 background: "var(--surface-raised)",
                 "border-color": "var(--border-base)",
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
               }}
               autofocus
             />
@@ -221,7 +221,7 @@ function ProfileEditor(props: ProfileEditorProps) {
                 style={{
                   background: "var(--surface-raised)",
                   "border-color": "var(--border-base)",
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                 }}
               />
               <button
@@ -252,7 +252,7 @@ function ProfileEditor(props: ProfileEditorProps) {
               style={{
                 background: "var(--surface-raised)",
                 "border-color": "var(--border-base)",
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
               }}
             />
             <span class="text-xs mt-1 block" style={{ color: "var(--text-weaker)" }}>
@@ -276,7 +276,7 @@ function ProfileEditor(props: ProfileEditorProps) {
                 style={{
                   background: "var(--surface-raised)",
                   "border-color": showIconPicker() ? "var(--text-weak)" : "var(--border-base)",
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                 }}
               >
                 <Icon name={iconName()} class="w-4 h-4" style={{ color: color() }} />
@@ -313,7 +313,7 @@ function ProfileEditor(props: ProfileEditorProps) {
                             setShowIconPicker(false);
                           }}
                           class="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-[var(--surface-hover)]"
-                          style={{ color: "var(--text-base)" }}
+                          style={{ color: "var(--text-primary)" }}
                         >
                           <Icon name={iconTypeName} class="w-4 h-4" style={{ color: color() }} />
                           <span class="flex-1 text-left">{PROFILE_ICONS[iconType].label}</span>
@@ -342,7 +342,7 @@ function ProfileEditor(props: ProfileEditorProps) {
                 style={{
                   background: "var(--surface-raised)",
                   "border-color": showColorPicker() ? "var(--text-weak)" : "var(--border-base)",
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                 }}
               >
                 <div
@@ -409,7 +409,7 @@ function ProfileEditor(props: ProfileEditorProps) {
                       style={{
                         background: "var(--surface-raised)",
                         "border-color": "var(--border-base)",
-                        color: "var(--text-base)",
+                        color: "var(--text-primary)",
                       }}
                     />
                   </div>
@@ -461,7 +461,7 @@ function ProfileEditor(props: ProfileEditorProps) {
                         style={{
                           background: "var(--surface-raised)",
                           "border-color": "var(--border-base)",
-                          color: "var(--text-base)",
+                          color: "var(--text-primary)",
                         }}
                       />
                       <span class="text-xs" style={{ color: "var(--text-weaker)" }}>=</span>
@@ -474,7 +474,7 @@ function ProfileEditor(props: ProfileEditorProps) {
                         style={{
                           background: "var(--surface-raised)",
                           "border-color": "var(--border-base)",
-                          color: "var(--text-base)",
+                          color: "var(--text-primary)",
                         }}
                       />
                       <button
@@ -500,7 +500,7 @@ function ProfileEditor(props: ProfileEditorProps) {
           <button
             onClick={props.onCancel}
             class="px-4 py-2 rounded-lg text-sm font-medium hover:bg-[var(--surface-hover)]"
-            style={{ color: "var(--text-base)" }}
+            style={{ color: "var(--text-primary)" }}
           >
             Cancel
           </button>
@@ -647,7 +647,7 @@ export function TerminalProfilePicker(props: TerminalProfilePickerProps) {
         {/* Name and info */}
         <div class="flex-1 min-w-0">
           <div class="flex items-center gap-1.5">
-            <span class="text-sm truncate" style={{ color: "var(--text-base)" }}>
+            <span class="text-sm truncate" style={{ color: "var(--text-primary)" }}>
               {profile.name}
             </span>
             <Show when={profile.isDefault}>
@@ -765,7 +765,7 @@ export function TerminalProfilePicker(props: TerminalProfilePickerProps) {
           style={{
             background: "var(--surface-raised)",
             "border-color": isOpen() ? "var(--text-weak)" : "var(--border-base)",
-            color: "var(--text-base)",
+            color: "var(--text-primary)",
           }}
         >
           <Show
diff --git a/src/components/TerminalQuickFix.tsx b/src/components/TerminalQuickFix.tsx
index aee20501..262527c9 100644
--- a/src/components/TerminalQuickFix.tsx
+++ b/src/components/TerminalQuickFix.tsx
@@ -930,7 +930,7 @@ export function TerminalQuickFix(props: TerminalQuickFixProps) {
                   <path d="M10 22h4" />
                   <path d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14" />
                 </svg>
-                <span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+                <span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
                   Quick Fix
                 </span>
                 <span class="text-xs px-1.5 py-0.5 rounded-full" style={{ 
@@ -1070,7 +1070,7 @@ export function TerminalQuickFix(props: TerminalQuickFixProps) {
                               <div class="flex-1 min-w-0">
                                 <span 
                                   class="text-xs font-medium block"
-                                  style={{ color: "var(--text-base)" }}
+                                  style={{ color: "var(--text-primary)" }}
                                 >
                                   {fix.label}
                                 </span>
diff --git a/src/components/TerminalSuggest.tsx b/src/components/TerminalSuggest.tsx
index 6dea944b..4438253e 100644
--- a/src/components/TerminalSuggest.tsx
+++ b/src/components/TerminalSuggest.tsx
@@ -825,7 +825,7 @@ export function TerminalSuggest(props: TerminalSuggestProps) {
                 <div class="flex-1 min-w-0">
                   <div 
                     class="text-sm truncate"
-                    style={{ color: "var(--text-base)" }}
+                    style={{ color: "var(--text-primary)" }}
                   >
                     <HighlightedText 
                       text={suggestion.text} 
diff --git a/src/components/ToolchainSelector.tsx b/src/components/ToolchainSelector.tsx
index 1ad77a64..01ae3507 100644
--- a/src/components/ToolchainSelector.tsx
+++ b/src/components/ToolchainSelector.tsx
@@ -280,7 +280,7 @@ export function ToolchainSelector(props: ToolchainSelectorProps) {
             ref={inputRef}
             type="text"
             class="flex-1 bg-transparent outline-none text-sm"
-            style={{ color: "var(--text-base)" }}
+            style={{ color: "var(--text-primary)" }}
             placeholder={`Search ${getToolchainLabel(selectedKind())} installations...`}
             value={searchQuery()}
             onInput={(e) => setSearchQuery(e.currentTarget.value)}
@@ -309,7 +309,7 @@ export function ToolchainSelector(props: ToolchainSelectorProps) {
               <span class="text-xs font-medium" style={{ color: "var(--text-weak)" }}>
                 Active:
               </span>
-              <span class="text-xs" style={{ color: "var(--text-base)" }}>
+              <span class="text-xs" style={{ color: "var(--text-primary)" }}>
                 {activeToolchain()?.name}
               </span>
             </div>
diff --git a/src/components/TypeHierarchyView.tsx b/src/components/TypeHierarchyView.tsx
index 307bebaf..6c09dc07 100644
--- a/src/components/TypeHierarchyView.tsx
+++ b/src/components/TypeHierarchyView.tsx
@@ -852,7 +852,7 @@ function TypeHierarchyNode(props: TypeHierarchyNodeProps) {
         <span
           style={{
             "font-weight": "500",
-            color: "var(--text-base)",
+            color: "var(--text-primary)",
             "margin-right": "4px",
           }}
         >
@@ -1291,7 +1291,7 @@ export function TypeHierarchyView() {
           >
             <div class="flex items-center gap-3">
               <Icon name="font" class="w-5 h-5" style={{ color: "var(--accent-primary)" }} />
-              <span class="font-medium" style={{ color: "var(--text-base)" }}>
+              <span class="font-medium" style={{ color: "var(--text-primary)" }}>
                 Type Hierarchy
               </span>
               <Show when={currentType()}>
@@ -1488,7 +1488,7 @@ export function TypeHierarchyView() {
                   }}
                 >
                   {getTypeIcon(currentType()!.kind)}
-                  <span style={{ "font-weight": "600", color: "var(--text-base)" }}>
+                  <span style={{ "font-weight": "600", color: "var(--text-primary)" }}>
                     {currentType()!.name}
                   </span>
                   <span
diff --git a/src/components/ViewQuickAccess.tsx b/src/components/ViewQuickAccess.tsx
index a0d3fc82..28f65846 100644
--- a/src/components/ViewQuickAccess.tsx
+++ b/src/components/ViewQuickAccess.tsx
@@ -420,7 +420,7 @@ export function ViewQuickAccess() {
               type="text"
               placeholder="Type to search views..."
               class="flex-1 bg-transparent outline-none h-[40px] text-[14px]"
-              style={{ color: "var(--text-base)" }}
+              style={{ color: "var(--text-primary)" }}
               value={query()}
               onInput={(e) => setQuery(e.currentTarget.value)}
               onKeyDown={handleKeyDown}
@@ -471,7 +471,7 @@ export function ViewQuickAccess() {
                           background: index() === selectedIndex() 
                             ? "var(--surface-active)" 
                             : "transparent",
-                          color: "var(--text-base)",
+                          color: "var(--text-primary)",
                         }}
                         onMouseEnter={() => setSelectedIndex(index())}
                         onClick={() => handleSelect(view)}
diff --git a/src/components/VoiceInput.tsx b/src/components/VoiceInput.tsx
index eaf1c4f6..628025e6 100644
--- a/src/components/VoiceInput.tsx
+++ b/src/components/VoiceInput.tsx
@@ -67,7 +67,7 @@ export function VoiceInput(props: VoiceInputProps) {
 
     return {
       background: "var(--surface-raised)",
-      color: "var(--text-base)",
+      color: "var(--text-primary)",
       cursor: "pointer",
     };
   });
@@ -332,7 +332,7 @@ export function VoiceInput(props: VoiceInputProps) {
             </p>
           }
         >
-          <p class="text-sm leading-relaxed" style={{ color: "var(--text-base)" }}>
+          <p class="text-sm leading-relaxed" style={{ color: "var(--text-primary)" }}>
             {/* Show final transcript */}
             <span>{state.finalTranscript}</span>
             {/* Show interim transcript with different styling */}
diff --git a/src/components/Walkthrough.tsx b/src/components/Walkthrough.tsx
index c6e4346a..9906f18d 100644
--- a/src/components/Walkthrough.tsx
+++ b/src/components/Walkthrough.tsx
@@ -550,7 +550,7 @@ function ProgressBar(props: { progress: number; showLabel?: boolean }) {
           </span>
           <span
             class="text-xs font-medium"
-            style={{ color: "var(--text-base)" }}
+            style={{ color: "var(--text-primary)" }}
           >
             {props.progress}%
           </span>
@@ -593,7 +593,7 @@ function CompletionCelebration(props: { walkthroughTitle: string; onClose: () =>
       </div>
       <h3
         class="text-xl font-bold mb-2"
-        style={{ color: "var(--text-base)" }}
+        style={{ color: "var(--text-primary)" }}
       >
         Walkthrough Complete!
       </h3>
@@ -750,7 +750,7 @@ export function Walkthrough(props: WalkthroughProps) {
             <div>
               <h2
                 class="font-semibold"
-                style={{ color: "var(--text-base)" }}
+                style={{ color: "var(--text-primary)" }}
               >
                 {props.walkthrough.title}
               </h2>
@@ -918,7 +918,7 @@ function WalkthroughCard(props: WalkthroughCardProps) {
           <div class="flex items-center gap-2">
             <h3
               class="font-medium text-sm"
-              style={{ color: "var(--text-base)" }}
+              style={{ color: "var(--text-primary)" }}
             >
               {props.walkthrough.title}
             </h3>
@@ -1026,7 +1026,7 @@ export function WalkthroughList(props: WalkthroughListProps) {
           <div>
             <h2
               class="font-semibold"
-              style={{ color: "var(--text-base)" }}
+              style={{ color: "var(--text-primary)" }}
             >
               Walkthroughs
             </h2>
diff --git a/src/components/WebPreview.tsx b/src/components/WebPreview.tsx
index 10a750f2..459cb6b7 100644
--- a/src/components/WebPreview.tsx
+++ b/src/components/WebPreview.tsx
@@ -41,7 +41,7 @@ export function WebPreview() {
             <button
               onClick={() => setShowServerList(!showServerList())}
               class="flex items-center gap-2 px-2 py-1 rounded transition-colors hover:bg-[var(--surface-raised)]"
-              style={{ color: "var(--text-base)" }}
+              style={{ color: "var(--text-primary)" }}
             >
               <Icon name="globe" class="w-3.5 h-3.5" style={{ color: "var(--cortex-success)" }} />
               <span class="text-xs font-mono">{state.activeServer!.url}</span>
diff --git a/src/components/WebviewPanel.tsx b/src/components/WebviewPanel.tsx
index 4adbe9c1..83c2ba6f 100644
--- a/src/components/WebviewPanel.tsx
+++ b/src/components/WebviewPanel.tsx
@@ -268,7 +268,7 @@ export function WebviewPanel(props: WebviewPanelProps) {
             </Show>
             <span 
               class="text-xs font-medium truncate"
-              style={{ color: "var(--text-base)" }}
+              style={{ color: "var(--text-primary)" }}
             >
               {title()}
             </span>
@@ -374,7 +374,7 @@ export function WebviewPanel(props: WebviewPanelProps) {
               >
                 <Icon name="xmark" class="w-6 h-6" style={{ color: "var(--cortex-error)" }} />
               </div>
-              <span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+              <span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
                 Failed to load content
               </span>
               <span class="text-xs" style={{ color: "var(--text-weaker)" }}>
@@ -385,7 +385,7 @@ export function WebviewPanel(props: WebviewPanelProps) {
                 class="mt-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
                 style={{ 
                   background: "var(--surface-raised)",
-                  color: "var(--text-base)"
+                  color: "var(--text-primary)"
                 }}
               >
                 Try Again
diff --git a/src/components/WhichKey.tsx b/src/components/WhichKey.tsx
index 7abd3274..d1021e58 100644
--- a/src/components/WhichKey.tsx
+++ b/src/components/WhichKey.tsx
@@ -59,7 +59,7 @@ export function WhichKey() {
                 class="w-4 h-4 shrink-0"
                 style={{ color: "var(--text-weak)" }}
               />
-              <span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+              <span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
                 Which Key
               </span>
               <kbd
@@ -223,7 +223,7 @@ function BindingItem(props: { continuation: ContinuationBinding; showDescription
         {/* Command label */}
         <span
           class="text-sm truncate"
-          style={{ color: "var(--text-base)" }}
+          style={{ color: "var(--text-primary)" }}
           title={props.continuation.binding.label}
         >
           {props.continuation.binding.label}
@@ -253,14 +253,14 @@ export function WhichKeySettings() {
 
   return (
     <div class="space-y-4">
-      <h3 class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+      <h3 class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
         Which Key Settings
       </h3>
 
       {/* Enable/Disable toggle */}
       <div class="flex items-center justify-between">
         <div>
-          <div class="text-sm" style={{ color: "var(--text-base)" }}>
+          <div class="text-sm" style={{ color: "var(--text-primary)" }}>
             Enable Which Key
           </div>
           <div class="text-xs" style={{ color: "var(--text-weak)" }}>
@@ -288,7 +288,7 @@ export function WhichKeySettings() {
       {/* Delay slider */}
       <div>
         <div class="flex items-center justify-between mb-2">
-          <div class="text-sm" style={{ color: "var(--text-base)" }}>
+          <div class="text-sm" style={{ color: "var(--text-primary)" }}>
             Popup Delay
           </div>
           <span class="text-xs font-mono" style={{ color: "var(--text-weak)" }}>
@@ -318,7 +318,7 @@ export function WhichKeySettings() {
       {/* Max items per column */}
       <div>
         <div class="flex items-center justify-between mb-2">
-          <div class="text-sm" style={{ color: "var(--text-base)" }}>
+          <div class="text-sm" style={{ color: "var(--text-primary)" }}>
             Max Items Per Category
           </div>
           <span class="text-xs font-mono" style={{ color: "var(--text-weak)" }}>
@@ -346,7 +346,7 @@ export function WhichKeySettings() {
       {/* Show descriptions toggle */}
       <div class="flex items-center justify-between">
         <div>
-          <div class="text-sm" style={{ color: "var(--text-base)" }}>
+          <div class="text-sm" style={{ color: "var(--text-primary)" }}>
             Show Descriptions
           </div>
           <div class="text-xs" style={{ color: "var(--text-weak)" }}>
diff --git a/src/components/ai/ChatEditingMode.tsx b/src/components/ai/ChatEditingMode.tsx
index f176209d..180daeed 100644
--- a/src/components/ai/ChatEditingMode.tsx
+++ b/src/components/ai/ChatEditingMode.tsx
@@ -222,7 +222,7 @@ function ChangeItem(props: {
         
         {getStatusIcon(props.change.status)}
         
-        <span class="flex-1 text-sm truncate" style={{ color: "var(--text-base)" }}>
+        <span class="flex-1 text-sm truncate" style={{ color: "var(--text-primary)" }}>
           {props.change.fileName}
         </span>
         
@@ -333,7 +333,7 @@ function FileGroup(props: {
         
         <Icon name="file" class="w-4 h-4" style={{ color: "var(--text-weak)" }} />
         
-        <span class="flex-1 text-sm font-medium truncate" style={{ color: "var(--text-base)" }}>
+        <span class="flex-1 text-sm font-medium truncate" style={{ color: "var(--text-primary)" }}>
           {props.group.fileName}
         </span>
         
@@ -396,7 +396,7 @@ function WorkingSetIndicator(props: { files: Set<string> }) {
         }}
       >
         <Icon name="pen" class="w-4 h-4" style={{ color: "var(--accent-primary)" }} />
-        <span class="text-sm" style={{ color: "var(--text-base)" }}>
+        <span class="text-sm" style={{ color: "var(--text-primary)" }}>
           Working Set: {fileCount()} file{fileCount() !== 1 ? "s" : ""}
         </span>
         <div class="flex-1" />
@@ -449,7 +449,7 @@ function ProgressIndicator(props: { progress: number; currentFile?: string; stat
           <Icon name="circle-xmark" class="w-4 h-4" style={{ color: "var(--error)" }} />
         </Show>
         
-        <span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+        <span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
           {props.status === "generating"
             ? "AI is generating changes..."
             : props.status === "applying"
@@ -541,7 +541,7 @@ export function ChatEditingMode() {
           <div class="flex items-center gap-3">
             <Icon name="pen" class="w-5 h-5" style={{ color: "var(--accent-primary)" }} />
             <div>
-              <h2 class="text-sm font-semibold" style={{ color: "var(--text-base)" }}>
+              <h2 class="text-sm font-semibold" style={{ color: "var(--text-primary)" }}>
                 Chat Editing Mode
               </h2>
               <p class="text-xs" style={{ color: "var(--text-muted)" }}>
@@ -568,7 +568,7 @@ export function ChatEditingMode() {
             class="flex items-center gap-4 px-4 py-2 border-b text-xs"
             style={{ "border-color": "var(--border-weak)", background: "var(--surface-base)" }}
           >
-            <span style={{ color: "var(--text-base)" }}>
+            <span style={{ color: "var(--text-primary)" }}>
               {stats().files} file{stats().files !== 1 ? "s" : ""}
             </span>
             <span class="flex items-center gap-1" style={{ color: "var(--success)" }}>
@@ -612,7 +612,7 @@ export function ChatEditingMode() {
                   Error
                 </span>
               </div>
-              <pre class="text-xs whitespace-pre-wrap" style={{ color: "var(--text-base)" }}>
+              <pre class="text-xs whitespace-pre-wrap" style={{ color: "var(--text-primary)" }}>
                 {chatEditing.state.session!.error}
               </pre>
             </div>
@@ -746,7 +746,7 @@ export function ChatEditingModeCompact() {
           <Icon name="spinner" class="w-4 h-4 animate-spin" style={{ color: "var(--accent-primary)" }} />
         </Show>
         
-        <span class="text-sm" style={{ color: "var(--text-base)" }}>
+        <span class="text-sm" style={{ color: "var(--text-primary)" }}>
           {isGenerating() ? "Generating..." : "Editing Mode"}
         </span>
         
diff --git a/src/components/ai/CopilotStatus.tsx b/src/components/ai/CopilotStatus.tsx
index cf6c292e..65ad6725 100644
--- a/src/components/ai/CopilotStatus.tsx
+++ b/src/components/ai/CopilotStatus.tsx
@@ -234,7 +234,7 @@ export function CopilotSignInModal(props: CopilotSignInModalProps) {
           >
             <div class="flex items-center gap-3">
               <CopilotIcon class="w-6 h-6" />
-              <h2 class="text-lg font-semibold" style={{ color: "var(--text-base)" }}>
+              <h2 class="text-lg font-semibold" style={{ color: "var(--text-primary)" }}>
                 GitHub Copilot
               </h2>
             </div>
@@ -259,7 +259,7 @@ export function CopilotSignInModal(props: CopilotSignInModalProps) {
                   <Icon name="check" class="w-8 h-8" />
                 </div>
                 <div>
-                  <h3 class="text-lg font-medium" style={{ color: "var(--text-base)" }}>
+                  <h3 class="text-lg font-medium" style={{ color: "var(--text-primary)" }}>
                     Connected to GitHub Copilot
                   </h3>
                   <p class="text-sm mt-1" style={{ color: "var(--text-weak)" }}>
@@ -272,7 +272,7 @@ export function CopilotSignInModal(props: CopilotSignInModalProps) {
                     class="px-4 py-2 rounded-lg text-sm font-medium transition-colors"
                     style={{
                       background: "var(--surface-hover)",
-                      color: "var(--text-base)",
+                      color: "var(--text-primary)",
                     }}
                   >
                     Sign Out
@@ -334,7 +334,7 @@ export function CopilotSignInModal(props: CopilotSignInModalProps) {
               <div class="text-center space-y-4">
                 <CopilotIcon class="w-16 h-16 mx-auto opacity-50" />
                 <div>
-                  <h3 class="text-lg font-medium" style={{ color: "var(--text-base)" }}>
+                  <h3 class="text-lg font-medium" style={{ color: "var(--text-primary)" }}>
                     Connect to GitHub Copilot
                   </h3>
                   <p class="text-sm mt-1" style={{ color: "var(--text-weak)" }}>
@@ -453,7 +453,7 @@ export function CopilotSettingsPanel(props: CopilotSettingsPanelProps) {
       {/* Header */}
       <div class="flex items-center gap-3">
         <CopilotIcon class="w-5 h-5" />
-        <h3 class="font-medium" style={{ color: "var(--text-base)" }}>
+        <h3 class="font-medium" style={{ color: "var(--text-primary)" }}>
           GitHub Copilot
         </h3>
         <Show when={status() === "signedin"}>
@@ -472,7 +472,7 @@ export function CopilotSettingsPanel(props: CopilotSettingsPanelProps) {
         style={{ background: "var(--surface-hover)" }}
       >
         <div>
-          <p class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+          <p class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
             Enable Copilot
           </p>
           <p class="text-xs" style={{ color: "var(--text-weak)" }}>
@@ -503,7 +503,7 @@ export function CopilotSettingsPanel(props: CopilotSettingsPanelProps) {
               style={{ background: "var(--surface-hover)" }}
             >
               <div class="flex items-center justify-between">
-                <span class="text-sm" style={{ color: "var(--text-base)" }}>
+                <span class="text-sm" style={{ color: "var(--text-primary)" }}>
                   Status
                 </span>
                 <span class="text-sm flex items-center gap-1.5" style={{ color: "var(--success)" }}>
@@ -513,7 +513,7 @@ export function CopilotSettingsPanel(props: CopilotSettingsPanelProps) {
               </div>
               <Show when={models().length > 0}>
                 <div class="flex items-center justify-between">
-                  <span class="text-sm" style={{ color: "var(--text-base)" }}>
+                  <span class="text-sm" style={{ color: "var(--text-primary)" }}>
                     Available Models
                   </span>
                   <span class="text-sm" style={{ color: "var(--text-weak)" }}>
@@ -527,7 +527,7 @@ export function CopilotSettingsPanel(props: CopilotSettingsPanelProps) {
               class="w-full px-4 py-2 rounded-lg text-sm transition-colors"
               style={{
                 background: "var(--surface-hover)",
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
               }}
             >
               Sign Out
@@ -552,7 +552,7 @@ export function CopilotSettingsPanel(props: CopilotSettingsPanelProps) {
           class="p-3 rounded-lg border"
           style={{ background: "var(--surface-base)", "border-color": "var(--border-weak)" }}
         >
-          <h4 class="text-sm font-medium mb-2" style={{ color: "var(--text-base)" }}>
+          <h4 class="text-sm font-medium mb-2" style={{ color: "var(--text-primary)" }}>
             Keyboard Shortcuts
           </h4>
           <div class="grid grid-cols-2 gap-2 text-xs" style={{ color: "var(--text-weak)" }}>
diff --git a/src/components/ai/InlineAssistant.tsx b/src/components/ai/InlineAssistant.tsx
index 5c7c9e21..8b57ad2f 100644
--- a/src/components/ai/InlineAssistant.tsx
+++ b/src/components/ai/InlineAssistant.tsx
@@ -303,7 +303,7 @@ export function InlineAssistant(props: InlineAssistantProps) {
         >
           <div class="flex items-center gap-2">
             <Icon name="bolt" class="w-4 h-4" style={{ color: "var(--accent-primary)" }} />
-            <span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+            <span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
               Inline Edit
             </span>
             <span
@@ -378,7 +378,7 @@ export function InlineAssistant(props: InlineAssistantProps) {
               type="text"
               placeholder="Describe the change..."
               class="flex-1 bg-transparent outline-none text-sm"
-              style={{ color: "var(--text-base)" }}
+              style={{ color: "var(--text-primary)" }}
               value={prompt()}
               onInput={(e) => setPrompt(e.currentTarget.value)}
               onKeyDown={handleKeyDown}
@@ -428,7 +428,7 @@ export function InlineAssistant(props: InlineAssistantProps) {
               class="text-xs font-mono whitespace-pre-wrap p-2 rounded max-h-[150px] overflow-y-auto"
               style={{ 
                 background: "var(--background-base)",
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
               }}
             >
               {streamingContent()}
@@ -441,7 +441,7 @@ export function InlineAssistant(props: InlineAssistantProps) {
           <div class="inline-assistant-preview border-t" style={{ "border-color": "var(--border-weak)" }}>
             <div class="px-3 py-2">
               <div class="flex items-center gap-2 mb-2">
-                <span class="text-xs font-medium" style={{ color: "var(--text-base)" }}>
+                <span class="text-xs font-medium" style={{ color: "var(--text-primary)" }}>
                   Preview Changes
                 </span>
               </div>
diff --git a/src/components/ai/PromptEditor.tsx b/src/components/ai/PromptEditor.tsx
index 5fa36448..d793845f 100644
--- a/src/components/ai/PromptEditor.tsx
+++ b/src/components/ai/PromptEditor.tsx
@@ -227,7 +227,7 @@ export function PromptEditor() {
               style={{
                 "border-color": "var(--border-base)",
                 background: "var(--cortex-info)10",
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
               }}
             >
               <div class="font-semibold mb-2" style={{ color: "var(--text-strong)" }}>
@@ -283,7 +283,7 @@ export function PromptEditor() {
                 class="w-full px-3 py-2 rounded text-sm"
                 style={{
                   background: "var(--surface-hover)",
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                   border: getFieldError("title")
                     ? "1px solid var(--cortex-error)"
                     : "1px solid var(--border-base)",
@@ -308,7 +308,7 @@ export function PromptEditor() {
                 class="w-full px-3 py-2 rounded text-sm"
                 style={{
                   background: "var(--surface-hover)",
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                   border: "1px solid var(--border-base)",
                   outline: "none",
                 }}
@@ -328,7 +328,7 @@ export function PromptEditor() {
                   class="w-full px-3 py-2 rounded text-sm"
                   style={{
                     background: "var(--surface-hover)",
-                    color: "var(--text-base)",
+                    color: "var(--text-primary)",
                     border: "1px solid var(--border-base)",
                     outline: "none",
                   }}
@@ -399,7 +399,7 @@ export function PromptEditor() {
                   onBlur={handleAddTag}
                   placeholder={tags().length === 0 ? "Add tags..." : ""}
                   class="flex-1 min-w-[100px] bg-transparent text-sm outline-none"
-                  style={{ color: "var(--text-base)" }}
+                  style={{ color: "var(--text-primary)" }}
                 />
               </div>
               <p class="text-xs mt-1" style={{ color: "var(--text-weak)" }}>
@@ -462,7 +462,7 @@ Please review the following code and provide feedback on:
                   class="px-3 py-2 rounded text-sm overflow-x-auto"
                   style={{
                     background: "var(--surface-hover)",
-                    color: "var(--text-base)",
+                    color: "var(--text-primary)",
                     border: "1px solid var(--border-base)",
                     "white-space": "pre-wrap",
                     "max-height": "200px",
@@ -501,7 +501,7 @@ Please review the following code and provide feedback on:
               class="px-4 py-2 rounded text-sm font-medium"
               style={{
                 background: "var(--surface-hover)",
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
               }}
             >
               Cancel
diff --git a/src/components/ai/PromptStore.tsx b/src/components/ai/PromptStore.tsx
index cda8672d..7510ab01 100644
--- a/src/components/ai/PromptStore.tsx
+++ b/src/components/ai/PromptStore.tsx
@@ -207,7 +207,7 @@ export function PromptStore() {
               class="px-3 py-1.5 rounded text-sm"
               style={{
                 background: "var(--surface-hover)",
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
                 border: "1px solid var(--border-base)",
                 outline: "none",
               }}
@@ -590,7 +590,7 @@ function PromptItem(props: PromptItemProps) {
         <Show when={props.prompt.description}>
           <p
             class="text-sm mb-2 line-clamp-1"
-            style={{ color: "var(--text-base)" }}
+            style={{ color: "var(--text-primary)" }}
           >
             {props.prompt.description}
           </p>
@@ -819,7 +819,7 @@ function PromptEditor(props: PromptEditorProps) {
                 class="w-full px-3 py-2 rounded text-sm"
                 style={{
                   background: "var(--surface-hover)",
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                   border: "1px solid var(--border-base)",
                   outline: "none",
                 }}
diff --git a/src/components/ai/QuickChat.tsx b/src/components/ai/QuickChat.tsx
index 42917a9b..f89909d9 100644
--- a/src/components/ai/QuickChat.tsx
+++ b/src/components/ai/QuickChat.tsx
@@ -485,7 +485,7 @@ export function QuickChat() {
               />
               <span
                 class="text-sm font-semibold"
-                style={{ color: "var(--text-base)" }}
+                style={{ color: "var(--text-primary)" }}
               >
                 Quick Chat
               </span>
@@ -633,7 +633,7 @@ export function QuickChat() {
                       class="max-w-[85%] rounded-lg px-3 py-2"
                       style={{
                         background: "var(--surface-raised)",
-                        color: "var(--text-base)",
+                        color: "var(--text-primary)",
                       }}
                     >
                       <p class="text-sm whitespace-pre-wrap break-words">
@@ -735,7 +735,7 @@ export function QuickChat() {
                 placeholder="Ask a question... (@ for context)"
                 class="flex-1 bg-transparent outline-none text-sm resize-none"
                 style={{
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                   "min-height": "24px",
                   "max-height": "120px",
                 }}
diff --git a/src/components/ai/RulesEditor.tsx b/src/components/ai/RulesEditor.tsx
index 4d875dd1..1a55ea5b 100644
--- a/src/components/ai/RulesEditor.tsx
+++ b/src/components/ai/RulesEditor.tsx
@@ -247,7 +247,7 @@ export function RulesEditor() {
               style={{
                 "border-color": "var(--border-base)",
                 background: "var(--cortex-info)10",
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
               }}
             >
               <div class="font-semibold mb-2" style={{ color: "var(--text-strong)" }}>
@@ -306,7 +306,7 @@ export function RulesEditor() {
                   class="w-full px-3 py-2 rounded text-sm"
                   style={{
                     background: "var(--surface-hover)",
-                    color: "var(--text-base)",
+                    color: "var(--text-primary)",
                     border: "1px solid var(--border-base)",
                     outline: "none",
                     opacity: isNewRule() ? 1 : 0.7,
diff --git a/src/components/ai/SlashCommandMenu.tsx b/src/components/ai/SlashCommandMenu.tsx
index 10cb9e17..9524c90c 100644
--- a/src/components/ai/SlashCommandMenu.tsx
+++ b/src/components/ai/SlashCommandMenu.tsx
@@ -891,7 +891,7 @@ export function SlashCommandMenu(props: SlashCommandMenuProps) {
                 </span>
                 <span
                   class="font-medium"
-                  style={{ color: "var(--text-base)", "font-size": "13px" }}
+                  style={{ color: "var(--text-primary)", "font-size": "13px" }}
                 >
                   /{cmd.name}
                 </span>
@@ -948,7 +948,7 @@ export function SlashCommandMenu(props: SlashCommandMenuProps) {
                       <span
                         class="command-name font-medium shrink-0"
                         style={{ 
-                          color: "var(--text-base)",
+                          color: "var(--text-primary)",
                           "font-size": "13px",
                         }}
                       >
diff --git a/src/components/ai/SlashCommands.tsx b/src/components/ai/SlashCommands.tsx
index 84761856..3d5883a5 100644
--- a/src/components/ai/SlashCommands.tsx
+++ b/src/components/ai/SlashCommands.tsx
@@ -335,7 +335,7 @@ export function SlashCommandPicker(props: {
                   <div class="flex items-center gap-2">
                     <span 
                       class="text-sm font-medium"
-                      style={{ color: "var(--text-base)" }}
+                      style={{ color: "var(--text-primary)" }}
                     >
                       /{command.name}
                     </span>
diff --git a/src/components/ai/SubAgentManager.tsx b/src/components/ai/SubAgentManager.tsx
index 3d76dd33..c7bf13cd 100644
--- a/src/components/ai/SubAgentManager.tsx
+++ b/src/components/ai/SubAgentManager.tsx
@@ -361,7 +361,7 @@ export function SubAgentManager() {
             </div>
             
             {/* Agent List */}
-            <div class="flex-1 overflow-auto">
+            <div class="flex-1 overflow-auto" aria-label="Sub-agents" role="region">
               <Show when={builtInAgents().length > 0}>
                 <div class="px-3 py-1.5 text-[10px] font-medium uppercase" style={{ color: "var(--text-weaker)" }}>
                   Built-in
diff --git a/src/components/ai/SubAgentStatus.tsx b/src/components/ai/SubAgentStatus.tsx
index e7c60273..63c075e7 100644
--- a/src/components/ai/SubAgentStatus.tsx
+++ b/src/components/ai/SubAgentStatus.tsx
@@ -220,7 +220,7 @@ function SubAgentCard(props: SubAgentCardProps): JSX.Element {
         >
           <div
             class="text-xs mb-2 line-clamp-2"
-            style={{ color: "var(--text-base)" }}
+            style={{ color: "var(--text-primary)" }}
           >
             {truncate(currentTask()!.prompt, 100)}
           </div>
diff --git a/src/components/ai/SubagentsDialog.tsx b/src/components/ai/SubagentsDialog.tsx
index 91730887..1907cffe 100644
--- a/src/components/ai/SubagentsDialog.tsx
+++ b/src/components/ai/SubagentsDialog.tsx
@@ -332,13 +332,14 @@ export function SubagentsDialog(props: SubagentsDialogProps) {
           aria-labelledby="subagents-dialog-title"
         >
           {/* Header - VS Code: 35px height, 13px font, font-weight 600 */}
-          <div class="dialog-header">
-<div class="flex items-center gap-2 dialog-header-title">
+          <div class="dialog-header" role="banner" aria-label="Sub-Agents dialog header">
+            <div class="flex items-center gap-2 dialog-header-title">
               <Icon name="microchip" class="w-4 h-4" style={{ color: "var(--accent-primary)" }} />
               <span id="subagents-dialog-title" class="text-sm">Sub-Agents</span>
               <span
                 class="px-2 py-0.5 text-[11px] rounded"
                 style={{ background: "var(--surface-active)" }}
+                aria-label={`${agents().length} active agents`}
               >
                 {agents().length} active
               </span>
@@ -349,10 +350,11 @@ export function SubagentsDialog(props: SubagentsDialogProps) {
                 style={{ color: "var(--text-weak)" }}
                 onClick={loadAgents}
                 title="Refresh"
+                aria-label="Refresh agents"
               >
                 <Icon name="rotate" class={`w-4 h-4 ${loading() ? "animate-spin" : ""}`} />
               </button>
-<button
+              <button
                 class="dialog-close"
                 onClick={props.onClose}
                 aria-label="Close"
@@ -364,7 +366,7 @@ export function SubagentsDialog(props: SubagentsDialogProps) {
 
           {/* Error Banner */}
           <Show when={error()}>
-<div
+            <div
               class="px-4 py-2 text-sm flex items-center gap-2"
               style={{ background: "rgba(239, 68, 68, 0.1)", color: "var(--error)" }}
             >
@@ -385,14 +387,16 @@ export function SubagentsDialog(props: SubagentsDialogProps) {
             <div
               class="w-64 flex flex-col"
               style={{ "border-right": "1px solid var(--border-base)" }}
+              role="region"
+              aria-label="Agent lists"
             >
               {/* Templates Section */}
-              <div class="p-3">
-                <div class="text-xs font-medium mb-2" style={{ color: "var(--text-weak)" }}>
+              <div class="p-3" role="region" aria-labelledby="spawn-agent-heading">
+                <h3 id="spawn-agent-heading" class="text-xs font-medium mb-2" style={{ color: "var(--text-weak)" }}>
                   SPAWN AGENT
-                </div>
-                <div class="grid grid-cols-2 gap-2">
-<For each={AGENT_TEMPLATES}>
+                </h3>
+                <div class="grid grid-cols-2 gap-2" role="group" aria-label="Agent templates">
+                  <For each={AGENT_TEMPLATES}>
                     {(template) => {
                       return (
                         <button
@@ -400,6 +404,7 @@ export function SubagentsDialog(props: SubagentsDialogProps) {
                           style={{ background: "var(--surface-raised)" }}
                           onClick={() => spawnFromTemplate(template)}
                           title={template.description}
+                          aria-label={template.name}
                         >
                           <Icon name={template.icon} class="w-4 h-4" style={{ color: "var(--accent-primary)" }} />
                           <span class="truncate w-full text-center">{template.name.split(" ")[0]}</span>
@@ -435,7 +440,7 @@ export function SubagentsDialog(props: SubagentsDialogProps) {
                   }
                 >
                   <div class="space-y-1">
-<For each={agents()}>
+                    <For each={agents()}>
                       {(agent) => {
                         const iconName = getAgentIcon(agent.agentType);
                         const isSelected = () => selectedAgent()?.id === agent.id;
@@ -469,8 +474,7 @@ export function SubagentsDialog(props: SubagentsDialogProps) {
             </div>
 
             {/* Right: Agent Details / New Agent */}
-            <div class="flex-1 flex flex-col min-w-0">
-              <Show
+            <div class="flex-1 flex flex-col min-w-0" role="region" aria-label="Right content pane">              <Show
                 when={!showNewAgent()}
                 fallback={
                   <div class="flex-1 p-4">
@@ -480,7 +484,7 @@ export function SubagentsDialog(props: SubagentsDialogProps) {
                       style={{
                         background: "var(--surface-raised)",
                         border: "1px solid var(--border-base)",
-                        color: "var(--text-base)",
+                        color: "var(--text-primary)",
                       }}
                       placeholder="Enter the system prompt for your custom agent..."
                       value={newAgentPrompt()}
@@ -580,7 +584,7 @@ export function SubagentsDialog(props: SubagentsDialogProps) {
                             style={{
                               background: "var(--surface-raised)",
                               border: "1px solid var(--border-base)",
-                              color: "var(--text-base)",
+                              color: "var(--text-primary)",
                             }}
                             placeholder="Describe the task for this agent..."
                             value={taskPrompt()}
diff --git a/src/components/ai/SupermavenStatus.tsx b/src/components/ai/SupermavenStatus.tsx
index c7788c0d..f3c34594 100644
--- a/src/components/ai/SupermavenStatus.tsx
+++ b/src/components/ai/SupermavenStatus.tsx
@@ -96,7 +96,7 @@ const StatusIcon = () => {
             style={{
               background: "var(--surface-raised)",
               border: "1px solid var(--border-base)",
-              color: "var(--text-base)",
+              color: "var(--text-primary)",
             }}
           >
             Supermaven: {config().label}
@@ -119,7 +119,7 @@ const StatusIcon = () => {
       </span>
       
       <div class="flex flex-col">
-        <span class="text-xs font-medium" style={{ color: "var(--text-base)" }}>
+        <span class="text-xs font-medium" style={{ color: "var(--text-primary)" }}>
           Supermaven
         </span>
         <span class="text-[10px]" style={{ color: config().color }}>
diff --git a/src/components/ai/ThreadList.tsx b/src/components/ai/ThreadList.tsx
index f70ab4e5..f256406d 100644
--- a/src/components/ai/ThreadList.tsx
+++ b/src/components/ai/ThreadList.tsx
@@ -374,7 +374,7 @@ export function ThreadList(props: ThreadListProps) {
               border: "none",
               outline: "none",
               "font-size": "12px",
-              color: "var(--text-base)",
+              color: "var(--text-primary)",
             }}
           />
         </div>
diff --git a/src/components/codespaces/CodespacesPanel.tsx b/src/components/codespaces/CodespacesPanel.tsx
index dde532f4..ffb0d063 100644
--- a/src/components/codespaces/CodespacesPanel.tsx
+++ b/src/components/codespaces/CodespacesPanel.tsx
@@ -163,7 +163,7 @@ function CodespacesList(props: CodespacesListProps) {
                   <div class="flex items-center gap-2 mb-1">
                     <StatusIcon state={codespace.state} />
                     <div class="flex-1 min-w-0">
-                      <div class="text-sm font-medium truncate" style={{ color: "var(--text-base)" }}>
+                      <div class="text-sm font-medium truncate" style={{ color: "var(--text-primary)" }}>
                         {codespace.display_name || codespace.name}
                       </div>
                     </div>
@@ -277,7 +277,7 @@ function CodespacesList(props: CodespacesListProps) {
                           setMenuOpenId(null);
                         }}
                         class="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left transition-colors hover:bg-[var(--surface-raised)]"
-                        style={{ color: "var(--text-base)" }}
+                        style={{ color: "var(--text-primary)" }}
                       >
                         <Icon name="arrow-up-right-from-square" class="w-4 h-4" />
                         Open in Browser
@@ -288,7 +288,7 @@ function CodespacesList(props: CodespacesListProps) {
                           setMenuOpenId(null);
                         }}
                         class="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left transition-colors hover:bg-[var(--surface-raised)]"
-                        style={{ color: "var(--text-base)" }}
+                        style={{ color: "var(--text-primary)" }}
                       >
                         <Icon name="display" class="w-4 h-4" />
                         Open in VS Code
@@ -299,7 +299,7 @@ function CodespacesList(props: CodespacesListProps) {
                           setMenuOpenId(null);
                         }}
                         class="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left transition-colors hover:bg-[var(--surface-raised)]"
-                        style={{ color: "var(--text-base)" }}
+                        style={{ color: "var(--text-primary)" }}
                       >
                         <Icon name="terminal" class="w-4 h-4" />
                         Connect via SSH
@@ -473,7 +473,7 @@ function CreateCodespaceDialog(props: CreateCodespaceDialogProps) {
             class="flex items-center justify-between px-4 py-3 border-b"
             style={{ "border-color": "var(--border-base)" }}
           >
-            <h2 class="text-base font-semibold" style={{ color: "var(--text-base)" }}>
+            <h2 class="text-base font-semibold" style={{ color: "var(--text-primary)" }}>
               Create New Codespace
             </h2>
             <button
@@ -507,7 +507,7 @@ function CreateCodespaceDialog(props: CreateCodespaceDialogProps) {
                   style={{
                     "background-color": "var(--surface-raised)",
                     "border": "1px solid var(--border-base)",
-                    color: "var(--text-base)",
+                    color: "var(--text-primary)",
                   }}
                 />
                 <Show when={isSearching()}>
@@ -543,7 +543,7 @@ function CreateCodespaceDialog(props: CreateCodespaceDialogProps) {
                           class="w-5 h-5 rounded-full"
                         />
                         <div class="flex-1 min-w-0">
-                          <div class="text-sm truncate" style={{ color: "var(--text-base)" }}>
+                          <div class="text-sm truncate" style={{ color: "var(--text-primary)" }}>
                             {repo.full_name}
                           </div>
                         </div>
@@ -578,7 +578,7 @@ function CreateCodespaceDialog(props: CreateCodespaceDialogProps) {
                     alt=""
                     class="w-5 h-5 rounded-full"
                   />
-                  <span class="flex-1 text-sm" style={{ color: "var(--text-base)" }}>
+                  <span class="flex-1 text-sm" style={{ color: "var(--text-primary)" }}>
                     {selectedRepo()!.full_name}
                   </span>
                   <button
@@ -610,7 +610,7 @@ function CreateCodespaceDialog(props: CreateCodespaceDialogProps) {
                   style={{
                     "background-color": "var(--surface-raised)",
                     "border": "1px solid var(--border-base)",
-                    color: "var(--text-base)",
+                    color: "var(--text-primary)",
                   }}
                 />
               </div>
@@ -633,7 +633,7 @@ function CreateCodespaceDialog(props: CreateCodespaceDialogProps) {
                     style={{
                       "background-color": "var(--surface-raised)",
                       "border": "1px solid var(--border-base)",
-                      color: "var(--text-base)",
+                      color: "var(--text-primary)",
                     }}
                   >
                     <For each={machines()}>
@@ -661,7 +661,7 @@ function CreateCodespaceDialog(props: CreateCodespaceDialogProps) {
                   style={{
                     "background-color": "var(--surface-raised)",
                     "border": "1px solid var(--border-base)",
-                    color: "var(--text-base)",
+                    color: "var(--text-primary)",
                   }}
                 />
               </div>
@@ -689,7 +689,7 @@ function CreateCodespaceDialog(props: CreateCodespaceDialogProps) {
             <button
               onClick={props.onClose}
               class="px-4 py-1.5 rounded-md text-sm transition-colors hover:bg-[var(--surface-raised)]"
-              style={{ color: "var(--text-base)" }}
+              style={{ color: "var(--text-primary)" }}
             >
               Cancel
             </button>
@@ -790,7 +790,7 @@ export function CodespacesPanel() {
         fallback={
           <div class="flex-1 flex flex-col items-center justify-center px-4 py-8">
             <Icon name="github" class="w-12 h-12 mb-4" style={{ color: "var(--text-weaker)" }} />
-            <h3 class="text-sm font-medium mb-2" style={{ color: "var(--text-base)" }}>
+            <h3 class="text-sm font-medium mb-2" style={{ color: "var(--text-primary)" }}>
               Sign in to GitHub
             </h3>
             <p class="text-xs text-center mb-4" style={{ color: "var(--text-weak)" }}>
@@ -834,7 +834,7 @@ export function CodespacesPanel() {
               alt=""
               class="w-5 h-5 rounded-full"
             />
-            <span class="flex-1 text-xs truncate" style={{ color: "var(--text-base)" }}>
+            <span class="flex-1 text-xs truncate" style={{ color: "var(--text-primary)" }}>
               {codespaces.getUser()!.login}
             </span>
           </Show>
diff --git a/src/components/comments/CommentThread.tsx b/src/components/comments/CommentThread.tsx
index 41e392b1..2a34f0c5 100644
--- a/src/components/comments/CommentThread.tsx
+++ b/src/components/comments/CommentThread.tsx
@@ -283,7 +283,7 @@ function SingleComment(props: SingleCommentProps) {
                   class="px-2 py-1 text-xs rounded transition-colors"
                   style={{
                     background: "var(--surface-raised)",
-                    color: "var(--text-base)",
+                    color: "var(--text-primary)",
                     border: "1px solid var(--border-weak)",
                   }}
                   onClick={handleCancelEdit}
@@ -296,7 +296,7 @@ function SingleComment(props: SingleCommentProps) {
         >
           <p
             class="text-sm whitespace-pre-wrap break-words"
-            style={{ color: "var(--text-base)" }}
+            style={{ color: "var(--text-primary)" }}
           >
             {props.comment.content}
           </p>
@@ -359,7 +359,7 @@ function SingleComment(props: SingleCommentProps) {
               >
                 <button
                   class="w-full flex items-center gap-2 px-3 py-1.5 text-xs hover:bg-[var(--surface-active)] transition-colors"
-                  style={{ color: "var(--text-base)" }}
+                  style={{ color: "var(--text-primary)" }}
                   onClick={() => {
                     setIsEditing(true);
                     setShowMenu(false);
@@ -600,7 +600,7 @@ export function CommentThread(props: CommentThreadProps) {
                   class="px-2 py-1 text-xs rounded transition-colors"
                   style={{
                     background: "var(--surface-raised)",
-                    color: "var(--text-base)",
+                    color: "var(--text-primary)",
                     border: "1px solid var(--border-weak)",
                   }}
                   onClick={() => {
diff --git a/src/components/comments/CommentsPanel.tsx b/src/components/comments/CommentsPanel.tsx
index d9d47cb5..e056893e 100644
--- a/src/components/comments/CommentsPanel.tsx
+++ b/src/components/comments/CommentsPanel.tsx
@@ -426,7 +426,7 @@ export function CommentsPanel(props: CommentsPanelProps) {
               class="px-1.5 py-0.5 text-[10px] rounded-full"
               style={{
                 background: "var(--surface-active)",
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
               }}
             >
               {comments.unresolvedCount()}/{comments.totalCount()}
@@ -466,7 +466,7 @@ export function CommentsPanel(props: CommentsPanelProps) {
             onInput={(e) => setSearchQuery(e.currentTarget.value)}
             placeholder="Search comments..."
             class="flex-1 bg-transparent border-none outline-none text-xs"
-            style={{ color: "var(--text-base)" }}
+            style={{ color: "var(--text-primary)" }}
           />
           <Show when={searchQuery()}>
             <button
diff --git a/src/components/cortex/EnhancedStatusBar.tsx b/src/components/cortex/EnhancedStatusBar.tsx
index cf73c18c..92ec94c9 100644
--- a/src/components/cortex/EnhancedStatusBar.tsx
+++ b/src/components/cortex/EnhancedStatusBar.tsx
@@ -115,9 +115,9 @@ export const EnhancedStatusBar: Component<EnhancedStatusBarProps> = (props) => {
             }}
             onClick={handleDiagnosticsClick}
           >
-            <CortexIcon name="circle-xmark" size={12} />
+            <CortexIcon name="circle-xmark" size={12} aria-hidden="true" />
             <span>{diagnosticCounts().error}</span>
-            <CortexIcon name="triangle-exclamation" size={12} />
+            <CortexIcon name="triangle-exclamation" size={12} aria-hidden="true" />
             <span>{diagnosticCounts().warning}</span>
           </div>
         </CortexTooltip>
@@ -125,7 +125,7 @@ export const EnhancedStatusBar: Component<EnhancedStatusBarProps> = (props) => {
         <Show when={statusBar.branchName()}>
           <CortexTooltip content={`Git Branch: ${statusBar.branchName()}`} position="top">
             <div style={itemStyle} onClick={handleBranchClick}>
-              <CortexIcon name="code-branch" size={12} />
+              <CortexIcon name="code-branch" size={12} aria-hidden="true" />
               <span>{statusBar.branchName()}</span>
               <Show when={statusBar.hasChanges()}>
                 <span style={{ color: "var(--cortex-warning)" }}>*</span>
@@ -144,7 +144,7 @@ export const EnhancedStatusBar: Component<EnhancedStatusBarProps> = (props) => {
               }}
               onClick={handleTrustClick}
             >
-              <CortexIcon name="shield-exclamation" size={12} />
+              <CortexIcon name="shield-exclamation" size={12} aria-hidden="true" />
               <span>Restricted</span>
             </div>
           </CortexTooltip>
@@ -226,7 +226,7 @@ export const EnhancedStatusBar: Component<EnhancedStatusBarProps> = (props) => {
             }}
             onClick={handleNotificationsClick}
           >
-            <CortexIcon name="bell" size={14} />
+            <CortexIcon name="bell" size={14} aria-hidden="true" />
             <Show when={statusBar.notificationCount() > 0}>
               <span
                 style={{
@@ -281,7 +281,7 @@ const StatusBarItem: Component<StatusBarItemProps> = (props) => {
       aria-label={props.item.accessibilityLabel || props.item.tooltip}
     >
       <Show when={props.item.icon}>
-        <CortexIcon name={props.item.icon!} size={12} />
+        <CortexIcon name={props.item.icon!} size={12} aria-hidden="true" />
       </Show>
       <Show when={props.item.text}>
         <span>{props.item.text}</span>
diff --git a/src/components/cortex/command-palette/CortexCommandPalette.tsx b/src/components/cortex/command-palette/CortexCommandPalette.tsx
index 487bf8a1..59a3881d 100644
--- a/src/components/cortex/command-palette/CortexCommandPalette.tsx
+++ b/src/components/cortex/command-palette/CortexCommandPalette.tsx
@@ -215,7 +215,7 @@ export function CortexCommandPalette() {
             onInput={(e) => palette.setQuery(e.currentTarget.value)} onKeyDown={handleKeyDown}
             aria-haspopup="listbox" aria-autocomplete="list" aria-controls="cortex-palette-list" style={inputStyle} />
         </div>
-        <div id="cortex-palette-list" role="listbox" ref={listRef} style={listStyle}>
+        <div id="cortex-palette-list" role="listbox" aria-label="Command palette options" ref={listRef} style={listStyle}>
           <Show when={flatList().length === 0}>
             <div style={emptyStyle}>No commands found</div>
           </Show>
diff --git a/src/components/cortex/dialogs/GoToSymbolDialog.tsx b/src/components/cortex/dialogs/GoToSymbolDialog.tsx
index ce9e41c9..1116c8a8 100644
--- a/src/components/cortex/dialogs/GoToSymbolDialog.tsx
+++ b/src/components/cortex/dialogs/GoToSymbolDialog.tsx
@@ -158,7 +158,7 @@ export function GoToSymbolDialog() {
           </div>
         </div>
         <div class="quick-input-progress"><div class="progress-bit" /></div>
-        <div class="quick-input-list" id="symbol-picker-list" role="listbox">
+        <div class="quick-input-list" id="symbol-picker-list" role="listbox" aria-label="Symbol list">
           <div ref={listRef} class="list-container" style={{ "max-height": "440px", overflow: "auto", "overscroll-behavior": "contain" }}>
             <Show when={outlineState.loading}>
               <div style={{ padding: "16px", "text-align": "center" }}>
diff --git a/src/components/cortex/editor/QuickPickMenu.tsx b/src/components/cortex/editor/QuickPickMenu.tsx
index 527310d2..76d8e220 100644
--- a/src/components/cortex/editor/QuickPickMenu.tsx
+++ b/src/components/cortex/editor/QuickPickMenu.tsx
@@ -242,7 +242,7 @@ export const QuickPickMenu: Component<QuickPickMenuProps> = (props) => {
               </div>
             </Show>
 
-            <div style={listStyle}>
+            <div style={listStyle} role="listbox" aria-label="Quick pick items">
               <Show
                 when={filteredItems().length > 0}
                 fallback={<div style={emptyStyle}>No matching items</div>}
diff --git a/src/components/debugger/BreakpointGutter.tsx b/src/components/debugger/BreakpointGutter.tsx
index 3bccd575..43c7fbba 100644
--- a/src/components/debugger/BreakpointGutter.tsx
+++ b/src/components/debugger/BreakpointGutter.tsx
@@ -575,7 +575,7 @@ export function useBreakpointGutter(props: BreakpointGutterProps) {
             <Show when={!contextMenu().hasBreakpoint}>
               <button
                 class="w-full px-3 py-1.5 text-left text-xs hover:bg-[var(--surface-sunken)] transition-colors"
-                style={{ color: "var(--text-base)" }}
+                style={{ color: "var(--text-primary)" }}
                 onClick={handleAddBreakpoint}
               >
                 Add Breakpoint
@@ -598,7 +598,7 @@ export function useBreakpointGutter(props: BreakpointGutterProps) {
             <Show when={contextMenu().hasBreakpoint && !contextMenu().hasLogpoint && !contextMenu().isInlineBreakpoint}>
               <button
                 class="w-full px-3 py-1.5 text-left text-xs hover:bg-[var(--surface-sunken)] transition-colors"
-                style={{ color: "var(--text-base)" }}
+                style={{ color: "var(--text-primary)" }}
                 onClick={handleRemoveBreakpoint}
               >
                 Remove Breakpoint
@@ -621,7 +621,7 @@ export function useBreakpointGutter(props: BreakpointGutterProps) {
             <Show when={contextMenu().hasBreakpoint && !contextMenu().hasLogpoint && contextMenu().isInlineBreakpoint}>
               <button
                 class="w-full px-3 py-1.5 text-left text-xs hover:bg-[var(--surface-sunken)] transition-colors"
-                style={{ color: "var(--text-base)" }}
+                style={{ color: "var(--text-primary)" }}
                 onClick={handleRemoveBreakpoint}
               >
                 Remove Inline Breakpoint
@@ -637,7 +637,7 @@ export function useBreakpointGutter(props: BreakpointGutterProps) {
               </button>
               <button
                 class="w-full px-3 py-1.5 text-left text-xs hover:bg-[var(--surface-sunken)] transition-colors"
-                style={{ color: "var(--text-base)" }}
+                style={{ color: "var(--text-primary)" }}
                 onClick={handleConvertToBreakpoint}
               >
                 Convert to Breakpoint
@@ -668,7 +668,7 @@ export function useBreakpointGutter(props: BreakpointGutterProps) {
             }}
             onClick={(e) => e.stopPropagation()}
           >
-            <div class="text-xs mb-2" style={{ color: "var(--text-base)" }}>
+            <div class="text-xs mb-2" style={{ color: "var(--text-primary)" }}>
               {logpointEdit().isNew ? "Add Logpoint" : "Edit Logpoint"} at line {logpointEdit().line}
             </div>
             <div class="text-xs mb-2" style={{ color: "var(--text-weak)" }}>
@@ -686,7 +686,7 @@ export function useBreakpointGutter(props: BreakpointGutterProps) {
               class="w-full px-2 py-1.5 text-xs rounded outline-none mb-2"
               style={{
                 background: "var(--surface-sunken)",
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
                 border: "1px solid var(--border-weak)",
               }}
               autofocus
diff --git a/src/components/debugger/BreakpointInlineEditor.tsx b/src/components/debugger/BreakpointInlineEditor.tsx
index c43baf51..f17d843f 100644
--- a/src/components/debugger/BreakpointInlineEditor.tsx
+++ b/src/components/debugger/BreakpointInlineEditor.tsx
@@ -70,7 +70,7 @@ export function BreakpointInlineEditor(props: BreakpointInlineEditorProps) {
         class="flex-1 px-2 py-0.5 text-xs font-mono rounded outline-none"
         style={{
           background: "var(--surface-base)",
-          color: "var(--text-base)",
+          color: "var(--text-primary)",
           border: "1px solid var(--accent)",
           height: "20px",
           "line-height": "20px",
diff --git a/src/components/debugger/BreakpointPanel.tsx b/src/components/debugger/BreakpointPanel.tsx
index 05042563..0578d8c3 100644
--- a/src/components/debugger/BreakpointPanel.tsx
+++ b/src/components/debugger/BreakpointPanel.tsx
@@ -117,7 +117,7 @@ function BreakpointRow(props: { bp: Breakpoint; onNavigate: (path: string, line:
           class="flex-1 min-w-0"
           style={{
             background: "var(--cortex-bg-primary)",
-            color: "var(--text-base)",
+            color: "var(--text-primary)",
             border: "1px solid var(--cortex-accent-primary)",
             "border-radius": "2px",
             padding: "0 4px",
@@ -165,7 +165,7 @@ function ExceptionBreakpointRow(props: { eb: ExceptionBreakpoint }) {
           onChange={handleToggle}
           style={{ width: "14px", height: "14px", "accent-color": "var(--cortex-accent-primary)" }}
         />
-        <span class="truncate" style={{ color: "var(--text-base)" }}>{props.eb.label}</span>
+        <span class="truncate" style={{ color: "var(--text-primary)" }}>{props.eb.label}</span>
         <Show when={props.eb.description}>
           <span class="truncate" style={{ color: "var(--text-weak)", "font-size": "11px", "margin-left": "4px" }}>
             {props.eb.description}
@@ -190,7 +190,7 @@ function ExceptionBreakpointRow(props: { eb: ExceptionBreakpoint }) {
             style={{
               width: "100%",
               background: "var(--cortex-bg-primary)",
-              color: "var(--text-base)",
+              color: "var(--text-primary)",
               border: "1px solid var(--cortex-accent-primary)",
               "border-radius": "2px",
               padding: "2px 6px",
@@ -224,7 +224,7 @@ export function BreakpointPanel() {
   };
 
   return (
-    <div class="flex flex-col h-full" style={{ background: "var(--cortex-bg-primary)", color: "var(--text-base)" }}>
+    <div class="flex flex-col h-full" style={{ background: "var(--cortex-bg-primary)", color: "var(--text-primary)" }}>
       <div class="flex items-center justify-between px-2 shrink-0" style={{ height: "28px", "border-bottom": "1px solid var(--surface-border)" }}>
         <span style={{ "font-size": "11px", "font-weight": "600", "text-transform": "uppercase" }}>Breakpoints</span>
         <div class="flex gap-0.5">
diff --git a/src/components/debugger/BreakpointsView.tsx b/src/components/debugger/BreakpointsView.tsx
index 7097e383..f438d9e0 100644
--- a/src/components/debugger/BreakpointsView.tsx
+++ b/src/components/debugger/BreakpointsView.tsx
@@ -701,7 +701,7 @@ export function BreakpointsView() {
 
                         {/* Line number and info - VS Code spec: name overflow ellipsis */}
                         <div class="name flex-1 min-w-0" style={{ overflow: "hidden", "text-overflow": "ellipsis" }}>
-                          <span style={{ color: "var(--text-base)" }}>
+                          <span style={{ color: "var(--text-primary)" }}>
                             Line {bp.line}{bp.column !== undefined ? `:${bp.column}` : ""}
                           </span>
                           <Show when={bp.column !== undefined}>
@@ -1006,7 +1006,7 @@ export function BreakpointsView() {
                               class="px-2 py-1 text-xs rounded outline-none"
                               style={{
                                 background: "var(--surface-sunken)",
-                                color: "var(--text-base)",
+                                color: "var(--text-primary)",
                                 border: "1px solid var(--cortex-success)",
                               }}
                             >
@@ -1201,7 +1201,7 @@ export function BreakpointsView() {
                     >
                       <span 
                         class="flex-1 truncate" 
-                        style={{ color: "var(--text-base)" }}
+                        style={{ color: "var(--text-primary)" }}
                         onDblClick={(e) => {
                           e.stopPropagation();
                           handleRenameGroup(group.id);
@@ -1270,7 +1270,7 @@ export function BreakpointsView() {
                                     type={getBreakpointType(bp!)} 
                                     state={getBreakpointState(bp!)} 
                                   />
-                                  <span class="truncate flex-1" style={{ color: "var(--text-base)" }}>
+                                  <span class="truncate flex-1" style={{ color: "var(--text-primary)" }}>
                                     {getFileName(bp!.path)}:{bp!.line}
                                   </span>
                                   <IconButton
@@ -1497,7 +1497,7 @@ export function BreakpointsView() {
                 class="px-2 py-1 text-xs rounded outline-none"
                 style={{
                   background: "var(--surface-base)",
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                   border: "1px solid var(--border-weak)",
                 }}
               >
diff --git a/src/components/debugger/CallStackPanel.tsx b/src/components/debugger/CallStackPanel.tsx
index 5b702af2..e9604768 100644
--- a/src/components/debugger/CallStackPanel.tsx
+++ b/src/components/debugger/CallStackPanel.tsx
@@ -33,7 +33,7 @@ function ThreadItem(props: { thread: Thread; isActive: boolean; onSelect: () =>
       onClick={props.onSelect}
     >
       <Icon name="microchip" size={12} color="var(--text-weak)" />
-      <span class="truncate" style={{ color: "var(--text-base)", "font-weight": props.isActive ? "600" : "400" }}>
+      <span class="truncate" style={{ color: "var(--text-primary)", "font-weight": props.isActive ? "600" : "400" }}>
         {props.thread.name}
       </span>
       <span
@@ -153,7 +153,7 @@ export function CallStackPanel() {
   };
 
   return (
-    <div class="flex flex-col h-full" style={{ background: "var(--cortex-bg-primary)", color: "var(--text-base)" }}>
+    <div class="flex flex-col h-full" style={{ background: "var(--cortex-bg-primary)", color: "var(--text-primary)" }}>
       <div class="flex items-center justify-between px-2 shrink-0" style={{ height: "28px", "border-bottom": "1px solid var(--surface-border)" }}>
         <span style={{ "font-size": "11px", "font-weight": "600", "text-transform": "uppercase" }}>Call Stack</span>
         <div class="flex gap-0.5">
diff --git a/src/components/debugger/CallStackView.tsx b/src/components/debugger/CallStackView.tsx
index 70dd4fa3..af5e52a5 100644
--- a/src/components/debugger/CallStackView.tsx
+++ b/src/components/debugger/CallStackView.tsx
@@ -479,7 +479,7 @@ function CallStackContextMenu(props: CallStackContextMenuProps) {
       <Show when={canRestartFrame()}>
         <button
           class="w-full px-3 py-1.5 text-left text-sm flex items-center gap-2 hover:bg-[var(--surface-raised)] transition-colors"
-          style={{ color: "var(--text-base)" }}
+          style={{ color: "var(--text-primary)" }}
           onClick={() => {
             const frame = targetFrame();
             if (frame) props.onRestartFrame(frame.id);
@@ -502,7 +502,7 @@ function CallStackContextMenu(props: CallStackContextMenuProps) {
         {(frame) => (
           <button
             class="w-full px-3 py-1.5 text-left text-sm flex items-center gap-2 hover:bg-[var(--surface-raised)] transition-colors"
-            style={{ color: "var(--text-base)" }}
+            style={{ color: "var(--text-primary)" }}
             onClick={() => props.onCopyFrame(frame())}
           >
             <Icon name="copy" size="sm" style={{ color: "var(--text-weak)" }} />
@@ -514,7 +514,7 @@ function CallStackContextMenu(props: CallStackContextMenuProps) {
       {/* Copy All Call Stack */}
       <button
         class="w-full px-3 py-1.5 text-left text-sm flex items-center gap-2 hover:bg-[var(--surface-raised)] transition-colors"
-        style={{ color: "var(--text-base)" }}
+        style={{ color: "var(--text-primary)" }}
         onClick={props.onCopyStackTrace}
       >
         <Icon name="clipboard" size="sm" style={{ color: "var(--text-weak)" }} />
diff --git a/src/components/debugger/ConditionalBreakpointDialog.tsx b/src/components/debugger/ConditionalBreakpointDialog.tsx
index e6d790cd..fc8e6c65 100644
--- a/src/components/debugger/ConditionalBreakpointDialog.tsx
+++ b/src/components/debugger/ConditionalBreakpointDialog.tsx
@@ -282,7 +282,7 @@ export function ConditionalBreakpointDialog(props: ConditionalBreakpointDialogPr
                   <div style={{ 
                     "font-family": "monospace", 
                     "font-size": "12px",
-                    color: "var(--text-base)",
+                    color: "var(--text-primary)",
                     "white-space": "pre-wrap",
                     "word-break": "break-word"
                   }}>
diff --git a/src/components/debugger/ConsoleInput.tsx b/src/components/debugger/ConsoleInput.tsx
index 878f54ab..0bdcf0dd 100644
--- a/src/components/debugger/ConsoleInput.tsx
+++ b/src/components/debugger/ConsoleInput.tsx
@@ -198,7 +198,7 @@ export function ConsoleInput(props: ConsoleInputProps) {
             {(item, index) => (
               <div class="flex items-center gap-2 px-2 py-1 cursor-pointer text-xs font-mono" style={{ background: index() === selectedCompletion() ? "var(--surface-hover)" : "transparent" }} onClick={() => applyCompletion(item)} onMouseEnter={() => setSelectedCompletion(index())}>
                 <span class="w-4 text-center shrink-0" style={{ color: getTypeColor(item.type) }}>{getTypeIcon(item.type)}</span>
-                <span class="flex-1 truncate" style={{ color: "var(--text-base)" }}>{item.label}</span>
+                <span class="flex-1 truncate" style={{ color: "var(--text-primary)" }}>{item.label}</span>
                 <Show when={item.detail}>
                   <span class="shrink-0 truncate max-w-[150px]" style={{ color: "var(--text-weak)" }}>{item.detail}</span>
                 </Show>
@@ -221,7 +221,7 @@ export function ConsoleInput(props: ConsoleInputProps) {
           placeholder={debug.state.isPaused ? "Evaluate expression... (Shift+Enter for newline)" : "Paused to evaluate"}
           disabled={!debug.state.isPaused}
           class="flex-1 bg-transparent text-xs outline-none resize-none font-mono"
-          style={{ color: "var(--text-base)", opacity: debug.state.isPaused ? 1 : 0.5, "min-height": "20px", height: isMultiline() ? "auto" : "20px" }}
+          style={{ color: "var(--text-primary)", opacity: debug.state.isPaused ? 1 : 0.5, "min-height": "20px", height: isMultiline() ? "auto" : "20px" }}
           rows={isMultiline() ? Math.min(input().split("\n").length, 8) : 1}
         />
         <button onClick={handleSubmit} disabled={!debug.state.isPaused || !input().trim()} class="p-1 rounded transition-colors disabled:opacity-30 mt-0.5" style={{ color: "var(--text-weak)" }} title="Evaluate (Enter)">
diff --git a/src/components/debugger/DataBreakpointPanel.tsx b/src/components/debugger/DataBreakpointPanel.tsx
index 7c5ee83f..5b3a3214 100644
--- a/src/components/debugger/DataBreakpointPanel.tsx
+++ b/src/components/debugger/DataBreakpointPanel.tsx
@@ -120,7 +120,7 @@ export function DataBreakpointPanel(_props: DataBreakpointPanelProps) {
             class="w-full px-2 py-1 text-xs rounded outline-none"
             style={{
               background: "var(--surface-sunken)",
-              color: "var(--text-base)",
+              color: "var(--text-primary)",
               border: "1px solid var(--border-weak)",
             }}
             autofocus
@@ -136,7 +136,7 @@ export function DataBreakpointPanel(_props: DataBreakpointPanelProps) {
               class="flex-1 px-2 py-1 text-xs rounded outline-none"
               style={{
                 background: "var(--surface-sunken)",
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
                 border: "1px solid var(--border-weak)",
               }}
             >
diff --git a/src/components/debugger/DataBreakpointView.tsx b/src/components/debugger/DataBreakpointView.tsx
index f2067aeb..cf03c00a 100644
--- a/src/components/debugger/DataBreakpointView.tsx
+++ b/src/components/debugger/DataBreakpointView.tsx
@@ -73,7 +73,7 @@ export function DataBreakpointView(_props: DataBreakpointViewProps) {
         class="flex items-center justify-between px-2 py-1"
         style={{ "border-bottom": "1px solid var(--border-weak)" }}
       >
-        <span class="text-xs font-medium" style={{ color: "var(--text-base)" }}>
+        <span class="text-xs font-medium" style={{ color: "var(--text-primary)" }}>
           Data Breakpoints
         </span>
         <div class="flex items-center gap-1">
@@ -112,7 +112,7 @@ export function DataBreakpointView(_props: DataBreakpointViewProps) {
             class="w-full px-2 py-1 text-xs rounded outline-none"
             style={{
               background: "var(--surface-sunken)",
-              color: "var(--text-base)",
+              color: "var(--text-primary)",
               border: "1px solid var(--border-weak)",
             }}
             autofocus
@@ -124,7 +124,7 @@ export function DataBreakpointView(_props: DataBreakpointViewProps) {
               class="px-2 py-1 text-xs rounded outline-none"
               style={{
                 background: "var(--surface-sunken)",
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
                 border: "1px solid var(--border-weak)",
               }}
             >
@@ -196,7 +196,7 @@ export function DataBreakpointView(_props: DataBreakpointViewProps) {
                   <div class="flex items-center gap-1">
                     <span
                       class="font-mono text-xs truncate"
-                      style={{ color: "var(--text-base)" }}
+                      style={{ color: "var(--text-primary)" }}
                     >
                       {bp.variableName}
                     </span>
diff --git a/src/components/debugger/DebugConsole.tsx b/src/components/debugger/DebugConsole.tsx
index 4f1ca9c0..a4901e07 100644
--- a/src/components/debugger/DebugConsole.tsx
+++ b/src/components/debugger/DebugConsole.tsx
@@ -357,7 +357,7 @@ export function DebugConsole() {
           onInput={(e) => setFilterText((e.target as HTMLInputElement).value)}
           class="flex-1 bg-transparent text-xs outline-none px-2 py-0.5 rounded border"
           style={{
-            color: "var(--text-base)",
+            color: "var(--text-primary)",
             "border-color": "var(--border-weak)",
             background: "var(--background-stronger)",
           }}
@@ -370,7 +370,7 @@ export function DebugConsole() {
               onChange={() => setShowStdout(!showStdout())}
               class="w-3 h-3"
             />
-            <span style={{ color: "var(--text-base)" }}>stdout</span>
+            <span style={{ color: "var(--text-primary)" }}>stdout</span>
           </label>
           <label class="flex items-center gap-1 cursor-pointer">
             <input
@@ -488,7 +488,7 @@ export function DebugConsole() {
                   {/* Label */}
                   <span
                     class="flex-1 truncate"
-                    style={{ color: "var(--text-base)" }}
+                    style={{ color: "var(--text-primary)" }}
                   >
                     {item.label}
                   </span>
@@ -541,7 +541,7 @@ export function DebugConsole() {
             class="flex-1 bg-transparent text-xs outline-none resize-none"
             rows={1}
             style={{
-              color: "var(--text-base)",
+              color: "var(--text-primary)",
               opacity: debug.state.isPaused ? 1 : 0.5,
               "line-height": "1.5",
               "max-height": "120px",
diff --git a/src/components/debugger/DisassemblyEnhanced.tsx b/src/components/debugger/DisassemblyEnhanced.tsx
index c9fc9d5d..f333159a 100644
--- a/src/components/debugger/DisassemblyEnhanced.tsx
+++ b/src/components/debugger/DisassemblyEnhanced.tsx
@@ -101,7 +101,7 @@ export function MixedSourceDisplay(props: MixedSourceDisplayProps) {
                     {line.instruction!.instructionBytes}
                   </span>
                 </Show>
-                <span class="flex-1 truncate" style={{ color: "var(--text-base)" }}>
+                <span class="flex-1 truncate" style={{ color: "var(--text-primary)" }}>
                   {line.instruction?.instruction}
                 </span>
                 <Show when={line.instruction?.symbol}>
@@ -172,7 +172,7 @@ export function InstructionStepButton(props: InstructionStepButtonProps) {
       onClick={handleStep}
       disabled={props.disabled || !debug.state.isPaused || stepping()}
       class="flex items-center gap-1 px-2 py-1 text-xs rounded transition-colors disabled:opacity-40 hover:bg-[var(--surface-raised)]"
-      style={{ color: "var(--text-base)" }}
+      style={{ color: "var(--text-primary)" }}
       title="Step one instruction (instruction-level stepping)"
     >
       <Icon name="arrow-right-to-bracket" size="xs" />
@@ -270,7 +270,7 @@ export function AddressNavigator(props: AddressNavigatorProps) {
           class="w-full px-2 py-0.5 text-xs font-mono rounded outline-none"
           style={{
             background: "var(--surface-sunken)",
-            color: "var(--text-base)",
+            color: "var(--text-primary)",
             border: `1px solid ${error() ? "var(--cortex-error)" : "var(--border-weak)"}`,
             height: "22px",
             "line-height": "22px",
@@ -286,7 +286,7 @@ export function AddressNavigator(props: AddressNavigatorProps) {
         onClick={handleNavigate}
         disabled={!input().trim()}
         class="px-2 py-0.5 text-xs rounded transition-colors disabled:opacity-40 hover:bg-[var(--surface-raised)]"
-        style={{ color: "var(--text-base)", height: "22px" }}
+        style={{ color: "var(--text-primary)", height: "22px" }}
         title="Go to address"
       >
         <Icon name="arrow-right" size="xs" />
diff --git a/src/components/debugger/DisassemblyView.tsx b/src/components/debugger/DisassemblyView.tsx
index 0d8b973b..97c5bdf8 100644
--- a/src/components/debugger/DisassemblyView.tsx
+++ b/src/components/debugger/DisassemblyView.tsx
@@ -504,7 +504,7 @@ export function DisassemblyView() {
               class="w-40 px-2 py-1 text-xs font-mono rounded outline-none"
               style={{
                 background: "var(--surface-sunken)",
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
                 border: "1px solid var(--border-weak)",
               }}
               autofocus
@@ -571,7 +571,7 @@ export function DisassemblyView() {
           class="absolute top-12 right-4 px-3 py-1.5 rounded text-xs z-50"
           style={{
             background: "var(--surface-raised)",
-            color: "var(--text-base)",
+            color: "var(--text-primary)",
             border: "1px solid var(--border-weak)",
           }}
         >
diff --git a/src/components/debugger/LaunchConfigModal.tsx b/src/components/debugger/LaunchConfigModal.tsx
index 9aaa80f7..aff55912 100644
--- a/src/components/debugger/LaunchConfigModal.tsx
+++ b/src/components/debugger/LaunchConfigModal.tsx
@@ -113,7 +113,7 @@ export function LaunchConfigModal(props: LaunchConfigModalProps) {
           class="shrink-0 flex items-center justify-between px-4 py-3 border-b"
           style={{ "border-color": "var(--border-weak)" }}
         >
-          <h2 class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+          <h2 class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
             Start Debugging
           </h2>
           <button
@@ -141,7 +141,7 @@ export function LaunchConfigModal(props: LaunchConfigModalProps) {
                       class="flex items-center gap-2 px-3 py-2 rounded text-left transition-colors hover:bg-[var(--surface-raised)]"
                       style={{
                         background: "var(--surface-sunken)",
-                        color: "var(--text-base)",
+                        color: "var(--text-primary)",
                       }}
                     >
                       <Icon name="terminal" size="md" style={{ color: "var(--text-weak)" }} />
@@ -160,7 +160,7 @@ export function LaunchConfigModal(props: LaunchConfigModalProps) {
               <div class="flex items-center justify-between">
                 <div class="flex items-center gap-2">
                   <Icon name="terminal" size="md" style={{ color: "var(--text-weak)" }} />
-                  <span class="text-sm" style={{ color: "var(--text-base)" }}>
+                  <span class="text-sm" style={{ color: "var(--text-primary)" }}>
                     {selectedTemplate()!.name}
                   </span>
                 </div>
@@ -185,7 +185,7 @@ export function LaunchConfigModal(props: LaunchConfigModalProps) {
                   class="w-full px-3 py-2 text-sm rounded outline-none"
                   style={{
                     background: "var(--surface-sunken)",
-                    color: "var(--text-base)",
+                    color: "var(--text-primary)",
                     border: "1px solid var(--border-weak)",
                   }}
                 />
@@ -205,7 +205,7 @@ export function LaunchConfigModal(props: LaunchConfigModalProps) {
                     class="flex-1 px-3 py-2 text-sm rounded outline-none"
                     style={{
                       background: "var(--surface-sunken)",
-                      color: "var(--text-base)",
+                      color: "var(--text-primary)",
                       border: "1px solid var(--border-weak)",
                     }}
                   />
@@ -236,7 +236,7 @@ export function LaunchConfigModal(props: LaunchConfigModalProps) {
                   class="w-full px-3 py-2 text-sm rounded outline-none"
                   style={{
                     background: "var(--surface-sunken)",
-                    color: "var(--text-base)",
+                    color: "var(--text-primary)",
                     border: "1px solid var(--border-weak)",
                   }}
                 />
@@ -256,7 +256,7 @@ export function LaunchConfigModal(props: LaunchConfigModalProps) {
                     class="flex-1 px-3 py-2 text-sm rounded outline-none"
                     style={{
                       background: "var(--surface-sunken)",
-                      color: "var(--text-base)",
+                      color: "var(--text-primary)",
                       border: "1px solid var(--border-weak)",
                     }}
                   />
@@ -287,7 +287,7 @@ export function LaunchConfigModal(props: LaunchConfigModalProps) {
                   class="w-full px-3 py-2 text-sm rounded outline-none resize-none font-mono"
                   style={{
                     background: "var(--surface-sunken)",
-                    color: "var(--text-base)",
+                    color: "var(--text-primary)",
                     border: "1px solid var(--border-weak)",
                   }}
                 />
@@ -305,7 +305,7 @@ export function LaunchConfigModal(props: LaunchConfigModalProps) {
                 <label
                   for="stopOnEntry"
                   class="text-sm"
-                  style={{ color: "var(--text-base)" }}
+                  style={{ color: "var(--text-primary)" }}
                 >
                   Stop on entry
                 </label>
@@ -331,7 +331,7 @@ export function LaunchConfigModal(props: LaunchConfigModalProps) {
                       class="w-full px-3 py-2 text-sm rounded outline-none"
                       style={{
                         background: "var(--surface-sunken)",
-                        color: "var(--text-base)",
+                        color: "var(--text-primary)",
                         border: "1px solid var(--border-weak)",
                       }}
                     >
@@ -356,7 +356,7 @@ export function LaunchConfigModal(props: LaunchConfigModalProps) {
                       class="w-full px-3 py-2 text-sm rounded outline-none"
                       style={{
                         background: "var(--surface-sunken)",
-                        color: "var(--text-base)",
+                        color: "var(--text-primary)",
                         border: "1px solid var(--border-weak)",
                       }}
                     >
@@ -383,7 +383,7 @@ export function LaunchConfigModal(props: LaunchConfigModalProps) {
                       class="w-full px-3 py-2 text-sm rounded outline-none"
                       style={{
                         background: "var(--surface-sunken)",
-                        color: "var(--text-base)",
+                        color: "var(--text-primary)",
                         border: "1px solid var(--border-weak)",
                       }}
                     />
diff --git a/src/components/debugger/LaunchConfigPicker.tsx b/src/components/debugger/LaunchConfigPicker.tsx
index b164f8ec..9ee6ce70 100644
--- a/src/components/debugger/LaunchConfigPicker.tsx
+++ b/src/components/debugger/LaunchConfigPicker.tsx
@@ -954,7 +954,7 @@ export function LaunchConfigPicker(props: LaunchConfigPickerProps) {
             onInput={(e) => setSearchQuery(e.currentTarget.value)}
             placeholder="Select debug configuration to start..."
             class="flex-1 bg-transparent text-sm outline-none"
-            style={{ color: "var(--text-base)" }}
+            style={{ color: "var(--text-primary)" }}
           />
           <Show when={searchQuery()}>
             <button
@@ -1014,7 +1014,7 @@ export function LaunchConfigPicker(props: LaunchConfigPickerProps) {
                     <div class="flex items-center gap-2">
                       <span 
                         class="text-sm truncate"
-                        style={{ color: "var(--text-base)" }}
+                        style={{ color: "var(--text-primary)" }}
                       >
                         {item.name}
                       </span>
@@ -1192,7 +1192,7 @@ const debugTypes = [
           class="shrink-0 flex items-center justify-between px-4 py-3 border-b"
           style={{ "border-color": "var(--border-weak)" }}
         >
-          <h2 class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+          <h2 class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
             {props.initialConfig ? "Edit Configuration" : "New Debug Configuration"}
           </h2>
           <button
@@ -1248,7 +1248,7 @@ const debugTypes = [
                 checked={request() === "launch"}
                 onChange={() => setRequest("launch")}
               />
-              <span class="text-sm" style={{ color: "var(--text-base)" }}>Launch</span>
+              <span class="text-sm" style={{ color: "var(--text-primary)" }}>Launch</span>
             </label>
             <label class="flex items-center gap-2 cursor-pointer">
               <input
@@ -1257,7 +1257,7 @@ const debugTypes = [
                 checked={request() === "attach"}
                 onChange={() => setRequest("attach")}
               />
-              <span class="text-sm" style={{ color: "var(--text-base)" }}>Attach</span>
+              <span class="text-sm" style={{ color: "var(--text-primary)" }}>Attach</span>
             </label>
           </div>
 
@@ -1274,7 +1274,7 @@ const debugTypes = [
               class="w-full px-3 py-2 text-sm rounded outline-none"
               style={{
                 background: "var(--surface-sunken)",
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
                 border: "1px solid var(--border-weak)",
               }}
             />
@@ -1295,7 +1295,7 @@ const debugTypes = [
                   class="flex-1 px-3 py-2 text-sm rounded outline-none font-mono"
                   style={{
                     background: "var(--surface-sunken)",
-                    color: "var(--text-base)",
+                    color: "var(--text-primary)",
                     border: "1px solid var(--border-weak)",
                   }}
                 />
@@ -1326,7 +1326,7 @@ const debugTypes = [
                 class="w-full px-3 py-2 text-sm rounded outline-none font-mono"
                 style={{
                   background: "var(--surface-sunken)",
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                   border: "1px solid var(--border-weak)",
                 }}
               />
@@ -1345,7 +1345,7 @@ const debugTypes = [
                 class="w-full px-3 py-2 text-sm rounded outline-none font-mono"
                 style={{
                   background: "var(--surface-sunken)",
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                   border: "1px solid var(--border-weak)",
                 }}
               />
@@ -1365,7 +1365,7 @@ const debugTypes = [
               class="w-full px-3 py-2 text-sm rounded outline-none resize-none font-mono"
               style={{
                 background: "var(--surface-sunken)",
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
                 border: "1px solid var(--border-weak)",
               }}
             />
@@ -1378,7 +1378,7 @@ const debugTypes = [
               checked={stopOnEntry()}
               onChange={(e) => setStopOnEntry(e.currentTarget.checked)}
             />
-            <span class="text-sm" style={{ color: "var(--text-base)" }}>Stop on entry</span>
+            <span class="text-sm" style={{ color: "var(--text-primary)" }}>Stop on entry</span>
           </label>
 
           {/* Tasks */}
@@ -1401,7 +1401,7 @@ const debugTypes = [
                   class="w-full px-3 py-2 text-sm rounded outline-none"
                   style={{
                     background: "var(--surface-sunken)",
-                    color: "var(--text-base)",
+                    color: "var(--text-primary)",
                     border: "1px solid var(--border-weak)",
                   }}
                 >
@@ -1421,7 +1421,7 @@ const debugTypes = [
                   class="w-full px-3 py-2 text-sm rounded outline-none"
                   style={{
                     background: "var(--surface-sunken)",
-                    color: "var(--text-base)",
+                    color: "var(--text-primary)",
                     border: "1px solid var(--border-weak)",
                   }}
                 >
@@ -1616,7 +1616,7 @@ function SnippetPickerModal(props: {
             onInput={(e) => setSearchQuery(e.currentTarget.value)}
             placeholder="Search configuration snippets..."
             class="flex-1 bg-transparent text-sm outline-none"
-            style={{ color: "var(--text-base)" }}
+            style={{ color: "var(--text-primary)" }}
           />
           <Show when={searchQuery()}>
             <button
@@ -1691,7 +1691,7 @@ function SnippetPickerModal(props: {
 
                             {/* Content */}
                             <div class="flex-1 min-w-0">
-                              <div class="text-sm truncate" style={{ color: "var(--text-base)" }}>
+                              <div class="text-sm truncate" style={{ color: "var(--text-primary)" }}>
                                 {snippet.name}
                               </div>
                               <div class="text-xs truncate" style={{ color: "var(--text-muted)" }}>
diff --git a/src/components/debugger/LaunchConfigurations.tsx b/src/components/debugger/LaunchConfigurations.tsx
index 9f8630e5..6ee50055 100644
--- a/src/components/debugger/LaunchConfigurations.tsx
+++ b/src/components/debugger/LaunchConfigurations.tsx
@@ -98,7 +98,7 @@ export function LaunchConfigurations(props: LaunchConfigurationsProps) {
           class="flex items-center gap-1.5 px-2 py-1 text-xs rounded transition-colors min-w-[140px] max-w-[200px] disabled:opacity-50"
           style={{
             background: "var(--surface-sunken)",
-            color: "var(--text-base)",
+            color: "var(--text-primary)",
             border: "1px solid var(--border-weak)",
           }}
         >
@@ -139,7 +139,7 @@ export function LaunchConfigurations(props: LaunchConfigurationsProps) {
                       handleSelect({ type: "config", name: config.name, config })
                     }
                     class="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-left transition-colors hover:bg-[var(--surface-raised)]"
-                    style={{ color: "var(--text-base)" }}
+                    style={{ color: "var(--text-primary)" }}
                   >
                     <Icon name="play" size="xs" style={{ color: "var(--text-weak)", "flex-shrink": "0" }} />
                     <span class="truncate flex-1">{config.name}</span>
@@ -172,7 +172,7 @@ export function LaunchConfigurations(props: LaunchConfigurationsProps) {
                         handleSelect({ type: "compound", name: compound.name, compound })
                       }
                       class="flex-1 flex items-center gap-2 text-xs text-left"
-                      style={{ color: "var(--text-base)" }}
+                      style={{ color: "var(--text-primary)" }}
                     >
                       <Icon
                         name="layer-group"
@@ -354,7 +354,7 @@ function CompoundEditor(props: CompoundEditorProps) {
         >
           <div class="flex items-center gap-2">
             <Icon name="layer-group" size="md" style={{ color: "var(--accent)" }} />
-            <h2 class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+            <h2 class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
               Edit Compound
             </h2>
           </div>
@@ -384,7 +384,7 @@ function CompoundEditor(props: CompoundEditorProps) {
               class="w-full px-3 py-2 text-sm rounded outline-none"
               style={{
                 background: "var(--surface-sunken)",
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
                 border: "1px solid var(--border-weak)",
               }}
             />
@@ -429,7 +429,7 @@ function CompoundEditor(props: CompoundEditorProps) {
                       />
                       <span
                         class="text-sm flex-1"
-                        style={{ color: "var(--text-base)" }}
+                        style={{ color: "var(--text-primary)" }}
                       >
                         {config.name}
                       </span>
@@ -462,7 +462,7 @@ function CompoundEditor(props: CompoundEditorProps) {
               class="w-full px-3 py-2 text-sm rounded outline-none"
               style={{
                 background: "var(--surface-sunken)",
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
                 border: "1px solid var(--border-weak)",
               }}
             />
@@ -484,7 +484,7 @@ function CompoundEditor(props: CompoundEditorProps) {
               class="w-full px-3 py-2 text-sm rounded outline-none"
               style={{
                 background: "var(--surface-sunken)",
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
                 border: "1px solid var(--border-weak)",
               }}
             />
@@ -502,7 +502,7 @@ function CompoundEditor(props: CompoundEditorProps) {
             <label
               for="stopAll"
               class="text-sm"
-              style={{ color: "var(--text-base)" }}
+              style={{ color: "var(--text-primary)" }}
             >
               Stop all when one stops
             </label>
diff --git a/src/components/debugger/LoadedScriptsView.tsx b/src/components/debugger/LoadedScriptsView.tsx
index 1b4b5a6b..ebf82209 100644
--- a/src/components/debugger/LoadedScriptsView.tsx
+++ b/src/components/debugger/LoadedScriptsView.tsx
@@ -207,7 +207,7 @@ function ScriptItem(props: ScriptItemProps) {
       <Icon name="file" size="xs" class="shrink-0" style={{ color: "var(--text-weak)" }} />
 
       {/* Script name */}
-      <span class="flex-1 truncate" style={{ color: "var(--text-base)" }}>
+      <span class="flex-1 truncate" style={{ color: "var(--text-primary)" }}>
         {props.script.name}
       </span>
 
@@ -245,7 +245,7 @@ function ScriptGroupHeader(props: ScriptGroupHeaderProps) {
       <Icon name={props.group.iconName} size="sm" style={{ color: getGroupColor(props.group.type) }} />
 
       {/* Group label */}
-      <span class="font-medium" style={{ color: "var(--text-base)" }}>
+      <span class="font-medium" style={{ color: "var(--text-primary)" }}>
         {props.group.label}
       </span>
 
@@ -504,7 +504,7 @@ export function LoadedScriptsView() {
             class="w-full pl-7 pr-2 py-1.5 text-xs rounded outline-none"
             style={{
               background: "var(--surface-sunken)",
-              color: "var(--text-base)",
+              color: "var(--text-primary)",
               border: "1px solid var(--border-weak)",
             }}
           />
diff --git a/src/components/debugger/LogpointDialog.tsx b/src/components/debugger/LogpointDialog.tsx
index 247602cd..8b420059 100644
--- a/src/components/debugger/LogpointDialog.tsx
+++ b/src/components/debugger/LogpointDialog.tsx
@@ -135,7 +135,7 @@ export function LogpointDialog(props: LogpointDialogProps) {
             <div style={{ 
               "font-family": "monospace", 
               "font-size": "12px",
-              color: "var(--text-base)",
+              color: "var(--text-primary)",
               "white-space": "pre-wrap",
               "word-break": "break-word"
             }}>
diff --git a/src/components/debugger/MemoryInspector.tsx b/src/components/debugger/MemoryInspector.tsx
index 9581bb57..5b754372 100644
--- a/src/components/debugger/MemoryInspector.tsx
+++ b/src/components/debugger/MemoryInspector.tsx
@@ -76,7 +76,7 @@ function HexRow(props: { row: MemoryRow }) {
       >
         {formatAddr(props.row.address)}
       </span>
-      <span class="shrink-0" style={{ width: `${BYTES_PER_ROW * 3}ch`, color: "var(--text-base)" }}>
+      <span class="shrink-0" style={{ width: `${BYTES_PER_ROW * 3}ch`, color: "var(--text-primary)" }}>
         {props.row.bytes.map((b) => byteToHex(b)).join(" ")}
         {props.row.bytes.length < BYTES_PER_ROW ? "   ".repeat(BYTES_PER_ROW - props.row.bytes.length) : ""}
       </span>
@@ -160,7 +160,7 @@ export function MemoryInspector() {
   };
 
   return (
-    <div class="flex flex-col h-full" style={{ background: "var(--cortex-bg-primary)", color: "var(--text-base)" }}>
+    <div class="flex flex-col h-full" style={{ background: "var(--cortex-bg-primary)", color: "var(--text-primary)" }}>
       <div class="flex items-center gap-1 px-2 shrink-0" style={{ height: "32px", "border-bottom": "1px solid var(--surface-border)" }}>
         <Icon name="memory" size={14} color="var(--text-weak)" />
         <span style={{ "font-size": "11px", "font-weight": "600", "text-transform": "uppercase" }}>Memory</span>
@@ -176,7 +176,7 @@ export function MemoryInspector() {
           style={{
             flex: "1",
             background: "var(--cortex-bg-primary)",
-            color: "var(--text-base)",
+            color: "var(--text-primary)",
             border: "1px solid var(--surface-border)",
             "border-radius": "3px",
             padding: "2px 6px",
diff --git a/src/components/debugger/MemoryView.tsx b/src/components/debugger/MemoryView.tsx
index 513a44c3..54dabcf6 100644
--- a/src/components/debugger/MemoryView.tsx
+++ b/src/components/debugger/MemoryView.tsx
@@ -580,7 +580,7 @@ export function MemoryView() {
             style={{
               "font-family": "monospace",
               background: "var(--surface-sunken)",
-              color: "var(--text-base)",
+              color: "var(--text-primary)",
               border: "1px solid var(--border-weak)",
             }}
           />
@@ -636,7 +636,7 @@ export function MemoryView() {
           class="px-2 py-1 text-xs rounded outline-none cursor-pointer"
           style={{
             background: "var(--surface-sunken)",
-            color: "var(--text-base)",
+            color: "var(--text-primary)",
             border: "1px solid var(--border-weak)",
           }}
           title="Bytes per row"
@@ -653,7 +653,7 @@ export function MemoryView() {
           class="px-2 py-1 text-xs rounded outline-none cursor-pointer"
           style={{
             background: "var(--surface-sunken)",
-            color: "var(--text-base)",
+            color: "var(--text-primary)",
             border: "1px solid var(--border-weak)",
           }}
           title="Byte grouping"
@@ -727,7 +727,7 @@ export function MemoryView() {
             style={{
               "font-family": "monospace",
               background: "var(--surface-sunken)",
-              color: "var(--text-base)",
+              color: "var(--text-primary)",
               border: "1px solid var(--border-weak)",
             }}
             autofocus
@@ -783,7 +783,7 @@ export function MemoryView() {
                 class="group flex items-center gap-1 px-2 py-0.5 text-xs rounded cursor-pointer transition-colors hover:bg-[var(--surface-raised)]"
                 style={{
                   background: "var(--surface-sunken)",
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                 }}
               >
                 <span
diff --git a/src/components/debugger/VariableVisualizers.tsx b/src/components/debugger/VariableVisualizers.tsx
index 00798150..65ca84b2 100644
--- a/src/components/debugger/VariableVisualizers.tsx
+++ b/src/components/debugger/VariableVisualizers.tsx
@@ -491,7 +491,7 @@ function JsonNode(props: JsonNodeProps): JSX.Element {
         }
         return { text: `Object`, color: "var(--text-weak)" };
       default:
-        return { text: String(val), color: "var(--text-base)" };
+        return { text: String(val), color: "var(--text-primary)" };
     }
   };
 
@@ -610,7 +610,7 @@ export function ArrayVisualizer(props: ArrayVisualizerProps): JSX.Element {
         if (Array.isArray(val)) return { text: `Array(${val.length})`, color: "var(--text-weak)" };
         return { text: "{...}", color: "var(--text-weak)" };
       default:
-        return { text: String(val), color: "var(--text-base)" };
+        return { text: String(val), color: "var(--text-primary)" };
     }
   };
 
@@ -1076,7 +1076,7 @@ export function MapVisualizer(props: MapVisualizerProps): JSX.Element {
         if (Array.isArray(val)) return { text: `Array(${val.length})`, color: "var(--text-weak)" };
         return { text: "{...}", color: "var(--text-weak)" };
       default:
-        return { text: String(val), color: "var(--text-base)" };
+        return { text: String(val), color: "var(--text-primary)" };
     }
   };
 
@@ -1163,7 +1163,7 @@ export function SetVisualizer(props: SetVisualizerProps): JSX.Element {
         if (Array.isArray(val)) return { text: `Array(${val.length})`, color: "var(--text-weak)" };
         return { text: "{...}", color: "var(--text-weak)" };
       default:
-        return { text: String(val), color: "var(--text-base)" };
+        return { text: String(val), color: "var(--text-primary)" };
     }
   };
 
diff --git a/src/components/debugger/VariablesPanel.tsx b/src/components/debugger/VariablesPanel.tsx
index a6133acf..06f64fbb 100644
--- a/src/components/debugger/VariablesPanel.tsx
+++ b/src/components/debugger/VariablesPanel.tsx
@@ -127,7 +127,7 @@ function VariableTreeItem(props: { variable: Variable; depth: number; parentRef?
             class="flex-1 min-w-0"
             style={{
               background: "var(--cortex-bg-primary)",
-              color: "var(--text-base)",
+              color: "var(--text-primary)",
               border: "1px solid var(--cortex-accent-primary)",
               "border-radius": "2px",
               padding: "0 4px",
@@ -199,7 +199,7 @@ function ScopeSection(props: { scope: Scope }) {
         <span style={{ color: "var(--text-weak)", width: "12px", "text-align": "center" }}>
           {expanded() ? "▾" : "▸"}
         </span>
-        <span style={{ color: "var(--text-base)" }}>{props.scope.name}</span>
+        <span style={{ color: "var(--text-primary)" }}>{props.scope.name}</span>
         <Show when={loading()}>
           <span class="animate-spin" style={{ color: "var(--text-weak)", "font-size": "10px" }}>⟳</span>
         </Show>
@@ -231,7 +231,7 @@ export function VariablesPanel() {
   });
 
   return (
-    <div class="flex flex-col h-full" style={{ background: "var(--cortex-bg-primary)", color: "var(--text-base)" }}>
+    <div class="flex flex-col h-full" style={{ background: "var(--cortex-bg-primary)", color: "var(--text-primary)" }}>
       <div class="flex items-center px-2 shrink-0" style={{ height: "28px", "border-bottom": "1px solid var(--surface-border)" }}>
         <span style={{ "font-size": "11px", "font-weight": "600", "text-transform": "uppercase" }}>Variables</span>
       </div>
diff --git a/src/components/debugger/WatchPanel.tsx b/src/components/debugger/WatchPanel.tsx
index e3b334c1..9f69a204 100644
--- a/src/components/debugger/WatchPanel.tsx
+++ b/src/components/debugger/WatchPanel.tsx
@@ -178,7 +178,7 @@ function WatchExpressionRow(props: { watch: WatchExpression }) {
             class="flex-1 min-w-0"
             style={{
               background: "var(--cortex-bg-primary)",
-              color: "var(--text-base)",
+              color: "var(--text-primary)",
               border: "1px solid var(--cortex-accent-primary)",
               "border-radius": "2px",
               padding: "0 4px",
@@ -224,7 +224,7 @@ export function WatchPanel() {
   };
 
   return (
-    <div class="flex flex-col h-full" style={{ background: "var(--cortex-bg-primary)", color: "var(--text-base)" }}>
+    <div class="flex flex-col h-full" style={{ background: "var(--cortex-bg-primary)", color: "var(--text-primary)" }}>
       <div class="flex items-center justify-between px-2 shrink-0" style={{ height: "28px", "border-bottom": "1px solid var(--surface-border)" }}>
         <span style={{ "font-size": "11px", "font-weight": "600", "text-transform": "uppercase" }}>Watch</span>
         <div class="flex gap-0.5">
@@ -255,7 +255,7 @@ export function WatchPanel() {
             style={{
               flex: "1",
               background: "var(--cortex-bg-primary)",
-              color: "var(--text-base)",
+              color: "var(--text-primary)",
               border: "1px solid var(--surface-border)",
               "border-radius": "3px",
               padding: "2px 6px",
diff --git a/src/components/debugger/WatchView.tsx b/src/components/debugger/WatchView.tsx
index 58e57447..a870e993 100644
--- a/src/components/debugger/WatchView.tsx
+++ b/src/components/debugger/WatchView.tsx
@@ -185,7 +185,7 @@ export function WatchView() {
         <div class="mx-2 mb-1 rounded border overflow-hidden" style={{ "border-color": "var(--border-weak)", background: "var(--surface-sunken)" }}>
           <For each={expressionHistory()}>
             {(expr) => (
-              <button onClick={() => useHistoryItem(expr)} class="w-full text-left px-2 py-0.5 text-xs font-mono truncate hover:bg-[var(--surface-raised)] transition-colors" style={{ color: "var(--text-base)" }}>
+              <button onClick={() => useHistoryItem(expr)} class="w-full text-left px-2 py-0.5 text-xs font-mono truncate hover:bg-[var(--surface-raised)] transition-colors" style={{ color: "var(--text-primary)" }}>
                 {expr}
               </button>
             )}
@@ -195,7 +195,7 @@ export function WatchView() {
 
       <Show when={isAdding()}>
         <div class="px-2 pb-2">
-          <input type="text" value={newExpression()} onInput={(e) => setNewExpression(e.currentTarget.value)} onKeyDown={handleKeyDown} onBlur={() => { if (!newExpression().trim()) setIsAdding(false); }} placeholder="Enter expression to watch" class="w-full px-2 py-1 text-xs rounded outline-none" style={{ background: "var(--surface-sunken)", color: "var(--text-base)", border: "1px solid var(--border-weak)" }} autofocus />
+          <input type="text" value={newExpression()} onInput={(e) => setNewExpression(e.currentTarget.value)} onKeyDown={handleKeyDown} onBlur={() => { if (!newExpression().trim()) setIsAdding(false); }} placeholder="Enter expression to watch" class="w-full px-2 py-1 text-xs rounded outline-none" style={{ background: "var(--surface-sunken)", color: "var(--text-primary)", border: "1px solid var(--border-weak)" }} autofocus />
         </div>
       </Show>
 
@@ -230,7 +230,7 @@ export function WatchView() {
                     </span>
                   </div>
                 }>
-                  <input type="text" value={editingValue()} onInput={(e) => setEditingValue(e.currentTarget.value)} onKeyDown={handleEditKeyDown} onBlur={handleSaveEdit} class="flex-1 px-1 py-0 text-xs rounded outline-none" style={{ background: "var(--surface-sunken)", color: "var(--text-base)", border: "1px solid var(--accent)", height: "18px", "line-height": "18px" }} autofocus />
+                  <input type="text" value={editingValue()} onInput={(e) => setEditingValue(e.currentTarget.value)} onKeyDown={handleEditKeyDown} onBlur={handleSaveEdit} class="flex-1 px-1 py-0 text-xs rounded outline-none" style={{ background: "var(--surface-sunken)", color: "var(--text-primary)", border: "1px solid var(--accent)", height: "18px", "line-height": "18px" }} autofocus />
                 </Show>
 
                 <Show when={watch.result !== undefined && !watch.error}>
diff --git a/src/components/dev/ProcessExplorer.tsx b/src/components/dev/ProcessExplorer.tsx
index 047f0c95..406b56d6 100644
--- a/src/components/dev/ProcessExplorer.tsx
+++ b/src/components/dev/ProcessExplorer.tsx
@@ -1357,7 +1357,8 @@ Process List:
                   </div>
                 }
               >
-                <table class="w-full">
+                <table class="w-full" aria-label="Process list">
+                  <caption class="sr-only">List of running processes</caption>
                   <thead
                     class="sticky top-0 z-10"
                     style={{ background: isDark() ? "var(--cortex-bg-secondary)" : "var(--cortex-text-primary)" }}
diff --git a/src/components/editor/EncodingPicker.tsx b/src/components/editor/EncodingPicker.tsx
index db8c2d88..c6402b7c 100644
--- a/src/components/editor/EncodingPicker.tsx
+++ b/src/components/editor/EncodingPicker.tsx
@@ -255,7 +255,7 @@ export function EncodingPicker(props: EncodingPickerProps) {
             ref={inputRef}
             type="text"
             class="flex-1 bg-transparent outline-none text-sm"
-            style={{ color: "var(--text-base)" }}
+            style={{ color: "var(--text-primary)" }}
             placeholder="Search encodings..."
             value={searchQuery()}
             onInput={(e) => setSearchQuery(e.currentTarget.value)}
diff --git a/src/components/editor/ImageViewer.tsx b/src/components/editor/ImageViewer.tsx
index 1ddc9405..2b5fdc47 100644
--- a/src/components/editor/ImageViewer.tsx
+++ b/src/components/editor/ImageViewer.tsx
@@ -170,7 +170,7 @@ export function ImageViewer(props: ImageViewerProps) {
         <div class="flex items-center gap-2">
           <Icon name="image" class="w-4 h-4" style={{ color: "var(--text-weak)" }} />
           <Show when={props.filePath}>
-            <span class="text-xs truncate max-w-[200px]" style={{ color: "var(--text-base)" }}>
+            <span class="text-xs truncate max-w-[200px]" style={{ color: "var(--text-primary)" }}>
               {props.filePath!.split(/[/\\]/).pop()}
             </span>
           </Show>
@@ -184,7 +184,7 @@ export function ImageViewer(props: ImageViewerProps) {
           >
             <Icon name="magnifying-glass-minus" class="w-4 h-4" />
           </button>
-          <span class="w-14 text-center text-xs tabular-nums" style={{ color: "var(--text-base)" }}>
+          <span class="w-14 text-center text-xs tabular-nums" style={{ color: "var(--text-primary)" }}>
             {zoomPercent()}
           </span>
           <button
diff --git a/src/components/editor/LanguageSelector.tsx b/src/components/editor/LanguageSelector.tsx
index b88b6e01..12fc1083 100644
--- a/src/components/editor/LanguageSelector.tsx
+++ b/src/components/editor/LanguageSelector.tsx
@@ -330,7 +330,7 @@ export function LanguageSelector(props: LanguageSelectorProps) {
             ref={inputRef}
             type="text"
             class="flex-1 bg-transparent outline-none text-sm"
-            style={{ color: "var(--text-base)" }}
+            style={{ color: "var(--text-primary)" }}
             placeholder="Search languages..."
             value={searchQuery()}
             onInput={(e) => setSearchQuery(e.currentTarget.value)}
diff --git a/src/components/editor/LanguageTools.tsx b/src/components/editor/LanguageTools.tsx
index 5f2ef09a..5c33441d 100644
--- a/src/components/editor/LanguageTools.tsx
+++ b/src/components/editor/LanguageTools.tsx
@@ -1202,7 +1202,7 @@ export function LanguageTools(props: LanguageToolsProps) {
             class="flex items-center justify-between px-3 py-2 border-b"
             style={{ "border-color": "var(--border-weak)" }}
           >
-            <span class="text-xs font-medium" style={{ color: "var(--text-base)" }}>
+            <span class="text-xs font-medium" style={{ color: "var(--text-primary)" }}>
               Code Actions
             </span>
             <div class="flex items-center gap-1 text-xs" style={{ color: "var(--text-weak)" }}>
@@ -1473,7 +1473,7 @@ function ActionItem(props: ActionItemProps) {
         <Icon />
       </span>
       <div class="flex-1 min-w-0">
-        <div class="text-sm truncate" style={{ color: "var(--text-base)" }}>
+        <div class="text-sm truncate" style={{ color: "var(--text-primary)" }}>
           {props.action.title}
         </div>
         <Show when={props.action.disabled}>
@@ -1564,7 +1564,7 @@ function PreviewPanel(props: PreviewPanelProps) {
           style={{ "border-color": "var(--border-weak)" }}
         >
           <div>
-            <h3 class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+            <h3 class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
               Preview Changes
             </h3>
             <p class="text-xs mt-0.5" style={{ color: "var(--text-weak)" }}>
@@ -1632,7 +1632,7 @@ function PreviewPanel(props: PreviewPanelProps) {
             </For>
           </Show>
           <Show when={!showDiff()}>
-            <pre class="whitespace-pre-wrap" style={{ color: "var(--text-base)" }}>
+            <pre class="whitespace-pre-wrap" style={{ color: "var(--text-primary)" }}>
               {props.preview.previewContent}
             </pre>
           </Show>
diff --git a/src/components/editor/TabSwitcher.tsx b/src/components/editor/TabSwitcher.tsx
index a6515f5d..dc99138d 100644
--- a/src/components/editor/TabSwitcher.tsx
+++ b/src/components/editor/TabSwitcher.tsx
@@ -146,7 +146,7 @@ function TabItem(props: TabItemProps) {
       class="w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors group"
       style={{
         background: props.isSelected ? "var(--surface-active)" : "transparent",
-        color: "var(--text-base)",
+        color: "var(--text-primary)",
       }}
       onMouseEnter={props.onSelect}
       onClick={() => {
@@ -280,7 +280,7 @@ export function TabSwitcher() {
               type="text"
               placeholder="Search open files..."
               class="flex-1 bg-transparent outline-none text-sm"
-              style={{ color: "var(--text-base)" }}
+              style={{ color: "var(--text-primary)" }}
               value={tabSwitcher.state.query}
               onInput={(e) => tabSwitcher.setQuery(e.currentTarget.value)}
               onKeyDown={handleKeyDown}
diff --git a/src/components/git/Bisect.tsx b/src/components/git/Bisect.tsx
index 4b49c18d..20e13767 100644
--- a/src/components/git/Bisect.tsx
+++ b/src/components/git/Bisect.tsx
@@ -357,7 +357,7 @@ export function Bisect(props: BisectProps) {
           class="w-full flex items-center justify-between px-3 py-2 rounded text-sm transition-colors"
           style={{
             background: "var(--surface-base)",
-            color: "var(--text-base)",
+            color: "var(--text-primary)",
             border: "1px solid var(--border-weak)"
           }}
           onClick={() => setOpen(!open())}
@@ -401,7 +401,7 @@ export function Bisect(props: BisectProps) {
                   type="text"
                   placeholder="Search commits..."
                   class="flex-1 bg-transparent text-sm outline-none"
-                  style={{ color: "var(--text-base)" }}
+                  style={{ color: "var(--text-primary)" }}
                   value={localSearch()}
                   onInput={(e) => setLocalSearch(e.currentTarget.value)}
                   autofocus
@@ -424,7 +424,7 @@ export function Bisect(props: BisectProps) {
                     <span class="font-mono text-xs shrink-0" style={{ color: "var(--text-weak)" }}>
                       {commit.shortHash}
                     </span>
-                    <span class="text-sm truncate flex-1" style={{ color: "var(--text-base)" }}>
+                    <span class="text-sm truncate flex-1" style={{ color: "var(--text-primary)" }}>
                       {commit.message.split("\n")[0]}
                     </span>
                     <span class="text-xs shrink-0" style={{ color: "var(--text-weaker)" }}>
@@ -476,7 +476,7 @@ export function Bisect(props: BisectProps) {
       >
         <div class="flex items-center gap-2">
           <Icon name="magnifying-glass" class="w-4 h-4" style={{ color: "var(--text-weak)" }} />
-          <span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+          <span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
             Git Bisect
           </span>
           <Show when={bisectStatus().active}>
@@ -535,7 +535,7 @@ export function Bisect(props: BisectProps) {
                   <Icon name="bullseye" class="w-5 h-5" style={{ color: "var(--cortex-info)" }} />
                 </div>
                 <div>
-                  <h3 class="text-sm font-medium mb-1" style={{ color: "var(--text-base)" }}>
+                  <h3 class="text-sm font-medium mb-1" style={{ color: "var(--text-primary)" }}>
                     Find the Bug
                   </h3>
                   <p class="text-xs" style={{ color: "var(--text-weak)" }}>
@@ -574,7 +574,7 @@ export function Bisect(props: BisectProps) {
                     >
                       {item.step}
                     </span>
-                    <span class="text-xs" style={{ color: "var(--text-base)" }}>
+                    <span class="text-xs" style={{ color: "var(--text-primary)" }}>
                       {item.text}
                     </span>
                   </div>
@@ -594,7 +594,7 @@ export function Bisect(props: BisectProps) {
               >
                 1
               </span>
-              <span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+              <span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
                 Select Bad Commit
               </span>
             </div>
@@ -641,7 +641,7 @@ export function Bisect(props: BisectProps) {
               >
                 2
               </span>
-              <span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+              <span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
                 Select Good Commit
               </span>
             </div>
@@ -662,7 +662,7 @@ export function Bisect(props: BisectProps) {
                 <span class="font-mono text-xs" style={{ color: "var(--text-weak)" }}>
                   {selectedBadCommit()!.shortHash}
                 </span>
-                <span class="truncate" style={{ color: "var(--text-base)" }}>
+                <span class="truncate" style={{ color: "var(--text-primary)" }}>
                   {selectedBadCommit()!.message.split("\n")[0]}
                 </span>
               </div>
@@ -707,7 +707,7 @@ export function Bisect(props: BisectProps) {
             <div class="space-y-2">
               <div class="flex items-center justify-between text-xs">
                 <span style={{ color: "var(--text-weak)" }}>Progress</span>
-                <span style={{ color: "var(--text-base)" }}>
+                <span style={{ color: "var(--text-primary)" }}>
                   {bisectStatus().totalSteps - bisectStatus().stepsRemaining} / {bisectStatus().totalSteps} steps
                 </span>
               </div>
@@ -741,7 +741,7 @@ export function Bisect(props: BisectProps) {
               >
                 <div class="flex items-center gap-2 mb-3">
                   <Icon name="flag" class="w-4 h-4" style={{ color: "var(--cortex-info)" }} />
-                  <span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+                  <span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
                     Test This Commit
                   </span>
                 </div>
@@ -749,7 +749,7 @@ export function Bisect(props: BisectProps) {
                 <div class="space-y-2 mb-4">
                   <div class="flex items-center gap-2">
                     <Icon name="code-commit" class="w-4 h-4" style={{ color: "var(--text-weak)" }} />
-                    <span class="font-mono text-sm" style={{ color: "var(--text-base)" }}>
+                    <span class="font-mono text-sm" style={{ color: "var(--text-primary)" }}>
                       {bisectStatus().currentCommit!.shortHash}
                     </span>
                     <button
@@ -762,7 +762,7 @@ export function Bisect(props: BisectProps) {
                       Copy
                     </button>
                   </div>
-                  <p class="text-sm" style={{ color: "var(--text-base)" }}>
+                  <p class="text-sm" style={{ color: "var(--text-primary)" }}>
                     {bisectStatus().currentCommit!.message.split("\n")[0]}
                   </p>
                   <div class="flex items-center gap-4 text-xs" style={{ color: "var(--text-weak)" }}>
@@ -872,7 +872,7 @@ export function Bisect(props: BisectProps) {
                           <span class="font-mono" style={{ color: "var(--text-weak)" }}>
                             {mark.shortHash}
                           </span>
-                          <span class="truncate flex-1" style={{ color: "var(--text-base)" }}>
+                          <span class="truncate flex-1" style={{ color: "var(--text-primary)" }}>
                             {mark.message.split("\n")[0]}
                           </span>
                         </div>
@@ -907,7 +907,7 @@ export function Bisect(props: BisectProps) {
                   >
                     <div class="flex items-center gap-2 mb-2">
                       <Icon name="code-commit" class="w-4 h-4" style={{ color: "var(--text-weak)" }} />
-                      <span class="font-mono text-sm font-medium" style={{ color: "var(--text-base)" }}>
+                      <span class="font-mono text-sm font-medium" style={{ color: "var(--text-primary)" }}>
                         {bisectStatus().culprit!.shortHash}
                       </span>
                       <button
@@ -920,7 +920,7 @@ export function Bisect(props: BisectProps) {
                         Copy SHA
                       </button>
                     </div>
-                    <p class="text-sm mb-2" style={{ color: "var(--text-base)" }}>
+                    <p class="text-sm mb-2" style={{ color: "var(--text-primary)" }}>
                       {bisectStatus().culprit!.message}
                     </p>
                     <div class="flex items-center gap-4 text-xs" style={{ color: "var(--text-weak)" }}>
@@ -951,7 +951,7 @@ export function Bisect(props: BisectProps) {
                     </button>
                     <button
                       class="flex items-center justify-center gap-2 px-4 py-2 rounded text-sm transition-colors disabled:opacity-50"
-                      style={{ background: "var(--surface-active)", color: "var(--text-base)" }}
+                      style={{ background: "var(--surface-active)", color: "var(--text-primary)" }}
                       disabled={!!operationLoading()}
                       onClick={resetBisect}
                     >
@@ -994,7 +994,7 @@ export function Bisect(props: BisectProps) {
                           <span class="font-mono" style={{ color: "var(--text-weak)" }}>
                             {mark.shortHash}
                           </span>
-                          <span class="truncate flex-1" style={{ color: "var(--text-base)" }}>
+                          <span class="truncate flex-1" style={{ color: "var(--text-primary)" }}>
                             {mark.message.split("\n")[0]}
                           </span>
                         </div>
diff --git a/src/components/git/BlameView.tsx b/src/components/git/BlameView.tsx
index 933b4b54..fce29c23 100644
--- a/src/components/git/BlameView.tsx
+++ b/src/components/git/BlameView.tsx
@@ -169,7 +169,7 @@ export function BlameView(props: BlameViewProps) {
       >
         <div class="flex items-center gap-2">
           <Icon name="code-branch" class="w-4 h-4" style={{ color: "var(--text-weak)" }} />
-          <span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+          <span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
             Git Blame
           </span>
           <span class="text-xs truncate max-w-[200px]" style={{ color: "var(--text-weak)" }}>
@@ -284,7 +284,7 @@ export function BlameView(props: BlameViewProps) {
                             <div class="py-1">
                               <div 
                                 class="text-xs truncate"
-                                style={{ color: "var(--text-base)" }}
+                                style={{ color: "var(--text-primary)" }}
                               >
                                 {line.commit.author}
                               </div>
@@ -328,7 +328,7 @@ export function BlameView(props: BlameViewProps) {
                         <td class="px-3 py-0">
                           <pre 
                             class="py-0"
-                            style={{ color: "var(--text-base)" }}
+                            style={{ color: "var(--text-primary)" }}
                           >
                             {line.content}
                           </pre>
@@ -353,13 +353,13 @@ export function BlameView(props: BlameViewProps) {
                     border: "1px solid var(--border-weak)",
                   }}
                 >
-                  <div class="font-medium" style={{ color: "var(--text-base)" }}>
+                  <div class="font-medium" style={{ color: "var(--text-primary)" }}>
                     {info().commit.author}
                   </div>
                   <div style={{ color: "var(--text-weak)" }}>
                     {info().commit.email}
                   </div>
-                  <div class="mt-1" style={{ color: "var(--text-base)" }}>
+                  <div class="mt-1" style={{ color: "var(--text-primary)" }}>
                     {info().commit.message}
                   </div>
                   <div class="mt-1 font-mono" style={{ color: "var(--text-weak)" }}>
@@ -401,14 +401,14 @@ export function BlameView(props: BlameViewProps) {
                     </div>
                     <div class="flex-1 min-w-0">
                       <div class="flex items-center gap-2">
-                        <span class="font-medium" style={{ color: "var(--text-base)" }}>
+                        <span class="font-medium" style={{ color: "var(--text-primary)" }}>
                           {commit.author}
                         </span>
                         <span class="text-xs" style={{ color: "var(--text-weak)" }}>
                           {commit.email}
                         </span>
                       </div>
-                      <p class="text-sm mt-1" style={{ color: "var(--text-base)" }}>
+                      <p class="text-sm mt-1" style={{ color: "var(--text-primary)" }}>
                         {commit.message}
                       </p>
                       <div class="flex items-center gap-3 mt-2 text-xs" style={{ color: "var(--text-weak)" }}>
diff --git a/src/components/git/BranchComparison.tsx b/src/components/git/BranchComparison.tsx
index 4797cf67..27398aa0 100644
--- a/src/components/git/BranchComparison.tsx
+++ b/src/components/git/BranchComparison.tsx
@@ -152,7 +152,7 @@ export function BranchComparison(props: BranchComparisonProps) {
       >
         <div class="flex items-center gap-2">
           <Icon name="code-branch" class="w-5 h-5" style={{ color: "var(--text-weak)" }} />
-          <h2 class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+          <h2 class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
             Compare Branches
           </h2>
         </div>
@@ -177,7 +177,7 @@ export function BranchComparison(props: BranchComparisonProps) {
             class="w-full flex items-center justify-between px-3 py-2 rounded text-sm"
             style={{
               background: "var(--background-stronger)",
-              color: "var(--text-base)",
+              color: "var(--text-primary)",
               border: "1px solid var(--border-weak)"
             }}
             onClick={() => setShowBaseDropdown(!showBaseDropdown())}
@@ -204,7 +204,7 @@ export function BranchComparison(props: BranchComparisonProps) {
                     }}
                   >
                     <Icon name="code-branch" class="w-4 h-4" style={{ color: "var(--text-weak)" }} />
-                    <span class="text-sm" style={{ color: "var(--text-base)" }}>
+                    <span class="text-sm" style={{ color: "var(--text-primary)" }}>
                       {branch.name}
                     </span>
                     <Show when={branch.current}>
@@ -234,7 +234,7 @@ export function BranchComparison(props: BranchComparisonProps) {
             class="w-full flex items-center justify-between px-3 py-2 rounded text-sm"
             style={{
               background: "var(--background-stronger)",
-              color: "var(--text-base)",
+              color: "var(--text-primary)",
               border: "1px solid var(--border-weak)"
             }}
             onClick={() => setShowCompareDropdown(!showCompareDropdown())}
@@ -261,7 +261,7 @@ export function BranchComparison(props: BranchComparisonProps) {
                     }}
                   >
                     <Icon name="code-branch" class="w-4 h-4" style={{ color: "var(--text-weak)" }} />
-                    <span class="text-sm" style={{ color: "var(--text-base)" }}>
+                    <span class="text-sm" style={{ color: "var(--text-primary)" }}>
                       {branch.name}
                     </span>
                     <Show when={branch.current}>
@@ -403,7 +403,7 @@ export function BranchComparison(props: BranchComparisonProps) {
                       </span>
                       <span
                         class="text-sm truncate"
-                        style={{ color: "var(--text-base)" }}
+                        style={{ color: "var(--text-primary)" }}
                       >
                         {commit.message.split("\n")[0]}
                       </span>
@@ -446,7 +446,7 @@ export function BranchComparison(props: BranchComparisonProps) {
                     </Show>
                     <span
                       class="text-sm truncate block"
-                      style={{ color: "var(--text-base)" }}
+                      style={{ color: "var(--text-primary)" }}
                     >
                       {file.path}
                     </span>
@@ -492,7 +492,7 @@ export function BranchComparison(props: BranchComparisonProps) {
               class="flex items-center gap-2 px-4 py-2 rounded text-sm transition-colors"
               style={{
                 background: "var(--surface-active)",
-                color: "var(--text-base)"
+                color: "var(--text-primary)"
               }}
               onClick={() => props.onCreatePR?.(compareBranch(), baseBranch())}
             >
diff --git a/src/components/git/CherryPick.tsx b/src/components/git/CherryPick.tsx
index 22fa225b..48d5f192 100644
--- a/src/components/git/CherryPick.tsx
+++ b/src/components/git/CherryPick.tsx
@@ -439,7 +439,7 @@ export function CherryPick(props: CherryPickProps) {
         <div class="flex items-center gap-3">
           <Icon name="copy" class="w-5 h-5" style={{ color: "var(--accent-primary)" }} />
           <div>
-            <h2 class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+            <h2 class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
               Cherry Pick Commits
             </h2>
             <Show when={currentBranchInfo()}>
@@ -601,7 +601,7 @@ export function CherryPick(props: CherryPickProps) {
                 class="w-full flex items-center justify-between px-3 py-2 rounded text-sm transition-colors"
                 style={{
                   background: "var(--surface-base)",
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                   border: "1px solid var(--border-weak)"
                 }}
                 onClick={() => setBranchDropdownOpen(!branchDropdownOpen())}
@@ -633,7 +633,7 @@ export function CherryPick(props: CherryPickProps) {
                         type="text"
                         placeholder="Search branches..."
                         class="flex-1 bg-transparent text-sm outline-none"
-                        style={{ color: "var(--text-base)" }}
+                        style={{ color: "var(--text-primary)" }}
                         value={branchSearchQuery()}
                         onInput={(e) => setBranchSearchQuery(e.currentTarget.value)}
                         autofocus
@@ -657,7 +657,7 @@ export function CherryPick(props: CherryPickProps) {
                           disabled={branch.isCurrent}
                         >
                           <Icon name="code-branch" class="w-4 h-4 shrink-0" style={{ color: branch.isRemote ? "var(--cortex-info)" : "var(--text-weak)" }} />
-                          <span class="flex-1 truncate text-sm" style={{ color: "var(--text-base)" }}>
+                          <span class="flex-1 truncate text-sm" style={{ color: "var(--text-primary)" }}>
                             {branch.name}
                           </span>
                           <Show when={branch.isCurrent}>
@@ -693,7 +693,7 @@ export function CherryPick(props: CherryPickProps) {
                 type="text"
                 placeholder="Search commits..."
                 class="flex-1 bg-transparent text-sm outline-none"
-                style={{ color: "var(--text-base)" }}
+                style={{ color: "var(--text-primary)" }}
                 value={commitSearchQuery()}
                 onInput={(e) => setCommitSearchQuery(e.currentTarget.value)}
                 disabled={isCherryPickActive()}
@@ -759,7 +759,7 @@ export function CherryPick(props: CherryPickProps) {
                           </span>
                           <span
                             class="text-sm truncate"
-                            style={{ color: "var(--text-base)" }}
+                            style={{ color: "var(--text-primary)" }}
                             title={commit.message}
                           >
                             {commit.message.split("\n")[0]}
@@ -806,7 +806,7 @@ export function CherryPick(props: CherryPickProps) {
             >
               <div class="flex items-center gap-2">
                 <Icon name="code-commit" class="w-4 h-4" style={{ color: "var(--text-weak)" }} />
-                <span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+                <span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
                   Selected ({selectedCommits().length})
                 </span>
               </div>
@@ -880,7 +880,7 @@ export function CherryPick(props: CherryPickProps) {
                           </div>
                           <span
                             class="text-xs truncate block"
-                            style={{ color: "var(--text-base)" }}
+                            style={{ color: "var(--text-primary)" }}
                             title={commit.message}
                           >
                             {commit.message.split("\n")[0]}
@@ -917,7 +917,7 @@ export function CherryPick(props: CherryPickProps) {
             >
               <div class="flex items-center gap-2">
                 <Icon name="file-lines" class="w-4 h-4" style={{ color: "var(--text-weak)" }} />
-                <span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+                <span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
                   Commit Details
                 </span>
               </div>
@@ -949,7 +949,7 @@ export function CherryPick(props: CherryPickProps) {
                       >
                         {previewCommit()!.shortHash}
                       </span>
-                      <p class="text-sm mt-1.5" style={{ color: "var(--text-base)" }}>
+                      <p class="text-sm mt-1.5" style={{ color: "var(--text-primary)" }}>
                         {previewCommit()!.message}
                       </p>
                     </div>
@@ -1000,7 +1000,7 @@ export function CherryPick(props: CherryPickProps) {
                             {(file) => (
                               <div
                                 class="text-xs px-2 py-1 rounded truncate"
-                                style={{ background: "var(--surface-base)", color: "var(--text-base)" }}
+                                style={{ background: "var(--surface-base)", color: "var(--text-primary)" }}
                                 title={file.path}
                               >
                                 <span
@@ -1080,7 +1080,7 @@ export function CherryPick(props: CherryPickProps) {
               <Show when={cherryPickState() === "paused-conflict"}>
                 <button
                   class="flex items-center gap-2 px-4 py-2 rounded text-sm transition-colors border"
-                  style={{ "border-color": "var(--border-weak)", color: "var(--text-base)" }}
+                  style={{ "border-color": "var(--border-weak)", color: "var(--text-primary)" }}
                   onClick={resolveConflicts}
                 >
                   <Icon name="code-merge" class="w-4 h-4" />
diff --git a/src/components/git/CommitGraph.tsx b/src/components/git/CommitGraph.tsx
index f3fa60d4..9c3fd260 100644
--- a/src/components/git/CommitGraph.tsx
+++ b/src/components/git/CommitGraph.tsx
@@ -105,7 +105,7 @@ function CommitRow(props: CommitRowProps) {
           {/* Message */}
           <span
             class="flex-1 text-sm truncate"
-            style={{ color: "var(--text-base)" }}
+            style={{ color: "var(--text-primary)" }}
           >
             {props.node.commit.message.split("\n")[0]}
           </span>
@@ -161,7 +161,7 @@ function CommitRow(props: CommitRowProps) {
             <div class="flex items-start gap-2">
               <Icon name="user" class="w-4 h-4 mt-0.5 shrink-0" style={{ color: "var(--text-weak)" }} />
               <div>
-                <div class="text-sm" style={{ color: "var(--text-base)" }}>
+                <div class="text-sm" style={{ color: "var(--text-primary)" }}>
                   {props.node.commit.author}
                 </div>
                 <div class="text-xs" style={{ color: "var(--text-weak)" }}>
@@ -172,14 +172,14 @@ function CommitRow(props: CommitRowProps) {
 
             <div class="flex items-center gap-2">
               <Icon name="clock" class="w-4 h-4 shrink-0" style={{ color: "var(--text-weak)" }} />
-              <span class="text-sm" style={{ color: "var(--text-base)" }}>
+              <span class="text-sm" style={{ color: "var(--text-primary)" }}>
                 {new Date(props.node.commit.date).toLocaleString()}
               </span>
             </div>
 
             <div class="flex items-center gap-2">
               <Icon name="code-commit" class="w-4 h-4 shrink-0" style={{ color: "var(--text-weak)" }} />
-              <span class="text-sm font-mono" style={{ color: "var(--text-base)" }}>
+              <span class="text-sm font-mono" style={{ color: "var(--text-primary)" }}>
                 {props.node.commit.hash}
               </span>
               <button
@@ -205,7 +205,7 @@ function CommitRow(props: CommitRowProps) {
             >
               <pre
                 class="text-sm whitespace-pre-wrap"
-                style={{ color: "var(--text-base)" }}
+                style={{ color: "var(--text-primary)" }}
               >
                 {props.node.commit.message}
               </pre>
@@ -613,7 +613,7 @@ export function CommitGraph(props: CommitGraphProps) {
       >
         <div class="flex items-center gap-2">
           <Icon name="code-commit" class="w-4 h-4" style={{ color: "var(--text-weak)" }} />
-          <span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+          <span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
             Commit History
           </span>
           <span
@@ -706,7 +706,7 @@ export function CommitGraph(props: CommitGraphProps) {
             type="text"
             placeholder="Search commits..."
             class="flex-1 bg-transparent text-sm outline-none"
-            style={{ color: "var(--text-base)" }}
+            style={{ color: "var(--text-primary)" }}
             value={searchQuery()}
             onInput={(e) => setSearchQuery(e.currentTarget.value)}
           />
@@ -818,7 +818,7 @@ export function CommitGraph(props: CommitGraphProps) {
             class="flex items-center justify-between px-3 py-2 border-b sticky top-0"
             style={{ background: "var(--surface-base)", "border-color": "var(--border-weak)" }}
           >
-            <span class="text-xs font-medium" style={{ color: "var(--text-base)" }}>
+            <span class="text-xs font-medium" style={{ color: "var(--text-primary)" }}>
               Comparing {compareFrom()?.slice(0, 7)}..{compareTo()?.slice(0, 7)}
               {" · "}{compareResult()!.length} file(s) changed
             </span>
@@ -834,7 +834,7 @@ export function CommitGraph(props: CommitGraphProps) {
             {(diff) => (
               <div class="px-3 py-1.5 flex items-center gap-2 hover:bg-white/5 cursor-pointer text-xs">
                 <Icon name="file-code" class="w-3.5 h-3.5 shrink-0" style={{ color: "var(--text-weak)" }} />
-                <span class="flex-1 truncate" style={{ color: "var(--text-base)" }}>
+                <span class="flex-1 truncate" style={{ color: "var(--text-primary)" }}>
                   {diff.filePath}
                 </span>
                 <span style={{ color: "var(--cortex-success)" }}>+{diff.additions}</span>
@@ -860,7 +860,7 @@ export function CommitGraph(props: CommitGraphProps) {
           >
             <button
               class="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left hover:bg-white/10"
-              style={{ color: "var(--text-base)" }}
+              style={{ color: "var(--text-primary)" }}
               onClick={() => copyCommitHash(pos().commit.hash)}
             >
               <Icon name="copy" class="w-4 h-4" />
@@ -868,7 +868,7 @@ export function CommitGraph(props: CommitGraphProps) {
             </button>
             <button
               class="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left hover:bg-white/10"
-              style={{ color: "var(--text-base)" }}
+              style={{ color: "var(--text-primary)" }}
               onClick={() => {
                 props.onCheckout?.(pos().commit);
                 closeContextMenu();
@@ -880,7 +880,7 @@ export function CommitGraph(props: CommitGraphProps) {
             <div class="my-1 border-t" style={{ "border-color": "var(--border-weak)" }} />
             <button
               class="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left hover:bg-white/10"
-              style={{ color: "var(--text-base)" }}
+              style={{ color: "var(--text-primary)" }}
               onClick={() => {
                 props.onCherryPick?.(pos().commit);
                 closeContextMenu();
@@ -891,7 +891,7 @@ export function CommitGraph(props: CommitGraphProps) {
             </button>
             <button
               class="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left hover:bg-white/10"
-              style={{ color: "var(--text-base)" }}
+              style={{ color: "var(--text-primary)" }}
               onClick={() => {
                 props.onRevert?.(pos().commit);
                 closeContextMenu();
@@ -903,7 +903,7 @@ export function CommitGraph(props: CommitGraphProps) {
             <div class="my-1 border-t" style={{ "border-color": "var(--border-weak)" }} />
             <button
               class="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left hover:bg-white/10"
-              style={{ color: "var(--text-base)" }}
+              style={{ color: "var(--text-primary)" }}
               onClick={() => {
                 props.onCreateBranch?.(pos().commit);
                 closeContextMenu();
@@ -914,7 +914,7 @@ export function CommitGraph(props: CommitGraphProps) {
             </button>
             <button
               class="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left hover:bg-white/10"
-              style={{ color: "var(--text-base)" }}
+              style={{ color: "var(--text-primary)" }}
               onClick={() => {
                 props.onCreateTag?.(pos().commit);
                 closeContextMenu();
diff --git a/src/components/git/ConflictResolver.tsx b/src/components/git/ConflictResolver.tsx
index 89146ba9..fae36783 100644
--- a/src/components/git/ConflictResolver.tsx
+++ b/src/components/git/ConflictResolver.tsx
@@ -170,7 +170,7 @@ export function ConflictResolver(props: ConflictResolverProps) {
         <div class="flex items-center gap-3">
           <Icon name="code-merge" class="w-5 h-5 text-orange-400" />
           <div>
-            <h2 class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+            <h2 class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
               Resolve Conflicts
             </h2>
             <p class="text-xs" style={{ color: "var(--text-weak)" }}>
@@ -233,7 +233,7 @@ export function ConflictResolver(props: ConflictResolverProps) {
                     <Icon name="triangle-exclamation" class="w-4 h-4 text-orange-400 shrink-0" />
                   </Show>
                   <div class="flex-1 min-w-0">
-                    <div class="text-sm truncate" style={{ color: "var(--text-base)" }}>
+                    <div class="text-sm truncate" style={{ color: "var(--text-primary)" }}>
                       Conflict {index() + 1}
                     </div>
                     <div class="text-xs" style={{ color: "var(--text-weak)" }}>
@@ -304,7 +304,7 @@ export function ConflictResolver(props: ConflictResolverProps) {
                     </button>
                     <button
                       class="flex items-center gap-1.5 px-3 py-1.5 rounded text-sm transition-colors border"
-                      style={{ "border-color": "var(--border-weak)", color: "var(--text-base)" }}
+                      style={{ "border-color": "var(--border-weak)", color: "var(--text-primary)" }}
                       onClick={() => startCustomEdit(hunk())}
                     >
                       Edit Manually
@@ -345,7 +345,7 @@ export function ConflictResolver(props: ConflictResolverProps) {
                                 <span class="inline-block w-8 text-right mr-3 select-none" style={{ color: "var(--text-weaker)" }}>
                                   {hunk().startLine + i()}
                                 </span>
-                                <span style={{ color: "var(--text-base)" }}>{line}</span>
+                                <span style={{ color: "var(--text-primary)" }}>{line}</span>
                               </div>
                             )}
                           </For>
@@ -371,7 +371,7 @@ export function ConflictResolver(props: ConflictResolverProps) {
                                 <span class="inline-block w-8 text-right mr-3 select-none" style={{ color: "var(--text-weaker)" }}>
                                   {hunk().startLine + i()}
                                 </span>
-                                <span style={{ color: "var(--text-base)" }}>{line}</span>
+                                <span style={{ color: "var(--text-primary)" }}>{line}</span>
                               </div>
                             )}
                           </For>
@@ -396,7 +396,7 @@ export function ConflictResolver(props: ConflictResolverProps) {
                               {hunk().startLine + i()}
                             </span>
                             <span class="text-green-400">+ </span>
-                            <span style={{ color: "var(--text-base)" }}>{line}</span>
+                            <span style={{ color: "var(--text-primary)" }}>{line}</span>
                           </div>
                         )}
                       </For>
@@ -423,7 +423,7 @@ export function ConflictResolver(props: ConflictResolverProps) {
                               {hunk().startLine + i()}
                             </span>
                             <span class="text-blue-400">+ </span>
-                            <span style={{ color: "var(--text-base)" }}>{line}</span>
+                            <span style={{ color: "var(--text-primary)" }}>{line}</span>
                           </div>
                         )}
                       </For>
@@ -446,7 +446,7 @@ export function ConflictResolver(props: ConflictResolverProps) {
                               <span class="inline-block w-8 text-right mr-3 select-none" style={{ color: "var(--text-weaker)" }}>
                                 {hunk().startLine + i()}
                               </span>
-                              <span style={{ color: "var(--text-base)" }}>{line}</span>
+                              <span style={{ color: "var(--text-primary)" }}>{line}</span>
                             </div>
                           )}
                         </For>
@@ -529,7 +529,7 @@ export function ConflictResolver(props: ConflictResolverProps) {
             onClick={(e) => e.stopPropagation()}
           >
             <div class="flex items-center justify-between px-4 py-3 border-b" style={{ "border-color": "var(--border-weak)" }}>
-              <h3 id="conflict-edit-title" class="text-lg font-medium" style={{ color: "var(--text-base)" }}>
+              <h3 id="conflict-edit-title" class="text-lg font-medium" style={{ color: "var(--text-primary)" }}>
                 Edit Resolution
               </h3>
               <p id="conflict-edit-desc" class="sr-only">
@@ -550,7 +550,7 @@ export function ConflictResolver(props: ConflictResolverProps) {
                 aria-label="Resolution content"
                 style={{
                   background: "var(--background-stronger)",
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                   border: "1px solid var(--border-weak)"
                 }}
                 value={customContent()}
diff --git a/src/components/git/GitGraph.tsx b/src/components/git/GitGraph.tsx
index 8e8a0d8f..6b73bebb 100644
--- a/src/components/git/GitGraph.tsx
+++ b/src/components/git/GitGraph.tsx
@@ -286,7 +286,7 @@ export function GitGraph(props: GitGraphProps) {
       >
         <div class="flex items-center gap-2">
           <Icon name="code-branch" class="w-4 h-4" style={{ color: "var(--text-weak)" }} />
-          <span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+          <span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
             Git Graph
           </span>
           <span
@@ -323,7 +323,7 @@ export function GitGraph(props: GitGraphProps) {
             type="text"
             placeholder="Filter by message, author, or hash..."
             class="flex-1 bg-transparent text-sm outline-none"
-            style={{ color: "var(--text-base)" }}
+            style={{ color: "var(--text-primary)" }}
             value={searchQuery()}
             onInput={(e) => setSearchQuery(e.currentTarget.value)}
           />
@@ -413,7 +413,7 @@ export function GitGraph(props: GitGraphProps) {
                         {/* Message */}
                         <span
                           class="flex-1 text-sm truncate"
-                          style={{ color: "var(--text-base)" }}
+                          style={{ color: "var(--text-primary)" }}
                         >
                           {node.message.split("\n")[0]}
                         </span>
@@ -453,7 +453,7 @@ export function GitGraph(props: GitGraphProps) {
                             <div class="flex items-start gap-2">
                               <Icon name="user" class="w-4 h-4 mt-0.5 shrink-0" style={{ color: "var(--text-weak)" }} />
                               <div>
-                                <div class="text-sm" style={{ color: "var(--text-base)" }}>
+                                <div class="text-sm" style={{ color: "var(--text-primary)" }}>
                                   {node.author}
                                 </div>
                                 <div class="text-xs" style={{ color: "var(--text-weak)" }}>
@@ -464,14 +464,14 @@ export function GitGraph(props: GitGraphProps) {
 
                             <div class="flex items-center gap-2">
                               <Icon name="clock" class="w-4 h-4 shrink-0" style={{ color: "var(--text-weak)" }} />
-                              <span class="text-sm" style={{ color: "var(--text-base)" }}>
+                              <span class="text-sm" style={{ color: "var(--text-primary)" }}>
                                 {new Date(node.date < 1e12 ? node.date * 1000 : node.date).toLocaleString()}
                               </span>
                             </div>
 
                             <div class="flex items-center gap-2">
                               <Icon name="code-commit" class="w-4 h-4 shrink-0" style={{ color: "var(--text-weak)" }} />
-                              <span class="text-sm font-mono" style={{ color: "var(--text-base)" }}>
+                              <span class="text-sm font-mono" style={{ color: "var(--text-primary)" }}>
                                 {node.hash}
                               </span>
                               <button
@@ -501,7 +501,7 @@ export function GitGraph(props: GitGraphProps) {
                             >
                               <pre
                                 class="text-sm whitespace-pre-wrap"
-                                style={{ color: "var(--text-base)" }}
+                                style={{ color: "var(--text-primary)" }}
                               >
                                 {node.message}
                               </pre>
@@ -520,7 +520,7 @@ export function GitGraph(props: GitGraphProps) {
                   <button
                     class="px-4 py-1.5 text-sm rounded transition-colors hover:bg-white/10"
                     style={{
-                      color: "var(--text-base)",
+                      color: "var(--text-primary)",
                       border: "1px solid var(--border-weak)",
                     }}
                     onClick={loadMore}
diff --git a/src/components/git/InlineDiffEditor.tsx b/src/components/git/InlineDiffEditor.tsx
index d5797ec2..9c2315d5 100644
--- a/src/components/git/InlineDiffEditor.tsx
+++ b/src/components/git/InlineDiffEditor.tsx
@@ -185,7 +185,7 @@ export function InlineDiffEditor(props: InlineDiffEditorProps) {
       <div class="flex items-center justify-between px-3 py-2 border-b shrink-0" style={{ "border-color": "var(--border-weak)" }}>
         <div class="flex items-center gap-2">
           <Icon name="code-compare" class="w-4 h-4" style={{ color: "var(--text-weak)" }} />
-          <span class="text-sm font-medium truncate" style={{ color: "var(--text-base)" }}>{props.filePath}</span>
+          <span class="text-sm font-medium truncate" style={{ color: "var(--text-primary)" }}>{props.filePath}</span>
           <Show when={hunkNav()}>
             <span class="text-xs" style={{ color: "var(--cortex-success)" }}>+{hunkNav()!.totalAdditions}</span>
             <span class="text-xs" style={{ color: "var(--cortex-error)" }}>-{hunkNav()!.totalDeletions}</span>
diff --git a/src/components/git/InteractiveRebase.tsx b/src/components/git/InteractiveRebase.tsx
index ee3660c6..ee90b1a4 100644
--- a/src/components/git/InteractiveRebase.tsx
+++ b/src/components/git/InteractiveRebase.tsx
@@ -572,7 +572,7 @@ export function InteractiveRebase(props: InteractiveRebaseProps) {
                       <Icon name={action.iconName} class="w-4 h-4" />
                     </span>
                     <div class="flex-1 min-w-0">
-                      <div class="text-sm" style={{ color: "var(--text-base)" }}>
+                      <div class="text-sm" style={{ color: "var(--text-primary)" }}>
                         {action.label}
                       </div>
                       <div class="text-xs truncate" style={{ color: "var(--text-weak)" }}>
@@ -603,7 +603,7 @@ export function InteractiveRebase(props: InteractiveRebaseProps) {
             class={`flex-1 text-sm truncate ${
               rowProps.commit.action === "drop" ? "line-through opacity-50" : ""
             }`}
-            style={{ color: "var(--text-base)" }}
+            style={{ color: "var(--text-primary)" }}
             title={rowProps.commit.message}
           >
             {rowProps.commit.message.split("\n")[0]}
@@ -616,7 +616,7 @@ export function InteractiveRebase(props: InteractiveRebaseProps) {
             class="flex-1 px-2 py-1 rounded text-sm outline-none"
             style={{
               background: "var(--surface-base)",
-              color: "var(--text-base)",
+              color: "var(--text-primary)",
               border: "1px solid var(--accent-primary)"
             }}
             value={editedMessage()}
@@ -695,7 +695,7 @@ export function InteractiveRebase(props: InteractiveRebaseProps) {
         <div class="flex items-center gap-3">
           <Icon name="code-commit" class="w-5 h-5" style={{ color: "var(--text-weak)" }} />
           <div>
-            <h2 class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+            <h2 class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
               Interactive Rebase
             </h2>
             <Show when={props.targetBranch || props.ontoCommit}>
@@ -955,7 +955,7 @@ export function InteractiveRebase(props: InteractiveRebaseProps) {
               <Show when={rebaseState() === "paused-conflict"}>
                 <button
                   class="flex items-center gap-2 px-4 py-2 rounded text-sm transition-colors border"
-                  style={{ "border-color": "var(--border-weak)", color: "var(--text-base)" }}
+                  style={{ "border-color": "var(--border-weak)", color: "var(--text-primary)" }}
                   onClick={resolveConflicts}
                 >
                   <Icon name="code-merge" class="w-4 h-4" />
diff --git a/src/components/git/StashPanel.tsx b/src/components/git/StashPanel.tsx
index 875bb02e..31fdd689 100644
--- a/src/components/git/StashPanel.tsx
+++ b/src/components/git/StashPanel.tsx
@@ -186,7 +186,7 @@ export function StashPanel(props: StashPanelProps) {
       >
         <div class="flex items-center gap-2">
           <Icon name="box-archive" class="w-4 h-4" style={{ color: "var(--text-weak)" }} />
-          <span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+          <span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
             Stashes
           </span>
           <span
@@ -230,7 +230,7 @@ export function StashPanel(props: StashPanelProps) {
               type="text"
               placeholder="Search stashes..."
               class="flex-1 bg-transparent text-sm outline-none"
-              style={{ color: "var(--text-base)" }}
+              style={{ color: "var(--text-primary)" }}
               value={searchQuery()}
               onInput={(e) => setSearchQuery(e.currentTarget.value)}
             />
@@ -319,7 +319,7 @@ export function StashPanel(props: StashPanelProps) {
                             >
                               stash@{`{${stash.index}}`}
                             </span>
-                            <span class="text-sm truncate" style={{ color: "var(--text-base)" }}>
+                            <span class="text-sm truncate" style={{ color: "var(--text-primary)" }}>
                               {stash.message}
                             </span>
                           </div>
@@ -392,7 +392,7 @@ export function StashPanel(props: StashPanelProps) {
                         <div class="space-y-3">
                           <div class="flex items-center gap-2">
                             <Icon name="clock" class="w-4 h-4 shrink-0" style={{ color: "var(--text-weak)" }} />
-                            <span class="text-sm" style={{ color: "var(--text-base)" }}>
+                            <span class="text-sm" style={{ color: "var(--text-primary)" }}>
                               {new Date(stash.timestamp * 1000).toLocaleString()}
                             </span>
                           </div>
@@ -408,7 +408,7 @@ export function StashPanel(props: StashPanelProps) {
                             </button>
                             <button
                               class="flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 rounded text-sm transition-colors border"
-                              style={{ "border-color": "var(--border-weak)", color: "var(--text-base)" }}
+                              style={{ "border-color": "var(--border-weak)", color: "var(--text-primary)" }}
                               onClick={() => setConfirmAction({ type: "pop", index: stash.index })}
                             >
                               <Icon name="play" class="w-4 h-4" />
@@ -447,7 +447,7 @@ export function StashPanel(props: StashPanelProps) {
             onClick={(e) => e.stopPropagation()}
           >
             <div class="flex items-center justify-between mb-4">
-              <h3 class="text-lg font-medium" style={{ color: "var(--text-base)" }}>
+              <h3 class="text-lg font-medium" style={{ color: "var(--text-primary)" }}>
                 Create Stash
               </h3>
               <button
@@ -469,7 +469,7 @@ export function StashPanel(props: StashPanelProps) {
                   class="w-full px-3 py-2 rounded text-sm outline-none"
                   style={{
                     background: "var(--background-stronger)",
-                    color: "var(--text-base)",
+                    color: "var(--text-primary)",
                     border: "1px solid var(--border-weak)"
                   }}
                   value={newStashMessage()}
@@ -489,7 +489,7 @@ export function StashPanel(props: StashPanelProps) {
                   onChange={(e) => setIncludeUntracked(e.currentTarget.checked)}
                   class="rounded"
                 />
-                <span class="text-sm" style={{ color: "var(--text-base)" }}>
+                <span class="text-sm" style={{ color: "var(--text-primary)" }}>
                   Include untracked files
                 </span>
               </label>
@@ -529,7 +529,7 @@ export function StashPanel(props: StashPanelProps) {
               style={{ background: "var(--surface-raised)" }}
               onClick={(e) => e.stopPropagation()}
             >
-              <h3 class="text-lg font-medium mb-2" style={{ color: "var(--text-base)" }}>
+              <h3 class="text-lg font-medium mb-2" style={{ color: "var(--text-primary)" }}>
                 {action().type === "drop" ? "Drop Stash?" : "Pop Stash?"}
               </h3>
               <p class="text-sm mb-4" style={{ color: "var(--text-weak)" }}>
diff --git a/src/components/notebook/CellOutput.tsx b/src/components/notebook/CellOutput.tsx
index 508b2523..c31295db 100644
--- a/src/components/notebook/CellOutput.tsx
+++ b/src/components/notebook/CellOutput.tsx
@@ -99,7 +99,7 @@ function JsonTreeNode(props: { label: string; data: unknown; depth: number }) {
           {props.label}
         </span>
         <Show when={!isExpandable()}>
-          <span class="font-mono text-code-sm" style={{ color: "var(--text-base)" }}>
+          <span class="font-mono text-code-sm" style={{ color: "var(--text-primary)" }}>
             : {JSON.stringify(props.data)}
           </span>
         </Show>
@@ -142,7 +142,7 @@ function JsonOutput(props: { data: unknown }) {
           <pre
             class="font-mono text-code-sm"
             style={{
-              color: "var(--text-base)",
+              color: "var(--text-primary)",
               background: "var(--surface-raised)",
               padding: "8px",
               "border-radius": "var(--cortex-radius-sm)",
@@ -233,7 +233,7 @@ function CellOutputRenderer(props: { output: CellOutputType }) {
         return (
           <pre
             class="font-mono text-code-sm"
-            style={{ color: "var(--text-base)", margin: "4px 0" }}
+            style={{ color: "var(--text-primary)", margin: "4px 0" }}
           >
             {resolveDataField(data["text/latex"])}
           </pre>
diff --git a/src/components/notebook/KernelPicker.tsx b/src/components/notebook/KernelPicker.tsx
index 141721cc..90345f44 100644
--- a/src/components/notebook/KernelPicker.tsx
+++ b/src/components/notebook/KernelPicker.tsx
@@ -86,7 +86,7 @@ export function KernelPicker() {
       <button
         onClick={() => setIsOpen(!isOpen())}
         class="flex items-center gap-2 px-2.5 py-1.5 rounded hover:bg-[var(--surface-hover)] transition-colors text-xs"
-        style={{ color: "var(--text-base)" }}
+        style={{ color: "var(--text-primary)" }}
       >
         <span
           class="inline-block w-2 h-2 rounded-full"
@@ -147,7 +147,7 @@ export function KernelPicker() {
                 onClick={handleInterrupt}
                 disabled={!isBusy()}
                 class="flex items-center gap-2 w-full px-3 py-1.5 text-xs hover:bg-[var(--surface-hover)] transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
-                style={{ color: "var(--text-base)" }}
+                style={{ color: "var(--text-primary)" }}
               >
                 <Icon name="stop" class="w-3.5 h-3.5" style={{ color: "var(--warning)" }} />
                 <span>Interrupt Kernel</span>
@@ -155,7 +155,7 @@ export function KernelPicker() {
               <button
                 onClick={handleRestart}
                 class="flex items-center gap-2 w-full px-3 py-1.5 text-xs hover:bg-[var(--surface-hover)] transition-colors"
-                style={{ color: "var(--text-base)" }}
+                style={{ color: "var(--text-primary)" }}
               >
                 <Icon name="rotate-right" class="w-3.5 h-3.5" style={{ color: "var(--cortex-info)" }} />
                 <span>Restart Kernel</span>
diff --git a/src/components/notebook/KernelSelector.tsx b/src/components/notebook/KernelSelector.tsx
index aa79ef80..f625bde8 100644
--- a/src/components/notebook/KernelSelector.tsx
+++ b/src/components/notebook/KernelSelector.tsx
@@ -119,7 +119,7 @@ export function KernelSelector() {
       <button
         onClick={() => setIsOpen(!isOpen())}
         class="flex items-center gap-2 px-2.5 py-1.5 rounded hover:bg-[var(--surface-hover)] transition-colors text-xs"
-        style={{ color: "var(--text-base)" }}
+        style={{ color: "var(--text-primary)" }}
       >
         <span
           class="inline-block w-2 h-2 rounded-full"
diff --git a/src/components/notebook/MarkdownCell.tsx b/src/components/notebook/MarkdownCell.tsx
index 0a0d9081..b7d24570 100644
--- a/src/components/notebook/MarkdownCell.tsx
+++ b/src/components/notebook/MarkdownCell.tsx
@@ -75,7 +75,7 @@ export function MarkdownCell(props: MarkdownCellProps) {
           class="w-full resize-none outline-none font-mono text-sm p-3"
           style={{
             background: "var(--surface-base)",
-            color: "var(--text-base)",
+            color: "var(--text-primary)",
             border: "1px solid var(--accent)",
             "border-radius": "var(--cortex-radius-sm)",
             "min-height": "80px",
diff --git a/src/components/notebook/NotebookCell.tsx b/src/components/notebook/NotebookCell.tsx
index 0c510132..3af94ba5 100644
--- a/src/components/notebook/NotebookCell.tsx
+++ b/src/components/notebook/NotebookCell.tsx
@@ -209,7 +209,7 @@ export function NotebookCell(props: NotebookCellProps) {
                 class="w-full resize-none outline-none font-mono text-sm p-3"
                 style={{
                   background: "var(--surface-base)",
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                   border: "1px solid var(--border-base)",
                   "border-radius": "var(--cortex-radius-sm)",
                   "min-height": "60px",
diff --git a/src/components/notebook/NotebookDiff.tsx b/src/components/notebook/NotebookDiff.tsx
index 9ec4017e..0b330ab0 100644
--- a/src/components/notebook/NotebookDiff.tsx
+++ b/src/components/notebook/NotebookDiff.tsx
@@ -625,7 +625,7 @@ function CellContentPanel(props: {
           <pre
             class="font-mono text-code-sm whitespace-pre-wrap break-words m-0"
             style={{
-              color: "var(--text-base)",
+              color: "var(--text-primary)",
               "line-height": "1.5",
             }}
           >
@@ -729,7 +729,7 @@ function OutputDiffPanel(props: { outputDiffs: OutputDiff[] }) {
                     <div class="p-2">
                       <pre
                         class="font-mono text-code-sm whitespace-pre-wrap m-0"
-                        style={{ color: "var(--text-base)" }}
+                        style={{ color: "var(--text-primary)" }}
                       >
                         {getOutputText(outputDiff.leftOutput || outputDiff.rightOutput!)}
                       </pre>
@@ -799,7 +799,7 @@ function CellDiffRow(props: CellDiffRowProps) {
           <Icon name="chevron-down" class="w-4 h-4" style={{ color: "var(--text-weak)" }} />
         </Show>
 
-        <span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+        <span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
           Cell {props.index + 1}
         </span>
 
@@ -1097,13 +1097,13 @@ export function NotebookDiff(props: NotebookDiffProps) {
         <div class="flex items-center gap-3">
           <div class="flex items-center gap-2">
             <Icon name="chevron-left" class="w-4 h-4" style={{ color: "var(--text-weak)" }} />
-            <span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+            <span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
               {props.leftLabel || "Original"}
             </span>
           </div>
           <span class="text-sm" style={{ color: "var(--text-weaker)" }}>vs</span>
           <div class="flex items-center gap-2">
-            <span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+            <span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
               {props.rightLabel || "Modified"}
             </span>
             <Icon name="chevron-right" class="w-4 h-4" style={{ color: "var(--text-weak)" }} />
diff --git a/src/components/notebook/NotebookEditor.tsx b/src/components/notebook/NotebookEditor.tsx
index 8b56549c..75f8c680 100644
--- a/src/components/notebook/NotebookEditor.tsx
+++ b/src/components/notebook/NotebookEditor.tsx
@@ -330,7 +330,7 @@ function JsonOutput(props: { data: unknown }) {
     <pre
       class="font-mono text-code-sm"
       style={{
-        color: "var(--text-base)",
+        color: "var(--text-primary)",
         background: "var(--surface-raised)",
         padding: "8px",
         "border-radius": "var(--cortex-radius-sm)",
@@ -447,7 +447,7 @@ function CellOutputRenderer(props: { output: NotebookCellOutput }) {
         return (
           <pre
             class="font-mono text-code-sm"
-            style={{ color: "var(--text-base)", margin: "4px 0" }}
+            style={{ color: "var(--text-primary)", margin: "4px 0" }}
           >
             {latex}
           </pre>
@@ -777,7 +777,7 @@ function MarkdownCellEditor(props: MarkdownCellEditorProps) {
           class="w-full resize-none outline-none font-mono text-sm p-3"
           style={{
             background: "var(--surface-base)",
-            color: "var(--text-base)",
+            color: "var(--text-primary)",
             border: "1px solid var(--accent)",
             "border-radius": "var(--cortex-radius-sm)",
             "min-height": "80px",
@@ -822,7 +822,7 @@ function RawCellEditor(props: RawCellEditorProps) {
       class="w-full resize-none outline-none font-mono text-sm p-3"
       style={{
         background: "var(--surface-base)",
-        color: "var(--text-base)",
+        color: "var(--text-primary)",
         border: "1px solid var(--border-base)",
         "border-radius": "var(--cortex-radius-sm)",
         "min-height": "60px",
@@ -1270,7 +1270,7 @@ function AddCellButton(props: AddCellButtonProps) {
                 setShowMenu(false);
               }}
               class="flex items-center gap-2 w-full px-3 py-1.5 text-xs hover:bg-[var(--surface-hover)] transition-colors"
-              style={{ color: "var(--text-base)" }}
+              style={{ color: "var(--text-primary)" }}
             >
               <Icon name="code" class="w-3.5 h-3.5" />
               <span>Code Cell</span>
@@ -1281,7 +1281,7 @@ function AddCellButton(props: AddCellButtonProps) {
                 setShowMenu(false);
               }}
               class="flex items-center gap-2 w-full px-3 py-1.5 text-xs hover:bg-[var(--surface-hover)] transition-colors"
-              style={{ color: "var(--text-base)" }}
+              style={{ color: "var(--text-primary)" }}
             >
               <Icon name="file-lines" class="w-3.5 h-3.5" />
               <span>Markdown Cell</span>
@@ -1804,7 +1804,7 @@ function NotebookSearch(props: NotebookSearchProps) {
               type="text"
               placeholder="Search notebook..."
               class="flex-1 bg-transparent outline-none text-[13px] min-w-0"
-              style={{ color: "var(--text-base)" }}
+              style={{ color: "var(--text-primary)" }}
               value={query()}
               onInput={(e) => setQuery(e.currentTarget.value)}
               onKeyDown={handleInputKeyDown}
@@ -1933,7 +1933,7 @@ function NotebookSearch(props: NotebookSearchProps) {
                 onChange={(e) => setSearchInCode(e.currentTarget.checked)}
                 class="w-3 h-3 accent-[var(--accent-primary)]"
               />
-              <span class="text-[11px]" style={{ color: "var(--text-base)" }}>Code</span>
+              <span class="text-[11px]" style={{ color: "var(--text-primary)" }}>Code</span>
             </label>
             
             <label class="flex items-center gap-1.5 cursor-pointer">
@@ -1943,7 +1943,7 @@ function NotebookSearch(props: NotebookSearchProps) {
                 onChange={(e) => setSearchInMarkdown(e.currentTarget.checked)}
                 class="w-3 h-3 accent-[var(--accent-primary)]"
               />
-              <span class="text-[11px]" style={{ color: "var(--text-base)" }}>Markdown</span>
+              <span class="text-[11px]" style={{ color: "var(--text-primary)" }}>Markdown</span>
             </label>
             
             <label class="flex items-center gap-1.5 cursor-pointer">
@@ -1953,7 +1953,7 @@ function NotebookSearch(props: NotebookSearchProps) {
                 onChange={(e) => setSearchInOutput(e.currentTarget.checked)}
                 class="w-3 h-3 accent-[var(--accent-primary)]"
               />
-              <span class="text-[11px]" style={{ color: "var(--text-base)" }}>Output</span>
+              <span class="text-[11px]" style={{ color: "var(--text-primary)" }}>Output</span>
             </label>
             
             <div class="w-px h-4" style={{ background: "var(--border-weak)" }} />
@@ -1965,7 +1965,7 @@ function NotebookSearch(props: NotebookSearchProps) {
               class="text-[11px] px-2 py-0.5 rounded outline-none"
               style={{
                 background: "var(--background-base)",
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
                 border: "1px solid var(--border-weak)",
               }}
             >
@@ -1989,7 +1989,7 @@ function NotebookSearch(props: NotebookSearchProps) {
                 type="text"
                 placeholder="Replace with..."
                 class="flex-1 bg-transparent outline-none text-[13px] min-w-0"
-                style={{ color: "var(--text-base)" }}
+                style={{ color: "var(--text-primary)" }}
                 value={replaceText()}
                 onInput={(e) => setReplaceText(e.currentTarget.value)}
                 onKeyDown={handleReplaceKeyDown}
@@ -1999,7 +1999,7 @@ function NotebookSearch(props: NotebookSearchProps) {
               class="px-2.5 py-1.5 text-[11px] rounded-md transition-colors font-medium disabled:opacity-30 hover:bg-white/5"
               style={{ 
                 background: "var(--surface-active)", 
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
               }}
               onClick={replaceOne}
               disabled={matches().length === 0 || matches()[currentMatchIndex()]?.scope === "output"}
@@ -2011,7 +2011,7 @@ function NotebookSearch(props: NotebookSearchProps) {
               class="px-2.5 py-1.5 text-[11px] rounded-md transition-colors font-medium disabled:opacity-30 hover:bg-white/5"
               style={{ 
                 background: "var(--surface-active)", 
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
               }}
               onClick={replaceAll}
               disabled={matches().filter((m) => m.scope !== "output").length === 0}
diff --git a/src/components/notebook/NotebookToolbar.tsx b/src/components/notebook/NotebookToolbar.tsx
index 1ea564a3..bc0457ab 100644
--- a/src/components/notebook/NotebookToolbar.tsx
+++ b/src/components/notebook/NotebookToolbar.tsx
@@ -174,7 +174,7 @@ export function NotebookToolbar() {
             <button
               onClick={handleExportHtml}
               class="flex items-center gap-2 w-full px-3 py-1.5 text-xs hover:bg-[var(--surface-hover)] transition-colors"
-              style={{ color: "var(--text-base)" }}
+              style={{ color: "var(--text-primary)" }}
             >
               <Icon name="code" class="w-3.5 h-3.5" />
               <span>Export as HTML</span>
@@ -182,7 +182,7 @@ export function NotebookToolbar() {
             <button
               onClick={handleExportPython}
               class="flex items-center gap-2 w-full px-3 py-1.5 text-xs hover:bg-[var(--surface-hover)] transition-colors"
-              style={{ color: "var(--text-base)" }}
+              style={{ color: "var(--text-primary)" }}
             >
               <Icon name="file-lines" class="w-3.5 h-3.5" />
               <span>Export as Python</span>
@@ -190,7 +190,7 @@ export function NotebookToolbar() {
             <button
               onClick={handleExportPdf}
               class="flex items-center gap-2 w-full px-3 py-1.5 text-xs hover:bg-[var(--surface-hover)] transition-colors"
-              style={{ color: "var(--text-base)" }}
+              style={{ color: "var(--text-primary)" }}
             >
               <Icon name="file-pdf" class="w-3.5 h-3.5" />
               <span>Export as PDF</span>
diff --git a/src/components/notebook/outputs/ImageOutput.tsx b/src/components/notebook/outputs/ImageOutput.tsx
index 1bfb7cec..09bc2015 100644
--- a/src/components/notebook/outputs/ImageOutput.tsx
+++ b/src/components/notebook/outputs/ImageOutput.tsx
@@ -54,7 +54,7 @@ export function ImageOutput(props: ImageOutputProps) {
             class="absolute top-4 right-4 p-2 rounded-full"
             style={{ background: "var(--surface-raised)" }}
           >
-            <Icon name="xmark" class="w-5 h-5" style={{ color: "var(--text-base)" }} />
+            <Icon name="xmark" class="w-5 h-5" style={{ color: "var(--text-primary)" }} />
           </button>
           <img
             src={src()}
diff --git a/src/components/notebook/outputs/JsonOutput.tsx b/src/components/notebook/outputs/JsonOutput.tsx
index f260bb32..d83b00ee 100644
--- a/src/components/notebook/outputs/JsonOutput.tsx
+++ b/src/components/notebook/outputs/JsonOutput.tsx
@@ -21,7 +21,7 @@ function JsonTreeNode(props: { label: string; data: unknown; depth: number }) {
           {props.label}
         </span>
         <Show when={!isExpandable()}>
-          <span class="font-mono text-code-sm" style={{ color: "var(--text-base)" }}>
+          <span class="font-mono text-code-sm" style={{ color: "var(--text-primary)" }}>
             : {JSON.stringify(props.data)}
           </span>
         </Show>
@@ -68,7 +68,7 @@ export function JsonOutput(props: JsonOutputProps) {
           <pre
             class="font-mono text-code-sm"
             style={{
-              color: "var(--text-base)",
+              color: "var(--text-primary)",
               background: "var(--surface-raised)",
               padding: "8px",
               "border-radius": "var(--cortex-radius-sm)",
diff --git a/src/components/notebook/outputs/OutputRenderer.tsx b/src/components/notebook/outputs/OutputRenderer.tsx
index 97cb2867..520aa849 100644
--- a/src/components/notebook/outputs/OutputRenderer.tsx
+++ b/src/components/notebook/outputs/OutputRenderer.tsx
@@ -79,7 +79,7 @@ export function OutputRenderer(props: OutputRendererProps) {
         return (
           <pre
             class="font-mono text-code-sm"
-            style={{ color: "var(--text-base)", margin: "4px 0" }}
+            style={{ color: "var(--text-primary)", margin: "4px 0" }}
           >
             {resolveDataField(data["text/latex"])}
           </pre>
diff --git a/src/components/notebook/outputs/WidgetOutput.tsx b/src/components/notebook/outputs/WidgetOutput.tsx
index 1881b870..b8e772c3 100644
--- a/src/components/notebook/outputs/WidgetOutput.tsx
+++ b/src/components/notebook/outputs/WidgetOutput.tsx
@@ -21,7 +21,7 @@ function WidgetTreeNode(props: { label: string; data: unknown; depth: number })
           {props.label}
         </span>
         <Show when={!isExpandable()}>
-          <span class="font-mono text-code-sm" style={{ color: "var(--text-base)" }}>
+          <span class="font-mono text-code-sm" style={{ color: "var(--text-primary)" }}>
             : {JSON.stringify(props.data)}
           </span>
         </Show>
@@ -62,7 +62,7 @@ export function WidgetOutput(props: WidgetOutputProps) {
         }}
       >
         <Icon name="puzzle-piece" class="w-3.5 h-3.5" style={{ color: "var(--cortex-info)" }} />
-        <span class="text-xs font-medium" style={{ color: "var(--text-base)" }}>
+        <span class="text-xs font-medium" style={{ color: "var(--text-primary)" }}>
           {modelName()}
         </span>
         <span class="text-[10px]" style={{ color: "var(--text-weaker)" }}>
diff --git a/src/components/palette/CommandPalette.tsx b/src/components/palette/CommandPalette.tsx
index 84914f90..18ca2ebb 100644
--- a/src/components/palette/CommandPalette.tsx
+++ b/src/components/palette/CommandPalette.tsx
@@ -210,7 +210,7 @@ export function PaletteCommandPalette() {
             onInput={e => setQuery(e.currentTarget.value)} onKeyDown={handleKeyDown}
             style={{ flex: "1", height: "18px", background: "transparent", border: "none", outline: "none", color: "var(--jb-text-body-color)", "font-size": "11px" }} />
         </div>
-        <div role="listbox" style={{ "line-height": "18px" }}>
+        <div role="listbox" aria-label="Command palette options" style={{ "line-height": "18px" }}>
           <div ref={listRef} style={{ "max-height": "280px", overflow: "auto", "overscroll-behavior": "contain", "padding-bottom": "3px" }}>
             <Show when={flatList().length === 0}>
               <div style={{ padding: "10px", "text-align": "center", "font-size": "10px", color: "var(--jb-text-muted-color)" }}>No commands found</div>
diff --git a/src/components/remote/ContainerConnect.tsx b/src/components/remote/ContainerConnect.tsx
index 76114202..89984f23 100644
--- a/src/components/remote/ContainerConnect.tsx
+++ b/src/components/remote/ContainerConnect.tsx
@@ -88,7 +88,7 @@ function ContainerCard(props: {
               <Icon name="box" class="w-4 h-4" style={{ color: "var(--accent)" }} />
             </div>
             <div class="min-w-0">
-              <h3 class="text-sm font-medium truncate" style={{ color: "var(--text-base)" }}>
+              <h3 class="text-sm font-medium truncate" style={{ color: "var(--text-primary)" }}>
                 {props.container.name}
               </h3>
               <p class="text-xs truncate" style={{ color: "var(--text-weak)" }}>
diff --git a/src/components/remote/DevContainerConfig.tsx b/src/components/remote/DevContainerConfig.tsx
index 8bd61d45..c7c11c2b 100644
--- a/src/components/remote/DevContainerConfig.tsx
+++ b/src/components/remote/DevContainerConfig.tsx
@@ -103,7 +103,7 @@ function FeatureSelector(props: FeatureSelectorProps) {
 
                   <div class="flex-1 min-w-0">
                     <div class="flex items-center gap-2">
-                      <span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+                      <span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
                         {feature.name}
                       </span>
                       <Show when={feature.version}>
@@ -189,7 +189,7 @@ function FeatureSelector(props: FeatureSelectorProps) {
                                         style={{
                                           "background-color": "var(--surface-base)",
                                           border: "1px solid var(--border-base)",
-                                          color: "var(--text-base)",
+                                          color: "var(--text-primary)",
                                         }}
                                       >
                                         <For each={option.enum}>
@@ -337,7 +337,7 @@ function TemplateSelector(props: TemplateSelectorProps) {
                           </Show>
                         </div>
                         <div class="min-w-0">
-                          <div class="text-sm font-medium truncate" style={{ color: "var(--text-base)" }}>
+                          <div class="text-sm font-medium truncate" style={{ color: "var(--text-primary)" }}>
                             {template.name}
                           </div>
                           <div class="text-xs truncate" style={{ color: "var(--text-weak)" }}>
@@ -619,7 +619,7 @@ export function DevContainerConfig(props: DevContainerConfigProps) {
       >
         <div class="flex items-center gap-2">
           <Icon name="gear" class="w-4 h-4" style={{ color: "var(--accent)" }} />
-          <h2 class="text-sm font-semibold" style={{ color: "var(--text-base)" }}>
+          <h2 class="text-sm font-semibold" style={{ color: "var(--text-primary)" }}>
             Dev Container Configuration
           </h2>
           <Show when={hasChanges()}>
@@ -757,7 +757,7 @@ export function DevContainerConfig(props: DevContainerConfigProps) {
                     style={{
                       "background-color": "var(--surface-raised)",
                       border: "1px solid var(--border-base)",
-                      color: "var(--text-base)",
+                      color: "var(--text-primary)",
                     }}
                   >
                     <option value="none">None</option>
@@ -889,7 +889,7 @@ export function DevContainerConfig(props: DevContainerConfigProps) {
                         >
                           <div class="flex items-center gap-2">
                             <Icon name="globe" class="w-4 h-4" style={{ color: "var(--text-weak)" }} />
-                            <span class="text-sm font-mono" style={{ color: "var(--text-base)" }}>
+                            <span class="text-sm font-mono" style={{ color: "var(--text-primary)" }}>
                               {port}
                             </span>
                           </div>
@@ -955,7 +955,7 @@ export function DevContainerConfig(props: DevContainerConfigProps) {
                                 style={{
                                   "background-color": "var(--surface-base)",
                                   border: "1px solid var(--border-base)",
-                                  color: "var(--text-base)",
+                                  color: "var(--text-primary)",
                                 }}
                               >
                                 <option value="bind">Bind</option>
@@ -1068,7 +1068,7 @@ export function DevContainerConfig(props: DevContainerConfigProps) {
                         >
                           <div class="flex items-center gap-2">
                             <Icon name="code" class="w-4 h-4" style={{ color: "var(--text-weak)" }} />
-                            <span class="text-sm" style={{ color: "var(--text-base)" }}>
+                            <span class="text-sm" style={{ color: "var(--text-primary)" }}>
                               {ext}
                             </span>
                           </div>
@@ -1112,7 +1112,7 @@ export function DevContainerConfig(props: DevContainerConfigProps) {
               class="flex items-center justify-between px-4 py-3 border-b"
               style={{ "border-color": "var(--border-weak)" }}
             >
-              <h2 class="text-sm font-semibold" style={{ color: "var(--text-base)" }}>
+              <h2 class="text-sm font-semibold" style={{ color: "var(--text-primary)" }}>
                 Select Template
               </h2>
               <IconButton
diff --git a/src/components/remote/PortForwarding.tsx b/src/components/remote/PortForwarding.tsx
index ab49da53..70cc073e 100644
--- a/src/components/remote/PortForwarding.tsx
+++ b/src/components/remote/PortForwarding.tsx
@@ -81,7 +81,7 @@ function AddPortDialog(props: AddPortDialogProps) {
             class="flex items-center justify-between px-4 py-3 border-b"
             style={{ "border-color": "var(--border-weak)" }}
           >
-            <h2 class="text-sm font-semibold" style={{ color: "var(--text-base)" }}>
+            <h2 class="text-sm font-semibold" style={{ color: "var(--text-primary)" }}>
               Forward Port
             </h2>
             <IconButton
@@ -114,7 +114,7 @@ function AddPortDialog(props: AddPortDialogProps) {
                 style={{
                   "background-color": "var(--surface-base)",
                   border: "1px solid var(--border-base)",
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                 }}
                 required
               />
@@ -158,7 +158,7 @@ function AddPortDialog(props: AddPortDialogProps) {
                   style={{
                     "background-color": "var(--surface-base)",
                     border: "1px solid var(--border-base)",
-                    color: "var(--text-base)",
+                    color: "var(--text-primary)",
                   }}
                   required
                 />
@@ -182,7 +182,7 @@ function AddPortDialog(props: AddPortDialogProps) {
                 style={{
                   "background-color": "var(--surface-base)",
                   border: "1px solid var(--border-base)",
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                 }}
               />
               <p class="text-xs" style={{ color: "var(--text-weaker)" }}>
@@ -460,7 +460,7 @@ export function PortForwarding(props: PortForwardingProps) {
                   }}
                 >
                   {/* Local Port */}
-                  <span class="font-mono text-xs" style={{ color: "var(--text-base)" }}>
+                  <span class="font-mono text-xs" style={{ color: "var(--text-primary)" }}>
                     :{port.localPort}
                   </span>
 
@@ -523,7 +523,7 @@ export function PortForwarding(props: PortForwardingProps) {
                     <div class="flex items-center gap-2">
                       <span
                         class="font-mono text-xs"
-                        style={{ color: "var(--text-base)" }}
+                        style={{ color: "var(--text-primary)" }}
                       >
                         :{detected.port}
                       </span>
diff --git a/src/components/remote/RemoteExplorer.tsx b/src/components/remote/RemoteExplorer.tsx
index e8edefb9..4fafd5c9 100644
--- a/src/components/remote/RemoteExplorer.tsx
+++ b/src/components/remote/RemoteExplorer.tsx
@@ -79,7 +79,7 @@ function RemoteFileTreeNode(props: {
         class="w-full flex items-center gap-1 py-0.5 px-1 rounded text-left transition-colors hover:bg-[var(--surface-raised)]"
         style={{
           "padding-left": `${props.depth * 12 + 4}px`,
-          color: "var(--text-base)",
+          color: "var(--text-primary)",
         }}
       >
         {/* Expand/collapse icon for directories */}
diff --git a/src/components/remote/RemoteHostsList.tsx b/src/components/remote/RemoteHostsList.tsx
index ada92768..62d1a821 100644
--- a/src/components/remote/RemoteHostsList.tsx
+++ b/src/components/remote/RemoteHostsList.tsx
@@ -248,7 +248,7 @@ export function RemoteHostsList(props: RemoteHostsListProps) {
 
                     {/* Connection info */}
                     <div class="flex-1 min-w-0">
-                      <div class="text-sm font-medium truncate" style={{ color: "var(--text-base)" }}>
+                      <div class="text-sm font-medium truncate" style={{ color: "var(--text-primary)" }}>
                         {profile.name}
                       </div>
                       <div class="text-xs truncate" style={{ color: "var(--text-weak)" }}>
@@ -291,7 +291,7 @@ export function RemoteHostsList(props: RemoteHostsListProps) {
                             setMenuOpenId(null);
                           }}
                           class="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left transition-colors hover:bg-[var(--surface-raised)]"
-                          style={{ color: "var(--text-base)" }}
+                          style={{ color: "var(--text-primary)" }}
                         >
                           <Icon name="wifi-slash" class="w-4 h-4" />
                           Disconnect
@@ -305,7 +305,7 @@ export function RemoteHostsList(props: RemoteHostsListProps) {
                             setMenuOpenId(null);
                           }}
                           class="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left transition-colors hover:bg-[var(--surface-raised)]"
-                          style={{ color: "var(--text-base)" }}
+                          style={{ color: "var(--text-primary)" }}
                         >
                           <Icon name="rotate" class="w-4 h-4" />
                           Reconnect
@@ -318,7 +318,7 @@ export function RemoteHostsList(props: RemoteHostsListProps) {
                           setMenuOpenId(null);
                         }}
                         class="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left transition-colors hover:bg-[var(--surface-raised)]"
-                        style={{ color: "var(--text-base)" }}
+                        style={{ color: "var(--text-primary)" }}
                       >
                         <Icon name="pen" class="w-4 h-4" />
                         Edit
@@ -407,7 +407,7 @@ export function RemoteHostsList(props: RemoteHostsListProps) {
                       {/* Distro info */}
                       <div class="flex-1 min-w-0">
                         <div class="flex items-center gap-1.5">
-                          <span class="text-sm font-medium truncate" style={{ color: "var(--text-base)" }}>
+                          <span class="text-sm font-medium truncate" style={{ color: "var(--text-primary)" }}>
                             {distro.name}
                           </span>
                           <Show when={distro.isDefault}>
@@ -468,7 +468,7 @@ export function RemoteHostsList(props: RemoteHostsListProps) {
                             handleOpenWSLTerminal(distro.name);
                           }}
                           class="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left transition-colors hover:bg-[var(--surface-raised)]"
-                          style={{ color: "var(--text-base)" }}
+                          style={{ color: "var(--text-primary)" }}
                         >
                           <Icon name="terminal" class="w-4 h-4" />
                           Open Terminal
@@ -479,7 +479,7 @@ export function RemoteHostsList(props: RemoteHostsListProps) {
                             handleOpenWSLFolder(distro.name);
                           }}
                           class="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left transition-colors hover:bg-[var(--surface-raised)]"
-                          style={{ color: "var(--text-base)" }}
+                          style={{ color: "var(--text-primary)" }}
                         >
                           <Icon name="folder" class="w-4 h-4" />
                           Open in Explorer
@@ -492,7 +492,7 @@ export function RemoteHostsList(props: RemoteHostsListProps) {
                               setWslMenuOpenId(null);
                             }}
                             class="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left transition-colors hover:bg-[var(--surface-raised)]"
-                            style={{ color: "var(--text-base)" }}
+                            style={{ color: "var(--text-primary)" }}
                           >
                             <Icon name="wifi-slash" class="w-4 h-4" />
                             Disconnect
diff --git a/src/components/remote/SSHConnectionDialog.tsx b/src/components/remote/SSHConnectionDialog.tsx
index eb26748a..ae0824c4 100644
--- a/src/components/remote/SSHConnectionDialog.tsx
+++ b/src/components/remote/SSHConnectionDialog.tsx
@@ -439,7 +439,7 @@ export function SSHConnectionDialog(props: SSHConnectionDialogProps) {
               <div>
                 <h2
                   class="text-lg font-semibold"
-                  style={{ color: "var(--text-base)" }}
+                  style={{ color: "var(--text-primary)" }}
                 >
                   {props.editProfile ? "Edit SSH Connection" : "New SSH Connection"}
                 </h2>
@@ -523,7 +523,7 @@ export function SSHConnectionDialog(props: SSHConnectionDialogProps) {
                       <div class="flex-1 min-w-0">
                         <div
                           class="font-medium truncate"
-                          style={{ color: "var(--text-base)" }}
+                          style={{ color: "var(--text-primary)" }}
                         >
                           {profile.name}
                         </div>
@@ -575,7 +575,7 @@ export function SSHConnectionDialog(props: SSHConnectionDialogProps) {
                 <div class="space-y-2">
                   <label
                     class="text-sm font-medium"
-                    style={{ color: "var(--text-base)" }}
+                    style={{ color: "var(--text-primary)" }}
                   >
                     Connection Name
                   </label>
@@ -594,7 +594,7 @@ export function SSHConnectionDialog(props: SSHConnectionDialogProps) {
                       style={{
                         "background-color": "var(--surface-raised)",
                         border: "1px solid var(--border-base)",
-                        color: "var(--text-base)",
+                        color: "var(--text-primary)",
                       }}
                     />
                   </div>
@@ -605,7 +605,7 @@ export function SSHConnectionDialog(props: SSHConnectionDialogProps) {
                   <div class="col-span-3 space-y-2">
                     <label
                       class="text-sm font-medium"
-                      style={{ color: "var(--text-base)" }}
+                      style={{ color: "var(--text-primary)" }}
                     >
                       Host <span style={{ color: tokens.colors.semantic.error }}>*</span>
                     </label>
@@ -618,14 +618,14 @@ export function SSHConnectionDialog(props: SSHConnectionDialogProps) {
                       style={{
                         "background-color": "var(--surface-raised)",
                         border: "1px solid var(--border-base)",
-                        color: "var(--text-base)",
+                        color: "var(--text-primary)",
                       }}
                     />
                   </div>
                   <div class="space-y-2">
                     <label
                       class="text-sm font-medium"
-                      style={{ color: "var(--text-base)" }}
+                      style={{ color: "var(--text-primary)" }}
                     >
                       Port
                     </label>
@@ -639,7 +639,7 @@ export function SSHConnectionDialog(props: SSHConnectionDialogProps) {
                       style={{
                         "background-color": "var(--surface-raised)",
                         border: "1px solid var(--border-base)",
-                        color: "var(--text-base)",
+                        color: "var(--text-primary)",
                       }}
                     />
                   </div>
@@ -649,7 +649,7 @@ export function SSHConnectionDialog(props: SSHConnectionDialogProps) {
                 <div class="space-y-2">
                   <label
                     class="text-sm font-medium"
-                    style={{ color: "var(--text-base)" }}
+                    style={{ color: "var(--text-primary)" }}
                   >
                     Username <span style={{ color: tokens.colors.semantic.error }}>*</span>
                   </label>
@@ -668,7 +668,7 @@ export function SSHConnectionDialog(props: SSHConnectionDialogProps) {
                       style={{
                         "background-color": "var(--surface-raised)",
                         border: "1px solid var(--border-base)",
-                        color: "var(--text-base)",
+                        color: "var(--text-primary)",
                       }}
                     />
                   </div>
@@ -678,7 +678,7 @@ export function SSHConnectionDialog(props: SSHConnectionDialogProps) {
                 <div class="space-y-3">
                   <label
                     class="text-sm font-medium"
-                    style={{ color: "var(--text-base)" }}
+                    style={{ color: "var(--text-primary)" }}
                   >
                     Authentication
                   </label>
@@ -729,7 +729,7 @@ export function SSHConnectionDialog(props: SSHConnectionDialogProps) {
                   <div class="space-y-2">
                     <label
                       class="text-sm font-medium"
-                      style={{ color: "var(--text-base)" }}
+                      style={{ color: "var(--text-primary)" }}
                     >
                       Password <span style={{ color: tokens.colors.semantic.error }}>*</span>
                     </label>
@@ -748,7 +748,7 @@ export function SSHConnectionDialog(props: SSHConnectionDialogProps) {
                         style={{
                           "background-color": "var(--surface-raised)",
                           border: "1px solid var(--border-base)",
-                          color: "var(--text-base)",
+                          color: "var(--text-primary)",
                         }}
                       />
                       <button
@@ -769,7 +769,7 @@ export function SSHConnectionDialog(props: SSHConnectionDialogProps) {
                     <div class="space-y-2">
                       <label
                         class="text-sm font-medium"
-                        style={{ color: "var(--text-base)" }}
+                        style={{ color: "var(--text-primary)" }}
                       >
                         Private Key Path{" "}
                         <span style={{ color: tokens.colors.semantic.error }}>*</span>
@@ -787,7 +787,7 @@ export function SSHConnectionDialog(props: SSHConnectionDialogProps) {
                               style={{
                                 "background-color": "var(--surface-raised)",
                                 border: "1px solid var(--border-base)",
-                                color: "var(--text-base)",
+                                color: "var(--text-primary)",
                               }}
                             />
                           }
@@ -799,7 +799,7 @@ export function SSHConnectionDialog(props: SSHConnectionDialogProps) {
                             style={{
                               "background-color": "var(--surface-raised)",
                               border: "1px solid var(--border-base)",
-                              color: "var(--text-base)",
+                              color: "var(--text-primary)",
                             }}
                           >
                             <For each={availableKeys()}>
@@ -814,7 +814,7 @@ export function SSHConnectionDialog(props: SSHConnectionDialogProps) {
                           style={{
                             "background-color": "var(--surface-raised)",
                             border: "1px solid var(--border-base)",
-                            color: "var(--text-base)",
+                            color: "var(--text-primary)",
                           }}
                         >
                           <Icon name="file" class="w-4 h-4" />
@@ -825,7 +825,7 @@ export function SSHConnectionDialog(props: SSHConnectionDialogProps) {
                     <div class="space-y-2">
                       <label
                         class="text-sm font-medium"
-                        style={{ color: "var(--text-base)" }}
+                        style={{ color: "var(--text-primary)" }}
                       >
                         Passphrase (if key is encrypted)
                       </label>
@@ -838,7 +838,7 @@ export function SSHConnectionDialog(props: SSHConnectionDialogProps) {
                         style={{
                           "background-color": "var(--surface-raised)",
                           border: "1px solid var(--border-base)",
-                          color: "var(--text-base)",
+                          color: "var(--text-primary)",
                         }}
                       />
                     </div>
@@ -887,7 +887,7 @@ export function SSHConnectionDialog(props: SSHConnectionDialogProps) {
                 <div class="space-y-2">
                   <label
                     class="text-sm font-medium"
-                    style={{ color: "var(--text-base)" }}
+                    style={{ color: "var(--text-primary)" }}
                   >
                     Default Directory (optional)
                   </label>
@@ -906,7 +906,7 @@ export function SSHConnectionDialog(props: SSHConnectionDialogProps) {
                       style={{
                         "background-color": "var(--surface-raised)",
                         border: "1px solid var(--border-base)",
-                        color: "var(--text-base)",
+                        color: "var(--text-primary)",
                       }}
                     />
                   </div>
@@ -931,7 +931,7 @@ export function SSHConnectionDialog(props: SSHConnectionDialogProps) {
                         <Icon name="check" class="w-3.5 h-3.5 text-white" />
                       </Show>
                     </div>
-                    <span class="text-sm" style={{ color: "var(--text-base)" }}>
+                    <span class="text-sm" style={{ color: "var(--text-primary)" }}>
                       Save this connection for future use
                     </span>
                   </label>
@@ -1020,7 +1020,7 @@ export function SSHConnectionDialog(props: SSHConnectionDialogProps) {
                 disabled={!isValid() || isTesting()}
                 class="flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium transition-colors disabled:opacity-50 hover:bg-[var(--surface-raised)]"
                 style={{
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                   border: "1px solid var(--border-base)",
                 }}
               >
@@ -1042,7 +1042,7 @@ export function SSHConnectionDialog(props: SSHConnectionDialogProps) {
               <button
                 onClick={props.onClose}
                 class="px-4 py-2.5 rounded-lg text-sm font-medium transition-colors hover:bg-[var(--surface-raised)]"
-                style={{ color: "var(--text-base)" }}
+                style={{ color: "var(--text-primary)" }}
               >
                 Cancel
               </button>
@@ -1055,7 +1055,7 @@ export function SSHConnectionDialog(props: SSHConnectionDialogProps) {
                     class="flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
                     style={{
                       "background-color": "var(--surface-raised)",
-                      color: "var(--text-base)",
+                      color: "var(--text-primary)",
                       border: "1px solid var(--border-base)",
                     }}
                   >
diff --git a/src/components/remote/TunnelManager.tsx b/src/components/remote/TunnelManager.tsx
index da2e7712..35fa15d6 100644
--- a/src/components/remote/TunnelManager.tsx
+++ b/src/components/remote/TunnelManager.tsx
@@ -174,7 +174,7 @@ function CreateTunnelDialog(props: CreateTunnelDialogProps) {
             class="flex items-center justify-between px-4 py-3 border-b"
             style={{ "border-color": "var(--border-weak)" }}
           >
-            <h2 class="text-sm font-semibold" style={{ color: "var(--text-base)" }}>
+            <h2 class="text-sm font-semibold" style={{ color: "var(--text-primary)" }}>
               Create Remote Tunnel
             </h2>
             <IconButton
@@ -205,7 +205,7 @@ function CreateTunnelDialog(props: CreateTunnelDialogProps) {
                 style={{
                   "background-color": "var(--surface-base)",
                   border: "1px solid var(--border-base)",
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                 }}
                 required
               />
@@ -269,7 +269,7 @@ function CreateTunnelDialog(props: CreateTunnelDialogProps) {
                 color: "var(--text-weak)",
               }}
             >
-              <p class="font-medium mb-1" style={{ color: "var(--text-base)" }}>
+              <p class="font-medium mb-1" style={{ color: "var(--text-primary)" }}>
                 How Remote Tunnels Work
               </p>
               <ul class="space-y-1 list-disc list-inside">
@@ -359,7 +359,7 @@ function ConnectTunnelDialog(props: ConnectTunnelDialogProps) {
             class="flex items-center justify-between px-4 py-3 border-b"
             style={{ "border-color": "var(--border-weak)" }}
           >
-            <h2 class="text-sm font-semibold" style={{ color: "var(--text-base)" }}>
+            <h2 class="text-sm font-semibold" style={{ color: "var(--text-primary)" }}>
               Connect to Remote Tunnel
             </h2>
             <IconButton
@@ -388,7 +388,7 @@ function ConnectTunnelDialog(props: ConnectTunnelDialogProps) {
                 style={{
                   "background-color": "var(--surface-base)",
                   border: "1px solid var(--border-base)",
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                 }}
                 required
               />
@@ -636,7 +636,7 @@ export function TunnelManager(props: TunnelManagerProps) {
                   onClick={() => setShowConnectDialog(true)}
                   class="text-xs font-medium px-3 py-1.5 rounded transition-colors"
                   style={{ 
-                    color: "var(--text-base)",
+                    color: "var(--text-primary)",
                     "background-color": "var(--surface-raised)",
                   }}
                 >
@@ -725,7 +725,7 @@ export function TunnelManager(props: TunnelManagerProps) {
                       <Icon name="link" class="w-3 h-3 flex-shrink-0" style={{ color: "var(--text-weak)" }} />
                       <span
                         class="font-mono text-xs truncate flex-1"
-                        style={{ color: "var(--text-base)" }}
+                        style={{ color: "var(--text-primary)" }}
                       >
                         {tunnel.url}
                       </span>
@@ -796,7 +796,7 @@ export function TunnelStatusBar(props: { tunnel: TunnelInfo | null; onCopy?: ()
           title="Click to copy tunnel URL"
         >
           <TunnelStatusIcon status={tunnel().status} />
-          <span class="font-mono truncate max-w-[200px]" style={{ color: "var(--text-base)" }}>
+          <span class="font-mono truncate max-w-[200px]" style={{ color: "var(--text-primary)" }}>
             {tunnel().url ? new URL(tunnel().url).hostname : "Tunnel"}
           </span>
           <span style={{ color: "var(--text-weaker)" }}>:{tunnel().localPort}</span>
diff --git a/src/components/remote/WSLConnect.tsx b/src/components/remote/WSLConnect.tsx
index fcd50f75..4f8adf6f 100644
--- a/src/components/remote/WSLConnect.tsx
+++ b/src/components/remote/WSLConnect.tsx
@@ -196,7 +196,7 @@ export function WSLConnect(props: WSLConnectProps) {
                       {/* Distro Info */}
                       <div class="flex-1 min-w-0">
                         <div class="flex items-center gap-2">
-                          <span class="text-sm font-medium truncate" style={{ color: "var(--text-base)" }}>
+                          <span class="text-sm font-medium truncate" style={{ color: "var(--text-primary)" }}>
                             {distro.name}
                           </span>
                           <Show when={distro.isDefault}>
diff --git a/src/components/repl/KernelSelector.tsx b/src/components/repl/KernelSelector.tsx
index b75ec776..22a53fdd 100644
--- a/src/components/repl/KernelSelector.tsx
+++ b/src/components/repl/KernelSelector.tsx
@@ -96,7 +96,7 @@ export function KernelSelector() {
         <Show when={activeKernel()} fallback={<span style={{ color: "var(--text-weak)" }}>No kernel</span>}>
           {(kernel) => (
             <>
-              <span style={{ color: "var(--text-base)" }}>{kernel().spec.display_name}</span>
+              <span style={{ color: "var(--text-primary)" }}>{kernel().spec.display_name}</span>
               <StatusBadge status={kernel().status} />
             </>
           )}
@@ -132,7 +132,7 @@ export function KernelSelector() {
                   <button
                     onClick={handleRestartKernel}
                     class="px-2 py-1 text-xs rounded hover:bg-[var(--surface-hover)]"
-                    style={{ color: "var(--text-base)", border: "1px solid var(--border-base)" }}
+                    style={{ color: "var(--text-primary)", border: "1px solid var(--border-base)" }}
                   >
                     Restart
                   </button>
@@ -165,7 +165,7 @@ export function KernelSelector() {
                     <Show when={kernel.id === state.activeKernelId}>
                       <Icon name="check" class="w-4 h-4" style={{ color: "var(--cortex-success)" }} />
                     </Show>
-                    <span style={{ color: "var(--text-base)" }}>{kernel.spec.display_name}</span>
+                    <span style={{ color: "var(--text-primary)" }}>{kernel.spec.display_name}</span>
                   </div>
                   <StatusBadge status={kernel.status} />
                 </button>
@@ -224,7 +224,7 @@ export function KernelSelector() {
                       </span>
                     </div>
                     <div class="text-left">
-                      <div class="text-sm" style={{ color: "var(--text-base)" }}>
+                      <div class="text-sm" style={{ color: "var(--text-primary)" }}>
                         {spec.display_name}
                       </div>
                       <div class="text-xs" style={{ color: "var(--text-weak)" }}>
diff --git a/src/components/repl/REPLCell.tsx b/src/components/repl/REPLCell.tsx
index b4895d1c..d143bae6 100644
--- a/src/components/repl/REPLCell.tsx
+++ b/src/components/repl/REPLCell.tsx
@@ -119,7 +119,7 @@ export function REPLCell(props: REPLCellProps) {
               class="w-full resize-none outline-none font-mono text-sm p-3"
               style={{
                 background: "transparent",
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
                 "min-height": "40px",
               }}
               rows={1}
diff --git a/src/components/repl/REPLOutput.tsx b/src/components/repl/REPLOutput.tsx
index 010f7c3d..df840bdc 100644
--- a/src/components/repl/REPLOutput.tsx
+++ b/src/components/repl/REPLOutput.tsx
@@ -60,7 +60,7 @@ function JsonOutput(props: { data: Record<string, unknown> }) {
     <pre
       class="font-mono text-sm"
       style={{
-        color: "var(--text-base)",
+        color: "var(--text-primary)",
         background: "var(--surface-raised)",
         padding: "8px",
         "border-radius": "var(--cortex-radius-sm)",
diff --git a/src/components/repl/REPLPanel.tsx b/src/components/repl/REPLPanel.tsx
index 032d2bb8..d35bf5c3 100644
--- a/src/components/repl/REPLPanel.tsx
+++ b/src/components/repl/REPLPanel.tsx
@@ -69,7 +69,7 @@ export function REPLPanel() {
             <button
               onClick={() => addCell()}
               class="flex items-center gap-1 px-2 py-1 text-xs rounded hover:bg-[var(--surface-hover)]"
-              style={{ color: "var(--text-base)" }}
+              style={{ color: "var(--text-primary)" }}
               title="Add cell"
             >
               <Icon name="plus" class="w-4 h-4" />
diff --git a/src/components/repl/VariableInspector.tsx b/src/components/repl/VariableInspector.tsx
index 0ae4ed92..44920861 100644
--- a/src/components/repl/VariableInspector.tsx
+++ b/src/components/repl/VariableInspector.tsx
@@ -248,7 +248,7 @@ function VariableRow(props: VariableRowProps) {
           class="px-3 py-2 font-mono text-xs"
           style={{
             background: "var(--surface-sunken)",
-            color: "var(--text-base)",
+            color: "var(--text-primary)",
             "white-space": "pre-wrap",
             "word-break": "break-all",
           }}
@@ -378,7 +378,7 @@ export function VariableInspector() {
           style={{
             background: "var(--surface-sunken)",
             border: "1px solid var(--border-base)",
-            color: "var(--text-base)",
+            color: "var(--text-primary)",
           }}
         />
       </div>
diff --git a/src/components/search/SearchInOpenEditors.tsx b/src/components/search/SearchInOpenEditors.tsx
index db3a5e12..4be849fb 100644
--- a/src/components/search/SearchInOpenEditors.tsx
+++ b/src/components/search/SearchInOpenEditors.tsx
@@ -314,7 +314,7 @@ export function SearchInOpenEditors(props: SearchInOpenEditorsProps) {
             "border-radius": "var(--cortex-radius-sm)",
             "font-weight": "600",
             background: "rgba(234, 179, 8, 0.4)",
-            color: "var(--text-base)",
+            color: "var(--text-primary)",
             "box-shadow": "0 0 0 1px rgba(234, 179, 8, 0.6)",
           }}
         >
@@ -395,7 +395,7 @@ export function SearchInOpenEditors(props: SearchInOpenEditorsProps) {
           >
             <div style={{ display: "flex", "align-items": "center", gap: "8px" }}>
               <Icon name="magnifying-glass" style={{ width: "16px", height: "16px", color: "var(--text-weak)" }} />
-              <span style={{ "font-size": "13px", "font-weight": "500", color: "var(--text-base)" }}>
+              <span style={{ "font-size": "13px", "font-weight": "500", color: "var(--text-primary)" }}>
                 Search in Open Editors
               </span>
             </div>
@@ -441,7 +441,7 @@ export function SearchInOpenEditors(props: SearchInOpenEditorsProps) {
                   border: "none",
                   "font-size": "13px",
                   "min-width": "0",
-                  color: "var(--text-base)"
+                  color: "var(--text-primary)"
                 }}
                 value={query()}
                 onInput={(e) => setQuery(e.currentTarget.value)}
@@ -580,7 +580,7 @@ export function SearchInOpenEditors(props: SearchInOpenEditorsProps) {
                       <Icon name="chevron-right" style={{ width: "14px", height: "14px" }} />
                     </span>
                     <Icon name="file" style={{ width: "14px", height: "14px", "flex-shrink": "0", color: "var(--text-weak)" }} />
-                    <span style={{ "font-size": "12px", "font-weight": "500", color: "var(--text-base)", overflow: "hidden", "text-overflow": "ellipsis", "white-space": "nowrap" }}>
+                    <span style={{ "font-size": "12px", "font-weight": "500", color: "var(--text-primary)", overflow: "hidden", "text-overflow": "ellipsis", "white-space": "nowrap" }}>
                       {group.fileName}
                     </span>
                     <span style={{ "margin-left": "auto", "font-size": "10px", padding: "2px 6px", "border-radius": "var(--cortex-radius-md)", "font-family": "'JetBrains Mono', monospace", background: "var(--surface-active)", color: "var(--text-weak)" }}>
diff --git a/src/components/settings/KeymapEditor.tsx b/src/components/settings/KeymapEditor.tsx
index eec9d18e..d25aa66b 100644
--- a/src/components/settings/KeymapEditor.tsx
+++ b/src/components/settings/KeymapEditor.tsx
@@ -326,7 +326,7 @@ export function KeymapEditor(_props: KeymapEditorProps) {
       </div>
 
       {/* Keybindings list - VS Code keybindings table container */}
-      <div class="keybindings-table-container flex-1 overflow-y-auto rounded-b-lg border-x border-b border-border">
+      <div class="keybindings-table-container flex-1 overflow-y-auto rounded-b-lg border-x border-b border-border" role="region" aria-label="Keybindings list">
         <Show
           when={groupedBindings().length > 0}
           fallback={
diff --git a/src/components/settings/SettingsEditor.tsx b/src/components/settings/SettingsEditor.tsx
index ba092c73..c9f4ebeb 100644
--- a/src/components/settings/SettingsEditor.tsx
+++ b/src/components/settings/SettingsEditor.tsx
@@ -1152,6 +1152,7 @@ function BooleanRenderer(props: {
       <Toggle
         checked={props.value}
         onChange={props.onChange}
+        aria-label={props.setting.label}
       />
       <Show when={props.hasOverride}>
         <button
diff --git a/src/components/snippets/SnippetEditor.tsx b/src/components/snippets/SnippetEditor.tsx
index 1fcf1bc1..fe316195 100644
--- a/src/components/snippets/SnippetEditor.tsx
+++ b/src/components/snippets/SnippetEditor.tsx
@@ -199,7 +199,7 @@ export function SnippetEditor() {
               style={{
                 "border-color": "var(--border-base)",
                 background: "var(--cortex-info)10",
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
               }}
             >
               <div class="font-semibold mb-2" style={{ color: "var(--text-strong)" }}>
@@ -270,7 +270,7 @@ export function SnippetEditor() {
                 class="w-full px-3 py-2 rounded text-sm"
                 style={{
                   background: "var(--surface-hover)",
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                   border: "1px solid var(--border-base)",
                   outline: "none",
                 }}
@@ -297,7 +297,7 @@ export function SnippetEditor() {
                 class="w-full px-3 py-2 rounded text-sm"
                 style={{
                   background: "var(--surface-hover)",
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                   border: getFieldError("name")
                     ? "1px solid var(--cortex-error)"
                     : "1px solid var(--border-base)",
@@ -322,7 +322,7 @@ export function SnippetEditor() {
                 class="w-full px-3 py-2 rounded text-sm font-mono"
                 style={{
                   background: "var(--surface-hover)",
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                   border: getFieldError("prefix")
                     ? "1px solid var(--cortex-error)"
                     : "1px solid var(--border-base)",
@@ -350,7 +350,7 @@ export function SnippetEditor() {
                 class="w-full px-3 py-2 rounded text-sm"
                 style={{
                   background: "var(--surface-hover)",
-                  color: "var(--text-base)",
+                  color: "var(--text-primary)",
                   border: "1px solid var(--border-base)",
                   outline: "none",
                 }}
@@ -423,7 +423,7 @@ function \${1:name}(\${2:params}) {
               class="px-4 py-2 rounded text-sm font-medium"
               style={{
                 background: "var(--surface-hover)",
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
               }}
             >
               Cancel
diff --git a/src/components/snippets/SnippetsPanel.tsx b/src/components/snippets/SnippetsPanel.tsx
index 9338ffbe..fbdff0b7 100644
--- a/src/components/snippets/SnippetsPanel.tsx
+++ b/src/components/snippets/SnippetsPanel.tsx
@@ -352,7 +352,7 @@ export function SnippetsPanel() {
               class="px-3 py-1.5 rounded text-sm"
               style={{
                 background: "var(--surface-hover)",
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
                 border: "1px solid var(--border-base)",
                 outline: "none",
               }}
@@ -502,7 +502,7 @@ export function SnippetsPanel() {
               
               {/* Modal Content */}
               <div class="flex-1 overflow-y-auto p-4 space-y-4">
-                <p class="text-sm" style={{ color: "var(--text-base)" }}>
+                <p class="text-sm" style={{ color: "var(--text-primary)" }}>
                   Paste VSCode-compatible snippet JSON or upload a snippet file.
                 </p>
                 
@@ -517,7 +517,7 @@ export function SnippetsPanel() {
                     class="w-full px-3 py-2 rounded text-sm"
                     style={{
                       background: "var(--surface-hover)",
-                      color: "var(--text-base)",
+                      color: "var(--text-primary)",
                       border: "1px solid var(--border-base)",
                       outline: "none",
                     }}
diff --git a/src/components/tasks/ProblemMatcher.tsx b/src/components/tasks/ProblemMatcher.tsx
index 82ba48ee..a945b5d8 100644
--- a/src/components/tasks/ProblemMatcher.tsx
+++ b/src/components/tasks/ProblemMatcher.tsx
@@ -126,7 +126,7 @@ export function ProblemMatcherPreview(props: ProblemMatcherPreviewProps) {
         style={{ "border-color": "var(--border-base)" }}
       >
         <div class="flex items-center gap-2">
-          <span class="text-xs font-medium" style={{ color: "var(--text-base)" }}>
+          <span class="text-xs font-medium" style={{ color: "var(--text-primary)" }}>
             Problem Matcher: {props.matcherName}
           </span>
         </div>
@@ -193,7 +193,7 @@ export function ProblemMatcherPreview(props: ProblemMatcherPreviewProps) {
                     }}
                   />
                   <Icon name="file" class="w-3.5 h-3.5 shrink-0" style={{ color: "var(--text-weak)" }} />
-                  <span class="text-xs truncate" style={{ color: "var(--text-base)" }}>
+                  <span class="text-xs truncate" style={{ color: "var(--text-primary)" }}>
                     {group.relativePath}
                   </span>
                   <div class="flex-1" />
@@ -298,7 +298,7 @@ function DiagnosticItem(props: DiagnosticItemProps) {
         </div>
         <p
           class="text-xs break-words"
-          style={{ color: "var(--text-base)" }}
+          style={{ color: "var(--text-primary)" }}
         >
           {props.diagnostic.message}
         </p>
@@ -433,7 +433,7 @@ export function TaskProblemsPanel(props: TaskProblemsPanelProps) {
         style={{ "border-color": "var(--border-base)" }}
       >
         <div class="flex items-center gap-2">
-          <span class="text-xs font-medium" style={{ color: "var(--text-base)" }}>
+          <span class="text-xs font-medium" style={{ color: "var(--text-primary)" }}>
             Problems
           </span>
 
@@ -561,7 +561,7 @@ function FileProblemsGroup(props: FileProblemsGroupProps) {
           }}
         />
         <Icon name="file" class="w-3.5 h-3.5 shrink-0" style={{ color: "var(--text-weak)" }} />
-        <span class="text-xs truncate text-left" style={{ color: "var(--text-base)" }}>
+        <span class="text-xs truncate text-left" style={{ color: "var(--text-primary)" }}>
           {props.group.relativePath}
         </span>
         <div class="flex-1" />
@@ -646,7 +646,7 @@ export function ProblemMatcherSelector(props: ProblemMatcherSelectorProps) {
 
   return (
     <div class="space-y-2">
-      <label class="text-xs font-medium" style={{ color: "var(--text-base)" }}>
+      <label class="text-xs font-medium" style={{ color: "var(--text-primary)" }}>
         Problem Matchers
       </label>
       <div class="grid grid-cols-2 gap-2">
@@ -661,7 +661,7 @@ export function ProblemMatcherSelector(props: ProblemMatcherSelectorProps) {
                 border: props.value.includes(matcher)
                   ? "1px solid var(--cortex-info)"
                   : "1px solid var(--border-base)",
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
               }}
               onClick={() => toggleMatcher(matcher)}
             >
diff --git a/src/components/tasks/RunConfigDialog.tsx b/src/components/tasks/RunConfigDialog.tsx
index e8719059..42ffa92f 100644
--- a/src/components/tasks/RunConfigDialog.tsx
+++ b/src/components/tasks/RunConfigDialog.tsx
@@ -125,7 +125,7 @@ export function RunConfigDialog() {
               type="text"
               placeholder="Run task..."
               class="flex-1 bg-transparent outline-none text-sm"
-              style={{ color: "var(--text-base)" }}
+              style={{ color: "var(--text-primary)" }}
               value={query()}
               onInput={(e) => setQuery(e.currentTarget.value)}
               onKeyDown={handleKeyDown}
@@ -179,7 +179,7 @@ export function RunConfigDialog() {
                   {/* Task Info */}
                   <div class="flex-1 min-w-0">
                     <div class="flex items-center gap-2">
-                      <span class="text-sm truncate" style={{ color: "var(--text-base)" }}>
+                      <span class="text-sm truncate" style={{ color: "var(--text-primary)" }}>
                         {task.label}
                       </span>
                       <Show when={isRecentTask(task.label)}>
@@ -317,7 +317,7 @@ export function QuickRunInput() {
           style={{ 
             background: "var(--surface-raised)",
             border: "1px solid var(--border-base)",
-            color: "var(--text-base)"
+            color: "var(--text-primary)"
           }}
           value={command()}
           onInput={(e) => setCommand(e.currentTarget.value)}
diff --git a/src/components/tasks/TaskConfigEditor.tsx b/src/components/tasks/TaskConfigEditor.tsx
index 6de77ed8..d424adbc 100644
--- a/src/components/tasks/TaskConfigEditor.tsx
+++ b/src/components/tasks/TaskConfigEditor.tsx
@@ -330,7 +330,7 @@ export function TaskConfigEditor() {
 
                 {/* Type */}
                 <div>
-                  <label class="block text-sm font-medium mb-1.5" style={{ color: "var(--text-base)" }}>
+                  <label class="block text-sm font-medium mb-1.5" style={{ color: "var(--text-primary)" }}>
                     Type
                   </label>
                   <div class="grid grid-cols-4 gap-2">
@@ -351,7 +351,7 @@ export function TaskConfigEditor() {
                           onClick={() => setType(option.value)}
                         >
                           <span class="text-lg">{option.icon}</span>
-                          <span class="text-xs" style={{ color: "var(--text-base)" }}>{option.label}</span>
+                          <span class="text-xs" style={{ color: "var(--text-primary)" }}>{option.label}</span>
                         </Button>
                       )}
                     </For>
@@ -374,7 +374,7 @@ export function TaskConfigEditor() {
                 {/* Arguments */}
                 <div>
                   <div class="flex items-center justify-between mb-1.5">
-                    <label class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+                    <label class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
                       Arguments
                     </label>
                     <Button
@@ -413,7 +413,7 @@ export function TaskConfigEditor() {
 
                 {/* Group */}
                 <div>
-                  <label class="block text-sm font-medium mb-1.5" style={{ color: "var(--text-base)" }}>
+                  <label class="block text-sm font-medium mb-1.5" style={{ color: "var(--text-primary)" }}>
                     Group
                   </label>
                   <select
@@ -421,7 +421,7 @@ export function TaskConfigEditor() {
                     style={{ 
                       background: "var(--surface-raised)",
                       border: "1px solid var(--border-base)",
-                      color: "var(--text-base)"
+                      color: "var(--text-primary)"
                     }}
                     value={group()}
                     onChange={(e) => setGroup(e.currentTarget.value as TaskGroup)}
@@ -436,7 +436,7 @@ export function TaskConfigEditor() {
 
                 {/* Task Options */}
                 <div class="space-y-2">
-                  <label class="block text-sm font-medium mb-1.5" style={{ color: "var(--text-base)" }}>
+                  <label class="block text-sm font-medium mb-1.5" style={{ color: "var(--text-primary)" }}>
                     Task Options
                   </label>
                   
@@ -454,7 +454,7 @@ export function TaskConfigEditor() {
                         "accent-color": "var(--cortex-info)",
                       }}
                     />
-                    <Text variant="body" style={{ color: "var(--text-base)" }}>
+                    <Text variant="body" style={{ color: "var(--text-primary)" }}>
                       Set as default task for this group
                     </Text>
                   </div>
@@ -475,7 +475,7 @@ export function TaskConfigEditor() {
                     />
                     <div class="flex items-center gap-1.5">
                       <Icon name="eye" class="w-3.5 h-3.5" style={{ color: "var(--cortex-success)" }} />
-                      <Text variant="body" style={{ color: "var(--text-base)" }}>
+                      <Text variant="body" style={{ color: "var(--text-primary)" }}>
                         Background/Watch task (runs indefinitely)
                       </Text>
                     </div>
@@ -484,7 +484,7 @@ export function TaskConfigEditor() {
 
                 {/* Run On */}
                 <div>
-                  <label class="block text-sm font-medium mb-1.5" style={{ color: "var(--text-base)" }}>
+                  <label class="block text-sm font-medium mb-1.5" style={{ color: "var(--text-primary)" }}>
                     Auto-run
                   </label>
                   <select
@@ -492,7 +492,7 @@ export function TaskConfigEditor() {
                     style={{ 
                       background: "var(--surface-raised)",
                       border: "1px solid var(--border-base)",
-                      color: "var(--text-base)"
+                      color: "var(--text-primary)"
                     }}
                     value={runOn()}
                     onChange={(e) => setRunOn(e.currentTarget.value as "default" | "folderOpen")}
@@ -512,7 +512,7 @@ export function TaskConfigEditor() {
               <div class="space-y-4">
                 {/* Working Directory */}
                 <div>
-                  <label class="block text-sm font-medium mb-1.5" style={{ color: "var(--text-base)" }}>
+                  <label class="block text-sm font-medium mb-1.5" style={{ color: "var(--text-primary)" }}>
                     Working Directory
                   </label>
                   <div class="flex items-center gap-2">
@@ -535,7 +535,7 @@ export function TaskConfigEditor() {
                 {/* Environment Variables */}
                 <div>
                   <div class="flex items-center justify-between mb-1.5">
-                    <label class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+                    <label class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
                       Environment Variables
                     </label>
                     <Button
@@ -583,7 +583,7 @@ export function TaskConfigEditor() {
                 {/* Problem Matchers */}
                 <div>
                   <div class="flex items-center justify-between mb-1.5">
-                    <label class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+                    <label class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
                       Problem Matchers
                     </label>
                   </div>
@@ -599,7 +599,7 @@ export function TaskConfigEditor() {
                             border: problemMatchers().includes(matcher)
                               ? "1px solid var(--cortex-info)"
                               : "1px solid var(--border-base)",
-                            color: "var(--text-base)",
+                            color: "var(--text-primary)",
                           }}
                           onClick={() => {
                             if (problemMatchers().includes(matcher)) {
@@ -648,7 +648,7 @@ export function TaskConfigEditor() {
 
                 {/* Reveal Mode */}
                 <div>
-                  <label class="block text-sm font-medium mb-1.5" style={{ color: "var(--text-base)" }}>
+                  <label class="block text-sm font-medium mb-1.5" style={{ color: "var(--text-primary)" }}>
                     Reveal Terminal
                   </label>
                   <select
@@ -656,7 +656,7 @@ export function TaskConfigEditor() {
                     style={{ 
                       background: "var(--surface-raised)",
                       border: "1px solid var(--border-base)",
-                      color: "var(--text-base)"
+                      color: "var(--text-primary)"
                     }}
                     value={revealMode()}
                     onChange={(e) => setRevealMode(e.currentTarget.value as "always" | "silent" | "never")}
@@ -669,7 +669,7 @@ export function TaskConfigEditor() {
 
                 {/* Panel Mode */}
                 <div>
-                  <label class="block text-sm font-medium mb-1.5" style={{ color: "var(--text-base)" }}>
+                  <label class="block text-sm font-medium mb-1.5" style={{ color: "var(--text-primary)" }}>
                     Terminal Panel
                   </label>
                   <select
@@ -677,7 +677,7 @@ export function TaskConfigEditor() {
                     style={{ 
                       background: "var(--surface-raised)",
                       border: "1px solid var(--border-base)",
-                      color: "var(--text-base)"
+                      color: "var(--text-primary)"
                     }}
                     value={panelMode()}
                     onChange={(e) => setPanelMode(e.currentTarget.value as "shared" | "dedicated" | "new")}
@@ -703,7 +703,7 @@ export function TaskConfigEditor() {
                         "accent-color": "var(--cortex-info)",
                       }}
                     />
-                    <Text variant="body" style={{ color: "var(--text-base)" }}>
+                    <Text variant="body" style={{ color: "var(--text-primary)" }}>
                       Focus terminal when task starts
                     </Text>
                   </div>
@@ -721,7 +721,7 @@ export function TaskConfigEditor() {
                         "accent-color": "var(--cortex-info)",
                       }}
                     />
-                    <Text variant="body" style={{ color: "var(--text-base)" }}>
+                    <Text variant="body" style={{ color: "var(--text-primary)" }}>
                       Clear terminal before running task
                     </Text>
                   </div>
@@ -742,7 +742,7 @@ export function TaskConfigEditor() {
 
                 <div>
                   <div class="flex items-center justify-between mb-1.5">
-                    <label class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+                    <label class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
                       Depends On
                     </label>
                     <Button
diff --git a/src/components/tasks/TaskQuickPick.tsx b/src/components/tasks/TaskQuickPick.tsx
index 068245c7..51851ac8 100644
--- a/src/components/tasks/TaskQuickPick.tsx
+++ b/src/components/tasks/TaskQuickPick.tsx
@@ -365,7 +365,7 @@ export function TaskQuickPick() {
               type="text"
               placeholder="Search tasks... (type to filter)"
               class="flex-1 bg-transparent outline-none text-sm"
-              style={{ color: "var(--text-base)" }}
+              style={{ color: "var(--text-primary)" }}
               value={query()}
               onInput={(e) => setQuery(e.currentTarget.value)}
               onKeyDown={handleKeyDown}
@@ -661,7 +661,7 @@ function TaskPickerItem(props: TaskPickerItemProps) {
         <div class="flex items-center gap-2">
           <span
             class="text-sm truncate"
-            style={{ color: "var(--text-base)" }}
+            style={{ color: "var(--text-primary)" }}
           >
             {highlightText(props.item.task.label)}
           </span>
diff --git a/src/components/tasks/TaskRunner.tsx b/src/components/tasks/TaskRunner.tsx
index 0164b11c..eee431cc 100644
--- a/src/components/tasks/TaskRunner.tsx
+++ b/src/components/tasks/TaskRunner.tsx
@@ -198,7 +198,7 @@ export function TaskRunner(props: TaskRunnerProps) {
               class="flex-1 px-3 py-1.5 rounded text-sm bg-transparent outline-none"
               style={{ 
                 border: "1px solid var(--border-base)",
-                color: "var(--text-base)"
+                color: "var(--text-primary)"
               }}
               value={searchQuery()}
               onInput={(e) => setSearchQuery(e.currentTarget.value)}
@@ -395,7 +395,7 @@ export function TaskOutputPanel(props: TaskOutputPanelProps) {
           class="w-2 h-2 rounded-full"
           style={{ background: getStatusColor() }}
         />
-        <span class="text-xs font-medium truncate" style={{ color: "var(--text-base)" }}>
+        <span class="text-xs font-medium truncate" style={{ color: "var(--text-primary)" }}>
           {props.run.taskLabel}
         </span>
         <div class="flex-1" />
diff --git a/src/components/tasks/TaskStatusBar.tsx b/src/components/tasks/TaskStatusBar.tsx
index 11019069..6f8c159f 100644
--- a/src/components/tasks/TaskStatusBar.tsx
+++ b/src/components/tasks/TaskStatusBar.tsx
@@ -136,7 +136,7 @@ export function TaskStatusBarItem() {
             class="flex items-center justify-between px-3 py-2 border-b"
             style={{ "border-color": "var(--border-weak)" }}
           >
-            <span class="text-xs font-medium" style={{ color: "var(--text-base)" }}>
+            <span class="text-xs font-medium" style={{ color: "var(--text-primary)" }}>
               Running Tasks
             </span>
             <button
@@ -228,7 +228,7 @@ function RunningTaskItem(props: RunningTaskItemProps) {
       <Icon name="spinner" class="w-3.5 h-3.5 animate-spin shrink-0" style={{ color: "var(--cortex-info)" }} />
 
       <div class="flex-1 min-w-0">
-        <div class="text-xs truncate" style={{ color: "var(--text-base)" }}>
+        <div class="text-xs truncate" style={{ color: "var(--text-primary)" }}>
           {props.run.taskLabel}
         </div>
         <div class="text-[10px]" style={{ color: "var(--text-weak)" }}>
@@ -291,7 +291,7 @@ function BackgroundTaskItem(props: BackgroundTaskItemProps) {
       {getStatusIcon()}
 
       <div class="flex-1 min-w-0">
-        <div class="text-xs truncate" style={{ color: "var(--text-base)" }}>
+        <div class="text-xs truncate" style={{ color: "var(--text-primary)" }}>
           {props.run.taskLabel}
         </div>
         <div class="text-[10px]" style={{ color: "var(--text-weak)" }}>
diff --git a/src/components/tasks/TasksJsonEditor.tsx b/src/components/tasks/TasksJsonEditor.tsx
index 3221c949..44d7478b 100644
--- a/src/components/tasks/TasksJsonEditor.tsx
+++ b/src/components/tasks/TasksJsonEditor.tsx
@@ -407,7 +407,7 @@ export function TasksJsonEditor(props: TasksJsonEditorProps) {
               class="w-full h-full p-4 font-mono text-sm resize-none outline-none"
               style={{
                 background: "var(--ui-panel-bg)",
-                color: "var(--text-base)",
+                color: "var(--text-primary)",
                 border: "none",
               }}
               value={content()}
diff --git a/src/components/tasks/TasksPanel.tsx b/src/components/tasks/TasksPanel.tsx
index d24e7bb9..7e21471b 100644
--- a/src/components/tasks/TasksPanel.tsx
+++ b/src/components/tasks/TasksPanel.tsx
@@ -276,7 +276,7 @@ export function TasksPanel() {
                       <Icon name="chevron-right" class="w-4 h-4" style={{ color: "var(--text-weak)" }} />
                     )}
                     <Icon name="clock" class="w-4 h-4" style={{ color: "var(--text-weak)" }} />
-                    <span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>Recent</span>
+                    <span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>Recent</span>
                     <span class="text-xs px-1.5 rounded" style={{ background: "var(--surface-hover)", color: "var(--text-weak)" }}>
                       {recentTasks().length}
                     </span>
@@ -315,7 +315,7 @@ export function TasksPanel() {
                       ) : (
                         <Icon name="chevron-right" class="w-4 h-4" style={{ color: "var(--text-weak)" }} />
                       )}
-                      <span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+                      <span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
                         {section.label}
                       </span>
                       <span class="text-xs px-1.5 rounded" style={{ background: "var(--surface-hover)", color: "var(--text-weak)" }}>
@@ -421,7 +421,7 @@ export function TasksPanel() {
                       >
                         <Icon name="eye" class="w-4 h-4" style={{ color: isRunning() ? "var(--cortex-success)" : "var(--text-weak)" }} />
                         <div class="flex-1 min-w-0">
-                          <div class="text-sm truncate" style={{ color: "var(--text-base)" }}>
+                          <div class="text-sm truncate" style={{ color: "var(--text-primary)" }}>
                             {task.label}
                           </div>
                           <div class="text-xs truncate" style={{ color: "var(--text-weak)" }}>
@@ -554,7 +554,7 @@ export function TasksPanel() {
               >
                 <div class="flex items-center gap-2">
                   <Icon name="floppy-disk" class="w-4 h-4" style={{ color: "var(--text-weak)" }} />
-                  <span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
+                  <span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
                     Enable Run on Save
                   </span>
                 </div>
@@ -584,7 +584,7 @@ export function TasksPanel() {
                       style={{
                         background: "var(--surface-hover)",
                         "border-color": "var(--border-base)",
-                        color: "var(--text-base)",
+                        color: "var(--text-primary)",
                       }}
                     >
                       <option value="">Select a task...</option>
@@ -701,7 +701,7 @@ function TaskItem(props: TaskItemProps) {
       
       <div class="flex-1 min-w-0">
         <div class="flex items-center gap-2">
-          <span class="text-sm truncate" style={{ color: "var(--text-base)" }}>
+          <span class="text-sm truncate" style={{ color: "var(--text-primary)" }}>
             {props.task.label}
           </span>
           <Show when={props.task.isDefault}>
@@ -803,7 +803,7 @@ function RunOnSaveItem(props: RunOnSaveItemProps) {
       
       <div class="flex-1 min-w-0">
         <div class="flex items-center gap-2">
-          <span class="text-sm font-medium truncate" style={{ color: "var(--text-base)" }}>
+          <span class="text-sm font-medium truncate" style={{ color: "var(--text-primary)" }}>
             {props.taskLabel}
           </span>
           <span class="text-xs px-1.5 rounded" style={{ background: "var(--surface-hover)", color: "var(--text-weak)" }}>
diff --git a/src/components/testing/CoverageBars.tsx b/src/components/testing/CoverageBars.tsx
index 5efeff7d..397a64d5 100644
--- a/src/components/testing/CoverageBars.tsx
+++ b/src/components/testing/CoverageBars.tsx
@@ -197,7 +197,7 @@ export function CoverageBar(props: CoverageBarProps) {
             "font-size": "12px",
           }}
         >
-          <span style={{ color: "var(--text-base)" }}>{local.label}</span>
+          <span style={{ color: "var(--text-primary)" }}>{local.label}</span>
           <Show when={local.showPercentage}>
             <span
               style={{
diff --git a/src/components/testing/CoverageOverlay.tsx b/src/components/testing/CoverageOverlay.tsx
index db65d151..6e5ca0bf 100644
--- a/src/components/testing/CoverageOverlay.tsx
+++ b/src/components/testing/CoverageOverlay.tsx
@@ -54,7 +54,7 @@ function FileCoverageRow(props: { file: CoverageFileData }) {
       onClick={handleNavigate}
     >
       <Icon name="file" size={12} color="var(--text-weak)" class="shrink-0" />
-      <span class="truncate flex-1" style={{ color: "var(--text-base)" }} title={props.file.filePath}>
+      <span class="truncate flex-1" style={{ color: "var(--text-primary)" }} title={props.file.filePath}>
         {fileName()}
       </span>
       <div class="shrink-0" style={{ width: "60px" }}>
@@ -101,7 +101,7 @@ export function CoverageOverlay() {
   });
 
   return (
-    <div class="flex flex-col h-full" style={{ background: "var(--cortex-bg-primary)", color: "var(--text-base)" }}>
+    <div class="flex flex-col h-full" style={{ background: "var(--cortex-bg-primary)", color: "var(--text-primary)" }}>
       <div class="flex items-center justify-between px-2 shrink-0" style={{ height: "32px", "border-bottom": "1px solid var(--surface-border)" }}>
         <div class="flex items-center gap-2">
           <Icon name="chart-pie" size={14} color="var(--text-weak)" />
diff --git a/src/components/testing/CoverageView.tsx b/src/components/testing/CoverageView.tsx
index 15aa09c3..90721647 100644
--- a/src/components/testing/CoverageView.tsx
+++ b/src/components/testing/CoverageView.tsx
@@ -247,7 +247,7 @@ export function CoverageView(props: CoverageViewProps) {
         "flex-direction": "column",
         height: props.height || "100%",
         background: "var(--background-base)",
-        color: "var(--text-base)",
+        color: "var(--text-primary)",
         "font-size": "13px",
         ...props.style,
       }}
diff --git a/src/components/testing/TestOutput.tsx b/src/components/testing/TestOutput.tsx
index 1b2d4807..d65e68d8 100644
--- a/src/components/testing/TestOutput.tsx
+++ b/src/components/testing/TestOutput.tsx
@@ -120,7 +120,7 @@ export function TestOutput() {
   };
 
   return (
-    <div class="flex flex-col h-full" style={{ background: "var(--cortex-bg-primary)", color: "var(--text-base)" }}>
+    <div class="flex flex-col h-full" style={{ background: "var(--cortex-bg-primary)", color: "var(--text-primary)" }}>
       <div class="flex items-center justify-between px-2 shrink-0" style={{ height: "28px", "border-bottom": "1px solid var(--surface-border)" }}>
         <div class="flex items-center gap-2">
           <span style={{ "font-size": "11px", "font-weight": "600", "text-transform": "uppercase" }}>Output</span>
@@ -134,7 +134,7 @@ export function TestOutput() {
             onChange={(e) => setFilterStream(e.currentTarget.value as "all" | "stdout" | "stderr")}
             style={{
               background: "var(--cortex-bg-primary)",
-              color: "var(--text-base)",
+              color: "var(--text-primary)",
               border: "1px solid var(--surface-border)",
               "border-radius": "3px",
               "font-size": "10px",
diff --git a/src/components/testing/TestResults.tsx b/src/components/testing/TestResults.tsx
index 5c5a7539..aee1470c 100644
--- a/src/components/testing/TestResults.tsx
+++ b/src/components/testing/TestResults.tsx
@@ -53,7 +53,7 @@ function TestItemRow(props: {
           <span class="w-3 shrink-0" />
         </Show>
         <Icon name={icon().name} size={14} color={icon().color} class="shrink-0" />
-        <span class="truncate" style={{ color: "var(--text-base)" }}>
+        <span class="truncate" style={{ color: "var(--text-primary)" }}>
           {props.test.name}
         </span>
         <Show when={props.test.duration !== undefined}>
@@ -148,7 +148,7 @@ export function TestResults() {
   };
 
   return (
-    <div class="flex flex-col h-full" style={{ background: "var(--cortex-bg-primary)", color: "var(--text-base)" }}>
+    <div class="flex flex-col h-full" style={{ background: "var(--cortex-bg-primary)", color: "var(--text-primary)" }}>
       <div class="flex items-center gap-2 px-2 shrink-0" style={{ height: "32px", "border-bottom": "1px solid var(--surface-border)" }}>
         <span style={{ "font-size": "11px", "font-weight": "600", "text-transform": "uppercase" }}>Test Results</span>
         <Show when={duration() !== null}>
diff --git a/src/components/ui/ConfirmDialog.tsx b/src/components/ui/ConfirmDialog.tsx
index 26c3eb0e..d8626eef 100644
--- a/src/components/ui/ConfirmDialog.tsx
+++ b/src/components/ui/ConfirmDialog.tsx
@@ -91,6 +91,7 @@ export const ConfirmDialog: Component<ConfirmDialogProps> = (props) => {
       <div style={bodyStyle}>
         <div style={iconContainerStyle}>
           <CortexIcon
+            aria-hidden="true"
             name="triangle-exclamation"
             size={20}
             style={{ color: "var(--cortex-warning, #F59E0B)" }}
diff --git a/src/components/ui/Toggle.tsx b/src/components/ui/Toggle.tsx
index a1c4571c..086c6e78 100644
--- a/src/components/ui/Toggle.tsx
+++ b/src/components/ui/Toggle.tsx
@@ -30,6 +30,7 @@ export function Toggle(props: ToggleProps) {
         onChange={local.onChange}
         disabled={local.disabled}
         size={local.size || "md"}
+        aria-label={local["aria-label"]}
       />
       <Show when={local.label || local.description}>
         <div style={{ display: "flex", "flex-direction": "column", gap: "2px" }}>
diff --git a/src/components/viewers/ImageViewer.tsx b/src/components/viewers/ImageViewer.tsx
index 70131341..a497073d 100644
--- a/src/components/viewers/ImageViewer.tsx
+++ b/src/components/viewers/ImageViewer.tsx
@@ -370,7 +370,7 @@ export function ImageViewer(props: ImageViewerProps) {
         {/* Left: File info */}
         <div class="flex items-center gap-2">
           <Icon name="image" class="w-4 h-4" style={{ color: "var(--text-weak)" }} />
-          <span class="text-xs" style={{ color: "var(--text-base)" }}>
+          <span class="text-xs" style={{ color: "var(--text-primary)" }}>
             {props.name}
           </span>
           <Show when={primaryImageInfo()}>
@@ -393,7 +393,7 @@ export function ImageViewer(props: ImageViewerProps) {
 
           <span 
             class="w-14 text-center text-xs tabular-nums"
-            style={{ color: "var(--text-base)" }}
+            style={{ color: "var(--text-primary)" }}
           >
             {zoomPercent()}
           </span>
diff --git a/src/components/viewers/SVGPreview.tsx b/src/components/viewers/SVGPreview.tsx
index f9e80c27..ecb8e7a2 100644
--- a/src/components/viewers/SVGPreview.tsx
+++ b/src/components/viewers/SVGPreview.tsx
@@ -679,7 +679,7 @@ export function SVGPreview(props: SVGPreviewProps) {
                 "border-color": "var(--border-weak)",
               }}
             >
-              <span class="text-xs font-medium" style={{ color: "var(--text-base)" }}>
+              <span class="text-xs font-medium" style={{ color: "var(--text-primary)" }}>
                 Elements
               </span>
               <span 
@@ -707,7 +707,7 @@ export function SVGPreview(props: SVGPreviewProps) {
                 class="shrink-0 border-t p-3 max-h-[200px] overflow-y-auto"
                 style={{ "border-color": "var(--border-weak)" }}
               >
-                <div class="text-xs font-medium mb-2" style={{ color: "var(--text-base)" }}>
+                <div class="text-xs font-medium mb-2" style={{ color: "var(--text-primary)" }}>
                   &lt;{state.selectedElement!.tag}&gt;
                 </div>
                 <div class="space-y-1">