@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
    scroll-behavior: smooth;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spin-emoji {
    display: inline-block;
    animation: spin 4s linear infinite;
}
.btn-primary {
    @apply bg-purple-600 hover:bg-purple-700 text-white font-medium py-3 px-6 rounded-lg transition-all flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2;
}
.btn-secondary {
    @apply bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 font-medium py-3 px-6 rounded-lg transition-all flex items-center justify-center;
}
.feature-card {
    @apply bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300 transform hover:-translate-y-1;
}
.feature-card h3 {
    @apply text-xl font-semibold mt-4 mb-2;
}

.feature-card p {
    @apply text-gray-600 dark:text-gray-400;
}
.feature-icon {
    @apply w-14 h-14 rounded-full flex items-center justify-center text-2xl transition-all duration-300;
}
.feature-card:hover .feature-icon {
    @apply scale-110;
}
.feature-icon i {
    stroke-width: 2;
}

/* Dark mode toggle styles */
.dark-mode-toggle {
    @apply w-12 h-6 rounded-full p-1 flex items-center transition-colors duration-300 focus:outline-none;
}

.dark-mode-toggle span {
    @apply w-4 h-4 rounded-full bg-white dark:bg-gray-800 shadow-md transform transition-transform duration-300;
}