@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@layer base {
    * {
        border-color: #e5e7eb;
    }
    body {
        font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
    }
}

@layer components {
    .btn-primary {
        @apply bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition duration-200 font-medium;
    }
    .btn-secondary {
        @apply bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition duration-200 font-medium;
    }
    .btn-accent {
        @apply bg-yellow-500 text-white px-4 py-2 rounded-lg hover:bg-yellow-600 transition duration-200 font-medium;
    }
    .btn-success {
        @apply bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition duration-200 font-medium;
    }
    .btn-danger {
        @apply bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition duration-200 font-medium;
    }
}

/* Custom theme colors */
:root {
    --color-blue: #2563eb;
    --color-yellow: #eab308;
}