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

@@ -27,10 +27,10 @@ export function AdminGenlockes() {
         <span
           className={
             g.status === 'active'
-              ? 'text-green-600 dark:text-green-400'
+              ? 'text-status-active'
               : g.status === 'completed'
-                ? 'text-blue-600 dark:text-blue-400'
-                : 'text-red-600 dark:text-red-400'
+                ? 'text-text-link'
+                : 'text-status-failed'
           }
         >
           {g.status}
@@ -60,7 +60,7 @@ export function AdminGenlockes() {
         <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>
@@ -70,12 +70,12 @@ export function AdminGenlockes() {
         {statusFilter && (
           <button
             onClick={() => setStatusFilter('')}
-            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">
           {filtered.length} genlockes
         </span>
       </div>