feat: docs

app/globals.css

@@ -1,4 +1,6 @@
 @import "tailwindcss";
+@import "fumadocs-ui/css/neutral.css";
+@import "fumadocs-ui/css/preset.css";
 
 :root {
   --background: #090a0f;
@@ -18,6 +20,26 @@
   --shadow-hard: 6px 6px 0 rgb(0 0 0 / 55%);
 }
 
+.dark {
+  --color-fd-background: #090a0f;
+  --color-fd-foreground: #f8fbff;
+  --color-fd-muted: #15182a;
+  --color-fd-muted-foreground: #9eabc1;
+  --color-fd-popover: #111426;
+  --color-fd-popover-foreground: #f8fbff;
+  --color-fd-card: #141832;
+  --color-fd-card-foreground: #f8fbff;
+  --color-fd-border: rgb(168 245 255 / 16%);
+  --color-fd-primary: #a8f5ff;
+  --color-fd-primary-foreground: #06111a;
+  --color-fd-secondary: #1b2039;
+  --color-fd-secondary-foreground: #e8f8ff;
+  --color-fd-accent: rgb(0 231 255 / 12%);
+  --color-fd-accent-foreground: #c9f9ff;
+  --color-fd-ring: #00e7ff;
+  --color-fd-overlay: rgb(0 0 0 / 62%);
+}
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -59,6 +81,47 @@ svg {
   color: #06111a;
 }
 
+.server-docs {
+  min-height: 100vh;
+  background:
+    radial-gradient(circle at 82% 10%, rgb(139 77 255 / 11%), transparent 28rem),
+    radial-gradient(circle at 12% 85%, rgb(0 231 255 / 8%), transparent 30rem),
+    var(--color-fd-background);
+}
+
+.server-docs #nd-sidebar {
+  background: rgb(9 10 15 / 94%);
+  backdrop-filter: blur(18px);
+}
+
+.server-docs [data-toc-popover] {
+  backdrop-filter: blur(18px);
+}
+
+.docs-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  color: #d8fbff;
+  font-family: var(--font-fredoka), var(--font-geist-sans), sans-serif;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.docs-brand-mark {
+  display: grid;
+  width: 30px;
+  height: 30px;
+  place-items: center;
+  border: 1px solid rgb(168 245 255 / 70%);
+  border-radius: 7px;
+  background: rgb(0 231 255 / 8%);
+  box-shadow: 0 0 18px rgb(0 231 255 / 22%);
+  color: #a8f5ff;
+  font-size: 1.05rem;
+  line-height: 1;
+}
+
 *:focus-visible {
   outline: 3px solid var(--gold);
   outline-offset: 4px;