:root {
	--radius-sm: 3px;
	--radius-md: 6px;
	--radius-lg: 9px;

	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;

	--transition-theme-speed: 0.25s;
	--transition-theme-ease: linear;

	--transition-control-speed: var(--transition-theme-speed);
	--transition-control-ease: var(--transition-theme-ease);

	--control-padding-y: 5px;
	--control-padding-x: 8px;

	--textarea-padding-y: var(--control-padding-y);
	--textarea-padding-x: var(--control-padding-x);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: Arial, sans-serif;
	background: var(--color-surface);
	color: var(--color-text);
}

h1,
h2,
h3,
p {
	margin-top: 0;
}

a {
	color: var(--color-brand-hover);
}