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

body {
	/* Elementor global colours */
	--wfd-color-primary: var(--e-global-color-primary, #229CD1);
	--wfd-color-secondary: var(--e-global-color-secondary, #EAF8FD);
	--wfd-color-text: var(--e-global-color-text, #151E21);
	--wfd-color-accent: var(--e-global-color-accent, #E6EDF7);
	--wfd-color-white: var(--e-global-color-2c2f4d5, #FFFFFF);
	--wfd-color-grey: var(--e-global-color-8905d45, #EEEEEE);

	/* Derived component colours. The first value is a browser fallback. */
	--wfd-color-primary-dark: #167DA8;
	--wfd-color-primary-dark: color-mix(in srgb, var(--wfd-color-primary) 76%, var(--wfd-color-text));
	--wfd-color-primary-soft: #E8F5FD;
	--wfd-color-primary-soft: color-mix(in srgb, var(--wfd-color-primary) 10%, var(--wfd-color-white));
	--wfd-color-muted: #5D6570;
	--wfd-color-muted: color-mix(in srgb, var(--wfd-color-text) 66%, var(--wfd-color-white));
	--wfd-color-border: var(--wfd-color-accent);
	--wfd-color-surface: #F7FBFE;
	--wfd-color-surface: color-mix(in srgb, var(--wfd-color-secondary) 58%, var(--wfd-color-white));
	--wfd-color-danger: #D53B3B;

	/* Elementor global typography */
	--wfd-font-primary-family: var(--e-global-typography-primary-font-family, "Handel Gothic ITC W02");
	--wfd-font-primary-size: var(--e-global-typography-primary-font-size, 40px);
	--wfd-font-primary-weight: var(--e-global-typography-primary-font-weight, 400);
	--wfd-font-primary-line-height: var(--e-global-typography-primary-line-height, 46px);

	--wfd-font-secondary-family: var(--e-global-typography-secondary-font-family, "Inter");
	--wfd-font-secondary-size: var(--e-global-typography-secondary-font-size, 25px);
	--wfd-font-secondary-weight: var(--e-global-typography-secondary-font-weight, 600);
	--wfd-font-secondary-line-height: var(--e-global-typography-secondary-line-height, 30px);

	--wfd-font-text-family: var(--e-global-typography-text-font-family, "Inter");
	--wfd-font-text-size: var(--e-global-typography-text-font-size, 16px);
	--wfd-font-text-weight: var(--e-global-typography-text-font-weight, 400);
	--wfd-font-text-line-height: var(--e-global-typography-text-line-height, 1.3em);

	--wfd-font-accent-family: var(--e-global-typography-accent-font-family, "Inter");
	--wfd-font-accent-size: var(--e-global-typography-accent-font-size, 16px);
	--wfd-font-accent-weight: var(--e-global-typography-accent-font-weight, 500);
	--wfd-font-accent-line-height: var(--e-global-typography-accent-line-height, 1.3em);
}
