Session 39: Design system Phase H — QA pass, §13 parity verified, conversion COMPLETE (1907 tests)

Final phase of the VYNDR 2.0 conversion (Sessions 33-39). Verify -> fix -> lock.
Frontend-only; zero backend changes.

§13 automated checklist: all PASS or FIXED.
- QA.1 token resolution FIXED: ProcessingGrade #00ffb8 -> var(--g-ap);
  game/[id] sport literals -> var(--s-*). Remaining hex documented as intentional
  (var-with-fallback, Next metadata, bespoke intel-surface shades).
- QA.6 glitch discipline: ZERO glitch on data components.
- QA.4/5/8/11/16/18 verified; QA.9 (cmd palette) documented deferred;
  QA.17 (AI slop) flagged for Kev's manual browser review.

De-flake: soccerFeatureExtractorCascade hit Jest's 5s default under full-suite
load (falls through to live adapters on cache miss) -> jest.setTimeout(20000),
same family as the S32 pipeline test. Verified stable across 3 full-suite runs.

New: tests/unit/vyndrParityQA.test.js (17 tests locking the parity invariants).

Backend 1890 -> 1907, 146 suites, zero regressions (stable x3). Web build clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/src/app/game/[id]/page.tsx

@@ -49,10 +49,11 @@ interface PropEntry {
   alt_lines?: { line: number; grade: string; hit_rate?: number }[];
 }
 
+// Session 39 (QA.1) — resolve to sport tokens instead of duplicate literals.
 const SPORT_COLOR: Record<Sport, string> = {
-  NBA: '#E94B3C',
-  MLB: '#1E90FF',
-  WNBA: '#FFB347',
+  NBA: 'var(--s-nba)',
+  MLB: 'var(--s-mlb)',
+  WNBA: 'var(--s-wnba)',
 };
 
 export default function GamePage({ params }: { params: Promise<{ id: string }> }) {

web/src/components/vyndr/ProcessingGrade.tsx

@@ -13,10 +13,10 @@ function MiniBrain({ size = 56 }: { size?: number }) {
   return (
     <svg width={size} height={size} viewBox="0 0 60 56" aria-hidden style={{ flexShrink: 0 }}>
       {links.map(([a, b], i) => (
-        <line key={i} className="brain-link" x1={nodes[a][0]} y1={nodes[a][1]} x2={nodes[b][0]} y2={nodes[b][1]} stroke="#00ffb8" strokeWidth="1" opacity="0.5" />
+        <line key={i} className="brain-link" x1={nodes[a][0]} y1={nodes[a][1]} x2={nodes[b][0]} y2={nodes[b][1]} stroke="var(--g-ap)" strokeWidth="1" opacity="0.5" />
       ))}
       {nodes.map(([x, y], i) => (
-        <circle key={i} className="brain-node" cx={x} cy={y} r="2.6" fill="#00ffb8" style={{ animationDelay: `${(i % 5) * 0.2}s` }} />
+        <circle key={i} className="brain-node" cx={x} cy={y} r="2.6" fill="var(--g-ap)" style={{ animationDelay: `${(i % 5) * 0.2}s` }} />
       ))}
     </svg>
   );
@@ -84,7 +84,7 @@ export default function ProcessingGrade({ data, replayKey = 0, onShare, onAddToP
             </div>
           </div>
           <div style={{ marginLeft: 'auto', textAlign: 'right' }}>
-            <div className="mono" style={{ fontSize: 30, fontWeight: 800, color: '#00ffb8', textShadow: '0 0 16px rgba(0,255,184,.5)' }}>{pct}%</div>
+            <div className="mono" style={{ fontSize: 30, fontWeight: 800, color: 'var(--g-ap)', textShadow: '0 0 16px rgba(0,255,184,.5)' }}>{pct}%</div>
             <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.12em', color: 'rgba(232,255,244,.5)' }}>WEIGHING 40+ FACTORS</div>
           </div>
         </div>
@@ -94,16 +94,16 @@ export default function ProcessingGrade({ data, replayKey = 0, onShare, onAddToP
             const on = i < lit;
             return (
               <div key={i} className={on ? 'factor-ignite' : ''} style={{ display: 'flex', alignItems: 'center', gap: 12, opacity: on ? 1 : 0.18, transition: 'opacity .2s' }}>
-                <span style={{ width: 8, height: 8, borderRadius: '50%', flexShrink: 0, background: on ? '#00ffb8' : 'rgba(232,255,244,.3)', boxShadow: on ? '0 0 10px rgba(0,255,184,.8)' : 'none' }} />
+                <span style={{ width: 8, height: 8, borderRadius: '50%', flexShrink: 0, background: on ? 'var(--g-ap)' : 'rgba(232,255,244,.3)', boxShadow: on ? '0 0 10px rgba(0,255,184,.8)' : 'none' }} />
                 <span className="mono" style={{ fontSize: 13, color: on ? '#e8fff4' : 'rgba(232,255,244,.4)' }}>{f}</span>
-                {on && <span className="mono" style={{ marginLeft: 'auto', fontSize: 10.5, color: '#00ffb8', letterSpacing: '0.08em' }}>✓ WEIGHED</span>}
+                {on && <span className="mono" style={{ marginLeft: 'auto', fontSize: 10.5, color: 'var(--g-ap)', letterSpacing: '0.08em' }}>✓ WEIGHED</span>}
               </div>
             );
           })}
         </div>
 
         <div style={{ marginTop: 24, height: 4, background: 'rgba(0,0,0,.35)', borderRadius: 3, overflow: 'hidden' }}>
-          <div style={{ width: `${pct}%`, height: '100%', background: 'linear-gradient(90deg, var(--acc-1), #00ffb8)', borderRadius: 3, transition: 'width .18s ease-out', boxShadow: '0 0 10px rgba(0,255,184,.6)' }} />
+          <div style={{ width: `${pct}%`, height: '100%', background: 'linear-gradient(90deg, var(--acc-1), var(--g-ap))', borderRadius: 3, transition: 'width .18s ease-out', boxShadow: '0 0 10px rgba(0,255,184,.6)' }} />
         </div>
       </div>
     </div>