/* Alert
   An inline message. Tone is set with data-tone (info (default), success,
   warning, danger). Compose with an icon, .dp-alert-body, a title and text.
   All colour and type come from tokens.css. */

.dp-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--dp-space-3);
  padding: var(--dp-space-4) var(--dp-space-5);
  border: 1px solid transparent;
  border-radius: var(--dp-radius-md);
  color: var(--dp-text);
  background: var(--dp-info-soft);
  border-color: var(--dp-blue-300);
}

.dp-alert-icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 1px;
  color: var(--dp-info);
}

.dp-alert-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dp-alert-title {
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-alert-text {
  font-size: var(--dp-text-sm);
  color: var(--dp-text-muted);
}

/* ---- Tones ----------------------------------------------------------- */
.dp-alert[data-tone="success"] {
  background: var(--dp-success-soft);
  border-color: #bbf7d0;
}
.dp-alert[data-tone="success"] .dp-alert-icon { color: var(--dp-success); }

.dp-alert[data-tone="warning"] {
  background: var(--dp-warning-soft);
  border-color: #fde68a;
}
.dp-alert[data-tone="warning"] .dp-alert-icon { color: var(--dp-warning); }

.dp-alert[data-tone="danger"] {
  background: var(--dp-danger-soft);
  border-color: #fecaca;
}
.dp-alert[data-tone="danger"] .dp-alert-icon { color: var(--dp-danger); }