/*
 * Design tokens.
 *
 * Colour and type are now sampled from the live site rather than guessed, so the
 * rebuild can be compared like-for-like. Every value below was read from the computed
 * styles of ericom.com.au on 31 July 2026.
 *
 * Notably the current site loads NO webfonts — headings are Segoe with a system
 * fallback. That is worth keeping: it costs zero bytes and renders instantly. If the
 * brand discussion introduces a typeface, it arrives with a measured cost.
 *
 * Dark mode is deliberately absent. The current site is light-only, and inventing a
 * dark palette would break the like-for-like comparison. It belongs to the design
 * discussion.
 */

:root {
	/*
	 * Extracted verbatim from the live site's Elementor global variables — see
	 * reference/live/css/. These are the real values, not sampled approximations.
	 *
	 *   --e-global-color-primary    #0081C9   buttons, ticker, links
	 *   --e-global-color-accent     #40C0F0   logo highlight, donut arc
	 *   --e-global-color-secondary  #282B2C   headings
	 *   --e-global-color-7275342    #404040   body copy
	 *   --e-global-typography-text  Segoe 18px / 400 / 1.5em
	 *   --e-global-typography-accent Segoe 16px / 600 / 1.1em
	 */

	--colour-blue: #0081c9;
	--colour-blue-bright: #40c0f0;
	--colour-blue-dark: #006aa6;
	/*
	 * The brand blue is 4.21:1 on white — it fails WCAG AA for normal-size text, though it
	 * passes for large text and is fine as a fill. This darker variant is for small text and
	 * links, and hits 5.3:1. Buttons keep the brand blue but set their label at 16px/600,
	 * which qualifies as large text.
	 */
	--colour-blue-text: #00669e;

	--colour-heading: #282b2c;
	--colour-body: #404040;
	--colour-body-strong: #282b2c;
	--colour-on-dark: #ffffff;
	--colour-on-dark-soft: #ffffff;

	--colour-surface: #ffffff;
	--colour-surface-grey: #f2f2f2;
	--colour-surface-dark: #282b2c;
	--colour-rule: #dddddd;
	--colour-black: #000000;

	/* Type — Segoe with a system fallback; the live site loads no webfonts. */
	--font-body: Segoe, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
		"Helvetica Neue", Arial, sans-serif;

	--text-body: 1.125rem;    /* 18px / 400 / 1.5em */
	--text-accent: 1rem;      /* 16px / 600 / 1.1em — card links, buttons */
	--text-card-h: 1.4rem;    /* 22.4px / 600 */
	--text-h2: 2.8rem;        /* 44.8px / 300 */
	--text-h2-lg: 3.8rem;     /* 60.8px / 300 */
	--text-h1: 4.5rem;        /* 72px / 300 / 1em */

	--weight-light: 300;
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;

	--leading-body: 1.5;

	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	--measure: 662px;         /* the live hero/intro measure */
	/*
	 * 110rem, up from the 85rem transcribed off the live site.
	 *
	 * 1360 was never a decision, it was Elementor's column width on the old build. At 1600 it
	 * fills 85% of the screen and looks right; at 2560 it fills 53% and leaves 600px of empty
	 * margin either side, directly under a hero photograph that runs the full 2560. That jump
	 * from full bleed to just over half is what reads as cramped, and the card photographs sit
	 * at 328px wide on a monitor with room for twice that.
	 *
	 * Widening is safe here because prose does not widen with it: base.css caps every p, ul and
	 * ol at --measure, so paragraphs hold their 60-odd characters and only the grids, the
	 * photographs and the section rhythm get the extra room.
	 */
	--wrap-max: 110rem;     /* 1760px */
	--wrap-gutter: clamp(1.25rem, 4vw, 50px);   /* 50px each side at desktop */

	--radius: 10px;
	--radius-card: 10px;
	--radius-pill: 100px;

	--focus-ring: 3px solid var(--colour-blue-bright);
}