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

:root {
  --primary-color: #ffa04d;
  --secondary-color: #f5f5f5;
  --background-color: #FFF3E0;
  --text-primary: #3b2f28;
  --text-secondary: #666666;
  --accent-color: #E85D75;
}

body {
  font-family: 'Noto Sans', 'Noto Sans Bengali', sans-serif;
  background-color: var(--background-color);
  color: var(--text-primary);
}

.font-display {
  font-family: 'Plus Jakarta Sans', 'Noto Sans Bengali', sans-serif;
}

.font-body {
  font-family: 'Noto Sans', 'Noto Sans Bengali', sans-serif;
}

/* Animations */
.animate-bounce-subtle {
  animation: bounce-subtle 2s infinite;
}

@keyframes bounce-subtle {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.animate-pulse-glow {
  animation: pulse-glow 2.5s infinite ease-in-out;
}

@keyframes pulse-glow {

  0%,
  100% {
    box-shadow: 0 0 10px 0px rgba(72, 187, 255, 0.4);
  }

  50% {
    box-shadow: 0 0 25px 8px rgba(72, 187, 255, 0.7);
  }
}

/* Mobile Menu Transition */
#mobile-menu {
  transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

#mobile-menu.open {
  max-height: 300px;
  opacity: 1;
}

/* Modal Animation */
.modal-enter {
  opacity: 0;
  transform: scale(0.95);
}

.modal-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 300ms, transform 300ms;
}

.modal-exit {
  opacity: 1;
  transform: scale(1);
}

.modal-exit-active {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 200ms, transform 200ms;
}