/*
 * Design tokens from final-concept-3.0.
 *
 * Every colour has one job, everywhere on the site:
 *   ink    ground (page background)
 *   paper  reading surfaces and text on ink
 *   cyan   the welcome: hero, primary interaction
 *   green  happening now / today
 *   pink   space that is free and could be yours
 *
 * The short names (--ink, --m…) match the concept CSS so sections can be
 * ported directly; the semantic names are for shared components.
 */

:root {
	/* Palette */
	--ink: #111c1d;
	--ink-2: #18282a;
	--ink-3: #203437;
	--paper: #f5f3e9;
	--paper-2: #e9e6d8;
	--cyan: #80e4e9;
	--pink: #ff76b4;
	--green: #bbef65;
	--mute: #8fa3a4;
	--soft: #b6c0bb;
	--rule: rgb(245 243 233 / 0.17);
	--rule-2: rgb(245 243 233 / 0.34);
	--ink-rule: rgb(17 28 29 / 0.22);
	--ink-mute: #4a5350;

	/* Semantic */
	--color-bg: var(--ink);
	--color-text: var(--paper);
	--color-text-muted: var(--mute);
	--color-surface: var(--ink-2);
	--color-primary: var(--cyan);
	--color-primary-contrast: var(--ink);
	--color-accent: var(--pink);
	--color-now: var(--green);
	--color-border: var(--rule);
	--color-focus: currentColor;

	/* Type: Manrope (voice), Space Grotesk (labels, numbers), Newsreader (pull-quotes) */
	--m: "Manrope", Arial, sans-serif;
	--g: "Space Grotesk", Arial, sans-serif;
	--n: "Newsreader", Georgia, serif;
	--font-body: var(--m);
	--font-heading: var(--m);
	--font-label: var(--g);

	/* Layout */
	--pad: clamp(1.25rem, 5vw, 4.5rem);
	--container: 101.25rem;
	--header: 4.3125rem;
}