improvement: badge & card components colour pallete updated so their text become more readable in light mode.

frontend/src/components/ui/treatment/AppointmentsStrip.tsx

@@ -2,6 +2,7 @@
 
 import { CalendarDays } from 'lucide-react';
 import { purposeStyle } from '@/components/ui/appointments/appointmentPurposeStyles';
+import { Card } from '@/components/ui/common/Card';
 import { ScheduleDayPicker } from '@/components/ui/common/ScheduleDayPicker';
 import { startOfLocalDay } from '@/lib/appointmentTime';
 import type { TreatmentAppointment } from '@/types/treatment';
@@ -32,7 +33,7 @@ export function AppointmentsStrip({
 }: AppointmentsStripProps) {
   if (stripHidden) {
     return (
-      <div className="surface-card p-3 flex items-center justify-between gap-3 flex-wrap">
+      <Card className="flex items-center justify-between gap-3 flex-wrap" padding="sm">
         <p className="text-sm text-text-secondary">Appointments are hidden.</p>
         <button
           type="button"
@@ -41,12 +42,12 @@ export function AppointmentsStrip({
         >
           Show appointments
         </button>
-      </div>
+      </Card>
     );
   }
 
   return (
-    <div className="surface-card p-4 space-y-4">
+    <Card className="space-y-4">
       <div className="flex items-center justify-between gap-3 flex-wrap">
         <div className="flex items-center gap-2 min-w-0">
           <CalendarDays className="w-5 h-5 text-text-muted shrink-0 icon-flat" aria-hidden />
@@ -89,12 +90,14 @@ export function AppointmentsStrip({
           })}`;
           const palette = purposeStyle(a.purpose);
           return (
-            <button
+            <Card
+              as="button"
               key={a.id}
               type="button"
               onClick={() => onSelectAppointment(a.id)}
+              padding="none"
               className={`
-                text-left rounded-[var(--radius-sm)] border px-3 py-2 min-w-[200px] max-w-[280px] transition-shadow min-h-[52px]
+                text-left rounded-[var(--radius-sm)] px-3 py-2 min-w-[200px] max-w-[280px] transition-shadow min-h-[52px]
                 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/45
                 ${palette}
                 ${sel ? 'ring-2 ring-primary ring-offset-2 ring-offset-background-secondary shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]' : 'hover:brightness-110'}
@@ -105,10 +108,10 @@ export function AppointmentsStrip({
                 {a.patientFirstName} {a.patientLastName}
               </p>
               <p className="text-[11px] opacity-90 capitalize mt-0.5">{a.purpose}</p>
-            </button>
+            </Card>
           );
         })}
       </div>
-    </div>
+    </Card>
   );
 }