:root {
	/* ------- */
	/* Colours */
	/* ------- */

	--primary: #109dac;
	--secondary: #fc0;

	--customer-primary: var(--primary);
	--customer-secondary: var(--secondary);

	--container-light-bg-color: #ebebeb;
	--container-light-fg-color: #2b2a28;
	--container-dark-bg-color: #777;
	--container-dark-fg-color: #fff;

	--bg-grey: #fcfcfc;
	--bg-blue: #13182d;
	--bg-gradient: linear-gradient(to top left, #003f46 0%, #111 100%);

	--blue: var(--primary);
	--uc-blue: var(--primary);
	--yellow: var(--secondary);
	--yellowgrid: var(--secondary);
	--black: #131313;
	--offset-grey: #ccc;
	--mid-grey: #919191;
	--text-grey: #5a5a5a;
	--portal-grey: #d7d7d7;
	--tcx: #0596d4;
	--xero-blue: #13b6d8;
	--dark-grey: var(--text-grey);
	--light-grey: #d8d8d8;
	--green: #009c19;
	--success: #44e344;
	--red: #9e0000;
	--error: #e50d38;
	--portal-gradient: linear-gradient(to right, var(--primary) 80%, var(--secondary) 85%);

	/* ------- */
	/* Borders */
	/* ------- */

	--grey-border: solid 1px #d7d7d7;

	/* ----- */
	/* Fonts */
	/* ----- */

	--line-height: 1.2;
	--font-family: 'Work Sans', sans-serif;
	--font-weight-bolder: 600;
	--font-weight-bold: 500;
	--font-weight-thin: 300;
	--font-size-h2: 44px;
	--banner-font: normal normal 300 3vw var(--font-family);
	--heading-font: normal normal 400 38px var(--font-family);
	--subheading-font: normal normal 300 28px var(--font-family);
	--large-text-font: normal normal 300 1.2vw var(--font-family);
	--text-font: normal normal 300 18px var(--font-family);
	--small-text-font: normal normal 300 17px var(--font-family);
	--tiny-text-font: normal normal 300 0.8vw var(--font-family);

	/* ------ */
	/* Widths */
	/* ------ */
	--page-width-85: clamp(360px, 85%, 2000px);
	--page-width-75: clamp(360px, 75%, 2000px);
	--page-width-65: clamp(360px, 65%, 2000px);
	--page-width-55: clamp(360px, 55%, 125vh);
	--page-row-gap: 108px;

	/* ------- */
	/* Heights */
	/* ------- */

	--nav-padding: 1rem;
	--nav-btn-border-width: 1px;
	--nav-btn-padding: 0.5rem;
	--nav-btn-font-size: 0.9rem;
	--nav-btn-height: calc(
		(var(--nav-btn-border-width) * 2) +
		(var(--nav-btn-padding) * 2) +
		(var(--nav-btn-font-size) * var(--line-height))
	);
	--nav-height: calc((var(--nav-padding) * 2) + var(--nav-btn-height));
	--screen-height-minus-nav: calc(100svh - var(--nav-height));

	--breadcrumbs-border-width: 1px;
	--breadcrumbs-padding: 0.4rem;
	--breadcrumbs-font-size: 0.9rem;
	--breadcrumbs-height: calc(
		var(--breadcrumbs-border-width) +
		(var(--breadcrumbs-padding) * 2) +
		(var(--breadcrumbs-font-size) * var(--line-height))
	);
	--screen-height-minus-nav-breadcrumbs: calc(100svh - var(--nav-height) - var(--breadcrumbs-height));

	--sidebar-padding: 1rem;
	--sidebar-btn-border-width: 1px;
	--sidebar-btn-padding: 0.7rem;
	--sidebar-btn-font-size: 1rem;
	--sidebar-collapsed-width: calc(
		(var(--sidebar-padding) * 2) +
		(var(--sidebar-btn-border-width) * 2) +
		(var(--sidebar-btn-padding) * 2) +
		(var(--sidebar-btn-font-size) * var(--line-height))
	);

	/* ---- */
	/* Misc */
	/* ---- */

	--container-padding: 6vh 0;
	--padding: 2vh 0;
}