/*
 * 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 ----
	 * Adopted 27.7.2026 from the client's existing site, on their instruction to
	 * keep its fonts, background and palette. Values are their Elementor kit's
	 * own globals, read from wp-content/uploads/elementor/css/post-4.css:
	 *   primary #FFFBF0 · secondary #F1E8DA · text #3D2912 · accent #73A220
	 *   accent-hover #67921D · white #FFFFFF
	 * This replaced the earlier green/white system (birch-white #FBFCFA,
	 * paper #EEF3EA, ink #15241B). The token NAMES are kept because 200+ rules
	 * across the theme reference them; only the values changed.
	 */
	--birch-white: #FFFBF0;              /* default page background (their cream) */
	/*
	 * Their site keeps TWO warm tones apart, and so do we — checked element by
	 * element against post-52.css:
	 *   #E4D5C3 tan   paints a FULL-WIDTH section band (their element d225a71)
	 *   #F1E8DA beige paints INNER panels and cards (02a8b8e, d7203b0, f62d77b)
	 * Collapsing them into one tone flattens the page, so --bg-alt (10 uses, all
	 * full-width bands) and --paper (5 uses, all inner panels) resolve separately.
	 */
	--tan: #E4D5C3;                      /* full-width alternate bands */
	--paper: #F1E8DA;                    /* inner panels, cards, field fills */
	--card: #FFFFFF;                     /* cards, panels, inputs */
	--ink: #3D2912;                      /* headlines & body — 13.32:1 on cream */
	--muted: #6B5637;                    /* secondary text — 6.74 cream / 5.74 beige */
	/*
	 * PRIMARY accent — CTAs, links, eyebrows. This is the client's real brand
	 * green, restored at their request on 27.7.2026.
	 *
	 * ⚠ ACCESSIBILITY: it does not meet WCAG AA on these surfaces —
	 *   #73A220 text on cream  2.94:1  (AA needs 4.5; even large text needs 3.0)
	 *   white on a #73A220 button  3.04:1  (their submit label is 16px)
	 * The E4 audit on 26.7 found exactly this and darkened the accent to fix it;
	 * adopting their palette reintroduces it, knowingly and on instruction.
	 * ONE-LINE FIX if it is ever approved: change this to #557916, which reads as
	 * the same green but measures 5.08:1 white-on-green and 4.91:1 on cream.
	 */
	--koivu: #73A220;
	--koivu-dark: #67921D;               /* their hover green (kit --e-global-color-29ea558) */
	--koivu-bright: #73A220;             /* kept as an alias; same value since the swap */
	--line: rgba(61, 41, 18, 0.12);      /* hairline borders / the growth line */

	/*
	 * Dark surface (footer, closing CTA band, video story).
	 *
	 * RESTORED TO GREEN 29.7.2026 on the client's request ("can you make this
	 * green?"). This is the exact value the footer shipped with on 25.7; it turned
	 * brown on 27.7 when the palette was reverted to their old site's colours.
	 *
	 * Two reasons this is the right way round rather than a preference swap:
	 *   1. Kaisa's recorded brief KEEPS "vihreä ja valkoinen" and explicitly KILLS
	 *      "peessi ja ruskee" (docs/website-requirements.md). The brown band was
	 *      never her instruction.
	 *   2. The brown #2A1C0C was OUR derivation ("--ink taken deeper"), not one of
	 *      their brand values — their site defines no such colour — so nothing of
	 *      theirs is being overridden.
	 *
	 * Not the bright brand green: #73A220 under white text is 3.04:1 and fails.
	 * This near-black green carries the same text at 15.42:1, slightly BETTER than
	 * the brown it replaces (14.56:1). Their old blue footer (#436286) stays killed.
	 */
	--ink-deep: #101C15;                 /* the deep-green band background */
	--on-dark: #F5F0E6;                  /* primary text on the dark band (14.2:1) */
	--on-dark-muted: rgba(245, 240, 230, 0.72);  /* secondary text on dark */
	--on-dark-line: rgba(245, 240, 230, 0.16);   /* hairlines on dark */
	--accent-on-dark: var(--koivu);              /* the green reads on deep brown (5.45:1) */

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

	/*
	 * ---- Typography ----
	 * This is character-for-character the stack the client's site declares
	 * ("Lato", Sans-serif) and we ship no Lato file — on purpose.
	 *
	 * Their own Lato never loads (the files 404 from their dev-site.se cache),
	 * so every visitor sees the generic sans fallback: Helvetica on macOS, Arial
	 * on Windows. Declaring the identical stack means our pages resolve to the
	 * same face as theirs on whatever machine they are compared on, rather than
	 * only matching on a Mac.
	 *
	 * The old chain went 'Lato', system-ui, … which lands on San Francisco, not
	 * Helvetica — close enough to look right and wrong enough to never match.
	 * Do not add system-ui back without also restoring the webfont.
	 *
	 * Two tokens are kept rather than collapsed into one: the display and body
	 * ROLES still exist throughout the theme, so restoring a two-family pairing
	 * later is a two-line edit here rather than a sweep of 27 files.
	 */
	--font-display: 'Lato', sans-serif;
	--font-body: 'Lato', sans-serif;

	/* Their headings are set light, not bold — this is the weight that carries
	   the whole page, so it is a token rather than a value repeated per section. */
	--fw-heading: 300;

	/* 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 (their values: 16px containers, 8px fields, pill buttons) ---- */
	--radius: 16px;
	--radius-btn: 8px;
	--radius-pill: 999px;

	/* ---- Shadow (soft, tinted to the brown ink; never neon) ---- */
	--shadow-card: 0 1px 3px rgba(61, 41, 18, 0.06);
	--shadow-soft: 0 18px 40px -20px rgba(61, 41, 18, 0.14);

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

	/* Focus ring — the brand green at the alpha that keeps it visible on cream */
	--focus-ring: 0 0 0 3px rgba(115, 162, 32, 0.55);
}

