badge colour variants

frontend/src/app/globals.css

@@ -49,6 +49,18 @@
   --approach-correct-bg: #f0fdf4;
   --approach-correct-border: #bbf7d0;
   --approach-correct-fg: #16a34a;
+
+  /* Badge colors - Category (teal) */
+  --badge-category: #0d9488;
+  --badge-category-bg: #ccfbf1;
+
+  /* Badge colors - Pattern (indigo) */
+  --badge-pattern: #4f46e5;
+  --badge-pattern-bg: #e0e7ff;
+
+  /* Badge colors - Optimal (green) */
+  --badge-optimal: #16a34a;
+  --badge-optimal-bg: #dcfce7;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -101,6 +113,18 @@
     --approach-correct-bg: rgba(22, 163, 74, 0.15);
     --approach-correct-border: rgba(22, 163, 74, 0.4);
     --approach-correct-fg: #4ade80;
+
+    /* Badge colors - Category (teal, dark mode) */
+    --badge-category: #2dd4bf;
+    --badge-category-bg: rgba(20, 184, 166, 0.2);
+
+    /* Badge colors - Pattern (indigo, dark mode) */
+    --badge-pattern: #a5b4fc;
+    --badge-pattern-bg: rgba(99, 102, 241, 0.2);
+
+    /* Badge colors - Optimal (green, dark mode) */
+    --badge-optimal: #4ade80;
+    --badge-optimal-bg: rgba(34, 197, 94, 0.2);
   }
 }
 

frontend/src/app/questions/[slug]/page.tsx

@@ -5,7 +5,7 @@ import { CodeBlock } from "@/components/ui/code-block";
 import { Markdown } from "@/components/ui/markdown";
 import { Callout, ApproachBox } from "@/components/ui/callout";
 import { Collapsible } from "@/components/ui/collapsible";
-import { getDifficultyColor, getDifficultyLabel, capitalize } from "@/lib/utils";
+import { getDifficultyVariant, getDifficultyLabel, capitalize } from "@/lib/utils";
 import {
   FileText,
   AlertCircle,
@@ -40,7 +40,7 @@ export default async function QuestionDetailPage({
         <div className="flex items-start justify-between gap-4 mb-4">
           <h1 className="text-3xl font-bold">{question.title}</h1>
           <Badge
-            className={getDifficultyColor(question.difficulty)}
+            variant={getDifficultyVariant(question.difficulty)}
             aria-label={getDifficultyLabel(question.difficulty)}
           >
             {capitalize(question.difficulty)}
@@ -50,12 +50,12 @@ export default async function QuestionDetailPage({
         <div className="flex flex-wrap gap-2 mb-4">
           {question.categories.map((cat) => (
             <Link key={cat.id} href={`/questions?category=${cat.slug}`}>
-              <Badge variant="outline">{cat.name}</Badge>
+              <Badge variant="category">{cat.name}</Badge>
             </Link>
           ))}
           {question.patterns.map((pat) => (
             <Link key={pat.id} href={`/patterns/${pat.slug}`}>
-              <Badge>{pat.name}</Badge>
+              <Badge variant="pattern">{pat.name}</Badge>
             </Link>
           ))}
         </div>
@@ -239,9 +239,7 @@ export default async function QuestionDetailPage({
               <div key={solution.id}>
                 <div className="flex items-center gap-2 mb-2">
                   <h4 className="font-medium">{solution.approach_name}</h4>
-                  <Badge className="bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
-                    Optimal
-                  </Badge>
+                  <Badge variant="optimal">Optimal</Badge>
                 </div>
                 {solution.explanation && (
                   <div className="text-sm text-[var(--muted-foreground)] mb-3 prose-content">