/* ==========================================================================
   Feedback — flash messages (Rails flash) and form/search alerts. Both share
   the same info/success/warn/danger token families. Values → tokens.css.
   ========================================================================== */

/* ---- ---- ---- ---- Flash messages ---- ---- ---- ---- */

.flash {
  padding: var(--space-3);
  margin: 0 0 -16px 0;
  border: 1px solid;
  font: var(--text-sm) var(--font-ui);
  border-radius: var(--radius-sm);
}

.flash-notice {
  color: var(--info-fg);
  background-color: var(--info-bg);
  border-color: var(--info-border);
}

.flash-alert,
.flash-error {
  color: var(--danger-fg);
  background-color: var(--danger-bg);
  border-color: var(--danger-border);
}

.flash-success {
  color: var(--success-fg);
  background-color: var(--success-bg);
  border-color: var(--success-border);
}

/* ---- ---- ---- ---- Alerts (form validation, search) ---- ---- ---- ---- */

.alert {
  padding: 15px;
  border: 1px solid transparent;
  border-radius: var(--radius);
}

.alert-success {
  color: var(--success-fg);
  background-color: var(--success-bg);
  border-color: var(--success-border);
}

.alert-info {
  color: var(--info-fg);
  background-color: var(--info-bg);
  border-color: var(--info-border);
}

.alert-warning {
  color: var(--warn-fg);
  background-color: var(--warn-bg);
  border-color: var(--warn-border);
}

.alert-danger {
  color: var(--danger-fg);
  background-color: var(--danger-bg);
  border-color: var(--danger-border);
}

.alert .alert-link {
  font-weight: var(--weight-bold);
}