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

@layer components {
  /* Button base component with improved accessibility */
  .btn-base {
    @apply inline-flex items-center justify-center font-medium rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
    /* Ensure minimum contrast ratios for WCAG compliance */
  }

  /* Functional button color variants with WCAG-compliant hover states */
  .btn-view {
    @apply btn-base bg-blue-600 text-white border border-blue-600;
    /* WCAG AA compliant hover state */
    @apply hover:bg-blue-700 hover:border-blue-700 hover:text-white;
    @apply active:bg-blue-800 active:border-blue-800 active:text-white;
    @apply focus:ring-blue-500;
  }

  .btn-edit {
    @apply btn-base bg-orange-600 text-white border border-orange-600;
    /* WCAG AA compliant hover state */
    @apply hover:bg-orange-700 hover:border-orange-700 hover:text-white;
    @apply active:bg-orange-800 active:border-orange-800 active:text-white;
    @apply focus:ring-orange-500;
  }

  .btn-delete {
    @apply btn-base bg-red-600 text-white border border-red-600;
    /* WCAG AA compliant hover state */
    @apply hover:bg-red-700 hover:border-red-700 hover:text-white;
    @apply active:bg-red-800 active:border-red-800 active:text-white;
    @apply focus:ring-red-500;
  }

  .btn-create {
    @apply btn-base bg-green-600 text-white border border-green-600;
    /* WCAG AA compliant hover state */
    @apply hover:bg-green-700 hover:border-green-700 hover:text-white;
    @apply active:bg-green-800 active:border-green-800 active:text-white;
    @apply focus:ring-green-500;
  }

  .btn-analytics {
    @apply btn-base bg-purple-600 text-white border border-purple-600;
    /* WCAG AA compliant hover state */
    @apply hover:bg-purple-700 hover:border-purple-700 hover:text-white;
    @apply active:bg-purple-800 active:border-purple-800 active:text-white;
    @apply focus:ring-purple-500;
  }

  .btn-users {
    @apply btn-base bg-indigo-600 text-white border border-indigo-600;
    /* WCAG AA compliant hover state */
    @apply hover:bg-indigo-700 hover:border-indigo-700 hover:text-white;
    @apply active:bg-indigo-800 active:border-indigo-800 active:text-white;
    @apply focus:ring-indigo-500;
  }

  .btn-modules {
    @apply btn-base bg-teal-600 text-white border border-teal-600;
    /* WCAG AA compliant hover state */
    @apply hover:bg-teal-700 hover:border-teal-700 hover:text-white;
    @apply active:bg-teal-800 active:border-teal-800 active:text-white;
    @apply focus:ring-teal-500;
  }

  .btn-tiers {
    @apply btn-base bg-cyan-600 text-white border border-cyan-600;
    /* WCAG AA compliant hover state */
    @apply hover:bg-cyan-700 hover:border-cyan-700 hover:text-white;
    @apply active:bg-cyan-800 active:border-cyan-800 active:text-white;
    @apply focus:ring-cyan-500;
  }

  .btn-primary {
    @apply btn-base bg-blue-600 text-white border border-blue-600;
    /* WCAG AA compliant hover state */
    @apply hover:bg-blue-700 hover:border-blue-700 hover:text-white;
    @apply active:bg-blue-800 active:border-blue-800 active:text-white;
    @apply focus:ring-blue-500;
  }

  .btn-secondary {
    @apply btn-base bg-white text-gray-700 border border-gray-300;
    /* WCAG AA compliant hover state */
    @apply hover:bg-gray-50 hover:border-gray-400 hover:text-gray-800;
    @apply active:bg-gray-100 active:border-gray-500 active:text-gray-900;
    @apply focus:ring-blue-500;
  }

  /* Size variants with proper touch targets */
  .btn-sm {
    @apply py-2 px-3 text-sm min-h-[36px] min-w-[64px];
  }

  .btn {
    @apply py-2.5 px-4 text-sm min-h-[40px] min-w-[80px];
  }

  .btn-lg {
    @apply py-3 px-6 text-base min-h-[44px] min-w-[96px];
  }

  /* Button group for table actions */
  .btn-group {
    @apply flex items-center gap-2;
  }

  .btn-group .btn {
    @apply btn-sm;
  }

  /* Responsive button group for mobile */
  @media (max-width: 640px) {
    .btn-group {
      @apply flex-col gap-1;
    }
    
    .btn-group .btn {
      @apply w-full min-h-[44px];
    }
  }
}

@layer base {
  body {
    @apply bg-gray-50 text-gray-900 font-sans text-sm;
  }
  
  h1 {
    @apply text-3xl font-bold mb-6 text-gray-900;
  }
  
  h2 {
    @apply text-2xl font-bold mb-4 text-gray-800;
  }
  
  h3 {
    @apply text-xl font-bold mb-3 text-gray-800;
  }
}