:root {
	/* --- semantic tokens --- */

	/* component-level tokens */
	--primary: var(--emerald-normal);
	--primary-hover: var(--emerald-normal-hover);
	--primary-active: var(--emerald-normal-active);
	--primary-active-semi-2: var(--emerald-normal-active-semi-2);

	--primary-dark: var(--emerald-dark);
	--primary-dark-hover: var(--emerald-dark);

	--primary-surface: var(--soft-white-light);
	--primary-surface-hover: var(--soft-white-light-hover);
	--primary-surface-active: var(--soft-white-light-active);

	--primary-text-color: var(--black);
	--primary-text-color-alt: var(--soft-white-light-active);
	--secondary-text-color: var(--gray);
	--secondary-text-color-alt: var(--gray-light);
	--tertiary-text-color: var(--gray-light-active);

	--accent-text-color: var(--emerald-normal);
	--dark-text-color: var(--emerald-dark);

	--disabled-surface-color: var(--gray-light);
	--disabled-text-color: var(--gray-light-active);

	--selected: var(--emerald-normal);

	--promotion-ink: var(--emerald-dark);
	--promotion-border: var(--emerald-light-active);
	--promotion-glow: var(--emerald-light);
	--promotion-accent: var(--emerald-accent);

	--coloured-surface: var(--emerald-light);
	--coloured-surface-border: var(--emerald-light-active);

	--shadow-primary: var(--emerald-dark-hover-semi-1);

	--input-borders: var(--emerald-light);

	--block-background-color: var(--reddish-white);

	--offer-toc-offset: 0px;
}