/*
 * MCS design tokens — the source of truth for both rendering paths.
 *
 * Elementor free stores literal hex values in Global Colors rather than var(),
 * so these values are mirrored by hand into Site Settings. The mapping table is
 * in README.md. When a token changes here, it changes there in the same commit.
 *
 * Direction: these pages are county records that happen to be marketing. The
 * vernacular is the plat map and the assessor printout — cool paper, plat-ink
 * dark, survey green, and a single amber reserved exclusively for provenance
 * (dates, citation markers, source register). Amber never decorates; if it is
 * on the page, it is telling you where a number came from.
 *
 * Typography: Bricolage Grotesque for display (characterful, variable, not the
 * house grotesque everyone reaches for), Source Serif 4 for long-form narrative,
 * IBM Plex Mono for every figure and date. All three carry full Latin Extended,
 * which the /es/ tree needs. Load them from the theme or Elementor's font manager;
 * the stacks below degrade to system faces without breaking the scale.
 */

:root {
	/* --- Color ------------------------------------------------------------ */
	--mcs-ink:            #16211d;
	--mcs-ink-soft:       #3a4741;
	--mcs-muted:          #5a645e;
	--mcs-paper:          #f6f7f4;
	--mcs-paper-raised:   #ffffff;
	--mcs-paper-sunk:     #eceee9;
	--mcs-accent:         #2f6b4f;
	--mcs-accent-deep:    #1f4b37;
	--mcs-accent-wash:    #e8efe9;
	--mcs-signal:         #8a5a00;
	--mcs-signal-wash:    #f7f0e2;
	--mcs-line:           #d3d8d1;
	--mcs-line-strong:    #a9b2ab;
	--mcs-focus:          #2f6b4f;

	/* --- Type ------------------------------------------------------------- */
	--mcs-font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
	--mcs-font-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
	--mcs-font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	--mcs-step--2: 0.75rem;
	--mcs-step--1: 0.875rem;
	--mcs-step-0:  1.0625rem;
	--mcs-step-1:  1.3125rem;
	--mcs-step-2:  1.625rem;
	--mcs-step-3:  2.125rem;
	--mcs-step-4:  2.875rem;
	--mcs-step-5:  clamp(2.5rem, 1.6rem + 3.6vw, 4rem);

	--mcs-weight-body:    400;
	--mcs-weight-medium:  500;
	--mcs-weight-display: 620;

	--mcs-leading-tight: 1.08;
	--mcs-leading-snug:  1.3;
	--mcs-leading-body:  1.62;

	--mcs-tracking-eyebrow: 0.1em;
	--mcs-tracking-display: -0.018em;

	/* --- Space ------------------------------------------------------------ */
	--mcs-space-3xs: 0.25rem;
	--mcs-space-2xs: 0.5rem;
	--mcs-space-xs:  0.75rem;
	--mcs-space-s:   1rem;
	--mcs-space-m:   1.5rem;
	--mcs-space-l:   2.25rem;
	--mcs-space-xl:  3.5rem;
	--mcs-space-2xl: 5rem;

	/* --- Layout ----------------------------------------------------------- */
	--mcs-measure:     68ch;   /* narrative column */
	--mcs-width-page:  74rem;
	--mcs-gutter:      clamp(1.25rem, 4vw, 3rem);

	/* --- Surface ---------------------------------------------------------- */
	--mcs-radius-sm: 2px;
	--mcs-radius-md: 4px;
	--mcs-rule:      1px solid var(--mcs-line);
	--mcs-rule-hair: 1px solid color-mix(in srgb, var(--mcs-line) 70%, transparent);
	--mcs-shadow-raised: 0 1px 2px rgb(22 33 29 / 0.05), 0 8px 24px -16px rgb(22 33 29 / 0.18);

	/* --- Motion ----------------------------------------------------------- */
	--mcs-ease: cubic-bezier(0.2, 0, 0.15, 1);
	--mcs-duration: 160ms;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--mcs-duration: 0ms;
	}
}