@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans");

/* IBM Carbon Colour Palette */
:root {
	--black: #000000;
	--black-hover: #212121;

	/* white */
	--white: #ffffff;
	--white-hover: #e8e8e8;

	/* yellow */
	--yellow-10: #fcf4d6;
	--yellow-20: #fddc69;
	--yellow-30: #f1c21b;
	--yellow-40: #d2a106;
	--yellow-50: #b28600;
	--yellow-60: #8e6a00;
	--yellow-70: #684e00;
	--yellow-80: #483700;
	--yellow-90: #302400;
	--yellow-100: #1c1500;

	/* orange */
	--orange-10: #fff2e8;
	--orange-20: #ffd9be;
	--orange-30: #ffb784;
	--orange-40: #ff832b;
	--orange-50: #eb6200;
	--orange-60: #ba4e00;
	--orange-70: #8a3800;
	--orange-80: #5e2900;
	--orange-90: #3e1a00;
	--orange-100: #231000;

	/* red */
	--red-10: #fff1f1;
	--red-20: #ffd7d9;
	--red-30: #ffb3b8;
	--red-40: #ff8389;
	--red-50: #fa4d56;
	--red-60: #da1e28;
	--red-70: #a2191f;
	--red-80: #750e13;
	--red-90: #520408;
	--red-100: #2d0709;

	/* magenta */
	--magenta-10: #fff0f7;
	--magenta-20: #ffd6e8;
	--magenta-30: #ffafd2;
	--magenta-40: #ff7eb6;
	--magenta-50: #ee5396;
	--magenta-60: #d02670;
	--magenta-70: #9f1853;
	--magenta-80: #740937;
	--magenta-90: #510224;
	--magenta-100: #2a0a18;

	/* purple */
	--purple-10: #f6f2ff;
	--purple-20: #e8daff;
	--purple-30: #d4bbff;
	--purple-40: #be95ff;
	--purple-50: #a56eff;
	--purple-60: #8a3ffc;
	--purple-70: #6929c4;
	--purple-80: #491d8b;
	--purple-90: #31135e;
	--purple-100: #1c0f30;

	/* blue */
	--blue-10: #edf5ff;
	--blue-20: #d0e2ff;
	--blue-30: #a6c8ff;
	--blue-40: #78a9ff;
	--blue-50: #4589ff;
	--blue-60: #0f62fe;
	--blue-70: #0043ce;
	--blue-80: #002d9c;
	--blue-90: #001d6c;
	--blue-100: #001141;

	/* cyan */
	--cyan-10: #e5f6ff;
	--cyan-20: #bae6ff;
	--cyan-30: #82cfff;
	--cyan-40: #33b1ff;
	--cyan-50: #1192e8;
	--cyan-60: #0072c3;
	--cyan-70: #00539a;
	--cyan-80: #003a6d;
	--cyan-90: #012749;
	--cyan-100: #061727;

	/* teal */
	--teal-10: #d9fbfb;
	--teal-20: #9ef0f0;
	--teal-30: #3ddbd9;
	--teal-40: #08bdba;
	--teal-50: #009d9a;
	--teal-60: #007d79;
	--teal-70: #005d5d;
	--teal-80: #004144;
	--teal-90: #022b30;
	--teal-100: #081a1c;

	/* green */
	--green-10: #defbe6;
	--green-20: #a7f0ba;
	--green-30: #6fdc8c;
	--green-40: #42be65;
	--green-50: #24a148;
	--green-60: #198038;
	--green-70: #0e6027;
	--green-80: #044317;
	--green-90: #022d0d;
	--green-100: #071908;

	/* cool-gray */
	--cool-gray-10: #f2f4f8;
	--cool-gray-20: #dde1e6;
	--cool-gray-30: #c1c7cd;
	--cool-gray-40: #a2a9b0;
	--cool-gray-50: #878d96;
	--cool-gray-60: #697077;
	--cool-gray-70: #4d5358;
	--cool-gray-80: #343a3f;
	--cool-gray-90: #21272a;
	--cool-gray-100: #121619;

	/* gray */
	--gray-10: #f4f4f4;
	--gray-10-rgb: 244 244 244;
	--gray-20: #e0e0e0;
	--gray-30: #c6c6c6;
	--gray-40: #a8a8a8;
	--gray-50: #8d8d8d;
	--gray-50-rgb: 141 141 141;
	--gray-60: #6f6f6f;
	--gray-70: #525252;
	--gray-80: #393939;
	--gray-90: #262626;
	--gray-100: #161616;
	--gray-100-rgb: 22 22 22;

	/* warm-gray */
	--warm-gray-10: #f7f3f2;
	--warm-gray-20: #e5e0df;
	--warm-gray-30: #cac5c4;
	--warm-gray-40: #ada8a8;
	--warm-gray-50: #8f8b8b;
	--warm-gray-60: #726e6e;
	--warm-gray-70: #565151;
	--warm-gray-80: #3c3838;
	--warm-gray-90: #272525;
	--warm-gray-100: #171414;

	/* IBM Carbon Hover Colour Palette */

	/* yellow-hover */
	--yellow-10-hover: #f8e6a0;
	--yellow-20-hover: #fccd27;
	--yellow-30-hover: #ddb00e;
	--yellow-40-hover: #bc9005;
	--yellow-50-hover: #9e7700;
	--yellow-60-hover: #755800;
	--yellow-70-hover: #806000;
	--yellow-80-hover: #5c4600;
	--yellow-90-hover: #3d2e00;
	--yellow-100-hover: #332600;

	/* orange-hover */
	--orange-10-hover: #ffe2cc;
	--orange-20-hover: #ffc69e;
	--orange-30-hover: #ff9d57;
	--orange-40-hover: #fa6800;
	--orange-50-hover: #cc5500;
	--orange-60-hover: #9e4200;
	--orange-70-hover: #a84400;
	--orange-80-hover: #753300;
	--orange-90-hover: #522200;
	--orange-100-hover: #421e00;

	/* red-hover */
	--red-100-hover: #540d11;
	--red-90-hover: #66050a;
	--red-80-hover: #921118;
	--red-70-hover: #c21e25;
	--red-60-hover: #b81922;
	--red-50-hover: #ee0713;
	--red-40-hover: #ff6168;
	--red-30-hover: #ff99a0;
	--red-20-hover: #ffc2c5;
	--red-10-hover: #ffe0e0;

	/* magenta-hover */
	--magenta-100-hover: #53142f;
	--magenta-90-hover: #68032e;
	--magenta-80-hover: #8e0b43;
	--magenta-70-hover: #bf1d63;
	--magenta-60-hover: #b0215f;
	--magenta-50-hover: #e3176f;
	--magenta-40-hover: #ff57a0;
	--magenta-30-hover: #ff94c3;
	--magenta-20-hover: #ffbdda;
	--magenta-10-hover: #ffe0ef;

	/* purple-hover */
	--purple-100-hover: #341c59;
	--purple-90-hover: #40197b;
	--purple-80-hover: #5b24ad;
	--purple-70-hover: #7c3dd6;
	--purple-60-hover: #7822fb;
	--purple-50-hover: #9352ff;
	--purple-40-hover: #ae7aff;
	--purple-30-hover: #c5a3ff;
	--purple-20-hover: #dcc7ff;
	--purple-10-hover: #ede5ff;

	/* blue-hover */
	--blue-100-hover: #001f75;
	--blue-90-hover: #00258a;
	--blue-80-hover: #0039c7;
	--blue-70-hover: #0053ff;
	--blue-60-hover: #0050e6;
	--blue-50-hover: #1f70ff;
	--blue-40-hover: #5c97ff;
	--blue-30-hover: #8ab6ff;
	--blue-20-hover: #b8d3ff;
	--blue-10-hover: #dbebff;

	/* cyan-hover */
	--cyan-10-hover: #cceeff;
	--cyan-20-hover: #99daff;
	--cyan-30-hover: #57beff;
	--cyan-40-hover: #059fff;
	--cyan-50-hover: #0f7ec8;
	--cyan-60-hover: #005fa3;
	--cyan-70-hover: #0066bd;
	--cyan-80-hover: #00498a;
	--cyan-90-hover: #013360;
	--cyan-100-hover: #0b2947;

	/* teal-hover */
	--teal-10-hover: #acf6f6;
	--teal-20-hover: #57e5e5;
	--teal-30-hover: #25cac8;
	--teal-40-hover: #07aba9;
	--teal-50-hover: #008a87;
	--teal-60-hover: #006b68;
	--teal-70-hover: #007070;
	--teal-80-hover: #005357;
	--teal-90-hover: #033940;
	--teal-100-hover: #0f3034;

	/* green-hover */
	--green-10-hover: #b6f6c8;
	--green-20-hover: #74e792;
	--green-30-hover: #36ce5e;
	--green-40-hover: #3bab5a;
	--green-50-hover: #208e3f;
	--green-60-hover: #166f31;
	--green-70-hover: #11742f;
	--green-80-hover: #05521c;
	--green-90-hover: #033b11;
	--green-100-hover: #0d300f;

	/* cool-gray-hover */
	--cool-gray-10-hover: #e4e9f1;
	--cool-gray-20-hover: #cdd3da;
	--cool-gray-30-hover: #adb5bd;
	--cool-gray-40-hover: #9199a1;
	--cool-gray-50-hover: #757b85;
	--cool-gray-60-hover: #585e64;
	--cool-gray-70-hover: #5d646a;
	--cool-gray-80-hover: #434a51;
	--cool-gray-90-hover: #2b3236;
	--cool-gray-100-hover: #222a2f;

	/* gray-hover */
	--gray-10-hover: #e8e8e8;
	--gray-20-hover: #d1d1d1;
	--gray-30-hover: #b5b5b5;
	--gray-40-hover: #999999;
	--gray-50-hover: #7a7a7a;
	--gray-60-hover: #5e5e5e;
	--gray-70-hover: #636363;
	--gray-80-hover: #474747;
	--gray-90-hover: #333333;
	--gray-100-hover: #292929;

	/* warm-gray-hover */
	--warm-gray-10-hover: #f0e8e6;
	--warm-gray-20-hover: #d8d0cf;
	--warm-gray-30-hover: #b9b3b1;
	--warm-gray-40-hover: #9c9696;
	--warm-gray-50-hover: #7f7b7b;
	--warm-gray-60-hover: #605d5d;
	--warm-gray-70-hover: #696363;
	--warm-gray-80-hover: #4c4848;
	--warm-gray-90-hover: #343232;
	--warm-gray-100-hover: #2c2626;

	/* primary */
	--primary-10: var(--cyan-10);
	--primary-20: var(--cyan-20);
	--primary-30: var(--cyan-30);
	--primary-40: var(--cyan-40);
	--primary-50: var(--cyan-50);
	--primary-60: var(--cyan-60);
	--primary-70: var(--cyan-70);
	--primary-80: var(--cyan-80);
	--primary-90: var(--cyan-90);
	--primary-100: var(--cyan-100);

	/* primary-hover */
	--primary-10-hover: var(--cyan-10-hover);
	--primary-20-hover: var(--cyan-20-hover);
	--primary-30-hover: var(--cyan-30-hover);
	--primary-40-hover: var(--cyan-40-hover);
	--primary-50-hover: var(--cyan-50-hover);
	--primary-60-hover: var(--cyan-60-hover);
	--primary-70-hover: var(--cyan-70-hover);
	--primary-80-hover: var(--cyan-80-hover);
	--primary-90-hover: var(--cyan-90-hover);
	--primary-100-hover: var(--cyan-100-hover);

	/* Status colours */
	--status-online: #0f62fe;
	--status-offline: #c6c6c6;
	--status-ok: #24a148;
	--status-caution: #ff832b;
	--status-warning: #da1e28;
	--status-alert: #FF1744;

	/* IBM Carbon Spacing */
	--spacing-01: 0.125rem;
	--spacing-02: 0.25rem;
	--spacing-03: 0.5rem;
	--spacing-04: 0.75rem;
	--spacing-05: 1rem;
	--spacing-06: 1.5rem;
	--spacing-07: 2rem;
	--spacing-08: 2.5rem;
	--spacing-09: 3rem;
	--spacing-10: 4rem;
	--spacing-11: 5rem;
	--spacing-12: 6rem;
	--spacing-13: 10rem;

	/* IBM Carbon Typography */
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-semi-bold: 600;

	/* IBM Carbon Utility styles */
	--label-01: var(--font-weight-regular) 0.75rem/1rem var(--font);
	--label-01-letter-spacing: 0.32px;
	--label-02: var(--font-weight-regular) 0.875rem/1.125rem var(--font);
	--label-02-letter-spacing: 0.16px;
	--helper-text-01: var(--font-weight-regular) 0.75rem/1rem var(--font);
	--helper-text-01-letter-spacing: 0.32px;
	--helper-text-02: var(--font-weight-regular) 0.875rem/1.125rem var(--font);
	--helper-text-02-letter-spacing: 0.16px;
	--legal-01: var(--font-weight-regular) 0.75rem/1rem var(--font);
	--legal-01-letter-spacing: 0.32px;
	--legal-02: var(--font-weight-regular) 0.875rem/1.125rem var(--font);
	--legal-02-letter-spacing: 0.16px;

	/* IBM Carbon Body styles */
	--body-compact-01: var(--font-weight-regular) 0.875rem/1.125rem var(--font);
	--body-compact-01-letter-spacing: 0.16px;
	--body-compact-02: var(--font-weight-regular) 1rem/1.375rem var(--font);
	--body-compact-02-letter-spacing: 0px;
	--body-01: var(--font-weight-regular) 0.875rem/1.25rem var(--font);
	--body-01-letter-spacing: 0.16px;
	--body-02: var(--font-weight-regular) 1rem/1.5rem var(--font);
	--body-02-letter-spacing: 0px;

	/* IBM Carbon Fixed heading styles */
	--heading-compact-01: var(--font-weight-semi-bold) 0.875rem/1.125rem var(--font);
	--heading-compact-01-letter-spacing: 0.16px;
	--heading-compact-02: var(--font-weight-semi-bold) 1rem/1.375rem var(--font);
	--heading-compact-02-letter-spacing: 0px;
	--heading-01: var(--font-weight-semi-bold) 0.875rem/1.25rem var(--font);
	--heading-01-letter-spacing: 0.16px;
	--heading-02: var(--font-weight-semi-bold) 1rem/1.5rem var(--font);
	--heading-02-letter-spacing: 0px;
	--heading-03: var(--font-weight-regular) 1.25rem/1.75rem var(--font);
	--heading-03-letter-spacing: 0px;
	--heading-04: var(--font-weight-regular) 1.75rem/2.25rem var(--font);
	--heading-04-letter-spacing: 0px;
	--heading-05: var(--font-weight-regular) 2rem/2.5rem var(--font);
	--heading-05-letter-spacing: 0px;
	--heading-06: var(--font-weight-light) 2.625rem/3.125rem var(--font);
	--heading-06-letter-spacing: 0px;
	--heading-07: var(--font-weight-light) 3.375rem/4rem var(--font);
	--heading-07-letter-spacing: 0px;

	/* IBM Carbon Fluid heading styles */
	--fluid-heading-03: var(--font-weight-regular) 1.25rem/1.75rem var(--font);
	--fluid-heading-03-letter-spacing: 0px;
	--fluid-heading-04: var(--font-weight-regular) 1.75rem/2.25rem var(--font);
	--fluid-heading-04-letter-spacing: 0px;
	--fluid-heading-05: var(--font-weight-regular) 2rem/2.5rem var(--font);
	--fluid-heading-05-letter-spacing: 0px;
	--fluid-heading-06: var(--font-weight-semi-bold) 2rem/2.5rem var(--font);
	--fluid-heading-06-letter-spacing: 0px;

	/* IBM Carbon Fluid display styles */
	--fluid-paragraph-01: var(--font-weight-light) 1.5rem/1.875rem var(--font);
	--fluid-paragraph-01-letter-spacing: 0px;
	--fluid-quotation-01: var(--font-weight-regular) 1.25rem/1.625rem var(--font);
	--fluid-quotation-01-letter-spacing: 0px;
	--fluid-quotation-02: var(--font-weight-light) 2rem/2.5rem var(--font);
	--fluid-quotation-02-letter-spacing: 0px;
	--fluid-display-01: var(--font-weight-light) 2.625rem/3.125rem var(--font);
	--fluid-display-01-letter-spacing: 0px;
	--fluid-display-02: var(--font-weight-semi-bold) 2.625rem/3.125rem var(--font);
	--fluid-display-02-letter-spacing: 0px;
	--fluid-display-03: var(--font-weight-light) 2.625rem/3.125rem var(--font);
	--fluid-display-03-letter-spacing: 0px;
	--fluid-display-04: var(--font-weight-light) 2.625rem/3.125rem var(--font);
	--fluid-display-04-letter-spacing: 0px;

	/* IBM Carbon Layout */
	--layout-size-height-min: 0px;
	--layout-size-height-max: 999999999px;
	--layout-size-height-xs: 1.5rem;
	--layout-size-height-sm: 2rem;
	--layout-size-height-md: 2.5rem;
	--layout-size-height-lg: 3rem;
	--layout-size-height-xl: 4rem;
	--layout-size-height-2xl: 5rem;
	--layout-density-padding-inline-condensed: 0.5rem;
	--layout-density-padding-inline-normal: 1rem;
	--layout-density-padding-inline-min: 0px;
	--layout-density-padding-inline-max: 999999999px;

	/* Z-indexes */
	--z-index-01: 100;
	--z-index-02: 200;
	--z-index-03: 300;

	/* Layout specific z-indexes */
	--gray-overlay-z-index: 2;
	--page-header-z-index: 3;
	--ui-shell-left-panel-z-index: 4;
	--navbar-base-z-index: var(--z-index-02);

	/* Z-index aliases */

	/* 
	   The below 3 all operate at the same z-index, inside the overlay portal.
	   They are separated out for clarity.
	   The popup z-index is used for popup menus, such as the dropdown & overflow menu.
	   The modal z-index is used for modals.
	   The tooltip z-index is used for tooltips.
	   The overlay z-index is used for general overlaying elements that need to be above the page content.
	 */
	--popup-z-index: var(--z-index-01);
	--tooltip-z-index: var(--z-index-01);
	--overlay-z-index: var(--z-index-01);
	--background-z-index: var(--z-index-02);
	--modal-z-index: var(--z-index-03);
	--modal-popup-z-index: var(--z-index-03);
	--modal-tooltip-z-index: var(--z-index-03);
	--navbar-dropdown-z-index: var(--z-index-03);

	/* Layout misc */
	--theme-main-border-size: 1px;
	--nav-header-height: 48px;
	--nav-header-bottom-border: var(--theme-main-border-size);

	/* subtract as nav has box-sizing: border-box */
	--nav-header-full-height: calc(var(--nav-header-height) - var(--nav-header-bottom-border));
	--left-panel-width: 16rem;
	--left-panel-collapsed-width: 3rem;

	/* Swatches */

	/* navyBlue */
	--navy-blue: #1c1842;
	--navy-blue-80: #494668;
	--navy-blue-60: #77748e;
	--navy-blue-40: #a4a2b3;
	--navy-blue-20: #d2d1d9;
	--navy-blue-10: #e8e8ec;

	/* indigo */
	--indigo: #3c3482;
	--indigo-80: #635d9b;
	--indigo-60: #8a85b4;
	--indigo-40: #b1aecd;
	--indigo-20: #d8d6e6;
	--indigo-10: #ecebf3;

	/* light blue */
	--light-blue: #69c7f9;
	--light-blue-80: #87d2fa;
	--light-blue-60: #a5ddfb;
	--light-blue-40: #c3e9fd;
	--light-blue-20: #e1f4fe;
	--light-blue-10: #f0f9fe;

	/* lilac */
	--lilac: #becffb;
	--lilac-80: #cbd9fc;
	--lilac-60: #d8e2fd;
	--lilac-40: #e5ecfd;
	--lilac-20: #f2f5fe;
	--lilac-10: #f9faff;

	/* greyscale */
	--greyscale: #393939;
	--greyscale-80: #606060;
	--greyscale-60: #888888;
	--greyscale-40: #b5b5b5;
	--greyscale-20: #d7d7d7;
	--greyscale-10: #ececec;

	/* Typography */
	--font: "IBM Plex Sans", sans-serif;
	--letter-spacing: 0.01em;
}

