@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Base layer configuration for Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
  }
}

/* Custom reusable components and transitions */
@layer components {
  .btn-primary {
    @apply px-6 py-3 bg-blue-600 text-white font-medium rounded-lg shadow-md hover:bg-blue-700 hover:shadow-lg transition-all duration-300;
  }
  
  .card {
    @apply bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden transition-all duration-300 hover:shadow-md;
  }

  .traditional-card {
    @apply bg-white/70 dark:bg-neutral-800/70 backdrop-blur-md border border-white/50 dark:border-neutral-700 rounded-xl shadow-xl p-6 relative overflow-hidden transition-all duration-300 hover:-translate-y-1;
  }
}

/* Modal styling */
.modal-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}