fix: match detail header bg to page and use theme-aware clock

apps/frontend/src/components/Card.tsx

@@ -21,7 +21,7 @@ export function Card(props: CardProps) {
 
   const base = () =>
     `border border-line ${
-      local.variant === "section" ? "bg-surface/50 rounded-2xl" : "bg-surface rounded-xl"
+      local.variant === "section" ? "bg-surface2 rounded-2xl" : "bg-surface rounded-xl"
     } ${local.shadowed ? "shadow-md" : ""} ${local.class ?? ""}`;
 
   const children = local.children as Flow;

apps/frontend/src/pages/MatchDetails.tsx

@@ -44,8 +44,8 @@ export function MatchPage() {
           </svg>
           <span class="sr-only">Back</span>
         </button>
-        <div class="bg-app">
-          {/* <Header title={""} showBackButton /> */}
+        <div class="bg-surface">
+          {/* <Header title="" showBackButton /> */}
           <Show when={match()} fallback={<MatchDetailsGenericSkeleton />}>
             <Show when={match().status !== "SCHEDULED"}>
               <Show
@@ -285,7 +285,7 @@ export default function MatchDetailsFuture(props: { match: any }) {
                 month: "2-digit",
               })}
             </span>
-            <span class="text-xl font-mono font-bold text-white mt-0.5">
+            <span class="text-xl font-mono font-bold text-ink mt-0.5">
               {new Date(props.match.scheduledAt).toLocaleTimeString([], {
                 hour: "2-digit",
                 minute: "2-digit",