@import "tailwindcss";
@import "react-toastify/dist/ReactToastify.css";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

html,
body {
  @apply bg-white dark:bg-gray-950;

  @media (prefers-color-scheme: dark) {
    color-scheme: dark;
  }
}

/* Custom prose styles for markdown content */
.prose {
  @apply text-gray-900;
}

.prose h1 {
  @apply text-2xl font-bold text-gray-900 mb-4 mt-6;
}

.prose h2 {
  @apply text-xl font-semibold text-gray-900 mb-3 mt-5;
}

.prose h3 {
  @apply text-lg font-semibold text-gray-900 mb-2 mt-4;
}

.prose h4 {
  @apply text-base font-semibold text-gray-900 mb-2 mt-3;
}

.prose p {
  @apply mb-4 leading-relaxed;
}

.prose ul {
  @apply list-disc pl-6 mb-4;
}

.prose ol {
  @apply list-decimal pl-6 mb-4;
}

.prose li {
  @apply mb-1;
}

.prose code {
  @apply bg-gray-100 text-blue-600 px-1.5 py-0.5 rounded text-sm font-mono;
}

.prose pre {
  @apply bg-gray-50 border border-gray-200 rounded-lg p-4 mb-4 overflow-x-auto;
}

.prose pre code {
  @apply bg-transparent text-gray-800 p-0;
}

.prose blockquote {
  @apply border-l-4 border-gray-300 pl-4 italic text-gray-700 mb-4;
}

.prose a {
  @apply text-blue-600 hover:text-blue-800 underline;
}

.prose strong {
  @apply font-semibold text-gray-900;
}

.prose em {
  @apply italic;
}

.prose hr {
  @apply border-gray-300 my-6;
}
