/**
 * <Callout> — vanilla composite component.
 *
 * Variants: --info | --warning | --danger
 * Used for the "Save your key now" banner (warning), the "Verify it works"
 * box (info), and the destructive-warning panel inside the delete modal
 * (danger). Distinct from <Toast>, which is transient.
 *
 * Markup:
 *   <aside class="c-callout c-callout--warning" role="note">
 *     <h3 class="c-callout__title">Save your MCP API key now</h3>
 *     <p class="c-callout__body">…</p>
 *   </aside>
 */

.c-callout {
  display: block;
  border: 0.5px solid var(--border-tertiary);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  margin: 0 0 var(--space-5);
}

.c-callout__title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-h3);
  font-weight: 500;
}

.c-callout__body {
  margin: 0;
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
}

.c-callout__body > * + * {
  margin-top: var(--space-2);
}

.c-callout--info {
  background: var(--info-bg);
  border-color: var(--info-border);
  color: var(--info-text);
}

.c-callout--warning {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
}

.c-callout--danger {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
}