@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Playfair Display", serif;
  
  --color-cherry: #FF2E63;
  --color-cherry-dark: #8B0000;
  --color-bg-dark: #080808;
  --color-surface: #121212;
  --color-glass: rgba(255, 255, 255, 0.05);
}

@layer base {
  body {
    @apply bg-bg-dark text-white font-sans antialiased selection:bg-cherry selection:text-white;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-serif tracking-tight;
  }
}

/* Custom Utilities */
@utility glass {
  @apply bg-glass backdrop-blur-xl border border-white/10;
}

@utility cherry-glow {
  box-shadow: 0 0 20px rgba(255, 46, 99, 0.3);
}

@utility text-gradient {
  @apply bg-clip-text text-transparent bg-gradient-to-r from-cherry to-white;
}

@utility no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

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

/* Page Transitions */
.page-section {
  @apply min-h-screen pt-24 pb-20;
}

.hidden {
  display: none;
}

/* Floating Button */
.float-btn {
  @apply fixed bottom-8 right-8 z-50 w-16 h-16 rounded-full cherry-glow bg-cherry flex items-center justify-center transition-transform hover:scale-110 active:scale-95;
}