/* Consent Angel Design System - Enhanced Button Components */

/* Base button component with common styles */
.btn-base {
  @apply inline-flex items-center justify-center font-medium rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
  /* Ensure consistent font-weight (never bold) */
  font-weight: 500;
}

/* PRIMARY ACTIONS (Blue Family) */
.btn-primary {
  @apply btn-base bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 focus:ring-blue-500;
}

.btn-view {
  @apply btn-base bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 focus:ring-blue-500;
}

/* SUCCESS/POSITIVE ACTIONS (Green Family) */
.btn-save {
  @apply btn-base bg-green-600 text-white hover:bg-green-700 active:bg-green-800 focus:ring-green-500;
}

/* NAVIGATION ACTIONS (Gray Family) - Updated to avoid confusion with save actions */
.btn-navigation {
  @apply btn-base bg-gray-600 text-white hover:bg-gray-700 active:bg-gray-800 focus:ring-gray-500;
}

/* CAUTION/MODIFICATION (Orange Family) */
.btn-edit {
  @apply btn-base bg-orange-500 text-white hover:bg-orange-600 active:bg-orange-700 focus:ring-orange-400;
}

/* DANGER/DESTRUCTIVE (Red Family) */
.btn-danger {
  @apply btn-base bg-red-600 text-white hover:bg-red-700 active:bg-red-800 focus:ring-red-500;
}

/* NEUTRAL/SUPPORTING (Gray Family) */
.btn-secondary {
  @apply btn-base bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 active:bg-gray-100 focus:ring-blue-500;
}

.btn-link {
  @apply btn-base bg-transparent text-blue-600 hover:text-blue-700 active:text-blue-800 focus:ring-blue-500 underline;
  /* Remove padding for link-style buttons */
  padding: 0;
  min-height: auto;
}

/* SIZE VARIANTS with clear hierarchy */

/* Small - Table row actions, inline buttons */
.btn-sm {
  @apply py-1.5 px-3 text-sm min-h-[32px];
}

/* Medium - Interface buttons, form buttons (default) */
.btn-md {
  @apply py-2 px-4 text-base min-h-[40px];
}

/* Large - Hero/prominent actions */
.btn-lg {
  @apply py-3 px-6 text-lg min-h-[48px];
}

/* Legacy size support for backward compatibility */
.btn {
  @apply py-2 px-4 text-sm min-h-[36px];
}

/* Table action button group */
.table-actions {
  @apply flex items-center justify-end space-x-2;
}

.table-actions .btn-base {
  @apply btn-sm;
}

/* Navigation button styles (legacy support) */
.nav-button {
  @apply btn-base btn-md bg-gray-100 text-gray-700 hover:bg-gray-200 active:bg-gray-300 focus:ring-gray-400;
}

.nav-button-active {
  @apply btn-base btn-md bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 focus:ring-blue-500;
}

/* Mobile responsive adjustments */
@media (max-width: 393px) {
  .btn-md {
    @apply min-h-[44px] px-3;
  }
  
  .btn-sm {
    @apply min-h-[40px] px-2;
  }
  
  .btn-lg {
    @apply min-h-[52px] px-4;
  }
  
  .table-actions {
    @apply flex-col space-x-0 space-y-1;
  }
  
  .table-actions .btn-base {
    @apply w-full;
  }
}

/* Focus visible for keyboard navigation */
.btn-base:focus-visible {
  @apply ring-2 ring-offset-2;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .btn-base {
    @apply border-2 border-current;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .btn-base {
    @apply transition-none;
  }
}

/* Ensure no icons in buttons */
.btn-base svg,
.btn-base i,
.btn-base .icon {
  display: none;
}

/* Accessibility improvements */
.btn-base:disabled {
  @apply cursor-not-allowed opacity-50;
  pointer-events: none;
}

/* Print styles */
@media print {
  .btn-base {
    @apply border border-gray-400 bg-white text-black;
  }
}


/* Additional functional button class */
.btn-delete {
  @apply btn-base bg-red-600 text-white hover:bg-red-700 active:bg-red-800 focus:ring-red-500;
}