@layer components {
  /* ========================================
     PRIMARY CALL-TO-ACTION BUTTON
     ======================================== */
  .btn-primary {
    @apply px-8 py-4 text-lg font-bold rounded-xl 
           text-white bg-brand-primary 
           hover:bg-brand-primaryHover
           focus-visible:ring-2 focus-visible:ring-brand-primary focus-visible:ring-offset-2
           shadow-xl shadow-brand-primary/30 
           transition-all duration-200
           disabled:opacity-50 disabled:cursor-not-allowed;
    min-height: 48px; /* Touch target (Audit BTP) */
  }

  /* ========================================
     SECONDARY BUTTON
     ======================================== */
  .btn-secondary {
    @apply px-8 py-4 text-lg font-bold rounded-xl 
           text-text-base bg-white border-2 border-surface-border
           hover:bg-surface-elevated hover:border-brand-primary
           focus-visible:ring-2 focus-visible:ring-slate-400
           transition-all duration-200
           disabled:opacity-50 disabled:cursor-not-allowed;
    min-height: 48px;
  }

  /* ========================================
     DANGER/WARNING BUTTON
     ======================================== */
  .btn-danger {
    @apply px-6 py-3 rounded-lg font-semibold
           text-white bg-brand-danger hover:bg-red-600
           focus-visible:ring-2 focus-visible:ring-brand-danger
           transition-all duration-200
           disabled:opacity-50 disabled:cursor-not-allowed;
    min-height: 48px;
  }

  /* ========================================
     ICON BUTTON (44x44px minimum)
     ======================================== */
  .btn-icon {
    @apply w-touch h-touch flex items-center justify-center
           rounded-lg hover:bg-surface-elevated
           transition-colors duration-150
           focus-visible:ring-2 focus-visible:ring-brand-primary;
  }

  /* ========================================
     GHOST BUTTON
     ======================================== */
  .btn-ghost {
    @apply px-6 py-3 text-base font-semibold
           text-text-base bg-transparent
           hover:bg-surface-elevated
           focus-visible:ring-2 focus-visible:ring-slate-300
           transition-all duration-150
           disabled:opacity-50 disabled:cursor-not-allowed;
    min-height: 48px;
  }

  /* ========================================
     LINK STYLED AS BUTTON
     ======================================== */
  .btn-link {
    @apply inline-flex items-center justify-center
           px-6 py-3 text-base font-semibold
           text-brand-primary hover:text-brand-primaryHover
           focus-visible:ring-2 focus-visible:ring-brand-primary
           transition-colors duration-150;
    min-height: 48px;
  }
}