body,
body[data-theme='light'] {
	/* // Primary */
	--system-color-primary: hsl(211, 100%, 50%);
	--system-color-primary-hsl: 211, 100%, 50%;
	--system-color-primary-contrast: hsl(240, 24%, 100%);
	--system-color-primary-contrast-hsl: 240, 24%, 100%;

	/* // Dark */
	--system-color-dark: hsl(240, 3%, 11%);
	--system-color-dark-hsl: 240, 3%, 11%;
	--system-color-dark-contrast: hsl(240, 24%, 100%);
	--system-color-dark-contrast-hsl: 240, 24%, 100%;

	/* // Light */
	--system-color-light: hsl(240, 24%, 100%);
	--system-color-light-hsl: 240, 24%, 100%;
	--system-color-light-contrast: hsl(0, 0%, 11%);
	--system-color-light-contrast-hsl: 0, 0%, 11%;

    --system-font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

	--system-focus-outline: 0 0 0 3px hsla(var(--system-color-primary-hsl), 0.5);

	--system-color-grey-50: #fafafa;
	--system-color-grey-50-hsl: 0, 0%, 98%;

	--system-color-grey-100: #f5f5f5;
	--system-color-grey-100-hsl: 0, 0%, 96%;

	--system-color-grey-200: #eeeeee;
	--system-color-grey-200-hsl: 0, 0%, 93%;

	--system-color-grey-300: #e0e0e0;
	--system-color-grey-300-hsl: 0, 0%, 88%;

	--system-color-grey-400: #bdbdbd;
	--system-color-grey-400-hsl: 0, 0%, 74%;

	--system-color-grey-500: #9e9e9e;
	--system-color-grey-500-hsl: 0, 0%, 62%;

	--system-color-grey-600: #757575;
	--system-color-grey-600-hsl: 0, 0%, 46%;

	--system-color-grey-700: #616161;
	--system-color-grey-700-hsl: 0, 0%, 38%;

	--system-color-grey-800: #424242;
	--system-color-grey-800-hsl: 0, 0%, 26%;

	--system-color-grey-900: #212121;
	--system-color-grey-900-hsl: 0, 0%, 13%;

	--system-color-grey-A100: #d5d5d5;
	--system-color-grey-A100-hsl: 0, 0%, 84%;

	--system-color-grey-A200: #aaa;
	--system-color-grey-A200-hsl: 0, 0%, 67%;

	--system-color-grey-A400: #303030;
	--system-color-grey-A400-hsl: 0, 0%, 19%;

	--system-color-grey-A700: #616161;
	--system-color-grey-A700-hsl: 0, 0%, 38%;

	/* // Cursors */
	--system-cursor-default: url('/cursors/normal-select.svg');
	--system-cursor-pointer: url('/cursors/link-select.svg');
	--system-cursor-text-select: url('/cursors/text-select.svg');
	--system-cursor-help-select: url('/cursors/help-select.svg');

	/* // the following two cursors are animated, but will be rendered as a static
  // image by the browser */
	--system-cursor-busy: url('/cursors/busy.webp');
	--system-cursor-working-in-bg: url('/cursors/working-in-background.webp');
}

body.dark {
	/* // Primary */
	--system-color-primary: #0a85ff;
	--system-color-primary-hsl: 210, 100%, 52%;
	--system-color-primary-contrast: hsl(210, 92%, 5%);
	--system-color-primary-contrast-hsl: 210, 92%, 5%;

	/* // Dark */
	--system-color-dark: hsl(240, 24%, 100%);
	--system-color-dark-hsl: 240, 24%, 100%;
	--system-color-dark-contrast: hsl(0, 0%, 11%);
	--system-color-dark-contrast-hsl: 0, 0%, 11%;

	/* // Light */
	--system-color-light: hsl(240, 3%, 11%);
	--system-color-light-hsl: 240, 3%, 11%;
	--system-color-light-contrast: hsl(240, 24%, 100%);
	--system-color-light-contrast-hsl: 240, 24%, 100%;
}