@layer components {
/* =============================================================================
   @elements/style — callout

   Intent variants: is-info (default) / is-success / is-warning / is-danger /
   is-accent.

     <div class="callout is-warning">
       <div class="callout-title">Heads up</div>
       <div class="callout-body">…</div>
     </div>
============================================================================= */

.callout {
  padding:       var(--space-4) var(--space-5);
  border-left:   3px solid var(--info);
  background:    var(--info-soft);
  color:         var(--info-ink);
  border-radius: 0 var(--radius-surface) var(--radius-surface) 0;
  font-size:     var(--text-sm);
  line-height:   var(--leading-body);
}

.callout-title {
  font-weight:   var(--weight-semibold);
  margin-bottom: var(--space-1);
  font-size:     var(--text-sm);
}

.callout-body { color: inherit; }

.callout.is-info    { border-color: var(--info);    background: var(--info-soft);    color: var(--info-ink); }
.callout.is-success { border-color: var(--success); background: var(--success-soft); color: var(--success-ink); }
.callout.is-warning { border-color: var(--warning); background: var(--warning-soft); color: var(--warning-ink); }
.callout.is-danger  { border-color: var(--danger);  background: var(--danger-soft);  color: var(--danger-ink); }
.callout.is-accent  { border-color: var(--accent);  background: var(--accent-soft);  color: var(--accent-ink); }

}