/* Base styles are handled by Tailwind CSS in the head */
/* Custom overrides are handled in index.html <style> */
/* Animation for Toast Notification */
@keyframes slideIn {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.toast {
    animation: slideIn 0.3s ease-out forwards;
}

.toast.hiding {
    animation: fadeOut 0.3s ease-in forwards;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Mode Toggle Active State */
.mode-active {
    background-color: #334155; /* Slate 700 */
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}