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

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-gray-50 text-gray-900 font-sans;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-semibold tracking-tight;
  }

  h1 {
    @apply text-4xl lg:text-5xl leading-[1.2];
  }

  h2 {
    @apply text-3xl lg:text-4xl leading-[1.2];
  }

  h3 {
    @apply text-2xl lg:text-3xl leading-[1.2];
  }

  h4 {
    @apply text-xl lg:text-2xl leading-[1.3];
  }

  p {
    @apply leading-relaxed;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  .btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
  }

  .btn-secondary {
    @apply bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-500;
  }

  .btn-accent {
    @apply bg-accent-500 text-white hover:bg-accent-600 focus:ring-accent-400;
  }

  .card {
    @apply bg-white rounded-2xl shadow-sm border border-gray-100;
  }

  .glass-card {
    @apply bg-white/80 backdrop-blur-sm border border-gray-100/30 shadow-md rounded-2xl;
  }

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