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

.markdown-preview h1 {
    @apply text-xl font-bold mb-3 mt-4;
    color: inherit;
}

.markdown-preview h2 {
    @apply text-lg font-bold mb-2 mt-3;
    color: inherit;
}

.markdown-preview h3 {
    @apply text-base font-bold mb-1 mt-2;
    color: inherit;
}

.markdown-preview p {
    @apply mb-2 leading-normal;
    color: inherit;
}

.markdown-preview ul {
    @apply list-disc list-inside mb-2 ml-4;
}

.markdown-preview ol {
    @apply list-decimal list-inside mb-2 ml-4;
}

.markdown-preview li {
    @apply mb-0.5 leading-normal;
    color: inherit;
}

.markdown-preview code {
    @apply bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded-md font-mono text-[0.85em] text-indigo-600 dark:text-indigo-400 border border-gray-200 dark:border-gray-700;
}

.markdown-preview pre {
    @apply bg-gray-900 border border-gray-800 rounded-xl p-3 mb-3 overflow-x-auto text-[13px] leading-snug;
}

.markdown-preview pre code {
    @apply bg-transparent border-none p-0 text-gray-300;
}

.markdown-preview strong {
    @apply font-black;
    color: inherit;
}

@media (prefers-color-scheme: dark) {
    .markdown-preview,
    .markdown-preview p,
    .markdown-preview li,
    .markdown-preview span,
    .markdown-preview h1,
    .markdown-preview h2,
    .markdown-preview h3,
    .markdown-preview strong {
        color: #f3f4f6 !important;
    }

    .markdown-preview h1,
    .markdown-preview h2,
    .markdown-preview strong {
        color: #ffffff !important;
    }
}

.dark .markdown-preview,
.dark .markdown-preview p,
.dark .markdown-preview li,
.dark .markdown-preview span,
.dark .markdown-preview h1,
.dark .markdown-preview h2,
.dark .markdown-preview h3,
.dark .markdown-preview strong {
    color: #f3f4f6 !important;
}

.dark .markdown-preview h1,
.dark .markdown-preview h2,
.dark .markdown-preview strong {
    color: #ffffff !important;
}