/* IBM Carbon Grid Breakpoints - https://carbondesignsystem.com/guidelines/2x-grid/overview/#breakpoints */
.fluidGrid {
	--grid-gutter: 2rem;
	--grid-columns: 16;
	--root-grid-columns: 16;
	--grid-margin: 1.5rem;
	--grid-gutter-start: calc(var(--grid-gutter) / 2);
	--grid-gutter-end: calc(var(--grid-gutter) / 2);
}

@container (max-width: 1312px) {
	.fluidGrid {
		--grid-columns: 16;
		--root-grid-columns: 16;
		--grid-margin: 1rem;
	}
}

@container (max-width: 1056px) {
	.fluidGrid {
		--grid-columns: 8;
		--root-grid-columns: 8;
		--grid-margin: 1rem;
	}
}

@container (max-width: 672px) {
	.fluidGrid {
		--grid-columns: 4;
		--root-grid-columns: 4;
		--grid-margin: 0;
	}
}

/* IBM Carbon breakpoints */
@media (min-width: 320px) {
	:root {
		/* IBM Carbon Fluid heading styles */
		--fluid-heading-05: var(--font-weight-light) 2.25rem/2.75rem var(--font);
		--fluid-heading-06: var(--font-weight-semi-bold) 2.25rem/2.75rem var(--font);

		/* IBM Carbon Fluid display styles */
		--fluid-quotation-02: var(--font-weight-light) 2.25rem/2.75rem var(--font);
		--fluid-display-03: var(--font-weight-light) 3.375rem/4rem var(--font);
		--fluid-display-04: var(--font-weight-light) 4.25rem/4.875rem var(--font);
	}
}

