/**
 * Toast Notification Component
 * Shared across all apps. Uses --app-accent from settings.css (scoped per
 * .app-coffee, .app-tea, .app-sunlight body class) for the default toast
 * background. Success/error variants use semantic color tokens.
 * @version 1.0.0
 */

.toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast, 1100);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    padding: 12px 24px;
    border-radius: 12px;
    background: var(--app-accent);
    color: white;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 20px rgb(0 0 0 / 15%);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-success {
    background: #10b981;
    box-shadow: 0 4px 20px rgb(16 185 129 / 25%);
}

.toast-error {
    background: #ef4444;
    box-shadow: 0 4px 20px rgb(239 68 68 / 25%);
}

.toast-info {
    background: var(--app-accent);
    box-shadow: 0 4px 20px rgb(0 0 0 / 15%);
}

@media (prefers-reduced-motion: reduce) {
    .toast {
        transition-duration: 0.01ms !important;
    }
}