M3.1 token alignment — the palette to Design's exact package values

Reconcile finding: the live tokens had DRIFTED from Design's package (HANDOFF
"Tokens (exact)"). Per the standing conflict rule (Design specified exact hexes
→ rejected the drift → Design wins), aligned the whole palette:
- Surfaces: --bg-1 #0E0E16→#0E0E14, --bg-2 #15151F→#14141E; added --bg-deep
  #0A0A10 + --hairline #101018 (Design's ramp).
- Text: --text-0 #E8E8F0→#F0F0F0, --text-1 #7A7A8E→#B8BCC8 (Design's secondary
  is far brighter), --text-2 #4A4A5E→#707080, added --text-3 #4a4a58 micro.
- Borders: #1E1E2E→#1E1E2A, #2A2A3E→#2A2A38.
- GRADES (the big one): B blue #4A9EFF → neutral-bright WHITE #F0F0F0; C amber
  #FFB347 → muted GREY #B8BCC8; D #FF5252 → #FF4757. The old blue/amber actually
  violated DESIGN-SPEC v2's OWN "B neutral-bright, C muted" — this fixes a
  long-standing drift, confirmed by Design's package. Amber stays its own token
  (--amber); --warning decoupled to --amber; --miss → #FF4757.
- vyndrTokens.js GRADE_HEX mirror + the design-system test updated to match.

Big VISUAL change (grade color language), VISUALLY UNVERIFIED at 390px/desktop
— on the Chrome-audit list. Every surface inherits it, so it lands first.

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

web/src/app/globals.css

@@ -7,32 +7,39 @@
    ───────────────────────────────────────────────────────── */
 
 :root {
-  /* Surfaces — powered-on screen, slightly warmer than pure black */
-  --bg-0: #06060B;
-  --bg-1: #0E0E16;
-  --bg-2: #15151F;
+  /* Surfaces — Design package exact ramp (HANDOFF): void/card/elevated +
+     deep-panel + row-hairline. (2026-07-16 token alignment — Design wins.) */
+  --bg-0: #06060B;   /* void   */
+  --bg-1: #0E0E14;   /* card   (was #0E0E16) */
+  --bg-2: #14141E;   /* elevated (was #15151F) */
   --bg-3: #1A1A26;
+  --bg-deep: #0A0A10;    /* deep panel */
+  --hairline: #101018;   /* row hairline */
 
-  /* Borders */
-  --border: #1E1E2E;
-  --border-hi: #2A2A3E;
+  /* Borders — Design exact */
+  --border: #1E1E2A;     /* was #1E1E2E */
+  --border-hi: #2A2A38;  /* was #2A2A3E */
 
-  /* Text */
-  --text-0: #E8E8F0;
-  --text-1: #7A7A8E;
-  --text-2: #4A4A5E;
+  /* Text — Design exact ramp F0F0F0 / B8BCC8 / 707080 (+ 4a4a58 micro) */
+  --text-0: #F0F0F0;   /* was #E8E8F0 */
+  --text-1: #B8BCC8;   /* was #7A7A8E — Design's secondary is far brighter */
+  --text-2: #707080;   /* was #4A4A5E */
+  --text-3: #4a4a58;   /* micro-labels */
 
   /* Brand accent — deep forest, button green, glow */
   --acc-0: #0F3D2E;
   --acc-1: #1A5A42;
   --acc-glow: rgba(15, 61, 46, 0.25);
 
-  /* Grade tiers — the most important colors */
+  /* Grade tiers — the most important colors. Design package (HANDOFF): A-tier
+     green+glow · B neutral-bright WHITE · C muted GREY · D/F red. The old
+     B=blue / C=amber violated DESIGN-SPEC v2's own "B neutral-bright, C muted"
+     — aligned to Design 2026-07-16. Amber stays its own token (--amber). */
   --grade-aplus: #00FFB8;
   --grade-a:     #00D4A0;
-  --grade-b:     #4A9EFF;
-  --grade-c:     #FFB347;
-  --grade-d:     #FF5252;
+  --grade-b:     #F0F0F0;   /* was #4A9EFF (blue) */
+  --grade-c:     #B8BCC8;   /* was #FFB347 (amber) */
+  --grade-d:     #FF4757;   /* was #FF5252 */
 
   /* Sport tints */
   --nba:  #E94B3C;
@@ -44,7 +51,7 @@
 
   /* Signals */
   --danger: var(--grade-d);
-  --warning: var(--grade-c);
+  --warning: var(--amber);   /* decoupled from grade-C (now grey) — warning is amber */
   --success: var(--grade-a);
 
   /* Geometry */
@@ -71,9 +78,9 @@
   /* Grade tokens (the product's core color language) */
   --g-ap: #00ffb8;   /* A+  rarest, max glow */
   --g-a:  #00d4a0;   /* A   workhorse green / primary CTA */
-  --g-b:  #4a9eff;   /* B   blue */
-  --g-c:  #ffb347;   /* C   amber */
-  --g-d:  #ff5252;   /* D   red */
+  --g-b:  #F0F0F0;   /* B   neutral-bright white (Design; was blue) */
+  --g-c:  #B8BCC8;   /* C   muted grey (Design; was amber) */
+  --g-d:  #FF4757;   /* D   red (Design; was #ff5252) */
 
   /* Sport tokens */
   --s-nba:  #e94b3c;
@@ -88,7 +95,7 @@
   /* Semantic */
   --live: #ff3b3b;
   --hit:  #00d4a0;
-  --miss: #ff5252;
+  --miss: #FF4757;   /* Design red (was #ff5252) */
 
   /* Scanline base opacity + hero grade color */
   --scan-op: 0.04;

web/src/lib/vyndrTokens.js

@@ -13,10 +13,12 @@ const GRADE_COLORS = {
 };
 
 /* Grade → raw hex (for SVG fills / contexts where a var won't resolve). */
+// Design package exact grades (HANDOFF): A green · B neutral-bright white ·
+// C muted grey · D/F red #FF4757 (was blue/amber/#ff5252 — aligned 2026-07-16).
 const GRADE_HEX = {
   'A+': '#00ffb8', A: '#00d4a0', 'A-': '#00d4a0',
-  'B+': '#4a9eff', B: '#4a9eff', 'B-': '#4a9eff',
-  C: '#ffb347', D: '#ff5252',
+  'B+': '#f0f0f0', B: '#f0f0f0', 'B-': '#f0f0f0',
+  C: '#b8bcc8', D: '#ff4757',
 };
 
 /* Sport config map. */
@@ -38,7 +40,7 @@ function gradeColor(g) {
   return GRADE_COLORS[g] || 'var(--text-0)';
 }
 function gradeHex(g) {
-  return GRADE_HEX[g] || '#e8e8f0';
+  return GRADE_HEX[g] || '#f0f0f0';
 }
 function gradeBadgeSize(size) {
   if (typeof size === 'number') return size;