/**
 * J-RICH design tokens.
 *
 * Single source of visual values. Components must use these variables
 * rather than one-off colours, type sizes, or spacing.
 *
 * Reusable classes (stable; safe for custom CSS):
 * .jrich-container / .jrich-container--narrow
 * .jrich-section / .jrich-grid / .jrich-grid--two
 * .jrich-button / --primary / --secondary / --text / --ghost
 * .jrich-form / .jrich-form__notice / .jrich-form__row
 * .jrich-gutenberg  (Gutenberg canvas; allows wide/full blocks)
 * .jrich-elementor-canvas  (Elementor page canvas; full width)
 * .jrich-eyebrow / .jrich-display
 */

:root {
	/* Colour — surfaces */
	--jrich-color-white: #ffffff;
	--jrich-color-paper: #f7f4ee;
	--jrich-color-cream: #efeae0;
	--jrich-color-sand: #e4ddd0;

	/* Colour — ink */
	--jrich-color-ink: #15231d;
	--jrich-color-ink-soft: #3d4a44;
	--jrich-color-muted: #5e6b64;
	--jrich-color-faint: #8a948e;

	/* Colour — primary emerald */
	--jrich-color-green-950: #0b1f19;
	--jrich-color-green-900: #123028;
	--jrich-color-green-800: #184236;
	--jrich-color-green: #1c5c47;
	--jrich-color-green-600: #247456;
	--jrich-color-green-500: #2f8a67;
	--jrich-color-green-100: #e6f1eb;
	--jrich-color-green-50: #f3f8f5;

	/* Colour — gold accent (never a page fill) */
	--jrich-color-gold-800: #7a5a18;
	--jrich-color-gold: #c4a35a;
	--jrich-color-gold-400: #d4b56a;
	--jrich-color-gold-100: #f4ead3;

	/* Colour — blue (third brand colour) */
	--jrich-color-blue-800: #1d3450;
	--jrich-color-blue: #2e4f73;
	--jrich-color-blue-600: #3d658c;
	--jrich-color-blue-100: #e4ebf2;
	--wp--preset--color--blue: var(--jrich-color-blue);

	/* Colour — lines and states */
	--jrich-color-line: #ddd6c8;
	--jrich-color-line-strong: #c9c0ae;
	--jrich-color-focus: var(--jrich-color-green);
	--jrich-color-error: #8f2d2d;
	--jrich-color-error-bg: #f8ecec;
	--jrich-color-success: var(--jrich-color-green);

	/* Semantic aliases */
	--jrich-color-bg: var(--jrich-color-paper);
	--jrich-color-surface: var(--jrich-color-white);
	--jrich-color-text: var(--jrich-color-ink);
	--jrich-color-text-muted: var(--jrich-color-muted);
	--jrich-color-primary: var(--jrich-color-green);
	--jrich-color-primary-hover: var(--jrich-color-green-600);
	--jrich-color-accent: var(--jrich-color-gold);
	--jrich-color-border: var(--jrich-color-line);

	/* Typography */
	--jrich-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
	--jrich-font-body: "Figtree", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--jrich-font-ui: var(--jrich-font-body);

	--jrich-fs-xs: 0.8125rem;
	--jrich-fs-sm: 0.9375rem;
	--jrich-fs-base: 1.0625rem;
	--jrich-fs-md: 1.125rem;
	--jrich-fs-lg: 1.25rem;
	--jrich-fs-xl: clamp(1.3125rem, 1.18rem + 0.55vw, 1.5rem);
	--jrich-fs-2xl: clamp(1.5rem, 1.28rem + 0.9vw, 1.875rem);
	--jrich-fs-3xl: clamp(1.875rem, 1.45rem + 1.5vw, 2.5rem);
	--jrich-fs-4xl: clamp(2.125rem, 1.55rem + 2vw, 3rem);

	--jrich-lh-display: 1.18;
	--jrich-lh-heading: 1.28;
	--jrich-lh-body: 1.7;
	--jrich-lh-ui: 1.4;

	--jrich-tracking-display: -0.018em;
	--jrich-tracking-heading: -0.012em;
	--jrich-tracking-eyebrow: 0.16em;

	--jrich-weight-regular: 400;
	--jrich-weight-medium: 500;
	--jrich-weight-semibold: 600;
	--jrich-weight-bold: 700;

	/* Spacing — 4px base, used as rem */
	--jrich-space-3xs: 0.25rem;
	--jrich-space-2xs: 0.5rem;
	--jrich-space-xs: 0.75rem;
	--jrich-space-sm: 1rem;
	--jrich-space-md: 1.5rem;
	--jrich-space-lg: 2.25rem;
	--jrich-space-xl: 3.5rem;
	--jrich-space-2xl: 5rem;
	--jrich-space-3xl: 6.5rem;
	--jrich-space-4xl: 8.5rem;

	--jrich-section-space: clamp(3.75rem, 6vw, 6.75rem);
	--jrich-block-gap: 1.75rem;
	--jrich-gutter: clamp(1.25rem, 4vw, 2.5rem);

	/* Containers */
	--jrich-width-narrow: 40rem;
	--jrich-width-content: 44rem;
	--jrich-width-wide: 72rem;
	--jrich-width-max: 82rem;

	/* Radius — restrained */
	--jrich-radius-sm: 0.25rem;
	--jrich-radius-md: 0.5rem;
	--jrich-radius-lg: 0.75rem;
	--jrich-radius-pill: 999px;

	/* Shadows — quiet, green-tinted */
	--jrich-shadow-0: none;
	--jrich-shadow-xs: 0 1px 2px rgba(11, 31, 25, 0.05);
	--jrich-shadow-sm: 0 8px 24px rgba(11, 31, 25, 0.06);
	--jrich-shadow-md: 0 16px 40px rgba(11, 31, 25, 0.08);

	/* Motion — one language for hover, entrance, and chrome */
	--jrich-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--jrich-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--jrich-ease-in: cubic-bezier(0.4, 0, 1, 1);
	--jrich-duration-fast: 160ms;
	--jrich-duration: 240ms;
	--jrich-duration-slow: 420ms;
	--jrich-duration-reveal: 560ms;
	--jrich-duration-hero: 720ms;
	--jrich-duration-drawer: 420ms;
	--jrich-stagger: 55ms;
	--jrich-reveal-y: 0.75rem;
	--jrich-reveal-x: 0.9rem;
	--jrich-hover-shift: -1px;
	--jrich-image-zoom: 1.035;

	/* Breakpoints (documented; media queries use the same values) */
	--jrich-bp-sm: 30rem;
	--jrich-bp-md: 48rem;
	--jrich-bp-lg: 64rem;
	--jrich-bp-xl: 80rem;

	/* Forms / chrome */
	--jrich-control-height: 3rem;
	--jrich-focus-ring: 0 0 0 3px color-mix(in srgb, var(--jrich-color-gold) 45%, transparent);

	--jrich-header-height: 5.5rem;
	--jrich-header-height-compact: 4.5rem;
	--jrich-header-offset: var(--jrich-header-height);
	--jrich-drawer-width: min(100%, 26rem);
}

@media (min-width: 64rem) {
	:root {
		--jrich-fs-base: 1.125rem;
	}
}

@media (max-width: 47.99rem) {
	:root {
		--jrich-duration-reveal: 420ms;
		--jrich-duration-hero: 480ms;
		--jrich-reveal-y: 0.45rem;
		--jrich-reveal-x: 0.5rem;
		--jrich-image-zoom: 1.02;
		--jrich-stagger: 40ms;
	}
}