/* toasts.css */

.toasts {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: var(--z-toast);
  max-width: 360px;
}

.toast {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-md);
  color: var(--clr-text-1);
  font-size: var(--text-sm);
  border-left: 4px solid var(--clr-info);
  animation: fn-rise var(--transition-normal) ease both;
}

.toast--success { border-left-color: var(--clr-success); }
.toast--error   { border-left-color: var(--clr-error); }
.toast--warning { border-left-color: var(--clr-warning); }
.toast--out     { opacity: 0; transition: opacity var(--transition-normal); }

@media (max-width: 560px) {
  .toasts { left: var(--space-4); right: var(--space-4); max-width: none; }
}