website refactor

apps/website/components/leagues/ScheduleRaceCard.tsx

@@ -10,7 +10,6 @@ import { Heading } from '@/ui/Heading';
 import { Badge } from '@/ui/Badge';
 import { Grid } from '@/ui/Grid';
 import { Icon } from '@/ui/Icon';
-import { Surface } from '@/ui/Surface';
 
 interface Race {
   id: string;
@@ -32,8 +31,8 @@ export function ScheduleRaceCard({ race }: ScheduleRaceCardProps) {
     <Card>
       <Stack gap={4}>
         <Stack direction="row" align="center" gap={3}>
-          <Box style={{ width: '0.75rem', height: '0.75rem', borderRadius: '9999px', backgroundColor: race.isPast ? '#10b981' : '#3b82f6' }} />
-          <Heading level={3} style={{ fontSize: '1.125rem' }}>{race.name}</Heading>
+          <Box w="3" h="3" rounded="full" bg={race.isPast ? 'bg-performance-green' : 'bg-primary-blue'} />
+          <Heading level={3} fontSize="lg">{race.name}</Heading>
           <Badge variant={race.status === 'completed' ? 'success' : 'primary'}>
             {race.status === 'completed' ? 'Completed' : 'Scheduled'}
           </Badge>