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

@layer base {
  :root {
    --color-primary: 25 55 100; /* Deep blue */
    --color-primary-blue: 41 98 255; /* Bright blue */
    --color-secondary-amber: 255 183 77; /* Amber/orange */
    --color-secondary-emerald: 52 211 153; /* Emerald green */
    --color-mountain-gray: 107 114 128; /* Mountain gray */
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply font-sans text-gray-800 antialiased;
  }

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

@layer components {
  .container {
    @apply px-4 mx-auto;
  }

  .btn {
    @apply inline-flex items-center justify-center px-6 py-3 font-medium rounded-md transition-colors;
  }

  .btn-primary {
    @apply bg-primary text-white hover:bg-primary-blue;
  }

  .btn-secondary {
    @apply bg-secondary-amber text-primary hover:bg-secondary-emerald;
  }

  .btn-outline {
    @apply border-2 border-white text-white hover:bg-white/10;
  }

  .card {
    @apply bg-white rounded-lg shadow-lg border border-gray-100 overflow-hidden transition-shadow hover:shadow-xl;
  }

  .nav-link {
    @apply text-gray-700 hover:text-primary transition-colors;
  }

  .nav-link-active {
    @apply text-primary font-medium;
  }

  .dropdown {
    @apply relative group;
  }

  .dropdown-menu {
    @apply absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg border border-gray-100 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50;
  }

  .dropdown-item {
    @apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary;
  }
}

@layer utilities {
  .font-heading {
    font-family: 'Montserrat', sans-serif;
  }
}