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/AdminRuns.tsx

@@ -46,10 +46,10 @@ export function AdminRuns() {
         <span
           className={
             r.status === 'active'
-              ? 'text-green-600 dark:text-green-400'
+              ? 'text-status-active'
               : r.status === 'completed'
-                ? 'text-blue-600 dark:text-blue-400'
-                : 'text-red-600 dark:text-red-400'
+                ? 'text-text-link'
+                : 'text-status-failed'
           }
         >
           {r.status}
@@ -74,7 +74,7 @@ export function AdminRuns() {
         <select
           value={statusFilter}
           onChange={(e) => setStatusFilter(e.target.value)}
-          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 statuses</option>
           <option value="active">Active</option>
@@ -84,7 +84,7 @@ export function AdminRuns() {
         <select
           value={gameFilter}
           onChange={(e) => setGameFilter(e.target.value)}
-          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 games</option>
           {runGames.map(([id, name]) => (
@@ -99,12 +99,12 @@ export function AdminRuns() {
               setStatusFilter('')
               setGameFilter('')
             }}
-            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">
+        <span className="text-sm text-text-tertiary whitespace-nowrap">
           {filteredRuns.length} runs
         </span>
       </div>