/* ==========================================================================
   ALERTS
   ========================================================================== */

.jomi-alert {
  --jomi-alert-bg: var(--jomi-surface-card, #e4ecf0);
  --jomi-alert-border: var(--jomi-color-border);
  --jomi-alert-text: var(--jomi-text-body);
  --jomi-alert-accent: var(--jomi-color-primary);

  background: var(--jomi-alert-bg);
  border: 2px solid var(--jomi-alert-border);
  border-radius: var(--jomi-form-radius);
  padding: 1rem 1.25rem;
  margin-block: var(--jomi-form-gap);
  color: var(--jomi-alert-text);
  font-size: var(--jomi-font-size-micro);
  line-height: var(--jomi-line-height-micro);
}

.jomi-alert strong { color: var(--jomi-alert-accent); }
.jomi-alert a { color: var(--jomi-color-accent); text-decoration: underline; }
.jomi-alert a:hover { color: var(--jomi-color-primary); }

.jomi-alert.info {
  --jomi-alert-accent: var(--jomi-color-primary);
  --jomi-alert-bg: color-mix(in srgb, var(--jomi-color-primary) 10%, #fff);
  --jomi-alert-border: color-mix(in srgb, var(--jomi-color-primary) 40%, #fff);
}

.jomi-alert.success {
  --jomi-alert-accent: var(--jomi-color-secondary);
  --jomi-alert-bg: color-mix(in srgb, var(--jomi-color-secondary) 12%, #fff);
  --jomi-alert-border: color-mix(in srgb, var(--jomi-color-secondary) 45%, #fff);
}

.jomi-alert.error {
  --jomi-alert-accent: var(--jomi-color-accent);
  --jomi-alert-bg: color-mix(in srgb, var(--jomi-color-accent) 10%, #fff);
  --jomi-alert-border: color-mix(in srgb, var(--jomi-color-accent) 45%, #fff);
}