@layer components {
  .input-field {
    @apply w-full px-4 py-2.5 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all text-sm bg-white;
  }
  
  .btn-primary {
    @apply bg-indigo-600 hover:bg-indigo-700 text-white font-medium px-6 py-2.5 rounded-xl shadow-sm transition-all text-sm flex items-center gap-2 disabled:opacity-50;
  }

  .btn-secondary {
    @apply bg-slate-800 hover:bg-slate-900 text-white font-medium px-4 py-2 rounded-xl transition-all text-sm;
  }

  .btn-ghost {
    @apply text-slate-600 hover:text-slate-900 hover:bg-slate-100 font-medium px-4 py-2 rounded-xl transition-all text-sm;
  }

  .btn-danger {
    @apply text-rose-600 hover:bg-rose-50 font-medium px-3 py-1.5 rounded-lg transition-all text-xs border border-rose-200;
  }

  .btn-success {
    @apply bg-emerald-600 hover:bg-emerald-700 text-white font-medium px-8 py-2.5 rounded-xl shadow-sm transition-all text-sm flex items-center gap-2;
  }

  .step-badge {
    @apply flex flex-col items-center text-slate-400 transition-all;
  }

  .step-badge .step-num {
    @apply w-10 h-10 rounded-full border-2 border-slate-300 bg-white flex items-center justify-center font-bold text-sm transition-all;
  }

  .step-badge.active {
    @apply text-indigo-600;
  }

  .step-badge.active .step-num {
    @apply border-indigo-600 bg-indigo-600 text-white shadow-md shadow-indigo-100;
  }

  .step-badge.completed .step-num {
    @apply border-emerald-600 bg-emerald-600 text-white;
  }
}