style: Match Ersen design system

- Add Space Grotesk and JetBrains Mono fonts
- Implement light/dark mode toggle with next-themes
- Update color palette to match Ersen (HSL-based tokens)
- Add ThemeProvider and ThemeToggle components
- Reduce border radius to 0.3rem for cleaner look

frontend/app/globals.css

@@ -3,11 +3,14 @@
 
 @custom-variant dark (&:is(.dark *));
 
+/* Import Space Grotesk and JetBrains Mono from Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
+  --font-sans: 'Space Grotesk', system-ui, sans-serif;
-  --font-mono: var(--font-geist-mono);
+  --font-mono: 'JetBrains Mono', monospace;
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -43,73 +46,75 @@
   --radius-xl: calc(var(--radius) + 4px);
 }
 
+/* Light Mode - Ersen Style */
 :root {
-  --radius: 0.625rem;
+  --radius: 0.3rem;
-  --background: oklch(1 0 0);
+  --background: hsl(240, 5%, 98%);
-  --foreground: oklch(0.141 0.005 285.823);
+  --foreground: hsl(240, 10%, 3.9%);
-  --card: oklch(1 0 0);
+  --card: hsl(0, 0%, 100%);
-  --card-foreground: oklch(0.141 0.005 285.823);
+  --card-foreground: hsl(240, 10%, 3.9%);
-  --popover: oklch(1 0 0);
+  --popover: hsl(0, 0%, 100%);
-  --popover-foreground: oklch(0.141 0.005 285.823);
+  --popover-foreground: hsl(240, 10%, 3.9%);
-  --primary: oklch(0.21 0.006 285.885);
+  --primary: hsl(221.2, 83.2%, 53.3%);
-  --primary-foreground: oklch(0.985 0 0);
+  --primary-foreground: hsl(0, 0%, 100%);
-  --secondary: oklch(0.967 0.001 286.375);
+  --secondary: hsl(240, 5.9%, 90%);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --secondary-foreground: hsl(240, 5.9%, 10%);
-  --muted: oklch(0.967 0.001 286.375);
+  --muted: hsl(240, 4.8%, 95.9%);
-  --muted-foreground: oklch(0.552 0.016 285.938);
+  --muted-foreground: hsl(240, 3.8%, 46.1%);
-  --accent: oklch(0.967 0.001 286.375);
+  --accent: hsl(240, 4.8%, 95.9%);
-  --accent-foreground: oklch(0.21 0.006 285.885);
+  --accent-foreground: hsl(240, 5.9%, 10%);
-  --destructive: oklch(0.577 0.245 27.325);
+  --destructive: hsl(0, 84.2%, 60.2%);
-  --border: oklch(0.92 0.004 286.32);
+  --border: hsl(240, 5.9%, 90%);
-  --input: oklch(0.92 0.004 286.32);
+  --input: hsl(240, 5.9%, 90%);
-  --ring: oklch(0.705 0.015 286.067);
+  --ring: hsl(221.2, 83.2%, 53.3%);
-  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-1: hsl(12, 76%, 61%);
-  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-2: hsl(173, 58%, 39%);
-  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-3: hsl(197, 37%, 24%);
-  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-4: hsl(43, 74%, 66%);
-  --chart-5: oklch(0.769 0.188 70.08);
+  --chart-5: hsl(27, 87%, 67%);
-  --sidebar: oklch(0.985 0 0);
+  --sidebar: hsl(0, 0%, 100%);
-  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-foreground: hsl(240, 10%, 3.9%);
-  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary: hsl(221.2, 83.2%, 53.3%);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-primary-foreground: hsl(0, 0%, 100%);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent: hsl(240, 4.8%, 95.9%);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-accent-foreground: hsl(240, 5.9%, 10%);
-  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-border: hsl(240, 5.9%, 90%);
-  --sidebar-ring: oklch(0.705 0.015 286.067);
+  --sidebar-ring: hsl(221.2, 83.2%, 53.3%);
 }
 
