@import "tailwindcss";

@theme {
  --color-gray-900: #1a1a1a;
  --color-gray-800: #2b2b2b;
  --color-gray-700: #3c3c3c;
  --color-gray-500: #808080;
  --color-gray-400: #a0a0a0;
  --color-gray-200: #e0e0e0;
  --color-gray-100: #f5f5f5;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --font-family-sans: "Inter", sans-serif;
}

@layer base {
  body {
    @apply bg-gray-900 text-gray-100;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fadeInUp {
  animation: fadeInUp 0.5s ease-out forwards;
}

#lightbox.show {
    animation: fadeIn 0.3s ease-out forwards;
}