fix(docs): make the sidebar hover CSS agree with the utilities

Review caught that the sidebar hover alignment in this PR had no visual
effect. `global.css` carries !important rules for both the link and button
sidebar items — they exist to beat fumadocs' own styles — and they were still
forcing the pre-alignment values: --surface-3 on an inactive hover, and
--surface-active on an active hover.

So the Tailwind utilities were dead on arrival. The global rules now carry the
app's values instead (--surface-active inactive, --surface-6 active), matching
the utilities rather than fighting them, with a comment noting the two must
move together.

Author: waleedlatif1

apps/docs/app/global.css

@@ -462,16 +462,18 @@ html #nd-sidebar button[data-active="true"] {
   color: var(--text-body) !important;
 }
 
-/* Hover state — platform --surface-3 */
+/* Hover state — the app's nav Chip hovers to --surface-active. These rules must
+   carry !important to beat fumadocs' own sidebar styles, which also means they
+   override the Tailwind hover utilities on the items; keep the two in step. */
 html #nd-sidebar a:not(:has(span.font-mono)):hover:not([data-active="true"]),
 html #nd-sidebar button:hover:not([data-active="true"]) {
-  background-color: var(--surface-3) !important;
+  background-color: var(--surface-active) !important;
 }
 
-/* Active items don't change on hover */
+/* An active item darkens one surface on hover, matching the app's active Chip */
 html #nd-sidebar a[data-active="true"]:not(:has(span.font-mono)):hover,
 html #nd-sidebar button[data-active="true"]:hover {
-  background-color: var(--surface-active) !important;
+  background-color: var(--surface-6) !important;
   color: var(--text-body) !important;
 }