@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap');
@import 'tailwindcss';

/* Highlight.js: atom-one-light for light mode */
@import 'highlight.js/styles/atom-one-light.css';

/* Highlight.js: atom-one-dark for dark mode */
.dark .hljs {
	color: #abb2bf;
}
.dark .hljs-comment,
.dark .hljs-quote {
	color: #5c6370;
	font-style: italic;
}
.dark .hljs-doctag,
.dark .hljs-keyword,
.dark .hljs-formula {
	color: #c678dd;
}
.dark .hljs-section,
.dark .hljs-name,
.dark .hljs-selector-tag,
.dark .hljs-deletion,
.dark .hljs-subst {
	color: #e06c75;
}
.dark .hljs-literal {
	color: #56b6c2;
}
.dark .hljs-string,
.dark .hljs-regexp,
.dark .hljs-addition,
.dark .hljs-attribute,
.dark .hljs-meta .hljs-string {
	color: #98c379;
}
.dark .hljs-attr,
.dark .hljs-variable,
.dark .hljs-template-variable,
.dark .hljs-type,
.dark .hljs-selector-class,
.dark .hljs-selector-attr,
.dark .hljs-selector-pseudo,
.dark .hljs-number {
	color: #d19a66;
}
.dark .hljs-symbol,
.dark .hljs-bullet,
.dark .hljs-link,
.dark .hljs-meta,
.dark .hljs-selector-id,
.dark .hljs-title {
	color: #61aeee;
}
.dark .hljs-built_in,
.dark .hljs-title.class_,
.dark .hljs-class .hljs-title {
	color: #e6c07b;
}
.dark .hljs-emphasis {
	font-style: italic;
}
.dark .hljs-strong {
	font-weight: bold;
}
.dark .hljs-link {
	text-decoration: underline;
}

@custom-variant dark (&:where(.dark, .dark *));

@theme {
	--font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
	--font-mono: 'Geist Mono', ui-monospace, monospace;

	/* Accent colors using CSS variables set by accent store */
	--color-accent-50: var(--accent-50);
	--color-accent-100: var(--accent-100);
	--color-accent-200: var(--accent-200);
	--color-accent-300: var(--accent-300);
	--color-accent-400: var(--accent-400);
	--color-accent-500: var(--accent-500);
	--color-accent-600: var(--accent-600);
	--color-accent-700: var(--accent-700);
	--color-accent-800: var(--accent-800);
	--color-accent-900: var(--accent-900);
	--color-accent-950: var(--accent-950);
}

/* Prose styles for rendered markdown */
.prose {
	line-height: 1.75;
	color: rgb(64 64 64);
}

.dark .prose {
	color: rgb(212 212 212);
}

.prose > :first-child {
	margin-top: 0;
}

.prose > :last-child {
	margin-bottom: 0;
}

.prose h1 {
	font-size: 1.875em;
	font-weight: 700;
	margin-top: 0;
	margin-bottom: 0.875em;
	color: rgb(23 23 23);
	letter-spacing: -0.025em;
}

.dark .prose h1 {
	color: rgb(250 250 250);
}

.prose h2 {
	font-size: 1.375em;
	font-weight: 600;
	margin-top: 1.75em;
	margin-bottom: 0.5em;
	color: rgb(38 38 38);
	letter-spacing: -0.015em;
}

.dark .prose h2 {
	color: rgb(245 245 245);
}

.prose h3 {
	font-size: 1.125em;
	font-weight: 600;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
	color: rgb(64 64 64);
}

.dark .prose h3 {
	color: rgb(229 229 229);
}

.prose h4 {
	font-size: 1em;
	font-weight: 600;
	margin-top: 1.25em;
	margin-bottom: 0.5em;
	color: rgb(64 64 64);
}

.dark .prose h4 {
	color: rgb(229 229 229);
}

.prose p {
	margin-top: 1em;
	margin-bottom: 1em;
}

.prose ul,
.prose ol {
	margin-top: 1em;
	margin-bottom: 1em;
	padding-left: 1.5em;
}

.prose ul {
	list-style-type: disc;
}

.prose ol {
	list-style-type: decimal;
}

.prose li {
	margin-top: 0.375em;
	margin-bottom: 0.375em;
}

.prose li > ul,
.prose li > ol {
	margin-top: 0.375em;
	margin-bottom: 0.375em;
}

