/* ============================================================
   Component · Alert (info, success, warning, error)
   ============================================================ */

.alert {
  display: flex;
  gap: var(--gio-space-3);
  padding: var(--gio-space-4) var(--gio-space-5);
  border-radius: var(--gio-radius-md);
  border: 1px solid;
  font-size: var(--gio-text-sm);
  line-height: 1.5;
}
.alert__icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  font-weight: var(--gio-w-bold);
}
.alert__title { font-weight: var(--gio-w-semibold); margin: 0 0 2px; }
.alert__body { margin: 0; }

.alert--info {
  background: var(--gio-color-info-soft);
  border-color: var(--gio-color-info);
  color: var(--gio-color-info);
}
.alert--success {
  background: var(--gio-color-success-soft);
  border-color: var(--gio-color-success);
  color: var(--gio-color-success);
}
.alert--warning {
  background: var(--gio-color-warning-soft);
  border-color: var(--gio-color-warning);
  color: var(--gio-color-warning);
}
.alert--danger {
  background: var(--gio-color-danger-soft);
  border-color: var(--gio-color-danger);
  color: var(--gio-color-danger);
}
.alert .alert__title, .alert .alert__body { color: var(--gio-color-text-strong); }