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

@layer base {
  * {
    @apply border-brand-black;
  }
  
  body {
    @apply bg-white text-brand-black font-merriweather antialiased;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-spartan;
  }

  html {
    scroll-behavior: smooth;
  }
}

@layer utilities {
  
  .text-on-gradient {
    @apply text-brand-black;
  }

  .bg-grad-primary, .bg-grad-secondary {
    color: #000000;
  }

  .animate-spin-slow {
    animation: spin 8s linear infinite;
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .delay-100 {
    animation-delay: 0.1s;
  }

  .delay-200 {
    animation-delay: 0.2s;
  }

  .delay-300 {
    animation-delay: 0.3s;
  }
}