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

@layer base {
  :root {
    color-scheme: light;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-white font-sans text-sm leading-relaxed text-gm-text;
  }

  a,
  button,
  input,
  textarea {
    @apply outline-none;
  }
}

@layer components {
  .container-gm {
    @apply mx-auto w-full max-w-[1440px] px-[5%];
  }

  .gm-btn {
    @apply inline-flex items-center justify-center rounded-[18px] px-6 py-3 text-sm font-medium transition-all duration-300;
  }

  .gm-btn-primary {
    @apply bg-gm-green text-white hover:scale-95 hover:bg-gm-green-dark;
  }

  .gm-btn-secondary {
    @apply bg-white text-gm-green hover:scale-95 hover:bg-gm-green hover:text-white;
  }

  .section-title {
    @apply text-[28px] font-semibold leading-tight text-[#262626] md:text-[32px];
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}