/* Tailwind CSS Base Styles */

/* Base Tailwind Utilities */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Dark Mode Support */
.dark {
    color-scheme: dark;
}

/* Custom Tailwind Extensions */
@layer components {
    .btn-primary {
        @apply bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-300;
    }
    
    .btn-secondary {
        @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-md transition-colors duration-300;
    }
    
    .btn-outline {
        @apply border border-indigo-600 text-indigo-600 hover:bg-indigo-600 hover:text-white font-medium py-2 px-4 rounded-md transition-colors duration-300;
    }
    
    .dark .btn-secondary {
        @apply bg-gray-700 hover:bg-gray-600 text-gray-200;
    }
    
    .dark .btn-outline {
        @apply border-indigo-400 text-indigo-400 hover:bg-indigo-500;
    }
}

/* Responsive Utilities */
.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem;
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

/* Dark Mode Transitions */
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

html.dark {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity));
}

/* Common Tailwind Utility Classes */
.bg-gray-50 { background-color: rgb(249 250 251); }
.dark .dark\:bg-gray-900 { background-color: rgb(17 24 39); }
.text-gray-900 { color: rgb(17 24 39); }
.dark .dark\:text-gray-100 { color: rgb(243 244 246); }
.text-indigo-600 { color: rgb(79 70 229); }
.dark .dark\:text-indigo-400 { color: rgb(129 140 248); }
.text-gray-600 { color: rgb(75 85 99); }
.dark .dark\:text-gray-300 { color: rgb(209 213 219); }