feat(frontend): visual improvements for content

frontend/src/app/globals.css

@@ -21,6 +21,34 @@
   --difficulty-medium-bg: #fef9c3;
   --difficulty-hard: #dc2626;
   --difficulty-hard-bg: #fee2e2;
+
+  /* Callout colors - Warning (orange/red) */
+  --callout-warning-bg: #fff7ed;
+  --callout-warning-border: #f97316;
+  --callout-warning-fg: #9a3412;
+
+  /* Callout colors - Success (green) */
+  --callout-success-bg: #f0fdf4;
+  --callout-success-border: #22c55e;
+  --callout-success-fg: #166534;
+
+  /* Callout colors - Info (blue) */
+  --callout-info-bg: #eff6ff;
+  --callout-info-border: #3b82f6;
+  --callout-info-fg: #1e40af;
+
+  /* Callout colors - Insight (purple) */
+  --callout-insight-bg: #faf5ff;
+  --callout-insight-border: #a855f7;
+  --callout-insight-fg: #6b21a8;
+
+  /* Approach boxes */
+  --approach-wrong-bg: #fef2f2;
+  --approach-wrong-border: #fecaca;
+  --approach-wrong-fg: #dc2626;
+  --approach-correct-bg: #f0fdf4;
+  --approach-correct-border: #bbf7d0;
+  --approach-correct-fg: #16a34a;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -45,12 +73,45 @@
     --difficulty-medium-bg: rgba(234, 179, 8, 0.2);
     --difficulty-hard: #f87171;
     --difficulty-hard-bg: rgba(239, 68, 68, 0.2);
+
+    /* Callout colors - Warning (dark mode) */
+    --callout-warning-bg: rgba(249, 115, 22, 0.15);
+    --callout-warning-border: #f97316;
+    --callout-warning-fg: #fdba74;
+
+    /* Callout colors - Success (dark mode) */
+    --callout-success-bg: rgba(34, 197, 94, 0.15);
+    --callout-success-border: #22c55e;
+    --callout-success-fg: #86efac;
+
+    /* Callout colors - Info (dark mode) */
+    --callout-info-bg: rgba(59, 130, 246, 0.15);
+    --callout-info-border: #3b82f6;
+    --callout-info-fg: #93c5fd;
+
+    /* Callout colors - Insight (dark mode) */
+    --callout-insight-bg: rgba(168, 85, 247, 0.15);
+    --callout-insight-border: #a855f7;
+    --callout-insight-fg: #d8b4fe;
+
+    /* Approach boxes (dark mode) */
+    --approach-wrong-bg: rgba(220, 38, 38, 0.15);
+    --approach-wrong-border: rgba(220, 38, 38, 0.4);
+    --approach-wrong-fg: #f87171;
+    --approach-correct-bg: rgba(22, 163, 74, 0.15);
+    --approach-correct-border: rgba(22, 163, 74, 0.4);
+    --approach-correct-fg: #4ade80;
   }
 }
 
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif;
+  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+/* Improved line-height for prose content */
+.prose-content {
+  line-height: 1.7;
 }