/* ============================================================
   COMPONENT · CALLOUT
   Informational box with severity. Uses Birren safety colors.
   ============================================================ */

.c-callout {
  --co-color: var(--color-info);

  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--co-color) 8%, var(--color-surface));
  border-left: 4px solid var(--co-color);
  border-radius: var(--radius-xs);
  box-shadow: var(--seam-embossed);
}

.c-callout__icon {
  font-family: var(--font-plaque);
  font-weight: var(--fw-black);
  color: var(--co-color);
  font-size: var(--fs-lg);
  text-shadow: 0 0 6px var(--co-color);
}

.c-callout__title {
  font-family: var(--font-plaque);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--co-color);
  margin-bottom: var(--space-1);
}

.c-callout__body { color: var(--color-text); }

.c-callout--ok      { --co-color: var(--color-ok); }
.c-callout--info    { --co-color: var(--color-info); }
.c-callout--caution { --co-color: var(--color-caution); }
.c-callout--alert   { --co-color: var(--color-alert); }
.c-callout--danger  { --co-color: var(--color-danger); }