profilarr/src/app.css

@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';
@plugin '@tailwindcss/forms';

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

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

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