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

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@layer base {
  :root {
    --header-height: 4rem;
    .swiper-pagination-bullet-active {
      @apply bg-brand;
    }
  }

  html {
    font-family: 'Inter', system-ui, sans-serif;
    scroll-behavior: smooth;
  }

  html,
  body {
    @apply h-full w-full bg-bg-main text-text;
  }

  h1 {
    @apply text-4xl;
  }
  h2 {
    @apply text-3xl;
  }
  h3 {
    @apply text-2xl;
  }
  h4 {
    @apply text-xl;
  }
  h5 {
    @apply text-lg;
  }
  h6 {
    @apply text-base;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply text-text-light;
  }

  a {
    @apply transform cursor-pointer no-underline duration-300 ease-in-out hover:text-text-light;
  }
}

@layer components {
  .brand-btn {
    @apply rounded-full bg-brand px-6 py-3 text-center text-text-light transition-colors duration-300 hover:bg-brand/80;
  }
  .brand-btn-outline {
    @apply rounded-full border border-brand bg-transparent px-6 py-3 text-center text-text-light transition-colors duration-300 hover:bg-brand;
  }
  .tag-btn {
    @apply text-sm hover:tag-btn-active rounded-full bg-card p-2 transition-colors duration-300;
  }
  .tag-btn-active {
    @apply bg-brand text-text-light;
  }
  .card {
    @apply rounded-3xl bg-card p-4 md:p-6;
  }
}