+/* Dark Mode - Ersen Style */
 .dark {
-  --background: oklch(0.141 0.005 285.823);
+  --background: hsl(240, 10%, 3.9%);
-  --foreground: oklch(0.985 0 0);
+  --foreground: hsl(0, 0%, 95%);
-  --card: oklch(0.21 0.006 285.885);
+  --card: hsl(240, 10%, 5%);
-  --card-foreground: oklch(0.985 0 0);
+  --card-foreground: hsl(0, 0%, 95%);
-  --popover: oklch(0.21 0.006 285.885);
+  --popover: hsl(240, 10%, 5%);
-  --popover-foreground: oklch(0.985 0 0);
+  --popover-foreground: hsl(0, 0%, 95%);
-  --primary: oklch(0.92 0.004 286.32);
+  --primary: hsl(221.2, 83.2%, 53.3%);
-  --primary-foreground: oklch(0.21 0.006 285.885);
+  --primary-foreground: hsl(0, 0%, 100%);
-  --secondary: oklch(0.274 0.006 286.033);
+  --secondary: hsl(240, 3.7%, 15.9%);
-  --secondary-foreground: oklch(0.985 0 0);
+  --secondary-foreground: hsl(0, 0%, 95%);
-  --muted: oklch(0.274 0.006 286.033);
+  --muted: hsl(240, 3.7%, 15.9%);
-  --muted-foreground: oklch(0.705 0.015 286.067);
+  --muted-foreground: hsl(240, 5%, 64.9%);
-  --accent: oklch(0.274 0.006 286.033);
+  --accent: hsl(240, 3.7%, 15.9%);
-  --accent-foreground: oklch(0.985 0 0);
+  --accent-foreground: hsl(0, 0%, 95%);
-  --destructive: oklch(0.704 0.191 22.216);
+  --destructive: hsl(0, 62.8%, 50.6%);
-  --border: oklch(1 0 0 / 10%);
+  --border: hsl(240, 3.7%, 15.9%);
-  --input: oklch(1 0 0 / 15%);
+  --input: hsl(240, 3.7%, 15.9%);
-  --ring: oklch(0.552 0.016 285.938);
+  --ring: hsl(221.2, 83.2%, 53.3%);
-  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-1: hsl(220, 70%, 50%);
-  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-2: hsl(160, 60%, 45%);
-  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-3: hsl(30, 80%, 55%);
-  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-4: hsl(280, 65%, 60%);
-  --chart-5: oklch(0.645 0.246 16.439);
+  --chart-5: hsl(340, 75%, 55%);
-  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar: hsl(240, 10%, 5%);
-  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-foreground: hsl(0, 0%, 95%);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary: hsl(221.2, 83.2%, 53.3%);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-primary-foreground: hsl(0, 0%, 100%);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent: hsl(240, 3.7%, 15.9%);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-accent-foreground: hsl(0, 0%, 95%);
-  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-border: hsl(240, 3.7%, 15.9%);
-  --sidebar-ring: oklch(0.552 0.016 285.938);
+  --sidebar-ring: hsl(221.2, 83.2%, 53.3%);
 }
 
 @layer base {
@@ -119,5 +124,22 @@
 
   body {
     @apply bg-background text-foreground;
+    font-family: 'Space Grotesk', system-ui, sans-serif;
+  }
+
+  code,
+  pre,
+  .font-mono {
+    font-family: 'JetBrains Mono', monospace;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: 'Space Grotesk', system-ui, sans-serif;
+    font-weight: 600;
   }
 }

frontend/app/layout.tsx

@@ -1,14 +1,22 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import { Space_Grotesk, JetBrains_Mono } from "next/font/google";
 import "./globals.css";
 import { Navbar } from "@/components/layout/navbar";
 import { cn } from "@/lib/utils";
 import { PreferencesProvider } from "@/contexts/preferences-context";
 import { AuthProvider } from "@/contexts/auth-context";
-
+import { ThemeProvider } from "@/components/theme-provider";
 import { Footer } from "@/components/layout/footer";
 
-const inter = Inter({ subsets: ["latin"] });
+const spaceGrotesk = Space_Grotesk({
+  subsets: ["latin"],
+  variable: "--font-sans",
+});
+
+const jetbrainsMono = JetBrains_Mono({
+  subsets: ["latin"],
+  variable: "--font-mono",
+});
 
 export const metadata: Metadata = {
   title: "Elmeg - Fandom Archive",
@@ -21,8 +29,18 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
-      <body className={cn(inter.className, "min-h-screen bg-background font-sans antialiased flex flex-col")}>
+      <body className={cn(
+        spaceGrotesk.variable,
+        jetbrainsMono.variable,
+        "min-h-screen bg-background font-sans antialiased flex flex-col"
+      )}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="dark"
+          enableSystem
+          disableTransitionOnChange
+        >
           <AuthProvider>
             <PreferencesProvider>
               <Navbar />
@@ -32,6 +50,7 @@ export default function RootLayout({
               <Footer />
             </PreferencesProvider>
           </AuthProvider>
+        </ThemeProvider>
       </body>
     </html>
   );

frontend/components/layout/navbar.tsx

@@ -4,6 +4,7 @@ import { Music, User, ChevronDown } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { SearchDialog } from "@/components/ui/search-dialog"
 import { NotificationBell } from "@/components/notifications/notification-bell"
+import { ThemeToggle } from "@/components/theme-toggle"
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -64,6 +65,7 @@ export function Navbar() {
                     <div className="w-full flex-1 md:w-auto md:flex-none">
                         <SearchDialog />
                     </div>
+                    <ThemeToggle />
                     <nav className="flex items-center gap-2">
                         {user ? (
                             <>

frontend/components/theme-provider.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+
+export function ThemeProvider({
+    children,
+    ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+    return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

frontend/components/theme-toggle.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+import { Button } from "@/components/ui/button"
+
+export function ThemeToggle() {
+    const { theme, setTheme } = useTheme()
+    const [mounted, setMounted] = React.useState(false)
+
+    React.useEffect(() => {
+        setMounted(true)
+    }, [])
+
+    if (!mounted) {
+        return (
+            <Button variant="ghost" size="icon" className="h-9 w-9">
+                <Sun className="h-4 w-4" />
+            </Button>
+        )
+    }
+
+    return (
+        <Button
+            variant="ghost"
+            size="icon"
+            className="h-9 w-9"
+            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+        >
+            {theme === "dark" ? (
+                <Sun className="h-4 w-4" />
+            ) : (
+                <Moon className="h-4 w-4" />
+            )}
+            <span className="sr-only">Toggle theme</span>
+        </Button>
+    )
+}

frontend/package.json

@@ -28,7 +28,8 @@
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "recharts": "^3.6.0",
-    "tailwind-merge": "^3.4.0"
+    "tailwind-merge": "^3.4.0",
+    "next-themes": "^0.4.4"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",