/* Custom CSS for a clean, modern, light-themed design */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

body {
    font-family: 'Poppins', sans-serif;
}

/* Animations for a dynamic feel */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.5s ease-out forwards;
}

/* Base styles for Tailwind-like classes for a clean look */
.bg-white { background-color: #fff; }
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-gray-200 { background-color: #e5e7eb; }
.bg-gray-300 { background-color: #d1d5db; }
.bg-gray-400 { background-color: #9ca3af; }
.bg-gray-500 { background-color: #6b7280; }
.bg-gray-800 { background-color: #1f2937; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-800 { color: #1f2937; }
.text-white { color: #fff; }

/* Custom colors for branding */
.bg-indigo-600 { background-color: #4f46e5; }
.hover\:bg-indigo-700:hover { background-color: #4338ca; }
.text-indigo-600 { color: #4f46e5; }
.focus\:ring-indigo-300:focus { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.5); }

/* Success and error messages */
.bg-green-500 { background-color: #22c55e; }
.hover\:bg-green-600:hover { background-color: #16a34a; }
.bg-green-100 { background-color: #dcfce7; }
.text-green-700 { color: #15803d; }
.bg-red-100 { background-color: #fee2e2; }
.text-red-700 { color: #b91c1c; }

/* Utility classes for layout */
.min-h-screen { min-height: 100vh; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.p-4 { padding: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-3xl { border-radius: 1.5rem; }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.transform { transform: scale(1); }
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.5s; }
.transition-colors { transition-property: background-color, border-color, color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.3s; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.2s; }
.active\:scale-95:active { transform: scale(0.95); }
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.hidden { display: none; }