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

/* Add smooth scrolling to the whole document */
html {
  scroll-behavior: smooth;
}

@layer components {
  .btn-primary {
    @apply rounded-md bg-primary-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 inline-flex items-center;
  }
  
  .btn-secondary {
    @apply text-sm font-semibold leading-6 text-gray-900 hover:text-primary-600 inline-flex items-center;
  }

  .btn-danger {
    @apply rounded-md bg-red-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 inline-flex items-center;
  }

  .icon-container {
    @apply rounded-lg bg-primary-100 p-2 flex items-center justify-center;
  }

  .nav-link {
    @apply text-sm font-semibold leading-6 text-gray-900 hover:text-primary-600 transition-colors duration-200;
  }

  .mobile-nav-link {
    @apply -mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50;
  }

  /* Toast animations */
  .toast-enter {
    opacity: 0;
    transform: translateY(-1rem);
  }

  .toast-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 300ms, transform 300ms;
  }

  .toast-exit {
    opacity: 1;
  }

  .toast-exit-active {
    opacity: 0;
    transform: translateY(-1rem);
    transition: opacity 300ms, transform 300ms;
  }
}