/* ============================================================
   components/callout.css — .dd-callout
   A boxed aside inside long-form text: the paragraph worth reading
   twice. Built for the blog's callout block (#112, B3), reusable on
   any prose surface.

   Markup contract:
     <aside class="dd-callout dd-callout--tip">
       <p class="dd-callout__label">before you book</p>
       <p>Know the song…</p>
     </aside>

   Tones: --note (default) · --tip · --warning. They differ by the rail
   and the label, never by a new colour — --attention is the sanctioned
   amber (design-language §1) and there is no palette entry beyond it.
   ============================================================ */

.dd-callout {
  --dd-callout-accent: var(--accent-strong);
  margin: var(--space-6, 24px) 0;
  padding: var(--space-5, 20px) var(--space-5, 20px) var(--space-5, 20px)
    var(--space-6, 24px);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--dd-callout-accent);
  border-radius: var(--radius-md, 18px);
  background: var(--surface-tint);
}

.dd-callout--tip {
  --dd-callout-accent: var(--success);
}

.dd-callout--warning {
  --dd-callout-accent: var(--attention);
}

.dd-callout__label {
  margin: 0 0 var(--space-2, 8px);
  color: var(--dd-callout-accent);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.03em;
}

.dd-callout > p:last-child {
  margin-bottom: 0;
}