@media (min-width: 672px) {
	:root {
		/* IBM Carbon Fluid heading styles */
		--fluid-heading-05: var(--font-weight-light) 2.625rem/3.125rem var(--font);
		--fluid-heading-06: var(--font-weight-semi-bold) 2.625rem/3.125rem var(--font);

		/* IBM Carbon Fluid display styles */
		--fluid-paragraph-01: var(--font-weight-light) 1.75rem/2.25rem var(--font);
		--fluid-quotation-01: var(--font-weight-regular) 1.5rem/1.875rem var(--font);
		--fluid-quotation-02: var(--font-weight-light) 2.625rem/3.125rem var(--font);
		--fluid-display-01: var(--font-weight-light) 3.375rem/4rem var(--font);
		--fluid-display-02: var(--font-weight-semi-bold) 3.375rem/4rem var(--font);
		--fluid-display-03: var(--font-weight-light) 3.75rem/4.375rem var(--font);
		--fluid-display-03-letter-spacing: -0.64px;
		--fluid-display-04: var(--font-weight-light) 5.75rem/6.375rem var(--font);
		--fluid-display-04-letter-spacing: -0.64px;
	}
}

@media (min-width: 1056px) {
	:root {
		/* IBM Carbon Fluid heading styles */
		--fluid-heading-04: var(--font-weight-regular) 2rem/2.5rem var(--font);
		--fluid-heading-05: var(--font-weight-light) 3rem/3.5rem var(--font);
		--fluid-heading-06: var(--font-weight-semi-bold) 3rem/3.5rem var(--font);

		/* IBM Carbon Fluid display styles */
		--fluid-quotation-01: var(--font-weight-light) 1.75rem/2.25rem var(--font);
		--fluid-quotation-02: var(--font-weight-light) 3rem/3.5rem var(--font);
		--fluid-display-01: var(--font-weight-light) 3.75rem/4.375rem var(--font);
		--fluid-display-02: var(--font-weight-semi-bold) 3.75rem/4.375rem var(--font);
		--fluid-display-03: var(--font-weight-light) 4.75rem/5.375rem var(--font);
		--fluid-display-04: var(--font-weight-light) 7.625rem/8.125rem var(--font);
	}
}

