body {
    font-family: 'Inter', sans-serif;
    background-color: #111827; /* bg-gray-900 */
    /* Subtle grid background pattern */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Custom focus styles for better brand consistency */
.form-input:focus {
    border-color: #6366f1; /* indigo-500 */
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
    outline: none;
}

.social-button:hover svg {
    transform: scale(1.1);
    transition: transform 0.2s ease-in-out;
}

/* Animation for the card appearing */
#login-card {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    animation: fadeIn 0.5s 0.1s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}