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

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background-color: #0D0C17;
  color: #FFFFFF;
}

@layer components {
  .btn-primary {
    @apply bg-[#FB4078] hover:bg-[#e02f60] text-white font-bold py-3 px-8 rounded-full transition-all duration-200 shadow-glow hover:shadow-[0_0_40px_rgba(251,64,120,0.5)];
  }
  .btn-outline {
    @apply bg-transparent hover:bg-[#FB4078]/10 text-white font-bold py-3 px-8 rounded-full border border-white/30 hover:border-[#FB4078] transition-all duration-200;
  }
  .card {
    @apply bg-[#181A21] rounded-2xl border border-[#2A2B35] transition-all duration-300;
  }
  .card-hover {
    @apply hover:border-[#FB4078]/40 hover:shadow-card-hover;
  }
  .section-title {
    @apply text-3xl lg:text-4xl font-extrabold text-white leading-tight;
  }
  .text-accent {
    @apply text-[#FB4078];
  }
  .text-gold {
    @apply text-[#FEAE33];
  }
  .form-input {
    @apply w-full bg-[#1E2029] border border-[#2A2B35] rounded-xl px-4 py-3 text-white placeholder-[#9B9BAD] focus:outline-none focus:ring-2 focus:ring-[#FB4078] focus:border-transparent transition-all;
  }
  .form-label {
    @apply block text-sm font-semibold text-white mb-1.5;
  }
  .section-padding {
    @apply py-20 px-4 sm:px-6 lg:px-8;
  }
  .container-max {
    @apply max-w-7xl mx-auto;
  }
}