@import "tailwindcss";

@theme {
	--font-sans: var(--font-sans);
	--font-serif: var(--font-serif);
}

* {
	@apply box-border m-0 p-0;
}

html {
	scrollbar-gutter: stable;
	zoom: 115%;
}

body {
	@apply flex min-h-dvh w-full justify-start p-10 font-sans;
}

p {
	@apply text-sm;
}

h1,
h2,
h3,
h4,
h5 {
	@apply font-serif;
}

h1 {
	@apply text-2xl;
}

h2 {
	@apply text-xl;
}

.highlight {
	@apply bg-yellow-100 font-serif;
}

.prose {
	@apply flex min-w-0 flex-col gap-3;
}

.prose ul,
.prose ol {
	@apply flex flex-col gap-1 pl-5 text-sm;
}

.prose ul {
	@apply list-disc;
}

.prose ol {
	@apply list-decimal;
}

.prose a {
	@apply bg-yellow-100 underline decoration-1 underline-offset-2;
}

.prose :not(pre) > code {
	@apply rounded bg-neutral-100 px-1 py-0.5 text-[0.85em];
}

.prose figure[data-rehype-pretty-code-figure] {
	@apply min-w-0 max-w-full overflow-hidden rounded-md border border-neutral-200 bg-neutral-50;
}

.prose [data-rehype-pretty-code-title] {
	@apply border-b border-neutral-200 px-3 py-1.5 font-mono text-xs text-neutral-500;
}

.prose [data-rehype-pretty-code-caption] {
	@apply border-t border-neutral-200 px-3 py-1.5 text-xs text-neutral-500;
}

.prose pre {
	@apply min-w-0 max-w-full overflow-x-auto p-3 text-xs leading-relaxed;
}

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

.prose mark[data-highlighted-chars] {
	@apply rounded bg-yellow-100 text-inherit;
}

.prose [data-highlighted-line] {
	@apply bg-yellow-50;
}

.prose blockquote {
	@apply border-l-2 border-neutral-300 pl-4 text-neutral-600 italic;
}

.prose hr {
	@apply border-neutral-200;
}

.prose img {
	@apply rounded-md border border-neutral-200;
}

.prose table {
	@apply w-full border-collapse;
}

.prose th,
.prose td {
	@apply border border-neutral-200 px-2 py-1 text-left;
}

.prose th {
	@apply bg-neutral-50 font-semibold;
}