feat: add Callout component with note/tip/warning/danger variants

app/globals.css

@@ -632,3 +632,46 @@ body, body *, [class*="bg-"], [class*="border-"], [class*="text-"] {
   outline: 2px solid var(--color-accent);
   outline-offset: 2px;
 }
+
+/* Callout/Admonition styles */
+.callout {
+  @apply my-6 rounded-lg border p-4 text-sm leading-relaxed;
+}
+.callout-title {
+  @apply flex items-center gap-2 font-semibold mb-2;
+}
+.callout-icon {
+  @apply text-base;
+}
+.callout-content {
+  @apply pl-6;
+}
+
+/* Type variants */
+.callout-note {
+  @apply border-accent/30 bg-accent/[0.06];
+}
+.callout-note .callout-title {
+  @apply text-accent;
+}
+
+.callout-tip {
+  @apply border-emerald-500/30 bg-emerald-500/[0.06];
+}
+.callout-tip .callout-title {
+  @apply text-emerald-600 dark:text-emerald-400;
+}
+
+.callout-warning {
+  @apply border-amber-500/30 bg-amber-500/[0.06];
+}
+.callout-warning .callout-title {
+  @apply text-amber-600 dark:text-amber-400;
+}
+
+.callout-danger {
+  @apply border-red-500/30 bg-red-500/[0.06];
+}
+.callout-danger .callout-title {
+  @apply text-red-600 dark:text-red-400;
+}