refine dashboard theme and orange accent styling

frontend/src/components/shared/SectionCard.tsx

@@ -10,11 +10,11 @@ type Props = {
 
 export function SectionCard({ title, subtitle, children, action }: Props) {
   return (
-    <Card>
+    <Card className="surface-card-strong">
       <CardHeader className="flex items-start justify-between gap-4">
         <div className="min-w-0 flex flex-col gap-1">
           <CardTitle>{title}</CardTitle>
-          {subtitle && <CardDescription>{subtitle}</CardDescription>}
+          {subtitle && <CardDescription className="section-subtle">{subtitle}</CardDescription>}
         </div>
         {action && <div className="shrink-0">{action}</div>}
       </CardHeader>

frontend/src/components/shared/StatCard.tsx

@@ -13,10 +13,10 @@ export function StatCard({ icon, label, value, trend, color = 'primary' }: Props
   const chipColor = color === 'default' ? 'default' : color;
 
   return (
-    <Card>
+    <Card className="surface-card">
       <CardContent className="flex flex-col gap-2 p-4">
         <div className="flex items-center justify-between">
-          <Chip color={chipColor} size="sm" variant="flat" startContent={icon}>
+          <Chip color={chipColor} size="sm" variant="flat" startContent={icon} className={color === 'primary' ? 'accent-chip' : undefined}>
             {label}
           </Chip>
           {trend && (
@@ -26,7 +26,7 @@ export function StatCard({ icon, label, value, trend, color = 'primary' }: Props
           )}
         </div>
         <div className="text-2xl font-bold tracking-tight">{value}</div>
-        <div className="text-tiny text-default-500">{label}</div>
+        <div className="text-tiny section-subtle">{label}</div>
       </CardContent>
     </Card>
   );