/* =============================================================================
 * Alert / inline banner — error / success / info. Hidden until a tone is set.
 * DM Sans, token-driven. Toggle tone by adding .alert--error/success/info.
 * ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap');

.alert {
  display: none;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-12);
  font-family: 'DM Sans', var(--font-sans);
  font-size: var(--font-size-footnote);
  border: 1px solid transparent;
}
.alert--error {
  display: block;
  color: #f4b4b4;
  background-color: rgba(220, 60, 60, 0.12);
  border-color: rgba(220, 60, 60, 0.35);
}
.alert--success {
  display: block;
  color: #bfe6c2;
  background-color: rgba(60, 180, 90, 0.12);
  border-color: rgba(60, 180, 90, 0.35);
}
.alert--info {
  display: block;
  color: #bcd7f4;
  background-color: rgba(60, 120, 220, 0.12);
  border-color: rgba(60, 120, 220, 0.35);
}