/*
 * Design tokens: the typeface and the palette, shared by the game and the
 * editor so both pages read as one product.
 */

/*
 * Archivo, variable on two axes: weight and width.
 *
 * The width axis is what the menus use for their headings and labels. Timing
 * towers and pit boards are condensed because that is how a name and a number
 * fit on one line and still read from a distance, and taking it from the family
 * already loaded means no second font file and no second personality.
 */
@font-face {
	font-family: 'Archivo';
	src: url('../fonts/archivo-latin.woff2') format('woff2-variations');
	font-weight: 400 800;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
}

:root {
	--ink: #171b22;
	--muted: #6f7683;
	--faint: #9aa1ac;
	--line: rgba(23, 27, 34, 0.10);
	--surface: rgba(255, 255, 255, 0.95);
	--accent: #d93a22;
	--accent-ink: #ffffff;

	--radius-card: 16px;
	--radius-pill: 999px;
	--shadow-card: 0 10px 34px rgba(16, 20, 28, 0.16), 0 1px 0 rgba(255, 255, 255, 0.7) inset;

	--font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* The condensed voice, used for headings, labels and numbers in the menus. */
	--wd-display: 80%;

	/* The command rails the menus are framed by. */
	--steel: #12161d;
}