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

/* Custom Tailwind components */
@layer components {
  /* Button components */
  .btn-primary {
    @apply bg-primary text-white px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition-all duration-300;
  }
  
  .btn-secondary {
    @apply bg-secondary text-white px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition-all duration-300;
  }
  
  .btn-outline {
    @apply border-2 border-primary text-primary px-6 py-3 rounded-lg font-medium hover:bg-primary hover:text-white transition-all duration-300;
  }

  /* Card components */
  .card {
    @apply bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow duration-300;
  }

  /* Section components */
  .section {
    @apply py-16 lg:py-24;
  }

  .container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* Text styles */
  .heading-1 {
    @apply text-4xl lg:text-6xl font-bold text-primary leading-tight;
  }

  .heading-2 {
    @apply text-3xl lg:text-5xl font-bold text-primary leading-tight;
  }

  .heading-3 {
    @apply text-2xl lg:text-4xl font-semibold text-primary leading-tight;
  }

  .text-body {
    @apply text-base lg:text-lg text-gray-600 leading-relaxed;
  }
}

/* Custom utilities */
@layer utilities {
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }

  .bg-gradient-primary {
    background: linear-gradient(135deg, theme('colors.primary'), theme('colors.secondary'));
  }

  .bg-gradient-overlay {
    background: linear-gradient(rgba(37, 43, 66, 0.8), rgba(37, 43, 66, 0.8));
  }
}