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>
       ) : (