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

@layer base {
  h1, h2, h3, h4, h5, h6 {
    @apply font-display;
  }
  
  h1 {
    @apply text-4xl md:text-5xl lg:text-6xl font-bold;
  }
  
  h2 {
    @apply text-3xl md:text-4xl font-bold;
  }
  
  h3 {
    @apply text-2xl md:text-3xl font-semibold;
  }
  
  h4 {
    @apply text-xl md:text-2xl font-semibold;
  }
  
  p {
    @apply text-base md:text-lg leading-relaxed;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition-all duration-300 focus:outline-none;
  }
  
  .btn-primary {
    @apply btn bg-accent-400 hover:bg-accent-500 text-black shadow-md hover:shadow-lg;
  }
  
  .btn-secondary {
    @apply btn bg-primary-600 hover:bg-primary-700 text-white shadow-md hover:shadow-lg;
  }
  
  .btn-accent {
    @apply btn bg-accent-500 hover:bg-accent-600 text-black shadow-md hover:shadow-lg;
  }
  
  .btn-outline {
    @apply btn border-2 border-secondary-300 dark:border-secondary-700 hover:bg-secondary-100 dark:hover:bg-secondary-800 text-secondary-900 dark:text-secondary-100;
  }
  
  .container-custom {
    @apply container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl;
  }
  
  .section {
    @apply py-16 md:py-24;
  }
  
  .card {
    @apply bg-white dark:bg-secondary-900 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden border border-secondary-200 dark:border-secondary-800;
  }
}

/* Animations */
.fade-in {
  @apply animate-fade-in;
}

.slide-up {
  @apply animate-slide-up;
}

.slide-down {
  @apply animate-slide-down;
}

/* Accessibility */
.sr-only {
  @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
}

/* Focus styles for keyboard navigation */
:focus-visible {
  @apply outline-none ring-2 ring-primary-500 dark:ring-primary-400;
}