/* frontend/src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    body {
        @apply bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100;
    }
    
    ::-webkit-scrollbar {
        @apply w-2;
    }
    
    ::-webkit-scrollbar-track {
        @apply bg-gray-100 dark:bg-gray-800 rounded;
    }
    
    ::-webkit-scrollbar-thumb {
        @apply bg-gray-400 dark:bg-gray-600 rounded hover:bg-gray-500;
    }
}

@layer components {
    .card {
        @apply bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700;
    }
    
    .btn-primary {
        @apply bg-primary-600 hover:bg-primary-700 text-white font-semibold py-2 px-4 rounded-lg transition duration-200 ease-in-out transform hover:scale-105;
    }
    
    .btn-secondary {
        @apply bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 font-semibold py-2 px-4 rounded-lg transition duration-200;
    }
    
    .input-field {
        @apply w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent dark:bg-gray-700 dark:text-white transition;
    }
}