Simplify modal, badge, and component styles to dark-first (#29)

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

frontend/src/pages/GenlockeDetail.tsx

@@ -18,9 +18,9 @@ const statusRing: Record<RunStatus, string> = {
 }
 
 const statusStyles: Record<RunStatus, string> = {
-  active: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
-  completed: 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
-  failed: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300',
+  active: 'bg-green-900/40 text-green-300',
+  completed: 'bg-blue-900/40 text-blue-300',
+  failed: 'bg-red-900/40 text-red-300',
 }
 
 function LegIndicator({ leg }: { leg: GenlockeLegDetail }) {
@@ -29,7 +29,7 @@ function LegIndicator({ leg }: { leg: GenlockeLegDetail }) {
 
   const dot = status ? (
     <div
-      className={`w-4 h-4 rounded-full ${statusColors[status]} ring-2 ring-offset-2 ring-offset-white dark:ring-offset-gray-900 ${statusRing[status]}`}
+      className={`w-4 h-4 rounded-full ${statusColors[status]} ring-2 ring-offset-2 ring-offset-surface-0 ${statusRing[status]}`}
     />
   ) : (
     <div className="w-4 h-4 rounded-full bg-surface-3" />
@@ -213,7 +213,7 @@ export function GenlockeDetail() {
             <h3 className="text-sm font-medium text-text-tertiary mb-2">Genlocke Rules</h3>
             <div className="flex flex-wrap gap-1.5">
               {genlocke.genlockeRules.retireHoF ? (
-                <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-300">
+                <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-purple-900/40 text-purple-300">
                   Retire HoF Teams
                 </span>
               ) : (