six-degrees 0.6.0 → 0.7.0

package/.next/standalone/app/components/Sidebar.js

@@ -82,12 +82,12 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
           onClick={() => onSelect && onSelect(null)}
           style={{
             display: 'flex', alignItems: 'center', gap: 6, background: 'none', border: 'none',
-            color: '#888', fontSize: 12, cursor: 'pointer', padding: '0 0 10px', fontWeight: 600,
+            color: 'var(--sd-fg-3, #888)', fontSize: 12, cursor: 'pointer', padding: '0 0 10px', fontWeight: 600,
           }}
         >
           <span style={{ fontSize: 16 }}>&larr;</span> Back to list
         </button>
-        <div style={{ fontSize: 10, color: '#888', marginBottom: 8, letterSpacing: 1, textTransform: 'uppercase' }}>
+        <div style={{ fontSize: 10, color: 'var(--sd-fg-3, #888)', marginBottom: 8, letterSpacing: 1, textTransform: 'uppercase' }}>
           {selected.degree === 2 ? 'Degree 2 Connection' : 'Degree 1 Connection'}
         </div>
         <div style={{ display: 'flex', gap: 6, marginBottom: 8, flexWrap: 'wrap' }}>
@@ -108,7 +108,7 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
             fontSize: 11.5, color: '#8fb8d6', lineHeight: 1.5,
           }}>
             {selected.degree === 1 ? 'You met them through ' : 'Reachable through '}
-            <b style={{ color: '#cfe6f7' }}>{selected.unlocked_from_name}</b>
+            <b style={{ color: 'var(--sd-fg-1, #cfe6f7)' }}>{selected.unlocked_from_name}</b>
           </div>
         )}
 
@@ -136,13 +136,13 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
             background: tierColors[selected.tier] || '#555',
             display: localPhoto(selected.profile_image_url) ? 'none' : 'flex',
             alignItems: 'center', justifyContent: 'center',
-            fontSize: 20, fontWeight: 700, color: selected.tier === 'S' ? '#000' : '#fff',
+            fontSize: 20, fontWeight: 700, color: selected.tier === 'S' ? '#000' : 'var(--sd-fg-1, #fff)',
           }}>
             {selected.name?.charAt(0)}
           </div>
           <div style={{ minWidth: 0 }}>
             <h2 style={{ fontSize: 18, fontWeight: 700, margin: 0 }}>{selected.name}</h2>
-            <p style={{ color: '#aaa', fontSize: 11, margin: '3px 0 0', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{selected.headline?.substring(0, 60)}</p>
+            <p style={{ color: 'var(--sd-fg-3, #aaa)', fontSize: 11, margin: '3px 0 0', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{selected.headline?.substring(0, 60)}</p>
             {selected.profile_url && (
               <a href={selected.profile_url} target="_blank" rel="noopener noreferrer" style={{ fontSize: 10, color: '#0077B5', textDecoration: 'none', fontWeight: 600 }}>
                 View on LinkedIn
@@ -166,22 +166,22 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
           if (!i) return null;
           const first = selected.name?.split(' ')[0] || 'them';
           const twin = i.twin && connections.find((c) => c.id === i.twin.id);
-          const row = { display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 10, padding: '7px 0', borderTop: '1px solid rgba(255,255,255,0.05)' };
-          const label = { fontSize: 10.5, color: '#8b9a9a', minWidth: 92 };
-          const act = { background: 'none', border: 'none', padding: 0, color: '#3498DB', cursor: 'pointer', fontSize: 11.5, whiteSpace: 'nowrap' };
+          const row = { display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 10, padding: '7px 0', borderTop: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.05)' };
+          const label = { fontSize: 10.5, color: 'var(--sd-fg-3, #8b9a9a)', minWidth: 92 };
+          const act = { background: 'none', border: 'none', padding: 0, color: 'var(--sd-blue, #3498DB)', cursor: 'pointer', fontSize: 11.5, whiteSpace: 'nowrap' };
           const scanned = i.bars == null ? 'Not scanned yet' : i.bars === 5 ? 'Their whole list' : `About ${i.bars * 20}% of their list`;
           return (
             <div style={{ border: '1px solid rgba(52,152,219,0.25)', borderRadius: 8, marginBottom: 16, background: 'rgba(52,152,219,0.04)' }}>
               <button onClick={() => setShowInsights((v) => !v)} aria-expanded={showInsights}
-                style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '9px 12px', background: 'none', border: 'none', cursor: 'pointer', color: '#cfe6f7' }}>
+                style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '9px 12px', background: 'none', border: 'none', cursor: 'pointer', color: 'var(--sd-fg-1, #cfe6f7)' }}>
                 <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1 }}>INSIGHTS</span>
-                <span style={{ fontSize: 11, color: '#8b9a9a' }}>
+                <span style={{ fontSize: 11, color: 'var(--sd-fg-3, #8b9a9a)' }}>
                   {!showInsights && i.circle > 0 && `${i.circle.toLocaleString()} in their circle${i.only ? ` · ${i.only.toLocaleString()} only through ${first}` : ''} `}
                   {showInsights ? '▲' : '▼'}
                 </span>
               </button>
               {showInsights && (
-                <div style={{ padding: '0 12px 8px', fontSize: 12, color: '#ccc' }}>
+                <div style={{ padding: '0 12px 8px', fontSize: 12, color: 'var(--sd-fg-2, #ccc)' }}>
                   <div style={row}>
                     <span style={label}>Their circle</span>
                     <span style={{ flex: 1 }}>{i.circle ? `${i.circle.toLocaleString()} people` : 'None scanned yet'}</span>
@@ -190,7 +190,7 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
                   <div style={row}>
                     <span style={label}>Only through {first}</span>
                     <span style={{ flex: 1 }}>
-                      {i.circle ? <><b style={{ color: '#00ff88' }}>{i.only.toLocaleString()}</b> ({Math.round(i.onlyShare * 100)}%): none of your other connections reach them</> : '—'}
+                      {i.circle ? <><b style={{ color: 'var(--sd-green, #00ff88)' }}>{i.only.toLocaleString()}</b> ({Math.round(i.onlyShare * 100)}%): none of your other connections reach them</> : '-'}
                     </span>
                     {i.only > 0 && onShowInSeparation && (
                       <button style={act} onClick={() => onShowInSeparation({ query: selected.name, rarity: 'only' })}>Show them →</button>
@@ -199,18 +199,18 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
                   <div style={row}>
                     <span style={label}>Closest overlap</span>
                     <span style={{ flex: 1 }}>
-                      {twin ? <>Opens the same doors as <b style={{ color: '#fff' }}>{twin.name}</b> ({Math.round(i.twin.share * 100)}%, {i.twin.shared.toLocaleString()} people)</> : 'No one opens the same doors'}
+                      {twin ? <>Opens the same doors as <b style={{ color: 'var(--sd-fg-1, #fff)' }}>{twin.name}</b> ({Math.round(i.twin.share * 100)}%, {i.twin.shared.toLocaleString()} people)</> : 'No one opens the same doors'}
                     </span>
                     {twin && <button style={act} onClick={() => onSelect?.(twin)}>Open →</button>}
                   </div>
                   <div style={row}>
                     <span style={label}>Tier mix</span>
-                    <span style={{ flex: 1, display: 'flex', height: 8, borderRadius: 4, overflow: 'hidden', background: 'rgba(255,255,255,0.05)', alignSelf: 'center' }}>
+                    <span style={{ flex: 1, display: 'flex', height: 8, borderRadius: 4, overflow: 'hidden', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.05)', alignSelf: 'center' }}>
                       {i.circle > 0 && ['S', 'A', 'B', 'C', 'D'].map((t) => i.mix[t] > 0 && (
                         <span key={t} title={`${t}: ${i.mix[t]}`} style={{ width: `${(100 * i.mix[t]) / i.circle}%`, background: tierColors[t] }} />
                       ))}
                     </span>
-                    <span style={{ fontSize: 10.5, color: '#8b9a9a' }}>{i.circle ? `${i.mix.S} S · ${i.mix.A} A` : ''}</span>
+                    <span style={{ fontSize: 10.5, color: 'var(--sd-fg-3, #8b9a9a)' }}>{i.circle ? `${i.mix.S} S · ${i.mix.A} A` : ''}</span>
                     {i.mix.S > 0 && onShowInSeparation && (
                       <button style={act} onClick={() => onShowInSeparation({ query: selected.name, tier: 'S' })}>S only →</button>
                     )}
@@ -257,11 +257,11 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
             background: 'rgba(0,255,136,0.08)', border: '1px solid rgba(0,255,136,0.3)',
             borderRadius: 8, padding: 12, marginBottom: 16,
           }}>
-            <div style={{ fontSize: 10, color: '#00ff88', fontWeight: 700, marginBottom: 4, letterSpacing: 1 }}>CATALYST NODE</div>
-            <div style={{ fontSize: 12, color: '#ccc' }}>
+            <div style={{ fontSize: 10, color: 'var(--sd-green, #00ff88)', fontWeight: 700, marginBottom: 4, letterSpacing: 1 }}>CATALYST NODE</div>
+            <div style={{ fontSize: 12, color: 'var(--sd-fg-2, #ccc)' }}>
               This person&apos;s network power exceeds their own tier. They connect to{' '}
-              <strong style={{ color: '#00ff88' }}>{selected.catalyst_score} S+A tier</strong>{' '}
-              people — making them a high-value stepping stone to reach elite connections.
+              <strong style={{ color: 'var(--sd-green, #00ff88)' }}>{selected.catalyst_score} S+A tier</strong>{' '}
+              people, making them a high-value stepping stone to reach elite connections.
             </div>
           </div>
         )}
@@ -271,43 +271,43 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
         )}
 
         {/* === SCORE CARD === */}
