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: -apple-system, BlinkMacSystemFont, 'Inter', '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');

	/* // App-specific variables */
	--bg-primary: #ffffff;
	--bg-secondary: #f2f2f7;
	--bg-tertiary: #e5e5ea;
	--bg-hover: #e8e8ed;
	--text-primary: #000000;
	--text-secondary: #3c3c43;
	--text-tertiary: #8e8e93;
	--accent: #007aff;
	--accent-color: #007aff;
	--accent-blue: #007aff;
	--accent-green: #34c759;
	--accent-red: #ff3b30;
	--accent-orange: #ff9500;
	--accent-hover: #0056b3;
	--border: #c6c6c8;
	--border-color: #c6c6c8;
	--border-hover: #007aff;
	--shadow: rgba(0,0,0,0.1);
	--shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
	--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
	--shadow-lg: 0 10px 40px rgba(0,0,0,0.2);
	--transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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%;

	/* // App-specific variables for dark mode */
	--bg-primary: #000000;
	--bg-secondary: #1c1c1e;
	--bg-tertiary: #2c2c2e;
	--bg-hover: #3a3a3c;
	--text-primary: #ffffff;
	--text-secondary: #ebebf5;
	--text-tertiary: #8e8e93;
	--accent: #0a85ff;
	--accent-color: #0a85ff;
	--accent-blue: #0a85ff;
	--accent-green: #32d74b;
	--accent-red: #ff453a;
	--accent-orange: #ff9f0a;
	--accent-hover: #409cff;
	--border: #38383a;
	--border-color: #38383a;
	--border-hover: #0a85ff;
	--shadow: rgba(0,0,0,0.3);
	--shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
	--shadow-md: 0 4px 6px rgba(0,0,0,0.3);
	--shadow-lg: 0 10px 40px rgba(0,0,0,0.5);
	--transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}