@media (min-width: 1312px) {
	:root {
		/* IBM Carbon Fluid heading styles */
		--fluid-heading-03: var(--font-weight-regular) 1.5rem/1.75rem var(--font);
		--fluid-heading-05: var(--font-weight-light) 3.75rem/4.375rem var(--font);
		--fluid-heading-06: var(--font-weight-semi-bold) 3.75rem/4.375rem var(--font);

		/* IBM Carbon Fluid display styles */
		--fluid-paragraph-01: var(--font-weight-light) 2rem/2.5rem var(--font);
		--fluid-quotation-01: var(--font-weight-light) 2rem/2.5rem var(--font);
		--fluid-quotation-02: var(--font-weight-light) 3.75rem/4.375rem var(--font);
		--fluid-display-01: var(--font-weight-light) 4.75rem/5.375rem var(--font);
		--fluid-display-02: var(--font-weight-semi-bold) 4.75rem/5.375rem var(--font);
		--fluid-display-03: var(--font-weight-light) 5.25rem/5.875rem var(--font);
		--fluid-display-03-letter-spacing: -0.96px;
		--fluid-display-04: var(--font-weight-light) 9.75rem/10.25rem var(--font);
		--fluid-display-04-letter-spacing: -0.96px;
	}
}

.light {
	/* IBM Carbon Background */
	--background: var(--white);
	--background-hover: rgb(var(--gray-50-rgb) / 0.12);
	--background-active: rgb(var(--gray-50-rgb) / 0.5);
	--background-selected: rgb(var(--gray-50-rgb) / 0.2);
	--background-selected-hover: rgb(var(--gray-50-rgb) / 0.32);
	--background-inverse: var(--gray-80);
	--background-inverse-hover: var(--gray-80-hover);
	--background-brand: var(--primary-60);

	/* IBM Carbon Layer */
	--layer-01: var(--gray-10);
	--layer-02: var(--white);
	--layer-03: var(--gray-10);
	--layer-hover-01: var(--gray-10-hover);
	--layer-hover-02: var(--gray-10-hover);
	--layer-hover-03: var(--gray-10-hover);
	--layer-active-01: var(--gray-30);
	--layer-active-02: var(--gray-30);
	--layer-active-03: var(--gray-30);
	--layer-selected-01: var(--gray-20);
	--layer-selected-02: var(--gray-20);
	--layer-selected-03: var(--gray-20);
	--layer-selected-hover-01: var(--gray-20-hover);
	--layer-selected-hover-02: var(--gray-20-hover);
	--layer-selected-hover-03: var(--gray-20-hover);
	--layer-selected-inverse: var(--gray-100);
	--layer-selected-disabled: var(--gray-50);

	/* IBM Carbon Layer accent */
	--layer-accent-01: var(--gray-20);
	--layer-accent-02: var(--gray-20);
	--layer-accent-03: var(--gray-20);
	--layer-accent-hover-01: var(--gray-20-hover);
	--layer-accent-hover-02: var(--gray-20-hover);
	--layer-accent-hover-03: var(--gray-20-hover);
	--layer-accent-active-01: var(--gray-40);
	--layer-accent-active-02: var(--gray-40);
	--layer-accent-active-03: var(--gray-40);

	/* IBM Carbon Field */
	--field-01: var(--gray-10);
	--field-02: var(--white);
	--field-03: var(--gray-10);
	--field-hover-01: var(--gray-10-hover);
	--field-hover-02: var(--gray-10-hover);
	--field-hover-03: var(--gray-10-hover);

	/* IBM Carbon Border */
	--border-interactive: var(--primary-60);
	--border-subtle-00: var(--gray-20);
	--border-subtle-01: var(--gray-30);
	--border-subtle-02: var(--gray-20);
	--border-subtle-03: var(--gray-30);
	--border-subtle-selected-01: var(--gray-30);
	--border-subtle-selected-02: var(--gray-30);
	--border-subtle-selected-03: var(--gray-30);
	--border-strong-01: var(--gray-50);
	--border-strong-02: var(--gray-50);
	--border-strong-03: var(--gray-50);
	--border-title-01: var(--gray-30);
	--border-title-02: var(--gray-40);
	--border-title-03: var(--gray-30);
	--border-inverse: var(--gray-100);
	--border-disabled: var(--gray-30);

	/* IBM Carbon Text */
	--text-primary: var(--gray-100);
	--text-secondary: var(--gray-70);
	--text-placeholder: var(--gray-40);
	--text-on-color: var(--white);
	--text-on-color-disabled: var(--gray-50);
	--text-helper: var(--gray-60);
	--text-error: var(--red-60);
	--text-inverse: var(--white);
	--text-disabled: rgb(var(--gray-100-rgb) / 0.25);

	/* IBM Carbon Link */
	--link-primary: var(--primary-60);
	--link-primary-hover: var(--primary-70);
	--link-secondary: var(--primary-70);
	--link-inverse: var(--primary-40);
	--link-visited: var(--purple-60);
	--link-inverse-active: var(--gray-100);
	--link-inverse-hover: var(--primary-70);

	/* IBM Carbon Icon */
	--icon-primary: var(--gray-100);
	--icon-secondary: var(--gray-70);
	--icon-on-color: var(--white);
	--icon-on-color-disabled: var(--gray-50);
	--icon-interactive: var(--primary-60);
	--icon-inverse: var(--white);
	--icon-disabled: rgb(var(--gray-100-rgb) / 0.25);

	/* IBM Carbon Button */
	--button-primary: var(--primary-60);
	--button-primary-hover: var(--primary-60-hover);
	--button-primary-active: var(--primary-80);
	--button-secondary: var(--gray-80);
	--button-secondary-hover: var(--gray-80-hover);
	--button-secondary-active: var(--gray-60);
	--button-tertiary: var(--primary-60);
	--button-tertiary-hover: var(--primary-60-hover);
	--button-tertiary-active: var(--primary-80);
	--button-danger-primary: var(--red-60);
	--button-danger-secondary: var(--red-60);
	--button-danger-hover: var(--red-60-hover);
	--button-danger-active: var(--red-80);
	--button-separator: var(--gray-20);
	--button-disabled: var(--gray-30);

	/* IBM Carbon Tag */
	--tag-background-red: var(--red-20);
	--tag-color-red: var(--red-70);
	--tag-hover-red: var(--red-20-hover);

	--tag-background-magenta: var(--magenta-20);
	--tag-color-magenta: var(--magenta-70);
	--tag-hover-magenta: var(--magenta-20-hover);

	--tag-background-purple: var(--purple-20);
	--tag-color-purple: var(--purple-70);
	--tag-hover-purple: var(--purple-20-hover);

	--tag-background-blue: var(--blue-20);
	--tag-color-blue: var(--blue-70);
	--tag-hover-blue: var(--blue-20-hover);

	--tag-background-cyan: var(--cyan-20);
	--tag-color-cyan: var(--cyan-70);
	--tag-hover-cyan: var(--cyan-20-hover);

	--tag-background-teal: var(--teal-20);
	--tag-color-teal: var(--teal-70);
	--tag-hover-teal: var(--teal-20-hover);

	--tag-background-green: var(--green-20);
	--tag-color-green: var(--green-70);
	--tag-hover-green: var(--green-20-hover);

	--tag-background-gray: var(--gray-20);
	--tag-color-gray: var(--gray-70);
	--tag-hover-gray: var(--gray-20-hover);

	--tag-background-cool-gray: var(--cool-gray-20);
	--tag-color-cool-gray: var(--cool-gray-70);
	--tag-hover-cool-gray: var(--cool-gray-20-hover);

	--tag-background-warm-gray: var(--warm-gray-20);
	--tag-color-warm-gray: var(--warm-gray-70);
	--tag-hover-warm-gray: var(--warm-gray-20-hover);

	/* IBM Categorical Palette (charting) */
	--category-01: var(--purple-70);
	--category-02: var(--cyan-50);
	--category-03: var(--teal-70);
	--category-04: var(--magenta-70);
	--category-05: var(--red-50);
	--category-06: var(--red-90);
	--category-07: var(--green-60);
	--category-08: var(--blue-80);
	--category-09: var(--magenta-50);
	--category-10: var(--yellow-50);
	--category-11: var(--teal-50);
	--category-12: var(--cyan-90);
	--category-13: var(--orange-70);
	--category-14: var(--purple-50);

	/* IBM Carbon Support */
	--support-error: var(--red-60);
	--support-success: var(--green-50);
	--support-warning: var(--yellow-30);
	--support-caution: var(--orange-40);
	--support-info: var(--blue-70);
	--support-error-inverse: var(--red-50);
	--support-success-inverse: var(--green-40);
	--support-warning-inverse: var(--yellow-30);
	--support-caution-inverse: var(--orange-50);
	--support-info-inverse: var(--blue-50);

	/* IBM Carbon Focus */
	--focus: var(--primary-60);
	--focus-inset: var(--white);
	--focus-inverse: var(--white);

	/* IBM Carbon Misc */
	--interactive: var(--primary-60);
	--highlight: var(--primary-20);
	--toggle-off: var(--gray-50);
	--shadow: rgb(0 0 0 / 0.2);
	--overlay: rgb(var(--gray-100-rgb) / 0.5);
	--skeleton-element: var(--gray-30);
	--skeleton-background: var(--gray-10-hover);

	/* theme vars */
	--theme-main: var(--navy-blue);
	--theme-main80: var(--navy-blue-80);
	--theme-main60: var(--navy-blue-60);
	--theme-main40: var(--navy-blue-40);
	--theme-main20: var(--navy-blue-20);
	--theme-main10: var(--navy-blue-10);
	--theme-main-background: var(--white);
	--theme-main-border-light: var(--theme-main-border-size) solid var(--navy-blue-10);
	--theme-main-border-dark: var(--theme-main-border-size) solid var(--navy-blue);
	--theme-main-changed: var(--light-blue-20);
	--theme-main-disabled: var(--greyscale-80);
	--theme-main-fontsize-smaller: 0.7rem;
	--theme-main-fontsize: 0.9rem;
	--theme-main-fontsize-larger: 1.1rem;
	--theme-main-fontweight: normal;
	--theme-main-hover: var(--light-blue-40);
	--theme-main-radius: 4px;
	--theme-main-selected: var(--light-blue-20);
	--theme-main-selected-fontweight: normal;

	/* Sub page navigation specific theme variables */
	--theme-subnav-background: var(--light-blue-10);
	--theme-subnav-hover: var(--light-blue-40);
	--theme-subnav-selected: var(--white);

	/* Table specific theme variables */
	--theme-table-lineheight: 1.5;
	--theme-table-fontsize: 0.95rem;

	/* Home page specific theme variables */
	--theme-home: var(--navy-blue);
	--theme-home-inverse: var(--white);
	--theme-home-offset: var(--light-blue);
	--theme-home-h1: var(--white);
	--theme-home-h2: var(--white);
	--theme-home-h1-dark: var(--black);
	--theme-home-h2-dark: var(--black);
	--theme-home-radius: 3px;

	/* Accent colours */
	--theme-accent: var(--indigo);

	/* Button variables */
	--theme-button-submit: var(--white);
	--theme-button-submit-background: var(--navy-blue);
	--theme-button-submit-border: 1px solid var(--navy-blue);
	--theme-button-reset: var(--navy-blue);
	--theme-button-reset-background: var(--white);
	--theme-button-reset-border: 1px solid var(--navy-blue);

	--brand-background: none;
	--brand-full-logo: transparent url("/Content/branding/aeroqual-logo.svg");

	/* Notification variables */
	--notification-error-background-color: var(--red-10);
	--notification-success-background-color: var(--green-10);
	--notification-info-background-color: var(--primary-10);
	--notification-warning-background-color: var(--yellow-10);

	/* Base Layer */

	/* layer values */
	--layer: var(--layer-01);
	--layer-hover: var(--layer-hover-01);
	--layer-active: var(--layer-active-01);
	--layer-selected: var(--layer-selected-01);
	--layer-selected-hover: var(--layer-selected-hover-01);
	--layer-accent: var(--layer-accent-01);
	--layer-accent-hover: var(--layer-accent-hover-01);
	--layer-accent-active: var(--layer-accent-active-01);

	/* Field layer values */
	--field: var(--field-01);

	/* Border layer values */
	--border-subtle: var(--border-subtle-00);
	--border-subtle-selected: var(--border-subtle-selected-01);
	--border-strong: var(--border-strong-01);
	--border-title: var(--border-title-01);
	
	/* Side panel */
	--side-panel-background: var(--gray-10-hover);
}

