/* Sovel toast / notification system — Theme 2C.
 * Layer 4 motion (toast surface): leisure enter, quick exit, per design contract.
 * All values reference design tokens from _tokens.css; reduced-motion is automatic
 * because the motion tokens collapse to 0ms under prefers-reduced-motion: reduce. */

#toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 24rem;
  pointer-events: none; /* let clicks fall through gaps; toasts opt back in */
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--text);
  pointer-events: auto;
  animation: toast-enter var(--motion-leisure) var(--ease-out);
}

.toast:focus {
  outline: none;
  box-shadow: var(--shadow-md), var(--shadow-focus-primary);
}

.toast--info { border-left: 3px solid var(--info); }
.toast--success { border-left: 3px solid var(--success); }
.toast--warning { border-left: 3px solid var(--warning); }
.toast--error,
.toast--critical {
  border-left: 3px solid var(--danger);
}

.toast__message {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
}

.toast__dismiss {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--text-muted);
  padding: var(--space-0) var(--space-1);
  transition: color var(--motion-quick) var(--ease-out);
}

.toast__dismiss:hover,
.toast__dismiss:focus-visible {
  color: var(--text);
  outline: none;
}

.toast--leaving {
  animation: toast-leave var(--motion-quick) var(--ease-in-out) forwards;
}

@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-leave {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}