/*
 * MEC Timing design tokens: the one place CSS custom properties are defined.
 *
 * Colours and font families come from the theme.json palette and font families (the single source
 * of truth, also editable in Site Editor > Styles). Every other stylesheet uses these --mec-*
 * names only: no hex colours, no var() fallbacks.
 *
 * To change a brand colour, change it in theme.json. Do not redefine a token in another file.
 */
:root {
	/* Colour */
	--mec-orange: var(--wp--preset--color--mec-orange);
	--mec-orange-hover: var(--wp--preset--color--orange-hover);
	--mec-orange-ink: var(--wp--preset--color--orange-ink);
	--mec-orange-ink-hover: var(--wp--preset--color--orange-ink-hover);
	--mec-ink: var(--wp--preset--color--ink);
	--mec-ink-muted: var(--wp--preset--color--ink-muted);
	--mec-surface: var(--wp--preset--color--surface);
	--mec-surface-alt: var(--wp--preset--color--surface-alt);
	--mec-surface-raised: var(--wp--preset--color--surface-raised);
	--mec-surface-zebra: var(--wp--preset--color--surface-zebra);
	--mec-border: var(--wp--preset--color--border);
	--mec-night: var(--wp--preset--color--night);
	--mec-night-text: var(--wp--preset--color--night-text);
	--mec-night-muted: var(--wp--preset--color--night-muted);
	--mec-on-night: var(--wp--preset--color--surface);
	--mec-mint: var(--wp--preset--color--mint);
	--mec-glacier: var(--wp--preset--color--glacier);
	--mec-spruce: var(--wp--preset--color--spruce);
	--mec-on-chip: var(--wp--preset--color--surface-raised);

	/* Type */
	--mec-font-display: var(--wp--preset--font-family--display);
	--mec-font-heading: var(--wp--preset--font-family--heading);
	--mec-font-sans: var(--wp--preset--font-family--sans);
	--mec-font-data: var(--wp--preset--font-family--data);

	/* Space */
	--mec-space-2: 8px;
	--mec-space-3: 12px;
	--mec-space-4: 16px;
	--mec-space-5: 20px;
	--mec-space-6: 24px;
	--mec-space-7: 28px;
	--mec-space-8: 32px;
	--mec-space-10: 40px;
	--mec-space-14: 56px;
	--mec-space-16: 64px;
	--mec-space-24: 96px;

	/* Radius */
	--mec-radius-sm: 4px;
	--mec-radius-md: 6px;
	--mec-radius-lg: 8px;
	--mec-radius-xl: 10px;
	--mec-radius-2xl: 12px;

	/* Layout */
	--mec-content-width: 1200px;
	--mec-measure-hero: 780px;
	--mec-measure-text: 600px;
	--mec-measure-prose: 780px;
	--mec-edge: max(0px, calc((100% - var(--mec-content-width)) / 2));
}