/**
 * HTPLaw design tokens.
 *
 * Colors and fonts read Elementor Site Settings (Global Colors / Global Fonts)
 * first, so the site can be re-themed from Elementor without touching code.
 * Elementor defines its globals on the body's .elementor-kit-* class, which
 * is why these tokens are declared on body rather than :root.
 *
 * Values come from the HTPLaw Figma file (homepage frame 3:322). The
 * Elementor kit's Global Colors and Fonts are set to the same values, so the
 * fallbacks only apply where the kit doesn't load.
 *
 * --htplaw-color-accent-strong is NOT in Figma. Figma's copper (#b87333)
 * reaches only ~3.8:1 on white, below WCAG AA for body-size text, so
 * hover/current states use this darker copper (~5.7:1) instead.
 * --htplaw-color-accent-on-dark is its counterpart for copper text on navy.
 */
body {
	--htplaw-color-primary: var(--e-global-color-primary, #0e1b2c);
	--htplaw-color-secondary: var(--e-global-color-secondary, #0f2a3f);
	--htplaw-color-text: var(--e-global-color-text, #0e1b2c);
	--htplaw-color-accent: var(--e-global-color-accent, #b87333);
	--htplaw-color-accent-strong: #8f5a28;
	--htplaw-color-accent-on-dark: #bf8147; /* copper text on #0f2a3f: 4.5:1 (Figma's #b87333 is 3.9:1) */
	--htplaw-color-blue: #24597f; /* timeline years and dots */
	--htplaw-color-rule: #898989; /* timeline line */
	--htplaw-color-surface: #ffffff;
	--htplaw-color-muted: #f5f7f9;
	--htplaw-color-on-dark: #f5f7f9;
	--htplaw-color-border: #e2e6eb;

	--htplaw-font-heading: var(--e-global-typography-primary-font-family, "Source Serif 4"), Georgia, "Times New Roman", serif;
	--htplaw-font-body: var(--e-global-typography-text-font-family, "Inter"), system-ui, -apple-system, "Segoe UI", sans-serif;

	--htplaw-container: 1280px; /* content width, excluding gutters (Figma: 1100; widened 2026-10-22 at the client's request) */
	--htplaw-gutter: clamp(16px, 4vw, 40px);
	--htplaw-radius: 6px;
	--htplaw-shadow: 0 8px 24px rgb(16 24 40 / 12%);
	--htplaw-duration: 200ms;
	--htplaw-ease: cubic-bezier(.2, .7, .2, 1);
	--htplaw-focus-ring: 2px solid var(--htplaw-color-accent);

	/* Mobile section spacing (used only inside widgets' mobile media queries):
	   the most vertical padding a section gets on tablets and phones. */
	--htplaw-space-section: 56px;
}

@media (max-width: 600px) {
	body {
		--htplaw-space-section: 44px;
	}
}