/* Design tokens: colours, fonts, text sizes and widths. Use these rather than raw values.
   This stylesheet loads first, so it also sets the order of the cascade layers, lowest first. */
@layer theme, base, components, utilities;

@layer theme {
	:root {
		/* Paper and ink. Black is the only accent: buttons are black, links are underlined. */
		--color-paper: #ffffff;
		--color-panel: #f2f2f2;
		--color-ink: #000000;
		--color-muted: #555555;
		--color-rule: #d6d6d6;
		--color-field: #767676;
		--color-error: #a4161a;
		--color-success: #1f5f2c;
		--color-white: #ffffff;
		--color-black: #000000;

		--font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
		--font-sans: "Public Sans", "Helvetica Neue", Arial, sans-serif;

		/* The only six text sizes. Small is 1rem, so form fields do not make phones zoom in. */
		--text-h1: clamp(1.875rem, 3.6vw, 2.5rem);
		--text-h2: clamp(1.5rem, 2.6vw, 1.875rem);
		--text-h3: clamp(1.25rem, 2vw, 1.375rem);
		--text-body: clamp(1.125rem, 1.6vw, 1.1875rem);
		--text-small: 1rem;
		--text-label: 0.8125rem;

		--tracking-label: 0.08em;
		--leading-body: 1.6;

		/* About 70 characters of body text. */
		--measure: 42rem;
		--container: 76rem;
		/* Pages with a sidebar: the reading column, a 3.5rem gap and the 20rem sidebar, plus the gutters. */
		--container-narrow: calc(var(--measure) + 23.5rem + 4rem);

		/* Fonts for reset.css, as Tailwind set them. */
		--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
		--default-font-family: var(--font-sans);
		--default-mono-font-family: var(--font-mono);
	}
}