Available in X Dispatch 18.0 or newer.

/*
	Copy the contents of this file into the adjacent custom-styles.css
	and change the colors to match your brand.
*/

:root {
	/* The brand primary color is used to accent important information, buttons, links, etc. */
	--color-brand-primary: #14b464;
	--color-brand-primary-lighter: #a0f4ca;
	--color-brand-primary-darker: #0f864b;
	--color-brand-primary-gradient: linear-gradient(to bottom right, #14b464, #0f864b);

	/* The brand accent color is used sparingly, but can compliment the brand primary color. */
	--color-brand-accent: #37474f;
	--color-brand-accent-lighter: #9aaeb8;
	--color-brand-accent-darker: #222c31;
	--color-brand-accent-gradient: linear-gradient(to bottom right, #37474f, #222c31);

	/* The brand success color is used for confirmation and success alerts and text. */
	--color-brand-success: #14b464;
	--color-brand-success-lighter: #a0f4ca;
	--color-brand-success-darker: #0f864b;
	--color-brand-success-gradient: linear-gradient(to bottom right, #14b464, #0f864b);

	/* The brand info color is used for informational alerts and text. */
	--color-brand-info: #5bc0de;
	--color-brand-info-lighter: white;
	--color-brand-info-darker: #31b0d5;
	--color-brand-info-gradient: linear-gradient(to bottom right, #5bc0de, #31b0d5);

	/* The brand warning color is used to warn the user about something on the page that may required attention. */
	--color-brand-warning: #f0ad4e;
	--color-brand-warning-lighter: white;
	--color-brand-warning-darker: #ec971f;
	--color-brand-warning-gradient: linear-gradient(to bottom right, #f0ad4e, #ec971f);

	/* The brand danger color is used to alert the user about something wrong on the page that requires attention. */
	--color-brand-danger: #d9534f;
	--color-brand-danger-lighter: #fdf7f7;
	--color-brand-danger-darker: #c9302c;
	--color-brand-danger-gradient: linear-gradient(to bottom right, #d9534f, #c9302c);

	/* The light grey color is used for light borders and the backgrounds of some elements. */
	--color-light-grey: #eceff1;
	--color-light-grey-lighter: white;
	--color-light-grey-darker: #cfd6db;

	/* The medium grey color is used for dark borders and some text and icons. */
	--color-medium-grey: #78909c;
	--color-medium-grey-lighter: #eef1f2;
	--color-medium-grey-darker: #5f7682;

	/* The dark grey color is used for most basic text. */
	--color-dark-grey: #263238;
	--color-dark-grey-lighter: #819ca9;
	--color-dark-grey-darker: #11171a;
}