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

@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body {
  background-color: #f1f5f9; /* slate-100 */
  color: #0f172a; /* slate-900 */
}

body.dark {
  background: linear-gradient(-45deg, #0f172a, #1e293b, #334155, #4f46e5);
  background-size: 400% 400%;
  animation: gradient-animation 15s ease infinite;
  color: #e2e8f0; /* slate-200 */
}


/* --- Custom scrollbar --- */

/* Light Mode */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #e2e8f0; /* slate-200 */
}
::-webkit-scrollbar-thumb {
  background: #a5b4fc; /* indigo-300 */
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #818cf8; /* indigo-400 */
}

/* Dark Mode */
body.dark ::-webkit-scrollbar-track {
  background: #1e293b; /* slate-800 */
}
body.dark ::-webkit-scrollbar-thumb {
  background: #4f46e5; /* indigo-600 */
}
body.dark ::-webkit-scrollbar-thumb:hover {
  background: #6366f1; /* indigo-500 */
}


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

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