Enhance docs layout and theme integration for improved UI consistency

Author: upayanmazumder

app/src/app/docs/layout.tsx

@@ -8,12 +8,14 @@ export default function DocsLayout({ children }: { children: React.ReactNode })
     <div className="min-h-screen">
       {/* Main content */}
       <div className="mr-64 overflow-y-auto min-h-screen">
-        <div className="p-8 my-2">{children}</div>
+        <div className="p-8 my-2 docs-theme">
+          <div className="max-w-5xl mx-auto">{children}</div>
+        </div>
       </div>
 
       {/* Sidebar */}
       <aside
-        className="w-64 fixed right-0 top-0 h-screen overflow-y-auto px-6 py-10"
+        className="w-64 fixed right-0 top-16 h-[calc(100vh-64px)] overflow-y-auto px-6 py-10"
         style={{
           backgroundColor: 'var(--card-background)',
           borderLeft: '1px solid #3a4152',
@@ -36,7 +38,7 @@ export default function DocsLayout({ children }: { children: React.ReactNode })
                         textDecoration: 'none',
                       }}
                       onMouseEnter={(e) => {
-                        e.currentTarget.style.color = 'var(--theme-blue)';
+                        e.currentTarget.style.color = 'var(--text-link-hover-color)';
                       }}
                       onMouseLeave={(e) => {
                         e.currentTarget.style.color = '#a0aec0';

app/src/app/globals.css

@@ -374,3 +374,62 @@ section table {
   scrollbar-width: thin;
   scrollbar-color: #2b3244 #181b26;
 }
+
+/* Docs theme overrides to align docs with site UI */
+.docs-theme {
+  color: var(--foreground);
+}
+/* Neutralize bright background utilities inside docs to use app cards */
+.docs-theme .border,
+.docs-theme [class*="border-"] {
+  border-color: #3a4152 !important;
+}
+.docs-theme [class*="bg-gradient-to-"],
+.docs-theme .bg-white,
+.docs-theme .bg-gray-50,
+.docs-theme .bg-gray-100,
+.docs-theme .bg-blue-50,
+.docs-theme .bg-green-50,
+.docs-theme .bg-purple-50,
+.docs-theme .bg-emerald-100,
+.docs-theme .bg-yellow-50 {
+  background: var(--card-background) !important;
+}
+.docs-theme .text-gray-900,
+.docs-theme .text-gray-800,
+.docs-theme .text-gray-700,
+.docs-theme .text-gray-600,
+.docs-theme .text-gray-500,
+.docs-theme .text-gray-400,
+.docs-theme .text-blue-900,
+.docs-theme .text-blue-800,
+.docs-theme .text-green-900,
+.docs-theme .text-green-800,
+.docs-theme .text-purple-900,
+.docs-theme .text-purple-800 {
+  color: var(--foreground) !important;
+}
+.docs-theme .prose {
+  max-width: 100%;
+}
+.docs-theme pre {
+  background: #23283a !important;
+  color: #e0e6f0;
+  border: 1px solid #3a4152;
+}
+.docs-theme pre code {
+  background: transparent !important;
+  color: inherit;
+}
+.docs-theme code {
+  background: #23283a;
+  color: #e0e6f0;
+}
+
+/* Ensure links in docs retain themed link colors over utility overrides */
+.docs-theme a {
+  color: var(--text-link-color) !important;
+}
+.docs-theme a:hover {
+  color: var(--text-link-hover-color) !important;
+}