/**
 * Reeded Window Films semantic design tokens.
 *
 * These aliases map the custom theme components to Elementor Site Settings.
 * Change the Elementor global colours or typography and the RWF shortcodes,
 * mega menu and account area will follow automatically.
 */

body {

	/* =====================================================
	   ELEMENTOR GLOBAL COLOURS
	   ===================================================== */

	--rwf-color-primary:
		var(--e-global-color-primary, #0A264C);

	--rwf-color-secondary:
		var(--e-global-color-secondary, #00CAB9);

	--rwf-color-text:
		var(--e-global-color-text, #04162D);

	--rwf-color-accent:
		var(--e-global-color-accent, #71FCEE);

	--rwf-color-purple:
		var(--e-global-color-c4e6c36, #A957FF);

	--rwf-color-white:
		var(--e-global-color-1e0117c, #FFFFFF);

	--rwf-color-grey:
		var(--e-global-color-d83a10c, #EFF3F6);


	/* =====================================================
	   DERIVED COMPONENT COLOURS
	   ===================================================== */

	/*
	 * Darker version of the primary navy.
	 * First declaration is the fallback for older browsers.
	 */
	--rwf-color-primary-dark: #071C38;

	--rwf-color-primary-dark:
		color-mix(
			in srgb,
			var(--rwf-color-primary) 76%,
			var(--rwf-color-text)
		);


	/*
	 * Very pale primary/navy background.
	 */
	--rwf-color-primary-soft: #E8EDF3;

	--rwf-color-primary-soft:
		color-mix(
			in srgb,
			var(--rwf-color-primary) 10%,
			var(--rwf-color-white)
		);


	/*
	 * Muted text.
	 */
	--rwf-color-muted: #5D6570;

	--rwf-color-muted:
		color-mix(
			in srgb,
			var(--rwf-color-text) 66%,
			var(--rwf-color-white)
		);


	/*
	 * Borders.
	 */
	--rwf-color-border:
		var(--rwf-color-accent);


	/*
	 * Pale turquoise surface.
	 */
	--rwf-color-surface: #80E4DC;

	--rwf-color-surface:
		color-mix(
			in srgb,
			var(--rwf-color-secondary) 58%,
			var(--rwf-color-white)
		);


	/*
	 * Error / warning colour.
	 */
	--rwf-color-danger: #D53B3B;


	/* =====================================================
	   ELEMENTOR GLOBAL TYPOGRAPHY
	   ===================================================== */

	--rwf-font-primary-family:
		var(
			--e-global-typography-primary-font-family,
			"Montserrat"
		);

	--rwf-font-primary-size:
		var(
			--e-global-typography-primary-font-size,
			40px
		);

	--rwf-font-primary-weight:
		var(
			--e-global-typography-primary-font-weight,
			500
		);

	--rwf-font-primary-line-height:
		var(
			--e-global-typography-primary-line-height,
			46px
		);


	--rwf-font-secondary-family:
		var(
			--e-global-typography-secondary-font-family,
			"Inter"
		);

	--rwf-font-secondary-size:
		var(
			--e-global-typography-secondary-font-size,
			25px
		);

	--rwf-font-secondary-weight:
		var(
			--e-global-typography-secondary-font-weight,
			600
		);

	--rwf-font-secondary-line-height:
		var(
			--e-global-typography-secondary-line-height,
			30px
		);


	--rwf-font-text-family:
		var(
			--e-global-typography-text-font-family,
			"Inter"
		);

	--rwf-font-text-size:
		var(
			--e-global-typography-text-font-size,
			16px
		);

	--rwf-font-text-weight:
		var(
			--e-global-typography-text-font-weight,
			400
		);

	--rwf-font-text-line-height:
		var(
			--e-global-typography-text-line-height,
			1.3em
		);


	--rwf-font-accent-family:
		var(
			--e-global-typography-accent-font-family,
			"Inter"
		);

	--rwf-font-accent-size:
		var(
			--e-global-typography-accent-font-size,
			16px
		);

	--rwf-font-accent-weight:
		var(
			--e-global-typography-accent-font-weight,
			500
		);

	--rwf-font-accent-line-height:
		var(
			--e-global-typography-accent-line-height,
			1.3em
		);
}