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

@layer components {
    .form-input {
        @apply w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white
               placeholder-gray-500 focus:outline-none focus:border-purple-500 focus:ring-1
               focus:ring-purple-500 transition;
    }
    .form-label {
        @apply block text-xs font-medium text-gray-400 mb-1;
    }
    .form-error {
        @apply text-xs text-red-400 mt-1;
    }
    .btn-primary {
        @apply bg-purple-600 hover:bg-purple-500 text-white font-semibold px-4 py-2 rounded-lg transition cursor-pointer;
    }
    .btn-secondary {
        @apply bg-gray-800 hover:bg-gray-700 border border-gray-700 text-gray-300 hover:text-white
               font-semibold px-4 py-2 rounded-lg transition cursor-pointer;
    }
}