six-degrees 0.6.0 → 0.8.0

package/.next/standalone/app/profile/page.js

@@ -116,21 +116,21 @@ function ProfileInner() {
   if (IS_DEMO) {
     return (
       <div style={{
-        minHeight: '100vh', background: 'var(--sd-page)', color: 'rgba(255,255,255,0.7)',
+        minHeight: '100vh', background: 'var(--sd-page)', color: 'rgba(var(--sd-ink, 255, 255, 255), 0.7)',
         display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
         gap: 12, textAlign: 'center', padding: 24,
         fontFamily: 'var(--sd-font)',
       }}>
-        <h2 style={{ margin: 0, fontSize: 20, fontWeight: 700, color: '#fff' }}>Not part of the demo</h2>
+        <h2 style={{ margin: 0, fontSize: 20, fontWeight: 700, color: 'var(--sd-fg-1, #fff)' }}>Not part of the demo</h2>
         <p style={{ margin: 0, fontSize: 13 }}>The public demo includes the Network Circle and Degrees views only.</p>
-        <Link href="/" style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', textDecoration: 'none' }}>&larr; Back to the network</Link>
+        <Link href="/" style={{ fontSize: 12, color: 'rgba(var(--sd-ink, 255, 255, 255), 0.5)', textDecoration: 'none' }}>&larr; Back to the network</Link>
       </div>
     );
   }
 
   if (loading) {
     return (
-      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--sd-page)', color: '#fff' }}>
+      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--sd-page)', color: 'var(--sd-fg-1, #fff)' }}>
         Loading profile...
       </div>
     );
@@ -155,16 +155,16 @@ function ProfileInner() {
 
   return (
     <div style={{
-      height: '100vh', background: 'var(--sd-page)', color: '#fff',
+      height: '100vh', background: 'var(--sd-page)', color: 'var(--sd-fg-1, #fff)',
       fontFamily: 'var(--sd-font)',
       display: 'flex', flexDirection: 'column', overflow: 'hidden',
     }}>
       {/* Header */}
-      <header style={{ padding: '16px 24px', borderBottom: '1px solid rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', gap: 16 }}>
+      <header style={{ padding: '16px 24px', borderBottom: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)', display: 'flex', alignItems: 'center', gap: 16 }}>
         <Link href="/" style={{
-          display: 'flex', alignItems: 'center', gap: 6, color: '#888', textDecoration: 'none',
+          display: 'flex', alignItems: 'center', gap: 6, color: 'var(--sd-fg-3, #888)', textDecoration: 'none',
           fontSize: 13, fontWeight: 600, padding: '6px 14px', borderRadius: 6,
-          background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)',
+          background: 'rgba(var(--sd-ink, 255, 255, 255), 0.06)', border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)',
         }}>
           <span style={{ fontSize: 16 }}>&larr;</span> Back to Map
         </Link>
@@ -174,11 +174,11 @@ function ProfileInner() {
           WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
         }}>Profile</h1>
         {/* Profile, or Insights: network health, built from your own scans */}
-        <div role="tablist" aria-label="Profile or Insights" style={{ display: 'flex', gap: 3, marginLeft: 8, padding: 3, borderRadius: 9, background: 'rgba(255,255,255,0.06)' }}>
+        <div role="tablist" aria-label="Profile or Insights" style={{ display: 'flex', gap: 3, marginLeft: 8, padding: 3, borderRadius: 9, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.06)' }}>
           {[['profile', 'Profile'], ['insights', 'Insights']].map(([k, label]) => (
             <button key={k} type="button" role="tab" aria-selected={view === k} onClick={() => showView(k)} style={{
               padding: '6px 14px', borderRadius: 7, border: 'none', cursor: 'pointer', fontSize: 13, fontWeight: 700,
-              background: view === k ? 'linear-gradient(135deg, #FFD700, #FF6B35)' : 'transparent', color: view === k ? '#000' : '#aab',
+              background: view === k ? 'linear-gradient(135deg, #FFD700, #FF6B35)' : 'transparent', color: view === k ? '#000' : 'var(--sd-fg-3, #aab)',
             }}>{k === 'insights' ? '✦ ' : ''}{label}</button>
           ))}
         </div>
@@ -187,7 +187,7 @@ function ProfileInner() {
       <div style={{ flex: 1, overflow: 'auto', padding: '30px 20px' }}>
       {view === 'insights' ? (
         <div style={{ maxWidth: 820, margin: '0 auto' }}>
-          <div style={{ fontSize: 13, color: '#8a8fa8', lineHeight: 1.6 }}>
+          <div style={{ fontSize: 13, color: 'var(--sd-fg-3, #8a8fa8)', lineHeight: 1.6 }}>
             How your network holds together, from the circles you&rsquo;ve scanned. Only your own numbers, never a
             comparison with anyone else&rsquo;s.
           </div>
@@ -198,7 +198,7 @@ function ProfileInner() {
 
         {/* === LEVEL CARD === */}
         <div style={{
-          background: 'rgba(255,255,255,0.05)', borderRadius: 16, padding: 32, marginBottom: 24,
+          background: 'rgba(var(--sd-ink, 255, 255, 255), 0.05)', borderRadius: 16, padding: 32, marginBottom: 24,
           border: '1px solid rgba(255,215,0,0.2)', textAlign: 'center',
         }}>
           {/* Level circle */}
@@ -212,29 +212,29 @@ function ProfileInner() {
             {s.level}
           </div>
           <div style={{ fontSize: 24, fontWeight: 700, marginBottom: 4 }}>{profile.name}</div>
-          <div style={{ fontSize: 14, color: '#888', marginBottom: 4 }}>{profile.headline}</div>
+          <div style={{ fontSize: 14, color: 'var(--sd-fg-3, #888)', marginBottom: 4 }}>{profile.headline}</div>
           <div style={{
             display: 'inline-block', padding: '4px 16px', borderRadius: 20,
             background: 'rgba(255,215,0,0.15)', border: '1px solid rgba(255,215,0,0.3)',
-            color: '#FFD700', fontSize: 13, fontWeight: 700, marginBottom: 16,
+            color: 'var(--sd-gold, #FFD700)', fontSize: 13, fontWeight: 700, marginBottom: 16,
           }}>
             {getLevelName(s.level)}
           </div>
 
           {/* XP Progress bar */}
           <div style={{ maxWidth: 300, margin: '0 auto' }}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: '#666', marginBottom: 4 }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--sd-fg-4, #666)', marginBottom: 4 }}>
               <span>Level {s.level}</span>
               <span>Level {s.level + 1}</span>
             </div>
-            <div style={{ height: 8, background: 'rgba(255,255,255,0.1)', borderRadius: 4 }}>
+            <div style={{ height: 8, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.1)', borderRadius: 4 }}>
               <div style={{
                 height: '100%', width: `${Math.min(s.xpProgress, 100)}%`,
                 background: 'linear-gradient(90deg, #FFD700, #FF6B35)', borderRadius: 4,
                 transition: 'width 1s ease',
               }} />
             </div>
-            <div style={{ fontSize: 10, color: '#888', marginTop: 4 }}>
+            <div style={{ fontSize: 10, color: 'var(--sd-fg-3, #888)', marginTop: 4 }}>
               Network Power: {s.networkPower.toLocaleString()}
             </div>
           </div>
@@ -253,21 +253,21 @@ function ProfileInner() {
           border: '1px solid rgba(255,107,53,0.2)',
         }}>
           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
-            <h3 style={{ fontSize: 14, fontWeight: 700, margin: 0, color: '#FF6B35' }}>Queue Progress</h3>
-            <Link href="/queue" style={{ fontSize: 11, color: '#FF6B35', textDecoration: 'none', fontWeight: 600 }}>View Queue &rarr;</Link>
+            <h3 style={{ fontSize: 14, fontWeight: 700, margin: 0, color: 'var(--sd-orange, #FF6B35)' }}>Queue Progress</h3>
+            <Link href="/queue" style={{ fontSize: 11, color: 'var(--sd-orange, #FF6B35)', textDecoration: 'none', fontWeight: 600 }}>View Queue &rarr;</Link>
           </div>
           <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
             <div style={{ textAlign: 'center' }}>
               <div style={{ fontSize: 22, fontWeight: 700, color: '#FFA500' }}>{queueStats.total}</div>
-              <div style={{ fontSize: 10, color: '#888' }}>In Queue</div>
+              <div style={{ fontSize: 10, color: 'var(--sd-fg-3, #888)' }}>In Queue</div>
             </div>
             <div style={{ textAlign: 'center' }}>
-              <div style={{ fontSize: 22, fontWeight: 700, color: '#3498DB' }}>{queueStats.sent}</div>
-              <div style={{ fontSize: 10, color: '#888' }}>Sent</div>
+              <div style={{ fontSize: 22, fontWeight: 700, color: 'var(--sd-blue, #3498DB)' }}>{queueStats.sent}</div>
+              <div style={{ fontSize: 10, color: 'var(--sd-fg-3, #888)' }}>Sent</div>
             </div>
             <div style={{ textAlign: 'center' }}>
-              <div style={{ fontSize: 22, fontWeight: 700, color: '#00ff88' }}>{queueStats.accepted}</div>
-              <div style={{ fontSize: 10, color: '#888' }}>Accepted</div>
+              <div style={{ fontSize: 22, fontWeight: 700, color: 'var(--sd-green, #00ff88)' }}>{queueStats.accepted}</div>
+              <div style={{ fontSize: 10, color: 'var(--sd-fg-3, #888)' }}>Accepted</div>
             </div>
           </div>
         </div>
@@ -275,8 +275,8 @@ function ProfileInner() {
         {/* === NOTIFICATIONS === */}
         {notifications.length > 0 && (
           <div style={{
-            background: 'rgba(255,255,255,0.04)', borderRadius: 12, padding: 20, marginBottom: 24,
-            border: '1px solid rgba(255,255,255,0.08)',
+            background: 'rgba(var(--sd-ink, 255, 255, 255), 0.04)', borderRadius: 12, padding: 20, marginBottom: 24,
+            border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.08)',
           }}>
             <h3 style={{ fontSize: 14, fontWeight: 700, marginTop: 0, marginBottom: 12 }}>
               Recent Activity ({notifications.filter(n => !n.seen).length} new)
@@ -290,10 +290,10 @@ function ProfileInner() {
                 }}>
                   <span style={{ fontSize: 16 }}>{n.icon || '📌'}</span>
                   <div style={{ flex: 1, minWidth: 0 }}>
-                    <div style={{ fontSize: 12, fontWeight: 600, color: n.seen ? '#888' : '#fff' }}>{n.title}</div>
-                    {n.message && <div style={{ fontSize: 10, color: '#666' }}>{n.message}</div>}
+                    <div style={{ fontSize: 12, fontWeight: 600, color: n.seen ? 'var(--sd-fg-3, #888)' : 'var(--sd-fg-1, #fff)' }}>{n.title}</div>
+                    {n.message && <div style={{ fontSize: 10, color: 'var(--sd-fg-4, #666)' }}>{n.message}</div>}
                   </div>
-                  <span style={{ fontSize: 9, color: '#555', flexShrink: 0 }}>
+                  <span style={{ fontSize: 9, color: 'var(--sd-fg-5, #555)', flexShrink: 0 }}>
                     {new Date(n.created_at).toLocaleDateString()}
                   </span>
                 </div>
@@ -316,8 +316,8 @@ function ProfileInner() {
 
         {/* === TIER DISTRIBUTION === */}
         <div style={{
-          background: 'rgba(255,255,255,0.04)', borderRadius: 12, padding: 20, marginBottom: 24,
-          border: '1px solid rgba(255,255,255,0.08)',
+          background: 'rgba(var(--sd-ink, 255, 255, 255), 0.04)', borderRadius: 12, padding: 20, marginBottom: 24,
+          border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.08)',
         }}>
           <h3 style={{ fontSize: 14, fontWeight: 700, marginTop: 0, marginBottom: 12 }}>Tier Distribution</h3>
           {['S', 'A', 'B', 'C', 'D'].map(tier => {
@@ -327,9 +327,9 @@ function ProfileInner() {
               <div key={tier} style={{ marginBottom: 8 }}>
                 <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, marginBottom: 2 }}>
                   <span style={{ color: tierColors[tier], fontWeight: 600 }}>{tier}-Tier</span>
-                  <span style={{ color: '#888' }}>{count} ({pct.toFixed(1)}%)</span>
+                  <span style={{ color: 'var(--sd-fg-3, #888)' }}>{count} ({pct.toFixed(1)}%)</span>
                 </div>
-                <div style={{ height: 6, background: 'rgba(255,255,255,0.08)', borderRadius: 3 }}>
+                <div style={{ height: 6, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.08)', borderRadius: 3 }}>
                   <div style={{ height: '100%', width: `${pct}%`, background: tierColors[tier], borderRadius: 3 }} />
                 </div>
               </div>
@@ -339,26 +339,26 @@ function ProfileInner() {
 
         {/* === DEGREE-2 REACH === */}
         <div style={{
-          background: 'rgba(255,255,255,0.04)', borderRadius: 12, padding: 20, marginBottom: 24,
-          border: '1px solid rgba(255,255,255,0.08)',
+          background: 'rgba(var(--sd-ink, 255, 255, 255), 0.04)', borderRadius: 12, padding: 20, marginBottom: 24,
+          border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.08)',
         }}>
           <h3 style={{ fontSize: 14, fontWeight: 700, marginTop: 0, marginBottom: 12 }}>Degree-2 Reach</h3>
           <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
             <div>
-              <div style={{ fontSize: 24, fontWeight: 700, color: '#FF6B35' }}>{s.d2Count}</div>
-              <div style={{ fontSize: 11, color: '#888' }}>People reachable via bridges</div>
+              <div style={{ fontSize: 24, fontWeight: 700, color: 'var(--sd-orange, #FF6B35)' }}>{s.d2Count}</div>
+              <div style={{ fontSize: 11, color: 'var(--sd-fg-3, #888)' }}>People reachable via bridges</div>
             </div>
             <div>
-              <div style={{ fontSize: 24, fontWeight: 700, color: '#FFD700' }}>{s.d2Tiers.S}</div>
-              <div style={{ fontSize: 11, color: '#888' }}>S-Tier degree-2</div>
+              <div style={{ fontSize: 24, fontWeight: 700, color: 'var(--sd-gold, #FFD700)' }}>{s.d2Tiers.S}</div>
+              <div style={{ fontSize: 11, color: 'var(--sd-fg-3, #888)' }}>S-Tier degree-2</div>
             </div>
           </div>
         </div>
 
         {/* === MILESTONES === */}
         <div style={{
-          background: 'rgba(255,255,255,0.04)', borderRadius: 12, padding: 20, marginBottom: 24,
-          border: '1px solid rgba(255,255,255,0.08)',
+          background: 'rgba(var(--sd-ink, 255, 255, 255), 0.04)', borderRadius: 12, padding: 20, marginBottom: 24,
+          border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.08)',
         }}>
           <h3 style={{ fontSize: 14, fontWeight: 700, marginTop: 0, marginBottom: 12 }}>
             Milestones ({milestones.filter(m => m.done).length}/{milestones.length})
@@ -367,9 +367,9 @@ function ProfileInner() {
             {milestones.map((m, i) => (
               <div key={i} style={{
                 padding: '8px 10px', borderRadius: 8, fontSize: 12,
-                background: m.done ? 'rgba(255,215,0,0.08)' : 'rgba(255,255,255,0.02)',
-                border: `1px solid ${m.done ? 'rgba(255,215,0,0.2)' : 'rgba(255,255,255,0.05)'}`,
-                color: m.done ? '#FFD700' : '#555',
+                background: m.done ? 'rgba(255,215,0,0.08)' : 'rgba(var(--sd-ink, 255, 255, 255), 0.02)',
+                border: `1px solid ${m.done ? 'rgba(255,215,0,0.2)' : 'rgba(var(--sd-ink, 255, 255, 255), 0.05)'}`,
+                color: m.done ? 'var(--sd-gold, #FFD700)' : 'var(--sd-fg-5, #555)',
                 display: 'flex', alignItems: 'center', gap: 6,
               }}>
                 <span style={{ fontSize: 16 }}>{m.done ? m.icon : '🔒'}</span>
@@ -381,37 +381,37 @@ function ProfileInner() {
 
         {/* === TOP COMPANIES === */}
         <div style={{
-          background: 'rgba(255,255,255,0.04)', borderRadius: 12, padding: 20, marginBottom: 24,
-          border: '1px solid rgba(255,255,255,0.08)',
+          background: 'rgba(var(--sd-ink, 255, 255, 255), 0.04)', borderRadius: 12, padding: 20, marginBottom: 24,
+          border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.08)',
         }}>
           <h3 style={{ fontSize: 14, fontWeight: 700, marginTop: 0, marginBottom: 12 }}>Top Companies in Your Network</h3>
           {s.topCompanies.map(([company, count], i) => (
             <div key={i} style={{
               display: 'flex', justifyContent: 'space-between', padding: '4px 0',
-              borderBottom: i < s.topCompanies.length - 1 ? '1px solid rgba(255,255,255,0.04)' : 'none',
+              borderBottom: i < s.topCompanies.length - 1 ? '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.04)' : 'none',
               fontSize: 12,
             }}>
               <span>{company}</span>
-              <span style={{ color: '#888' }}>{count}</span>
+              <span style={{ color: 'var(--sd-fg-3, #888)' }}>{count}</span>
             </div>
           ))}
         </div>
 
         {/* === SECTORS === */}
         <div style={{
-          background: 'rgba(255,255,255,0.04)', borderRadius: 12, padding: 20,
-          border: '1px solid rgba(255,255,255,0.08)',
+          background: 'rgba(var(--sd-ink, 255, 255, 255), 0.04)', borderRadius: 12, padding: 20,
+          border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.08)',
         }}>
           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
             <h3 style={{ fontSize: 14, fontWeight: 700, margin: 0 }}>Your Sectors</h3>
-            <Link href="/settings#sector" style={{ fontSize: 11, color: '#3498DB', textDecoration: 'none', fontWeight: 600 }}>
+            <Link href="/settings#sector" style={{ fontSize: 11, color: 'var(--sd-blue, #3498DB)', textDecoration: 'none', fontWeight: 600 }}>
               {sectorFocus?.sectors?.length ? 'Change' : sectorFocus && !sectorFocus.failed ? 'Pick in Settings' : 'Settings'} &rarr;
             </Link>
           </div>
           {!sectorFocus ? (
-            <div style={{ fontSize: 12, color: '#888' }}>Loading…</div>
+            <div style={{ fontSize: 12, color: 'var(--sd-fg-3, #888)' }}>Loading…</div>
           ) : sectorFocus.failed ? (
-            <div style={{ fontSize: 12, color: '#ff7676' }}>
+            <div style={{ fontSize: 12, color: 'var(--sd-red, #ff7676)' }}>
               Couldn&rsquo;t load your sectors. Reload this page, or open Settings to see them.
             </div>
           ) : sectorFocus.sectors?.length ? (
@@ -425,12 +425,12 @@ function ProfileInner() {
                   }}>{ind.label}</span>
                 );
               })}
-              <span style={{ fontSize: 11, color: '#888' }}>
+              <span style={{ fontSize: 11, color: 'var(--sd-fg-3, #888)' }}>
                 {sectorFocus.strength === 'strong' ? 'Strong' : 'Lean'}: companies here count for more in your scores.
               </span>
             </div>
           ) : (
-            <div style={{ fontSize: 12, color: '#888' }}>
+            <div style={{ fontSize: 12, color: 'var(--sd-fg-3, #888)' }}>
               None picked. Pick up to three in Settings and companies in them count for more in your scores.
             </div>
           )}
@@ -446,11 +446,11 @@ function ProfileInner() {
 function StatCard({ label, value, color }) {
   return (
     <div style={{
-      background: 'rgba(255,255,255,0.04)', borderRadius: 10, padding: '14px 12px',
-      border: '1px solid rgba(255,255,255,0.08)', textAlign: 'center',
+      background: 'rgba(var(--sd-ink, 255, 255, 255), 0.04)', borderRadius: 10, padding: '14px 12px',
+      border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.08)', textAlign: 'center',
     }}>
       <div style={{ fontSize: 22, fontWeight: 700, color: color || '#fff' }}>{value}</div>
-      <div style={{ fontSize: 10, color: '#888', marginTop: 2 }}>{label}</div>
+      <div style={{ fontSize: 10, color: 'var(--sd-fg-3, #888)', marginTop: 2 }}>{label}</div>
     </div>
   );
 }