/* s1ft design tokens. GENERATED from src/styles/global.css by scripts/gen-tokens.mjs. Do not edit. */
@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url("https://s1ft.app/fonts/atkinson-next-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url("https://s1ft.app/fonts/atkinson-next-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url("https://s1ft.app/fonts/atkinson-next-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url("https://s1ft.app/fonts/atkinson-next-800.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Atkinson Hyperlegible Mono";
	src: url("https://s1ft.app/fonts/atkinson-mono-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Atkinson Hyperlegible Mono";
	src: url("https://s1ft.app/fonts/atkinson-mono-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Colour (light) */
	--bg: #ffffff;
	--fg: #0b0d12;
	--muted: #5f6675;
	--blue: #1a56db;
	--rule: #111318;
	--soft: #e9ecf0;
	--panel: #f6f7f9;
	--ok: #0f6e4f;

	/* Type */
	--text: "Atkinson Hyperlegible Next", system-ui, -apple-system, sans-serif;
	--mono: "Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--disp-weight: 800;
	--disp-track: -.035em;
	--num-weight: 700;

	/* Leading */
	--leading-tight: 1.2;
	--leading-normal: 1.6;
	--leading-relaxed: 1.8;

	/* Spacing (8px grid) */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	/* Container widths */
	--container-sm: 640px;
	--container-md: 768px;
	--container-lg: 1024px;
	--container-xl: 1200px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #0f1116;
		--fg: #eef0f4;
		--muted: #9aa3b4;
		--blue: #7aa2ff;
		--rule: #eef0f4;
		--soft: #262a33;
		--panel: #171a21;
		--ok: #4fd1a1;
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--bg: #0f1116;
	--fg: #eef0f4;
	--muted: #9aa3b4;
	--blue: #7aa2ff;
	--rule: #eef0f4;
	--soft: #262a33;
	--panel: #171a21;
	--ok: #4fd1a1;
	color-scheme: dark;
}

:root[data-theme="light"] {
	color-scheme: light;
}