.ui-alert {
  background: var(--ui-surface-muted);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-control);
  box-shadow: var(--ui-shadow-sm);
  color: var(--ui-text-primary);
  padding: var(--ui-space-4);
}

.ui-alert--info {
  background: var(--ui-color-info-muted);
  border-color: var(--ui-color-info-strong);
  color: var(--ui-color-info-on-muted);
}

.ui-alert--success {
  background: var(--ui-color-success-muted);
  border-color: var(--ui-color-success-strong);
  color: var(--ui-color-success-on-muted);
}

.ui-alert--warning {
  background: var(--ui-color-warning-muted);
  border-color: var(--ui-color-warning-strong);
  color: var(--ui-color-warning-on-muted);
}

.ui-alert--danger {
  background: var(--ui-color-danger-muted);
  border-color: var(--ui-color-danger-strong);
  color: var(--ui-color-danger-on-muted);
}