/**
 * Design tokens.
 *
 * Copied from the mockup's _ds/.../tokens/ (colors, typography, spacing,
 * layout, motion) with the same names, so mockup CSS and theme CSS can be
 * compared one to one. Left out on purpose: fonts.css (a Google Fonts import;
 * fonts are self-hosted through theme.json) and --section-y* (HANDOFF section 1:
 * not used by any page).
 *
 * @package plantworld
 */

:root {
	/* Colors: base palette */
	--pw-green: #39bb47; /* brand green, on dark only */
	--pw-green-dark-hover: #2d9438;
	--pw-green-on-light: #22782d; /* 5.09:1 paper, 4.61:1 paper-alt, white text 5.54:1 */
	--pw-green-on-light-hover: #1b5e24;

	--pw-ink: #1c1a16;
	--pw-text: #26231d;
	--pw-paper: #f7f5f1;
	--pw-paper-alt: #edeae3;
	--pw-stone: #b8ae9b; /* hairlines and large decorative numerals only, never text */
	--pw-error: #9a4a29; /* Stage C (Damian 23.10.2026): HANDOFF #A8532F gave 4.43:1 on --pw-paper-alt (Kontakt form); same hue, 5.16:1 there, 5.69:1 on paper */
	--pw-error-on-dark: #c9724f; /* HANDOFF section 1 ("#C9724F na ink"); the mockup writes the hex inline */
	--pw-white: #fff;

	/* Colors: surfaces */
	--surface-page: var(--pw-paper);
	--surface-alt: var(--pw-paper-alt);
	--surface-dark: var(--pw-ink);
	--surface-card: var(--pw-paper);
	--surface-card-dark: var(--pw-ink);
	/*
	 * Fill of form fields (stage G [70], Damian): one step lighter than the
	 * section, never plain white – mixed from the palette, no new hue.
	 * Sections switch --surface-field (core.css); fields read it.
	 */
	--surface-field-on-page: color-mix(in srgb, var(--pw-paper) 45%, var(--pw-white));
	--surface-field-on-alt: var(--pw-paper);
	--surface-field-on-dark: color-mix(in srgb, var(--pw-ink) 90%, var(--pw-white));
	--surface-field: var(--surface-field-on-page);

	/* Colors: text */
	--text-body: var(--pw-text);
	--text-heading: var(--pw-ink);
	--text-lead-muted: #5a5344; /* secondary text on light */
	--text-meta: var(--text-lead-muted); /* text token; on ink use --text-on-dark-muted */
	--text-on-dark: var(--pw-paper);
	--text-on-dark-muted: #9a9285;

	/* Colors: actions (green is reserved for clickable things) */
	--action-on-light: var(--pw-green-on-light);
	--action-on-light-hover: var(--pw-green-on-light-hover);
	--action-on-dark: var(--pw-green);
	--action-on-dark-hover: var(--pw-green-dark-hover);
	--action-fill-on-light: var(--pw-green-on-light); /* white text is fine */
	--action-fill-on-light-hover: var(--pw-green-on-light-hover);
	--action-fill-on-dark: var(--pw-green); /* ink text only, never white */
	--action-fill-on-dark-hover: var(--pw-green-dark-hover);
	--action-fill-text-on-light: var(--pw-white);
	--action-fill-text-on-dark: var(--pw-ink);

	/* Colors: lines */
	--hairline: var(--pw-stone);
	--hairline-weak: #dcd5c8;
	--hairline-on-dark: #3a362e;
	--border-field: #8a8171; /* resting form control border, WCAG 1.4.11: 3.5:1 paper */
	--border-field-on-dark: #736c5f; /* 3.3:1 ink */
	--border-hairline: 1px solid var(--hairline);
	--border-hairline-weak: 1px solid var(--hairline-weak);
	--border-hairline-on-dark: 1px solid var(--hairline-on-dark);

	/* Colors: focus */
	--focus-ring-on-light: var(--pw-green-on-light);
	--focus-ring-on-dark: var(--pw-green);

	/* Absolutes */
	--radius: 0;
	--shadow: none;

	/* Typography: font stacks point at theme.json, so there is one definition */
	--font-display: var(--wp--preset--font-family--display);
	--font-body: var(--wp--preset--font-family--body);

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;

	/* Display and headings: Cormorant Garamond 400 only (desktop sizes) */
	--type-display-size: 72px;
	--type-display-lh: 1.04;
	--type-display-ls: -0.02em;

	--type-h1-size: 56px;
	--type-h1-lh: 1.08;
	--type-h1-ls: -0.015em;

	--type-h2-size: 40px;
	--type-h2-lh: 1.15;
	--type-h2-ls: -0.01em;

	--type-h3-size: 28px;
	--type-h3-lh: 1.2;
	--type-h3-ls: 0;

	/* Body: Manrope */
	--type-lead-size: 20px;
	--type-lead-lh: 1.6;

	--type-body-size: 16px;
	--type-body-lh: 1.7;

	--type-small-size: 14px;
	--type-small-lh: 1.6;

	/* Meta and eyebrow: uppercase, tracked, colored with --text-meta */
	--type-meta-size: 12px;
	--type-meta-lh: 1.4;
	--type-meta-ls: 0.14em;
	--type-meta-transform: uppercase;

	/* UI label (buttons, nav, inputs). The mockup token says 0.06em, but the
	   HANDOFF table and every .pw-* label in components.css use 0.08em, and
	   HANDOFF ranks higher than the mockup files. */
	--type-label-size: 14px;
	--type-label-ls: 0.08em;
	--type-label-weight: var(--fw-semibold);

	/* Spacing */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;
	--space-11: 160px;

	--gutter: var(--space-5);
	--grid-gap: var(--space-6);

	/* Layout. Neve uses the same --container name for .container (748 / 992 /
	   1440px by breakpoint); this file loads later, so 1440px wins everywhere.
	   Below 960px both Neve values are wider than the screen anyway, so the
	   layout does not change. */
	--container: 1440px;
	--container-narrow: 780px; /* long-form prose */
	--header-h: 96px;
	--header-h-sticky: 64px;

	/* Motion: calm ease-out */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur-fast: 120ms;
	--dur: 200ms;
	--dur-slow: 400ms;
	--transition-color: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
	--transition-reveal: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}