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/pages/admin/AdminEvolutions.tsx

@@ -83,19 +83,19 @@ export function AdminEvolutions() {
               const data = await exportEvolutions()
               downloadJson(data, 'evolutions.json')
             }}
-            className="px-4 py-2 text-sm font-medium rounded-md border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800"
+            className="px-4 py-2 text-sm font-medium rounded-md border border-border-default text-text-secondary hover:bg-surface-2"
           >
             Export
           </button>
           <button
             onClick={() => setShowBulkImport(true)}
-            className="px-4 py-2 text-sm font-medium rounded-md border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800"
+            className="px-4 py-2 text-sm font-medium rounded-md border border-border-default text-text-secondary hover:bg-surface-2"
           >
             Bulk Import
           </button>
           <button
             onClick={() => setShowCreate(true)}
-            className="px-4 py-2 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700"
+            className="px-4 py-2 text-sm font-medium rounded-md bg-accent-600 text-white hover:bg-accent-500"
           >
             Add Evolution
           </button>
@@ -111,7 +111,7 @@ export function AdminEvolutions() {
             setPage(0)
           }}
           placeholder="Search by pokemon name, trigger, or item..."
-          className="w-full max-w-sm px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
+          className="w-full max-w-sm px-3 py-2 border rounded-md bg-surface-2 border-border-default"
         />
         <select
           value={triggerFilter}
@@ -119,7 +119,7 @@ export function AdminEvolutions() {
             setTriggerFilter(e.target.value)
             setPage(0)
           }}
-          className="px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
+          className="px-3 py-2 border rounded-md bg-surface-2 border-border-default"
         >
           <option value="">All triggers</option>
           {EVOLUTION_TRIGGERS.map((t) => (
@@ -135,14 +135,12 @@ export function AdminEvolutions() {
               setTriggerFilter('')
               setPage(0)
             }}
-            className="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+            className="text-sm text-text-tertiary hover:text-text-primary"
           >
             Clear filters
           </button>
         )}
-        <span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
-          {total} evolutions
-        </span>
+        <span className="text-sm text-text-tertiary whitespace-nowrap">{total} evolutions</span>
       </div>
 
       <AdminTable
@@ -156,38 +154,38 @@ export function AdminEvolutions() {
 
       {totalPages > 1 && (
         <div className="mt-4 flex items-center justify-between">
-          <div className="text-sm text-gray-500 dark:text-gray-400">
+          <div className="text-sm text-text-tertiary">
             Showing {offset + 1}-{Math.min(offset + PAGE_SIZE, total)} of {total}
           </div>
           <div className="flex items-center gap-2">
             <button
               onClick={() => setPage(0)}
               disabled={page === 0}
-              className="px-3 py-1 text-sm rounded border border-gray-300 dark:border-gray-600 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 dark:hover:bg-gray-700"
+              className="px-3 py-1 text-sm rounded border border-border-default disabled:opacity-50 disabled:cursor-not-allowed hover:bg-surface-2"
             >
               First
             </button>
             <button
               onClick={() => setPage((p) => Math.max(0, p - 1))}
               disabled={page === 0}
-              className="px-3 py-1 text-sm rounded border border-gray-300 dark:border-gray-600 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 dark:hover:bg-gray-700"
+              className="px-3 py-1 text-sm rounded border border-border-default disabled:opacity-50 disabled:cursor-not-allowed hover:bg-surface-2"
             >
               Prev
             </button>
-            <span className="text-sm text-gray-600 dark:text-gray-300 px-2">
+            <span className="text-sm text-text-secondary px-2">
               Page {page + 1} of {totalPages}
             </span>
             <button
               onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
               disabled={page >= totalPages - 1}
-              className="px-3 py-1 text-sm rounded border border-gray-300 dark:border-gray-600 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 dark:hover:bg-gray-700"
+              className="px-3 py-1 text-sm rounded border border-border-default disabled:opacity-50 disabled:cursor-not-allowed hover:bg-surface-2"
             >
               Next
             </button>
             <button
               onClick={() => setPage(totalPages - 1)}
               disabled={page >= totalPages - 1}
-              className="px-3 py-1 text-sm rounded border border-gray-300 dark:border-gray-600 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 dark:hover:bg-gray-700"
+              className="px-3 py-1 text-sm rounded border border-border-default disabled:opacity-50 disabled:cursor-not-allowed hover:bg-surface-2"
             >
               Last
             </button>