@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&family=Quicksand:wght@400;600;700&display=swap');
@import "tailwindcss";

@theme {
  --font-sans: "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Quicksand", sans-serif;
  
  --color-pink-50: #fff5f7;
  --color-pink-100: #ffe4e9;
  --color-pink-200: #ffc9d4;
  --color-pink-300: #ffa1b3;
  --color-pink-400: #ff6b8b;
  --color-pink-500: #f83a66;
  --color-pink-600: #e61e4d;
  --color-pink-700: #c2123d;
  --color-pink-800: #a11236;
  --color-pink-900: #861431;
}

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply bg-white text-gray-900 antialiased;
  }

  /* Custom Scrollbar - Pink Theme */
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    @apply bg-gray-50;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-pink-500/30 rounded-full border-2 border-transparent bg-clip-padding hover:bg-pink-500/60 transition-colors;
  }
}

@layer components {
  .btn-pink {
    @apply bg-pink-500 text-white px-8 py-3 rounded-full font-bold shadow-lg shadow-pink-500/20 hover:bg-pink-600 transition-all active:scale-95 inline-flex items-center justify-center cursor-pointer;
  }
  
  .btn-outline {
    @apply bg-white text-pink-500 border border-pink-200 px-8 py-3 rounded-full font-bold hover:bg-pink-50 transition-all active:scale-95 inline-flex items-center justify-center cursor-pointer;
  }

  .card-glass {
    @apply bg-white/80 backdrop-blur-md border border-pink-100 rounded-3xl shadow-sm hover:shadow-xl hover:border-pink-300 transition-all duration-300;
  }

  .section-title {
    @apply text-4xl md:text-5xl font-black tracking-tight text-gray-900 mb-4;
  }

  .section-subtitle {
    @apply text-pink-500 text-sm font-black tracking-widest uppercase mb-2;
  }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out forwards;
}

.bg-mesh {
  background-color: #ffffff;
  background-image: radial-gradient(at 0% 0%, hsla(340,100%,98%,1) 0, transparent 50%), 
                    radial-gradient(at 50% 0%, hsla(340,100%,95%,1) 0, transparent 50%), 
                    radial-gradient(at 100% 0%, hsla(340,100%,98%,1) 0, transparent 50%);
}