feat(design-system): redesign v2 #6 — card grid outer-glow

Sub-convoy #6 from .convoys/redesign-v2-from-mockups.md. The
operator mockup shows TCG card thumbnails in the Featured
Collection grid with a soft warm glow emanating around each card,
suggesting "light cast onto cards" — the hearth metaphor at the
card level.

What ships:
- styles/globals.css: new .card-grid-outer-glow utility with a
  single cheap box-shadow (warm orange at 18% alpha on light /
  28% on dark) + a slightly bolder hover state (32%/50%). Honors
  the AGENTS.md performance budget ("card grids may NOT use glass
  on every card item") — this is a single-axis shadow, not a
  backdrop-filter.
- components/CardItem.js: outer .card-item-container picks up the
  new class. The rarity-color glow on the inner chrome is
  UNTOUCHED (umbrella § 5 #6 explicit guard).

Tests:
- npm run test:run: 113/113
- npm run lint: clean
- npm run build: green

Next: #7 (dashboard rebuild) + #8 (right-rail Spotlight).
Co-authored-by: Cursor <cursoragent@cursor.com>

components/CardItem.js

@@ -287,7 +287,7 @@ export default function CardItem({
 
   // Grid view
   return (
-    <div className="card-item-container relative group bg-transparent rounded-xl transition-all duration-150 overflow-visible transform hover:scale-102 hover:z-10">
+    <div className="card-item-container card-grid-outer-glow relative group bg-transparent rounded-xl transition-all duration-150 overflow-visible transform hover:scale-102 hover:z-10">
       {/* Main Card Container */}
       <div 
         className={`relative rounded-xl border-2 transition-all duration-200 overflow-hidden cursor-pointer ${

styles/globals.css

@@ -444,6 +444,43 @@ body {
   transform: translateX(4px);
 }
 
+/* Card grid outer-glow (redesign-v2 sub-convoy #6, 2026-06-04).
+   The operator's mockup shows TCG card thumbnails in the Featured
+   Collection grid with a soft warm glow emanating around each card,
+   suggesting "light cast onto the cards" — the hearth metaphor at
+   the card level. Applied to the outermost CardItem container so it
+   sits OUTSIDE the rarity-color glow (which lives on the card's
+   inner chrome). Single cheap box-shadow per card; safe on long
+   scroll lists where stacked filters would jank.
+   AGENTS.md performance budget: "card grids may NOT use glass on
+   every card item" — this is a single-axis shadow, not a backdrop-
+   filter, so it stays well under that budget. */
+.card-grid-outer-glow {
+  box-shadow:
+    0 0 24px -4px rgba(255, 128, 0, 0.18),
+    0 4px 12px -2px rgba(0, 0, 0, 0.10);
+  transition: box-shadow var(--motion-duration-default)
+    var(--motion-ease-out);
+}
+
+.card-grid-outer-glow:hover {
+  box-shadow:
+    0 0 32px -2px rgba(255, 128, 0, 0.32),
+    0 8px 16px -4px rgba(0, 0, 0, 0.15);
+}
+
+[data-theme="dark"] .card-grid-outer-glow {
+  box-shadow:
+    0 0 28px -4px rgba(255, 110, 30, 0.28),
+    0 4px 12px -2px rgba(0, 0, 0, 0.40);
+}
+
+[data-theme="dark"] .card-grid-outer-glow:hover {
+  box-shadow:
+    0 0 40px -2px rgba(255, 110, 30, 0.50),
+    0 8px 16px -4px rgba(0, 0, 0, 0.50);
+}
+
 /* Sidebar active-pill (redesign-v2 sub-convoy #2, 2026-06-04).
    The operator's mockup shows the active nav item as a bold rounded-2xl
    pill with an ember-orange gradient fill and a soft outer ember glow.