/*
 * Kalen design tokens.
 *
 * Source of truth: DESIGN.md §5 (colour), §6 (type), §7 (grid and spacing),
 * §11 (shape) and §16 (the variable list), plus the landing-page-mockup.html
 * values that the mockup adds on top (graphite panels, muted text, easing).
 */
:root{
	/* Colour — DESIGN.md 5.1 / 5.4 */
	--color-carbon:#111315;
	--color-graphite:#24282B;
	--color-ivory:#F4F2EC;
	--color-white:#FFFFFF;
	--color-steel:#90979C;
	--color-line:#D8DCDE;
	--color-champagne:#B78A50;
	--color-muted:#687075;
	--color-process:#E7E5DF;
	--color-success:#2F725A;
	--color-warning:#A66C28;
	--color-error:#B4473E;

	/* Type — DESIGN.md 6.1 / 6.2 */
	--font-display:"Manrope","Noto Sans SC",system-ui,sans-serif;
	--font-body:"Inter","Noto Sans SC",system-ui,sans-serif;
	--font-data:"IBM Plex Mono","Noto Sans SC",monospace;
	--font-accent:"Newsreader",Georgia,"Noto Sans SC",serif;

	/* Type scale — DESIGN.md 6.3 */
	--text-hero:clamp(36px,6vw,72px);
	--text-section:clamp(28px,4vw,52px);
	--text-sub:20px;
	--text-body:16px;
	--text-small:14px;
	--text-micro:11px;
	--leading-tight:1.1;
	--leading-body:1.65;
	--tracking-display:-0.045em;
	--tracking-mono:0.12em;

	/* Shape — DESIGN.md 11 */
	--radius-xs:2px;
	--radius-sm:4px;
	--radius-md:6px;
	--border:1px solid var(--color-line);
	--border-dark:1px solid rgba(216,220,222,.22);

	/* Space — DESIGN.md 7.2 */
	--space-1:8px;
	--space-2:16px;
	--space-3:24px;
	--space-4:32px;
	--space-5:48px;
	--space-6:64px;
	--space-7:96px;
	--space-8:128px;
	--section-y:clamp(64px,9vw,130px);

	/* Layout — DESIGN.md 7.1 / 16 */
	--content-max:1320px;
	--gutter:clamp(20px,3.2vw,48px);
	--text-max:680px;

	/* Motion — DESIGN.md 12 / 16 */
	--motion-fast:160ms;
	--motion-normal:240ms;
	--ease:cubic-bezier(.2,.8,.2,1);
}