.prose code {
	font-family: var(--font-mono);
	font-size: 0.875em;
	background-color: rgb(245 245 245);
	color: rgb(64 64 64);
	padding: 0.2em 0.4em;
	border-radius: 0.375rem;
	font-weight: 500;
}

.dark .prose code {
	background-color: transparent;
	color: rgb(229 229 229);
}

.prose pre {
	background-color: rgb(250 250 250);
	border: 1px solid rgb(229 229 229);
	padding: 1rem;
	border-radius: 0.5rem;
	overflow-x: auto;
	margin-top: 1.25em;
	margin-bottom: 1.25em;
}

.dark .prose pre {
	background-color: rgb(23 23 23);
	border-color: rgb(64 64 64);
}

.prose pre code {
	background-color: transparent;
	padding: 0;
	font-size: 0.875em;
	font-weight: 400;
	color: inherit;
}

.prose a {
	color: var(--color-accent-600);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.15s;
}

.prose a:hover {
	color: var(--color-accent-700);
	text-decoration: underline;
}

.dark .prose a {
	color: var(--color-accent-400);
}

.dark .prose a:hover {
	color: var(--color-accent-300);
}

.prose strong {
	font-weight: 600;
	color: rgb(38 38 38);
}

.dark .prose strong {
	color: rgb(245 245 245);
}

.prose blockquote {
	border-left: 3px solid var(--color-accent-400);
	padding-left: 1em;
	margin-top: 1.25em;
	margin-bottom: 1.25em;
	font-style: italic;
	color: rgb(115 115 115);
}

.dark .prose blockquote {
	border-left-color: var(--color-accent-600);
	color: rgb(163 163 163);
}

.prose blockquote p {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.prose hr {
	border: none;
	border-top: 1px solid rgb(229 229 229);
	margin-top: 2em;
	margin-bottom: 2em;
}

.dark .prose hr {
	border-top-color: rgb(64 64 64);
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 1.25em;
	margin-bottom: 1.25em;
	font-size: 0.875em;
}

.prose th,
.prose td {
	border: 1px solid rgb(229 229 229);
	padding: 0.625rem 0.875rem;
	text-align: left;
}

.dark .prose th,
.dark .prose td {
	border-color: rgb(64 64 64);
}

.prose th {
	background-color: rgb(250 250 250);
	font-weight: 600;
	color: rgb(38 38 38);
}

.dark .prose th {
	background-color: rgb(38 38 38);
	color: rgb(245 245 245);
}

.prose img {
	border-radius: 0.5rem;
	margin-top: 1.25em;
	margin-bottom: 1.25em;
}

.prose-sm {
	font-size: 0.875rem;
}

.prose-sm h1 {
	font-size: 1.5em;
}

.prose-sm h2 {
	font-size: 1.25em;
}

.prose-sm h3 {
	font-size: 1.125em;
}

@layer base {
	* {
		font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
	}

	/* Default accent colors (blue) - overridden by JS */
	:root {
		--accent-50: #eff6ff;
		--accent-100: #dbeafe;
		--accent-200: #bfdbfe;
		--accent-300: #93c5fd;
		--accent-400: #60a5fa;
		--accent-500: #3b82f6;
		--accent-600: #2563eb;
		--accent-700: #1d4ed8;
		--accent-800: #1e40af;
		--accent-900: #1e3a8a;
		--accent-950: #172554;
	}

	html {
		@apply bg-neutral-50 dark:bg-neutral-900;
	}

	/* Smooth theme transitions using View Transitions API */
	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 0.3s;
		animation-timing-function: ease-in-out;
	}

	/* Fallback transitions for browsers without View Transitions API */
	@media (prefers-reduced-motion: no-preference) {
		html {
			transition: background-color 0.3s ease-in-out;
		}

		* {
			transition:
				background-color 0.3s ease-in-out,
				border-color 0.3s ease-in-out,
				color 0.3s ease-in-out;
		}
	}

	/* Custom scrollbar for Chromium and Safari */
	::-webkit-scrollbar {
		width: 12px;
		height: 12px;
	}

	::-webkit-scrollbar-track {
		@apply bg-neutral-100 dark:bg-neutral-900;
	}

	::-webkit-scrollbar-thumb {
		@apply rounded bg-neutral-300 dark:bg-neutral-700;
	}

	::-webkit-scrollbar-thumb:hover {
		@apply bg-neutral-400 dark:bg-neutral-600;
	}
}