feat: add callout shortcode (note/tip/info/warning/danger/success)

- Single shortcode with type param, CSS-only variants
- Left border + fading bottom border (::after gradient)
- Colors mapped to existing theme tokens (--accent, --accent2, --type-link, --type-life)
- --callout-danger: #ef4444 hardcoded exception (approved)
- role=alert for danger, role=note for all others (WCAG AA)
- aria-hidden on Feather icons, title overridable via param
- EN/IT i18n keys

Also fixes html.theme-light CSS vars to match THEMING-STANDARD.md:
- --bg, --bg2, --surface, --border, --text, --text-dim, --muted
- --accent (#7c3aed), --accent2 (#008f5a)

4 files changed, 110 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) {
diff --git a/i18n/en.yaml b/i18n/en.yaml
index 0dfb811..c328748 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -177,3 +177,11 @@ repo_example_2_desc:
   other: "SlackBuild scripts for Example Package 2. A comprehensive package with full documentation and support."
 repo_example_3_desc:
   other: "SlackBuild scripts for Example Package 3. Utility package for system administration and configuration."
+
+# Callout shortcode titles
+callout_note: "Note"
+callout_tip: "Tip"
+callout_info: "Info"
+callout_warning: "Warning"
+callout_danger: "Danger"
+callout_success: "Success"
diff --git a/i18n/it.yaml b/i18n/it.yaml
index 3114c57..ff3a80a 100644
--- a/i18n/it.yaml
+++ b/i18n/it.yaml
@@ -179,3 +179,11 @@ repo_example_2_desc:
   other: "Script SlackBuild per Pacchetto Esempio 2. Un pacchetto completo con documentazione e supporto completi."
 repo_example_3_desc:
   other: "Script SlackBuild per Pacchetto Esempio 3. Pacchetto di utilità per amministrazione di sistema e configurazione."
+
+# Titoli shortcode callout
+callout_note: "Nota"
+callout_tip: "Suggerimento"
+callout_info: "Informazione"
+callout_warning: "Attenzione"
+callout_danger: "Pericolo"
+callout_success: "Successo"
diff --git a/layouts/shortcodes/callout.html b/layouts/shortcodes/callout.html
new file mode 100644
index 0000000..b492267
--- /dev/null
+++ b/layouts/shortcodes/callout.html
@@ -0,0 +1,15 @@
+{{- $type  := .Get "type" | default "note" -}}
+{{- $title := .Get "title" | default (i18n (printf "callout_%s" $type)) -}}
+{{- $role  := cond (eq $type "danger") "alert" "note" -}}
+{{- $icons := dict "note" "edit-2" "tip" "zap" "info" "info" "warning" "alert-triangle" "danger" "x-circle" "success" "check-circle" -}}
+{{- $icon  := index $icons $type | default "info" -}}
+
+<div class="callout callout-{{ $type }}" role="{{ $role }}">
+  <div class="callout-title">
+    <i data-feather="{{ $icon }}" class="w-3.5 h-3.5" aria-hidden="true"></i>
+    <span>{{ $title }}</span>
+  </div>
+  <div class="callout-body">
+    {{- .Inner | markdownify -}}
+  </div>
+</div>