/* Design tokens: every other stylesheet uses these and nothing else. */
:root {
	/* Colour (design B "Sable & Arche"). Contrast: ink on bg 12.58:1, ink-soft 5.07:1, accent-text 4.79:1,
	   accent-deep 6.58:1, plum 10.33:1, error 5.50:1. line-strong (3.32:1) is for borders and icons only.
	   sand is a surface for ink text only: accent-text is 3.97:1 and ink-soft 4.20:1 on it. */
	--color-bg: #F2E9DD;
	--color-surface: #FBF6EF;
	--color-sand: #E4D4C0;
	--color-line-strong: #8F7C6C;
	--color-accent: #A14E2E;
	--color-accent-text: #A14E2E;
	--color-accent-deep: #833D22;
	--color-accent-tint: #F4E3D8;
	--color-plum: #4A2B37;
	--color-on-plum: #F3E6E0;
	--color-on-plum-soft: #D8C3BC;
	--color-ink: #2E2420;
	--color-ink-soft: #6F5F55;
	--color-error: #A3392B;
	--color-error-tint: #F8E9E5;
	--color-on-accent: #FBF6EF;

	/* Type. */
	--font-heading: "Fraunces", Georgia, "Times New Roman", serif;
	--font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-heading-ar: "Noto Kufi Arabic", "Tajawal", sans-serif;
	--font-body-ar: "Tajawal", "Noto Kufi Arabic", system-ui, sans-serif;
	--font-tfng: "Noto Sans Tifinagh", sans-serif;

	/* Scale ratio 1.25 from 16px; the two largest steps are fluid. */
	--step--1: 0.875rem;
	--step-0: 1rem;
	--step-1: 1.25rem;
	--step-2: 1.5625rem;
	--step-3: clamp(1.75rem, 1.4rem + 1.6vw, 2.4rem);
	--step-4: clamp(2.2rem, 1.5rem + 3.2vw, 3.6rem);
	--step-5: clamp(2.6rem, 1.6rem + 4.6vw, 5.2rem);
	--leading-tight: 1.15;
	--leading-body: 1.6;
	--weight-light: 350;
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;

	/* Space, 4-pt grid. */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;

	/* Shape and depth. */
	--radius: 18px;
	--radius-sm: 10px;
	--radius-arch: 999px 999px 18px 18px;
	--radius-pill: 999px;
	--border: 1px solid var(--color-sand);
	--shadow-soft: 0 1px 2px rgb(46 36 32 / 0.05), 0 10px 28px rgb(46 36 32 / 0.08);
	--focus-ring: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-accent-text);

	/* Motion. */
	--duration-fast: 150ms;
	--duration-base: 250ms;
	--duration-panel: 320ms;
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in: cubic-bezier(0.4, 0, 1, 1);

	/* Layout. */
	--container: 80rem;
	--gutter: var(--space-4);
	--measure: 65ch;
	--tap: 44px;
	--header-height: 64px;
}

@media (min-width: 48rem) {
	:root {
		--gutter: var(--space-6);
		--header-height: 76px;
	}
}