badge colour variants

frontend/src/components/questions/question-card.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { Badge } from "@/components/ui/badge";
-import { getDifficultyColor, capitalize } from "@/lib/utils";
+import { getDifficultyVariant, getDifficultyLabel, capitalize } from "@/lib/utils";
 import type { QuestionListItem } from "@/types";
 
 interface QuestionCardProps {
@@ -15,25 +15,32 @@ export function QuestionCard({ question }: QuestionCardProps) {
     >
       <div className="flex items-start justify-between gap-4 mb-3">
         <h3 className="font-semibold">{question.title}</h3>
-        <Badge className={getDifficultyColor(question.difficulty)}>
+        <Badge
+          variant={getDifficultyVariant(question.difficulty)}
+          aria-label={getDifficultyLabel(question.difficulty)}
+        >
           {capitalize(question.difficulty)}
         </Badge>
       </div>
 
       <div className="flex flex-wrap gap-2 mb-3">
         {question.categories.map((cat) => (
-          <Badge key={cat.id} variant="outline">
+          <Badge key={cat.id} variant="category">
             {cat.name}
           </Badge>
         ))}
       </div>
 
-      <div className="flex items-center gap-4 text-sm text-[var(--muted-foreground)]">
+      <div className="flex flex-wrap items-center gap-2 text-sm">
+        {question.patterns.map((p) => (
+          <Badge key={p.id} variant="pattern">
+            {p.name}
+          </Badge>
+        ))}
         {question.leetcode_id && (
-          <span>LeetCode #{question.leetcode_id}</span>
-        )}
-        {question.patterns.length > 0 && (
-          <span>{question.patterns.map((p) => p.name).join(", ")}</span>
+          <span className="text-[var(--muted-foreground)]">
+            LeetCode #{question.leetcode_id}
+          </span>
         )}
       </div>
     </Link>