/* One layer deep */
.light .layer {
	/* layer values */
	--layer: var(--layer-02);
	--layer-hover: var(--layer-hover-02);
	--layer-active: var(--layer-active-02);
	--layer-selected: var(--layer-selected-02);
	--layer-selected-hover: var(--layer-selected-hover-02);
	--layer-accent: var(--layer-accent-02);
	--layer-accent-hover: var(--layer-accent-hover-02);
	--layer-accent-active: var(--layer-accent-active-02);

	/* Field layer values */
	--field: var(--field-02);

	/* Border layer values */
	--border-subtle: var(--border-subtle-01);
	--border-subtle-selected: var(--border-subtle-selected-02);
	--border-strong: var(--border-strong-02);
	--border-title: var(--border-title-02);
}

/* Two layers deep */
.light .layer .layer {
	/* layer values */
	--layer: var(--layer-03);
	--layer-hover: var(--layer-hover-03);
	--layer-active: var(--layer-active-03);
	--layer-selected: var(--layer-selected-03);
	--layer-selected-hover: var(--layer-selected-hover-03);
	--layer-accent: var(--layer-accent-03);
	--layer-accent-hover: var(--layer-accent-hover-03);
	--layer-accent-active: var(--layer-accent-active-03);

	/* Field layer values */
	--field: var(--field-03);

	/* Border layer values */
	--border-subtle: var(--border-subtle-02);
	--border-subtle-selected: var(--border-subtle-selected-03);
	--border-strong: var(--border-strong-03);
	--border-title: var(--border-title-03);
}

