/*
 * Token steps theme.json cannot express, for the front end and the editor.
 *
 * theme.json has no media queries, so a token that changes with the viewport
 * is declared there at its smallest value and stepped here. This file is its
 * own handle rather than part of style.css because style.css never reaches the
 * editor canvas — and a gutter the editor does not share puts every edge in
 * the canvas somewhere other than the live page puts it. Loaded on the front
 * end just ahead of style.css, and in the editor through add_editor_style().
 *
 * `html:root`, not `:root`, because the two places print in opposite orders:
 * the front end prints the global styles first, the editor canvas prints them
 * after the theme's editor styles, and their own `:root` block re-declares the
 * token at its theme.json value. One more element in the selector wins in
 * either order.
 */

/*
 * Stepped page gutter: 20 / 32 / 40. theme.json has no media queries, so root
 * padding is set to this custom property and the property is stepped here.
 */
@media (min-width: 768px) {

	html:root {
		--wp--custom--layout--gutter: var(--wp--custom--space--8);
	}
}

@media (min-width: 1024px) {

	html:root {
		--wp--custom--layout--gutter: var(--wp--custom--space--10);
	}
}