client/src/index.css

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

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

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    background-color: theme('colors.secondary.50');
    color: theme('colors.secondary.900');
    @apply font-sans antialiased selection:bg-primary-500 selection:text-white;
  }
}

@layer utilities {
  .glass {
    @apply bg-white/70 backdrop-blur-md border border-white/20 shadow-lg;
  }

  .glass-dark {
    @apply bg-secondary-900/70 backdrop-blur-md border border-secondary-800/50 shadow-lg;
  }

  .card-hover {
    @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
  }
  
  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary-600 to-accent-600;
  }
}