/**
 * True Echo design tokens.
 *
 * One source for colour, spacing, radius, and measure across every True Echo
 * surface: the calculator, the report, the permanent link, the certificate,
 * and the contribution chooser. Before this, each stylesheet carried its own
 * hardcoded values and the calculator derived everything from `currentColor`
 * on purpose, so the product looked like whatever theme it happened to be
 * sitting in. That was right when it was a guest. It is the opposite of a
 * recognizable brand.
 *
 * Declared on `:root` rather than a component class so every surface resolves
 * the same value, including the standalone pages that render outside the
 * theme entirely.
 *
 * On contrast. `--te-blue` measures 3.83:1 against white, which clears WCAG AA
 * for large text, icons, and UI components but not for body-size text. So the
 * blue is used for buttons, headings, icons, statistics, and accents, and
 * `--te-link` carries body-size links instead. That is not a new colour: it is
 * the specified hover blue, which measures 5.28:1. Every value below has been
 * measured rather than eyeballed, and the ratio is recorded next to it.
 */

:root {

	/*
	 * Typography. Montserrat 500 for headings, Roboto 400 for everything
	 * read at length, matching the theme so an embedded surface and a
	 * standalone one are the same product.
	 *
	 * The fallback stacks are real rather than a bare sans-serif, because the
	 * pages that render outside the theme have to survive the webfont not
	 * arriving. Before these existed, the report rendered in the browser
	 * default serif, which read like a legal notice rather than True Echo.
	 */
	--te-font-heading: 'Montserrat', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
	--te-font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	--te-weight-heading: 500;

	/* Brand. */
	--te-blue: #008db5;        /* 3.83:1 on white: large text, UI, accents. */
	--te-blue-hover: #007595;  /* 5.28:1 on white. */
	--te-white: #ffffff;
	--te-dark: #202020;        /* 16.29:1 on white. */

	/*
	 * Body-size links. The brand blue at 14-16px would fail AA, and a link
	 * nobody can read is not a brand asset.
	 */
	--te-link: var(--te-blue-hover);
	--te-link-hover: var(--te-blue);

	/* Text on a blue field. */
	--te-on-blue: var(--te-white);

	/*
	 * Secondary text. 6.90:1 on white, so it stays readable rather than
	 * becoming decoration. Muted is a hierarchy, not a licence to fade.
	 */
	--te-muted: #5a5a5a;

	/*
	 * Structure. Rules are dark at low alpha rather than a separate grey, so
	 * there is one neutral story and borders sit on any background.
	 */
	--te-rule: rgba( 32, 32, 32, 0.12 );
	--te-rule-strong: rgba( 32, 32, 32, 0.28 );

	/* The only tinted field, used sparingly. */
	--te-tint: rgba( 0, 141, 181, 0.05 );

	/*
	 * Focus. Brand blue, thick enough to see against both white and blue,
	 * with an offset so it never sits on the control it is marking.
	 */
	--te-focus: var(--te-blue);
	--te-focus-width: 3px;
	--te-focus-offset: 2px;

	/*
	 * Spacing. A single scale, so vertical rhythm is chosen rather than
	 * accumulated. Whitespace is a brand element here, so the steps are
	 * generous and the large ones are genuinely large.
	 */
	--te-space-1: 0.25rem;
	--te-space-2: 0.5rem;
	--te-space-3: 0.75rem;
	--te-space-4: 1rem;
	--te-space-5: 1.5rem;
	--te-space-6: 2rem;
	--te-space-7: 3rem;
	--te-space-8: 4.5rem;

	/* The gap between major sections. */
	--te-section: var(--te-space-7);

	/*
	 * Radius. Moderate on purpose. A full pill reads as a consumer app, and
	 * this product asks people to trust carbon accounting.
	 */
	--te-radius: 6px;
	--te-radius-lg: 10px;

	/*
	 * Measure. Reading surfaces are capped by character count rather than
	 * container width, so a long report stays readable on a wide screen.
	 */
	--te-measure: 34rem;
	--te-measure-wide: 46rem;
}

/*
 * Larger screens earn more air. The scale steps up rather than the layout
 * stretching, which is what keeps wide screens from looking sparse instead of
 * spacious.
 */
@media ( min-width: 60rem ) {

	:root {
		--te-section: var(--te-space-8);
	}
}

/*
 * Somebody who has asked for less motion has usually asked for less of
 * everything decorative. Nothing here animates, but components inheriting
 * these tokens might.
 */
@media ( prefers-reduced-motion: reduce ) {

	:root {
		--te-transition: none;
	}
}