1 files changed, 79 insertions, 0 deletions
diff --git a/assets/css/main.css b/assets/css/main.css
index 20626a2..bdf0f6c 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -29,6 +29,13 @@
   --type-quote-text: #000000;
   --type-link-text: #000000;
   --type-photo-text: #000000;
+  /* Callout shortcode colors */
+  --callout-note:    var(--accent);
+  --callout-tip:     var(--accent2);
+  --callout-info:    var(--type-link);
+  --callout-warning: var(--type-life);
+  --callout-danger:  #ef4444;
+  --callout-success: var(--accent2);
 }
 
 /* Light theme overrides */
@@ -58,6 +65,8 @@ html.theme-light {
   --type-quote-text: #000000;
   --type-link-text: #000000;
   --type-photo-text: #ffffff;
+  /* Callout shortcode colors */
+  --callout-danger:  #ef4444;
 }
 
 /* No-JS fallback: prefers-color-scheme light */
@@ -86,6 +95,8 @@ html.theme-light {
     --type-quote-text: #000000;
     --type-link-text: #000000;
     --type-photo-text: #ffffff;
+    /* Callout shortcode colors */
+    --callout-danger:  #ef4444;
   }
 }
 
@@ -1764,6 +1775,74 @@ html.theme-light .banner-obsolete {
   border-left-color: var(--type-life);
 }
 
+/* ============================================================
+   Callout Shortcode
+   ============================================================ */
+
+.callout {
+  @apply relative my-6 py-3 px-4 rounded-r-md;
+}
+
+.callout::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 50%;
+  height: 1px;
+  background: linear-gradient(to right, var(--callout-color), transparent);
+}
+
+.callout-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.375rem;
+}
+
+.callout-title span {
+  font-family: var(--font-mono, 'JetBrains Mono', monospace);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--callout-color);
+}
+
+.callout-title svg,
+.callout-title i {
+  width: 14px;
+  height: 14px;
+  color: var(--callout-color);
+  flex-shrink: 0;
+}
+
+.callout-body {
+  color: var(--text);
+  font-size: 0.875rem;
+  line-height: 1.6;
+}
+
+.callout-body p:last-child {
+  margin-bottom: 0;
+}
+
+/* Type variants - sets --callout-color for border, title, icon, and ::after gradient */
+.callout-note    { --callout-color: var(--callout-note);    border-left: 4px solid var(--callout-note);    background: rgba(168, 85, 247, 0.08); }
+.callout-tip     { --callout-color: var(--callout-tip);     border-left: 4px solid var(--callout-tip);     background: rgba(0, 255, 136, 0.08); }
+.callout-info    { --callout-color: var(--callout-info);    border-left: 4px solid var(--callout-info);    background: rgba(56, 189, 248, 0.08); }
+.callout-warning { --callout-color: var(--callout-warning); border-left: 4px solid var(--callout-warning); background: rgba(245, 158, 11, 0.08); }
+.callout-danger  { --callout-color: var(--callout-danger);  border-left: 4px solid var(--callout-danger);  background: rgba(239, 68, 68, 0.08); }
+.callout-success { --callout-color: var(--callout-success); border-left: 4px solid var(--callout-success); background: rgba(0, 255, 136, 0.08); }
+
+/* Light mode - reduce opacity to 0.06 per theming standard */
+html.theme-light .callout-note    { background: rgba(124, 58, 237, 0.06); }
+html.theme-light .callout-tip     { background: rgba(0, 143, 90, 0.06); }
+html.theme-light .callout-info    { background: rgba(2, 132, 199, 0.06); }
+html.theme-light .callout-warning { background: rgba(217, 119, 6, 0.06); }
+html.theme-light .callout-danger  { background: rgba(239, 68, 68, 0.06); }
+html.theme-light .callout-success { background: rgba(0, 143, 90, 0.06); }
+
 /* Motion Safety - Respect prefers-reduced-motion */
 
 @media (prefers-reduced-motion: reduce) {