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

@layer base {
  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hjQ.woff2")
      format("woff2");
  }

  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    @apply font-sans text-dark-800 bg-white;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-heading font-bold text-dark-900;
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 text-base font-semibold text-white bg-primary-600 rounded-lg
      hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
      transition-colors duration-200;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center px-6 py-3 text-base font-semibold text-primary-700 bg-primary-50 rounded-lg border border-primary-200
      hover:bg-primary-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
      transition-colors duration-200;
  }

  .btn-outline {
    @apply inline-flex items-center justify-center px-6 py-3 text-base font-semibold text-dark-700 bg-white rounded-lg border border-dark-300
      hover:bg-dark-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
      transition-colors duration-200;
  }

  .section-padding {
    @apply py-16 md:py-24 px-4 sm:px-6 lg:px-8;
  }

  .container-narrow {
    @apply max-w-7xl mx-auto;
  }

  .card {
    @apply bg-white rounded-2xl border border-dark-200 p-6 md:p-8 shadow-sm hover:shadow-md transition-shadow duration-200;
  }

  .input-field {
    @apply w-full px-4 py-3 border border-dark-300 rounded-lg text-dark-800 placeholder-dark-400
      focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500
      transition-colors duration-200;
  }
}