/*
 * ---- Brief 04 palette preview — 3 variants, internal only ----
 *
 * Kaisa's 11.8 call: kill beige/brown, go white + mint, near-black text
 * instead of the brown ink, rebuilt FROM --koivu: #73A220 outward (not from
 * either reference site's own literal colour — emannatisannointi.fi's real
 * accent is dusty pink/teal, not green; "mint" is Osuria's pitch deck, not
 * public). What DOES transfer from emannatisannointi.fi is structural: a
 * white base, near-black headline text, muted grey body copy, one accent
 * used with confidence. Every value below is derived mathematically from
 * the client's own real green and WCAG-checked — see the contrast ratios
 * in each comment. Applied via inc/palette-preview.php (?paletti=a|b|c),
 * never the default. Delete this whole block once one is chosen and folded
 * into the tokens above permanently.
 */

/* A — Rebalanced anchor. Closest to today's identity: same Lato, same
   structure, only the colour relationships change. Lowest risk. */
body.paletti-a {
	--birch-white: #FEFEFC;
	--tan: #F1F6E9;                      /* pale mint tint, was the beige band */
	--paper: #F1F6E9;
	--ink: #16211A;                      /* 16.42:1 on #FEFEFC — was 3D2912 brown */
	--muted: #4F5655;                    /* 7.44:1 */
	--koivu: #567A18;                    /* 5.01:1 on white — was 73A220 at 2.94:1 (fail) */
	--koivu-dark: #4B6915;               /* 6.31:1 — hover */
	--koivu-bright: #73A220;             /* their real green kept for small highlights only */
	--line: rgba(22, 33, 26, 0.10);
	--shadow-card: 0 1px 3px rgba(22, 33, 26, 0.06);
	--shadow-soft: 0 18px 40px -20px rgba(22, 33, 26, 0.14);
	--focus-ring: 0 0 0 3px rgba(86, 122, 24, 0.55);
	/* The semantic aliases (--bg, --bg-alt, --text, --text-muted, --accent)
	   are resolved ONCE at :root from the tokens above them and then simply
	   INHERITED — redeclaring --birch-white etc. down here doesn't make them
	   re-resolve. ~40 rules across sections/* reference the aliases directly,
	   so they need restating here too or those sections silently stay the
	   old colour. Found by measuring pixel values, not by eye — self-service,
	   video-story and faq.css all stayed cream in the first pass. */
	--bg: var(--birch-white);
	--bg-alt: var(--tan);
	--text: var(--ink);
	--text-muted: var(--muted);
	--accent: var(--koivu);
}

