@import url('tokens.css');

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body {
	min-height: 100vh;
	background:
		radial-gradient(ellipse 80vw 50vh at 75% -10vh, rgba(139, 228, 255, 0.06), transparent 65%),
		radial-gradient(ellipse 60vw 40vh at 0% 100%, var(--accent-soft), transparent 70%),
		var(--bg);
}

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--ink);
}

p { margin: 0; color: var(--ink-2); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); }

::selection { background: var(--accent); color: var(--bg); }

@keyframes fade-in {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}
.fade-in { animation: fade-in 0.5s var(--ease) both; }