fix: sync light mode readability improvements

- replace hardcoded dark colors in shared light mode components
- fix focused skill and inline node label readability in light mode

Generated with Codex

src/components/helpers/MarkdownRenderer.tsx

@@ -14,7 +14,7 @@ export default function MarkdownRenderer({ content, streaming, onNodeClick }: Ma
 
   const segments = splitCodeBlocks(content);
   return (
-    <div style={{ color: '#e5e5e5', fontSize: 16, lineHeight: 1.7, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+    <div style={{ color: 'var(--rah-text-base)', fontSize: 16, lineHeight: 1.7, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
       {segments.map((seg, i) =>
         seg.type === 'code' ? (
           <CodeBlock key={i} language={seg.lang} code={seg.text} />
@@ -41,12 +41,12 @@ function CodeBlock({ code, language }: { code: string; language?: string }) {
   return (
     <div style={{ margin: '8px 0' }}>
       <div style={{
-        background: '#0f0f0f', border: '1px solid #2a2a2a', borderRadius: 6,
+        background: 'var(--rah-bg-base)', border: '1px solid var(--rah-border-strong)', borderRadius: 6,
         padding: 8, overflowX: 'auto', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: 12
       }}>
         <div style={{ display: 'flex', alignItems: 'center', marginBottom: 6 }}>
-          <span style={{ color: '#8a8a8a', fontSize: 11 }}>{language || 'code'}</span>
-          <button onClick={handleCopy} style={{ marginLeft: 'auto', fontSize: 11, color: '#8a8a8a', background: 'transparent', border: '1px solid #2a2a2a', borderRadius: 4, padding: '1px 6px', cursor: 'pointer' }}>
+          <span style={{ color: 'var(--rah-text-soft)', fontSize: 11 }}>{language || 'code'}</span>
+          <button onClick={handleCopy} style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--rah-text-soft)', background: 'transparent', border: '1px solid var(--rah-border-strong)', borderRadius: 4, padding: '1px 6px', cursor: 'pointer' }}>
             {copied ? 'Copied' : 'Copy'}
           </button>
         </div>
@@ -68,10 +68,10 @@ function renderTextWithFormatting(text: string, onNodeClick?: (nodeId: number) =
         <div key={`quote-${segIdx}`} style={{
           margin: '12px 0',
           padding: '10px 14px',
-          borderLeft: '3px solid #333',
-          background: '#0f0f0f',
+          borderLeft: '3px solid var(--rah-border-strong)',
+          background: 'var(--rah-bg-base)',
           fontStyle: 'italic',
-          color: '#b8b8b8',
+          color: 'var(--rah-text-secondary)',
           position: 'relative'
         }}>
           <span style={{ 
@@ -79,7 +79,7 @@ function renderTextWithFormatting(text: string, onNodeClick?: (nodeId: number) =
             top: 8, 
             left: 8, 
             fontSize: 24, 
-            color: '#3a3a3a',
+            color: 'var(--rah-border-stronger)',
             lineHeight: 1
           }}>"</span>
           <div style={{ paddingLeft: 12 }}>
@@ -155,10 +155,10 @@ function parseInlineFormatting(text: string, onNodeClick?: (nodeId: number) => v
         <strong key={`bold-${idx}`} style={{ 
           fontWeight: 600,
           textDecoration: 'underline',
-          textDecorationColor: '#4a4a4a',
+          textDecorationColor: 'var(--rah-border-stronger)',
           textDecorationThickness: '1px',
           textUnderlineOffset: '2px',
-          color: '#f0f0f0'
+          color: 'var(--rah-text-active)'
         }}>
           {parseAndRenderContent(part.text, onNodeClick)}
         </strong>

src/components/helpers/NodeLabelRenderer.tsx

@@ -51,7 +51,7 @@ function NodeLabel({ id, title, dimensions, onNodeClick }: NodeLabelProps) {
       <span style={{
         fontWeight: 'bold',
         textDecoration: 'underline',
-        color: '#e5e5e5'
+        color: 'var(--rah-text-base)'
       }}>
         {truncatedTitle}
       </span>

src/components/helpers/SourceChip.tsx

@@ -25,12 +25,12 @@ export default function SourceChip({ url, domain }: SourceChipProps) {
         display: 'inline-flex',
         alignItems: 'center',
         gap: 6,
-        background: '#1a1a1a',
-        border: '1px solid #2a2a2a',
+        background: 'var(--rah-bg-panel)',
+        border: '1px solid var(--rah-border)',
         borderRadius: 999,
         padding: '2px 8px',
         fontSize: 11,
-        color: '#bdbdbd',
+        color: 'var(--rah-text-secondary)',
         lineHeight: 1
       }}
     >