/* Hallmark · tokens · custom (festive split) — warm cream ground, one bold tangerine block, one deep plum bookend */

:root {
	color-scheme: light;

	/* — colour: warm cream, warm ink, one loud tangerine signal + one deep plum bookend — */
	--color-paper: oklch(97% 0.020 70);
	--color-paper-2: oklch(94% 0.022 68);
	--color-paper-3: oklch(90% 0.024 66);
	--color-ink: oklch(20% 0.020 50);
	--color-ink-2: oklch(38% 0.020 50);
	--color-rule: oklch(85% 0.022 68);
	--color-muted: oklch(52% 0.018 60);

	--color-accent: oklch(62% 0.19 35);
	--color-accent-ink: oklch(97% 0.015 70);
	--color-focus: oklch(66% 0.21 35);

	--color-accent-2: oklch(24% 0.05 270);
	--color-accent-2-ink: oklch(96% 0.015 70);

	/* — type — */
	--font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
	--font-body: 'Switzer', ui-sans-serif, system-ui, sans-serif;
	--font-outlier: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

	--text-xs: 0.72rem;
	--text-sm: 0.85rem;
	--text-base: 1rem;
	--text-md: 1.15rem;
	--text-lg: 1.45rem;
	--text-display: clamp(2.1rem, 2.8vw + 1.3rem, 3.4rem);
	--figure: clamp(6rem, 15vw + 2rem, 11.5rem); /* fallback for browsers without container query units — see .hero__figure */

	/* — space (4pt scale) — */
	--space-3xs: 0.125rem;
	--space-2xs: 0.25rem;
	--space-xs: 0.5rem;
	--space-sm: 0.75rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2.5rem;
	--space-2xl: 4rem;
	--space-3xl: 6rem;

	/* — radii: rounded and friendly throughout — pills for actions, large soft rects for panels — */
	--radius-pill: 999px;
	--radius-control: 14px;
	--radius-card: 28px;

	/* — motion — */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in: cubic-bezier(0.7, 0, 0.84, 0);
	--dur-micro: 120ms;
	--dur-short: 220ms;
	--dur-long: 420ms;

	--page-gutter: clamp(1.25rem, 5vw, 3rem);
}