/* Hero Alert — soft-tinted status surface with a colored label. */

.hero-alert {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius-box);
  font-size: var(--font-md);
}

.hero-alert-info { background-color: var(--color-info-soft); color: var(--color-info); }
.hero-alert-success { background-color: var(--color-success-soft); color: var(--color-success); }
.hero-alert-warning { background-color: var(--color-warning-soft); color: var(--color-warning); }
.hero-alert-error { background-color: var(--color-error-soft); color: var(--color-error); }