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

@layer components {
    .btn {
        @apply w-full inline-flex items-center justify-center gap-3 rounded-xl font-semibold text-lg py-3.5 transition-all duration-200 focus:outline-none;
    }

    .btn--paystack {
        @apply text-white bg-gradient-to-r from-paystack-500 to-sky-500 hover:from-paystack-400 hover:to-sky-400 shadow-paystack hover:shadow-lg;
    }

    .btn--flutter {
        @apply text-white bg-gradient-to-r from-flutter-500 via-amber-500 to-orange-500 hover:from-flutter-400 hover:to-orange-400 shadow-flutter hover:shadow-lg;
    }

    .btn--ghost {
        @apply text-slate-700 dark:text-slate-200 bg-slate-100/60 dark:bg-slate-800/60 hover:bg-slate-100 dark:hover:bg-slate-800;
    }
}