/* Three layers deep */
.light .layer .layer .layer {
	/* this is the only property that has 4 values \(o-o)/ */
	--border-subtle: var(--border-subtle-03);
}

.dark {
	/* IBM Carbon Background */
	--background: var(--gray-90);
	--background-inverse: var(--gray-10);
	--background-brand: var(--primary-60);
	--background-active: rgb(var(--gray-50-rgb) / 0.4);

	--background-hover: rgb(var(--gray-50-rgb) / 0.16);
	--background-inverse-hover: var(--gray-10-hover);
	--background-selected: rgb(var(--gray-50-rgb) / 0.24);
	--background-selected-hover: rgb(var(--gray-50-rgb) / 0.32);

	/* IBM Carbon Layer */
	--layer-01: var(--gray-80);
	--layer-02: var(--gray-70);
	--layer-03: var(--gray-60);
	--layer-active-01: var(--gray-60);
	--layer-active-02: var(--gray-50);
	--layer-active-03: var(--gray-80);
	--layer-hover-01: var(--gray-80-hover);
	--layer-hover-02: var(--gray-70-hover);
	--layer-hover-03: var(--gray-60-hover);
	--layer-selected-01: var(--gray-70);
	--layer-selected-02: var(--gray-60);
	--layer-selected-03: var(--gray-70);
	--layer-selected-hover-01: var(--gray-70-hover);
	--layer-selected-hover-02: var(--gray-60-hover);
	--layer-selected-hover-03: var(--gray-70-hover);
	--layer-selected-inverse: var(--gray-10);
	--layer-selected-disabled: var(--gray-40);

	/* IBM Carbon Layer accent */
	--layer-accent-01: var(--gray-70);
	--layer-accent-02: var(--gray-60);
	--layer-accent-03: var(--gray-50);
	--layer-accent-active-01: var(--gray-50);
	--layer-accent-active-02: var(--gray-80);
	--layer-accent-active-03: var(--gray-70);
	--layer-accent-hover-01: var(--gray-70-hover);
	--layer-accent-hover-02: var(--gray-60-hover);
	--layer-accent-hover-03: var(--gray-50-hover);

	/* IBM Carbon Field */
	--field-01: var(--gray-80);
	--field-02: var(--gray-70);
	--field-03: var(--gray-60);
	--field-hover-01: var(--gray-80-hover);
	--field-hover-02: var(--gray-70-hover);
	--field-hover-03: var(--gray-60-hover);

	/* IBM Carbon Border */
	--border-subtle-00: var(--gray-70);
	--border-subtle-01: var(--gray-70);
	--border-subtle-selected-01: var(--gray-60);
	--border-subtle-02: var(--gray-60);
	--border-subtle-selected-02: var(--gray-50);
	--border-subtle-03: var(--gray-50);
	--border-subtle-selected-03: var(--gray-40);
	--border-strong-01: var(--gray-50);
	--border-strong-02: var(--gray-40);
	--border-strong-03: var(--gray-30);
	--border-tile-01: var(--gray-60);
	--border-tile-02: var(--gray-50);
	--border-tile-03: var(--gray-40);
	--border-inverse: var(--gray-10);
	--border-interactive: var(--primary-50);
	--border-disabled: rgb(var(--gray-50-rgb) / 0.5);

	/* IBM Carbon Text */
	--text-primary: rgb(var(--gray-10-rgb) / 1);
	--text-secondary: var(--gray-30);
	--text-placeholder: rgb(var(--gray-10-rgb) / 0.4);
	--text-helper: var(--gray-30);
	--text-error: var(--red-30);
	--text-inverse: var(--gray-100);
	--text-on-color: rgb(255, 255, 255);
	--text-on-color-disabled: rgb(255, 255, 255, 0.25);
	--text-disabled: rgb(var(--gray-10-rgb) / 0.25);

	/* IBM Carbon Link */
	--link-primary: var(--primary-40);
	--link-primary-hover: var(--primary-30);
	--link-secondary: var(--primary-30);
	--link-inverse: var(--primary-60);
	--link-visited: var(--purple-40);
	--link-inverse-active: var(--gray-100);
	--link-inverse-hover: var(--primary-70);

	/* IBM Carbon Icon */
	--icon-primary: rgb(var(--gray-10-rgb) / 1);
	--icon-secondary: var(--gray-30);
	--icon-inverse: var(--gray-100);
	--icon-on-color: rgb(255, 255, 255);
	--icon-on-color-disabled: rgb(255, 255, 255, 0.25);
	--icon-disabled: rgb(var(--gray-10-rgb) / 0.25);
	--icon-interactive: white;

	/* IBM Carbon Button */
	--button-primary: var(--primary-60);
	--button-primary-hover: var(--primary-60-hover);
	--button-primary-active: var(--primary-80);
	--button-secondary: var(--gray-60);
	--button-secondary-hover: var(--gray-60-hover);
	--button-secondary-active: var(--gray-80);
	--button-tertiary: white;
	--button-tertiary-hover: var(--gray-10);
	--button-tertiary-active: var(--gray-30);
	--button-danger-primary: var(--red-60);
	--button-danger-secondary: var(--red-40);
	--button-danger-hover: var(--red-60-hover);
	--button-danger-active: var(--red-80);
	--button-separator: var(--gray-100);
	--button-disabled: rgb(var(--gray-50-rgb) / 0.3);

	/* IBM Carbon Tag */
	--tag-background-red: var(--red-70);
	--tag-color-red: var(--red-20);
	--tag-hover-red: var(--red-70-hover);

	--tag-background-magenta: var(--magenta-70);
	--tag-color-magenta: var(--magenta-20);
	--tag-hover-magenta: var(--magenta-70-hover);

	--tag-background-purple: var(--purple-70);
	--tag-color-purple: var(--purple-20);
	--tag-hover-purple: var(--purple-70-hover);

	--tag-background-blue: var(--blue-70);
	--tag-color-blue: var(--blue-20);
	--tag-hover-blue: var(--blue-70-hover);

	--tag-background-cyan: var(--cyan-70);
	--tag-color-cyan: var(--cyan-20);
	--tag-hover-cyan: var(--cyan-70-hover);

	--tag-background-teal: var(--teal-70);
	--tag-color-teal: var(--teal-20);
	--tag-hover-teal: var(--teal-70-hover);

	--tag-background-green: var(--green-70);
	--tag-color-green: var(--green-20);
	--tag-hover-green: var(--green-70-hover);

	--tag-background-gray: var(--gray-70);
	--tag-color-gray: var(--gray-20);
	--tag-hover-gray: var(--gray-70-hover);

	--tag-background-cool-gray: var(--cool-gray-70);
	--tag-color-cool-gray: var(--cool-gray-20);
	--tag-hover-cool-gray: var(--cool-gray-70-hover);

	--tag-background-warm-gray: var(--warm-gray-70);
	--tag-color-warm-gray: var(--warm-gray-20);
	--tag-hover-warm-gray: var(--warm-gray-70-hover);

	/* IBM Categorical Palette (charting) */
	--category-01: var(--purple-60);
	--category-02: var(--cyan-40);
	--category-03: var(--teal-60);
	--category-04: var(--magenta-40);
	--category-05: var(--red-50);
	--category-06: var(--red-10);
	--category-07: var(--green-30);
	--category-08: var(--blue-50);
	--category-09: var(--magenta-60);
	--category-10: var(--yellow-40);
	--category-11: var(--teal-40);
	--category-12: var(--cyan-20);
	--category-13: var(--orange-60);
	--category-14: var(--purple-30);

	/* IBM Carbon Support */
	--support-error: var(--red-40);
	--support-success: var(--green-40);
	--support-warning: var(--yellow-30);
	--support-caution: var(--orange-50);
	--support-info: var(--blue-50);
	--support-error-inverse: var(--red-60);
	--support-success-inverse: var(--green-50);
	--support-warning-inverse: var(--yellow-30);
	--support-caution-inverse: var(--orange-40);
	--support-info-inverse: var(--blue-70);

	/* IBM Carbon Focus */
	--focus: white;
	--focus-inset: var(--gray-100);
	--focus-inverse: var(--primary-60);

	/* IBM Carbon Misc */
	--interactive: var(--primary-50);
	--highlight: var(--primary-70);
	--overlay: rgb(0 0 0 / 0.65);
	--toggle-off: var(--gray-50);
	--shadow: rgb(0 0 0 / 0.8);
	--skeleton-background: var(--gray-90-hover);
	--skeleton-element: var(--gray-70);

	/* theme vars */
	--theme-main: var(--navy-blue);
	--theme-main80: var(--navy-blue-80);
	--theme-main60: var(--navy-blue-60);
	--theme-main40: var(--navy-blue-40);
	--theme-main20: var(--navy-blue-20);
	--theme-main10: var(--navy-blue-10);
	--theme-main-background: var(--background);
	--theme-main-border-light: var(--theme-main-border-size) solid var(--navy-blue-10);
	--theme-main-border-dark: var(--theme-main-border-size) solid var(--navy-blue);
	--theme-main-changed: var(--light-blue-20);
	--theme-main-disabled: var(--greyscale-80);
	--theme-main-fontsize-smaller: 0.7rem;
	--theme-main-fontsize: 0.9rem;
	--theme-main-fontsize-larger: 1.1rem;
	--theme-main-fontweight: normal;
	--theme-main-hover: var(--light-blue-40);
	--theme-main-radius: 4px;
	--theme-main-selected: var(--light-blue-20);
	--theme-main-selected-fontweight: normal;

	/* Sub page navigation specific theme variables */
	--theme-subnav-background: var(--light-blue-10);
	--theme-subnav-hover: var(--light-blue-40);
	--theme-subnav-selected: var(--white);

	/* Table specific theme variables */
	--theme-table-lineheight: 1.5;
	--theme-table-fontsize: 0.95rem;

	/* Home page specific theme variables */
	--theme-home: var(--navy-blue);
	--theme-home-inverse: var(--white);
	--theme-home-offset: var(--light-blue);
	--theme-home-h1: var(--white);
	--theme-home-h2: var(--white);
	--theme-home-h1-dark: var(--black);
	--theme-home-h2-dark: var(--black);
	--theme-home-radius: 3px;

	/* Accent colours */
	--theme-accent: var(--lilac);

	/* Button variables */
	--theme-button-submit: var(--white);
	--theme-button-submit-background: var(--navy-blue);
	--theme-button-submit-border: 1px solid var(--navy-blue);
	--theme-button-reset: var(--navy-blue);
	--theme-button-reset-background: var(--white);
	--theme-button-reset-border: 1px solid var(--navy-blue);

	--brand-background: none;
	--brand-full-logo: transparent url("/Content/branding/aeroqual-logo.svg");

	/* Notification variables */
	--notification-error-background-color: var(--background);
	--notification-success-background-color: var(--background);
	--notification-info-background-color: var(--background);
	--notification-warning-background-color: var(--background);

	/* Base Layer */

	/* layer values */
	--layer: var(--layer-01);
	--layer-hover: var(--layer-hover-01);
	--layer-active: var(--layer-active-01);
	--layer-selected: var(--layer-selected-01);
	--layer-selected-hover: var(--layer-selected-hover-01);
	--layer-accent: var(--layer-accent-01);
	--layer-accent-hover: var(--layer-accent-hover-01);
	--layer-accent-active: var(--layer-accent-active-01);

	/* Field layer values */
	--field: var(--field-01);

	/* Border layer values */
	--border-subtle: var(--border-subtle-00);
	--border-subtle-selected: var(--border-subtle-selected-01);
	--border-strong: var(--border-strong-01);
	--border-title: var(--border-title-01);

	/* Side panel */
	--side-panel-background: var(--gray-90-hover);
}