/* B — Bold panel accent. Borrows emannatisannointi.fi's actual move: a
   confident FULL-BLEED colour block, not just a button tint. Reinstates
   Fraunces + Schibsted Grotesk (A6, before the 27.7 reversion). */
body.paletti-b {
	--birch-white: #FEFEFC;
	--tan: #C7DAA6;                      /* bold flat mint panel — full section bands */
	--paper: #C7DAA6;
	--ink: #16211A;                      /* ⚠ white text FAILS on the bold panel (1.50:1) —
	                                         --ink is what sits on --tan/--paper here, 11.06:1 */
	--muted: #4F5655;
	--koivu: #567A18;                    /* 5.01:1 — buttons/links on the white sections */
	--koivu-dark: #4B6915;
	--koivu-bright: #73A220;
	--line: rgba(22, 33, 26, 0.10);
	--shadow-card: 0 1px 3px rgba(22, 33, 26, 0.08);
	--shadow-soft: 0 18px 40px -20px rgba(22, 33, 26, 0.16);
	--focus-ring: 0 0 0 3px rgba(86, 122, 24, 0.55);
	--font-display: 'Fraunces', serif;
	--font-body: 'Schibsted Grotesk', sans-serif;
	--fw-heading: 400;                   /* Fraunces at 300 reads thin at display size */
	--bg: var(--birch-white);
	--bg-alt: var(--tan);
	--text: var(--ink);
	--text-muted: var(--muted);
	--accent: var(--koivu);
}

/* C — Quiet minimal. Closest to the "Osuria" description: white + light
   NEUTRAL grey (not green-tinted), mint appears only in small accent
   moments — never a section background. Single type family, most restrained. */
body.paletti-c {
	--birch-white: #FAFAF8;
	--tan: #F5F5F3;                      /* neutral light grey, not mint-tinted */
	--paper: #F5F5F3;
	--ink: #1A1A18;                      /* 16.68:1 — neutral near-black, not green-tinted */
	--muted: #5C5C58;
	--koivu: #4B6915;                    /* the family's DEEPER shade — 6.31:1 with white, 6.03:1 on this bg (brief 04 §1 asks for different green shades per variant; a LIGHTER shade cannot carry white text at AA — #5C8A1B measures 4.11:1 — so the variants differ downward: A mid, B mid + light-mint surfaces, C deep) */
	--koivu-dark: #3F5812;               /* hover, one step deeper still */
	--koivu-bright: #73A220;
	--line: rgba(26, 26, 24, 0.10);
	--shadow-card: 0 1px 3px rgba(26, 26, 24, 0.05);
	--shadow-soft: 0 18px 40px -20px rgba(26, 26, 24, 0.12);
	--focus-ring: 0 0 0 3px rgba(86, 122, 24, 0.55);
	--font-display: 'Schibsted Grotesk', sans-serif;  /* single family — quiet, not two voices */
	--font-body: 'Schibsted Grotesk', sans-serif;
	--fw-heading: 500;
	--bg: var(--birch-white);
	--bg-alt: var(--tan);
	--text: var(--ink);
	--text-muted: var(--muted);
	--accent: var(--koivu);
}