@layer components {
    .btn-primary {
        @apply bg-primary text-white px-8 py-4 rounded-2xl font-bold transition-all duration-300
               hover:bg-primary-hover hover:scale-[1.02] active:scale-95 shadow-primary flex items-center justify-center gap-2;
    }

    .btn-secondary {
        @apply bg-surface-container text-primary px-8 py-4 rounded-2xl font-bold transition-all duration-300
               hover:bg-pink-100 hover:scale-[1.02] active:scale-95 flex items-center justify-center gap-2;
    }

    .btn-outline {
        @apply border-2 border-primary/20 text-primary px-8 py-4 rounded-2xl font-bold transition-all duration-300
               hover:bg-primary/5 hover:border-primary/40 active:scale-95 flex items-center justify-center gap-2;
    }

    .card {
        @apply bg-surface p-8 rounded-[2.5rem] border border-border shadow-sm 
               transition-all duration-500 hover:shadow-lg;
    }

    .card-premium {
        @apply bg-surface p-8 rounded-[2.5rem] border border-border shadow-sm 
               transition-all duration-500 hover:shadow-xl hover:-translate-y-1;
    }

    .input-field {
        @apply w-full border-b-2 border-border py-3 bg-transparent focus:border-primary 
               outline-none text-on-surface transition-colors font-medium;
    }

    .form-label {
        @apply block text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-2;
    }

    .badge {
        @apply px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest;
    }

    .badge-success { @apply bg-emerald-100 text-emerald-600; }
    .badge-error { @apply bg-red-100 text-red-600; }
    .badge-warning { @apply bg-amber-100 text-amber-600; }
    .badge-primary { @apply bg-primary/10 text-primary; }
}