/* One layer deep */
.dark .layer {
	/* layer values */
	--layer: var(--layer-02);
	--layer-hover: var(--layer-hover-02);
	--layer-active: var(--layer-active-02);
	--layer-selected: var(--layer-selected-02);
	--layer-selected-hover: var(--layer-selected-hover-02);
	--layer-accent: var(--layer-accent-02);
	--layer-accent-hover: var(--layer-accent-hover-02);
	--layer-accent-active: var(--layer-accent-active-02);

	/* Field layer values */
	--field: var(--field-02);

	/* Border layer values */
	--border-subtle: var(--border-subtle-01);
	--border-subtle-selected: var(--border-subtle-selected-02);
	--border-strong: var(--border-strong-02);
	--border-title: var(--border-title-02);
}

/* Two layers deep */
.dark .layer .layer {
	/* layer values */
	--layer: var(--layer-03);
	--layer-hover: var(--layer-hover-03);
	--layer-active: var(--layer-active-03);
	--layer-selected: var(--layer-selected-03);
	--layer-selected-hover: var(--layer-selected-hover-03);
	--layer-accent: var(--layer-accent-03);
	--layer-accent-hover: var(--layer-accent-hover-03);
	--layer-accent-active: var(--layer-accent-active-03);

	/* Field layer values */
	--field: var(--field-03);

	/* Border layer values */
	--border-subtle: var(--border-subtle-02);
	--border-subtle-selected: var(--border-subtle-selected-03);
	--border-strong: var(--border-strong-03);
	--border-title: var(--border-title-03);
}

/* Three layers deep */
.dark .layer .layer .layer {
	/* this is the only property that has 4 values \(o-o)/ */
	--border-subtle: var(--border-subtle-03);
}

/* React styles */
body {
	letter-spacing: var(--letter-spacing);
	font-family: var(--font);
	font-size: var(--theme-main-fontsize);
	background: var(--theme-main-background);
	margin: 0;
}

a {
	color: var(--link-primary);
}

#react-app {
	height: 100%;
	display: flex;
	flex-direction: column;
}

@-moz-document url-prefix() {
	.axisTitle {
		filter: blur(0.01px);
	}
}