-        <div style={{ background: 'rgba(255,255,255,0.04)', borderRadius: 8, padding: 12, marginBottom: 16 }}>
+        <div style={{ background: 'rgba(var(--sd-ink, 255, 255, 255), 0.04)', borderRadius: 8, padding: 12, marginBottom: 16 }}>
           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
-            <span style={{ fontSize: 11, color: '#888', fontWeight: 600, letterSpacing: 1, textTransform: 'uppercase' }}>Score</span>
+            <span style={{ fontSize: 11, color: 'var(--sd-fg-3, #888)', fontWeight: 600, letterSpacing: 1, textTransform: 'uppercase' }}>Score</span>
             <span style={{ fontSize: 28, fontWeight: 800, color: tierColors[selected.tier] || '#fff' }}>
               {parseFloat(selected.power_score).toFixed(1)}
             </span>
           </div>
           {/* Why: title × company weight + bonuses (lib/scoring.js) */}
           {selected.score_why && (
-            <div style={{ fontSize: 11, color: '#aab7b7', lineHeight: 1.5, marginBottom: 10 }}>{selected.score_why}</div>
+            <div style={{ fontSize: 11, color: 'var(--sd-fg-2, #aab7b7)', lineHeight: 1.5, marginBottom: 10 }}>{selected.score_why}</div>
           )}
           {/* Job Power bar */}
           <div style={{ marginBottom: 6 }}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: '#888', marginBottom: 2 }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--sd-fg-3, #888)', marginBottom: 2 }}>
               <span>Title</span><span>{selected.seniority_score || 0}/10</span>
             </div>
-            <div style={{ height: 4, background: 'rgba(255,255,255,0.08)', borderRadius: 2 }}>
+            <div style={{ height: 4, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.08)', borderRadius: 2 }}>
               <div style={{ height: '100%', width: `${(selected.seniority_score || 0) * 10}%`, background: tierColors[selected.tier] || '#FFD700', borderRadius: 2 }} />
             </div>
           </div>
           {/* Status Power bar */}
           <div style={{ marginBottom: selected.circle_power > 0 ? 6 : 0 }}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: '#888', marginBottom: 2 }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--sd-fg-3, #888)', marginBottom: 2 }}>
               <span>Company</span><span>{selected.company_prestige_score || 0}/10</span>
             </div>
