/*
 * tokens.css — ⭐ the single source of truth for the design system.
 *
 * Every colour, font, space, radius, shadow and motion value is declared here
 * as a CSS custom property. Templates and component CSS reference these tokens
 * ONLY — never a raw hex or px value. A rebrand edits this file (visuals) plus
 * inc/brand-config.php (name, logo, urls). Values from branding-assets.md +
 * docs/design-plan.md §1.
 */

:root {
	/* ---- Colour (green + white; no beige/blue/brown/pure-black) ---- */
	--birch-white: #FBFCFA;              /* default page background */
	--paper: #EEF3EA;                    /* alternate section bands */
	--card: #FFFFFF;                     /* cards, panels, inputs */
	--ink: #15241B;                      /* headlines & body */
	--muted: #57665B;                    /* secondary text */
	/*
	 * PRIMARY accent — CTAs, links, eyebrows.
	 * Darkened one step from #3F7D2E on 26.7.2026: the original measured 4.46:1
	 * against --paper, just under the 4.5 AA floor, so the eyebrow on every pale
	 * band was failing. This clears AA on all three surfaces:
	 * paper 4.64 · birch-white 5.08 · white-on-accent 5.23.
	 */
	--koivu: #3D7A2C;
	--koivu-dark: #356627;               /* darker green — link/button hover (AA on white) */
	--koivu-bright: #73A220;             /* their real green — small highlights only */
	--line: rgba(21, 36, 27, 0.10);      /* hairline borders / the growth line */

	/* Dark surface (footer, closing CTA band) — --ink taken one step deeper and
	   greener, so the brand mark's green leaf still reads against it. */
	--ink-deep: #101C15;                 /* the deep-green band background */
	--on-dark: #F2F6F0;                  /* primary text on the dark band (AA+) */
	--on-dark-muted: rgba(242, 246, 240, 0.68);  /* secondary text on dark (7.9:1) */
	--on-dark-line: rgba(242, 246, 240, 0.14);   /* hairlines on dark */
	--accent-on-dark: var(--koivu-bright);       /* the bright green reads on dark; --koivu does not */

	/* Semantic aliases (use these in components for readable intent) */
	--bg: var(--birch-white);
	--bg-alt: var(--paper);
	--text: var(--ink);
	--text-muted: var(--muted);
	--accent: var(--koivu);

	/* ---- Typography ---- */
	--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--font-body: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* Fluid type scale (clamp) */
	--fs-display: clamp(2.5rem, 6vw, 5rem);
	--fs-h2: clamp(1.75rem, 3.5vw, 3rem);
	--fs-h3: 1.5rem;
	--fs-body: 1.0625rem;
	--fs-body-lg: 1.125rem;
	--fs-small: 0.875rem;
	--fs-eyebrow: 0.8125rem;

	--lh-tight: 1.1;
	--lh-heading: 1.2;
	--lh-body: 1.6;
	--measure: 65ch;                     /* max body line length */
	--tracking-eyebrow: 0.12em;

	/* ---- Spacing (strict 8pt grid; 4 for micro only) ---- */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-6: 24px;
	--s-8: 32px;
	--s-12: 48px;
	--s-16: 64px;
	--s-24: 96px;
	--s-32: 128px;

	/* Section rhythm. Capped at 96px, not 128: two stacked sections would
	   otherwise open a 256px void between them on a laptop. */
	--section-y: clamp(var(--s-12), 6vw, var(--s-24));

	/* ---- Layout ---- */
	--container-max: 1240px;
	--container-bleed: 1440px;
	--container-pad: clamp(1.25rem, 5vw, 4rem);

	/* ---- Radius ---- */
	--radius: 14px;
	--radius-btn: 10px;
	--radius-pill: 999px;

	/* ---- Shadow (soft, tinted green-grey; never neon) ---- */
	--shadow-card: 0 1px 3px rgba(21, 36, 27, 0.05);
	--shadow-soft: 0 18px 40px -20px rgba(21, 36, 27, 0.12);

	/* ---- Motion ---- */
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--dur: 0.6s;
	--dur-fast: 0.25s;

	/* Focus ring */
	--focus-ring: 0 0 0 3px rgba(63, 125, 46, 0.45);
}