From ffefc7b332943788106ddb0a11ce42780ad84d49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CBeeRad=E2=80=9D?= <bradwmorriswork@gmail.com>
Date: Tue, 17 Mar 2026 20:15:24 +1100
Subject: [PATCH] fix: migrate hardcoded hex values to CSS vars for light mode

Replace dark hex values with CSS custom properties across all panel,
card, modal, and focus components so light mode renders correctly.
Backgrounds, borders, and text colors now respond to data-theme attribute.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/focus/FocusPanel.tsx           | 258 +++++++++---------
 src/components/focus/source/SourceReader.tsx  |  10 +-
 src/components/layout/SplitHandle.tsx         |   4 +-
 src/components/layout/ThreePanelLayout.tsx    |   8 +-
 src/components/nodes/FolderViewOverlay.tsx    | 102 +++----
 src/components/nodes/SearchModal.tsx          |  26 +-
 src/components/panes/GuidesPane.tsx           |  60 ++--
 src/components/panes/MapPane.tsx              |  68 ++---
 src/components/panes/NodePane.tsx             |  32 +--
 src/components/panes/PaneHeader.tsx           |  14 +-
 .../panes/map/EdgeExplanationModal.tsx        |  24 +-
 src/components/panes/map/RahEdge.tsx          |   6 +-
 src/components/settings/DatabaseViewer.tsx    |  80 +++---
 src/components/settings/GuidesViewer.tsx      |  44 +--
 src/components/settings/LogsRow.tsx           |  36 +--
 src/components/settings/LogsViewer.tsx        |   4 +-
 src/components/settings/SettingsModal.tsx     |  42 +--
 src/components/views/DatabaseTableView.tsx    |  68 ++---
 src/components/views/ViewsOverlay.tsx         |  62 ++---
 19 files changed, 474 insertions(+), 474 deletions(-)

