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

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

:root {
  --primary: #4b2c00;
  --secondary: #d4d0cc;
  --accent: #8b5a2b;
  --bg-light: #f9f8f7;
  --text-dark: #2d1b00;
}

body {
  font-family: 'Outfit', sans-serif;
  background-color: var(--bg-light);
  color: var(--text-dark);
}

.bg-magic-pattern {
  background-color: var(--primary);
  background-image: linear-gradient(315deg, var(--primary) 0%, #7d4d16 74%);
}

.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(75, 44, 0, 0.1);
}

.btn-primary {
  @apply bg-gradient-to-r from-[#4b2c00] to-[#6d4100] text-white px-7 py-3 rounded-xl font-bold uppercase tracking-wider text-[11px] transition-all duration-500 shadow-lg hover:shadow-xl hover:-translate-y-1 active:scale-95 flex items-center justify-center gap-2 border border-white/10;
}

.btn-secondary {
  @apply backdrop-blur-xl bg-white/5 border border-white/20 text-white px-7 py-3 rounded-xl font-bold uppercase tracking-wider text-[11px] transition-all duration-500 hover:bg-white hover:text-primary hover:border-white shadow-lg active:scale-95 flex items-center justify-center gap-2;
}

.nav-link {
  @apply text-[#4b2c00] font-medium hover:text-[#8b5a2b] transition-colors relative;
}

.nav-link::after {
  content: '';
  @apply absolute bottom-0 left-0 w-0 h-0.5 bg-[#4b2c00] transition-all duration-300;
}

.nav-link:hover::after {
  @apply w-full;
}

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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