-            <div style={{ height: 4, background: 'rgba(255,255,255,0.08)', borderRadius: 2 }}>
+            <div style={{ height: 4, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.08)', borderRadius: 2 }}>
               <div style={{ height: '100%', width: `${(selected.company_prestige_score || 0) * 10}%`, background: '#3498DB', borderRadius: 2 }} />
             </div>
           </div>
           {/* Circle Power bar — only shows for bridges with clusters */}
           {selected.circle_power > 0 && (
             <div>
-              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: '#888', marginBottom: 2 }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--sd-fg-3, #888)', marginBottom: 2 }}>
                 <span>Circle Power</span>
-                <span style={{ color: '#FF6B35' }}>{selected.circle_s_count || 0}S · {selected.circle_a_count || 0}A</span>
+                <span style={{ color: 'var(--sd-orange, #FF6B35)' }}>{selected.circle_s_count || 0}S · {selected.circle_a_count || 0}A</span>
               </div>
-              <div style={{ height: 4, background: 'rgba(255,255,255,0.08)', borderRadius: 2 }}>
+              <div style={{ height: 4, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.08)', borderRadius: 2 }}>
                 <div style={{ height: '100%', width: `${Math.min(parseFloat(selected.circle_power) / 70 * 100, 100)}%`, background: '#FF6B35', borderRadius: 2 }} />
               </div>
             </div>
@@ -316,10 +316,10 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
 
         {/* === WHY THIS MATTERS === */}
         <div style={{ marginBottom: 16 }}>
-          <div style={{ fontSize: 10, fontWeight: 700, color: '#FFD700', letterSpacing: 1, marginBottom: 6, textTransform: 'uppercase' }}>
+          <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--sd-gold, #FFD700)', letterSpacing: 1, marginBottom: 6, textTransform: 'uppercase' }}>
             Why This Matters
           </div>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 4, fontSize: 11, color: '#ccc' }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 4, fontSize: 11, color: 'var(--sd-fg-2, #ccc)' }}>
             {generateInsights(selected, userProfile, connections, degree2, routes).map((insight, idx) => (
               <div key={idx} style={{ display: 'flex', gap: 6, alignItems: 'flex-start' }}>
                 <span style={{ color: insight.color || '#888', fontSize: 13, lineHeight: 1 }}>{insight.icon}</span>
@@ -331,13 +331,13 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
 
         {selected.company && (
           <div style={{ marginBottom: 8 }}>
-            <div style={{ color: '#666', fontSize: 10 }}>Company</div>
+            <div style={{ color: 'var(--sd-fg-4, #666)', fontSize: 10 }}>Company</div>
             <div style={{ fontWeight: 600, fontSize: 12 }}>{selected.company}</div>
           </div>
         )}
         {selected.role && (
           <div style={{ marginBottom: 12 }}>
-            <div style={{ color: '#666', fontSize: 10 }}>Role</div>
+            <div style={{ color: 'var(--sd-fg-4, #666)', fontSize: 10 }}>Role</div>
             <div style={{ fontSize: 12 }}>{selected.role}</div>
           </div>
         )}
@@ -349,12 +349,12 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
           const topPeople = [...bridgeConnections].sort((a, b) => (parseFloat(b.power_score) || 0) - (parseFloat(a.power_score) || 0)).slice(0, 8);
           return (
             <div style={{ marginBottom: 16 }}>
-              <div style={{ fontSize: 10, fontWeight: 700, color: '#FF6B35', letterSpacing: 1, marginBottom: 8, textTransform: 'uppercase' }}>
-                Cluster Overview — {bridgeConnections.length} connections
+              <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--sd-orange, #FF6B35)', letterSpacing: 1, marginBottom: 8, textTransform: 'uppercase' }}>
+                Cluster Overview · {bridgeConnections.length} connections
               </div>
               <div style={{ display: 'flex', gap: 6, marginBottom: 8, fontSize: 10 }}>
-                {sTier.length > 0 && <span style={{ color: '#FFD700', fontWeight: 600 }}>{sTier.length} S-tier</span>}
-                {aTier.length > 0 && <span style={{ color: '#9B59B6', fontWeight: 600 }}>{aTier.length} A-tier</span>}
+                {sTier.length > 0 && <span style={{ color: 'var(--sd-gold, #FFD700)', fontWeight: 600 }}>{sTier.length} S-tier</span>}
+                {aTier.length > 0 && <span style={{ color: 'var(--sd-purple, #9B59B6)', fontWeight: 600 }}>{aTier.length} A-tier</span>}
               </div>
               {/* Outlink Bridge button */}
               <a href={`/queue?bridge=${selected.id}&groupBy=bridge`} style={{
@@ -364,7 +364,7 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
               }}>
                 Outlink Bridge → Add {bridgeConnections.filter(m => m.tier === 'S' || m.tier === 'A' || m.tier === 'B').length} People
               </a>
-              <div style={{ fontSize: 10, color: '#888', marginBottom: 8 }}>Most valuable in this cluster:</div>
+              <div style={{ fontSize: 10, color: 'var(--sd-fg-3, #888)', marginBottom: 8 }}>Most valuable in this cluster:</div>
               <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
                 {topPeople.map(m => (
                   <div key={m.id}
@@ -372,10 +372,10 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
                     style={{
                       display: 'flex', alignItems: 'center', gap: 6, padding: '4px 6px',
                       borderRadius: 4, cursor: 'pointer', borderLeft: `2px solid ${tierColors[m.tier] || '#555'}`,
-                      background: 'rgba(255,255,255,0.03)',
+                      background: 'rgba(var(--sd-ink, 255, 255, 255), 0.03)',
                     }}
-                    onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.08)'}
-                    onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.03)'}
+                    onMouseEnter={e => e.currentTarget.style.background = 'rgba(var(--sd-ink, 255, 255, 255), 0.08)'}
+                    onMouseLeave={e => e.currentTarget.style.background = 'rgba(var(--sd-ink, 255, 255, 255), 0.03)'}
                   >
                     {localPhoto(m.profile_image_url) ? (
                       <img src={localPhoto(m.profile_image_url)} alt="" style={{
@@ -385,12 +385,12 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
                     ) : null}
                     <div style={{
                       width: 22, height: 22, borderRadius: '50%', flexShrink: 0, fontSize: 9, fontWeight: 700,
-                      background: tierColors[m.tier] || '#555', color: m.tier === 'S' ? '#000' : '#fff',
+                      background: tierColors[m.tier] || '#555', color: m.tier === 'S' ? '#000' : 'var(--sd-fg-1, #fff)',
                       display: localPhoto(m.profile_image_url) ? 'none' : 'flex', alignItems: 'center', justifyContent: 'center',
                     }}>{m.name?.charAt(0)}</div>
                     <div style={{ flex: 1, minWidth: 0 }}>
                       <div style={{ fontSize: 10, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m.name}</div>
-                      <div style={{ fontSize: 8, color: '#666', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m.headline?.substring(0, 40)}</div>
+                      <div style={{ fontSize: 8, color: 'var(--sd-fg-4, #666)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m.headline?.substring(0, 40)}</div>
                     </div>
                     <span style={{ fontSize: 9, color: tierColors[m.tier], fontWeight: 600, flexShrink: 0 }}>{parseFloat(m.power_score).toFixed(1)}</span>
                   </div>
@@ -402,7 +402,7 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
 
         {isBridge && bridgeConnections.length > 0 && (
           <div style={{ marginTop: 16 }}>
-            <div style={{ fontSize: 12, fontWeight: 600, color: '#FF6B35', marginBottom: 8 }}>
+            <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--sd-orange, #FF6B35)', marginBottom: 8 }}>
               Gateway to {bridgeConnections.length} degree-2 connections:
             </div>
             {bridgeConnections.sort((a, b) => (parseFloat(b.power_score) || 0) - (parseFloat(a.power_score) || 0)).slice(0, 10).map(c => (
@@ -411,8 +411,8 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
                 borderLeft: '3px solid #FF6B35', marginBottom: 4, fontSize: 12,
               }}>
                 <div style={{ fontWeight: 600 }}>{c.name}</div>
-                <div style={{ color: '#888', fontSize: 11 }}>{c.role}{c.company ? ` @ ${c.company}` : ''}</div>
-                <div style={{ color: '#FF6B35', fontSize: 10 }}>Score: {parseFloat(c.power_score).toFixed(1)}</div>
+                <div style={{ color: 'var(--sd-fg-3, #888)', fontSize: 11 }}>{c.role}{c.company ? ` @ ${c.company}` : ''}</div>
+                <div style={{ color: 'var(--sd-orange, #FF6B35)', fontSize: 10 }}>Score: {parseFloat(c.power_score).toFixed(1)}</div>
               </div>
             ))}
           </div>
@@ -441,20 +441,20 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
               background: 'rgba(255,215,0,0.06)', border: `1px ${asked ? 'dashed' : 'solid'} rgba(255,215,0,${asked ? 0.45 : 0.25})`,
               borderRadius: 10, padding: 16, marginTop: 16, textAlign: 'center',
             }}>
-              <div style={{ fontSize: 10, color: '#FFD700', fontWeight: 700, letterSpacing: 1, marginBottom: 6 }}>
+              <div style={{ fontSize: 10, color: 'var(--sd-gold, #FFD700)', fontWeight: 700, letterSpacing: 1, marginBottom: 6 }}>
                 {asked ? 'REQUEST SENT' : 'LOCKED PATH'}
               </div>
-              <div style={{ fontSize: 13, color: '#ccc', marginBottom: 12 }}>
+              <div style={{ fontSize: 13, color: 'var(--sd-fg-2, #ccc)', marginBottom: 12 }}>
                 {asked
                   ? `Waiting for ${selected.name} to accept. The next scan of your own connections notices when they do.`
                   : `Connect with ${selected.name} to unlock their network and extend your six degrees.`
                 }
               </div>
               <div style={{
-                width: '100%', height: 60, background: 'rgba(255,255,255,0.03)',
-                borderRadius: 8, border: '1px dashed rgba(255,255,255,0.1)',
+                width: '100%', height: 60, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.03)',
+                borderRadius: 8, border: '1px dashed rgba(var(--sd-ink, 255, 255, 255), 0.1)',
                 display: 'flex', alignItems: 'center', justifyContent: 'center',
-                fontSize: 11, color: '#444', marginBottom: 12,
+                fontSize: 11, color: 'var(--sd-fg-5, #444)', marginBottom: 12,
               }}>
                 {asked ? '[ Cluster Pending... ]' : '[ Hidden Network ]'}
               </div>
@@ -462,7 +462,7 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
                 <button
                   onClick={() => { undoRequest(selected).catch(() => {}); }}
                   style={{
-                    background: 'none', border: 'none', color: '#888', fontSize: 11, fontWeight: 600, cursor: 'pointer',
+                    background: 'none', border: 'none', color: 'var(--sd-fg-3, #888)', fontSize: 11, fontWeight: 600, cursor: 'pointer',
                   }}
                 >
                   Didn&apos;t send it? Undo
@@ -525,13 +525,13 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
           onClick={onToggle}
           style={{
             display: 'flex', alignItems: 'center', gap: 6, background: 'none', border: 'none',
-            color: '#888', fontSize: 12, cursor: 'pointer', padding: '0 0 10px', fontWeight: 600,
+            color: 'var(--sd-fg-3, #888)', fontSize: 12, cursor: 'pointer', padding: '0 0 10px', fontWeight: 600,
           }}
         >
           <span style={{ fontSize: 16 }}>&larr;</span> Close
         </button>
-        <h3 style={{ fontSize: 16, fontWeight: 700, marginTop: 0, color: '#FF6B35' }}>Degrees</h3>
-        <p style={{ fontSize: 12, color: '#888', marginBottom: 12 }}>
+        <h3 style={{ fontSize: 16, fontWeight: 700, marginTop: 0, color: 'var(--sd-orange, #FF6B35)' }}>Degrees</h3>
+        <p style={{ fontSize: 12, color: 'var(--sd-fg-3, #888)', marginBottom: 12 }}>
           Your bridge connections and who they unlock.
         </p>
 
@@ -556,8 +556,8 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
             onChange={e => setSearchQuery(e.target.value)}
             style={{
               width: '100%', padding: '8px 12px', borderRadius: 8, fontSize: 12,
-              border: '1px solid rgba(255,255,255,0.1)', background: 'rgba(255,255,255,0.05)',
-              color: '#fff', outline: 'none', boxSizing: 'border-box',
+              border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.05)',
+              color: 'var(--sd-fg-1, #fff)', outline: 'none', boxSizing: 'border-box',
             }}
           />
           {searchQuery.length >= 2 && (() => {
@@ -575,7 +575,7 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
             return (
               <div style={{
                 position: 'absolute', top: '100%', left: 0, right: 0, zIndex: 50,
-                background: 'color-mix(in srgb, var(--sd-bg) 97%, transparent)', border: '1px solid rgba(255,255,255,0.1)',
+                background: 'color-mix(in srgb, var(--sd-bg) 97%, transparent)', border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)',
                 borderRadius: 8, overflow: 'hidden', maxHeight: 200, overflowY: 'auto',
                 boxShadow: '0 8px 24px rgba(0,0,0,0.5)',
               }}>
@@ -586,9 +586,9 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
                     if (onFocusNode && m._matchType === 'bridge') onFocusNode(m.id);
                   }} style={{
                     padding: '8px 12px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8,
-                    borderBottom: '1px solid rgba(255,255,255,0.05)',
+                    borderBottom: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.05)',
                   }}
-                    onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.06)'}
+                    onMouseEnter={e => e.currentTarget.style.background = 'rgba(var(--sd-ink, 255, 255, 255), 0.06)'}
                     onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
                   >
                     {localPhoto(m.profile_image_url) ? (
@@ -598,7 +598,7 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
                     )}
                     <div style={{ flex: 1, minWidth: 0 }}>
                       <div style={{ fontSize: 11, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m.name}</div>
-                      <div style={{ fontSize: 8, color: '#666' }}>{m._matchType === 'bridge' ? 'Bridge' : 'Degree-2'}</div>
+                      <div style={{ fontSize: 8, color: 'var(--sd-fg-4, #666)' }}>{m._matchType === 'bridge' ? 'Bridge' : 'Degree-2'}</div>
                     </div>
                     <span style={{ fontSize: 9, fontWeight: 700, color: tierColors[m.tier] }}>{m.tier}</span>
                   </div>
@@ -611,10 +611,10 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
         {/* Pending Requests View */}
         {filter === 'pending' && pending.length > 0 && (
           <>
-            <h4 style={{ fontSize: 13, fontWeight: 600, color: '#FF6B35', marginBottom: 8 }}>
+            <h4 style={{ fontSize: 13, fontWeight: 600, color: 'var(--sd-orange, #FF6B35)', marginBottom: 8 }}>
               ⏳ Pending Requests ({pending.length})
             </h4>
-            <p style={{ fontSize: 10, color: '#666', marginBottom: 10, lineHeight: 1.4 }}>
+            <p style={{ fontSize: 10, color: 'var(--sd-fg-4, #666)', marginBottom: 10, lineHeight: 1.4 }}>
               Friend requests you&apos;ve sent. When accepted, their cluster unlocks for bridging.
             </p>
             <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
@@ -635,7 +635,7 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
                     ) : (
                       <div style={{
                         width: 32, height: 32, borderRadius: '50%', flexShrink: 0, fontSize: 12, fontWeight: 700,
-                        background: tierColors[p.tier] || '#555', color: p.tier === 'S' ? '#000' : '#fff',
+                        background: tierColors[p.tier] || '#555', color: p.tier === 'S' ? '#000' : 'var(--sd-fg-1, #fff)',
                         display: 'flex', alignItems: 'center', justifyContent: 'center',
                       }}>{p.name?.charAt(0)}</div>
                     )}
@@ -645,11 +645,11 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
                       <div style={{ fontSize: 11, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                         {p.name}
                       </div>
-                      <div style={{ fontSize: 8, color: '#888', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                      <div style={{ fontSize: 8, color: 'var(--sd-fg-3, #888)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                         {p.headline?.substring(0, 40)}
                       </div>
                       {bridge && (
-                        <div style={{ fontSize: 8, color: '#FF6B35', marginTop: 1 }}>
+                        <div style={{ fontSize: 8, color: 'var(--sd-orange, #FF6B35)', marginTop: 1 }}>
                           via {bridge.name?.split(' ')[0]}
                         </div>
                       )}
@@ -660,7 +660,7 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
                       <div style={{ fontSize: 9, fontWeight: 800, color: tierColors[p.tier] || '#888' }}>
                         {p.tier}
                       </div>
-                      <div style={{ fontSize: 8, color: '#666' }}>
+                      <div style={{ fontSize: 8, color: 'var(--sd-fg-4, #666)' }}>
                         {parseFloat(p.power_score || 0).toFixed(1)}
                       </div>
                     </div>
@@ -670,7 +670,7 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
                       onClick={() => onUndoPending && onUndoPending(p)}
                       title="Remove from pending"
                       style={{
-                        background: 'none', border: 'none', color: '#555', cursor: 'pointer',
+                        background: 'none', border: 'none', color: 'var(--sd-fg-5, #555)', cursor: 'pointer',
                         fontSize: 12, padding: 2, flexShrink: 0,
                       }}
                     >✕</button>
@@ -683,7 +683,7 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
 
         {/* Clusters View (hidden when viewing pending) */}
         {filter !== 'pending' && (<>
-        <h4 style={{ fontSize: 13, fontWeight: 600, color: '#FF6B35', marginBottom: 8 }}>Most Valuable Clusters</h4>
+        <h4 style={{ fontSize: 13, fontWeight: 600, color: 'var(--sd-orange, #FF6B35)', marginBottom: 8 }}>Most Valuable Clusters</h4>
         <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
           {(() => {
             const clusterStats = Object.entries(bridgeMap).map(([bridgeId, members]) => {
@@ -757,8 +757,8 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
         onClick={onToggle}
         style={{
           display: 'flex', alignItems: 'center', gap: 6,
-          background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)',
-          borderRadius: 6, color: '#aaa', fontSize: 12, cursor: 'pointer',
+          background: 'rgba(var(--sd-ink, 255, 255, 255), 0.06)', border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)',
+          borderRadius: 6, color: 'var(--sd-fg-3, #aaa)', fontSize: 12, cursor: 'pointer',
           padding: '6px 12px', marginBottom: 12, fontWeight: 600,
         }}
       >
@@ -783,14 +783,14 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
           onChange={(e) => setSearchQuery(e.target.value)}
           style={{
             width: '100%', padding: '8px 12px', borderRadius: 8, boxSizing: 'border-box',
-            border: '1px solid rgba(255,255,255,0.1)', background: 'rgba(0,0,0,0.3)',
-            color: '#fff', fontSize: 12, outline: 'none',
+            border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)', background: 'rgba(var(--sd-shade, 0, 0, 0), 0.3)',
+            color: 'var(--sd-fg-1, #fff)', fontSize: 12, outline: 'none',
           }}
         />
         {searchResults.length > 0 && (
           <div style={{
             position: 'absolute', top: '100%', left: 0, right: 0, zIndex: 10,
-            background: 'color-mix(in srgb, var(--sd-bg) 97%, transparent)', border: '1px solid rgba(255,255,255,0.1)',
+            background: 'color-mix(in srgb, var(--sd-bg) 97%, transparent)', border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)',
             borderRadius: 8, marginTop: 4, overflow: 'hidden',
             boxShadow: '0 8px 24px rgba(0,0,0,0.5)',
           }}>
@@ -804,9 +804,9 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
                 }}
                 style={{
                   display: 'flex', alignItems: 'center', gap: 8, padding: '8px 10px',
-                  cursor: 'pointer', borderBottom: '1px solid rgba(255,255,255,0.04)',
+                  cursor: 'pointer', borderBottom: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.04)',
                 }}
-                onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.08)'}
+                onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(var(--sd-ink, 255, 255, 255), 0.08)'}
                 onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
               >
                 {localPhoto(c.profile_image_url) ? (
@@ -817,13 +817,13 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
                 ) : (
                   <div style={{
                     width: 24, height: 24, borderRadius: '50%', flexShrink: 0, fontSize: 10, fontWeight: 700,
-                    background: tierColors[c.tier] || '#555', color: c.tier === 'S' ? '#000' : '#fff',
+                    background: tierColors[c.tier] || '#555', color: c.tier === 'S' ? '#000' : 'var(--sd-fg-1, #fff)',
                     display: 'flex', alignItems: 'center', justifyContent: 'center',
                   }}>{c.name?.charAt(0)}</div>
                 )}
                 <div style={{ flex: 1, minWidth: 0 }}>
                   <div style={{ fontSize: 12, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.name}</div>
-                  <div style={{ fontSize: 9, color: '#666' }}>{c.headline?.substring(0, 35)}</div>
+                  <div style={{ fontSize: 9, color: 'var(--sd-fg-4, #666)' }}>{c.headline?.substring(0, 35)}</div>
                 </div>
                 <span style={{ fontSize: 10, color: tierColors[c.tier], fontWeight: 700 }}>{c.tier}</span>
               </div>
@@ -832,7 +832,7 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
         )}
       </div>
 
-      <h4 style={{ fontSize: 13, fontWeight: 600, color: '#FFD700', marginBottom: 8 }}>
+      <h4 style={{ fontSize: 13, fontWeight: 600, color: 'var(--sd-gold, #FFD700)', marginBottom: 8 }}>
         Power Rankings ({allRanked.length})
       </h4>
       <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
@@ -850,7 +850,7 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
           if (showHeader) tierRankCounter[c.tier] = 0;
           tierRankCounter[c.tier] = (tierRankCounter[c.tier] || 0) + 1;
           const tierRank = tierRankCounter[c.tier];
-          const tierNames = { S: 'S-Tier — Elite', A: 'A-Tier — High Value', B: 'B-Tier — Notable', C: 'C-Tier — Standard', D: 'D-Tier — Entry' };
+          const tierNames = { S: 'S-Tier · Elite', A: 'A-Tier · High Value', B: 'B-Tier · Notable', C: 'C-Tier · Standard', D: 'D-Tier · Entry' };
           return (
           <div key={c.id}>
             {showHeader && (
@@ -869,16 +869,16 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
             <div
               onClick={() => { onSelect && onSelect(c); onFocusNode && onFocusNode(c.id); }}
               style={{
-                padding: '6px 8px', background: 'rgba(255,255,255,0.03)', borderRadius: 6,
+                padding: '6px 8px', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.03)', borderRadius: 6,
                 borderLeft: `3px solid ${tierColors[c.tier] || '#555'}`,
                 cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8,
                 transition: 'background 0.15s',
               }}
-              onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.1)'}
-              onMouseLeave={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.03)'}
+              onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(var(--sd-ink, 255, 255, 255), 0.1)'}
+              onMouseLeave={(e) => e.currentTarget.style.background = 'rgba(var(--sd-ink, 255, 255, 255), 0.03)'}
             >
             {/* Rank number — per tier */}
-            <span style={{ color: '#555', fontSize: 10, fontWeight: 600, minWidth: 22, textAlign: 'right' }}>
+            <span style={{ color: 'var(--sd-fg-5, #555)', fontSize: 10, fontWeight: 600, minWidth: 22, textAlign: 'right' }}>
               #{tierRank}
             </span>
             {/* Profile photo or initial */}
@@ -896,7 +896,7 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
               background: tierColors[c.tier] || '#555',
               display: localPhoto(c.profile_image_url) ? 'none' : 'flex',
               alignItems: 'center', justifyContent: 'center',
-              fontSize: 12, fontWeight: 700, color: c.tier === 'S' ? '#000' : '#fff',
+              fontSize: 12, fontWeight: 700, color: c.tier === 'S' ? '#000' : 'var(--sd-fg-1, #fff)',
             }}>
               {c.name?.charAt(0)}
             </div>
@@ -905,7 +905,7 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
               <div style={{ fontWeight: 600, fontSize: 11, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                 {c.name}
               </div>
-              <div style={{ fontSize: 9, color: '#666', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+              <div style={{ fontSize: 9, color: 'var(--sd-fg-4, #666)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                 {c.headline?.substring(0, 45)}
               </div>
             </div>
@@ -914,7 +914,7 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
               <div style={{ fontSize: 10, fontWeight: 700, color: tierColors[c.tier] || '#555' }}>
                 {parseFloat(c.power_score).toFixed(1)}
               </div>
-              <div style={{ fontSize: 8, color: '#555' }}>{c.tier}</div>
+              <div style={{ fontSize: 8, color: 'var(--sd-fg-5, #555)' }}>{c.tier}</div>
             </div>
           </div>
           </div>
@@ -939,7 +939,7 @@ function SidebarWrapper({ children, collapsed, onToggle }) {
           display: 'flex', alignItems: 'center', flexDirection: 'row-reverse', gap: 0,
           height: 36, borderRadius: 18,
           background: 'rgba(255,215,0,0.15)', border: '2px solid rgba(255,215,0,0.5)',
-          color: '#FFD700', fontWeight: 700,
+          color: 'var(--sd-gold, #FFD700)', fontWeight: 700,
           boxShadow: '0 0 12px rgba(255,215,0,0.3)',
           backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
           overflow: 'hidden', transition: 'width 0.25s ease',
@@ -960,13 +960,13 @@ function SidebarWrapper({ children, collapsed, onToggle }) {
       position: 'fixed', top: 0, right: 0, bottom: 0, zIndex: 100,
       width: '100vw', pointerEvents: 'auto',
     } : { flexShrink: 0, height: '100%' }}>
-      {isMobile && <div onClick={onToggle} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.5)' }} />}
-      <div style={{
+      {isMobile && <div onClick={onToggle} style={{ position: 'absolute', inset: 0, background: 'rgba(var(--sd-shade, 0, 0, 0), 0.5)' }} />}
+      <div data-glass-panel={isMobile ? undefined : 'side'} style={{
         width: isMobile ? '80vw' : 320, minWidth: isMobile ? 0 : 320, maxWidth: isMobile ? 300 : 320, height: '100%',
         borderLeft: '1px solid rgba(255,215,0,0.12)',
         padding: isMobile ? '12px 10px' : '16px 16px',
         overflowY: 'auto', overflowX: 'hidden',
-        background: isMobile ? 'rgba(15,12,5,0.98)' : 'var(--sd-panel)', fontSize: 13,
+        background: isMobile ? 'var(--sd-surface, rgba(15,12,5,0.98))' : 'var(--sd-panel)', fontSize: 13,
         backdropFilter: 'var(--sd-panel-blur)', WebkitBackdropFilter: 'var(--sd-panel-blur)',
         boxShadow: 'inset 0 0 60px rgba(255,215,0,0.03), -4px 0 24px rgba(0,0,0,0.3)',
         marginLeft: isMobile ? 'auto' : 0,
@@ -979,15 +979,15 @@ function SidebarWrapper({ children, collapsed, onToggle }) {
 
 function StatBox({ label, value }) {
   return (
-    <div style={{ background: 'rgba(255,255,255,0.05)', padding: '10px 12px', borderRadius: 8 }}>
-      <div style={{ fontSize: 10, color: '#888', marginBottom: 2 }}>{label}</div>
+    <div style={{ background: 'rgba(var(--sd-ink, 255, 255, 255), 0.05)', padding: '10px 12px', borderRadius: 8 }}>
+      <div style={{ fontSize: 10, color: 'var(--sd-fg-3, #888)', marginBottom: 2 }}>{label}</div>
       <div style={{ fontSize: 18, fontWeight: 700 }}>{value}</div>
     </div>
   );
 }
 
 function Arrow() {
-  return <span style={{ color: '#555', fontSize: 16 }}>&rarr;</span>;
+  return <span style={{ color: 'var(--sd-fg-5, #555)', fontSize: 16 }}>&rarr;</span>;
 }
 
 const CANT_NAME_TITLE = 'This route came from a scanned list whose connection record doesn’t match anyone in '
@@ -1009,15 +1009,15 @@ function PathBox({ routes, selected, tierColors, onSelect }) {
       background: 'rgba(255,107,53,0.1)', border: '1px solid rgba(255,107,53,0.3)',
       borderRadius: 8, padding: 12, marginBottom: 16,
     }}>
-      <div style={{ fontSize: 10, color: '#FF6B35', fontWeight: 600, marginBottom: 8 }}>
+      <div style={{ fontSize: 10, color: 'var(--sd-orange, #FF6B35)', fontWeight: 600, marginBottom: 8 }}>
         PATH TO THIS PERSON{n > 1 ? ` · ${n} WAYS IN` : ''}
       </div>
       <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
         {shown.map((r, i) => {
           if (!r.bridge) {
             return (
-              <div key={`unnamed-${r.id}`} title={CANT_NAME_TITLE} style={{ ...line, color: '#888', fontStyle: 'italic' }}>
-                <span style={{ fontWeight: 700, fontStyle: 'normal', color: '#fff' }}>You</span>
+              <div key={`unnamed-${r.id}`} title={CANT_NAME_TITLE} style={{ ...line, color: 'var(--sd-fg-3, #888)', fontStyle: 'italic' }}>
+                <span style={{ fontWeight: 700, fontStyle: 'normal', color: 'var(--sd-fg-1, #fff)' }}>You</span>
                 <Arrow />
                 <span>a connection we can&rsquo;t name</span>
                 <Arrow />
@@ -1045,17 +1045,17 @@ function PathBox({ routes, selected, tierColors, onSelect }) {
                   {b.name}
                 </button>
                 <Arrow />
-                <span style={{ color: '#FF6B35', fontWeight: 600 }}>{selected.name}</span>
+                <span style={{ color: 'var(--sd-orange, #FF6B35)', fontWeight: 600 }}>{selected.name}</span>
                 {/* Not "strongest": the app knows nothing about how well they
                     know each other, only how this connection scores. */}
                 {i === 0 && n > 1 && (
                   <span style={{
-                    fontSize: 9, fontWeight: 700, color: '#FF6B35', padding: '1px 6px', borderRadius: 8,
+                    fontSize: 9, fontWeight: 700, color: 'var(--sd-orange, #FF6B35)', padding: '1px 6px', borderRadius: 8,
                     background: 'rgba(255,107,53,0.15)', whiteSpace: 'nowrap',
                   }}>top-scored bridge</span>
                 )}
               </div>
-              {about && <div style={{ fontSize: 11, color: '#888', marginTop: 3 }}>{about}</div>}
+              {about && <div style={{ fontSize: 11, color: 'var(--sd-fg-3, #888)', marginTop: 3 }}>{about}</div>}
             </div>
           );
         })}
@@ -1065,7 +1065,7 @@ function PathBox({ routes, selected, tierColors, onSelect }) {
           onClick={() => setShowAll((v) => !v)}
           style={{
             marginTop: 10, padding: '4px 10px', borderRadius: 6, cursor: 'pointer', fontSize: 11, fontWeight: 600,
-            border: '1px solid rgba(255,107,53,0.35)', background: 'transparent', color: '#FF6B35',
+            border: '1px solid rgba(255,107,53,0.35)', background: 'transparent', color: 'var(--sd-orange, #FF6B35)',
           }}
         >
           {showAll ? 'Show fewer' : `Show all ${n}`}
@@ -1141,7 +1141,7 @@ function CreateClusterCard({ selected, degree2 }) {
       <div style={{ fontSize: 10, color: accent, fontWeight: 700, letterSpacing: 1, marginBottom: 4, textAlign: 'center' }}>
         {hasCluster ? 'CLUSTER ACTIVE' : 'CREATE CLUSTER'}
       </div>
-      <div style={{ fontSize: 12, color: '#aaa', marginBottom: 12, textAlign: 'center' }}>
+      <div style={{ fontSize: 12, color: 'var(--sd-fg-3, #aaa)', marginBottom: 12, textAlign: 'center' }}>
         {hasCluster
           ? `${clusterCount} connections mapped in Six Degrees`
           : <>Scan {selected.name}&apos;s connections to map their network</>}
@@ -1151,15 +1151,15 @@ function CreateClusterCard({ selected, degree2 }) {
         <ScanLog title={scan.pending ? 'Starting…' : `Scanning ${selected.name}’s circle…`} log={scan.log} />
       ) : problem?.offline ? (
         <>
-          <div style={{ padding: '10px', borderRadius: 8, background: 'rgba(255,80,80,0.1)', border: '1px solid rgba(255,80,80,0.3)', color: '#ff5050', fontSize: 12, marginBottom: 8, textAlign: 'center' }}>
+          <div style={{ padding: '10px', borderRadius: 8, background: 'rgba(255,80,80,0.1)', border: '1px solid rgba(255,80,80,0.3)', color: 'var(--sd-red, #ff5050)', fontSize: 12, marginBottom: 8, textAlign: 'center' }}>
             Scanner offline
           </div>
-          <div style={{ fontSize: 10, color: '#888', textAlign: 'center', marginBottom: 8 }}>
+          <div style={{ fontSize: 10, color: 'var(--sd-fg-3, #888)', textAlign: 'center', marginBottom: 8 }}>
             {problem.text} Open the <strong>Scan</strong> page to finish setting the scanner up.
           </div>
           <button onClick={() => setProblem(null)} style={{
             width: '100%', padding: '10px', borderRadius: 8, border: 'none', cursor: 'pointer',
-            background: 'rgba(255,255,255,0.1)', color: '#aaa', fontWeight: 600, fontSize: 12,
+            background: 'rgba(var(--sd-ink, 255, 255, 255), 0.1)', color: 'var(--sd-fg-3, #aaa)', fontWeight: 600, fontSize: 12,
           }}>
             Retry
           </button>
@@ -1178,19 +1178,19 @@ function CreateClusterCard({ selected, degree2 }) {
             </button>
           </div>
           {resume && (
-            <div style={{ fontSize: 10, color: '#888', marginTop: 8, lineHeight: 1.45, textAlign: 'center' }}>
+            <div style={{ fontSize: 10, color: 'var(--sd-fg-3, #888)', marginTop: 8, lineHeight: 1.45, textAlign: 'center' }}>
               Read to page {resume.pagesRead} so far. Resume carries on from page {resume.nextPage}. LinkedIn
               lists their connections in its own order, not by date, so Rescan reads them all again from page 1.
             </div>
           )}
           {hasCluster && resume === null && (
-            <div style={{ fontSize: 10, color: '#888', marginTop: 8, lineHeight: 1.45, textAlign: 'center' }}>
+            <div style={{ fontSize: 10, color: 'var(--sd-fg-3, #888)', marginTop: 8, lineHeight: 1.45, textAlign: 'center' }}>
               Their whole list has been read. LinkedIn doesn&apos;t date other people&apos;s connections, so a
               rescan reads it all again to find anyone new.
             </div>
           )}
           {busy && (
-            <div style={{ fontSize: 10, color: '#bbb', marginTop: 8, textAlign: 'center' }}>
+            <div style={{ fontSize: 10, color: 'var(--sd-fg-2, #bbb)', marginTop: 8, textAlign: 'center' }}>
               {busy}. One scan at a time: this one can start when it finishes.
             </div>
           )}
@@ -1203,18 +1203,18 @@ function CreateClusterCard({ selected, degree2 }) {
   );
 }
 
-// In place of the Scan buttons while the sample or a CSV import is open. Both
-// live in this window only, so a scan could only fail: the scanner looks the
-// person up in the database, and says "Bridge '…' not found in database".
+// In place of the Scan buttons while the sample or a CSV import is open.
+// Neither is in the database, so a scan could only fail: the scanner looks the
+// person up there, and says "Bridge '…' not found in database".
 function ScansNeedYourNetwork({ csvSource, style }) {
   return (
     <div style={{
-      padding: '10px 12px', borderRadius: 8, fontSize: 11, color: '#999', lineHeight: 1.5, textAlign: 'center',
-      background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)', ...style,
+      padding: '10px 12px', borderRadius: 8, fontSize: 11, color: 'var(--sd-fg-3, #999)', lineHeight: 1.5, textAlign: 'center',
+      background: 'rgba(var(--sd-ink, 255, 255, 255), 0.03)', border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.08)', ...style,
     }}>
       {csvSource === 'sample'
         ? 'Scanning needs your own network: everyone in the sample is invented.'
-        : 'Scanning needs your own network: a CSV import lives only in this window. Close it (× at the top) and open Scan.'}
+        : 'Scanning needs your own network, not a CSV import. Remove the import (× at the top) and open Scan.'}
     </div>
   );
 }
@@ -1229,9 +1229,9 @@ function ScanLog({ title, log, small = false }) {
         {/* Its own keyframes: the 'pulse' this named was never defined anywhere, so the dot sat still. */}
         <style>{'@keyframes scanlogPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } } @media (prefers-reduced-motion: reduce) { .scanlog-dot { animation: none !important; } }'}</style>
         <div className="scanlog-dot" style={{ width: small ? 6 : 8, height: small ? 6 : 8, borderRadius: '50%', background: '#9B59B6', animation: 'scanlogPulse 1s ease-in-out infinite' }} />
-        <span style={{ fontSize: 11, fontWeight: 600, color: '#9B59B6' }}>{title}</span>
+        <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--sd-purple, #9B59B6)' }}>{title}</span>
       </div>
-      <div style={{ fontFamily: 'monospace', fontSize: small ? 9 : 10, color: '#888', maxHeight: small ? 80 : 100, overflow: 'auto' }}>
+      <div style={{ fontFamily: 'monospace', fontSize: small ? 9 : 10, color: 'var(--sd-fg-3, #888)', maxHeight: small ? 80 : 100, overflow: 'auto' }}>
         {log.slice(-40).map((l, i) => <div key={i}>{l}</div>)}
       </div>
     </div>
@@ -1247,7 +1247,7 @@ function LastRead({ job, who = null }) {
       padding: '8px 10px', borderRadius: 8, marginBottom: 10, fontSize: 11, textAlign: 'center', lineHeight: 1.4,
       background: ok ? 'rgba(0,255,136,0.08)' : 'rgba(255,80,80,0.08)',
       border: `1px solid ${ok ? 'rgba(0,255,136,0.25)' : 'rgba(255,80,80,0.25)'}`,
-      color: ok ? '#00ff88' : '#ff8080',
+      color: ok ? 'var(--sd-green, #00ff88)' : '#ff8080',
     }}>
       {ok
         ? `${who ? `${who}’s circle` : 'The scan'} finished. What it found is on the map.`
@@ -1261,7 +1261,7 @@ function ClusterCard({ cs, rank, tierColors, onSelect }) {
 
   return (
     <div style={{
-      background: 'rgba(255,255,255,0.05)', borderRadius: 6,
+      background: 'rgba(var(--sd-ink, 255, 255, 255), 0.05)', borderRadius: 6,
       borderLeft: `3px solid ${tierColors[cs.bridge.tier] || '#FF6B35'}`,
       overflow: 'hidden',
     }}>
@@ -1280,34 +1280,34 @@ function ClusterCard({ cs, rank, tierColors, onSelect }) {
             ) : (
               <div style={{
                 width: 28, height: 28, borderRadius: '50%', flexShrink: 0, fontSize: 11, fontWeight: 700,
-                background: tierColors[cs.bridge.tier] || '#555', color: cs.bridge.tier === 'S' ? '#000' : '#fff',
+                background: tierColors[cs.bridge.tier] || '#555', color: cs.bridge.tier === 'S' ? '#000' : 'var(--sd-fg-1, #fff)',
                 display: 'flex', alignItems: 'center', justifyContent: 'center',
               }}>{cs.bridge.name?.charAt(0)}</div>
             )}
             <div>
               <div style={{ fontWeight: 600, fontSize: 12 }}>
-                <span style={{ color: '#555', marginRight: 4 }}>#{rank}</span>{cs.bridge.name}
+                <span style={{ color: 'var(--sd-fg-5, #555)', marginRight: 4 }}>#{rank}</span>{cs.bridge.name}
               </div>
-              <div style={{ fontSize: 9, color: '#666' }}>{cs.bridge.headline?.substring(0, 40)}</div>
+              <div style={{ fontSize: 9, color: 'var(--sd-fg-4, #666)' }}>{cs.bridge.headline?.substring(0, 40)}</div>
             </div>
           </div>
           <span style={{
             fontSize: 10, fontWeight: 700, padding: '2px 6px', borderRadius: 4,
-            background: tierColors[cs.bridge.tier], color: cs.bridge.tier === 'S' ? '#000' : '#fff',
+            background: tierColors[cs.bridge.tier], color: cs.bridge.tier === 'S' ? '#000' : 'var(--sd-fg-1, #fff)',
           }}>{cs.bridge.tier}</span>
         </div>
         <div style={{ display: 'flex', gap: 6, marginTop: 6, fontSize: 10 }}>
-          {cs.sCount > 0 && <span style={{ color: '#FFD700', fontWeight: 600 }}>{cs.sCount}S{cs.sAvgPower > 0 ? ` (${cs.sAvgPower.toFixed(1)})` : ''}</span>}
-          {cs.aCount > 0 && <span style={{ color: '#9B59B6', fontWeight: 600 }}>{cs.aCount}A</span>}
-          {cs.bCount > 0 && <span style={{ color: '#3498DB' }}>{cs.bCount}B</span>}
+          {cs.sCount > 0 && <span style={{ color: 'var(--sd-gold, #FFD700)', fontWeight: 600 }}>{cs.sCount}S{cs.sAvgPower > 0 ? ` (${cs.sAvgPower.toFixed(1)})` : ''}</span>}
+          {cs.aCount > 0 && <span style={{ color: 'var(--sd-purple, #9B59B6)', fontWeight: 600 }}>{cs.aCount}A</span>}
+          {cs.bCount > 0 && <span style={{ color: 'var(--sd-blue, #3498DB)' }}>{cs.bCount}B</span>}
           {cs.risingCount > 0 && <span style={{ color: '#2ECC71' }}>{cs.risingCount} rising</span>}
-          <span style={{ color: '#555' }}>{cs.members} total</span>
+          <span style={{ color: 'var(--sd-fg-5, #555)' }}>{cs.members} total</span>
         </div>
         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 4, fontSize: 10 }}>
-          <span style={{ color: '#666' }}>
+          <span style={{ color: 'var(--sd-fg-4, #666)' }}>
             Elite: {(cs.elitePct * 100).toFixed(0)}% · Avg: {cs.avgPower.toFixed(1)}
           </span>
-          <span style={{ color: '#FF6B35', fontWeight: 700 }}>
+          <span style={{ color: 'var(--sd-orange, #FF6B35)', fontWeight: 700 }}>
             {cs.clusterValue.toFixed(1)}
           </span>
         </div>
@@ -1326,13 +1326,13 @@ function ClusterCard({ cs, rank, tierColors, onSelect }) {
               ) : (
                 <div key={m.id} style={{
                   width: 22, height: 22, borderRadius: '50%', fontSize: 9, fontWeight: 700,
-                  background: tierColors[m.tier] || '#555', color: m.tier === 'S' ? '#000' : '#fff',
+                  background: tierColors[m.tier] || '#555', color: m.tier === 'S' ? '#000' : 'var(--sd-fg-1, #fff)',
                   display: 'flex', alignItems: 'center', justifyContent: 'center',
                 }} title={m.name}>{m.name?.charAt(0)}</div>
               )
             ))}
             {(cs.sCount + cs.aCount) > 4 && (
-              <span style={{ fontSize: 9, color: '#666' }}>+{cs.sCount + cs.aCount - 4} more</span>
+              <span style={{ fontSize: 9, color: 'var(--sd-fg-4, #666)' }}>+{cs.sCount + cs.aCount - 4} more</span>
             )}
           </div>
         )}
@@ -1341,7 +1341,7 @@ function ClusterCard({ cs, rank, tierColors, onSelect }) {
         <button
           onClick={() => setExpanded(!expanded)}
           style={{
-            marginTop: 6, background: 'none', border: 'none', color: '#888',
+            marginTop: 6, background: 'none', border: 'none', color: 'var(--sd-fg-3, #888)',
             fontSize: 10, cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center', gap: 4,
           }}
         >
@@ -1353,7 +1353,7 @@ function ClusterCard({ cs, rank, tierColors, onSelect }) {
       {/* Expanded member list */}
       {expanded && (
         <div style={{
-          borderTop: '1px solid rgba(255,255,255,0.06)',
+          borderTop: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.06)',
           padding: '6px 10px 10px', maxHeight: 250, overflowY: 'auto',
         }}>
           {cs.topMembers.map(m => (
@@ -1364,7 +1364,7 @@ function ClusterCard({ cs, rank, tierColors, onSelect }) {
                 display: 'flex', alignItems: 'center', gap: 6, padding: '4px 2px',
                 cursor: 'pointer', borderRadius: 4,
               }}
-              onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.06)'}
+              onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(var(--sd-ink, 255, 255, 255), 0.06)'}
               onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
             >
               {localPhoto(m.profile_image_url) ? (
@@ -1375,7 +1375,7 @@ function ClusterCard({ cs, rank, tierColors, onSelect }) {
               ) : null}
               <div style={{
                 width: 20, height: 20, borderRadius: '50%', flexShrink: 0, fontSize: 8, fontWeight: 700,
-                background: tierColors[m.tier] || '#555', color: m.tier === 'S' ? '#000' : '#fff',
+                background: tierColors[m.tier] || '#555', color: m.tier === 'S' ? '#000' : 'var(--sd-fg-1, #fff)',
                 display: localPhoto(m.profile_image_url) ? 'none' : 'flex',
                 alignItems: 'center', justifyContent: 'center',
               }}>{m.name?.charAt(0)}</div>
@@ -1405,13 +1405,13 @@ function generateInsights(person, user, allConnections, degree2, routes = []) {
 
   // 1. Title leverage
   if (role.match(/ceo|chief|founder|president|chairman/i)) {
-    insights.push({ icon: '👑', text: `${person.role} — C-suite executive, highest leverage contact`, color: '#FFD700' });
+    insights.push({ icon: '👑', text: `${person.role}: C-suite executive, highest leverage contact`, color: 'var(--sd-gold, #FFD700)' });
   } else if (role.match(/vp|vice president|svp|evp|managing director/i)) {
-    insights.push({ icon: '⚡', text: `${person.role} — VP-level, strong decision-making authority`, color: '#FFD700' });
+    insights.push({ icon: '⚡', text: `${person.role}: VP-level, strong decision-making authority`, color: 'var(--sd-gold, #FFD700)' });
   } else if (role.match(/director|head of|senior director/i)) {
-    insights.push({ icon: '🎯', text: `${person.role} — Senior leadership, controls team/budget`, color: '#FF6B35' });
+    insights.push({ icon: '🎯', text: `${person.role}: Senior leadership, controls team/budget`, color: 'var(--sd-orange, #FF6B35)' });
   } else if (role.match(/manager|lead|principal/i)) {
-    insights.push({ icon: '📊', text: `${person.role} — Mid-senior, operational influence`, color: '#3498DB' });
+    insights.push({ icon: '📊', text: `${person.role}: Mid-senior, operational influence`, color: 'var(--sd-blue, #3498DB)' });
   }
 
   // 2–3. A top company now, and one before, by the model's own company scores
@@ -1421,28 +1421,28 @@ function generateInsights(person, user, allConnections, degree2, routes = []) {
   // headline, so "Metadata Analyst" read as Meta and an ex-Googler as at Google.
   const { now, before } = topCompanies(person);
   if (now) {
-    insights.push({ icon: '🏢', text: `At ${now.name} (${now.score}/10) — top-tier company network access`, color: '#9B59B6' });
+    insights.push({ icon: '🏢', text: `At ${now.name} (${now.score}/10): top-tier company network access`, color: 'var(--sd-purple, #9B59B6)' });
   }
   if (before) {
-    insights.push({ icon: '📜', text: `Former ${before.name} (${before.score}/10) — carries network from previous role`, color: '#95A5A6' });
+    insights.push({ icon: '📜', text: `Former ${before.name} (${before.score}/10): carries network from previous role`, color: 'var(--sd-fg-3, #95A5A6)' });
   }
 
   // 4. Sector overlap with user
   const matchingSectors = userSectors.filter(s => headline.includes(s) || company.includes(s));
   if (matchingSectors.length > 0) {
-    insights.push({ icon: '🔗', text: `Shared sector: ${matchingSectors.join(', ')} — direct industry relevance to you`, color: '#2ECC71' });
+    insights.push({ icon: '🔗', text: `Shared sector: ${matchingSectors.join(', ')}: direct industry relevance to you`, color: '#2ECC71' });
   }
 
   // 5. Bridge / gateway value
   const bridgeCount = degree2.filter(d => d.source_connection_id === person.id).length;
   if (bridgeCount > 0) {
     const bridgeSCount = degree2.filter(d => d.source_connection_id === person.id && d.tier === 'S').length;
-    insights.push({ icon: '🌐', text: `Gateway to ${bridgeCount} degree-2 connections${bridgeSCount > 0 ? ` (${bridgeSCount} S-tier)` : ''}`, color: '#FF6B35' });
+    insights.push({ icon: '🌐', text: `Gateway to ${bridgeCount} degree-2 connections${bridgeSCount > 0 ? ` (${bridgeSCount} S-tier)` : ''}`, color: 'var(--sd-orange, #FF6B35)' });
   }
 
   // 6. Catalyst
   if (person.is_catalyst) {
-    insights.push({ icon: '⚡', text: `Catalyst — network power exceeds personal tier, high stepping-stone value`, color: '#00ff88' });
+    insights.push({ icon: '⚡', text: `Catalyst: network power exceeds personal tier, high stepping-stone value`, color: 'var(--sd-green, #00ff88)' });
   }
 
   // 7. Every way in (degree 2). Built from the merged routes, so it can never
@@ -1452,8 +1452,8 @@ function generateInsights(person, user, allConnections, degree2, routes = []) {
     const named = routes.filter(r => r.bridge);
     if (routes.length === 1) {
       insights.push(named.length
-        ? { icon: '🤝', text: `Reachable via ${named[0].bridge.name} (${named[0].bridge.tier}-tier)`, color: '#3498DB' }
-        : { icon: '🤝', text: 'Reachable through a connection we can’t name', color: '#888' });
+        ? { icon: '🤝', text: `Reachable via ${named[0].bridge.name} (${named[0].bridge.tier}-tier)`, color: 'var(--sd-blue, #3498DB)' }
+        : { icon: '🤝', text: 'Reachable through a connection we can’t name', color: 'var(--sd-fg-3, #888)' });
     } else {
       const firstName = (n) => String(n || '').trim().split(/\s+/)[0];
       const names = named.slice(0, 2).map(r => `${firstName(r.bridge.name)} (${r.bridge.tier})`);
@@ -1461,13 +1461,13 @@ function generateInsights(person, user, allConnections, degree2, routes = []) {
       const via = names.length === 0 ? 'connections we can’t name'
         : more > 0 ? `${names.join(', ')} and ${more} more`
         : names.join(' and ');
-      insights.push({ icon: '🤝', text: `Reachable ${routes.length} ways — via ${via}`, color: '#3498DB' });
+      insights.push({ icon: '🤝', text: `Reachable ${routes.length} ways, via ${via}`, color: 'var(--sd-blue, #3498DB)' });
     }
   }
 
   // Fallback if no insights generated
   if (insights.length === 0) {
-    insights.push({ icon: '📌', text: `${person.tier}-tier connection with ${parseFloat(person.power_score).toFixed(1)} power score`, color: '#888' });
+    insights.push({ icon: '📌', text: `${person.tier}-tier connection with ${parseFloat(person.power_score).toFixed(1)} power score`, color: 'var(--sd-fg-3, #888)' });
   }
 
   return insights.slice(0, 5); // Max 5 insights
@@ -1510,10 +1510,10 @@ function ReadyToScan({ connections, degree2, scanNotes, tierColors }) {
       background: 'rgba(0,255,136,0.05)', border: '1px solid rgba(0,255,136,0.2)',
       borderRadius: 10, padding: 14, marginBottom: 16,
     }}>
-      <div style={{ fontSize: 12, fontWeight: 800, color: '#00ff88', marginBottom: 4 }}>
+      <div style={{ fontSize: 12, fontWeight: 800, color: 'var(--sd-green, #00ff88)', marginBottom: 4 }}>
         Ready to scan ({ready.length})
       </div>
-      <div style={{ fontSize: 10.5, color: '#999', lineHeight: 1.5, marginBottom: 10 }}>
+      <div style={{ fontSize: 10.5, color: 'var(--sd-fg-3, #999)', lineHeight: 1.5, marginBottom: 10 }}>
         People you added through a circle whose own circle isn&apos;t scanned yet. Scanning one
         brings in who they know: 3rd degree, through the circle you found them in.
       </div>
@@ -1525,7 +1525,7 @@ function ReadyToScan({ connections, degree2, scanNotes, tierColors }) {
       ) : last && <LastRead job={last} who={last.target?.name} />}
 
       {ready.length === 0 ? (
-        <div style={{ fontSize: 11, color: '#aaa', lineHeight: 1.5 }}>
+        <div style={{ fontSize: 11, color: 'var(--sd-fg-3, #aaa)', lineHeight: 1.5 }}>
           Nobody yet. When someone you asked from a circle accepts, ↻ <b>Check for new</b> brings
           them into your connections, and they show here.
         </div>
@@ -1539,20 +1539,20 @@ function ReadyToScan({ connections, degree2, scanNotes, tierColors }) {
                 aria-label={`Scan ${p.name}’s circle: opens the Scan page to confirm`}
                 style={{
                   display: 'flex', alignItems: 'center', gap: 8, padding: '8px 10px', borderRadius: 8,
-                  textDecoration: 'none', color: '#fff',
-                  background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(0,255,136,0.18)',
+                  textDecoration: 'none', color: 'var(--sd-fg-1, #fff)',
+                  background: 'rgba(var(--sd-ink, 255, 255, 255), 0.04)', border: '1px solid rgba(0,255,136,0.18)',
                 }}>
                 <span style={{ width: 8, height: 8, borderRadius: '50%', flexShrink: 0, background: tierColors[p.tier] || '#888', boxShadow: '0 0 0 2px rgba(0,255,136,0.45)' }} />
                 <span style={{ flex: 1, minWidth: 0 }}>
                   <span style={{ fontSize: 12, fontWeight: 700 }}>{p.name}</span>
                   <span style={{ fontSize: 10, color: tierColors[p.tier] || '#888', fontWeight: 700, marginLeft: 6 }}>{p.tier}</span>
                   {from && (
-                    <span style={{ display: 'block', fontSize: 10, color: '#888', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                    <span style={{ display: 'block', fontSize: 10, color: 'var(--sd-fg-3, #888)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                       was in {first(from)}&apos;s circle
                     </span>
                   )}
                 </span>
-                <span style={{ fontSize: 10.5, fontWeight: 700, color: '#00ff88', whiteSpace: 'nowrap' }}>
+                <span style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--sd-green, #00ff88)', whiteSpace: 'nowrap' }}>
                   {now ? 'Scanning…' : 'Scan… →'}
                 </span>
               </Link>
@@ -1560,7 +1560,7 @@ function ReadyToScan({ connections, degree2, scanNotes, tierColors }) {
           })}
           {ready.length > 5 && (
             <button type="button" onClick={() => setAll((v) => !v)} style={{
-              background: 'none', border: 'none', color: '#888', fontSize: 10.5, fontWeight: 600, cursor: 'pointer', padding: '2px 0', textAlign: 'left',
+              background: 'none', border: 'none', color: 'var(--sd-fg-3, #888)', fontSize: 10.5, fontWeight: 600, cursor: 'pointer', padding: '2px 0', textAlign: 'left',
             }}>
               {all ? 'Show fewer' : `Show all ${ready.length}`}
             </button>
@@ -1569,7 +1569,7 @@ function ReadyToScan({ connections, degree2, scanNotes, tierColors }) {
       )}
 
       {ready.length > 0 && (
-        <div style={{ fontSize: 10, color: '#888', lineHeight: 1.5, marginTop: 8 }}>
+        <div style={{ fontSize: 10, color: 'var(--sd-fg-3, #888)', lineHeight: 1.5, marginTop: 8 }}>
           Each scan: {cost.profileViews} profile view, then one LinkedIn search for every page of their
           list, up to {cost.searches} pages (about {cost.minutes} min for a whole list). Nothing starts
           until you confirm it on the Scan page.
@@ -1577,10 +1577,10 @@ function ReadyToScan({ connections, degree2, scanNotes, tierColors }) {
       )}
 
       {hidden.length > 0 && (
-        <div style={{ marginTop: 10, fontSize: 10.5, color: '#777', lineHeight: 1.6 }}>
+        <div style={{ marginTop: 10, fontSize: 10.5, color: 'var(--sd-fg-4, #777)', lineHeight: 1.6 }}>
           {hidden.slice(0, 3).map((p) => (
             <div key={p.id} style={{ opacity: 0.7 }}>
-              <span aria-hidden="true">🔒</span> {p.name} <span style={{ color: '#666' }}>· their list is hidden</span>
+              <span aria-hidden="true">🔒</span> {p.name} <span style={{ color: 'var(--sd-fg-4, #666)' }}>· their list is hidden</span>
             </div>
           ))}
           {hidden.length > 3 && <div style={{ opacity: 0.7 }}>🔒 and {hidden.length - 3} more with hidden lists</div>}
@@ -1588,13 +1588,13 @@ function ReadyToScan({ connections, degree2, scanNotes, tierColors }) {
       )}
 
       {others > 0 && (
-        <div style={{ fontSize: 10.5, color: '#888', lineHeight: 1.5, marginTop: 10 }}>
+        <div style={{ fontSize: 10.5, color: 'var(--sd-fg-3, #888)', lineHeight: 1.5, marginTop: 10 }}>
           {others.toLocaleString('en-US')} of your other connections aren&apos;t scanned yet.{' '}
-          <Link href="/setup" style={{ color: '#3498DB', textDecoration: 'none' }}>Map them in batches on the Scan page →</Link>
+          <Link href="/setup" style={{ color: 'var(--sd-blue, #3498DB)', textDecoration: 'none' }}>Map them in batches on the Scan page →</Link>
         </div>
       )}
       {busy && (
-        <div style={{ fontSize: 10, color: '#bbb', marginTop: 8 }}>
+        <div style={{ fontSize: 10, color: 'var(--sd-fg-2, #bbb)', marginTop: 8 }}>
           {busy}. One scan at a time.
         </div>
       )}