/* callout — @tokens: --callout-gap, --callout-padding, --callout-radius

   A static inline note box for content emphasis (info / tip / success / warning
   / danger): a tinted panel with a coloured left accent bar. Distinct from the
   `.hzo-alert` feedback component — alert is dismissible UI feedback; callout is
   permanent editorial emphasis inside prose. Primitive: CSS-only, not
   interactive (no focus/disabled idioms).

   Token-only: the base bar reads --brand and the tint reads --bg-alt; each
   modifier swaps to a state colour + its matching -bg tint (all four state
   colours have a -bg pair in tokens.css). The accent-bar width has no semantic
   role, so it's a component token with a --border-3 fallback (the icon-button.css
   dial pattern). Gap + padding follow the same fallback shape. */
.hzo-callout {
    display: flex;
    gap: var(--callout-gap, var(--space-md));
    padding: var(--callout-padding, var(--space-md));
    border-radius: var(--callout-radius, var(--radius-panel));
    border-left: var(--callout-bar-width, var(--border-3)) solid var(--brand);
    background: var(--bg-alt);
    color: var(--text-body);
}

/* Optional leading glyph — sits in the numeral/heading ink so it reads as chrome,
   not body copy. Sized to the body line-box; doesn't stretch in the flex row. */
.hzo-callout__icon {
    flex: 0 0 auto;
    line-height: var(--lh-none);
    color: var(--text-heading);
}

/* Text stack — title + body live in a column beside the icon. */
.hzo-callout__title {
    font-weight: var(--fw-600);
    line-height: var(--lh-snug);
    color: var(--text-heading);
}
.hzo-callout__body {
    line-height: var(--lh-normal);
    color: var(--text-body);
}

/* Intent modifiers — recolor the accent bar + tint together. Each reads its
   state colour and paired -bg tint (no borrowed tokens). Danger maps to the
   error role. */
.hzo-callout--info    { border-left-color: var(--info);    background: var(--info-bg); }
.hzo-callout--success { border-left-color: var(--success); background: var(--success-bg); }
.hzo-callout--warning { border-left-color: var(--warning); background: var(--warning-bg); }
.hzo-callout--danger  { border-left-color: var(--error);   background: var(--error-bg); }