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

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

@layer base {
  html {
    font-family: 'Inter', 'Amazon Ember', 'Helvetica Neue', Arial, sans-serif;
  }
  
  body {
    @apply bg-white text-gray-900;
  }
}

@layer components {
  .btn-primary {
    @apply bg-aws-orange hover:bg-orange-600 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200;
  }
  
  .btn-secondary {
    @apply bg-aws-blue hover:bg-blue-800 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200;
  }
  
  .btn-outline {
    @apply border-2 border-aws-orange text-aws-orange hover:bg-aws-orange hover:text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200;
  }
  
  .card {
    @apply bg-white rounded-xl shadow-lg p-6 border border-gray-100;
  }
  
  .section-padding {
    @apply py-16 px-4 sm:px-6 lg:px-8;
  }
  
  .container-custom {
    @apply max-w-7xl mx-auto;
  }
  
  .gradient-bg {
    background: linear-gradient(135deg, #FF9900 0%, #FF6600 100%);
  }
  
  .aws-gradient {
    background: linear-gradient(135deg, #232F3E 0%, #146EB4 100%);
  }
}

@layer utilities {
  .text-gradient {
    @apply bg-gradient-to-r from-aws-orange to-orange-600 bg-clip-text text-transparent;
  }
  
  .shadow-aws {
    box-shadow: 0 10px 25px -5px rgba(255, 153, 0, 0.1), 0 10px 10px -5px rgba(255, 153, 0, 0.04);
  }
}