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

:root {
  --primary-orange: #FF6B00;
  --primary-red: #E63946;
  --primary-yellow: #FFD166;
  --dark-blue: #1D3557;
  --light-blue: #A8DADC;
  --white: #FFFFFF;
  --light-gray: #F8F9FA;
  --dark-gray: #343A40;
}

@layer base {
  body {
    @apply font-sans text-dark-gray bg-white;
  }
  h1, h2, h3, h4, h5, h6 {
    @apply font-bold;
  }
  a {
    @apply text-dark-blue hover:text-primary-orange transition-colors;
  }
}

@layer components {
  .btn-primary {
    @apply bg-primary-orange text-white px-6 py-3 rounded-md font-medium hover:bg-opacity-90 transition-all shadow-md hover:shadow-lg;
  }
  .btn-secondary {
    @apply bg-white text-primary-orange border border-primary-orange px-6 py-3 rounded-md font-medium hover:bg-primary-orange hover:text-white transition-all;
  }
  .card {
    @apply bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow;
  }
  .nav-link {
    @apply px-4 py-2 text-dark-gray hover:text-primary-orange transition-colors;
  }
  .section-padding {
    @apply py-16 md:py-24;
  }
  .container {
    @apply mx-auto px-4 sm:px-6 lg:px-8;
  }
}

@layer utilities {
  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary-orange to-primary-red;
  }
  .bg-gradient-primary {
    @apply bg-gradient-to-r from-primary-orange to-primary-red;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}