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

:root {
  --foreground-rgb: 74, 55, 40;
  --background-rgb: 250, 248, 245;
}

html {
  scroll-behavior: smooth;
}

body {
  color: rgb(var(--foreground-rgb));
  background: rgb(var(--background-rgb));
}

@layer base {
  h1, h2, h3, h4 {
    @apply font-serif;
  }
}

@layer components {
  .btn-primary {
    @apply inline-block px-8 py-3 bg-nusqool-yellow text-nusqool-brown font-medium
           rounded-sm hover:bg-opacity-90 transition-all duration-300;
  }

  .btn-secondary {
    @apply inline-block px-8 py-3 border-2 border-nusqool-brown text-nusqool-brown
           font-medium rounded-sm hover:bg-nusqool-brown hover:text-white transition-all duration-300;
  }

  .section-padding {
    @apply py-16 md:py-24 lg:py-32 px-6 md:px-12 lg:px-20;
  }

  .heading-xl {
    @apply text-3xl md:text-4xl lg:text-5xl font-serif leading-tight;
  }

  .heading-lg {
    @apply text-2xl md:text-3xl lg:text-4xl font-serif leading-tight;
  }

  .body-text {
    @apply text-base md:text-lg leading-relaxed text-nusqool-warmGray;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #FAF8F5;
}

::-webkit-scrollbar-thumb {
  background: #E8C547;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #d4b03e;
}