/* Viewport tokens. The only file that may contain raw colours and sizes. See DESIGN.md. */
@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-var.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
}

:root {
	color-scheme: dark;

	--floor: #1b1c1f;
	--bg: #26282c;
	--panel: #30333a;
	--line: #474b55;
	--ink: #ecedf0;
	--ink-2: #a4a8b3;
	/* Brand pink is sampled from the logo; its light and deep shades come from the logo's horns. */
	--brand: #f9709c;
	--brand-hi: #fe8db3;
	--brand-lo: #da4d7a;
	--x: var(--brand);
	--y: #6fdc9c;
	--z: #6cb0ff;
	/* Set per component to the axis it belongs to. */
	--axis: var(--ink);

	--font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--t-xs: 0.75rem;
	--t-sm: 0.875rem;
	--t-md: 1rem;
	--t-lg: 1.25rem;
	--t-xl: 1.5625rem;
	--t-2xl: 1.953rem;
	--t-3xl: 2.441rem;
	--t-4xl: 3.815rem;

	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 3rem;
	--s-8: 4.5rem;

	--radius: 3px;
	--bar-h: 3.5rem;
	--gutter: var(--s-4);
	--page: 90rem;
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 768px) {
	:root {
		--gutter: var(--s-5);
	}
}