diff --git a/src/components/focus/FocusPanel.tsx b/src/components/focus/FocusPanel.tsx
index 7750f7a..378f76e 100644
--- a/src/components/focus/FocusPanel.tsx
+++ b/src/components/focus/FocusPanel.tsx
@@ -1256,7 +1256,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
 
   const renderConnectionsBody = () => {
     if (!activeTab) {
-      return <div style={{ color: '#777', fontSize: '12px' }}>Open a node to manage connections.</div>;
+      return <div style={{ color: 'var(--rah-text-muted)', fontSize: '12px' }}>Open a node to manage connections.</div>;
     }
 
     return (
@@ -1282,11 +1282,11 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
               placeholder="Search for a node to connect..."
               style={{
                 width: '100%',
-                background: '#111',
-                border: '1px solid #2a2a2a',
+                background: 'var(--rah-bg-surface)',
+                border: '1px solid var(--rah-border-strong)',
                 borderRadius: '6px',
                 padding: '8px 12px',
-                color: '#e5e5e5',
+                color: 'var(--rah-text-base)',
                 fontSize: '12px',
                 fontFamily: 'inherit',
                 outline: 'none',
@@ -1300,8 +1300,8 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                 left: 0,
                 right: 0,
                 marginTop: '4px',
-                background: '#141414',
-                border: '1px solid #262626',
+                background: 'var(--rah-bg-panel)',
+                border: '1px solid var(--rah-border-strong)',
                 borderRadius: '8px',
                 maxHeight: '200px',
                 overflowY: 'auto',
@@ -1315,8 +1315,8 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                     style={{
                       padding: '10px 14px',
                       cursor: 'pointer',
-                      borderBottom: index < nodeSearchSuggestions.length - 1 ? '1px solid #1f1f1f' : 'none',
-                      background: index === selectedSearchIndex ? '#1a1a1a' : 'transparent',
+                      borderBottom: index < nodeSearchSuggestions.length - 1 ? '1px solid var(--rah-bg-active)' : 'none',
+                      background: index === selectedSearchIndex ? 'var(--rah-bg-active)' : 'transparent',
                       transition: 'background 100ms ease',
                       display: 'flex',
                       alignItems: 'center',
@@ -1324,7 +1324,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                     }}
                     onMouseEnter={(e) => {
                       if (index !== selectedSearchIndex) {
-                        e.currentTarget.style.background = '#1a1a1a';
+                        e.currentTarget.style.background = 'var(--rah-bg-active)';
                       }
                     }}
                     onMouseLeave={(e) => {
@@ -1339,7 +1339,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                       justifyContent: 'center',
                       fontSize: '9px',
                       fontWeight: 600,
-                      color: '#0a0a0a',
+                      color: 'var(--rah-bg-base)',
                       background: '#22c55e',
                       padding: '3px 6px',
                       borderRadius: '6px',
@@ -1352,7 +1352,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                     </span>
                     <span style={{
                       fontSize: '13px',
-                      color: '#e5e5e5',
+                      color: 'var(--rah-text-base)',
                       overflow: 'hidden',
                       textOverflow: 'ellipsis',
                       whiteSpace: 'nowrap',
@@ -1361,7 +1361,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                       {suggestion.title}
                     </span>
                     {index === selectedSearchIndex && (
-                      <span style={{ color: '#525252', fontSize: '13px' }}>↵</span>
+                      <span style={{ color: 'var(--rah-text-muted)', fontSize: '13px' }}>↵</span>
                     )}
                   </div>
                 ))}
@@ -1373,11 +1373,11 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
         {/* Connections List */}
         <div style={{ flex: 1, overflowY: 'auto' }}>
           {loadingEdges.has(activeTab) ? (
-            <div style={{ color: '#555', fontSize: '12px', fontStyle: 'italic', padding: '16px 0', textAlign: 'center' }}>Loading connections…</div>
+            <div style={{ color: 'var(--rah-text-muted)', fontSize: '12px', fontStyle: 'italic', padding: '16px 0', textAlign: 'center' }}>Loading connections…</div>
           ) : (() => {
             const list = edgesData[activeTab] || [];
             if (list.length === 0) {
-              return <div style={{ color: '#555', fontSize: '12px', fontStyle: 'italic', padding: '16px 0', textAlign: 'center' }}>No connections yet.</div>;
+              return <div style={{ color: 'var(--rah-text-muted)', fontSize: '12px', fontStyle: 'italic', padding: '16px 0', textAlign: 'center' }}>No connections yet.</div>;
             }
             return (
               <div style={{ display: 'flex', flexDirection: 'column' }}>
@@ -1386,7 +1386,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                     key={connection.id}
                     style={{
                       padding: '6px 0',
-                      borderBottom: '1px solid #141414',
+                      borderBottom: '1px solid var(--rah-bg-panel)',
                       display: 'flex',
                       flexDirection: 'column',
                       gap: '2px',
@@ -1408,7 +1408,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                       <span style={{
                         fontSize: '9px',
                         fontWeight: 700,
-                        color: '#000',
+                        color: 'var(--rah-bg-base)',
                         background: '#22c55e',
                         padding: '1px 5px',
                         borderRadius: '4px',
@@ -1424,7 +1424,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                         onClick={() => onNodeClick?.(connection.connected_node.id)}
                         style={{
                           fontSize: '12px',
-                          color: '#e5e5e5',
+                          color: 'var(--rah-text-base)',
                           fontWeight: 500,
                           overflow: 'hidden',
                           textOverflow: 'ellipsis',
@@ -1434,7 +1434,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                           cursor: 'pointer',
                         }}
                         onMouseEnter={(e) => { e.currentTarget.style.color = '#22c55e'; }}
-                        onMouseLeave={(e) => { e.currentTarget.style.color = '#e5e5e5'; }}
+                        onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--rah-text-base)'; }}
                       >
                         {connection.connected_node.title}
                       </span>
@@ -1442,7 +1442,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                         onClick={() => deleteEdge(connection.edge.id)}
                         disabled={deletingEdge === connection.edge.id}
                         style={{
-                          color: '#444',
+                          color: 'var(--rah-border-stronger)',
                           fontSize: '14px',
                           background: 'transparent',
                           border: 'none',
@@ -1452,7 +1452,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                           lineHeight: 1,
                         }}
                         onMouseEnter={(e) => { if (deletingEdge !== connection.edge.id) e.currentTarget.style.color = '#dc2626'; }}
-                        onMouseLeave={(e) => { if (deletingEdge !== connection.edge.id) e.currentTarget.style.color = '#444'; }}
+                        onMouseLeave={(e) => { if (deletingEdge !== connection.edge.id) e.currentTarget.style.color = 'var(--rah-border-stronger)'; }}
                       >
                         {deletingEdge === connection.edge.id ? '...' : '×'}
                       </button>
@@ -1475,9 +1475,9 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                           style={{
                             flex: 1,
                             fontSize: '11px',
-                            color: '#ddd',
-                            background: '#111',
-                            border: '1px solid #2a2a2a',
+                            color: 'var(--rah-text-base)',
+                            background: 'var(--rah-bg-surface)',
+                            border: '1px solid var(--rah-border-strong)',
                             borderRadius: '4px',
                             padding: '3px 6px',
                             outline: 'none',
@@ -1508,7 +1508,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                           onClick={cancelEditEdgeExplanation}
                           style={{
                             fontSize: '10px',
-                            color: '#666',
+                            color: 'var(--rah-text-muted)',
                             background: 'transparent',
                             border: 'none',
                             padding: '3px 4px',
@@ -1536,9 +1536,9 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                         {typeof connection.edge.context?.type === 'string' && (
                           <span style={{
                             fontSize: '9px',
-                            color: '#888',
-                            background: '#1a1a1a',
-                            border: '1px solid #222',
+                            color: 'var(--rah-text-muted)',
+                            background: 'var(--rah-bg-active)',
+                            border: '1px solid var(--rah-bg-active)',
                             padding: '1px 5px',
                             borderRadius: '999px',
                             flexShrink: 0,
@@ -1621,8 +1621,8 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
       {!hideTabBar && (
         <div style={{
           display: 'flex',
-          borderBottom: '1px solid #1a1a1a',
-          background: '#0f0f0f',
+          borderBottom: '1px solid var(--rah-border)',
+          background: 'var(--rah-bg-surface)',
           flexShrink: 0,
           overflowX: 'auto',
           overflowY: 'hidden'
@@ -1631,7 +1631,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
             <div style={{
               padding: '10px 16px',
               fontSize: '12px',
-              color: '#666'
+              color: 'var(--rah-text-muted)'
             }}>
               No tabs open
             </div>
@@ -1658,9 +1658,9 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                   style={{
                     display: 'flex',
                     alignItems: 'center',
-                    borderRight: '1px solid #1a1a1a',
-                    background: isActive ? '#121212' : '#0f0f0f',
-                    borderBottom: isActive ? '2px solid #666' : 'none',
+                    borderRight: '1px solid var(--rah-border)',
+                    background: isActive ? 'var(--rah-bg-subtle)' : 'var(--rah-bg-surface)',
+                    borderBottom: isActive ? '2px solid var(--rah-text-muted)' : 'none',
                     paddingBottom: isActive ? '0' : '2px',
                     minWidth: '120px',
                     maxWidth: '200px',
@@ -1674,7 +1674,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                       padding: '8px 12px',
                       fontSize: '12px',
                       fontFamily: 'inherit',
-                      color: isActive ? '#fff' : '#999',
+                      color: isActive ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
                       background: 'transparent',
                       border: 'none',
                       cursor: 'pointer',
@@ -1694,14 +1694,14 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                     style={{
                       padding: '4px 8px',
                       fontSize: '14px',
-                      color: '#666',
+                      color: 'var(--rah-text-muted)',
                       background: 'transparent',
                       border: 'none',
                       cursor: 'pointer',
                       transition: 'color 0.2s'
                     }}
-                    onMouseEnter={(e) => { e.currentTarget.style.color = '#fff'; }}
-                    onMouseLeave={(e) => { e.currentTarget.style.color = '#666'; }}
+                    onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--rah-text-active)'; }}
+                    onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--rah-text-muted)'; }}
                   >
                     ×
                   </button>
@@ -1721,7 +1721,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
       }}>
         {!activeTab ? (
           <div style={{
-            color: '#666',
+            color: 'var(--rah-text-muted)',
             fontSize: '13px',
             textAlign: 'center',
             marginTop: '40px'
@@ -1730,13 +1730,13 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
           </div>
         ) : loadingNodes.has(activeTab) ? (
           <div style={{
-            color: '#666',
+            color: 'var(--rah-text-muted)',
             fontSize: '13px'
           }}>
             Loading...
           </div>
         ) : !currentNode ? (
-          <div style={{ color: '#666', fontSize: '13px' }}>Node not found.</div>
+          <div style={{ color: 'var(var(--rah-text-muted))', fontSize: '13px' }}>Node not found.</div>
         ) : nodesData[activeTab] ? (
           <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
             {/* URL Row - Above Title */}
@@ -1800,7 +1800,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                       color: '#3b82f6',
                       fontSize: '11px',
                       background: 'transparent',
-                      border: '1px solid #1a1a1a',
+                      border: '1px solid var(--rah-border)',
                       borderRadius: '4px',
                       padding: '4px 6px',
                       fontFamily: 'inherit',
@@ -1847,7 +1847,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                   <span
                     onClick={() => startEdit('link', '')}
                     style={{
-                      color: '#555',
+                      color: 'var(--rah-text-muted)',
                       fontSize: '11px',
                       cursor: 'pointer',
                       fontStyle: 'italic'
@@ -1879,7 +1879,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                 style={{
                   display: 'inline-block',
                   background: '#22c55e',
-                  color: '#0a0a0a',
+                  color: 'var(--rah-bg-base)',
                   fontSize: '10px',
                   fontWeight: 600,
                   padding: '2px 6px',
@@ -1911,9 +1911,9 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                   style={{
                     fontSize: '20px',
                     fontWeight: 'bold',
-                    color: '#fff',
+                    color: 'var(--rah-text-active)',
                     background: 'transparent',
-                    border: '1px solid #1a1a1a',
+                    border: '1px solid var(--rah-border)',
                     borderRadius: '0',
                     padding: '4px 8px',
                     fontFamily: 'inherit',
@@ -1937,7 +1937,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                   style={{
                     fontSize: '20px',
                     fontWeight: 'bold',
-                    color: '#fff',
+                    color: 'var(--rah-text-active)',
                     fontFamily: 'inherit',
                     cursor: 'pointer',
                     padding: '4px 8px',
@@ -1958,7 +1958,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                     })
                   }}
                   onMouseEnter={(e) => {
-                    e.currentTarget.style.borderColor = '#1a1a1a';
+                    e.currentTarget.style.borderColor = 'var(--rah-border)';
                   }}
                   onMouseLeave={(e) => {
                     e.currentTarget.style.borderColor = 'transparent';
@@ -1966,7 +1966,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                   title={titleExpanded[activeTab] ? undefined : (nodesData[activeTab].title || 'Untitled')}
                 >
                   {nodesData[activeTab].title || 'Untitled'}
-                  {savingField === 'title' && <span style={{ color: '#555', fontSize: '10px', marginLeft: '6px' }}>saving...</span>}
+                  {savingField === 'title' && <span style={{ color: 'var(--rah-text-muted)', fontSize: '10px', marginLeft: '6px' }}>saving...</span>}
                 </h1>
               )}
 
@@ -1980,10 +1980,10 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                   padding: '4px 8px',
                   fontSize: '10px',
                   fontWeight: 500,
-                  color: activeContentTab === 'edges' ? '#22c55e' : '#666',
+                  color: activeContentTab === 'edges' ? '#22c55e' : 'var(--rah-text-muted)',
                   background: activeContentTab === 'edges' ? '#0f2417' : 'transparent',
                   border: '1px solid',
-                  borderColor: activeContentTab === 'edges' ? '#22c55e' : '#262626',
+                  borderColor: activeContentTab === 'edges' ? '#22c55e' : 'var(--rah-border-strong)',
                   borderRadius: '4px',
                   cursor: 'pointer',
                   transition: 'all 0.2s',
@@ -1997,8 +1997,8 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                 }}
                 onMouseLeave={(e) => {
                   if (activeContentTab !== 'edges') {
-                    e.currentTarget.style.color = '#666';
-                    e.currentTarget.style.borderColor = '#262626';
+                    e.currentTarget.style.color = 'var(--rah-text-muted)';
+                    e.currentTarget.style.borderColor = 'var(--rah-border-strong)';
                   }
                 }}
                 title="Connections"
@@ -2016,8 +2016,8 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                         alignItems: 'center',
                         justifyContent: 'center',
                         padding: '0 6px',
-                        background: activeContentTab === 'edges' ? 'rgba(34, 197, 94, 0.18)' : '#1a1a1a',
-                        color: activeContentTab === 'edges' ? '#a7f3b8' : '#888',
+                        background: activeContentTab === 'edges' ? 'rgba(34, 197, 94, 0.18)' : 'var(--rah-bg-active)',
+                        color: activeContentTab === 'edges' ? '#a7f3b8' : 'var(--rah-text-muted)',
                         fontSize: '10px',
                         lineHeight: 1,
                       }}
@@ -2039,7 +2039,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                   padding: '4px',
                   color: deletingNode === activeTab ? '#994444' : '#525252',
                   background: 'transparent',
-                  border: '1px solid #262626',
+                  border: '1px solid var(--rah-border-strong)',
                   borderRadius: '4px',
                   cursor: deletingNode === activeTab ? 'wait' : 'pointer',
                   transition: 'all 0.2s',
@@ -2055,7 +2055,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                 onMouseLeave={(e) => {
                   if (deletingNode !== activeTab) {
                     e.currentTarget.style.color = '#525252';
-                    e.currentTarget.style.borderColor = '#262626';
+                    e.currentTarget.style.borderColor = 'var(--rah-border-strong)';
                     e.currentTarget.style.background = 'transparent';
                   }
                 }}
@@ -2132,7 +2132,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                 alignItems: 'center',
                 gap: '0',
                 marginBottom: '12px',
-                borderBottom: '1px solid #1a1a1a'
+                borderBottom: '1px solid var(--rah-border)'
               }}>
                 <button
                   onClick={() => { setActiveContentTab('desc'); setNotesEditMode(false); setSourceEditMode(false); }}
@@ -2140,7 +2140,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                     padding: '8px 16px',
                     fontSize: '11px',
                     fontWeight: activeContentTab === 'desc' ? 600 : 400,
-                    color: activeContentTab === 'desc' ? '#e5e5e5' : '#666',
+                    color: activeContentTab === 'desc' ? 'var(--rah-text-base)' : 'var(--rah-text-muted)',
                     background: 'transparent',
                     border: 'none',
                     borderBottom: activeContentTab === 'desc' ? '2px solid #22c55e' : '2px solid transparent',
@@ -2157,7 +2157,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                     padding: '8px 16px',
                     fontSize: '11px',
                     fontWeight: activeContentTab === 'notes' ? 600 : 400,
-                    color: activeContentTab === 'notes' ? '#e5e5e5' : '#666',
+                    color: activeContentTab === 'notes' ? 'var(--rah-text-base)' : 'var(--rah-text-muted)',
                     background: 'transparent',
                     border: 'none',
                     borderBottom: activeContentTab === 'notes' ? '2px solid #22c55e' : '2px solid transparent',
@@ -2174,7 +2174,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                     padding: '8px 16px',
                     fontSize: '11px',
                     fontWeight: activeContentTab === 'edges' ? 600 : 400,
-                    color: activeContentTab === 'edges' ? '#e5e5e5' : '#666',
+                    color: activeContentTab === 'edges' ? 'var(--rah-text-base)' : 'var(--rah-text-muted)',
                     background: 'transparent',
                     border: 'none',
                     borderBottom: activeContentTab === 'edges' ? '2px solid #22c55e' : '2px solid transparent',
@@ -2191,7 +2191,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                     padding: '8px 16px',
                     fontSize: '11px',
                     fontWeight: activeContentTab === 'source' ? 600 : 400,
-                    color: activeContentTab === 'source' ? '#e5e5e5' : '#666',
+                    color: activeContentTab === 'source' ? 'var(--rah-text-base)' : 'var(--rah-text-muted)',
                     background: 'transparent',
                     border: 'none',
                     borderBottom: activeContentTab === 'source' ? '2px solid #22c55e' : '2px solid transparent',
@@ -2215,9 +2215,9 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                         gap: '4px',
                         padding: '4px 8px',
                         fontSize: '10px',
-                        color: '#888',
+                        color: 'var(--rah-text-muted)',
                         background: 'transparent',
-                        border: '1px solid #2a2a2a',
+                        border: '1px solid var(--rah-border-strong)',
                         borderRadius: '4px',
                         cursor: 'pointer'
                       }}
@@ -2234,9 +2234,9 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                         gap: '4px',
                         padding: '4px 8px',
                         fontSize: '10px',
-                        color: '#888',
+                        color: 'var(--rah-text-muted)',
                         background: 'transparent',
-                        border: '1px solid #2a2a2a',
+                        border: '1px solid var(--rah-border-strong)',
                         borderRadius: '4px',
                         cursor: 'pointer'
                       }}
@@ -2278,9 +2278,9 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                         gap: '4px',
                         padding: '4px 8px',
                         fontSize: '10px',
-                        color: '#888',
+                        color: 'var(--rah-text-muted)',
                         background: 'transparent',
-                        border: '1px solid #2a2a2a',
+                        border: '1px solid var(--rah-border-strong)',
                         borderRadius: '4px',
                         cursor: 'pointer'
                       }}
@@ -2365,11 +2365,11 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                           }}
                           disabled={descSaving}
                           style={{
-                            color: '#e5e5e5',
+                            color: 'var(--rah-text-base)',
                             fontSize: '15px',
                             lineHeight: '1.7',
                             background: 'transparent',
-                            border: '1px solid #2a2a2a',
+                            border: '1px solid var(--rah-border-strong)',
                             borderRadius: '4px',
                             padding: '12px',
                             fontFamily: 'inherit',
@@ -2388,7 +2388,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                           bottom: '12px',
                           right: '12px',
                           fontSize: '10px',
-                          color: descEditValue.length >= 260 ? '#f59e0b' : '#555'
+                          color: descEditValue.length >= 260 ? '#f59e0b' : 'var(--rah-text-muted)'
                         }}>
                           {descEditValue.length}/280
                         </span>
@@ -2434,9 +2434,9 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                               gap: '4px',
                               padding: '6px 12px',
                               fontSize: '11px',
-                              color: '#888',
+                              color: 'var(--rah-text-muted)',
                               background: 'transparent',
-                              border: '1px solid #2a2a2a',
+                              border: '1px solid var(--rah-border-strong)',
                               borderRadius: '4px',
                               cursor: 'pointer'
                             }}
@@ -2470,7 +2470,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                   ) : nodesData[activeTab]?.description ? (
                     <div
                       style={{
-                        color: '#e5e5e5',
+                        color: 'var(--rah-text-base)',
                         fontSize: '15px',
                         lineHeight: '1.7',
                         padding: '4px',
@@ -2484,13 +2484,13 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                     <div
                       onClick={startDescEdit}
                       style={{
-                        color: '#555',
+                        color: 'var(--rah-text-muted)',
                         fontSize: '12px',
                         fontStyle: 'italic',
                         cursor: 'pointer',
                         padding: '8px',
                         minHeight: '100px',
-                        border: '1px dashed #1a1a1a',
+                        border: '1px dashed var(--rah-border)',
                         borderRadius: '4px',
                         display: 'flex',
                         alignItems: 'center',
@@ -2499,8 +2499,8 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                         flex: 1,
                         transition: 'border-color 0.15s'
                       }}
-                      onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#2a2a2a'; }}
-                      onMouseLeave={(e) => { e.currentTarget.style.borderColor = '#1a1a1a'; }}
+                      onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--rah-border-strong)'; }}
+                      onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--rah-border)'; }}
                     >
                       Click to add a description...
                     </div>
@@ -2563,11 +2563,11 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                           }}
                           disabled={notesSaving}
                           style={{
-                            color: '#e5e5e5',
+                            color: 'var(--rah-text-base)',
                             fontSize: '15px',
                             lineHeight: '1.7',
                             background: 'transparent',
-                            border: '1px solid #2a2a2a',
+                            border: '1px solid var(--rah-border-strong)',
                             borderRadius: '4px',
                             padding: '12px',
                             fontFamily: 'inherit',
@@ -2586,8 +2586,8 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                             position: 'absolute',
                             top: '50px',
                             left: '12px',
-                            background: '#1a1a1a',
-                            border: '1px solid #333',
+                            background: 'var(--rah-bg-active)',
+                            border: '1px solid var(--rah-border-stronger)',
                             borderRadius: '6px',
                             zIndex: 1000,
                             maxHeight: '200px',
@@ -2596,11 +2596,11 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                             boxShadow: '0 4px 12px rgba(0,0,0,0.5)'
                           }}>
                             {mentionQuery.trim().length < 2 ? (
-                              <div style={{ padding: '8px 12px', fontSize: '12px', color: '#666' }}>
+                              <div style={{ padding: '8px 12px', fontSize: '12px', color: 'var(--rah-text-muted)' }}>
                                 Type at least 2 characters to search...
                               </div>
                             ) : mentionResults.length === 0 ? (
-                              <div style={{ padding: '8px 12px', fontSize: '12px', color: '#666' }}>
+                              <div style={{ padding: '8px 12px', fontSize: '12px', color: 'var(--rah-text-muted)' }}>
                                 No nodes found
                               </div>
                             ) : (
@@ -2615,10 +2615,10 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                                   style={{
                                     padding: '8px 12px',
                                     fontSize: '13px',
-                                    color: '#ddd',
+                                    color: 'var(--rah-text-base)',
                                     cursor: 'pointer',
-                                    background: idx === mentionIndex ? '#252525' : 'transparent',
-                                    borderBottom: idx < mentionResults.length - 1 ? '1px solid #2a2a2a' : 'none'
+                                    background: idx === mentionIndex ? 'var(--rah-bg-hover)' : 'transparent',
+                                    borderBottom: idx < mentionResults.length - 1 ? '1px solid var(--rah-border-strong)' : 'none'
                                   }}
                                 >
                                   <span style={{ color: '#22c55e', marginRight: '8px', fontWeight: 600 }}>{n.id}</span>
@@ -2672,9 +2672,9 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                               gap: '4px',
                               padding: '6px 12px',
                               fontSize: '11px',
-                              color: '#888',
+                              color: 'var(--rah-text-muted)',
                               background: 'transparent',
-                              border: '1px solid #2a2a2a',
+                              border: '1px solid var(--rah-border-strong)',
                               borderRadius: '4px',
                               cursor: 'pointer'
                             }}
@@ -2722,9 +2722,9 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                               style={{
                                 padding: '4px 10px',
                                 fontSize: '11px',
-                                color: '#888',
+                                color: 'var(--rah-text-muted)',
                                 background: 'transparent',
-                                border: '1px solid #2a2a2a',
+                                border: '1px solid var(--rah-border-strong)',
                                 borderRadius: '4px',
                                 cursor: 'pointer'
                               }}
@@ -2753,7 +2753,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                   ) : nodesData[activeTab]?.notes ? (
                     <div
                       style={{
-                        color: '#e5e5e5',
+                        color: 'var(--rah-text-base)',
                         fontSize: '15px',
                         lineHeight: '1.7',
                         padding: '4px',
@@ -2770,13 +2770,13 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                     <div
                       onClick={startNotesEdit}
                       style={{
-                        color: '#555',
+                        color: 'var(--rah-text-muted)',
                         fontSize: '12px',
                         fontStyle: 'italic',
                         cursor: 'pointer',
                         padding: '8px',
                         minHeight: '200px',
-                        border: '1px dashed #1a1a1a',
+                        border: '1px dashed var(--rah-border)',
                         borderRadius: '4px',
                         display: 'flex',
                         alignItems: 'center',
@@ -2786,12 +2786,12 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                         transition: 'all 0.2s'
                       }}
                       onMouseEnter={(e) => {
-                        e.currentTarget.style.borderColor = '#2a2a2a';
-                        e.currentTarget.style.color = '#666';
+                        e.currentTarget.style.borderColor = 'var(--rah-border-strong)';
+                        e.currentTarget.style.color = 'var(--rah-text-muted)';
                       }}
                       onMouseLeave={(e) => {
-                        e.currentTarget.style.borderColor = '#1a1a1a';
-                        e.currentTarget.style.color = '#555';
+                        e.currentTarget.style.borderColor = 'var(--rah-border)';
+                        e.currentTarget.style.color = 'var(--rah-text-muted)';
                       }}
                     >
                       Click to add notes...
@@ -2833,11 +2833,11 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                         }}
                         disabled={sourceSaving}
                         style={{
-                          color: '#ccc',
+                          color: 'var(--rah-text-secondary)',
                           fontSize: '12px',
                           lineHeight: '1.5',
                           background: 'transparent',
-                          border: '1px solid #2a2a2a',
+                          border: '1px solid var(--rah-border-strong)',
                           borderRadius: '4px',
                           padding: '12px',
                           fontFamily: 'monospace',
@@ -2865,9 +2865,9 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                             gap: '4px',
                             padding: '6px 12px',
                             fontSize: '11px',
-                            color: '#888',
+                            color: 'var(--rah-text-muted)',
                             background: 'transparent',
-                            border: '1px solid #2a2a2a',
+                            border: '1px solid var(--rah-border-strong)',
                             borderRadius: '4px',
                             cursor: 'pointer'
                           }}
@@ -2910,9 +2910,9 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                         {/* Raw / Reader toggle */}
                         <div style={{
                           display: 'flex',
-                          background: '#111',
+                          background: 'var(--rah-bg-surface)',
                           borderRadius: '4px',
-                          border: '1px solid #222',
+                          border: '1px solid var(--rah-bg-active)',
                           overflow: 'hidden',
                         }}>
                           <button
@@ -2921,8 +2921,8 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                               padding: '4px 10px',
                               fontSize: '10px',
                               fontWeight: 500,
-                              color: sourceReaderMode === 'raw' ? '#fff' : '#666',
-                              background: sourceReaderMode === 'raw' ? '#2a2a2a' : 'transparent',
+                              color: sourceReaderMode === 'raw' ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
+                              background: sourceReaderMode === 'raw' ? 'var(--rah-border-strong)' : 'transparent',
                               border: 'none',
                               cursor: 'pointer',
                               transition: 'all 0.15s ease',
@@ -2936,8 +2936,8 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                               padding: '4px 10px',
                               fontSize: '10px',
                               fontWeight: 500,
-                              color: sourceReaderMode === 'reader' ? '#fff' : '#666',
-                              background: sourceReaderMode === 'reader' ? '#2a2a2a' : 'transparent',
+                              color: sourceReaderMode === 'reader' ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
+                              background: sourceReaderMode === 'reader' ? 'var(--rah-border-strong)' : 'transparent',
                               border: 'none',
                               cursor: 'pointer',
                               transition: 'all 0.15s ease',
@@ -2956,19 +2956,19 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                             gap: '4px',
                             padding: '4px 8px',
                             fontSize: '10px',
-                            color: '#666',
+                            color: 'var(--rah-text-muted)',
                             background: 'transparent',
-                            border: '1px solid #222',
+                            border: '1px solid var(--rah-bg-active)',
                             borderRadius: '4px',
                             cursor: 'pointer',
                           }}
                           onMouseEnter={(e) => {
-                            e.currentTarget.style.color = '#888';
-                            e.currentTarget.style.borderColor = '#333';
+                            e.currentTarget.style.color = 'var(--rah-text-secondary)';
+                            e.currentTarget.style.borderColor = 'var(--rah-border-stronger)';
                           }}
                           onMouseLeave={(e) => {
-                            e.currentTarget.style.color = '#666';
-                            e.currentTarget.style.borderColor = '#222';
+                            e.currentTarget.style.color = 'var(--rah-text-muted)';
+                            e.currentTarget.style.borderColor = 'var(--rah-bg-active)';
                           }}
                         >
                           <Pencil size={10} />
@@ -2988,12 +2988,12 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                           ) : (
                             <div
                               style={{
-                                color: '#ccc',
+                                color: 'var(--rah-text-secondary)',
                                 fontSize: '12px',
                                 lineHeight: '1.5',
                                 padding: '12px',
-                                background: '#0a0a0a',
-                                border: '1px solid #1a1a1a',
+                                background: 'var(--rah-bg-base)',
+                                border: '1px solid var(--rah-border)',
                                 borderRadius: '4px',
                                 fontFamily: 'monospace',
                                 whiteSpace: 'pre-wrap',
@@ -3007,12 +3007,12 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
                           <div
                             onClick={startSourceEdit}
                             style={{
-                              color: '#555',
+                              color: 'var(--rah-text-muted)',
                               fontSize: '12px',
                               fontStyle: 'italic',
                               cursor: 'pointer',
                               padding: '12px',
-                              border: '1px dashed #1a1a1a',
+                              border: '1px dashed var(--rah-border)',
                               borderRadius: '4px',
                               textAlign: 'center',
                               height: '100%',
@@ -3033,7 +3033,7 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
           </div>
         ) : (
           <div style={{
-            color: '#666',
+            color: 'var(--rah-text-muted)',
             fontSize: '13px'
           }}>
             Node not found
@@ -3056,8 +3056,8 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
           position: 'fixed',
           top: contextMenu.y,
           left: contextMenu.x,
-          background: '#1a1a1a',
-          border: '1px solid #2a2a2a',
+          background: 'var(--rah-bg-active)',
+          border: '1px solid var(--rah-border-strong)',
           borderRadius: '6px',
           padding: '4px',
           zIndex: 9999,
@@ -3081,18 +3081,18 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
               background: 'transparent',
               border: 'none',
               borderRadius: '4px',
-              color: '#ccc',
+              color: 'var(--rah-text-secondary)',
               fontSize: '12px',
               cursor: 'pointer',
               textAlign: 'left',
             }}
             onMouseEnter={(e) => {
-              e.currentTarget.style.background = '#2a2a2a';
-              e.currentTarget.style.color = '#fff';
+              e.currentTarget.style.background = 'var(--rah-border-strong)';
+              e.currentTarget.style.color = 'var(--rah-text-active)';
             }}
             onMouseLeave={(e) => {
               e.currentTarget.style.background = 'transparent';
-              e.currentTarget.style.color = '#ccc';
+              e.currentTarget.style.color = 'var(--rah-text-secondary)';
             }}
           >
             <span style={{ fontSize: '14px' }}>↗</span>
@@ -3113,18 +3113,18 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
             background: 'transparent',
             border: 'none',
             borderRadius: '4px',
-            color: '#ccc',
+            color: 'var(--rah-text-secondary)',
             fontSize: '12px',
             cursor: 'pointer',
             textAlign: 'left',
           }}
           onMouseEnter={(e) => {
-            e.currentTarget.style.background = '#2a2a2a';
-            e.currentTarget.style.color = '#fff';
+            e.currentTarget.style.background = 'var(--rah-border-strong)';
+            e.currentTarget.style.color = 'var(--rah-text-active)';
           }}
           onMouseLeave={(e) => {
             e.currentTarget.style.background = 'transparent';
-            e.currentTarget.style.color = '#ccc';
+            e.currentTarget.style.color = 'var(--rah-text-secondary)';
           }}
         >
           <span style={{ fontSize: '14px' }}>×</span>
diff --git a/src/components/focus/source/SourceReader.tsx b/src/components/focus/source/SourceReader.tsx
index 407e15d..f4480d6 100644
--- a/src/components/focus/source/SourceReader.tsx
+++ b/src/components/focus/source/SourceReader.tsx
@@ -100,7 +100,7 @@ export default function SourceReader({
       flex: 1,
       display: 'flex',
       flexDirection: 'column',
-      background: '#0f0f0f',
+      background: 'var(--rah-bg-surface)',
       borderRadius: '4px',
       overflow: 'hidden',
     }}>
@@ -111,11 +111,11 @@ export default function SourceReader({
           alignItems: 'center',
           justifyContent: 'space-between',
           padding: '8px 16px',
-          borderBottom: '1px solid #1a1a1a',
+          borderBottom: '1px solid var(--rah-border)',
         }}>
           <span style={{
             fontSize: '10px',
-            color: '#555',
+            color: 'var(--rah-text-muted)',
             textTransform: 'uppercase',
             letterSpacing: '0.05em',
           }}>
@@ -125,12 +125,12 @@ export default function SourceReader({
             onClick={() => setShowSearch(!showSearch)}
             title="Search content (⌘F)"
             style={{
-              background: showSearch ? '#262626' : 'transparent',
+              background: showSearch ? 'var(--rah-border-strong)' : 'transparent',
               border: 'none',
               borderRadius: '4px',
               padding: '4px 8px',
               cursor: 'pointer',
-              color: showSearch ? '#fafafa' : '#555',
+              color: showSearch ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
               display: 'flex',
               alignItems: 'center',
               gap: '4px',
diff --git a/src/components/layout/SplitHandle.tsx b/src/components/layout/SplitHandle.tsx
index eba5960..082dec6 100644
--- a/src/components/layout/SplitHandle.tsx
+++ b/src/components/layout/SplitHandle.tsx
@@ -99,7 +99,7 @@ export default function SplitHandle({
         style={{
           width: '12px',
           cursor: 'col-resize',
-          background: isHovered ? '#1a1a1a' : 'transparent',
+          background: isHovered ? 'var(--rah-bg-active)' : 'transparent',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
@@ -126,7 +126,7 @@ export default function SplitHandle({
       style={{
         width: '8px',
         cursor: 'col-resize',
-        background: isDragging ? '#22c55e' : (isHovered ? '#1a1a1a' : 'transparent'),
+        background: isDragging ? '#22c55e' : (isHovered ? 'var(--rah-bg-active)' : 'transparent'),
         transition: isDragging ? 'none' : 'background 0.15s ease',
         flexShrink: 0,
       }}
diff --git a/src/components/layout/ThreePanelLayout.tsx b/src/components/layout/ThreePanelLayout.tsx
index 1b5dea3..42e8985 100644
--- a/src/components/layout/ThreePanelLayout.tsx
+++ b/src/components/layout/ThreePanelLayout.tsx
@@ -1050,12 +1050,12 @@ export default function ThreePanelLayout() {
               flexDirection: 'column',
               alignItems: 'center',
               justifyContent: 'center',
-              color: '#666',
+              color: 'var(--rah-text-muted)',
               gap: '12px',
             }}
           >
             <div style={{ fontSize: '14px' }}>No panes open</div>
-            <div style={{ fontSize: '12px', color: '#555' }}>
+            <div style={{ fontSize: '12px', color: 'var(--rah-text-muted)' }}>
               Select a view from the toolbar to get started
             </div>
           </div>
@@ -1081,7 +1081,7 @@ export default function ThreePanelLayout() {
                 margin: '0 auto',
                 width: '100%',
               } : {}),
-              background: '#111111',
+              background: 'var(--rah-bg-surface)',
               borderRadius: '10px',
               outline: dragOverSlot === 'A' ? '2px dashed #22c55e' : 'none',
               outlineOffset: '-4px',
@@ -1114,7 +1114,7 @@ export default function ThreePanelLayout() {
               overflow: 'hidden',
               display: 'flex',
               flexDirection: 'column',
-              background: '#111111',
+              background: 'var(--rah-bg-surface)',
               borderRadius: '10px',
               outline: dragOverSlot === 'B' ? '2px dashed #22c55e' : 'none',
               outlineOffset: '-4px',
diff --git a/src/components/nodes/FolderViewOverlay.tsx b/src/components/nodes/FolderViewOverlay.tsx
index 595d1d3..788c18e 100644
--- a/src/components/nodes/FolderViewOverlay.tsx
+++ b/src/components/nodes/FolderViewOverlay.tsx
@@ -581,7 +581,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
   const renderDimensionGrid = () => {
     if (dimensionsLoading) {
       return (
-        <div style={{ padding: '40px', color: '#888', textAlign: 'center' }}>
+        <div style={{ padding: '40px', color: 'var(var(--rah-text-muted))', textAlign: 'center' }}>
           Loading dimensions...
         </div>
       );
@@ -597,7 +597,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
 
     if (sortedDimensions.length === 0) {
       return (
-        <div style={{ padding: '40px', color: '#888', textAlign: 'center' }}>
+        <div style={{ padding: '40px', color: 'var(var(--rah-text-muted))', textAlign: 'center' }}>
           No dimensions yet. Create one to get started.
         </div>
       );
@@ -693,7 +693,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
                 {dimension.description && (
                   <div style={{
                     fontSize: '11px',
-                    color: '#555',
+                    color: 'var(var(--rah-text-muted))',
                     whiteSpace: 'nowrap',
                     overflow: 'hidden',
                     textOverflow: 'ellipsis',
@@ -736,7 +736,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
                     alignItems: 'center',
                     justifyContent: 'center',
                     cursor: 'pointer',
-                    color: '#666',
+                    color: 'var(var(--rah-text-muted))',
                     transition: 'color 0.1s ease'
                   }}
                   onMouseEnter={(e) => { e.currentTarget.style.color = '#999'; }}
@@ -784,7 +784,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
                     alignItems: 'center',
                     justifyContent: 'center',
                     cursor: deletingDimension === dimension.dimension ? 'not-allowed' : 'pointer',
-                    color: '#666',
+                    color: 'var(var(--rah-text-muted))',
                     opacity: deletingDimension === dimension.dimension ? 0.3 : 1,
                     transition: 'color 0.1s ease'
                   }}
@@ -930,7 +930,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
             onClose();
           }}
           style={{
-            background: '#0a0a0a',
+            background: 'var(var(--rah-bg-base))',
             border: '1px solid #161616',
             borderRadius: '12px',
             padding: '14px',
@@ -1053,10 +1053,10 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
         </div>
       ))}
       {nodesLoading && (
-        <div style={{ padding: '20px', color: '#888' }}>Loading...</div>
+        <div style={{ padding: '20px', color: 'var(var(--rah-text-muted))' }}>Loading...</div>
       )}
       {!nodesLoading && nodes.length === 0 && (
-        <div style={{ gridColumn: '1 / -1', textAlign: 'center', color: '#888', paddingTop: '40px' }}>
+        <div style={{ gridColumn: '1 / -1', textAlign: 'center', color: 'var(var(--rah-text-muted))', paddingTop: '40px' }}>
           No nodes in this dimension yet.
         </div>
       )}
@@ -1085,7 +1085,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
             gap: '12px',
             padding: '12px 16px',
             marginBottom: '4px',
-            background: '#0a0a0a',
+            background: 'var(var(--rah-bg-base))',
             border: '1px solid #161616',
             borderRadius: '10px',
             cursor: 'pointer',
@@ -1107,7 +1107,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            background: '#1a1a1a',
+            background: 'var(var(--rah-bg-active))',
             borderRadius: '8px',
             flexShrink: 0
           }}>
@@ -1176,7 +1176,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
                     <span style={{
                       padding: '2px 6px',
                       fontSize: '10px',
-                      color: '#666'
+                      color: 'var(var(--rah-text-muted))'
                     }}>
                       +{node.dimensions.length - 3}
                     </span>
@@ -1206,10 +1206,10 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
         </button>
       ))}
       {nodesLoading && (
-        <div style={{ padding: '20px', color: '#888' }}>Loading...</div>
+        <div style={{ padding: '20px', color: 'var(var(--rah-text-muted))' }}>Loading...</div>
       )}
       {!nodesLoading && nodes.length === 0 && (
-        <div style={{ textAlign: 'center', color: '#888', paddingTop: '40px' }}>
+        <div style={{ textAlign: 'center', color: 'var(var(--rah-text-muted))', paddingTop: '40px' }}>
           No nodes in this dimension yet.
         </div>
       )}
@@ -1224,8 +1224,8 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
         alignItems: 'center',
         gap: '8px',
         padding: '8px 24px',
-        borderBottom: '1px solid #1a1a1a',
-        background: '#0a0a0a',
+        borderBottom: '1px solid var(--rah-border)',
+        background: 'var(var(--rah-bg-base))',
         flexShrink: 0
       }}>
         <span style={{ fontSize: '11px', color: '#64748b', fontWeight: 500 }}>
@@ -1233,7 +1233,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
         </span>
 
         {kanbanColumns.length === 0 && (
-          <span style={{ fontSize: '11px', color: '#555', fontStyle: 'italic' }}>
+          <span style={{ fontSize: '11px', color: 'var(var(--rah-text-muted))', fontStyle: 'italic' }}>
             Add dimensions to create columns
           </span>
         )}
@@ -1246,11 +1246,11 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
               alignItems: 'center',
               gap: '4px',
               padding: '4px 8px',
-              background: '#1a1a1a',
+              background: 'var(var(--rah-bg-active))',
               border: '1px solid #333',
               borderRadius: '6px',
               fontSize: '11px',
-              color: '#888',
+              color: 'var(var(--rah-text-muted))',
               cursor: 'pointer'
             }}
           >
@@ -1266,7 +1266,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
               marginTop: '4px',
               width: '200px',
               maxHeight: '300px',
-              background: '#1a1a1a',
+              background: 'var(var(--rah-bg-active))',
               border: '1px solid #333',
               borderRadius: '8px',
               overflow: 'hidden',
@@ -1281,10 +1281,10 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
                 style={{
                   width: '100%',
                   padding: '8px 12px',
-                  background: '#0a0a0a',
+                  background: 'var(var(--rah-bg-base))',
                   border: 'none',
                   borderBottom: '1px solid #333',
-                  color: '#fff',
+                  color: 'var(var(--rah-text-active))',
                   fontSize: '12px',
                   outline: 'none'
                 }}
@@ -1295,7 +1295,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
                   <div style={{
                     padding: '12px',
                     fontSize: '12px',
-                    color: '#666',
+                    color: 'var(var(--rah-text-muted))',
                     textAlign: 'center'
                   }}>
                     No dimensions available
@@ -1310,7 +1310,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
                         padding: '8px 12px',
                         background: 'transparent',
                         border: 'none',
-                        color: '#ccc',
+                        color: 'var(var(--rah-text-secondary))',
                         fontSize: '12px',
                         textAlign: 'left',
                         cursor: 'pointer'
@@ -1357,7 +1357,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
                 display: 'flex',
                 flexDirection: 'column',
                 background: isDropTarget ? '#0f2417' : '#0a0a0a',
-                border: '1px solid #1a1a1a',
+                border: '1px solid var(--rah-border)',
                 borderRadius: '12px',
                 transition: 'all 0.2s'
               }}
@@ -1371,7 +1371,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
                 alignItems: 'center',
                 justifyContent: 'space-between',
                 padding: '12px',
-                borderBottom: '1px solid #1a1a1a'
+                borderBottom: '1px solid var(--rah-border)'
               }}>
                 <div style={{
                   display: 'flex',
@@ -1389,8 +1389,8 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
                   </span>
                   <span style={{
                     fontSize: '11px',
-                    color: '#666',
-                    background: '#1a1a1a',
+                    color: 'var(var(--rah-text-muted))',
+                    background: 'var(var(--rah-bg-active))',
                     padding: '2px 6px',
                     borderRadius: '10px'
                   }}>
@@ -1404,7 +1404,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
                     border: 'none',
                     padding: '4px',
                     cursor: 'pointer',
-                    color: '#666',
+                    color: 'var(var(--rah-text-muted))',
                     display: 'flex',
                     alignItems: 'center'
                   }}
@@ -1433,7 +1433,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
                       padding: '10px',
                       marginBottom: '6px',
                       background: draggedNodeId === node.id ? '#1a1a1a' : '#111',
-                      border: '1px solid #222',
+                      border: '1px solid var(--rah-border-strong)',
                       borderRadius: '8px',
                       cursor: 'pointer',
                       opacity: draggedNodeId === node.id ? 0.5 : 1,
@@ -1478,10 +1478,10 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
                               key={dim}
                               style={{
                                 padding: '2px 6px',
-                                background: '#1a1a1a',
+                                background: 'var(var(--rah-bg-active))',
                                 borderRadius: '4px',
                                 fontSize: '10px',
-                                color: '#666'
+                                color: 'var(var(--rah-text-muted))'
                               }}
                             >
                               {dim}
@@ -1514,7 +1514,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            color: '#666',
+            color: 'var(var(--rah-text-muted))',
             fontSize: '13px'
           }}>
             Add dimension columns to organize your nodes
@@ -1548,8 +1548,8 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
               style={{
                 padding: '10px 18px',
                 borderRadius: '999px',
-                border: '1px solid #1f1f1f',
-                background: '#111',
+                border: '1px solid var(--rah-bg-active)',
+                background: 'var(var(--rah-bg-surface))',
                 color: '#f1f5f9',
                 cursor: nodesLoading ? 'not-allowed' : 'pointer'
               }}
@@ -1578,7 +1578,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
             style={{
               padding: '6px',
               borderRadius: '6px',
-              border: '1px solid #1f1f1f',
+              border: '1px solid var(--rah-bg-active)',
               background: 'transparent',
               cursor: 'pointer',
               color: '#cbd5f5'
@@ -1611,9 +1611,9 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
               justifyContent: 'center',
               width: '28px',
               height: '28px',
-              color: '#555',
+              color: 'var(var(--rah-text-muted))',
               background: 'transparent',
-              border: '1px solid #1f1f1f',
+              border: '1px solid var(--rah-bg-active)',
               borderRadius: '6px',
               cursor: 'pointer',
               transition: 'all 0.15s'
@@ -1636,10 +1636,10 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
               width: '28px',
               height: '28px',
               borderRadius: '6px',
-              border: '1px solid #1f1f1f',
+              border: '1px solid var(--rah-bg-active)',
               background: 'transparent',
               cursor: 'pointer',
-              color: '#555',
+              color: 'var(var(--rah-text-muted))',
               transition: 'all 0.15s'
             }}
             onMouseEnter={(e) => { e.currentTarget.style.color = '#888'; e.currentTarget.style.background = '#1a1a1a'; }}
@@ -1668,7 +1668,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
       }}
     >
       {toolbarHost ? createPortal(toolbar, toolbarHost) : (
-        <div style={{ borderBottom: '1px solid #1a1a1a', padding: '12px 16px' }}>
+        <div style={{ borderBottom: '1px solid var(--rah-border)', padding: '12px 16px' }}>
           {toolbar}
         </div>
       )}
@@ -1716,7 +1716,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
       >
         <div
           style={{
-            background: '#0a0a0a',
+            background: 'var(var(--rah-bg-base))',
             border: '1px solid #333',
             borderRadius: '12px',
             width: '480px',
@@ -1730,7 +1730,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
           {/* Header */}
           <div style={{
             padding: '16px 20px',
-            borderBottom: '1px solid #1a1a1a',
+            borderBottom: '1px solid var(--rah-border)',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'space-between'
@@ -1755,7 +1755,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
                 <div style={{
                   fontSize: '15px',
                   fontWeight: 600,
-                  color: '#e5e5e5'
+                  color: 'var(var(--rah-text-base))'
                 }}>
                   Edit Dimension
                 </div>
@@ -1779,7 +1779,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
                 alignItems: 'center',
                 justifyContent: 'center',
                 cursor: 'pointer',
-                color: '#666'
+                color: 'var(var(--rah-text-muted))'
               }}
             >
               <X size={16} />
@@ -1800,7 +1800,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
                 display: 'block',
                 fontSize: '12px',
                 fontWeight: 600,
-                color: '#888',
+                color: 'var(var(--rah-text-muted))',
                 marginBottom: '8px',
                 textTransform: 'uppercase',
                 letterSpacing: '0.05em'
@@ -1816,10 +1816,10 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
                   width: '100%',
                   minHeight: '80px',
                   padding: '12px',
-                  background: '#111',
+                  background: 'var(var(--rah-bg-surface))',
                   border: '1px solid #333',
                   borderRadius: '8px',
-                  color: '#e5e5e5',
+                  color: 'var(var(--rah-text-base))',
                   fontSize: '13px',
                   resize: 'vertical',
                   outline: 'none'
@@ -1834,7 +1834,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
               <div style={{
                 marginTop: '4px',
                 fontSize: '11px',
-                color: '#555',
+                color: 'var(var(--rah-text-muted))',
                 textAlign: 'right'
               }}>
                 {editModalDescription.length}/500
@@ -1847,7 +1847,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
                 display: 'block',
                 fontSize: '12px',
                 fontWeight: 600,
-                color: '#888',
+                color: 'var(var(--rah-text-muted))',
                 marginBottom: '8px',
                 textTransform: 'uppercase',
                 letterSpacing: '0.05em'
@@ -1864,7 +1864,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
           {/* Footer */}
           <div style={{
             padding: '16px 20px',
-            borderTop: '1px solid #1a1a1a',
+            borderTop: '1px solid var(--rah-border)',
             display: 'flex',
             justifyContent: 'flex-end',
             gap: '8px'
@@ -1876,7 +1876,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
                 background: 'transparent',
                 border: '1px solid #333',
                 borderRadius: '6px',
-                color: '#888',
+                color: 'var(var(--rah-text-muted))',
                 fontSize: '13px',
                 fontWeight: 500,
                 cursor: 'pointer'
diff --git a/src/components/nodes/SearchModal.tsx b/src/components/nodes/SearchModal.tsx
index 872cd5c..3caa522 100644
--- a/src/components/nodes/SearchModal.tsx
+++ b/src/components/nodes/SearchModal.tsx
@@ -230,7 +230,7 @@ export default function SearchModal({ isOpen, onClose, onNodeSelect, existingFil
         .search-backdrop {
           position: fixed;
           inset: 0;
-          background: rgba(0, 0, 0, 0.85);
+          background: var(--rah-backdrop);
           backdrop-filter: blur(8px);
           display: flex;
           justify-content: center;
@@ -250,8 +250,8 @@ export default function SearchModal({ isOpen, onClose, onNodeSelect, existingFil
           display: flex;
           align-items: center;
           gap: 16px;
-          background: #141414;
-          border: 1px solid #262626;
+          background: var(--rah-bg-panel);
+          border: 1px solid var(--rah-border-strong);
           border-radius: 16px;
           padding: 20px 24px;
           box-shadow: 
@@ -292,18 +292,18 @@ export default function SearchModal({ isOpen, onClose, onNodeSelect, existingFil
           align-items: center;
           justify-content: center;
           padding: 4px 8px;
-          background: #262626;
+          background: var(--rah-border-strong);
           border-radius: 6px;
           font-size: 11px;
           font-family: inherit;
           color: #737373;
-          border: 1px solid #333;
+          border: 1px solid var(--rah-border-stronger);
         }
         
         .search-results {
           margin-top: 8px;
-          background: #141414;
-          border: 1px solid #262626;
+          background: var(--rah-bg-panel);
+          border: 1px solid var(--rah-border-strong);
           border-radius: 16px;
           overflow: hidden;
           box-shadow: 
@@ -320,7 +320,7 @@ export default function SearchModal({ isOpen, onClose, onNodeSelect, existingFil
           padding: 16px 20px;
           background: transparent;
           border: none;
-          border-bottom: 1px solid #1f1f1f;
+          border-bottom: 1px solid var(--rah-bg-active);
           cursor: pointer;
           transition: background 100ms ease;
           text-align: left;
@@ -333,7 +333,7 @@ export default function SearchModal({ isOpen, onClose, onNodeSelect, existingFil
         
         .search-result-item:hover,
         .search-result-item.selected {
-          background: #1a1a1a;
+          background: var(--rah-bg-active);
         }
         
         .result-id {
@@ -343,7 +343,7 @@ export default function SearchModal({ isOpen, onClose, onNodeSelect, existingFil
           font-size: 10px;
           font-weight: 600;
           font-family: 'SF Mono', 'Fira Code', monospace;
-          color: #0a0a0a;
+          color: var(--rah-bg-base);
           background: #22c55e;
           padding: 4px 8px;
           border-radius: 6px;
@@ -359,7 +359,7 @@ export default function SearchModal({ isOpen, onClose, onNodeSelect, existingFil
 
         .result-title {
           flex: 1;
-          color: #e5e5e5;
+          color: var(--rah-text-base);
           font-size: 15px;
           overflow: hidden;
           text-overflow: ellipsis;
@@ -374,8 +374,8 @@ export default function SearchModal({ isOpen, onClose, onNodeSelect, existingFil
         .search-empty {
           margin-top: 8px;
           padding: 32px 24px;
-          background: #141414;
-          border: 1px solid #262626;
+          background: var(--rah-bg-panel);
+          border: 1px solid var(--rah-border-strong);
           border-radius: 16px;
           color: #525252;
           font-size: 14px;
diff --git a/src/components/panes/GuidesPane.tsx b/src/components/panes/GuidesPane.tsx
index 7b5c179..a6dee04 100644
--- a/src/components/panes/GuidesPane.tsx
+++ b/src/components/panes/GuidesPane.tsx
@@ -108,25 +108,25 @@ export default function GuidesPane({
               style={{
                 background: 'none',
                 border: 'none',
-                color: '#888',
+                color: 'var(--rah-text-muted)',
                 cursor: 'pointer',
                 display: 'flex',
                 alignItems: 'center',
                 padding: '4px',
                 borderRadius: '4px',
               }}
-              onMouseEnter={e => { e.currentTarget.style.color = '#ccc'; }}
-              onMouseLeave={e => { e.currentTarget.style.color = '#888'; }}
+              onMouseEnter={e => { e.currentTarget.style.color = 'var(--rah-text-secondary)'; }}
+              onMouseLeave={e => { e.currentTarget.style.color = 'var(--rah-text-muted)'; }}
             >
               <ArrowLeft size={16} />
             </button>
-            <span style={{ color: '#ccc', fontSize: '13px', fontWeight: 500, display: 'flex', alignItems: 'center', gap: '4px' }}>
+            <span style={{ color: 'var(--rah-text-secondary)', fontSize: '13px', fontWeight: 500, display: 'flex', alignItems: 'center', gap: '4px' }}>
               {selectedGuide.immutable && <Lock size={12} style={{ color: '#22c55e' }} />}
               {selectedGuide.name}
             </span>
           </div>
         ) : (
-          <span style={{ color: '#666', fontSize: '11px' }}>
+          <span style={{ color: 'var(--rah-text-muted)', fontSize: '11px' }}>
             {userGuides.length} of 10 custom guides
           </span>
         )}
@@ -134,22 +134,22 @@ export default function GuidesPane({
 
       <div style={{ flex: 1, minHeight: 0, overflow: 'auto', padding: '12px' }}>
         {loading ? (
-          <div style={{ color: '#555', fontSize: '13px', textAlign: 'center', paddingTop: '24px' }}>
+          <div style={{ color: 'var(--rah-text-muted)', fontSize: '13px', textAlign: 'center', paddingTop: '24px' }}>
             Loading...
           </div>
         ) : selectedGuide ? (
-          <div className="guide-content" style={{ color: '#ccc', fontSize: '13px', lineHeight: '1.6' }}>
+          <div className="guide-content" style={{ color: 'var(--rah-text-secondary)', fontSize: '13px', lineHeight: '1.6' }}>
             <ReactMarkdown
               remarkPlugins={[remarkGfm]}
               components={{
                 h1: ({ children }) => (
-                  <h1 style={{ fontSize: '18px', fontWeight: 600, color: '#eee', margin: '0 0 16px 0' }}>{children}</h1>
+                  <h1 style={{ fontSize: '18px', fontWeight: 600, color: 'var(--rah-text-base)', margin: '0 0 16px 0' }}>{children}</h1>
                 ),
                 h2: ({ children }) => (
-                  <h2 style={{ fontSize: '15px', fontWeight: 600, color: '#ddd', margin: '20px 0 8px 0' }}>{children}</h2>
+                  <h2 style={{ fontSize: '15px', fontWeight: 600, color: 'var(--rah-text-base)', margin: '20px 0 8px 0' }}>{children}</h2>
                 ),
                 h3: ({ children }) => (
-                  <h3 style={{ fontSize: '14px', fontWeight: 600, color: '#ccc', margin: '16px 0 6px 0' }}>{children}</h3>
+                  <h3 style={{ fontSize: '14px', fontWeight: 600, color: 'var(--rah-text-secondary)', margin: '16px 0 6px 0' }}>{children}</h3>
                 ),
                 p: ({ children }) => (
                   <p style={{ margin: '0 0 12px 0' }}>{children}</p>
@@ -168,7 +168,7 @@ export default function GuidesPane({
                   if (isInline) {
                     return (
                       <code style={{
-                        background: '#1a1a1a',
+                        background: 'var(--rah-bg-active)',
                         padding: '2px 6px',
                         borderRadius: '4px',
                         fontSize: '12px',
@@ -179,13 +179,13 @@ export default function GuidesPane({
                   return (
                     <code style={{
                       display: 'block',
-                      background: '#0d0d0d',
+                      background: 'var(--rah-bg-surface)',
                       padding: '12px',
                       borderRadius: '6px',
                       fontSize: '12px',
                       overflowX: 'auto',
                       margin: '0 0 12px 0',
-                      color: '#aaa',
+                      color: 'var(--rah-text-muted)',
                       whiteSpace: 'pre-wrap',
                     }} {...props}>{children}</code>
                   );
@@ -194,17 +194,17 @@ export default function GuidesPane({
                   <pre style={{ margin: '0 0 12px 0' }}>{children}</pre>
                 ),
                 strong: ({ children }) => (
-                  <strong style={{ color: '#eee', fontWeight: 600 }}>{children}</strong>
+                  <strong style={{ color: 'var(--rah-text-base)', fontWeight: 600 }}>{children}</strong>
                 ),
                 hr: () => (
-                  <hr style={{ border: 'none', borderTop: '1px solid #2a2a2a', margin: '16px 0' }} />
+                  <hr style={{ border: 'none', borderTop: '1px solid var(--rah-border-strong)', margin: '16px 0' }} />
                 ),
                 blockquote: ({ children }) => (
                   <blockquote style={{
-                    borderLeft: '3px solid #333',
+                    borderLeft: '1px solid var(--rah-border-stronger)',
                     paddingLeft: '12px',
                     margin: '0 0 12px 0',
-                    color: '#999',
+                    color: 'var(--rah-text-muted)',
                   }}>{children}</blockquote>
                 ),
               }}
@@ -215,13 +215,13 @@ export default function GuidesPane({
         ) : (
           <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
             {guides.length === 0 ? (
-              <div style={{ color: '#555', fontSize: '13px', textAlign: 'center', paddingTop: '24px' }}>
+              <div style={{ color: 'var(--rah-text-muted)', fontSize: '13px', textAlign: 'center', paddingTop: '24px' }}>
                 No guides found
               </div>
             ) : (
               <>
                 {systemGuides.length > 0 && (
-                  <div style={{ color: '#555', fontSize: '11px', textTransform: 'uppercase', letterSpacing: '0.5px', padding: '4px 0' }}>
+                  <div style={{ color: 'var(--rah-text-muted)', fontSize: '11px', textTransform: 'uppercase', letterSpacing: '0.5px', padding: '4px 0' }}>
                     System Guides
                   </div>
                 )}
@@ -235,7 +235,7 @@ export default function GuidesPane({
                   />
                 ))}
                 {userGuides.length > 0 && (
-                  <div style={{ color: '#555', fontSize: '11px', textTransform: 'uppercase', letterSpacing: '0.5px', padding: '8px 0 4px 0' }}>
+                  <div style={{ color: 'var(--rah-text-muted)', fontSize: '11px', textTransform: 'uppercase', letterSpacing: '0.5px', padding: '8px 0 4px 0' }}>
                     Custom Guides
                   </div>
                 )}
@@ -276,30 +276,30 @@ function GuideCard({
         alignItems: 'center',
         gap: '8px',
         padding: '12px',
-        background: '#161616',
-        border: '1px solid #222',
+        background: 'var(--rah-bg-elevated)',
+        border: '1px solid var(--rah-bg-active)',
         borderRadius: '8px',
         cursor: 'pointer',
         textAlign: 'left',
         transition: 'all 0.15s ease',
       }}
       onMouseEnter={e => {
-        e.currentTarget.style.background = '#1a1a1a';
-        e.currentTarget.style.borderColor = '#333';
+        e.currentTarget.style.background = 'var(--rah-bg-active)';
+        e.currentTarget.style.borderColor = 'var(--rah-border-stronger)';
       }}
       onMouseLeave={e => {
-        e.currentTarget.style.background = '#161616';
-        e.currentTarget.style.borderColor = '#222';
+        e.currentTarget.style.background = 'var(--rah-bg-elevated)';
+        e.currentTarget.style.borderColor = 'var(--rah-bg-active)';
       }}
     >
       {guide.immutable && (
         <Lock size={12} style={{ color: '#22c55e', flexShrink: 0 }} />
       )}
       <div style={{ flex: 1, minWidth: 0 }}>
-        <span style={{ color: '#ddd', fontSize: '13px', fontWeight: 500 }}>
+        <span style={{ color: 'var(--rah-text-base)', fontSize: '13px', fontWeight: 500 }}>
           {guide.name}
         </span>
-        <span style={{ color: '#777', fontSize: '12px', lineHeight: '1.4', display: 'block', marginTop: '2px' }}>
+        <span style={{ color: 'var(--rah-text-muted)', fontSize: '12px', lineHeight: '1.4', display: 'block', marginTop: '2px' }}>
           {guide.description}
         </span>
       </div>
@@ -310,7 +310,7 @@ function GuideCard({
           style={{
             background: 'none',
             border: 'none',
-            color: '#555',
+            color: 'var(--rah-text-muted)',
             cursor: 'pointer',
             padding: '4px',
             borderRadius: '4px',
@@ -320,7 +320,7 @@ function GuideCard({
             opacity: deleting === guide.name ? 0.3 : 1,
           }}
           onMouseEnter={e => { e.currentTarget.style.color = '#ef4444'; }}
-          onMouseLeave={e => { e.currentTarget.style.color = '#555'; }}
+          onMouseLeave={e => { e.currentTarget.style.color = 'var(--rah-text-muted)'; }}
         >
           <Trash2 size={14} />
         </button>
diff --git a/src/components/panes/MapPane.tsx b/src/components/panes/MapPane.tsx
index b5a9f70..93efc45 100644
--- a/src/components/panes/MapPane.tsx
+++ b/src/components/panes/MapPane.tsx
@@ -569,9 +569,9 @@ function MapPaneInner({
               padding: '6px 10px',
               background: viewMode === 'dimension' ? 'rgba(34, 197, 94, 0.12)' : 'transparent',
               border: '1px solid',
-              borderColor: viewMode === 'dimension' ? 'rgba(34, 197, 94, 0.35)' : '#2a2a2a',
+              borderColor: viewMode === 'dimension' ? 'rgba(34, 197, 94, 0.35)' : 'var(--rah-border-strong)',
               borderRadius: '6px',
-              color: viewMode === 'dimension' ? '#a7f3b8' : '#888',
+              color: viewMode === 'dimension' ? '#a7f3b8' : 'var(--rah-text-muted)',
               fontSize: '12px',
               cursor: 'pointer',
             }}
@@ -584,9 +584,9 @@ function MapPaneInner({
               padding: '6px 10px',
               background: viewMode === 'hub' ? 'rgba(34, 197, 94, 0.12)' : 'transparent',
               border: '1px solid',
-              borderColor: viewMode === 'hub' ? 'rgba(34, 197, 94, 0.35)' : '#2a2a2a',
+              borderColor: viewMode === 'hub' ? 'rgba(34, 197, 94, 0.35)' : 'var(--rah-border-strong)',
               borderRadius: '6px',
-              color: viewMode === 'hub' ? '#a7f3b8' : '#888',
+              color: viewMode === 'hub' ? '#a7f3b8' : 'var(--rah-text-muted)',
               fontSize: '12px',
               cursor: 'pointer',
             }}
@@ -606,9 +606,9 @@ function MapPaneInner({
               padding: '6px 10px',
               background: selectedDimension ? 'rgba(34, 197, 94, 0.1)' : 'transparent',
               border: '1px solid',
-              borderColor: selectedDimension ? 'rgba(34, 197, 94, 0.3)' : '#2a2a2a',
+              borderColor: selectedDimension ? 'rgba(34, 197, 94, 0.3)' : 'var(--rah-border-strong)',
               borderRadius: '6px',
-              color: selectedDimension ? '#22c55e' : '#888',
+              color: selectedDimension ? '#22c55e' : 'var(--rah-text-muted)',
               fontSize: '12px',
               cursor: 'pointer',
               transition: 'all 0.15s ease',
@@ -627,8 +627,8 @@ function MapPaneInner({
               top: '100%',
               left: 0,
               marginTop: '4px',
-              background: '#1a1a1a',
-              border: '1px solid #2a2a2a',
+              background: 'var(--rah-bg-active)',
+              border: '1px solid var(--rah-border-strong)',
               borderRadius: '8px',
               padding: '4px',
               minWidth: '180px',
@@ -641,9 +641,9 @@ function MapPaneInner({
                 onClick={() => { setSelectedDimension(null); setDimensionDropdownOpen(false); }}
                 style={{
                   display: 'flex', alignItems: 'center', width: '100%', padding: '8px 12px',
-                  background: !selectedDimension ? '#2a2a2a' : 'transparent',
+                  background: !selectedDimension ? 'var(--rah-bg-active)' : 'transparent',
                   border: 'none', borderRadius: '4px',
-                  color: !selectedDimension ? '#fff' : '#888',
+                  color: !selectedDimension ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
                   fontSize: '12px', cursor: 'pointer', textAlign: 'left',
                 }}
               >
@@ -657,21 +657,21 @@ function MapPaneInner({
                   onClick={() => { setSelectedDimension(dim.dimension); setDimensionDropdownOpen(false); }}
                   style={{
                     display: 'flex', alignItems: 'center', width: '100%', padding: '8px 12px',
-                    background: selectedDimension === dim.dimension ? '#2a2a2a' : 'transparent',
+                    background: selectedDimension === dim.dimension ? 'var(--rah-bg-active)' : 'transparent',
                     border: 'none', borderRadius: '4px',
-                    color: selectedDimension === dim.dimension ? '#fff' : '#888',
+                    color: selectedDimension === dim.dimension ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
                     fontSize: '12px', cursor: 'pointer', textAlign: 'left',
                   }}
                   onMouseEnter={e => {
                     if (selectedDimension !== dim.dimension) {
-                      e.currentTarget.style.background = '#222';
-                      e.currentTarget.style.color = '#ccc';
+                      e.currentTarget.style.background = 'var(--rah-bg-active)';
+                      e.currentTarget.style.color = 'var(--rah-text-secondary)';
                     }
                   }}
                   onMouseLeave={e => {
                     if (selectedDimension !== dim.dimension) {
                       e.currentTarget.style.background = 'transparent';
-                      e.currentTarget.style.color = '#888';
+                      e.currentTarget.style.color = 'var(--rah-text-muted)';
                     }
                   }}
                 >
@@ -685,9 +685,9 @@ function MapPaneInner({
       </PaneHeader>
 
       {/* Map content */}
-      <div style={{ position: 'relative', flex: 1, background: '#080808' }}>
+      <div style={{ position: 'relative', flex: 1, background: 'var(--rah-bg-base)' }}>
         {loading ? (
-          <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#666' }}>
+          <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--rah-text-muted)' }}>
             Loading map...
           </div>
         ) : error ? (
@@ -695,7 +695,7 @@ function MapPaneInner({
             {error}
           </div>
         ) : rfNodes.length === 0 ? (
-          <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#666' }}>
+          <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--rah-text-muted)' }}>
             No nodes to display
           </div>
         ) : (
@@ -717,9 +717,9 @@ function MapPaneInner({
               proOptions={{ hideAttribution: true }}
               colorMode="dark"
             >
-              <Background color="#1a1a1a" gap={40} size={1} />
+              <Background color="var(--rah-border)" gap={40} size={1} />
               <MiniMap
-                style={{ background: '#0a0a0a', border: '1px solid #1f1f1f', borderRadius: 6 }}
+                style={{ background: 'var(--rah-bg-base)', border: '1px solid var(--rah-bg-active)', borderRadius: 6 }}
                 maskColor="rgba(0, 0, 0, 0.7)"
                 nodeColor={(node) => {
                   const data = node.data as RahNodeData | undefined;
@@ -737,7 +737,7 @@ function MapPaneInner({
                   position: 'absolute',
                   transform: `translate(${label.x}px, ${label.y}px)`,
                   pointerEvents: 'none',
-                  color: '#7a7a7a',
+                  color: 'var(--rah-text-muted)',
                   fontSize: '11px',
                   letterSpacing: '0.05em',
                   textTransform: 'uppercase',
@@ -761,10 +761,10 @@ function MapPaneInner({
                 style={{
                   padding: '4px 8px',
                   fontSize: 10,
-                  background: '#1a1a1a',
-                  border: '1px solid #2a2a2a',
+                  background: 'var(--rah-bg-active)',
+                  border: '1px solid var(--rah-border-strong)',
                   borderRadius: 4,
-                  color: '#888',
+                  color: 'var(--rah-text-muted)',
                   cursor: 'pointer',
                 }}
                 title="Fit all nodes"
@@ -777,10 +777,10 @@ function MapPaneInner({
                   style={{
                     padding: '4px 8px',
                     fontSize: 10,
-                    background: '#1a1a1a',
-                    border: '1px solid #2a2a2a',
+                    background: 'var(--rah-bg-active)',
+                    border: '1px solid var(--rah-border-strong)',
                     borderRadius: 4,
-                    color: '#888',
+                    color: 'var(--rah-text-muted)',
                     cursor: 'pointer',
                   }}
                   title="Fit to hub nodes"
@@ -794,17 +794,17 @@ function MapPaneInner({
             {selectedDbNode && (
               <div style={infoPanel}>
                 <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: 8 }}>
-                  <div style={{ fontWeight: 600, fontSize: 14, color: '#e5e7eb' }}>
+                  <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--rah-text-base)' }}>
                     {selectedDbNode.title || 'Untitled'}
                   </div>
                   <button
                     onClick={() => setSelectedNodeId(null)}
-                    style={{ background: 'none', border: 'none', color: '#666', cursor: 'pointer', fontSize: 16, lineHeight: 1 }}
+                    style={{ background: 'none', border: 'none', color: 'var(--rah-text-muted)', cursor: 'pointer', fontSize: 16, lineHeight: 1 }}
                   >
                     &times;
                   </button>
                 </div>
-                <div style={{ fontSize: 12, color: '#666', marginBottom: 8 }}>
+                <div style={{ fontSize: 12, color: 'var(--rah-text-muted)', marginBottom: 8 }}>
                   {connectedNodeIds.size} connected nodes
                 </div>
                 <div style={{ fontSize: 11, color: '#22c55e', marginBottom: 8 }}>
@@ -817,8 +817,8 @@ function MapPaneInner({
                         key={dim}
                         style={{
                           padding: '2px 8px', borderRadius: 999, fontSize: 11,
-                          background: lockedDimensionNames.has(dim) ? '#132018' : '#1a1a1a',
-                          color: lockedDimensionNames.has(dim) ? '#86efac' : '#888',
+                          background: lockedDimensionNames.has(dim) ? '#132018' : 'var(--rah-bg-active)',
+                          color: lockedDimensionNames.has(dim) ? '#86efac' : 'var(--rah-text-muted)',
                         }}
                       >
                         {dim}
@@ -869,8 +869,8 @@ const infoPanel: CSSProperties = {
   bottom: 16,
   left: 16,
   width: 260,
-  background: '#0a0a0a',
-  border: '1px solid #1f1f1f',
+  background: 'var(--rah-bg-base)',
+  border: '1px solid var(--rah-bg-active)',
   borderRadius: 8,
   padding: 14,
   zIndex: 10,
diff --git a/src/components/panes/NodePane.tsx b/src/components/panes/NodePane.tsx
index 0a4aa4d..6c2ceff 100644
--- a/src/components/panes/NodePane.tsx
+++ b/src/components/panes/NodePane.tsx
@@ -95,7 +95,7 @@ export default function NodePane({
       <PaneHeader slot={slot} onCollapse={onCollapse} onSwapPanes={onSwapPanes}>
         {/* Tabs rendered inline */}
         {openTabs.length === 0 ? (
-          <span style={{ fontSize: '12px', color: '#666' }}>No tabs open</span>
+          <span style={{ fontSize: '12px', color: 'var(--rah-text-muted)' }}>No tabs open</span>
         ) : (
           openTabs.map((tabId) => {
             const title = nodeTitles[tabId] || 'Loading...';
@@ -118,7 +118,7 @@ export default function NodePane({
                   alignItems: 'center',
                   gap: '4px',
                   padding: '4px 8px',
-                  background: isActiveTab ? '#1f1f1f' : 'transparent',
+                  background: isActiveTab ? 'var(--rah-bg-active)' : 'transparent',
                   borderRadius: '4px',
                   cursor: 'grab',
                   flexShrink: 0,
@@ -128,7 +128,7 @@ export default function NodePane({
                   onClick={() => onTabSelect(tabId)}
                   style={{
                     fontSize: '11px',
-                    color: isActiveTab ? '#fff' : '#888',
+                    color: isActiveTab ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
                     background: 'transparent',
                     border: 'none',
                     cursor: 'pointer',
@@ -145,15 +145,15 @@ export default function NodePane({
                   }}
                   style={{
                     fontSize: '12px',
-                    color: '#666',
+                    color: 'var(--rah-text-muted)',
                     background: 'transparent',
                     border: 'none',
                     cursor: 'pointer',
                     padding: '0 2px',
                     lineHeight: 1,
                   }}
-                  onMouseEnter={(e) => { e.currentTarget.style.color = '#fff'; }}
-                  onMouseLeave={(e) => { e.currentTarget.style.color = '#666'; }}
+                  onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--rah-text-active)'; }}
+                  onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--rah-text-muted)'; }}
                 >
                   ×
                 </button>
@@ -186,8 +186,8 @@ export default function NodePane({
             position: 'fixed',
             top: contextMenu.y,
             left: contextMenu.x,
-            background: '#1a1a1a',
-            border: '1px solid #2a2a2a',
+            background: 'var(--rah-bg-active)',
+            border: '1px solid var(--rah-border-strong)',
             borderRadius: '6px',
             padding: '4px',
             zIndex: 9999,
@@ -211,18 +211,18 @@ export default function NodePane({
                 background: 'transparent',
                 border: 'none',
                 borderRadius: '4px',
-                color: '#ccc',
+                color: 'var(--rah-text-secondary)',
                 fontSize: '12px',
                 cursor: 'pointer',
                 textAlign: 'left',
               }}
               onMouseEnter={(e) => {
-                e.currentTarget.style.background = '#2a2a2a';
-                e.currentTarget.style.color = '#fff';
+                e.currentTarget.style.background = 'var(--rah-bg-active)';
+                e.currentTarget.style.color = 'var(--rah-text-active)';
               }}
               onMouseLeave={(e) => {
                 e.currentTarget.style.background = 'transparent';
-                e.currentTarget.style.color = '#ccc';
+                e.currentTarget.style.color = 'var(--rah-text-secondary)';
               }}
             >
               <span style={{ fontSize: '14px' }}>↗</span>
@@ -243,18 +243,18 @@ export default function NodePane({
               background: 'transparent',
               border: 'none',
               borderRadius: '4px',
-              color: '#ccc',
+              color: 'var(--rah-text-secondary)',
               fontSize: '12px',
               cursor: 'pointer',
               textAlign: 'left',
             }}
             onMouseEnter={(e) => {
-              e.currentTarget.style.background = '#2a2a2a';
-              e.currentTarget.style.color = '#fff';
+              e.currentTarget.style.background = 'var(--rah-bg-active)';
+              e.currentTarget.style.color = 'var(--rah-text-active)';
             }}
             onMouseLeave={(e) => {
               e.currentTarget.style.background = 'transparent';
-              e.currentTarget.style.color = '#ccc';
+              e.currentTarget.style.color = 'var(--rah-text-secondary)';
             }}
           >
             <span style={{ fontSize: '14px' }}>×</span>
diff --git a/src/components/panes/PaneHeader.tsx b/src/components/panes/PaneHeader.tsx
index a6c0eaf..5af39f9 100644
--- a/src/components/panes/PaneHeader.tsx
+++ b/src/components/panes/PaneHeader.tsx
@@ -91,7 +91,7 @@ export default function PaneHeader({
           />
         ) : null}
         {!tabBar && !children && !toolbarHostRef ? (
-          <div style={{ color: '#666', fontSize: '12px' }} />
+          <div style={{ color: 'var(--rah-text-muted)', fontSize: '12px' }} />
         ) : null}
       </div>
 
@@ -102,9 +102,9 @@ export default function PaneHeader({
             width: '32px',
             height: '32px',
             borderRadius: '8px',
-            border: '1px solid #3a3a3a',
-            background: '#161616',
-            color: '#c2c2c2',
+            border: '1px solid var(--rah-border-stronger)',
+            background: 'var(--rah-bg-elevated)',
+            color: 'var(--rah-text-secondary)',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
@@ -119,9 +119,9 @@ export default function PaneHeader({
             e.currentTarget.style.color = '#fca5a5';
           }}
           onMouseLeave={(e) => {
-            e.currentTarget.style.background = '#161616';
-            e.currentTarget.style.borderColor = '#3a3a3a';
-            e.currentTarget.style.color = '#c2c2c2';
+            e.currentTarget.style.background = 'var(--rah-bg-elevated)';
+            e.currentTarget.style.borderColor = 'var(--rah-border-stronger)';
+            e.currentTarget.style.color = 'var(--rah-text-secondary)';
           }}
         >
           <X size={15} strokeWidth={2.25} />
diff --git a/src/components/panes/map/EdgeExplanationModal.tsx b/src/components/panes/map/EdgeExplanationModal.tsx
index eb79b99..610e77d 100644
--- a/src/components/panes/map/EdgeExplanationModal.tsx
+++ b/src/components/panes/map/EdgeExplanationModal.tsx
@@ -94,7 +94,7 @@ export default function EdgeExplanationModal({
         .edge-modal-backdrop {
           position: fixed;
           inset: 0;
-          background: rgba(0, 0, 0, 0.85);
+          background: var(--rah-backdrop);
           backdrop-filter: blur(8px);
           display: flex;
           justify-content: center;
@@ -110,8 +110,8 @@ export default function EdgeExplanationModal({
         }
 
         .edge-modal-card {
-          background: #141414;
-          border: 1px solid #262626;
+          background: var(--rah-bg-panel);
+          border: 1px solid var(--rah-border-strong);
           border-radius: 16px;
           padding: 24px;
           box-shadow:
@@ -144,14 +144,14 @@ export default function EdgeExplanationModal({
         }
 
         .edge-modal-input-wrapper {
-          border: 1px solid #262626;
+          border: 1px solid var(--rah-border-strong);
           border-radius: 12px;
-          background: #0a0a0a;
+          background: var(--rah-bg-base);
           transition: border-color 0.15s ease;
         }
 
         .edge-modal-input-wrapper:focus-within {
-          border-color: #333;
+          border-color: var(--rah-border-stronger);
         }
 
         .edge-modal-textarea {
@@ -188,12 +188,12 @@ export default function EdgeExplanationModal({
           align-items: center;
           justify-content: center;
           padding: 2px 6px;
-          background: #262626;
+          background: var(--rah-border-strong);
           border-radius: 4px;
           font-size: 10px;
           font-family: inherit;
           color: #737373;
-          border: 1px solid #333;
+          border: 1px solid var(--rah-border-stronger);
         }
 
         .edge-modal-actions {
@@ -213,17 +213,17 @@ export default function EdgeExplanationModal({
 
         .edge-modal-btn--cancel {
           background: transparent;
-          border: 1px solid #262626;
+          border: 1px solid var(--rah-border-strong);
           color: #737373;
         }
 
         .edge-modal-btn--cancel:hover {
-          border-color: #333;
-          color: #a3a3a3;
+          border-color: var(--rah-border-stronger);
+          color: var(--rah-text-soft);
         }
 
         .edge-modal-btn--submit {
-          background: #262626;
+          background: var(--rah-border-strong);
           border: 1px solid transparent;
           color: #525252;
           cursor: default;
diff --git a/src/components/panes/map/RahEdge.tsx b/src/components/panes/map/RahEdge.tsx
index d19a994..5495fec 100644
--- a/src/components/panes/map/RahEdge.tsx
+++ b/src/components/panes/map/RahEdge.tsx
@@ -56,12 +56,12 @@ function RahEdgeComponent({
         >
           <div
             style={{
-              background: '#1a1a1a',
-              border: '1px solid #333',
+              background: 'var(--rah-bg-active)',
+              border: '1px solid var(--rah-border-stronger)',
               borderRadius: 4,
               padding: '2px 8px',
               fontSize: 10,
-              color: '#ccc',
+              color: 'var(--rah-text-secondary)',
               textAlign: 'center',
               whiteSpace: 'nowrap',
               overflow: 'hidden',
diff --git a/src/components/settings/DatabaseViewer.tsx b/src/components/settings/DatabaseViewer.tsx
index e45fb88..fa0a895 100644
--- a/src/components/settings/DatabaseViewer.tsx
+++ b/src/components/settings/DatabaseViewer.tsx
@@ -196,7 +196,7 @@ export default function DatabaseViewer() {
 
   if (loading) {
     return (
-      <div style={{ padding: '40px', textAlign: 'center', color: '#888' }}>
+      <div style={{ padding: '40px', textAlign: 'center', color: 'var(--rah-text-muted)' }}>
         Loading database...
       </div>
     );
@@ -212,7 +212,7 @@ export default function DatabaseViewer() {
 
   if (nodes.length === 0) {
     return (
-      <div style={{ padding: '40px', textAlign: 'center', color: '#888' }}>
+      <div style={{ padding: '40px', textAlign: 'center', color: 'var(--rah-text-muted)' }}>
         No nodes found
       </div>
     );
@@ -223,30 +223,30 @@ export default function DatabaseViewer() {
       <div
         style={{
           padding: '16px 24px',
-          borderBottom: '1px solid #2a2a2a',
+          borderBottom: '1px solid var(--rah-border-strong)',
           display: 'flex',
           flexDirection: 'column',
           gap: '12px',
         }}
       >
         <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
-          <label style={{ display: 'flex', flexDirection: 'column', fontSize: '11px', color: '#888', gap: '4px' }}>
+          <label style={{ display: 'flex', flexDirection: 'column', fontSize: '11px', color: 'var(--rah-text-muted)', gap: '4px' }}>
             Search
             <input
               value={searchInput}
               onChange={(e) => setSearchInput(e.target.value)}
               placeholder="title or content"
               style={{
-                background: '#0f0f0f',
-                border: '1px solid #2a2a2a',
-                color: '#ddd',
+                background: 'var(--rah-bg-surface)',
+                border: '1px solid var(--rah-border-strong)',
+                color: 'var(--rah-text-base)',
                 padding: '6px 10px',
                 borderRadius: '4px',
                 minWidth: '220px',
               }}
             />
           </label>
-          <label style={{ display: 'flex', flexDirection: 'column', fontSize: '11px', color: '#888', gap: '4px' }}>
+          <label style={{ display: 'flex', flexDirection: 'column', fontSize: '11px', color: 'var(--rah-text-muted)', gap: '4px' }}>
             Dimension
             <div style={{ display: 'flex', gap: '8px' }}>
               <input
@@ -255,9 +255,9 @@ export default function DatabaseViewer() {
                 onKeyDown={handleDimensionKeyDown}
                 placeholder="e.g. research"
                 style={{
-                  background: '#0f0f0f',
-                  border: '1px solid #2a2a2a',
-                  color: '#ddd',
+                  background: 'var(var(--rah-bg-surface))',
+                  border: '1px solid var(--rah-border-strong)',
+                  color: 'var(var(--rah-text-base))',
                   padding: '6px 10px',
                   borderRadius: '4px',
                   minWidth: '180px',
@@ -279,15 +279,15 @@ export default function DatabaseViewer() {
               </button>
             </div>
           </label>
-          <label style={{ display: 'flex', flexDirection: 'column', fontSize: '11px', color: '#888', gap: '4px' }}>
+          <label style={{ display: 'flex', flexDirection: 'column', fontSize: '11px', color: 'var(--rah-text-muted)', gap: '4px' }}>
             Sort by
             <select
               value={sortBy}
               onChange={handleSortChange}
               style={{
-                background: '#0f0f0f',
-                border: '1px solid #2a2a2a',
-                color: '#ddd',
+                background: 'var(--rah-bg-surface)',
+                border: '1px solid var(--rah-border-strong)',
+                color: 'var(--rah-text-base)',
                 padding: '6px 10px',
                 borderRadius: '4px',
               }}
@@ -337,7 +337,7 @@ export default function DatabaseViewer() {
         )}
 
         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-          <div style={{ fontSize: '12px', color: '#666' }}>{filterStatus}</div>
+          <div style={{ fontSize: '12px', color: 'var(--rah-text-muted)' }}>{filterStatus}</div>
           <div style={{ display: 'flex', gap: '8px' }}>
             <button
               onClick={handleApplyFilters}
@@ -357,10 +357,10 @@ export default function DatabaseViewer() {
               onClick={handleClearFilters}
               style={{
                 padding: '8px 16px',
-                background: '#1a1a1a',
-                border: '1px solid #333',
+                background: 'var(--rah-bg-active)',
+                border: '1px solid var(--rah-border-stronger)',
                 borderRadius: '4px',
-                color: '#ccc',
+                color: 'var(--rah-text-secondary)',
                 cursor: 'pointer',
                 fontSize: '12px',
               }}
@@ -372,10 +372,10 @@ export default function DatabaseViewer() {
               disabled={isFirstPage || filtersActive}
               style={{
                 padding: '8px 12px',
-                background: isFirstPage || filtersActive ? '#1a1a1a' : '#2a2a2a',
-                border: '1px solid #333',
+                background: isFirstPage || filtersActive ? 'var(--rah-bg-active)' : 'var(--rah-bg-active)',
+                border: '1px solid var(--rah-border-stronger)',
                 borderRadius: '4px',
-                color: isFirstPage || filtersActive ? '#555' : '#ccc',
+                color: isFirstPage || filtersActive ? 'var(--rah-text-muted)' : 'var(--rah-text-secondary)',
                 cursor: isFirstPage || filtersActive ? 'not-allowed' : 'pointer',
                 fontSize: '12px',
               }}
@@ -387,10 +387,10 @@ export default function DatabaseViewer() {
               disabled={isLastPage || filtersActive}
               style={{
                 padding: '8px 12px',
-                background: isLastPage || filtersActive ? '#1a1a1a' : '#2a2a2a',
-                border: '1px solid #333',
+                background: isLastPage || filtersActive ? 'var(--rah-bg-active)' : 'var(--rah-bg-active)',
+                border: '1px solid var(--rah-border-stronger)',
                 borderRadius: '4px',
-                color: isLastPage || filtersActive ? '#555' : '#ccc',
+                color: isLastPage || filtersActive ? 'var(--rah-text-muted)' : 'var(--rah-text-secondary)',
                 cursor: isLastPage || filtersActive ? 'not-allowed' : 'pointer',
                 fontSize: '12px',
               }}
@@ -403,7 +403,7 @@ export default function DatabaseViewer() {
 
       <div style={{ flex: 1, overflow: 'auto' }}>
         <table style={{ width: '100%', borderCollapse: 'collapse' }}>
-          <thead style={{ position: 'sticky', top: 0, background: '#1a1a1a', zIndex: 1 }}>
+          <thead style={{ position: 'sticky', top: 0, background: 'var(--rah-bg-active)', zIndex: 1 }}>
             <tr>
               {['Node', 'Categories', 'Edges', 'Highlights', 'Updated', 'Created'].map((column) => (
                 <th
@@ -412,11 +412,11 @@ export default function DatabaseViewer() {
                     padding: '12px 16px',
                     textAlign: 'left',
                     fontSize: '11px',
-                    color: '#888',
+                    color: 'var(--rah-text-muted)',
                     textTransform: 'uppercase',
                     letterSpacing: '0.5px',
                     fontWeight: 'normal',
-                    borderBottom: '1px solid #2a2a2a',
+                    borderBottom: '1px solid var(--rah-border-strong)',
                   }}
                 >
                   {column}
@@ -431,13 +431,13 @@ export default function DatabaseViewer() {
                 <tr
                   key={node.id}
                   style={{
-                    background: index % 2 === 0 ? '#080808' : '#0d0d0d',
-                    borderBottom: '1px solid #111',
+                    background: index % 2 === 0 ? 'var(--rah-bg-base)' : 'var(--rah-bg-surface)',
+                    borderBottom: '1px solid var(--rah-bg-surface)',
                   }}
                 >
                   <td style={{ padding: '12px 16px', verticalAlign: 'top', width: '28%' }}>
                     <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
-                      <div style={{ fontWeight: 600, color: '#f5f5f5', display: 'flex', alignItems: 'center', gap: '8px' }}>
+                      <div style={{ fontWeight: 600, color: 'var(--rah-text-base)', display: 'flex', alignItems: 'center', gap: '8px' }}>
                         {node.title || 'Untitled node'}
                         {node.link && (
                           <button
@@ -462,7 +462,7 @@ export default function DatabaseViewer() {
                           </button>
                         )}
                       </div>
-                      <span style={{ fontSize: '11px', color: '#666', fontFamily: 'JetBrains Mono, monospace' }}>ID: {node.id}</span>
+                      <span style={{ fontSize: '11px', color: 'var(--rah-text-muted)', fontFamily: 'JetBrains Mono, monospace' }}>ID: {node.id}</span>
                     </div>
                   </td>
                   <td style={{ padding: '12px 16px', verticalAlign: 'top', width: '24%' }}>
@@ -488,16 +488,16 @@ export default function DatabaseViewer() {
                           </span>
                         ))
                       ) : (
-                        <span style={{ fontSize: '11px', color: '#555' }}>No categories</span>
+                        <span style={{ fontSize: '11px', color: 'var(--rah-text-muted)' }}>No categories</span>
                       )}
                       {node.dimensions && node.dimensions.length > 3 && (
-                        <span style={{ fontSize: '11px', color: '#666' }}>+{node.dimensions.length - 3} more</span>
+                        <span style={{ fontSize: '11px', color: 'var(--rah-text-muted)' }}>+{node.dimensions.length - 3} more</span>
                       )}
                     </div>
                   </td>
                   <td style={{ padding: '12px 16px', verticalAlign: 'top', width: '10%' }}>
-                    <div style={{ fontWeight: 600, color: '#e2e8f0' }}>{node.edge_count ?? 0}</div>
-                    <div style={{ fontSize: '11px', color: '#666' }}>connections</div>
+                    <div style={{ fontWeight: 600, color: 'var(--rah-text-base)' }}>{node.edge_count ?? 0}</div>
+                    <div style={{ fontSize: '11px', color: 'var(--rah-text-muted)' }}>connections</div>
                   </td>
                   <td style={{ padding: '12px 16px', verticalAlign: 'top', width: '14%' }}>
                     <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
@@ -514,12 +514,12 @@ export default function DatabaseViewer() {
                     </div>
                   </td>
                   <td style={{ padding: '12px 16px', verticalAlign: 'top', width: '12%' }}>
-                    <div style={{ fontSize: '12px', color: '#e2e8f0' }}>{formatTimestamp(node.updated_at)}</div>
-                    <div style={{ fontSize: '11px', color: '#666' }}>{formatRelative(node.updated_at)}</div>
+                    <div style={{ fontSize: '12px', color: 'var(--rah-text-base)' }}>{formatTimestamp(node.updated_at)}</div>
+                    <div style={{ fontSize: '11px', color: 'var(--rah-text-muted)' }}>{formatRelative(node.updated_at)}</div>
                   </td>
                   <td style={{ padding: '12px 16px', verticalAlign: 'top', width: '12%' }}>
-                    <div style={{ fontSize: '12px', color: '#cbd5f5' }}>{formatTimestamp(node.created_at)}</div>
-                    <div style={{ fontSize: '11px', color: '#666' }}>{formatRelative(node.created_at)}</div>
+                    <div style={{ fontSize: '12px', color: 'var(--rah-text-base)' }}>{formatTimestamp(node.created_at)}</div>
+                    <div style={{ fontSize: '11px', color: 'var(--rah-text-muted)' }}>{formatRelative(node.created_at)}</div>
                   </td>
                 </tr>
               );
diff --git a/src/components/settings/GuidesViewer.tsx b/src/components/settings/GuidesViewer.tsx
index 360accb..ace1980 100644
--- a/src/components/settings/GuidesViewer.tsx
+++ b/src/components/settings/GuidesViewer.tsx
@@ -110,7 +110,7 @@ export default function GuidesViewer() {
 
   if (loading) {
     return (
-      <div style={{ padding: '24px', color: '#666' }}>Loading skills...</div>
+      <div style={{ padding: '24px', color: 'var(--rah-text-muted)' }}>Loading skills...</div>
     );
   }
 
@@ -127,10 +127,10 @@ export default function GuidesViewer() {
             style={{
               flex: 1,
               padding: '8px 12px',
-              background: '#1a1a1a',
-              border: '1px solid #333',
+              background: 'var(--rah-bg-active)',
+              border: '1px solid var(--rah-border-stronger)',
               borderRadius: '6px',
-              color: '#fff',
+              color: 'var(--rah-text-active)',
               fontSize: '14px',
             }}
           />
@@ -157,9 +157,9 @@ export default function GuidesViewer() {
             style={{
               padding: '8px 16px',
               background: 'transparent',
-              border: '1px solid #333',
+              border: '1px solid var(--rah-border-stronger)',
               borderRadius: '6px',
-              color: '#888',
+              color: 'var(--rah-text-muted)',
               cursor: 'pointer',
               display: 'flex',
               alignItems: 'center',
@@ -182,10 +182,10 @@ export default function GuidesViewer() {
           placeholder="Brief description"
           style={{
             padding: '8px 12px',
-            background: '#1a1a1a',
-            border: '1px solid #333',
+            background: 'var(--rah-bg-active)',
+            border: '1px solid var(--rah-border-stronger)',
             borderRadius: '6px',
-            color: '#fff',
+            color: 'var(--rah-text-active)',
             fontSize: '13px',
             marginBottom: '16px',
           }}
@@ -198,10 +198,10 @@ export default function GuidesViewer() {
           style={{
             flex: 1,
             padding: '12px',
-            background: '#1a1a1a',
-            border: '1px solid #333',
+            background: 'var(--rah-bg-active)',
+            border: '1px solid var(--rah-border-stronger)',
             borderRadius: '6px',
-            color: '#ccc',
+            color: 'var(--rah-text-secondary)',
             fontSize: '13px',
             fontFamily: 'monospace',
             resize: 'none',
@@ -209,7 +209,7 @@ export default function GuidesViewer() {
           }}
         />
 
-        <p style={{ color: '#666', fontSize: '12px', marginTop: '12px' }}>
+        <p style={{ color: 'var(--rah-text-muted)', fontSize: '12px', marginTop: '12px' }}>
           Skills are markdown files that agents can read for reusable procedural instructions.
         </p>
       </div>
@@ -219,7 +219,7 @@ export default function GuidesViewer() {
   return (
     <div style={{ height: '100%', display: 'flex', flexDirection: 'column', padding: '24px' }}>
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
-        <p style={{ color: '#888', fontSize: '13px', margin: 0 }}>
+        <p style={{ color: 'var(--rah-text-muted)', fontSize: '13px', margin: 0 }}>
           Skills provide reusable context and procedural instructions for agents.
         </p>
         <button
@@ -244,10 +244,10 @@ export default function GuidesViewer() {
 
       <div style={{ flex: 1, overflow: 'auto' }}>
         {guides.length === 0 ? (
-          <div style={{ color: '#555', textAlign: 'center', paddingTop: '48px' }}>
+          <div style={{ color: 'var(--rah-text-muted)', textAlign: 'center', paddingTop: '48px' }}>
             <FileText size={48} style={{ marginBottom: '12px', opacity: 0.5 }} />
             <p style={{ fontSize: '14px' }}>No skills yet</p>
-            <p style={{ fontSize: '12px', color: '#444' }}>Create skills to guide how agents operate in your knowledge base</p>
+            <p style={{ fontSize: '12px', color: 'var(--rah-text-muted)' }}>Create skills to guide how agents operate in your knowledge base</p>
           </div>
         ) : (
           <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
@@ -259,15 +259,15 @@ export default function GuidesViewer() {
                   alignItems: 'center',
                   gap: '12px',
                   padding: '12px 16px',
-                  background: '#161616',
-                  border: '1px solid #222',
+                  background: 'var(--rah-bg-elevated)',
+                  border: '1px solid var(--rah-bg-active)',
                   borderRadius: '8px',
                 }}
               >
                 <FileText size={18} style={{ color: '#22c55e', flexShrink: 0 }} />
                 <div style={{ flex: 1, minWidth: 0 }}>
-                  <div style={{ color: '#ddd', fontSize: '14px', fontWeight: 500 }}>{guide.name}</div>
-                  <div style={{ color: '#666', fontSize: '12px', marginTop: '2px' }}>{guide.description}</div>
+                  <div style={{ color: 'var(--rah-text-base)', fontSize: '14px', fontWeight: 500 }}>{guide.name}</div>
+                  <div style={{ color: 'var(--rah-text-muted)', fontSize: '12px', marginTop: '2px' }}>{guide.description}</div>
                 </div>
                 <button
                   onClick={() => handleEdit(guide.name)}
@@ -275,7 +275,7 @@ export default function GuidesViewer() {
                     padding: '6px',
                     background: 'transparent',
                     border: 'none',
-                    color: '#666',
+                    color: 'var(--rah-text-muted)',
                     cursor: 'pointer',
                     borderRadius: '4px',
                   }}
@@ -289,7 +289,7 @@ export default function GuidesViewer() {
                     padding: '6px',
                     background: 'transparent',
                     border: 'none',
-                    color: '#666',
+                    color: 'var(--rah-text-muted)',
                     cursor: 'pointer',
                     borderRadius: '4px',
                   }}
diff --git a/src/components/settings/LogsRow.tsx b/src/components/settings/LogsRow.tsx
index ddcbdc0..791e340 100644
--- a/src/components/settings/LogsRow.tsx
+++ b/src/components/settings/LogsRow.tsx
@@ -96,15 +96,15 @@ export default function LogsRow({ log, isEven }: LogsRowProps) {
       <tr
         onClick={() => setExpanded(!expanded)}
         style={{
-          background: isEven ? '#0f0f0f' : '#141414',
+          background: isEven ? 'var(--rah-bg-surface)' : 'var(--rah-bg-panel)',
           cursor: 'pointer',
-          borderBottom: '1px solid #2a2a2a'
+          borderBottom: '1px solid var(--rah-border-strong)'
         }}
         onMouseEnter={(e) => {
-          e.currentTarget.style.background = '#1a1a1a';
+          e.currentTarget.style.background = 'var(--rah-bg-active)';
         }}
         onMouseLeave={(e) => {
-          e.currentTarget.style.background = isEven ? '#0f0f0f' : '#141414';
+          e.currentTarget.style.background = isEven ? 'var(--rah-bg-surface)' : 'var(--rah-bg-panel)';
         }}
       >
         <td style={{ padding: '12px 16px', fontSize: '12px', fontFamily: 'JetBrains Mono, monospace', width: '60px' }}>
@@ -122,7 +122,7 @@ export default function LogsRow({ log, isEven }: LogsRowProps) {
         <td style={{ padding: '12px 16px', fontSize: '12px', fontFamily: 'JetBrains Mono, monospace' }}>
           <div>{log.summary || '-'}</div>
           {metrics && (
-            <div style={{ marginTop: '6px', fontSize: '10px', color: '#888', display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
+            <div style={{ marginTop: '6px', fontSize: '10px', color: 'var(--rah-text-muted)', display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
               {metrics.trace_id && (
                 <span title={`Trace: ${metrics.trace_id}`}>
                   🔗 {metrics.trace_id.substring(0, 8)}
@@ -171,11 +171,11 @@ export default function LogsRow({ log, isEven }: LogsRowProps) {
         </td>
       </tr>
       {expanded && (
-        <tr style={{ background: '#0a0a0a', borderTop: '1px solid #333', borderBottom: '1px solid #333' }}>
+        <tr style={{ background: 'var(--rah-bg-base)', borderTop: '1px solid var(--rah-border-stronger)', borderBottom: '1px solid var(--rah-border-stronger)' }}>
           <td colSpan={6} style={{ padding: '16px 24px' }}>
             {metrics?.system_message && (
               <div style={{ marginBottom: '16px' }}>
-                <div style={{ fontSize: '11px', color: '#888', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
+                <div style={{ fontSize: '11px', color: 'var(--rah-text-muted)', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
                   System Message
                 </div>
                 <pre
@@ -187,10 +187,10 @@ export default function LogsRow({ log, isEven }: LogsRowProps) {
                     wordBreak: 'break-word',
                     margin: 0,
                     color: '#60a5fa',
-                    background: '#0f0f0f',
+                    background: 'var(--rah-bg-surface)',
                     padding: '12px',
                     borderRadius: '4px',
-                    border: '1px solid #1f1f1f',
+                    border: '1px solid var(--rah-bg-active)',
                     maxHeight: '300px',
                     overflow: 'auto'
                   }}
@@ -207,10 +207,10 @@ export default function LogsRow({ log, isEven }: LogsRowProps) {
                 (metrics?.stream_setup_ms ?? 0) > 0 ||
                 (metrics?.tool_loop_ms ?? 0) > 0) && (
                 <div style={{ marginBottom: '16px' }}>
-                  <div style={{ fontSize: '11px', color: '#888', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
+                  <div style={{ fontSize: '11px', color: 'var(--rah-text-muted)', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
                     Latency Breakdown
                   </div>
-                  <div style={{ fontSize: '11px', color: '#ccc', display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+                  <div style={{ fontSize: '11px', color: 'var(--rah-text-secondary)', display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
                     {(metricsSafe.prompt_build_ms ?? 0) > 0 && <span>prompt {metricsSafe.prompt_build_ms}ms</span>}
                     {(metricsSafe.tools_build_ms ?? 0) > 0 && <span>tools {metricsSafe.tools_build_ms}ms</span>}
                     {(metricsSafe.model_resolve_ms ?? 0) > 0 && <span>model {metricsSafe.model_resolve_ms}ms</span>}
@@ -224,10 +224,10 @@ export default function LogsRow({ log, isEven }: LogsRowProps) {
               )}
               {Array.isArray(metrics?.tool_timings) && metrics.tool_timings.length > 0 && (
                 <div style={{ marginBottom: '16px' }}>
-                  <div style={{ fontSize: '11px', color: '#888', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
+                  <div style={{ fontSize: '11px', color: 'var(--rah-text-muted)', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
                     Tool Timings
                   </div>
-                  <div style={{ fontSize: '11px', color: '#ccc', display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+                  <div style={{ fontSize: '11px', color: 'var(--rah-text-secondary)', display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
                     {metrics.tool_timings.map((tool: any, index: number) => (
                       <span key={`${tool.toolName || 'tool'}-${index}`}>
                         {tool.toolName || 'tool'} {tool.durationMs ?? 0}ms
@@ -238,15 +238,15 @@ export default function LogsRow({ log, isEven }: LogsRowProps) {
               )}
               {Array.isArray(metrics?.tools_used) && metrics.tools_used.length > 0 && (
                 <div style={{ marginBottom: '16px' }}>
-                  <div style={{ fontSize: '11px', color: '#888', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
+                  <div style={{ fontSize: '11px', color: 'var(--rah-text-muted)', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
                     Tools Used
                   </div>
-                  <div style={{ fontSize: '11px', color: '#ccc' }}>
+                  <div style={{ fontSize: '11px', color: 'var(--rah-text-secondary)' }}>
                     {metrics.tools_used.join(', ')}
                   </div>
                 </div>
               )}
-              <div style={{ fontSize: '11px', color: '#888', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
+              <div style={{ fontSize: '11px', color: 'var(--rah-text-muted)', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
                 Snapshot JSON
               </div>
               <pre
@@ -263,10 +263,10 @@ export default function LogsRow({ log, isEven }: LogsRowProps) {
             </div>
             {log.enriched_summary && (
               <div>
-                <div style={{ fontSize: '11px', color: '#888', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
+                <div style={{ fontSize: '11px', color: 'var(--rah-text-muted)', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
                   Enriched Summary
                 </div>
-                <div style={{ fontSize: '12px', color: '#ccc', lineHeight: '1.6' }}>
+                <div style={{ fontSize: '12px', color: 'var(--rah-text-secondary)', lineHeight: '1.6' }}>
                   {log.enriched_summary}
                 </div>
               </div>
diff --git a/src/components/settings/LogsViewer.tsx b/src/components/settings/LogsViewer.tsx
index 68d3a16..cb8a44e 100644
--- a/src/components/settings/LogsViewer.tsx
+++ b/src/components/settings/LogsViewer.tsx
@@ -90,7 +90,7 @@ export default function LogsViewer() {
 
   if (loading) {
     return (
-      <div style={{ padding: '40px', textAlign: 'center', color: '#888' }}>
+      <div style={{ padding: '40px', textAlign: 'center', color: 'var(var(--rah-text-muted))' }}>
         Loading logs...
       </div>
     );
@@ -106,7 +106,7 @@ export default function LogsViewer() {
 
   if (logs.length === 0) {
     return (
-      <div style={{ padding: '40px', textAlign: 'center', color: '#888' }}>
+      <div style={{ padding: '40px', textAlign: 'center', color: 'var(var(--rah-text-muted))' }}>
         No logs found
       </div>
     );
diff --git a/src/components/settings/SettingsModal.tsx b/src/components/settings/SettingsModal.tsx
index eb125d3..7eec010 100644
--- a/src/components/settings/SettingsModal.tsx
+++ b/src/components/settings/SettingsModal.tsx
@@ -68,8 +68,8 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
         style={{
           width: '80vw',
           height: '85vh',
-          background: '#0f0f0f',
-          border: '1px solid #2a2a2a',
+          background: 'var(--rah-bg-surface)',
+          border: '1px solid var(--rah-border-strong)',
           borderRadius: '8px',
           boxShadow: '0 8px 32px rgba(0, 0, 0, 0.6)',
           display: 'flex',
@@ -81,8 +81,8 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
         <div
           style={{
             width: '20%',
-            background: '#0a0a0a',
-            borderRight: '1px solid #2a2a2a',
+            background: 'var(--rah-bg-base)',
+            borderRight: '1px solid var(--rah-border-strong)',
             display: 'flex',
             flexDirection: 'column',
             padding: '24px 0'
@@ -94,7 +94,7 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
               marginBottom: '24px',
               fontSize: '18px',
               fontWeight: '600',
-              color: '#fff'
+              color: 'var(--rah-text-active)'
             }}
           >
             Settings
@@ -105,8 +105,8 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
               style={{
                 padding: '12px 24px',
                 fontSize: '14px',
-                color: activeTab === 'logs' ? '#fff' : '#888',
-                background: activeTab === 'logs' ? '#1a3a2a' : 'transparent',
+                color: activeTab === 'logs' ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
+                background: activeTab === 'logs' ? '#1a3a2a' : 'transparent', // semantic active state kept
                 borderLeft: activeTab === 'logs' ? '3px solid #22c55e' : '3px solid transparent',
                 cursor: 'pointer',
                 transition: 'all 0.2s'
@@ -119,7 +119,7 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
               style={{
                 padding: '12px 24px',
                 fontSize: '14px',
-                color: activeTab === 'tools' ? '#fff' : '#888',
+                color: activeTab === 'tools' ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
                 background: activeTab === 'tools' ? '#1a3a2a' : 'transparent',
                 borderLeft: activeTab === 'tools' ? '3px solid #22c55e' : '3px solid transparent',
                 cursor: 'pointer',
@@ -133,7 +133,7 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
               style={{
                 padding: '12px 24px',
                 fontSize: '14px',
-                color: activeTab === 'guides' ? '#fff' : '#888',
+                color: activeTab === 'guides' ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
                 background: activeTab === 'guides' ? '#1a3a2a' : 'transparent',
                 borderLeft: activeTab === 'guides' ? '3px solid #22c55e' : '3px solid transparent',
                 cursor: 'pointer',
@@ -147,7 +147,7 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
               style={{
                 padding: '12px 24px',
                 fontSize: '14px',
-                color: activeTab === 'apikeys' ? '#fff' : '#888',
+                color: activeTab === 'apikeys' ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
                 background: activeTab === 'apikeys' ? '#1a3a2a' : 'transparent',
                 borderLeft: activeTab === 'apikeys' ? '3px solid #22c55e' : '3px solid transparent',
                 cursor: 'pointer',
@@ -161,7 +161,7 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
               style={{
                 padding: '12px 24px',
                 fontSize: '14px',
-                color: activeTab === 'database' ? '#fff' : '#888',
+                color: activeTab === 'database' ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
                 background: activeTab === 'database' ? '#1a3a2a' : 'transparent',
                 borderLeft: activeTab === 'database' ? '3px solid #22c55e' : '3px solid transparent',
                 cursor: 'pointer',
@@ -175,7 +175,7 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
               style={{
                 padding: '12px 24px',
                 fontSize: '14px',
-                color: activeTab === 'context' ? '#fff' : '#888',
+                color: activeTab === 'context' ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
                 background: activeTab === 'context' ? '#1a3a2a' : 'transparent',
                 borderLeft: activeTab === 'context' ? '3px solid #22c55e' : '3px solid transparent',
                 cursor: 'pointer',
@@ -189,7 +189,7 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
               style={{
                 padding: '12px 24px',
                 fontSize: '14px',
-                color: activeTab === 'agents' ? '#fff' : '#888',
+                color: activeTab === 'agents' ? 'var(--rah-text-active)' : 'var(--rah-text-muted)',
                 background: activeTab === 'agents' ? '#1a3a2a' : 'transparent',
                 borderLeft: activeTab === 'agents' ? '3px solid #22c55e' : '3px solid transparent',
                 cursor: 'pointer',
@@ -202,7 +202,7 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
               style={{
                 padding: '12px 24px',
                 fontSize: '14px',
-                color: '#888',
+                color: 'var(--rah-text-muted)',
                 opacity: 0.4,
                 cursor: 'not-allowed'
               }}
@@ -213,7 +213,7 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
               style={{
                 padding: '12px 24px',
                 fontSize: '14px',
-                color: '#888',
+                color: 'var(--rah-text-muted)',
                 opacity: 0.4,
                 cursor: 'not-allowed'
               }}
@@ -226,7 +226,7 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
             style={{
               marginTop: 'auto',
               padding: '24px',
-              borderTop: '1px solid #1f2937',
+              borderTop: '1px solid var(--rah-border)',
               display: 'flex',
               flexDirection: 'column',
               gap: '12px'
@@ -268,7 +268,7 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
           <div
             style={{
               padding: '16px 24px',
-              borderBottom: '1px solid #2a2a2a',
+              borderBottom: '1px solid var(--rah-border-strong)',
               display: 'flex',
               justifyContent: 'space-between',
               alignItems: 'center'
@@ -279,7 +279,7 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
                 margin: 0,
                 fontSize: '16px',
                 fontWeight: '600',
-                color: '#fff'
+                color: 'var(--rah-text-active)'
               }}
             >
               {activeTab === 'logs' && 'System Logs'}
@@ -295,7 +295,7 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
               style={{
                 background: 'transparent',
                 border: 'none',
-                color: '#888',
+                color: 'var(--rah-text-muted)',
                 cursor: 'pointer',
                 fontSize: '24px',
                 lineHeight: 1,
@@ -303,10 +303,10 @@ export default function SettingsModal({ isOpen, onClose, initialTab }: SettingsM
                 transition: 'color 0.2s'
               }}
               onMouseEnter={(e) => {
-                e.currentTarget.style.color = '#fff';
+                e.currentTarget.style.color = 'var(--rah-text-active)';
               }}
               onMouseLeave={(e) => {
-                e.currentTarget.style.color = '#888';
+                e.currentTarget.style.color = 'var(--rah-text-muted)';
               }}
               title="Close (ESC)"
             >
diff --git a/src/components/views/DatabaseTableView.tsx b/src/components/views/DatabaseTableView.tsx
index 097fe44..90e9d71 100644
--- a/src/components/views/DatabaseTableView.tsx
+++ b/src/components/views/DatabaseTableView.tsx
@@ -175,13 +175,13 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
           <div style={{
             display: 'flex',
             alignItems: 'center',
-            background: '#0d0d0d',
-            border: '1px solid #222',
+            background: 'var(var(--rah-bg-surface))',
+            border: '1px solid var(--rah-border-strong)',
             borderRadius: '6px',
             padding: '0 8px',
             gap: '6px',
           }}>
-            <Search size={12} style={{ color: '#555', flexShrink: 0 }} />
+            <Search size={12} style={{ color: 'var(var(--rah-text-muted))', flexShrink: 0 }} />
             <input
               type="text"
               value={searchQuery}
@@ -190,7 +190,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
               style={{
                 background: 'transparent',
                 border: 'none',
-                color: '#f0f0f0',
+                color: 'var(var(--rah-text-active))',
                 fontSize: '12px',
                 padding: '5px 0',
                 outline: 'none',
@@ -201,7 +201,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
               <button
                 type="button"
                 onClick={() => { setSearchQuery(''); setActiveSearch(''); }}
-                style={{ background: 'transparent', border: 'none', color: '#555', cursor: 'pointer', padding: 0, display: 'flex' }}
+                style={{ background: 'transparent', border: 'none', color: 'var(var(--rah-text-muted))', cursor: 'pointer', padding: 0, display: 'flex' }}
               >
                 <X size={11} />
               </button>
@@ -236,8 +236,8 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
               style={{
                 display: 'flex', alignItems: 'center', gap: '4px',
                 padding: '4px 7px', background: 'transparent',
-                border: '1px solid #222', borderRadius: '5px',
-                color: '#888', fontSize: '11px', cursor: 'pointer',
+                border: '1px solid var(--rah-border-strong)', borderRadius: '5px',
+                color: 'var(var(--rah-text-muted))', fontSize: '11px', cursor: 'pointer',
               }}
               onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; }}
               onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
@@ -249,7 +249,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
             {showFilterPicker && (
               <div style={{
                 position: 'absolute', top: '100%', left: 0, marginTop: '4px',
-                background: '#141414', border: '1px solid #222', borderRadius: '10px',
+                background: 'var(var(--rah-bg-panel))', border: '1px solid var(--rah-border-strong)', borderRadius: '10px',
                 padding: '6px', minWidth: '220px', maxHeight: '320px', overflowY: 'auto',
                 zIndex: 1000, boxShadow: '0 8px 24px rgba(0,0,0,0.4)',
               }}>
@@ -260,13 +260,13 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
                   placeholder="Search dimensions..."
                   autoFocus
                   style={{
-                    width: '100%', padding: '7px 10px', background: '#0d0d0d',
+                    width: '100%', padding: '7px 10px', background: 'var(var(--rah-bg-surface))',
                     border: '1px solid transparent', borderRadius: '6px',
-                    color: '#f0f0f0', fontSize: '12px', marginBottom: '4px', outline: 'none',
+                    color: 'var(var(--rah-text-active))', fontSize: '12px', marginBottom: '4px', outline: 'none',
                   }}
                 />
                 {filterPickerDimensions.length === 0 ? (
-                  <div style={{ padding: '12px', color: '#666', fontSize: '12px', textAlign: 'center' }}>
+                  <div style={{ padding: '12px', color: 'var(var(--rah-text-muted))', fontSize: '12px', textAlign: 'center' }}>
                     No matching dimensions
                   </div>
                 ) : (
@@ -283,14 +283,14 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
                       style={{
                         display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                         width: '100%', padding: '7px 10px', background: 'transparent',
-                        border: 'none', borderRadius: '5px', color: '#ccc',
+                        border: 'none', borderRadius: '5px', color: 'var(var(--rah-text-secondary))',
                         fontSize: '12px', cursor: 'pointer', textAlign: 'left',
                       }}
                       onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; }}
                       onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
                     >
                       <span>{d.dimension}</span>
-                      <span style={{ color: '#555', fontSize: '10px', background: '#1a1a1a', padding: '1px 6px', borderRadius: '10px' }}>
+                      <span style={{ color: 'var(var(--rah-text-muted))', fontSize: '10px', background: 'var(var(--rah-bg-active))', padding: '1px 6px', borderRadius: '10px' }}>
                         {d.count}
                       </span>
                     </button>
@@ -303,7 +303,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
           {selectedFilters.length > 0 && (
             <button
               onClick={() => setSelectedFilters([])}
-              style={{ padding: '4px 6px', background: 'transparent', border: 'none', color: '#666', fontSize: '11px', cursor: 'pointer' }}
+              style={{ padding: '4px 6px', background: 'transparent', border: 'none', color: 'var(var(--rah-text-muted))', fontSize: '11px', cursor: 'pointer' }}
               onMouseEnter={(e) => { e.currentTarget.style.color = '#ef4444'; }}
               onMouseLeave={(e) => { e.currentTarget.style.color = '#666'; }}
             >
@@ -319,8 +319,8 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
             style={{
               display: 'flex', alignItems: 'center', gap: '4px',
               padding: '4px 7px', background: 'transparent',
-              border: '1px solid #222', borderRadius: '5px',
-              color: '#888', fontSize: '11px', cursor: 'pointer', whiteSpace: 'nowrap',
+              border: '1px solid var(--rah-border-strong)', borderRadius: '5px',
+              color: 'var(var(--rah-text-muted))', fontSize: '11px', cursor: 'pointer', whiteSpace: 'nowrap',
             }}
             onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; }}
             onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
@@ -333,7 +333,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
           {showSortDropdown && (
             <div style={{
               position: 'absolute', top: '100%', right: 0, marginTop: '4px',
-              background: '#141414', border: '1px solid #222', borderRadius: '10px',
+              background: 'var(var(--rah-bg-panel))', border: '1px solid var(--rah-border-strong)', borderRadius: '10px',
               padding: '4px', minWidth: '160px', zIndex: 1000,
               boxShadow: '0 8px 24px rgba(0,0,0,0.4)',
             }}>
@@ -363,14 +363,14 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
         {/* Pagination */}
         <div style={{
           display: 'flex', alignItems: 'center', gap: '6px',
-          fontSize: '11px', color: '#666', whiteSpace: 'nowrap',
+          fontSize: '11px', color: 'var(var(--rah-text-muted))', whiteSpace: 'nowrap',
         }}>
           <span>{total > 0 ? `${startItem}-${endItem} of ${total}` : '0 nodes'}</span>
           <button
             onClick={() => setPage(p => Math.max(1, p - 1))}
             disabled={page <= 1}
             style={{
-              background: 'transparent', border: '1px solid #222', borderRadius: '4px',
+              background: 'transparent', border: '1px solid var(--rah-border-strong)', borderRadius: '4px',
               color: page <= 1 ? '#333' : '#888', cursor: page <= 1 ? 'default' : 'pointer',
               padding: '2px 4px', display: 'flex',
             }}
@@ -381,7 +381,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
             onClick={() => setPage(p => Math.min(totalPages, p + 1))}
             disabled={page >= totalPages}
             style={{
-              background: 'transparent', border: '1px solid #222', borderRadius: '4px',
+              background: 'transparent', border: '1px solid var(--rah-border-strong)', borderRadius: '4px',
               color: page >= totalPages ? '#333' : '#888',
               cursor: page >= totalPages ? 'default' : 'pointer',
               padding: '2px 4px', display: 'flex',
@@ -398,7 +398,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
       {toolbarHost ? createPortal(toolbar, toolbarHost) : (
         <div style={{
           padding: '8px 12px',
-          borderBottom: '1px solid #1a1a1a',
+          borderBottom: '1px solid var(--rah-border)',
           display: 'flex',
           alignItems: 'center',
           gap: '8px',
@@ -410,9 +410,9 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
       {/* Table */}
       <div style={{ flex: 1, overflow: 'auto' }}>
         {loading ? (
-          <div style={{ padding: '40px', color: '#666', textAlign: 'center', fontSize: '13px' }}>Loading...</div>
+          <div style={{ padding: '40px', color: 'var(var(--rah-text-muted))', textAlign: 'center', fontSize: '13px' }}>Loading...</div>
         ) : nodes.length === 0 ? (
-          <div style={{ padding: '40px', color: '#666', textAlign: 'center', fontSize: '13px' }}>
+          <div style={{ padding: '40px', color: 'var(var(--rah-text-muted))', textAlign: 'center', fontSize: '13px' }}>
             {activeSearch || selectedFilters.length > 0 ? 'No nodes match your filters.' : 'No nodes yet.'}
           </div>
         ) : (
@@ -468,7 +468,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
                     <td style={tdStyle({ textAlign: 'right' })}>
                       <span style={{
                         fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
-                        fontSize: '11px', color: '#555',
+                        fontSize: '11px', color: 'var(var(--rah-text-muted))',
                       }}>
                         {node.id}
                       </span>
@@ -477,7 +477,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
                     {/* Description */}
                     <td style={tdStyle()}>
                       <div style={truncCell}>
-                        <span style={{ fontSize: '11px', color: '#888' }}>
+                        <span style={{ fontSize: '11px', color: 'var(var(--rah-text-muted))' }}>
                           {node.description || '\u2014'}
                         </span>
                       </div>
@@ -486,7 +486,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
                     {/* Notes */}
                     <td style={tdStyle()}>
                       <div style={truncCell}>
-                        <span style={{ fontSize: '11px', color: '#888' }}>
+                        <span style={{ fontSize: '11px', color: 'var(var(--rah-text-muted))' }}>
                           {node.notes ? node.notes.slice(0, 120) : '\u2014'}
                         </span>
                       </div>
@@ -524,7 +524,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
                               </span>
                             ))}
                             {node.dimensions.length > 3 && (
-                              <span style={{ fontSize: '9px', color: '#555' }}>
+                              <span style={{ fontSize: '9px', color: 'var(var(--rah-text-muted))' }}>
                                 +{node.dimensions.length - 3}
                               </span>
                             )}
@@ -551,14 +551,14 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
 
                     {/* Updated */}
                     <td style={tdStyle()}>
-                      <span style={{ fontSize: '11px', color: '#666' }}>
+                      <span style={{ fontSize: '11px', color: 'var(var(--rah-text-muted))' }}>
                         {formatRelativeTime(node.updated_at)}
                       </span>
                     </td>
 
                     {/* Created */}
                     <td style={tdStyle()}>
-                      <span style={{ fontSize: '11px', color: '#666' }}>
+                      <span style={{ fontSize: '11px', color: 'var(var(--rah-text-muted))' }}>
                         {formatRelativeTime(node.created_at)}
                       </span>
                     </td>
@@ -566,7 +566,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
                     {/* Metadata */}
                     <td style={tdStyle()}>
                       <div style={truncCell}>
-                        <span style={{ fontSize: '10px', color: '#555', fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace' }}>
+                        <span style={{ fontSize: '10px', color: 'var(var(--rah-text-muted))', fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace' }}>
                           {metaStr || '\u2014'}
                         </span>
                       </div>
@@ -575,7 +575,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
                     {/* Chunk */}
                     <td style={tdStyle()}>
                       <div style={truncCell}>
-                        <span style={{ fontSize: '10px', color: '#555' }}>
+                        <span style={{ fontSize: '10px', color: 'var(var(--rah-text-muted))' }}>
                           {node.chunk ? node.chunk.slice(0, 100) : '\u2014'}
                         </span>
                       </div>
@@ -593,7 +593,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
 
                     {/* Embedding Updated */}
                     <td style={tdStyle()}>
-                      <span style={{ fontSize: '11px', color: '#666' }}>
+                      <span style={{ fontSize: '11px', color: 'var(var(--rah-text-muted))' }}>
                         {node.embedding_updated_at ? formatRelativeTime(node.embedding_updated_at) : '\u2014'}
                       </span>
                     </td>
@@ -612,11 +612,11 @@ function thStyle(extra: React.CSSProperties = {}): React.CSSProperties {
   return {
     position: 'sticky' as const,
     top: 0,
-    background: '#0a0a0a',
+    background: 'var(var(--rah-bg-base))',
     padding: '8px 12px',
     fontSize: '10px',
     fontWeight: 500,
-    color: '#555',
+    color: 'var(var(--rah-text-muted))',
     textAlign: 'left',
     letterSpacing: '0.05em',
     whiteSpace: 'nowrap',
diff --git a/src/components/views/ViewsOverlay.tsx b/src/components/views/ViewsOverlay.tsx
index 0caa2df..cd284fc 100644
--- a/src/components/views/ViewsOverlay.tsx
+++ b/src/components/views/ViewsOverlay.tsx
@@ -44,7 +44,7 @@ function PendingNodeCard({ pending, onDismiss }: { pending: PendingNode; onDismi
     <div style={{
       padding: '10px 12px',
       background: 'transparent',
-      borderBottom: '1px solid #141414',
+      borderBottom: '1px solid var(--rah-bg-panel)',
       borderLeft: `3px solid ${isError ? '#ef4444' : '#22c55e'}`,
       opacity: 0.8,
     }}>
@@ -53,7 +53,7 @@ function PendingNodeCard({ pending, onDismiss }: { pending: PendingNode; onDismi
           width: '32px',
           height: '32px',
           borderRadius: '8px',
-          background: '#141414',
+          background: 'var(var(--rah-bg-panel))',
           border: `1px solid ${isError ? 'rgba(239,68,68,0.3)' : '#1f1f1f'}`,
           display: 'flex',
           alignItems: 'center',
@@ -81,7 +81,7 @@ function PendingNodeCard({ pending, onDismiss }: { pending: PendingNode; onDismi
           </div>
           <div style={{
             fontSize: '11px',
-            color: '#555',
+            color: 'var(var(--rah-text-muted))',
             marginTop: '2px',
             whiteSpace: 'nowrap',
             overflow: 'hidden',
@@ -97,7 +97,7 @@ function PendingNodeCard({ pending, onDismiss }: { pending: PendingNode; onDismi
               padding: '4px',
               background: 'transparent',
               border: 'none',
-              color: '#555',
+              color: 'var(var(--rah-text-muted))',
               cursor: 'pointer',
               borderRadius: '4px',
               display: 'flex',
@@ -421,7 +421,7 @@ export default function ViewsOverlay({
           background: 'transparent',
           cursor: 'pointer',
           transition: 'all 0.15s ease',
-          borderBottom: '1px solid #141414',
+          borderBottom: '1px solid var(--rah-bg-panel)',
           borderLeft: '3px solid transparent',
           opacity: isDragSource ? 0.4 : 1,
           borderTop: isDropTarget ? '2px solid #22c55e' : '2px solid transparent',
@@ -476,8 +476,8 @@ export default function ViewsOverlay({
             width: '32px',
             height: '32px',
             borderRadius: '8px',
-            background: '#141414',
-            border: '1px solid #1f1f1f',
+            background: 'var(var(--rah-bg-panel))',
+            border: '1px solid var(--rah-bg-active)',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
@@ -495,7 +495,7 @@ export default function ViewsOverlay({
               <span style={{
                 fontSize: '13px',
                 fontWeight: 500,
-                color: '#f0f0f0',
+                color: 'var(var(--rah-text-active))',
                 whiteSpace: 'nowrap',
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
@@ -507,7 +507,7 @@ export default function ViewsOverlay({
               {node.edge_count != null && node.edge_count > 0 && (
                 <span style={{
                   fontSize: '10px',
-                  color: '#555',
+                  color: 'var(var(--rah-text-muted))',
                   display: 'flex',
                   alignItems: 'center',
                   gap: '2px',
@@ -520,7 +520,7 @@ export default function ViewsOverlay({
               <span style={{
                 fontSize: '10px',
                 color: '#444',
-                background: '#141414',
+                background: 'var(var(--rah-bg-panel))',
                 padding: '2px 6px',
                 borderRadius: '4px',
                 fontFamily: 'monospace',
@@ -532,7 +532,7 @@ export default function ViewsOverlay({
             {descPreview && (
               <div style={{
                 fontSize: '11px',
-                color: '#666',
+                color: 'var(var(--rah-text-muted))',
                 lineHeight: '1.4',
                 marginBottom: '4px',
                 overflow: 'hidden',
@@ -564,7 +564,7 @@ export default function ViewsOverlay({
                     </span>
                   ))}
                   {node.dimensions.length > 3 && (
-                    <span style={{ fontSize: '9px', color: '#555' }}>
+                    <span style={{ fontSize: '9px', color: 'var(var(--rah-text-muted))' }}>
                       +{node.dimensions.length - 3}
                     </span>
                   )}
@@ -622,7 +622,7 @@ export default function ViewsOverlay({
           ))}
 
           {externalDimensionFilter && (
-            <span style={{ fontSize: '11px', color: '#666' }}>
+            <span style={{ fontSize: '11px', color: 'var(var(--rah-text-muted))' }}>
               Sidebar filter
             </span>
           )}
@@ -641,7 +641,7 @@ export default function ViewsOverlay({
                 gap: '4px',
                 padding: '4px 8px',
                 background: 'transparent',
-                border: '1px solid #222',
+                border: '1px solid var(--rah-border-strong)',
                 borderRadius: '5px',
                 color: externalDimensionFilter ? '#4b4b4b' : '#888',
                 fontSize: '11px',
@@ -670,8 +670,8 @@ export default function ViewsOverlay({
                 top: '100%',
                 left: 0,
                 marginTop: '4px',
-                background: '#141414',
-                border: '1px solid #222',
+                background: 'var(var(--rah-bg-panel))',
+                border: '1px solid var(--rah-border-strong)',
                 borderRadius: '10px',
                 padding: '6px',
                 minWidth: '220px',
@@ -689,10 +689,10 @@ export default function ViewsOverlay({
                   style={{
                     width: '100%',
                     padding: '7px 10px',
-                    background: '#0d0d0d',
+                    background: 'var(var(--rah-bg-surface))',
                     border: '1px solid transparent',
                     borderRadius: '6px',
-                    color: '#f0f0f0',
+                    color: 'var(var(--rah-text-active))',
                     fontSize: '12px',
                     marginBottom: '4px',
                     outline: 'none',
@@ -701,11 +701,11 @@ export default function ViewsOverlay({
                   onBlur={(e) => { e.currentTarget.style.borderColor = 'transparent'; }}
                 />
                 {dimensionsLoading ? (
-                  <div style={{ padding: '12px', color: '#666', fontSize: '12px', textAlign: 'center' }}>
+                  <div style={{ padding: '12px', color: 'var(var(--rah-text-muted))', fontSize: '12px', textAlign: 'center' }}>
                     Loading dimensions...
                   </div>
                 ) : filterPickerDimensions.length === 0 ? (
-                  <div style={{ padding: '12px', color: '#666', fontSize: '12px', textAlign: 'center' }}>
+                  <div style={{ padding: '12px', color: 'var(var(--rah-text-muted))', fontSize: '12px', textAlign: 'center' }}>
                     {filterSearchQuery ? 'No matching dimensions' : 'No dimensions available'}
                   </div>
                 ) : (
@@ -722,7 +722,7 @@ export default function ViewsOverlay({
                         background: 'transparent',
                         border: 'none',
                         borderRadius: '5px',
-                        color: '#ccc',
+                        color: 'var(var(--rah-text-secondary))',
                         fontSize: '12px',
                         cursor: 'pointer',
                         textAlign: 'left'
@@ -732,9 +732,9 @@ export default function ViewsOverlay({
                     >
                       <span>{d.dimension}</span>
                       <span style={{
-                        color: '#555',
+                        color: 'var(var(--rah-text-muted))',
                         fontSize: '10px',
-                        background: '#1a1a1a',
+                        background: 'var(var(--rah-bg-active))',
                         padding: '1px 6px',
                         borderRadius: '10px',
                       }}>
@@ -754,7 +754,7 @@ export default function ViewsOverlay({
                 padding: '4px 8px',
                 background: 'transparent',
                 border: 'none',
-                color: '#666',
+                color: 'var(var(--rah-text-muted))',
                 fontSize: '11px',
                 cursor: 'pointer'
               }}
@@ -776,9 +776,9 @@ export default function ViewsOverlay({
               gap: '4px',
               padding: '5px 8px',
               background: 'transparent',
-              border: '1px solid #222',
+              border: '1px solid var(--rah-border-strong)',
               borderRadius: '5px',
-              color: '#888',
+              color: 'var(var(--rah-text-muted))',
               fontSize: '11px',
               cursor: 'pointer',
               transition: 'all 0.15s ease',
@@ -804,8 +804,8 @@ export default function ViewsOverlay({
               top: '100%',
               right: 0,
               marginTop: '4px',
-              background: '#141414',
-              border: '1px solid #222',
+              background: 'var(var(--rah-bg-panel))',
+              border: '1px solid var(--rah-border-strong)',
               borderRadius: '10px',
               padding: '4px',
               minWidth: '140px',
@@ -856,7 +856,7 @@ export default function ViewsOverlay({
       {toolbarHost ? createPortal(toolbar, toolbarHost) : (
         <div style={{
           padding: '10px 16px',
-          borderBottom: '1px solid #1a1a1a',
+          borderBottom: '1px solid var(--rah-border)',
           display: 'flex',
           alignItems: 'center',
           gap: '10px',
@@ -868,11 +868,11 @@ export default function ViewsOverlay({
 
       {/* Content area — list view */}
       {filteredNodesLoading ? (
-        <div style={{ padding: '40px', color: '#888', textAlign: 'center' }}>
+        <div style={{ padding: '40px', color: 'var(var(--rah-text-muted))', textAlign: 'center' }}>
           Loading...
         </div>
       ) : filteredNodes.length === 0 ? (
-        <div style={{ padding: '40px', color: '#888', textAlign: 'center' }}>
+        <div style={{ padding: '40px', color: 'var(var(--rah-text-muted))', textAlign: 'center' }}>
           {selectedFilters.length > 0 ? 'No nodes match the selected filters.' : 'No nodes yet. Add some content to get started.'}
         </div>
       ) : (