<!-- Only works in Safari TP >= 120 -->
<h1>Lea Verou's blog</h1>

<p>Welcome to my blog, where I write about web standards, usability, and open source.</p>

<article>
	<h2>Blog Post 1</h2>
	<div class="content">
		<p>Blog post 1 content</p>
	</div>
</article>

<article class="alt">
	<h2>Blog Post 2</h2>
	<div class="content">
		<p>Blog post 2 content</p>
	</div>
</article>

<footer>
	<p>Made with &hearts; by Lea Verou</p>
</footer>

:root {
	--primary-ch: 30 296;
	--secondary-ch: 20 217;

	--l-0: 0%;
	--l-30: 30%;
	--l-40: 40%;
	--l-50: 50%;
	--l-60: 60%;
	--l-90: 90%;
	--l-100: 100%;
}

@media (prefers-color-scheme: dark) {
	:root {
		--l-0: 100%;
		--l-30: 70%;
		--l-40: 60%;
		--l-60: 40%;
		--l-90: 10%;
		--l-100: 0%;
	}
}

body {
	margin: 1rem;
	background: lch(var(--l-100) 0 0);
	color: lch(var(--l-0) 0 0);
	font: 100%/1.5 Helvetica Neue, Segoe UI, sans-serif;
}

h1 {
	color: lch(var(--l-30) var(--primary-ch));
}

article {
	background: lch(var(--l-90) var(--primary-ch));
	border-radius: .3rem;
	overflow: hidden;
	margin: 1em 0;
}

article h2 {
	padding: .3rem .5rem;
	margin: 0;
	background: lch(var(--l-40) var(--primary-ch));
	color: lch(var(--l-100) 0 0);
}

article .content {
	padding: 0 .5rem;
}

article.alt {
	--primary-hs: var(--secondary-hs);
	--primary-ch: var(--secondary-ch);
}

footer {
	margin-top: 1rem;
	border-top: 1px solid;
	color: lch(var(--l-40) 0 0);
	font-size: smaller;
}