fix: docs banner respects dark/light mode theme (#6576)

Replace hardcoded dark-only colors in the announcement banner with
CSS custom variables (--bg-secondary, --text-color, --border-color,
--accent-color, --accent-hover) that automatically adapt to the
site's light and dark themes.

Co-authored-by: kiloconnect[bot] <240665456+kiloconnect[bot]@users.noreply.github.com>

packages/kilo-docs/components/TopNav.tsx

@@ -529,12 +529,12 @@ export function TopNav({ onMobileMenuToggle, isMobileMenuOpen = false, showMobil
         }
 
         .announcement-banner {
-          background: #1a1a18;
-          color: #a3a3a2;
+          background: var(--bg-secondary);
+          color: var(--text-color);
           padding: 0.5rem 1rem;
           text-align: center;
           font-size: 0.875rem;
-          border-bottom: 1px solid #3f3f3f;
+          border-bottom: 1px solid var(--border-color);
         }
 
         .announcement-banner p {
@@ -542,13 +542,13 @@ export function TopNav({ onMobileMenuToggle, isMobileMenuOpen = false, showMobil
         }
 
         .announcement-banner :global(a) {
-          color: #f8f674;
+          color: var(--accent-color);
           text-decoration: underline;
           text-underline-offset: 2px;
         }
 
         .announcement-banner :global(a:hover) {
-          color: #ffff8d;
+          color: var(--accent-hover);
         }
 
         @media (max-width: 768px) {