:root {
	--text: #6b6375;
	--text-h: #08060d;
	--bg: #fff;
	--border: #e5e4e7;
	--code-bg: #f4f3ec;
	--accent: #aa3bff;
	--accent-bg: rgba(170, 59, 255, 0.1);
	--accent-border: rgba(170, 59, 255, 0.5);
	--social-bg: rgba(244, 243, 236, 0.5);
	--shadow:
		rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;

	--sans: system-ui, 'Segoe UI', Roboto, sans-serif;
	--heading: system-ui, 'Segoe UI', Roboto, sans-serif;
	--mono: ui-monospace, Consolas, monospace;

	font: 18px/145% var(--sans);
	letter-spacing: 0.18px;
	color-scheme: light dark;
	color: var(--text);
	background: var(--bg);
	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	@media (max-width: 1024px) {
		font-size: 16px;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--text: #9ca3af;
		--text-h: #f3f4f6;
		--bg: #16171d;
		--border: #2e303a;
		--code-bg: #1f2028;
		--accent: #c084fc;
		--accent-bg: rgba(192, 132, 252, 0.15);
		--accent-border: rgba(192, 132, 252, 0.5);
		--social-bg: rgba(47, 48, 58, 0.5);
		--shadow:
			rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
	}
}

body {
	margin: 0;
}

#app {
	width: 100%;
	overflow: hidden;
	text-align: center;
	border-inline: 1px solid var(--border);
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}