refactor(design-system): spotlight-only hover — drop floating-chip tint, tone down gradient (#111)

Operator feedback after PR #110: "remove the shading around the
hover that makes it feel like it's floating" + "the gradient is a
little too bold." Two surgical changes to styles/globals.css.

1. Dropped the base background-color tint on .nav-item:hover /
   .nav-item-bottom:hover / .nav-item-hover:hover (and the matching
   focus-within selectors, light + dark variants). With the rectangle
   tint gone, the item no longer reads as a floating chip against
   the sidebar — only the mouse-tracking radial spotlight remains
   on hover, which reads as light pooling under the cursor rather
   than a state-color block. The color: var(--text-primary) shift
   stays as the secondary affordance + for label AA contrast.

2. Toned down the radial-gradient alphas in the ::before:
   - Light center: 0.35 → 0.22  (-37%)
   - Light midpoint: 0.18 → 0.10  (-44%)
   - Dark center: 0.40 → 0.26  (-35%)
   - Dark midpoint: 0.22 → 0.12  (-45%)
   Same 120px radius, same shape, gentler glow.

Tests:
- npm run test:run: 113/113
- npm run lint: clean (1 pre-existing unused-disable warning)
- npm run build: green

Co-authored-by: Cursor <cursoragent@cursor.com>

styles/globals.css

@@ -430,39 +430,28 @@ body {
 }
 
 /* Navigation Accessibility Enhancements */
-/* Nav-item hover/focus — refined again 2026-06-04 (spotlight-hover
-   refinement, second pass). Operator feedback after the first
-   refinement: the rgba(0.08) base tint was too subtle ("it's hard
-   to see which one you're hovering"). Bumped the base tint to a
-   stronger ember alpha AND layered a mouse-tracking radial spotlight
-   on top via a ::before pseudo-element driven by --mouse-x /
-   --mouse-y CSS custom properties. The properties are written by a
-   single delegated mousemove listener attached at the Layout level
-   (see components/Layout.js) — no per-item React handler needed.
-   The ::before is positioned with `inset: 0` and pointer-events
-   disabled so clicks pass through to the underlying Link.
-   Existing `.nav-item-hover` is also covered (same selector group)
-   so the explicit hover-only items in NavigationContent inherit
-   the spotlight without separate JSX wiring. */
+/* Nav-item hover/focus — third pass 2026-06-04. Operator feedback
+   after the spotlight landed (PR #110): "remove the shading around
+   the hover that makes it feel like it's floating" + "the gradient
+   is a little too bold." Two changes from the prior pass:
+   1) Dropped the base background-color tint on the host. With the
+      bg-tint gone, the item no longer reads as a "floating chip"
+      against the sidebar — just the radial spotlight remains,
+      which feels like light pooling under the cursor rather than
+      a state-color rectangle. Text color shift to --text-primary
+      stays as the secondary affordance (and for AA contrast on the
+      label).
+   2) Toned down the radial-gradient alphas. Light: 35%/18% → 22%/
+      10%. Dark: 40%/22% → 26%/12%. Same shape, gentler glow. */
 .nav-item:hover,
 .nav-item-bottom:hover,
 .nav-item-hover:hover,
 .nav-item:focus-within,
 .nav-item-bottom:focus-within,
 .nav-item-hover:focus-within {
-  background-color: rgba(216, 67, 21, 0.18) !important;
   color: var(--text-primary) !important;
 }
 
-[data-theme="dark"] .nav-item:hover,
-[data-theme="dark"] .nav-item-bottom:hover,
-[data-theme="dark"] .nav-item-hover:hover,
-[data-theme="dark"] .nav-item:focus-within,
-[data-theme="dark"] .nav-item-bottom:focus-within,
-[data-theme="dark"] .nav-item-hover:focus-within {
-  background-color: rgba(255, 138, 80, 0.22) !important;
-}
-
 /* Mouse-tracking radial spotlight on every hoverable nav surface.
    The radial-gradient is positioned via the --mouse-x / --mouse-y
    CSS variables that Layout's delegated mousemove handler writes
@@ -489,8 +478,8 @@ body {
   border-radius: inherit;
   background: radial-gradient(
     circle 120px at var(--mouse-x, 50%) var(--mouse-y, 50%),
-    rgba(255, 140, 30, 0.35) 0%,
-    rgba(216, 67, 21, 0.18) 35%,
+    rgba(255, 140, 30, 0.22) 0%,
+    rgba(216, 67, 21, 0.10) 35%,
     transparent 70%
   );
   opacity: 0;
@@ -512,8 +501,8 @@ body {
 [data-theme="dark"] .nav-item-hover::before {
   background: radial-gradient(
     circle 120px at var(--mouse-x, 50%) var(--mouse-y, 50%),
-    rgba(255, 160, 70, 0.40) 0%,
-    rgba(255, 110, 0, 0.22) 35%,
+    rgba(255, 160, 70, 0.26) 0%,
+    rgba(255, 110, 0, 0.12) 35%,
     transparent 70%
   );
 }