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

@@ -6,26 +6,26 @@ interface StatCardProps {
 }
 
 const colorClasses: Record<string, string> = {
-  blue: 'border-blue-500',
-  green: 'border-green-500',
-  red: 'border-red-500',
+  blue: 'border-status-completed',
+  green: 'border-status-alive',
+  red: 'border-status-failed',
   purple: 'border-purple-500',
   amber: 'border-amber-500',
-  gray: 'border-gray-500',
+  gray: 'border-text-tertiary',
 }
 
 export function StatCard({ label, value, total, color }: StatCardProps) {
   return (
     <div
-      className={`bg-white dark:bg-gray-800 rounded-lg shadow p-4 border-l-4 ${colorClasses[color] ?? 'border-gray-500'}`}
+      className={`bg-surface-1 rounded-lg border border-border-default p-4 border-l-4 ${colorClasses[color] ?? 'border-text-tertiary'}`}
     >
-      <div className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+      <div className="text-2xl font-bold font-mono text-text-primary">
         {value}
         {total !== undefined && (
-          <span className="text-sm font-normal text-gray-500 dark:text-gray-400"> / {total}</span>
+          <span className="text-sm font-normal font-sans text-text-secondary"> / {total}</span>
         )}
       </div>
-      <div className="text-sm text-gray-600 dark:text-gray-400">{label}</div>
+      <div className="text-sm text-text-secondary">{label}</div>
     </div>
   )
 }