@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
@import "tailwindcss";

@theme {
  --color-background: #f8fafc;
  --color-foreground: #0f172a;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-heading: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  
  --radius-xl: 0.5rem;
  --radius-2xl: 0.75rem;
  --radius-3xl: 1rem;
}

@layer base {
  body {
    @apply bg-background text-foreground antialiased;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-heading font-bold tracking-tight text-slate-900;
  }
}

@layer components {
  .card {
    @apply bg-white border border-slate-200/80 rounded-xl shadow-[0_1px_3px_0_rgba(0,0,0,0.05)] transition-all duration-300;
  }
  
  .card-hover {
    @apply hover:shadow-md hover:border-slate-300;
  }

  .btn-primary {
    @apply bg-slate-900 text-white px-4 py-2 rounded-md font-semibold text-sm transition-all active:scale-95 hover:bg-slate-800 disabled:opacity-50 disabled:cursor-not-allowed shadow-sm;
  }

  .btn-secondary {
    @apply bg-white text-slate-700 border border-slate-200 px-4 py-2 rounded-md font-semibold text-sm transition-all active:scale-95 hover:bg-slate-50 shadow-sm;
  }

  .sidebar-item {
    @apply flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 font-medium text-sm;
  }

  .sidebar-item-active {
    @apply bg-slate-900 text-white shadow-sm;
  }

  .sidebar-item-inactive {
    @apply text-slate-500 hover:bg-slate-100/50 hover:text-slate-900;
  }
}

/* Custom scrollbar for desktop */
@media (min-width: 1024px) {
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-slate-200 rounded-full hover:bg-slate-300;
  }
}

.markdown-body {
  @apply leading-relaxed;
}

.markdown-body h1, .markdown-body h2, .markdown-body h3 {
  @apply mt-6 mb-4 font-heading font-bold text-slate-900;
}

.markdown-body p {
  @apply mb-4 text-slate-600;
}

.markdown-body ul {
  @apply list-disc pl-5 mb-4 space-y-2;
}

.markdown-body li {
  @apply text-slate-600;
}