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

@layer components {
  /* Button styles for rich text content */
  .btn-primary {
    @apply inline-block py-3 px-6 bg-[#647977] hover:bg-[#4D5D5B] text-white font-medium rounded-full no-underline transition-colors shadow-md hover:shadow-lg;
  }

  .btn-secondary {
    @apply inline-block py-3 px-6 bg-[#C19962] hover:bg-[#A88550] text-white font-medium rounded-full no-underline transition-colors shadow-md hover:shadow-lg;
  }

  .btn-outline {
    @apply inline-block py-3 px-6 border-2 border-[#647977] text-[#647977] hover:bg-[#647977] hover:text-white font-medium rounded-full no-underline transition-colors;
  }

  /* Button group for multiple buttons */
  .button-group {
    @apply flex flex-wrap gap-4 mt-6 justify-center;
  }

  /* Prose link button overrides - ensure buttons don't get prose styling */
  .prose a.btn-primary,
  .prose a.btn-secondary {
    @apply no-underline text-white hover:text-white;
  }

  .prose a.btn-outline {
    @apply no-underline text-[#647977] hover:text-white;
  }

}