CSS custom properties are the same thing as CSS variables — the spec uses the former name, though most people say the latter. If you've mostly been leaning on JavaScript variables through CSS-in-JS, this is the platform feature itself. A quick start:

<html>
	<style>
		:root {
			--color: blue;
		}
		.my-text {
			color: var(--color);
		}
	</style>
	<body>
		<div class="my-text">This will be blue</div>
	</body>
</html>

:root matches the <html> element. Writing html instead works identically; the only difference is that :root carries higher specificity.

Like any other CSS declaration, custom properties cascade and inherit, so you can scope them to part of the document instead of the whole page with ordinary selectors:

<html>
	<style>
		.blue-text {
			--color: blue;
		}
		.red-text {
			--color: red;
		}
		.my-text {
			color: var(--color);
		}
	</style>
	<body>
		<div class="blue-text">
			<div class="my-text">This will be blue</div>
		</div>
		<div class="red-text">
			<div class="my-text">This will be red</div>
		</div>
	</body>
</html>

Because the cascade applies, the usual resolution rules decide which value wins:

<html>
	<style>
		.blue-text {
			--color: blue;
		}
		.red-text {
			--color: red;
		}
		.my-text {
			color: var(--color);
		}
	</style>
	<body>
		<div class="blue-text">
			<div class="my-text">This will be blue</div>
			<div class="red-text">
				<div class="my-text">
					This will be red (even though it's within the blue-text div, the
					red-text is more specific).
				</div>
			</div>
		</div>
	</body>
</html>

Values are also writable at runtime. From JavaScript:

<html>
	<style>
		.blue-text {
			--color: blue;
		}
		.red-text {
			--color: red;
		}
		.my-text {
			color: var(--color);
		}
	</style>
	<body>
		<div class="blue-text">
			<div class="my-text">
				This will be green (because the JS will change the color property)
			</div>
			<div class="red-text">
				<div class="my-text">
					This will be red (even though it's within the blue-text div, the
					red-text is more specific).
				</div>
			</div>
		</div>
		<script>
			const blueTextDiv = document.querySelector('.blue-text')
			blueTextDiv.style.setProperty('--color', 'green')
		</script>
	</body>
</html>