/* app/assets/stylesheets/application.tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    font-family: 'Montserrat', sans-serif;
  }
}

@layer components {
  /* Primary Button - Brand blue background with white text */
  .btn-primary {
    @apply px-4 py-2 bg-brand-600 text-white rounded no-underline font-medium transition-colors;
    @apply hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-600 focus:ring-offset-2;
  }

  /* Secondary Button - White background with brand blue text and border */
  .btn-secondary {
    @apply px-4 py-2 bg-white border border-gray-300 text-brand-600 rounded no-underline font-medium transition-colors;
    @apply hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-brand-600 focus:ring-offset-2;
  }

  /* Outline Button - Transparent background with brand blue border and text */
  .btn-outline {
    @apply px-4 py-2 bg-transparent border border-brand-600 text-brand-600 rounded no-underline font-medium transition-colors;
    @apply hover:bg-brand-50 focus:outline-none focus:ring-2 focus:ring-brand-600 focus:ring-offset-2;
  }

  /* Ghost Button - No background, brand blue text */
  .btn-ghost {
    @apply px-4 py-2 bg-transparent text-brand-600 rounded no-underline font-medium transition-colors;
    @apply hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-600 focus:ring-offset-2;
  }

  /* Danger Button - Red background with white text */
  .btn-danger {
    @apply px-4 py-2 bg-error-600 text-white rounded no-underline font-medium transition-colors;
    @apply hover:bg-error-700 focus:outline-none focus:ring-2 focus:ring-error-600 focus:ring-offset-2;
  }

  /* Small Button Variant */
  .btn-sm {
    @apply px-3 py-1.5 text-sm;
  }

  /* Large Button Variant */
  .btn-lg {
    @apply px-6 py-3 text-lg;
  }

  /* Hero Section */
  .hero-section {
    @apply relative min-h-[600px] flex items-center text-white;
  }

  .hero-container {
    @apply container mx-auto px-4 relative z-10;
    @apply flex flex-col lg:flex-row items-center gap-8 lg:gap-12;
  }

  .hero-content {
    @apply flex-1 max-w-2xl;
  }

  .hero-heading {
    @apply text-4xl md:text-5xl font-bold mb-4;
  }

  .hero-subtext {
    @apply text-xl mb-8 text-gray-100;
  }

  .hero-button {
    @apply inline-flex items-center gap-2 px-6 py-3 bg-white text-brand-600 rounded-lg;
    @apply font-medium no-underline transition-colors;
    @apply hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-brand-600;
  }

  .hero-image-wrapper {
    @apply flex-1 flex items-center justify-center;
  }

  .hero-image {
    @apply max-w-full h-auto object-contain;
  }
}