@layer components {
  .btn {
    @apply px-6 py-3 rounded-md font-medium transition duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }
  .btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
  }
  .btn-secondary {
    @apply bg-white text-primary-600 border border-primary-200 hover:bg-primary-50 focus:ring-primary-500;
  }
  .card {
    @apply bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition duration-200;
  }
  .nav-link {
    @apply inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition duration-200;
  }
  .nav-link.active {
    @apply border-gray-900 text-gray-900;
  }
  .nav-link:not(.active) {
    @apply border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700;
  }
}

@layer utilities {
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .bg-gradient-primary {
    @apply bg-gradient-to-r from-primary-600 to-blue-500;
  }
}