@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);
}

@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 bg-neutral-300 dark:bg-neutral-700 rounded;
	}

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