/* ============================================================
   components/alert.css  —  ds-alert with all states
   ============================================================ */

.ds-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3, 0.75rem);
  border-radius: var(--ds-alert-radius, 1rem);
  border: 1px solid var(--ds-border);
  padding: var(--ds-alert-p, 1rem 1.25rem);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ds-text);
}

.ds-alert__icon { flex-shrink: 0; margin-top: 0.1em; font-size: 1.125rem; }
.ds-alert__body { flex: 1; }
.ds-alert__title { font-weight: 600; margin-bottom: 0.2em; }

/* ── Variants ─────────────────────────────────────────────── */
.ds-alert--success {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.10), rgba(16, 185, 129, 0.04));
  border-color: rgba(16, 185, 129, 0.24);
  color: #065f46;
}
.ds-alert--success .ds-alert__icon { color: #10b981; }

.ds-alert--warn {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.04));
  border-color: rgba(245, 158, 11, 0.26);
  color: #78350f;
}
.ds-alert--warn .ds-alert__icon { color: #f59e0b; }

.ds-alert--danger {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.10), rgba(239, 68, 68, 0.04));
  border-color: rgba(239, 68, 68, 0.22);
  color: #7f1d1d;
}
.ds-alert--danger .ds-alert__icon { color: #ef4444; }

.ds-alert--info {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.10), rgba(59, 130, 246, 0.04));
  border-color: rgba(59, 130, 246, 0.22);
  color: #1e3a8a;
}
.ds-alert--info .ds-alert__icon { color: #3b82f6; }

.ds-alert--neutral {
  background: var(--ds-surface-2);
  border-color: var(--ds-border);
  color: var(--ds-text-muted);
}
.ds-alert--neutral .ds-alert__icon { color: var(--ds-text-soft); }

/* ── Dark mode variant overrides ─────────────────────────── */
:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .ds-alert--success {
  background: rgba(16, 185, 129, 0.08);
  color: #6ee7b7;
}
:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .ds-alert--warn {
  background: rgba(245, 158, 11, 0.08);
  color: #fcd34d;
}
:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .ds-alert--danger {
  background: rgba(239, 68, 68, 0.08);
  color: #fca5a5;
}
:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .ds-alert--info {
  background: rgba(59, 130, 246, 0.08);
  color: #93c5fd;
}