Implement dark-first design system with Geist typography (#28)

Co-authored-by: Julian Tabel <juliantabel.jt@gmail.com>
Co-committed-by: Julian Tabel <juliantabel.jt@gmail.com>

frontend/src/components/Layout.tsx

@@ -1,61 +1,83 @@
 import { useState } from 'react'
-import { Link, Outlet } from 'react-router-dom'
+import { Link, Outlet, useLocation } from 'react-router-dom'
+
+const navLinks = [
+  { to: '/runs/new', label: 'New Run' },
+  { to: '/runs', label: 'My Runs' },
+  { to: '/genlockes', label: 'Genlockes' },
+  { to: '/stats', label: 'Stats' },
+  { to: '/admin', label: 'Admin' },
+]
+
+function NavLink({
+  to,
+  active,
+  children,
+  onClick,
+  className = '',
+}: {
+  to: string
+  active: boolean
+  children: React.ReactNode
+  onClick?: () => void
+  className?: string
+}) {
+  return (
+    <Link
+      to={to}
+      onClick={onClick}
+      className={`${className} px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+        active
+          ? 'bg-accent-600/20 text-accent-300'
+          : 'text-text-secondary hover:text-text-primary hover:bg-surface-3'
+      }`}
+    >
+      {children}
+    </Link>
+  )
+}
 
 export function Layout() {
   const [menuOpen, setMenuOpen] = useState(false)
+  const location = useLocation()
+
+  function isActive(to: string) {
+    if (to === '/runs/new') return location.pathname === '/runs/new'
+    return location.pathname.startsWith(to)
+  }
 
   return (
-    <div className="min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
-      <nav className="bg-white dark:bg-gray-800 shadow-sm">
+    <div className="min-h-screen flex flex-col bg-surface-0 text-text-primary">
+      <nav className="sticky top-0 z-40 bg-surface-1/80 backdrop-blur-lg border-b border-border-default">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between h-16">
-            <div className="flex items-center">
-              <Link to="/" className="text-xl font-bold">
-                ANT
+          <div className="flex justify-between h-14">
+            <div className="flex items-center gap-2">
+              <Link to="/" className="flex items-center gap-2 group">
+                <img
+                  src="/favicon.svg"
+                  alt=""
+                  className="w-7 h-7 transition-transform group-hover:scale-110"
+                />
+                <span className="text-lg font-bold tracking-tight text-text-primary">ANT</span>
               </Link>
             </div>
             {/* Desktop nav */}
-            <div className="hidden sm:flex items-center space-x-4">
-              <Link
-                to="/runs/new"
-                className="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700"
-              >
-                New Run
-              </Link>
-              <Link
-                to="/runs"
-                className="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700"
-              >
-                My Runs
-              </Link>
-              <Link
-                to="/genlockes"
-                className="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700"
-              >
-                Genlockes
-              </Link>
-              <Link
-                to="/stats"
-                className="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700"
-              >
-                Stats
-              </Link>
-              <Link
-                to="/admin"
-                className="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700"
-              >
-                Admin
-              </Link>
+            <div className="hidden sm:flex items-center gap-1">
+              {navLinks.map((link) => (
+                <NavLink key={link.to} to={link.to} active={isActive(link.to)}>
+                  {link.label}
+                </NavLink>
+              ))}
             </div>
             {/* Mobile hamburger */}
             <div className="flex items-center sm:hidden">
               <button
                 type="button"
                 onClick={() => setMenuOpen(!menuOpen)}
-                className="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
+                className="p-2 rounded-md text-text-secondary hover:text-text-primary hover:bg-surface-3 transition-colors"
                 aria-label="Toggle menu"
               >
-                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   {menuOpen ? (
                     <path
                       strokeLinecap="round"
@@ -78,43 +100,19 @@ export function Layout() {
         </div>
         {/* Mobile dropdown */}
         {menuOpen && (
-          <div className="sm:hidden border-t border-gray-200 dark:border-gray-700">
+          <div className="sm:hidden border-t border-border-default">
             <div className="px-2 pt-2 pb-3 space-y-1">
-              <Link
-                to="/runs/new"
-                onClick={() => setMenuOpen(false)}
-                className="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-100 dark:hover:bg-gray-700"
-              >
-                New Run
-              </Link>
-              <Link
-                to="/runs"
-                onClick={() => setMenuOpen(false)}
-                className="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-100 dark:hover:bg-gray-700"
-              >
-                My Runs
-              </Link>
-              <Link
-                to="/genlockes"
-                onClick={() => setMenuOpen(false)}
-                className="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-100 dark:hover:bg-gray-700"
-              >
-                Genlockes
-              </Link>
-              <Link
-                to="/stats"
-                onClick={() => setMenuOpen(false)}
-                className="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-100 dark:hover:bg-gray-700"
-              >
-                Stats
-              </Link>
-              <Link
-                to="/admin"
-                onClick={() => setMenuOpen(false)}
-                className="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-100 dark:hover:bg-gray-700"
-              >
-                Admin
-              </Link>
+              {navLinks.map((link) => (
+                <NavLink
+                  key={link.to}
+                  to={link.to}
+                  active={isActive(link.to)}
+                  onClick={() => setMenuOpen(false)}
+                  className="block"
+                >
+                  {link.label}
+                </NavLink>
+              ))}
             </div>
           </div>
         )}
@@ -122,12 +120,12 @@ export function Layout() {
       <main className="flex-1">
         <Outlet />
       </main>
-      <footer className="border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 text-center text-xs text-gray-500 dark:text-gray-400">
-          Pokémon encounter data from{' '}
+      <footer className="border-t border-border-default bg-surface-1/50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 text-center text-xs text-text-tertiary">
+          Encounter data from{' '}
           <a
             href="https://pokedb.org"
-            className="underline hover:text-gray-700 dark:hover:text-gray-300"
+            className="underline hover:text-text-secondary transition-colors"
             target="_blank"
             rel="noopener noreferrer"
           >