/* Special “entire document” selector, akin to `html`. */
:root {
	--spacing: 1rem; /* So we can reuse, below. */
	--border: solid black calc(var(--spacing) / 5); /* Any value, including `calc()`. */
}

/* Same as before, but now using the `var()`. */
body {
	font-family: sans-serif;
	padding: var(--spacing);
}

section {
	/* Second value here is a “fallback,” used if a variable hasn’t been declared. */
	background-color: var(--background, deepskyblue);
	border-block-start: var(--border);
	padding: var(--spacing);

	&:nth-child(2) { --background: gold; }
	&:nth-child(3) { --background: tomato; }

	&:not(:first-child) { margin-block-start: var(--spacing); }
}