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

@import "tailwindcss";

@layer theme {
  :root {
    --font-sans: 'Inter', sans-serif;
  }
}

@layer base {
  body {
    @apply bg-slate-50 text-slate-900 font-sans antialiased;
  }
}

.glass-panel {
  @apply bg-white/60 backdrop-blur-xl border border-slate-200 shadow-xl rounded-2xl;
}

.gradient-text {
  @apply bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 via-violet-600 to-blue-600;
}

.sidebar-icon {
  @apply w-5 h-5 text-slate-400 group-hover:text-indigo-600 transition-colors;
}

.nav-item {
  @apply flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-900 transition-all cursor-pointer;
}

.nav-item.active {
  @apply bg-indigo-50 text-indigo-600 border border-indigo-200;
}

/* Animations */
.fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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