@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom base styles */
@layer base {
    html {
        @apply scroll-smooth;
    }
    body {
        @apply antialiased text-gray-900 dark:text-gray-100;
    }
    h1, h2, h3, h4, h5, h6 {
        @apply font-bold text-gray-900 dark:text-white;
    }
}

/* Custom components */
@layer components {
    .btn-primary {
        @apply bg-primary-600 hover:bg-primary-700 text-white font-medium py-3 px-6 rounded-lg transition-colors;
    }
    .btn-secondary {
        @apply border border-primary-600 text-primary-600 dark:text-primary-400 dark:border-primary-400 font-medium py-3 px-6 rounded-lg transition-colors hover:bg-primary-50 dark:hover:bg-gray-800;
    }
.card {
        @apply bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow;
    }
}
/* Animation classes */
.animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; }
    to { opacity: 1; }
}
/* Dark mode transitions */
.dark-mode-transition * {
    @apply transition-colors duration-200;
}
/* Custom properties for decorative borders */
:root {
    --gradient-from: #4f46e5;
    --gradient-to: #06b6d4;
    --gradient-opacity: 0.1;
}

.dark {
    --gradient-from: #8b5cf6;
    --gradient-to: #0ea5e9;
    --gradient-opacity: 0.15;
}