@arbor-education/design-system.components 0.0.1

package/dist/index.css

@@ -0,0 +1,1557 @@
+@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root {
+  --colour-brand-100: #ceefd5;
+  --colour-brand-200: #a7e1b3;
+  --colour-brand-300: #7ed28e;
+  --colour-brand-400: #5ec171;
+  --colour-brand-500: #3cad51;
+  --colour-brand-700: #0b800b;
+  --colour-brand-800: #005700;
+  --colour-brand-900: #024002;
+  --colour-brand-050: #f0faf3;
+  --colour-brand-600: #0e8a0e;
+  --colour-semantic-destructive-300: #e86565;
+  --colour-semantic-destructive-500: #c93232;
+  --colour-semantic-destructive-700: #920a0a;
+  --colour-semantic-destructive-800: #610202;
+  --colour-semantic-destructive-900: #360000;
+  --colour-semantic-destructive-050: #fff5f5;
+  --colour-semantic-destructive-100-hover: #ffe2e2;
+  --colour-semantic-destructive-600-accessible: #a62323;
+  --colour-semantic-warning-300: #ffa24a;
+  --colour-semantic-warning-500: #e4720d;
+  --colour-semantic-warning-700: #a74102;
+  --colour-semantic-warning-800: #611f00;
+  --colour-semantic-warning-900: #451600;
+  --colour-semantic-warning-050: #fffaf5;
+  --colour-semantic-warning-100-hover: #ffe8d0;
+  --colour-semantic-warning-600-accessible: #b85605;
+  --colour-semantic-success-300: #66cd84;
+  --colour-semantic-success-500: #16a33d;
+  --colour-semantic-success-700: #026319;
+  --colour-semantic-success-800: #003508;
+  --colour-semantic-success-050: #f5fff8;
+  --colour-semantic-success-100-hover: #d7f9e0;
+  --colour-semantic-success-600-accessible: #078427;
+  --colour-semantic-info-300: #6db5e3;
+  --colour-semantic-info-500: #2c8bca;
+  --colour-semantic-info-700: #024f83;
+  --colour-semantic-info-800: #053a61;
+  --colour-semantic-info-900: #021a2b;
+  --colour-semantic-info-050: #f5fbff;
+  --colour-semantic-info-100-hover: #c7e3f4;
+  --colour-semantic-info-600-accessible: #1c77b4;
+  --colour-semantic-caution-300: #ffd45b;
+  --colour-semantic-caution-500: #edae06;
+  --colour-semantic-caution-600: #c18900;
+  --colour-semantic-caution-800: #613f00;
+  --colour-semantic-caution-050: #fffdf5;
+  --colour-semantic-caution-700-kpi: #7d5400;
+  --colour-semantic-caution-100-hover: #fff3d0;
+  --colour-mono-white: #ffffff;
+  --colour-mono-black: #202020;
+  --colour-grey-100: #efefef;
+  --colour-grey-200: #dfdfdf;
+  --colour-grey-300: #d1d1d1;
+  --colour-grey-400: #b3b3b3;
+  --colour-grey-500: #7e7e7e;
+  --colour-grey-600: #595959;
+  --colour-grey-700: #474747;
+  --colour-grey-800: #3b3b3b;
+  --colour-grey-900: #2f2f2f;
+  --colour-grey-050: #f8f8f8;
+  --colour-chart-colours-green-4: #005f00;
+  --colour-chart-colours-green-2: #009d00;
+  --colour-chart-colours-green-1: #70cc12;
+  --colour-chart-colours-teal-1: #6eeae2;
+  --colour-chart-colours-teal-2: #93f8f2;
+  --colour-chart-colours-purple-1: #ba9eea;
+  --colour-chart-colours-purple-2: #cbaffb;
+  --colour-chart-colours-orange-1: #ffb62c;
+  --colour-chart-colours-orange-2: #f8c867;
+  --colour-chart-colours-blue-1: #50b4f4;
+  --colour-chart-colours-blue-2: #7acbff;
+  --colour-chart-colours-green-3: #aaea0f;
+  --colour-chart-colours-yellow-1: #ffd950;
+  --colour-chart-colours-yellow-2: #ffe790;
+  --colour-chart-colours-red-1: #fa6969;
+  --colour-chart-colours-red-2: #ff8b8b;
+  --colour-ramp-gradient-sequential-100: #e1f8a9;
+  --colour-ramp-gradient-sequential-200: #d6f68a;
+  --colour-ramp-gradient-sequential-300: #c4f157;
+  --colour-ramp-gradient-sequential-400: #aaea0f;
+  --colour-ramp-gradient-sequential-500: #91db0f;
+  --colour-ramp-gradient-sequential-600: #76ca10;
+  --colour-ramp-gradient-sequential-700: #59b80f;
+  --colour-ramp-gradient-sequential-800: #299a0e;
+  --colour-ramp-gradient-sequential-900: #005f00;
+  --colour-ramp-gradient-sequential-050: #f6fee2;
+  --colour-ramp-gradient-diverging-100: #fe9212;
+  --colour-ramp-gradient-diverging-200: #fcb836;
+  --colour-ramp-gradient-diverging-300: #f9dc8f;
+  --colour-ramp-gradient-diverging-400: #f6fee2;
+  --colour-ramp-gradient-diverging-500: #d8f78f;
+  --colour-ramp-gradient-diverging-600: #b1ec21;
+  --colour-ramp-gradient-diverging-700: #6cb70a;
+  --colour-ramp-gradient-diverging-800: #217a04;
+  --colour-ramp-gradient-diverging-900: #005f00;
+  --colour-ramp-gradient-diverging-050: #ff8000;
+  --colour-extended-colours-bg: #ffffff;
+  --colour-extended-colours-green-100: #c6e8be;
+  --colour-extended-colours-green-500: #009d00;
+  --colour-extended-colours-green-800: #002a00;
+  --colour-extended-colours-green-050: #d7ebd2;
+  --colour-extended-colours-orange-100: #efe0bc;
+  --colour-extended-colours-orange-500: #ffb62c;
+  --colour-extended-colours-orange-800: #7e3e00;
+  --colour-extended-colours-orange-050: #f7eed8;
+  --colour-extended-colours-blue-100: #c6e1ef;
+  --colour-extended-colours-blue-500: #50b4f4;
+  --colour-extended-colours-blue-800: #003d69;
+  --colour-extended-colours-blue-050: #e1eef5;
+  --colour-extended-colours-purple-100: #e2dcef;
+  --colour-extended-colours-purple-500: #ba9eea;
+  --colour-extended-colours-purple-800: #472b61;
+  --colour-extended-colours-purple-050: #eeebf4;
+  --colour-extended-colours-yellow-100: #ede6c7;
+  --colour-extended-colours-yellow-500: #ffd950;
+  --colour-extended-colours-yellow-800: #7e5a00;
+  --colour-extended-colours-yellow-050: #f7f2dd;
+  --colour-extended-colours-teal-100: #cbefed;
+  --colour-extended-colours-teal-500: #6eeae2;
+  --colour-extended-colours-teal-800: #0a685b;
+  --colour-extended-colours-teal-050: #e4f4f3;
+  --colour-extended-colours-salmon-100: #f4d8d1;
+  --colour-extended-colours-salmon-500: #fa6969;
+  --colour-extended-colours-salmon-800: #7a0100;
+  --colour-extended-colours-salmon-050: #f6e5e1;
+  --button-medium-primary-default-color-background: #0e8a0e;
+  --button-medium-primary-default-color-text: #ffffff;
+  --button-medium-primary-default-color-icon: #ffffff;
+  --button-medium-primary-hover-color-background: #005700;
+  --button-medium-primary-hover-color-text: #ffffff;
+  --button-medium-primary-hover-color-icon: #ffffff;
+  --button-medium-primary-pressed-color-background: #024002;
+  --button-medium-primary-pressed-color-text: #ffffff;
+  --button-medium-primary-pressed-color-icon: #ffffff;
+  --button-medium-primary-focus-color-background: #0e8a0e;
+  --button-medium-primary-focus-color-text: #ffffff;
+  --button-medium-primary-focus-color-icon: #ffffff;
+  --button-medium-primary-focus-color-focus: #3cad51;
+  --button-medium-secondary-default-color-text: #2f2f2f;
+  --button-medium-secondary-default-color-background: #ffffff;
+  --button-medium-secondary-default-color-border: #d1d1d1;
+  --button-medium-secondary-default-color-icon: #2f2f2f;
+  --button-medium-secondary-hover-color-background: #f8f8f8;
+  --button-medium-secondary-hover-color-text: #2f2f2f;
+  --button-medium-secondary-hover-color-icon: #2f2f2f;
+  --button-medium-secondary-hover-color-border: #d1d1d1;
+  --button-medium-secondary-pressed-color-background: #efefef;
+  --button-medium-secondary-pressed-color-text: #2f2f2f;
+  --button-medium-secondary-pressed-color-icon: #2f2f2f;
+  --button-medium-secondary-pressed-color-border: #d1d1d1;
+  --button-medium-tertiary-default-color-text: #2f2f2f;
+  --button-medium-tertiary-default-color-background: #efefef;
+  --button-medium-tertiary-default-color-icon: #2f2f2f;
+  --button-medium-tertiary-hover-color-background: #dfdfdf;
+  --button-medium-tertiary-hover-color-text: #2f2f2f;
+  --button-medium-tertiary-hover-color-icon: #2f2f2f;
+  --button-medium-tertiary-pressed-color-background: #d1d1d1;
+  --button-medium-tertiary-pressed-color-text: #2f2f2f;
+  --button-medium-tertiary-pressed-color-icon: #2f2f2f;
+  --button-medium-tertiary-focus-color-background: #efefef;
+  --button-medium-tertiary-focus-color-text: #2f2f2f;
+  --button-medium-tertiary-focus-color-icon: #2f2f2f;
+  --button-medium-tertiary-focus-color-focus: #3cad51;
+  --button-medium-secondary-focus-color-background: #ffffff;
+  --button-medium-secondary-focus-color-text: #2f2f2f;
+  --button-medium-secondary-focus-color-icon: #2f2f2f;
+  --button-medium-secondary-focus-color-border: #d1d1d1;
+  --button-medium-secondary-focus-color-focus: #3cad51;
+  --button-medium-text-link-default-color-text: #0e8a0e;
+  --button-medium-text-link-default-color-icon: #0e8a0e;
+  --button-medium-text-link-hover-color-text: #005700;
+  --button-medium-text-link-hover-color-icon: #005700;
+  --button-medium-text-link-pressed-color-text: #024002;
+  --button-medium-text-link-pressed-color-icon: #024002;
+  --button-medium-text-link-focus-color-text: #0e8a0e;
+  --button-medium-text-link-focus-color-icon: #0e8a0e;
+  --button-medium-text-link-focus-color-focus: #3cad51;
+  --button-medium-primary-destructive-hover-color-text: #ffffff;
+  --button-medium-primary-destructive-hover-color-background: #a62323;
+  --button-medium-primary-destructive-hover-color-icon: #ffffff;
+  --button-medium-primary-destructive-pressed-color-background: #920a0a;
+  --button-medium-primary-destructive-pressed-color-text: #ffffff;
+  --button-medium-primary-destructive-pressed-color-icon: #ffffff;
+  --button-medium-primary-destructive-default-color-text: #ffffff;
+  --button-medium-primary-destructive-default-color-icon: #ffffff;
+  --button-medium-primary-destructive-default-color-background: #c93232;
+  --button-medium-primary-destructive-focus-color-background: #c93232;
+  --button-medium-primary-destructive-focus-color-text: #ffffff;
+  --button-medium-primary-destructive-focus-color-icon: #ffffff;
+  --button-medium-primary-destructive-focus-color-focus: #3cad51;
+  --button-medium-secondary-destructive-default-color-border: #c93232;
+  --button-medium-secondary-destructive-default-color-background: #ffffff;
+  --button-medium-secondary-destructive-default-color-text: #a62323;
+  --button-medium-secondary-destructive-default-color-icon: #a62323;
+  --button-medium-secondary-destructive-hover-color-text: #ffffff;
+  --button-medium-secondary-destructive-hover-color-icon: #ffffff;
+  --button-medium-secondary-destructive-hover-color-background: #a62323;
+  --button-medium-secondary-destructive-pressed-color-background: #920a0a;
+  --button-medium-secondary-destructive-pressed-color-text: #ffffff;
+  --button-medium-secondary-destructive-pressed-color-icon: #ffffff;
+  --button-medium-secondary-destructive-focus-color-background: #ffffff;
+  --button-medium-secondary-destructive-focus-color-border: #c93232;
+  --button-medium-secondary-destructive-focus-color-text: #a62323;
+  --button-medium-secondary-destructive-focus-color-icon: #a62323;
+  --button-medium-secondary-destructive-focus-color-focus: #3cad51;
+  --button-medium-warning-default-color-text: #e4720d;
+  --button-medium-warning-default-color-icon: #e4720d;
+  --button-medium-warning-default-color-border: #e4720d;
+  --button-medium-warning-hover-color-text: #ffffff;
+  --button-medium-warning-hover-color-icon: #ffffff;
+  --button-medium-warning-hover-color-background: #e4720d;
+  --button-medium-warning-pressed-color-background: #a74102;
+  --button-medium-spacing-y: 0.75rem;
+  --button-medium-spacing-x: 1rem;
+  --button-medium-spacing-gap-y: 0.5rem;
+  --button-medium-radius: 6.188rem;
+  --button-small-primary-default-color-background: #0e8a0e;
+  --button-small-primary-default-color-text: #ffffff;
+  --button-small-primary-default-color-icon: #ffffff;
+  --button-small-primary-hover-color-background: #005700;
+  --button-small-primary-hover-color-text: #ffffff;
+  --button-small-primary-hover-color-icon: #ffffff;
+  --button-small-primary-pressed-color-background: #024002;
+  --button-small-primary-pressed-color-text: #ffffff;
+  --button-small-primary-pressed-color-icon: #ffffff;
+  --button-small-primary-focus-color-background: #0e8a0e;
+  --button-small-primary-focus-color-text: #ffffff;
+  --button-small-primary-focus-color-icon: #ffffff;
+  --button-small-primary-focus-color-focus: #3cad51;
+  --button-small-secondary-default-color-background: #ffffff;
+  --button-small-secondary-default-color-text: #2f2f2f;
+  --button-small-secondary-default-color-icon: #2f2f2f;
+  --button-small-secondary-default-color-border: #d1d1d1;
+  --button-small-secondary-hover-color-background: #f8f8f8;
+  --button-small-secondary-hover-color-text: #2f2f2f;
+  --button-small-secondary-hover-color-icon: #2f2f2f;
+  --button-small-secondary-hover-color-border: #d1d1d1;
+  --button-small-secondary-pressed-color-background: #efefef;
+  --button-small-secondary-pressed-color-text: #2f2f2f;
+  --button-small-secondary-pressed-color-icon: #2f2f2f;
+  --button-small-secondary-pressed-color-border: #d1d1d1;
+  --button-small-secondary-focus-color-background: #ffffff;
+  --button-small-secondary-focus-color-text: #2f2f2f;
+  --button-small-secondary-focus-color-icon: #2f2f2f;
+  --button-small-secondary-focus-color-border: #d1d1d1;
+  --button-small-secondary-focus-color-focus: #3cad51;
+  --button-small-tertiary-default-color-background: #efefef;
+  --button-small-tertiary-default-color-text: #2f2f2f;
+  --button-small-tertiary-default-color-icon: #2f2f2f;
+  --button-small-tertiary-hover-color-background: #dfdfdf;
+  --button-small-tertiary-hover-color-text: #2f2f2f;
+  --button-small-tertiary-hover-color-icon: #2f2f2f;
+  --button-small-tertiary-pressed-color-background: #d1d1d1;
+  --button-small-tertiary-pressed-color-text: #2f2f2f;
+  --button-small-tertiary-pressed-color-icon: #2f2f2f;
+  --button-small-tertiary-focus-color-background: #efefef;
+  --button-small-tertiary-focus-color-text: #2f2f2f;
+  --button-small-tertiary-focus-color-icon: #2f2f2f;
+  --button-small-tertiary-focus-color-focus: #3cad51;
+  --button-small-primary-destructive-default-color-background: #c93232;
+  --button-small-primary-destructive-default-color-text: #ffffff;
+  --button-small-primary-destructive-default-color-icon: #ffffff;
+  --button-small-primary-destructive-hover-color-background: #a62323;
+  --button-small-primary-destructive-hover-color-text: #ffffff;
+  --button-small-primary-destructive-hover-color-icon: #ffffff;
+  --button-small-primary-destructive-pressed-color-background: #920a0a;
+  --button-small-primary-destructive-pressed-color-text: #ffffff;
+  --button-small-primary-destructive-pressed-color-icon: #ffffff;
+  --button-small-primary-destructive-focus-color-background: #c93232;
+  --button-small-primary-destructive-focus-color-text: #ffffff;
+  --button-small-primary-destructive-focus-color-icon: #ffffff;
+  --button-small-primary-destructive-focus-color-focus: #3cad51;
+  --button-small-secondary-destructive-default-color-background: #ffffff;
+  --button-small-secondary-destructive-default-color-border: #c93232;
+  --button-small-secondary-destructive-default-color-text: #a62323;
+  --button-small-secondary-destructive-default-color-icon: #a62323;
+  --button-small-secondary-destructive-hover-color-background: #a62323;
+  --button-small-secondary-destructive-hover-color-text: #ffffff;
+  --button-small-secondary-destructive-hover-color-icon: #ffffff;
+  --button-small-secondary-destructive-pressed-color-background: #920a0a;
+  --button-small-secondary-destructive-pressed-color-text: #ffffff;
+  --button-small-secondary-destructive-pressed-color-icon: #ffffff;
+  --button-small-secondary-destructive-focus-color-background: #ffffff;
+  --button-small-secondary-destructive-focus-color-border: #c93232;
+  --button-small-secondary-destructive-focus-color-text: #a62323;
+  --button-small-secondary-destructive-focus-color-icon: #a62323;
+  --button-small-secondary-destructive-focus-color-focus: #3cad51;
+  --button-small-text-link-default-color-text: #0e8a0e;
+  --button-small-text-link-default-color-icon: #0e8a0e;
+  --button-small-text-link-hover-color-text: #005700;
+  --button-small-text-link-hover-color-icon: #005700;
+  --button-small-text-link-pressed-color-text: #024002;
+  --button-small-text-link-pressed-color-icon: #024002;
+  --button-small-text-link-focus-color-text: #0e8a0e;
+  --button-small-text-link-focus-color-icon: #0e8a0e;
+  --button-small-text-link-focus-color-focus: #3cad51;
+  --button-small-warning-default-color-text: #e4720d;
+  --button-small-warning-default-color-icon: #e4720d;
+  --button-small-warning-default-color-border: #e4720d;
+  --button-small-warning-hover-color-text: #ffffff;
+  --button-small-warning-hover-color-icon: #ffffff;
+  --button-small-warning-hover-color-background: #e4720d;
+  --button-small-warning-pressed-color-background: #a74102;
+  --button-small-spacing-gap-y: 0.5rem;
+  --button-small-spacing-y: 1rem;
+  --button-small-spacing-x: 0.75rem;
+  --button-small-radius: 6.188rem;
+  --section-list-row-color-text: #2f2f2f;
+  --section-list-row-color-icon: #2f2f2f;
+  --section-list-row-default-color-background: #ffffff;
+  --section-list-row-default-color-icon-arrow: #b3b3b3;
+  --section-list-row-hover-hover-bg: #f8f8f8;
+  --section-list-row-hover-color-icon-arrow: #2f2f2f;
+  --section-list-row-pressed-pressed-bg: #dfdfdf;
+  --section-list-row-color-border: #f8f8f8;
+  --section-list-row-spacing-x: 0.5rem;
+  --section-list-row-spacing-y: 0.75rem;
+  --section-list-row-radius: 0.5rem;
+  --section-list-row-accordions-spacing-gap: 0.75rem;
+  --section-list-row-accordions-spacing-y: 0.25rem;
+  --section-list-row-accordions-spacing-x: 0.5rem;
+  --section-heading-color-text: #2f2f2f;
+  --section-heading-color-icon: #2f2f2f;
+  --section-heading-interactive-default-color-background: #ffffff;
+  --section-heading-interactive-hover-color-background: #f8f8f8;
+  --section-heading-interactive-pressed-color-background: #dfdfdf;
+  --section-heading-interactive-focus-color-border: #3cad51;
+  --section-heading-interactive-spacing-bottom: 0.5rem;
+  --section-heading-interactive-holder-spacing-y: 1rem;
+  --section-heading-interactive-radius: 0.5rem;
+  --section-heading-color-border: #f8f8f8;
+  --section-heading-spacing-top: 0rem;
+  --section-heading-spacing-right: 0.5rem;
+  --section-heading-spacing-bottom: 0.5rem;
+  --section-heading-spacing-left: 0.5rem;
+  --section-heading-spacing-gap: 0.75rem;
+  --section-container-color-background: #ffffff;
+  --section-container-radius: 0.5rem;
+  --section-container-spacing-x: 0.5rem;
+  --section-container-spacing-y: 0.5rem;
+  --section-subsection-color-background: #ffffff;
+  --section-subsection-heading-interactive-color-border: #f8f8f8;
+  --section-subsection-heading-interactive-spacing-y: 1rem;
+  --section-subsection-heading-interactive-radius: 0.5rem;
+  --section-subsection-heading-interactive-weight-border: 0.062rem;
+  --section-subsection-heading-spacing-x: 0.5rem;
+  --section-subsection-heading-spacing-y: 0.5rem;
+  --section-subsection-radius: 0rem;
+  --section-subsection-spacing-x: 0.5rem;
+  --section-subsection-spacing-y: 0.5rem;
+  --section-table-color-background: #ffffff;
+  --section-table-spacing-gap: 0.5rem;
+  --pill-bg: #ffffff;
+  --pill-single-filter-default-color-background: #ffffff;
+  --pill-single-filter-default-color-text: #2f2f2f;
+  --pill-single-filter-default-color-border: #efefef;
+  --pill-single-filter-default-focus: #3cad51;
+  --pill-single-filter-hover-color-background: #f8f8f8;
+  --pill-single-filter-hover-color-border: #7e7e7e;
+  --pill-single-filter-hover-color-text: #2f2f2f;
+  --pill-single-filter-pressed-color-background: #efefef;
+  --pill-single-filter-pressed-color-border: #7e7e7e;
+  --pill-single-filter-pressed-color-text: #2f2f2f;
+  --pill-single-filter-active-color-background: #f8f8f8;
+  --pill-single-filter-active-color-border: #2f2f2f;
+  --pill-single-filter-active-color-text: #2f2f2f;
+  --pill-single-filter-active-focus: #3cad51;
+  --pill-single-filter-spacing-x: 0.75rem;
+  --pill-single-filter-spacing-y: 1rem;
+  --pill-single-filter-radius: 6.188rem;
+  --pill-checkbox-default-color-background: #ffffff;
+  --pill-checkbox-default-color-border: #efefef;
+  --pill-checkbox-default-color-text: #2f2f2f;
+  --pill-checkbox-default-focus: #3cad51;
+  --pill-checkbox-default-color-icon: #7e7e7e;
+  --pill-checkbox-hover-color-background: #f8f8f8;
+  --pill-checkbox-hover-color-border: #7e7e7e;
+  --pill-checkbox-hover-color-text: #2f2f2f;
+  --pill-checkbox-hover-color-icon: #2f2f2f;
+  --pill-checkbox-selected-color-background: #f0faf3;
+  --pill-checkbox-selected-color-border: #0e8a0e;
+  --pill-checkbox-selected-color-text: #005700;
+  --pill-checkbox-selected-focus: #3cad51;
+  --pill-checkbox-selected-color-icon: #0e8a0e;
+  --pill-checkbox-spacing-x: 0.75rem;
+  --pill-checkbox-spacing-y: 1rem;
+  --pill-checkbox-radius: 6.188rem;
+  --sidebar-bg: #ffffff;
+  --side-nav-icon-bg: #ffffff;
+  --side-nav-icon-icon: #7e7e7e;
+  --side-nav-icon-icon-bg-hover: #f8f8f8;
+  --side-nav-icon-icon-hover: #2f2f2f;
+  --side-nav-icon-icon-active: #0e8a0e;
+  --side-nav-icon-icon-bg-active: #f0faf3;
+  --side-nav-icon-icon-bg-pressed: #efefef;
+  --side-nav-bg: #ffffff;
+  --side-nav-list-default-text: #2f2f2f;
+  --side-nav-list-default-favourite-icon: #7e7e7e;
+  --side-nav-list-default-icon: #2f2f2f;
+  --side-nav-list-hover-text: #2f2f2f;
+  --side-nav-list-hover-favourite-icon: #7e7e7e;
+  --side-nav-list-hover-bg: #f8f8f8;
+  --side-nav-list-hover-icon: #2f2f2f;
+  --side-nav-list-active-text: #005700;
+  --side-nav-list-active-favourite-icon: #0e8a0e;
+  --side-nav-list-active-bg: #f0faf3;
+  --side-nav-list-active-icon: #005700;
+  --search-global-default-color-background: #f8f8f8;
+  --search-global-default-color-text: #2f2f2f;
+  --search-global-default-color-icon: #2f2f2f;
+  --search-global-hover-color-background: #efefef;
+  --search-global-hover-color-icon: #2f2f2f;
+  --search-global-hover-color-text: #2f2f2f;
+  --search-global-focus-color-background: #f8f8f8;
+  --search-global-focus-color-icon: #2f2f2f;
+  --search-global-focus-color-text: #2f2f2f;
+  --search-global-focus-color-border: #efefef;
+  --search-global-focus-weight-border: 0.062rem;
+  --search-global-active-color-background: #ffffff;
+  --search-global-active-color-icon: #595959;
+  --search-global-active-color-text: #595959;
+  --search-global-active-color-border: #efefef;
+  --search-global-active-weight-border: 0.062rem;
+  --search-global-spacing-gap: 0.5rem;
+  --search-global-spacing-x: 1rem;
+  --search-global-spacing-y: 0.5rem;
+  --search-global-radius: 1rem;
+  --search-color-background: #ffffff;
+  --search-pill-active-bg: #efefef;
+  --search-pill-active-border: #2f2f2f;
+  --search-pill-active-text: #2f2f2f;
+  --search-pill-default-bg: #ffffff;
+  --search-pill-default-bg-hover: #f8f8f8;
+  --search-pill-default-bg-pressed: #efefef;
+  --search-pill-default-text: #2f2f2f;
+  --search-pill-default-border: #efefef;
+  --search-list-default-color-background: #ffffff;
+  --search-list-hover-color-background: #f8f8f8;
+  --search-list-color-text: #2f2f2f;
+  --search-list-color-header: #595959;
+  --search-list-color-icon: #2f2f2f;
+  --search-list-spacing-gap: 0.5rem;
+  --search-list-spacing-x: 0.5rem;
+  --search-list-spacing-y: 0.5rem;
+  --search-list-radius: 0.5rem;
+  --search-on-page-active-color-background: #ffffff;
+  --search-on-page-active-color-icon: #595959;
+  --search-on-page-active-color-text: #595959;
+  --search-on-page-active-color-border: #efefef;
+  --search-on-page-active-weight-border: 0.062rem;
+  --search-on-page-default-color-background: #ffffff;
+  --search-on-page-default-color-icon: #595959;
+  --search-on-page-default-color-text: #595959;
+  --search-on-page-focus-color-background: #ffffff;
+  --search-on-page-focus-color-icon: #595959;
+  --search-on-page-focus-color-text: #595959;
+  --search-on-page-hover-color-background: #efefef;
+  --search-on-page-hover-color-icon: #2f2f2f;
+  --search-on-page-hover-color-text: #2f2f2f;
+  --search-on-page-spacing-gap: 0.5rem;
+  --search-on-page-radius: 1rem;
+  --search-on-page-spacing-x: 1rem;
+  --search-on-page-spacing-y: 0.5rem;
+  --search-in-table-active-color-background: #ffffff;
+  --search-in-table-active-color-icon: #595959;
+  --search-in-table-active-color-text: #595959;
+  --search-in-table-active-color-border: #efefef;
+  --search-in-table-active-weight-border: 0.062rem;
+  --search-in-table-active-spacing-gap: 0.5rem;
+  --search-in-table-active-radius: 1rem;
+  --search-in-table-active-spacing-x: 1rem;
+  --search-in-table-active-spacing-y: 0.5rem;
+  --search-in-table-default-color-background: #ffffff;
+  --search-in-table-default-color-icon: #595959;
+  --search-in-table-default-color-text: #595959;
+  --search-in-table-focus-color-background: #ffffff;
+  --search-in-table-focus-color-icon: #595959;
+  --search-in-table-focus-color-text: #595959;
+  --search-in-table-focus-color-border: #efefef;
+  --search-in-table-focus-weight-border: 0.062rem;
+  --search-in-table-hover-color-background: #f8f8f8;
+  --search-in-table-hover-color-icon: #2f2f2f;
+  --search-in-table-hover-color-text: #2f2f2f;
+  --search-in-table-radius: 6.188rem;
+  --search-in-section-active-color-background: #ffffff;
+  --search-in-section-active-color-icon: #595959;
+  --search-in-section-active-color-text: #595959;
+  --search-in-section-active-color-border: #efefef;
+  --search-in-section-active-weight-border: 0.062rem;
+  --search-in-section-default-color-background: #f8f8f8;
+  --search-in-section-default-color-icon: #2f2f2f;
+  --search-in-section-default-color-text: #2f2f2f;
+  --search-in-section-focus-color-background: #f8f8f8;
+  --search-in-section-focus-color-icon: #2f2f2f;
+  --search-in-section-focus-color-text: #2f2f2f;
+  --search-in-section-focus-color-border: #efefef;
+  --search-in-section-focus-weight-border: 0.062rem;
+  --search-in-section-hover-color-background: #efefef;
+  --search-in-section-hover-color-icon: #2f2f2f;
+  --search-in-section-hover-color-text: #2f2f2f;
+  --search-in-section-spacing-gap: 0.5rem;
+  --search-in-section-radius: 1rem;
+  --search-in-section-spacing-x: 1rem;
+  --search-in-section-spacing-y: 0.5rem;
+  --search-results-color-border: #f8f8f8;
+  --search-results-spacing-gap: 0.25rem;
+  --search-results-spacing-x: 0.5rem;
+  --search-results-spacing-y: 0.5rem;
+  --search-results-weight-border: 0.062rem;
+  --search-color-text: #2f2f2f;
+  --search-filters-spacing-gap: 0.5rem;
+  --search-filters-spacing-x: 1rem;
+  --search-filters-spacing-y: 1rem;
+  --search-radius: 0.5rem;
+  --search-footer-spacing-gap: 0.5rem;
+  --search-footer-spacing-x: 1rem;
+  --search-footer-spacing-y: 1rem;
+  --widget-attachments-default-color-text: #2f2f2f;
+  --widget-attachments-default-color-background: #f8f8f8;
+  --widget-attachments-default-color-icon: #2f2f2f;
+  --widget-attachments-hover-color-background: #efefef;
+  --widget-attachments-hover-color-text: #2f2f2f;
+  --widget-attachments-hover-color-icon: #2f2f2f;
+  --widget-container-color-background: #ffffff;
+  --widget-container-radius: 0.5rem;
+  --widget-container-spacing-x: 0.5rem;
+  --widget-container-spacing-y: 0.5rem;
+  --widget-heading-color-border: #f8f8f8;
+  --widget-heading-color-icon: #2f2f2f;
+  --widget-heading-color-text: #2f2f2f;
+  --widget-heading-interactive-default-color-background: #ffffff;
+  --widget-heading-interactive-hover-color-background: #f8f8f8;
+  --widget-heading-interactive-pressed-color-background: #dfdfdf;
+  --widget-heading-interactive-focus-color-border: #3cad51;
+  --widget-heading-interactive-spacing-y: 0.75rem;
+  --widget-heading-interactive-radius: 0.5rem;
+  --widget-heading-interactive-holder-spacing-y: 1rem;
+  --widget-heading-interactive-spacing-x: 0.5rem;
+  --widget-heading-color-background: #ffffff;
+  --widget-heading-spacing-top: 0.75rem;
+  --widget-heading-spacing-right: 0.5rem;
+  --widget-heading-spacing-bottom: 1rem;
+  --widget-heading-spacing-left: 0.5rem;
+  --widget-heading-weight-border: 0.062rem;
+  --widget-heading-spacing-gap: 0.75rem;
+  --widget-list-row-color-border: #f8f8f8;
+  --widget-list-row-color-icon: #2f2f2f;
+  --widget-list-row-color-text: #2f2f2f;
+  --widget-list-row-default-color-background: #ffffff;
+  --widget-list-row-default-color-icon-arrow: #b3b3b3;
+  --widget-list-row-hover-hover-bg: #f8f8f8;
+  --widget-list-row-hover-color-icon-arrow: #2f2f2f;
+  --widget-list-row-pressed-pressed-bg: #dfdfdf;
+  --widget-list-row-radius: 0.5rem;
+  --widget-list-row-spacing-x: 0.5rem;
+  --widget-list-row-spacing-y: 0.75rem;
+  --widget-list-row-accordions-spacing-gap: 0.75rem;
+  --widget-list-row-accordions-spacing-y: 0.25rem;
+  --widget-list-row-accordions-spacing-x: 0.5rem;
+  --widget-table-color-background: #ffffff;
+  --widget-table-spacing-gap: 0.5rem;
+  --widget-notifications-read-default-color-background: #ffffff;
+  --widget-notifications-read-hover-color-background: #f8f8f8;
+  --widget-notifications-read-focus-color-background: #ffffff;
+  --widget-notifications-read-color-text: #595959;
+  --widget-notifications-read-color-title: #2f2f2f;
+  --widget-notifications-not-read-default-color-background: #f0faf3;
+  --widget-notifications-not-read-hover-color-background: #ceefd5;
+  --widget-notifications-not-read-focus-color-background: #f0faf3;
+  --widget-notifications-not-read-color-text: #024002;
+  --widget-notifications-not-read-color-title: #024002;
+  --widget-notifications-color-title: #2f2f2f;
+  --widget-notifications-color-text: #595959;
+  --widget-notifications-radius: 0.5rem;
+  --widget-notifications-spacing-gap: 0.5rem;
+  --widget-notifications-spacing-x: 0.5rem;
+  --widget-notifications-spacing-y: 0.5rem;
+  --widget-favourites-default-color-background: #ffffff;
+  --widget-favourites-color-text: #595959;
+  --widget-favourites-hover-color-background: #f8f8f8;
+  --widget-favourites-focus-color-background: #ffffff;
+  --widget-favourites-color-icon: #d1d1d1;
+  --widget-favourites-color-border: #f8f8f8;
+  --widget-favourites-radius: 0.5rem;
+  --widget-favourites-spacing-gap: 0.5rem;
+  --widget-favourites-spacing-x: 0.5rem;
+  --widget-favourites-spacing-y: 0.75rem;
+  --widget-favourites-weight-border: 0.062rem;
+  --widget-calendar-default-color-background: #ffffff;
+  --widget-calendar-hover-color-background: #f8f8f8;
+  --widget-calendar-focus-color-background: #ffffff;
+  --widget-calendar-color-text: #595959;
+  --widget-calendar-color-border: #f8f8f8;
+  --widget-calendar-radius: 0.5rem;
+  --widget-calendar-spacing-gap: 0.5rem;
+  --widget-calendar-spacing-x: 0.5rem;
+  --widget-calendar-spacing-y: 0.75rem;
+  --widget-calendar-weight-border: 0.062rem;
+  --widget-payments-default-color-background: #ffffff;
+  --widget-payments-color-title: #2f2f2f;
+  --widget-payments-color-text: #595959;
+  --widget-payments-hover-color-background: #f8f8f8;
+  --widget-payments-focus-color-background: #ffffff;
+  --widget-payments-radius: 0.5rem;
+  --widget-payments-spacing-gap: 0.5rem;
+  --widget-payments-spacing-x: 0.5rem;
+  --widget-payments-spacing-y: 0.5rem;
+  --breadcrumbs-breadcrumb-link-default-color-text: #595959;
+  --breadcrumbs-breadcrumb-link-default-color-icon: #595959;
+  --breadcrumbs-breadcrumb-link-default-spacing-gap-y: 0.25rem;
+  --breadcrumbs-breadcrumb-link-active-color-text: #2f2f2f;
+  --breadcrumbs-breadcrumb-link-active-color-icon: #2f2f2f;
+  --breadcrumbs-breadcrumb-link-active-spacing-gap-y: 0.25rem;
+  --breadcrumbs-breadcrumb-link-hover-color-text: #0e8a0e;
+  --breadcrumbs-breadcrumb-link-hover-color-icon: #0e8a0e;
+  --breadcrumbs-breadcrumb-link-hover-spacing-gap-y: 0.25rem;
+  --breadcrumbs-breadcrumb-link-spacing-gap-y: 0.25rem;
+  --breadcrumbs-copy-icon-default-color: #2f2f2f;
+  --breadcrumbs-copy-icon-hover-color: #2f2f2f;
+  --breadcrumbs-copy-icon-hover-color-background: #efefef;
+  --breadcrumbs-copy-icon-number: 6.188rem;
+  --breadcrumbs-elipsis-default-color: #2f2f2f;
+  --breadcrumbs-elipsis-hover-color: #2f2f2f;
+  --breadcrumbs-elipsis-hover-colour-background: #efefef;
+  --breadcrumbs-elipsis-radius: 6.188rem;
+  --breadcrumbs-divider-default-color: #595959;
+  --breadcrumbs-spacing-gap-y: 0.25rem;
+  --breadcrumbs-spacing-gap-y: 0.5rem; /* stylelint-disable-line declaration-block-no-duplicate-custom-properties */
+  --filters-default-color-background: #ffffff;
+  --filters-color-text: #2f2f2f;
+  --filters-color-icon: #0e8a0e;
+  --filters-hover-color-background: #efefef;
+  --filters-color-border: #efefef;
+  --filters-spacing-x: 0.5rem;
+  --filters-spacing-gap-y: 0.5rem;
+  --filters-spacing-gap-x: 0.25rem;
+  --filters-radius: 0.5rem;
+  --filters-chip-container-spacing-gap-y: 0.5rem;
+  --filters-spacing-y: 0.5rem;
+  --form-field-pill-default-color-background: #f8f8f8;
+  --form-field-pill-default-color-text: #2f2f2f;
+  --form-field-pill-default-color-icon: #2f2f2f;
+  --form-field-pill-x-icon-default-color-icon: #595959;
+  --form-field-pill-x-icon-hover-color-background: #595959;
+  --form-field-pill-x-icon-hover-color-icon: #f8f8f8;
+  --form-field-pill-hover-color-background: #efefef;
+  --form-field-pill-hover-color-text: #2f2f2f;
+  --form-field-pill-hover-color-icon: #2f2f2f;
+  --form-field-pill-placeholder-color-text: #595959;
+  --form-field-combobox-placeholder-color-background: #ffffff;
+  --form-field-combobox-placeholder-color-border: #dfdfdf;
+  --form-field-combobox-hover-color-border: #7e7e7e;
+  --form-field-combobox-hover-color-background: #ffffff;
+  --form-field-combobox-focus-color-border: #0e8a0e;
+  --form-field-combobox-focus-color-background: #ffffff;
+  --form-field-combobox-error-color-border: #c93232;
+  --form-field-combobox-error-color-background: #ffffff;
+  --form-field-combobox-error-color-error-text: #595959;
+  --form-field-combobox-error-color-error-icon: #c93232;
+  --form-field-combobox-disabled-color-background: #efefef;
+  --form-field-combobox-disabled-color-border: #dfdfdf;
+  --form-field-combobox-default-color-background: #ffffff;
+  --form-field-combobox-default-color-border: #dfdfdf;
+  --form-field-combobox-help-text-default-color-text: #0e8a0e;
+  --form-field-combobox-help-text-default-color-icon: #0e8a0e;
+  --form-field-combobox-help-text-hover-color-text: #005700;
+  --form-field-combobox-help-text-hover-color-icon: #005700;
+  --form-field-combobox-form-numeric: 0rem;
+  --form-field-icon-default-color-icon: #2f2f2f;
+  --form-field-icon-default-color-background: #ffffff;
+  --form-field-icon-hover-color-background: #f8f8f8;
+  --form-field-icon-hover-color-icon: #2f2f2f;
+  --form-field-icon-disabled-color-background: #ffffff;
+  --form-field-icon-disabled-color-icon: #b3b3b3;
+  --form-field-icon-pressed-color-background: #efefef;
+  --form-field-icon-pressed-color-icon: #2f2f2f;
+  --form-field-icon-radius: 6.188rem;
+  --form-field-label-color-text: #2f2f2f;
+  --form-field-label-color-icon: #2f2f2f;
+  --form-field-spacing-x: 0.25rem;
+  --form-field-radius: 0.5rem;
+  --form-field-spacing-y: 0.25rem;
+  --tabs-tab-item-active-default-color-line: #0e8a0e;
+  --tabs-tab-item-active-default-color-text: #0e8a0e;
+  --tabs-tab-item-active-default-color-icon: #0e8a0e;
+  --tabs-tab-item-active-color-focus: #3cad51;
+  --tabs-tab-item-active-focussed-color-text: #0e8a0e;
+  --tabs-tab-item-active-focussed-color-icon: #0e8a0e;
+  --tabs-tab-item-active-focussed-color-line: #0e8a0e;
+  --tabs-tab-item-active-focussed-focus: #3cad51;
+  --tabs-tab-item-inactive-default-color-text: #2f2f2f;
+  --tabs-tab-item-inactive-default-color-icon: #2f2f2f;
+  --tabs-tab-item-inactive-hover-color-line: #d1d1d1;
+  --tabs-tab-item-inactive-hover-color-text: #202020;
+  --tabs-tab-item-inactive-hover-color-icon: #202020;
+  --tabs-tab-item-inactive-focussed-color-focus: #3cad51;
+  --tabs-tab-item-inactive-focussed-color-text: #2f2f2f;
+  --tabs-tab-item-inactive-focussed-color-icon: #2f2f2f;
+  --tabs-tab-item-color-text: #2f2f2f;
+  --tabs-tab-item-spacing-gap-x: 0.5rem;
+  --tabs-tab-item-spacing-x: 0.75rem;
+  --tabs-tab-item-spacing-y: 0.25rem;
+  --tabs-color-line: #dfdfdf;
+  --tabs-text: #2f2f2f;
+  --form-dropdown-form-drop-item-default-color-background: #ffffff;
+  --form-dropdown-form-drop-item-default-color-text: #2f2f2f;
+  --form-dropdown-form-drop-item-default-color-icon: #2f2f2f;
+  --form-dropdown-form-drop-item-hover-color-background: #f8f8f8;
+  --form-dropdown-form-drop-item-hover-color-text: #2f2f2f;
+  --form-dropdown-form-drop-item-hover-color-icon: #2f2f2f;
+  --form-dropdown-form-drop-item-active-color-background: #f0faf3;
+  --form-dropdown-form-drop-item-active-color-text: #024002;
+  --form-dropdown-form-drop-item-active-color-icon: #024002;
+  --form-dropdown-form-drop-item-focus-default-color-focus: #0e8a0e;
+  --form-dropdown-form-drop-item-focus-default-color-background: #ffffff;
+  --form-dropdown-form-drop-item-focus-default-color-text: #2f2f2f;
+  --form-dropdown-form-drop-item-focus-default-color-icon: #2f2f2f;
+  --form-dropdown-form-drop-item-title-color-text: #2f2f2f;
+  --form-dropdown-form-drop-item-title-color-line: #efefef;
+  --form-dropdown-form-drop-item-focus-hover-color-background: #f8f8f8;
+  --form-dropdown-form-drop-item-focus-hover-color-text: #2f2f2f;
+  --form-dropdown-form-drop-item-focus-hover-color-icon: #2f2f2f;
+  --form-dropdown-form-drop-item-focus-hover-color-focus: #2f2f2f;
+  --form-dropdown-form-drop-item-spacing-x: 0.5rem;
+  --form-dropdown-form-drop-item-spacing-gap-y: 0.5rem;
+  --form-dropdown-form-drop-item-radius: 0.5rem;
+  --form-dropdown-form-drop-item-spacing-y: 0.5rem;
+  --form-dropdown-color-background: #ffffff;
+  --form-dropdown-spacing-x: 0.5rem;
+  --form-dropdown-radius: 0.5rem;
+  --form-dropdown-spacing-y: 0.5rem;
+  --checkbox-input-control-unchecked-default-color-border: #7e7e7e;
+  --checkbox-input-control-unchecked-default-color-background: #ffffff;
+  --checkbox-input-control-unchecked-default-color-focus: #3cad51;
+  --checkbox-input-control-unchecked-hover-color-border: #474747;
+  --checkbox-input-control-unchecked-hover-color-background: #ffffff;
+  --checkbox-input-control-unchecked-disabled-color-background: #efefef;
+  --checkbox-input-control-unchecked-disabled-color-border: #b3b3b3;
+  --checkbox-input-control-unchecked-weight-border: 0.062rem;
+  --checkbox-input-control-checked-default-color-background: #0e8a0e;
+  --checkbox-input-control-checked-default-color-icon: #ffffff;
+  --checkbox-input-control-checked-disabled-color-background: #b3b3b3;
+  --checkbox-input-control-checked-disabled-color-icon: #ffffff;
+  --checkbox-input-control-checked-hover-color-background: #005700;
+  --checkbox-input-control-checked-hover-color-icon: #ffffff;
+  --checkbox-input-control-checked-focus-color-background: #0e8a0e;
+  --checkbox-input-control-checked-focus-color-focus: #3cad51;
+  --checkbox-input-control-indeterminate-default-color-background: #0e8a0e;
+  --checkbox-input-control-indeterminate-default-color-icon: #ffffff;
+  --checkbox-input-control-indeterminate-hover-color-background: #005700;
+  --checkbox-input-control-indeterminate-hover-color-icon: #ffffff;
+  --checkbox-input-control-indeterminate-disabled-color-background: #b3b3b3;
+  --checkbox-input-control-indeterminate-disabled-color-icon: #ffffff;
+  --checkbox-input-control-indeterminate-focus-color-background: #0e8a0e;
+  --checkbox-input-control-indeterminate-focus-color-focus: #3cad51;
+  --checkbox-input-control-indeterminate-focus-color-icon: #ffffff;
+  --checkbox-input-control-radius: 0.5rem;
+  --checkbox-default-color-text: #2f2f2f;
+  --checkbox-default-disabled-color-text: #595959;
+  --checkbox-default-focus: #3cad51;
+  --checkbox-hover-color-text: #2f2f2f;
+  --checkbox-selected-color-text: #2f2f2f;
+  --checkbox-selected-disabled-color-text: #595959;
+  --checkbox-selected-focus: #3cad51;
+  --checkbox-radius: 0.5rem;
+  --checkbox-spacing-padding: 0.5rem;
+  --checkbox-spacing-gap-y: 0.5rem;
+  --checkbox-group-spacing-gap-y: 0.5rem;
+  --radio-button-default-color-border: #7e7e7e;
+  --radio-button-default-color-background: #ffffff;
+  --radio-button-default-color-text: #2f2f2f;
+  --radio-button-hover-color-border: #2f2f2f;
+  --radio-button-hover-color-background: #ffffff;
+  --radio-button-hover-color-text: #2f2f2f;
+  --radio-button-selected-color-border: #0e8a0e;
+  --radio-button-selected-color-background: #ffffff;
+  --radio-button-selected-color-check: #0e8a0e;
+  --radio-button-selected-color-text: #2f2f2f;
+  --radio-button-selected-hover-color-border: #005700;
+  --radio-button-selected-hover-color-background: #ffffff;
+  --radio-button-selected-hover-color-check: #005700;
+  --radio-button-selected-hover-color-text: #2f2f2f;
+  --radio-button-disabled-color-background: #efefef;
+  --radio-button-disabled-color-border: #7e7e7e;
+  --radio-button-disabled-color-text: #595959;
+  --radio-button-disabled-color-check: #7e7e7e;
+  --radio-button-spacing-gap-y: 0.5rem;
+  --radio-button-spacing-x: 0.5rem;
+  --radio-button-spacing-gap-x: 0.5rem;
+  --toggle-off-default-color-dot: #7e7e7e;
+  --toggle-off-default-color-border: #7e7e7e;
+  --toggle-off-default-color-background: #ffffff;
+  --toggle-off-hover-color-dot: #595959;
+  --toggle-off-hover-color-border: #595959;
+  --toggle-off-hover-color-background: #f8f8f8;
+  --toggle-off-focus-color-dot: #7e7e7e;
+  --toggle-off-focus-color-border: #7e7e7e;
+  --toggle-off-focus-color-background: #ffffff;
+  --toggle-off-disabled-color-dot: #d1d1d1;
+  --toggle-off-disabled-color-border: #d1d1d1;
+  --toggle-off-disabled-color-background: #ffffff;
+  --toggle-off-active-color-dot: #2f2f2f;
+  --toggle-off-active-color-border: #024002;
+  --toggle-off-active-color-background: #efefef;
+  --toggle-on-active-color-dot: #efefef;
+  --toggle-on-active-color-border: #024002;
+  --toggle-on-active-color-background: #024002;
+  --toggle-on-default-color-dot: #ffffff;
+  --toggle-on-default-color-border: #0b800b;
+  --toggle-on-default-color-background: #0b800b;
+  --toggle-on-hover-color-dot: #f8f8f8;
+  --toggle-on-hover-color-border: #005700;
+  --toggle-on-hover-color-background: #005700;
+  --toggle-on-focus-color-dot: #ffffff;
+  --toggle-on-focus-color-border: #0b800b;
+  --toggle-on-focus-color-background: #0b800b;
+  --toggle-on-disabled-color-dot: #f8f8f8;
+  --toggle-on-disabled-color-border: #d1d1d1;
+  --toggle-on-disabled-color-background: #d1d1d1;
+  --toggle-radius: 1rem;
+  --toggle-weight-border: 0.062rem;
+  --kpi-color-benchmark-text: #7e7e7e;
+  --kpi-color-benchmark-text-bg: #efefef;
+  --kpi-display-text-danger-color-text: #920a0a;
+  --kpi-display-text-warning-color-text: #a74102;
+  --kpi-display-text-success-color-text: #026319;
+  --kpi-display-text-info-color-text: #024f83;
+  --kpi-display-text-caution-color-text: #7d5400;
+  --kpi-display-text-default-color-text: #3b3b3b;
+  --kpi-color-background: #ffffff;
+  --kpi-spacing-padding: 1rem;
+  --kpi-spacing-x: 1rem;
+  --kpi-radius: 0.5rem;
+  --banner-warning-color-background: #fffaf5;
+  --banner-warning-color-border: #e4720d;
+  --banner-warning-color-text: #611f00;
+  --banner-warning-color-icon: #611f00;
+  --banner-destructive-color-background: #fff5f5;
+  --banner-destructive-color-border: #c93232;
+  --banner-destructive-color-text: #610202;
+  --banner-destructive-color-icon: #610202;
+  --banner-neutral-color-border: #b3b3b3;
+  --banner-neutral-color-text: #2f2f2f;
+  --banner-neutral-color-icon: #2f2f2f;
+  --banner-info-color-background: #f5fbff;
+  --banner-info-color-border: #2c8bca;
+  --banner-info-color-text: #053a61;
+  --banner-info-color-icon: #053a61;
+  --banner-spacing-gap: 1rem;
+  --banner-spacing-x: 1rem;
+  --banner-spacing-y: 1rem;
+  --banner-radius: 0.5rem;
+  --icons-icon-default: #2f2f2f;
+  --slideover-color-text: #2f2f2f;
+  --slideover-overlay-color-background: rgb(32 32 32 / 50%);
+  --slideover-color-background: #f8f8f8;
+  --slideover-header-color-background: #ffffff;
+  --slideover-header-color-icon: #2f2f2f;
+  --slideover-header-color-icon-hover: #f8f8f8;
+  --slideover-header-color-text: #2f2f2f;
+  --slideover-header-spacing-padding: 1rem;
+  --slideover-header-icon-radius: 1rem;
+  --slideover-footer-color-background: #ffffff;
+  --slideover-footer-spacing-padding: 1rem;
+  --slideover-footer-spacing-gap-y: 1rem;
+  --slideover-radius: 0.5rem;
+  --arbor-logo-top-1: #f7931e;
+  --arbor-logo-top-2: #d58822;
+  --arbor-logo-text: #ffffff;
+  --arbor-logo-right-1: #deee21;
+  --arbor-logo-right-2: #96ba0f;
+  --arbor-logo-bottom-1: #afd318;
+  --arbor-logo-bottom-2: #68aa22;
+  --arbor-logo-left-1: #7dba3c;
+  --arbor-logo-left-2: #a0861a;
+  --hyperlink-default: #0b800b;
+  --hyperlink-hover: #005700;
+  --hyperlink-pressed: #024002;
+  --type-body-hyperlink-colour: #0b800b;
+  --type-body-hyperlink-family: Inter;
+  --type-body-hyperlink-size: 0.812rem;
+  --type-body-hyperlink-weight: 31.25rem;
+  --type-body-p-family: Inter;
+  --type-body-p-size: 0.812rem;
+  --type-body-p-weight: 25rem;
+  --type-body-bold-family: Inter;
+  --type-body-bold-size: 0.812rem;
+  --type-body-bold-weight: 37.5rem;
+  --type-headings-h1-family: Inter;
+  --type-headings-h1-size: 1.688rem;
+  --type-headings-h1-weight: 37.5rem;
+  --type-headings-h2-family: Inter;
+  --type-headings-h2-size: 1.375rem;
+  --type-headings-h2-weight: 37.5rem;
+  --type-headings-h3-family: Inter;
+  --type-headings-h3-size: 1.125rem;
+  --type-headings-h3-weight: 37.5rem;
+  --type-headings-h4-family: Inter;
+  --type-headings-h4-size: 1rem;
+  --type-headings-h4-weight: 600;
+  --type-buttons-button-m-family: Inter;
+  --type-buttons-button-m-size: 0.875rem;
+  --type-buttons-button-m-weight: 37.5rem;
+  --type-buttons-button-s-family: Inter;
+  --type-buttons-button-s-size: 0.812rem;
+  --type-buttons-button-s-weight: 37.5rem;
+  --type-display-display-1-family: Inter;
+  --type-display-display-1-size: 2.5rem;
+  --type-display-display-1-weight: 43.75rem;
+  --modal-overlay-color-background: rgb(32 32 32 / 50%);
+  --modal-color-background: #f8f8f8;
+  --modal-header-color-background: #ffffff;
+  --modal-header-color-icon: #2f2f2f;
+  --modal-header-color-text: #2f2f2f;
+  --modal-header-color-icon-hover: #f8f8f8;
+  --modal-header-spacing-padding: 1rem;
+  --modal-header-radius-icon: 1rem;
+  --modal-footer-color-background: #ffffff;
+  --modal-footer-spacing-padding: 1rem;
+  --modal-footer-spacing-gap-y: 1rem;
+  --modal-radius: 0.5rem;
+  --page-heading-color-text: #202020;
+  --page-heading-spacing-gap: 0.5rem;
+  --card-default-color-background: #ffffff;
+  --card-default-color-text: #2f2f2f;
+  --card-default-color-icon: #2f2f2f;
+  --card-default-color-border: #efefef;
+  --card-hover-color-background: #ffffff;
+  --card-hover-color-text: #2f2f2f;
+  --card-hover-color-icon: #2f2f2f;
+  --card-hover-color-border: #efefef;
+  --card-focus-color-background: #ffffff;
+  --card-focus-color-text: #2f2f2f;
+  --card-focus-color-icon: #2f2f2f;
+  --card-focus-focus: #3cad51;
+  --card-focus-color-border: #efefef;
+  --card-radius: 0.5rem;
+  --card-spacing-x: 1.5rem;
+  --card-spacing-gap-y: 1rem;
+  --card-spacing-gap-x: 1rem;
+  --card-spacing-y: 1.5rem;
+  --page-sign-in-color-background: #fffcf8;
+  --page-color-background: #f8f8f8;
+  --form-dropdown-multi-line-form-drop-item-multi-color-background: #ffffff;
+  --form-dropdown-multi-line-form-drop-item-multi-default-color-background: #ffffff;
+  --form-dropdown-multi-line-form-drop-item-multi-default-color-text-1: #2f2f2f;
+  --form-dropdown-multi-line-form-drop-item-multi-default-color-icon: #2f2f2f;
+  --form-dropdown-multi-line-form-drop-item-multi-default-color-text-2: #595959;
+  --form-dropdown-multi-line-form-drop-item-multi-default-focus-color-background: #ffffff;
+  --form-dropdown-multi-line-form-drop-item-multi-default-focus-color-text-1: #2f2f2f;
+  --form-dropdown-multi-line-form-drop-item-multi-default-focus-color-icon: #2f2f2f;
+  --form-dropdown-multi-line-form-drop-item-multi-default-focus-color-focus: #3cad51;
+  --form-dropdown-multi-line-form-drop-item-multi-default-focus-color-text-2: #595959;
+  --form-dropdown-multi-line-form-drop-item-multi-hover-color-background: #f8f8f8;
+  --form-dropdown-multi-line-form-drop-item-multi-hover-color-text-1: #2f2f2f;
+  --form-dropdown-multi-line-form-drop-item-multi-hover-color-text-2: #595959;
+  --form-dropdown-multi-line-form-drop-item-multi-hover-color-icon: #2f2f2f;
+  --form-dropdown-multi-line-form-drop-item-multi-active-color-background: #f0faf3;
+  --form-dropdown-multi-line-form-drop-item-multi-active-color-text-1: #024002;
+  --form-dropdown-multi-line-form-drop-item-multi-active-color-text-2: #005700;
+  --form-dropdown-multi-line-form-drop-item-multi-active-color-icon: #005700;
+  --form-dropdown-multi-line-form-drop-item-multi-active-focus-color-background: #f0faf3;
+  --form-dropdown-multi-line-form-drop-item-multi-active-focus-color-text-1: #024002;
+  --form-dropdown-multi-line-form-drop-item-multi-active-focus-color-text-2: #005700;
+  --form-dropdown-multi-line-form-drop-item-multi-active-focus-color-icon: #005700;
+  --form-dropdown-multi-line-form-drop-item-multi-active-focus-color-focus: #3cad51;
+  --form-dropdown-multi-line-form-drop-item-multi-base-spacing-padding: 0.5rem;
+  --form-dropdown-multi-line-form-drop-item-multi-base-spacing-gap-x: 0.5rem;
+  --form-dropdown-multi-line-form-drop-item-multi-base-radius: 0.5rem;
+  --form-dropdown-multi-line-color-background: #ffffff;
+  --form-dropdown-multi-line-radius: 0.5rem;
+  --form-dropdown-multi-line-spacing-padding: 0.5rem;
+  --form-dropdown-multi-line-spacing-gap-x: 0.5rem;
+  --focus-color-focus: #3cad51;
+  --focus-border: 0.188rem;
+  --tables-controls-color-icon: #2f2f2f;
+  --tables-controls-icon-default-color-background: #ffffff;
+  --tables-controls-icon-hover-color-background: #f8f8f8;
+  --tables-controls-icon-focus-color-background: #ffffff;
+  --tables-controls-icon-deactivated-color-background: #ffffff;
+  --tables-controls-icon-deactivated-color-icon: #920a0a;
+  --tables-controls-spacing-gap: 0.5rem;
+  --tables-controls-spacing-y: 0.5rem;
+  --tables-footer-color-text: #2f2f2f;
+  --tables-footer-color-background: #ffffff;
+  --tables-ag-grid-color-text: #202020;
+  --tables-ag-grid-rows-odd-color-background: #ffffff;
+  --tables-ag-grid-rows-even-color-background: #f8f8f8;
+  --tables-ag-grid-rows-color-border: #efefef;
+  --tables-ag-grid-rows-headers-color-background: #f8f8f8;
+  --tables-ag-grid-rows-headers-color-divider: #dfdfdf;
+  --tables-ag-grid-rows-headers-color-icons: #7e7e7e;
+  --tables-ag-grid-rows-headers-color-text: #2f2f2f;
+  --tables-ag-grid-rows-xsmall-spacing-y: 0.5rem;
+  --tables-ag-grid-rows-small-spacing-y: 0.75rem;
+  --tables-ag-grid-rows-medium-spacing-y: 1rem;
+  --tables-ag-grid-rows-large-spacing-y: 1.5rem;
+  --tables-ag-grid-rows-weight-border: 0.062rem;
+  --bg: #ffffff;
+  --avatar-small-initials-green-default-color-background: #d7ebd2;
+  --avatar-small-initials-green-color-text: #002a00;
+  --avatar-small-initials-green-color-border: #c6e8be;
+  --avatar-small-initials-green-hover-color-background: #c6e8be;
+  --avatar-small-initials-orange-color-border: #efe0bc;
+  --avatar-small-initials-orange-color-text: #7e3e00;
+  --avatar-small-initials-orange-default-color-background: #f7eed8;
+  --avatar-small-initials-orange-hover-color-background: #efe0bc;
+  --avatar-small-initials-blue-color-border: #c6e1ef;
+  --avatar-small-initials-blue-color-text: #003d69;
+  --avatar-small-initials-blue-default-color-background: #e1eef5;
+  --avatar-small-initials-blue-hover-color-background: #c6e1ef;
+  --avatar-small-initials-purple-color-border: #e2dcef;
+  --avatar-small-initials-purple-color-text: #472b61;
+  --avatar-small-initials-purple-default-color-background: #eeebf4;
+  --avatar-small-initials-purple-hover-color-background: #e2dcef;
+  --avatar-small-initials-yellow-color-border: #ede6c7;
+  --avatar-small-initials-yellow-color-text: #7e5a00;
+  --avatar-small-initials-yellow-default-color-background: #f7f2dd;
+  --avatar-small-initials-yellow-hover-color-background: #ede6c7;
+  --avatar-small-initials-teal-color-border: #cbefed;
+  --avatar-small-initials-teal-color-text: #0a685b;
+  --avatar-small-initials-teal-default-color-background: #e4f4f3;
+  --avatar-small-initials-teal-hover-color-background: #cbefed;
+  --avatar-small-initials-salmon-color-border: #f4d8d1;
+  --avatar-small-initials-salmon-color-text: #7a0100;
+  --avatar-small-initials-salmon-default-color-background: #f6e5e1;
+  --avatar-small-initials-salmon-hover-color-background: #f4d8d1;
+  --avatar-small-initials-grey-color-border: #efefef;
+  --avatar-small-initials-grey-color-text: #2f2f2f;
+  --avatar-small-initials-grey-default-color-background: #f8f8f8;
+  --avatar-small-initials-grey-hover-color-background: #efefef;
+  --avatar-small-initials-see-more-color-border: #efefef;
+  --avatar-small-initials-see-more-color-icon: #2f2f2f;
+  --avatar-small-initials-see-more-default-color-background: #f8f8f8;
+  --avatar-small-initials-see-more-hover-color-background: #efefef;
+  --avatar-small-initials-radius: 6.188rem;
+  --avatar-small-color-border: #efefef;
+  --avatar-small-color-background: #f8f8f8;
+  --avatar-small-radius: 6.188rem;
+  --avatar-small-size: 1.25rem;
+  --avatar-medium-color-border: #efefef;
+  --avatar-medium-color-text: #2f2f2f;
+  --avatar-medium-color-background: #f8f8f8;
+  --avatar-medium-radius: 6.188rem;
+  --avatar-medium-size: 2rem;
+  --avatar-large-color-border: #efefef;
+  --avatar-large-color-text: #2f2f2f;
+  --avatar-large-color-background: #f8f8f8;
+  --avatar-large-radius: 0.5rem;
+  --avatar-large-size: 3rem;
+  --avatar-extra-large-color-border: #efefef;
+  --avatar-extra-large-color-text: #2f2f2f;
+  --avatar-extra-large-color-background: #f8f8f8;
+  --avatar-extra-large-radius: 1rem;
+  --avatar-extra-large-size: 6rem;
+  --avatar-border-weight: 0.062rem;
+  --card-data-view-default-color-background: #f8f8f8;
+  --card-data-view-color-text: #2f2f2f;
+  --card-data-view-color-divider-x: #f8f8f8;
+  --card-data-view-hover-color-background: #efefef;
+  --card-data-view-radius: 0.5rem;
+  --card-data-view-spacing-x: 1rem;
+  --card-data-view-spacing-gap: 1rem;
+  --card-data-view-spacing-y: 1rem;
+  --date-picker-date-cell-inactive-default-color-background: #ffffff;
+  --date-picker-date-cell-inactive-default-color-text: #2f2f2f;
+  --date-picker-date-cell-inactive-hover-color-background: #f8f8f8;
+  --date-picker-date-cell-inactive-time-call-color-text: #ffffff;
+  --date-picker-date-cell-inactive-hover-radius: 6.188rem;
+  --date-picker-date-cell-today-default-color-background: #f0faf3;
+  --date-picker-date-cell-today-default-color-text: #0e8a0e;
+  --date-picker-date-cell-today-hover-color-background: #ceefd5;
+  --date-picker-date-cell-today-multi-select-color-background: #f0faf3;
+  --date-picker-date-cell-today-hover-color-text: #005700;
+  --date-picker-date-cell-today-hover-radius: 6.188rem;
+  --date-picker-date-cell-today-multi-select-radius: 6.188rem;
+  --date-picker-date-cell-selected-color-background: #0e8a0e;
+  --date-picker-date-cell-selected-color-text: #ffffff;
+  --date-picker-date-cell-selected-radius: 6.188rem;
+  --date-picker-date-cell-selected-multi-color-background: #0e8a0e;
+  --date-picker-date-cell-selected-multi-color-text: #ffffff;
+  --date-picker-date-cell-selected-multi-color-container-background: #f0faf3;
+  --date-picker-date-cell-selected-multi-range-color-background: #f0faf3;
+  --date-picker-date-cell-selected-multi-range-color-text: #2f2f2f;
+  --date-picker-date-cell-selected-multi-range-hover-color-background: #ceefd5;
+  --date-picker-date-cell-selected-multi-radius: 6.188rem;
+  --date-picker-date-cell-disabled-color-text: #7e7e7e;
+  --date-picker-date-cell-day-label-color-text: #595959;
+  --date-picker-date-cell-size: 2.75rem;
+  --date-picker-date-picker-text-default-color-text: #2f2f2f;
+  --date-picker-date-picker-text-default-color-icon: #2f2f2f;
+  --date-picker-date-picker-text-hover-color-background: #f8f8f8;
+  --date-picker-date-picker-text-active-color-background: #f0faf3;
+  --date-picker-date-picker-text-active-color-text: #005700;
+  --date-picker-date-picker-text-active-color-icon: #005700;
+  --date-picker-date-picker-text-hover-radius: 6.188rem;
+  --date-picker-date-picker-text-gap-y: 0.25rem;
+  --date-picker-date-picker-text-spacing-y: 0.75rem;
+  --date-picker-date-picker-text-spacing-x: 0.5rem;
+  --date-picker-time-cell-default-color-text: #2f2f2f;
+  --date-picker-time-cell-hover-color-background: #f8f8f8;
+  --date-picker-time-cell-active-color-background: #0e8a0e;
+  --date-picker-time-cell-active-color-text: #ffffff;
+  --date-picker-time-cell-default-color-background: #ffffff;
+  --date-picker-time-cell-radius: 0.5rem;
+  --date-picker-time-selector-color-background: #ffffff;
+  --date-picker-time-selector-radius: 0.5rem;
+  --date-picker-time-selector-spacing-padding: 0.25rem;
+  --date-picker-date-arrow-default-color-background: #ffffff;
+  --date-picker-date-arrow-hover-color-background: #f8f8f8;
+  --date-picker-date-arrow-color-icon: #2f2f2f;
+  --date-picker-date-arrow-radius: 6.188rem;
+  --date-picker-date-arrow-size: 2.75rem;
+  --date-picker-color-background: #ffffff;
+  --date-picker-spacing-y: 1rem;
+  --date-picker-spacing-x: 0.75rem;
+  --date-picker-radius: 0.5rem;
+  --date-picker-spacing-gap: 0.75rem;
+  --tooltip-color-background: #2f2f2f;
+  --tooltip-color-text: #ffffff;
+  --tooltip-spacing-x: 1rem;
+  --tooltip-spacing-y: 1rem;
+  --tooltip-homepage-color-background: #ffffff;
+  --tooltip-homepage-color-text: #2f2f2f;
+  --tooltip-homepage-color-border: #f8f8f8;
+  --tooltip-homepage-spacing-x: 1.5rem;
+  --tooltip-homepage-spacing-y: 1.5rem;
+  --tooltip-homepage-spacing-gap-y: 1rem;
+  --tooltip-homepage-radius: 0.5rem;
+  --navigation-top-nav-items-default-color-background: #ffffff;
+  --navigation-top-nav-items-default-color-text: #474747;
+  --navigation-top-nav-items-hover-color-text: #474747;
+  --navigation-top-nav-items-hover-color-background: #f8f8f8;
+  --navigation-top-nav-items-pressed-color-text: #005700;
+  --navigation-top-nav-items-pressed-color-background: #f0faf3;
+  --navigation-top-nav-items-focus-color-text: #474747;
+  --navigation-top-nav-items-focus-color-background: #ffffff;
+  --navigation-top-nav-items-spacing-gap: 0.25rem;
+  --navigation-top-nav-items-spacing-x: 1rem;
+  --navigation-top-nav-items-spacing-y: 0.5rem;
+  --navigation-top-nav-items-radius: 0.5rem;
+  --navigation-top-nav-items-drop-down-default-color-background: #ffffff;
+  --navigation-top-nav-items-drop-down-default-color-text: #202020;
+  --navigation-top-nav-items-drop-down-hover-color-background: #f8f8f8;
+  --navigation-top-nav-items-drop-down-hover-color-text: #202020;
+  --navigation-top-nav-items-drop-down-focus-color-background: #ffffff;
+  --navigation-top-nav-items-drop-down-focus-color-text: #202020;
+  --navigation-top-logo-school-color-border: #efefef;
+  --navigation-top-logo-school-color-background: #ffffff;
+  --navigation-top-logo-school-weight-border: 0.062rem;
+  --navigation-top-logo-arbor-lockup-color-border: #efefef;
+  --navigation-top-logo-arbor-lockup-weight-border: 0.062rem;
+  --navigation-top-logo-arbor-lockup-spacing-gap: 0.25rem;
+  --navigation-top-logo-weight-border: 0.062rem;
+  --navigation-top-nav-group-spacing-gap: 0.5rem;
+  --toast-destructive-color-background: #fff5f5;
+  --toast-destructive-color-border: #c93232;
+  --toast-destructive-icon-color-icon: #610202;
+  --toast-destructive-icon-default-color-background: #fff5f5;
+  --toast-destructive-icon-hover-color-background: #ffe2e2;
+  --toast-destructive-icon-focus-color-background: #fff5f5;
+  --toast-destructive-color-text: #610202;
+  --toast-info-color-background: #f5fbff;
+  --toast-info-color-border: #2c8bca;
+  --toast-info-icon-color-icon: #053a61;
+  --toast-info-icon-default-color-background: #f5fbff;
+  --toast-info-icon-hover-color-background: #c7e3f4;
+  --toast-info-icon-focus-color-background: #f5fbff;
+  --toast-info-color-text: #053a61;
+  --toast-success-color-border: #5ec171;
+  --toast-success-icon-color-icon: #024002;
+  --toast-success-icon-default-color-background: #f0faf3;
+  --toast-success-icon-hover-color-background: #d7f9e0;
+  --toast-success-icon-focus-color-background: #f0faf3;
+  --toast-success-color-text: #024002;
+  --toast-success-color-background: #f0faf3;
+  --toast-warning-color-background: #fffaf5;
+  --toast-warning-color-border: #e4720d;
+  --toast-warning-icon-color-icon: #611f00;
+  --toast-warning-icon-default-color-background: #fffaf5;
+  --toast-warning-icon-hover-color-background: #ffe8d0;
+  --toast-warning-icon-focus-color-background: #fffaf5;
+  --toast-warning-color-text: #611f00;
+  --toast-caution-color-background: #fffdf5;
+  --toast-caution-color-border: #edae06;
+  --toast-caution-icon-color-icon: #613f00;
+  --toast-caution-icon-default-color-background: #fffdf5;
+  --toast-caution-icon-hover-color-background: #fff3d0;
+  --toast-caution-icon-focus-color-background: #fffdf5;
+  --toast-caution-color-text: #613f00;
+  --toast-radius: 0.5rem;
+  --toast-spacing-gap: 1rem;
+  --toast-spacing-x: 1rem;
+  --toast-spacing-y: 1rem;
+  --tag-neutral-color-background: #f8f8f8;
+  --tag-neutral-color-text: #2f2f2f;
+  --tag-category-orange-color-background: #f7eed8;
+  --tag-category-orange-color-text: #7e3e00;
+  --tag-category-blue-color-background: #e1eef5;
+  --tag-category-blue-color-text: #003d69;
+  --tag-category-green-color-background: #d7ebd2;
+  --tag-category-green-color-text: #002a00;
+  --tag-category-purple-color-background: #eeebf4;
+  --tag-category-purple-color-text: #472b61;
+  --tag-category-teal-color-background: #e4f4f3;
+  --tag-category-teal-color-text: #0a685b;
+  --tag-category-salmon-color-background: #f6e5e1;
+  --tag-category-salmon-color-text: #7a0100;
+  --tag-category-yellow-color-background: #f7f2dd;
+  --tag-category-yellow-color-text: #7e5a00;
+  --tag-radius: 6.188rem;
+  --tag-spacing-x: 0.5rem;
+  --tag-spacing-y: 0.75rem;
+  --tag-spacing-gap-y: 0.5rem;
+  --font-family-display: Grenette;
+  --font-family-standard: Inter;
+  --font-size-7-27: 1.688rem;
+  --font-size-6-22: 1.375rem;
+  --font-size-5-18: 1.125rem;
+  --font-size-4-16: 1rem;
+  --font-size-3-14: 0.875rem;
+  --font-size-1-11: 0.688rem;
+  --font-size-8-40: 2.5rem;
+  --font-size-2-13: 0.812rem;
+  --font-weight-regular: 25rem;
+  --font-weight-medium: 31.25rem;
+  --font-weight-semi-bold: 37.5rem;
+  --font-weight-bold: 43.75rem;
+  --border-radius-xsmall: 0.25rem;
+  --border-radius-small: 0.5rem;
+  --border-radius-large: 1rem;
+  --border-radius-round: 6.188rem;
+  --spacing-xsmall: 0.25rem;
+  --spacing-small: 0.5rem;
+  --spacing-large: 1rem;
+  --spacing-xlarge: 1.5rem;
+  --spacing-xxlarge: 2rem;
+  --spacing-medium: 0.75rem;
+  --spacing-xxxlarge: 4rem;
+  --icon-size-xsmall: 0.75rem;
+  --icon-size-small: 1rem;
+  --icon-size-medium: 1.5rem;
+  --border-weight: 0.062rem;
+}
+
+.sr-only {
+  clip: rect(0 0 0 0); /* stylelint-disable-line property-no-deprecated */
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.medium-spacing-gap {
+  gap: var(--button-medium-spacing-gap-y);
+}
+
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+.ds-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--button-medium-spacing-gap-y);
+  border-radius: var(--button-medium-radius);
+  font-family: var(--font-family-standard);
+  font-weight: var(--font-weight-regular);
+  padding: var(--button-medium-spacing-y) var(--button-medium-spacing-x);
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  position: relative;
+  text-decoration: none;
+}
+.ds-button:focus {
+  outline: none;
+}
+.ds-button--M {
+  font-size: var(--font-size-3-14);
+}
+.ds-button--S {
+  font-size: var(--font-size-2-13);
+}
+.ds-button__text {
+  display: inline-block;
+  white-space: nowrap;
+}
+.ds-button--primary {
+  background-color: var(--button-medium-primary-default-color-background);
+  color: var(--button-medium-primary-default-color-text);
+  border: 1px solid var(--button-medium-primary-default-color-border);
+}
+.ds-button--primary:focus {
+  background-color: var(--button-medium-primary-focus-color-background);
+  color: var(--button-medium-primary-focus-color-text);
+  outline: 2px solid var(--button-medium-primary-focus-color-focus);
+}
+.ds-button--primary:hover {
+  background-color: var(--button-medium-primary-hover-color-background);
+  color: var(--button-medium-primary-hover-color-text);
+}
+.ds-button--primary:active {
+  background-color: var(--button-medium-primary-pressed-color-background);
+  color: var(--button-medium-primary-pressed-color-text);
+}
+.ds-button--secondary {
+  background-color: var(--button-medium-secondary-default-color-background);
+  color: var(--button-medium-secondary-default-color-text);
+  border: 1px solid var(--button-medium-secondary-default-color-border);
+}
+.ds-button--secondary:focus {
+  background-color: var(--button-medium-secondary-focus-color-background);
+  color: var(--button-medium-secondary-focus-color-text);
+  outline: 2px solid var(--button-medium-secondary-focus-color-focus);
+}
+.ds-button--secondary:hover {
+  background-color: var(--button-medium-secondary-hover-color-background);
+  color: var(--button-medium-secondary-hover-color-text);
+}
+.ds-button--secondary:active {
+  background-color: var(--button-medium-secondary-pressed-color-background);
+  color: var(--button-medium-secondary-pressed-color-text);
+}
+.ds-button--tertiary {
+  background-color: var(--button-medium-tertiary-default-color-background);
+  color: var(--button-medium-tertiary-default-color-text);
+  border: 1px solid var(--button-medium-tertiary-default-color-border);
+}
+.ds-button--tertiary:focus {
+  background-color: var(--button-medium-tertiary-focus-color-background);
+  color: var(--button-medium-tertiary-focus-color-text);
+  outline: 2px solid var(--button-medium-tertiary-focus-color-focus);
+}
+.ds-button--tertiary:hover {
+  background-color: var(--button-medium-tertiary-hover-color-background);
+  color: var(--button-medium-tertiary-hover-color-text);
+}
+.ds-button--tertiary:active {
+  background-color: var(--button-medium-tertiary-pressed-color-background);
+  color: var(--button-medium-tertiary-pressed-color-text);
+}
+.ds-button--primary-destructive {
+  background-color: var(--button-medium-primary-destructive-default-color-background);
+  color: var(--button-medium-primary-destructive-default-color-text);
+  border: 1px solid var(--button-medium-primary-destructive-default-color-border);
+}
+.ds-button--primary-destructive:focus {
+  background-color: var(--button-medium-primary-destructive-focus-color-background);
+  color: var(--button-medium-primary-destructive-focus-color-text);
+  outline: 2px solid var(--button-medium-primary-destructive-focus-color-focus);
+}
+.ds-button--primary-destructive:hover {
+  background-color: var(--button-medium-primary-destructive-hover-color-background);
+  color: var(--button-medium-primary-destructive-hover-color-text);
+}
+.ds-button--primary-destructive:active {
+  background-color: var(--button-medium-primary-destructive-pressed-color-background);
+  color: var(--button-medium-primary-destructive-pressed-color-text);
+}
+.ds-button--secondary-destructive {
+  background-color: var(--button-medium-secondary-destructive-default-color-background);
+  color: var(--button-medium-secondary-destructive-default-color-text);
+  border: 1px solid var(--button-medium-secondary-destructive-default-color-border);
+}
+.ds-button--secondary-destructive:focus {
+  background-color: var(--button-medium-secondary-destructive-focus-color-background);
+  color: var(--button-medium-secondary-destructive-focus-color-text);
+  outline: 2px solid var(--button-medium-secondary-destructive-focus-color-focus);
+}
+.ds-button--secondary-destructive:hover {
+  background-color: var(--button-medium-secondary-destructive-hover-color-background);
+  color: var(--button-medium-secondary-destructive-hover-color-text);
+}
+.ds-button--secondary-destructive:active {
+  background-color: var(--button-medium-secondary-destructive-pressed-color-background);
+  color: var(--button-medium-secondary-destructive-pressed-color-text);
+}
+.ds-button--text-link {
+  background-color: var(--button-medium-text-link-default-color-background);
+  color: var(--button-medium-text-link-default-color-text);
+  border: 1px solid var(--button-medium-text-link-default-color-border);
+}
+.ds-button--text-link:focus {
+  background-color: var(--button-medium-text-link-focus-color-background);
+  color: var(--button-medium-text-link-focus-color-text);
+  outline: 2px solid var(--button-medium-text-link-focus-color-focus);
+}
+.ds-button--text-link:hover {
+  background-color: var(--button-medium-text-link-hover-color-background);
+  color: var(--button-medium-text-link-hover-color-text);
+}
+.ds-button--text-link:active {
+  background-color: var(--button-medium-text-link-pressed-color-background);
+  color: var(--button-medium-text-link-pressed-color-text);
+}
+.ds-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.ds-heading {
+  padding: var(--page-heading-spacing-gap);
+  color: var(--page-heading-color-text);
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  justify-content: space-between;
+  box-sizing: border-box;
+  align-items: center;
+}
+.ds-heading__inner-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+h1.ds-heading {
+  font-family: var(--type-headings-h1-family);
+  font-size: var(--type-headings-h1-size);
+  font-weight: var(--type-headings-h1-weight);
+}
+
+h2.ds-heading {
+  font-family: var(--type-headings-h2-family);
+  font-size: var(--type-headings-h2-size);
+  font-weight: var(--type-headings-h2-weight);
+}
+
+h3.ds-heading {
+  font-family: var(--type-headings-h3-family);
+  font-size: var(--type-headings-h3-size);
+  font-weight: var(--type-headings-h3-weight);
+}
+
+h4.ds-heading {
+  font-family: var(--type-headings-h4-family);
+  font-size: var(--type-headings-h4-size);
+  font-weight: var(--type-headings-h4-weight);
+}
+
+.ds-card__container {
+  display: flex;
+  width: 348px;
+  padding: var(--card-spacing-y, 24px) var(--card-spacing-x, 24px);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--card-spacing-gap-y, 16px);
+  border-radius: var(--card-radius, 8px);
+  border: 1px solid var(--card-default-color-border, #efefef);
+  background: var(--card-default-color-background, #fff);
+  color: var(--card-default-color-text);
+  line-height: 1.5;
+}
+.ds-card__container:hover:not(.ds-card__container--disabled) {
+  border: 1px solid var(--card-hover-color-border, #efefef);
+  background: var(--card-hover-color-background, #fff);
+  box-shadow: 0 4px 12px 0 rgba(32, 32, 32, 0.08);
+}
+.ds-card__container:focus:not(.ds-card__container--disabled) {
+  border: 1px solid var(--card-focus-color-border, #efefef);
+  background: var(--card-focus-color-background, #fff);
+  box-shadow: 0 0 0 3px var(--button-medium-primary-focus-color-focus, #3cad51);
+}
+.ds-card__container--clickable {
+  cursor: pointer;
+}
+
+.ds-card__content {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--spacing-large, 16px);
+  width: 100%;
+}
+.ds-card__content .ds-card__icon-left {
+  flex-shrink: 0;
+}
+.ds-card__content .ds-card__text {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: var(--card-spacing-gap-x);
+  flex-grow: 1;
+}
+.ds-card__content .ds-card__text .ds-card__title {
+  margin: 0;
+  font-family: var(--type-headings-h4-family);
+  font-size: var(--type-headings-h4-size);
+  font-weight: var(--type-headings-h4-weight);
+}
+.ds-card__content .ds-card__text .ds-card__paragraph {
+  margin: 0;
+  font-family: var(--type-body-p-family);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--type-body-p-weight);
+}
+.ds-card__content .ds-card__icon-click {
+  flex-shrink: 0;
+}
+
+.ds-pill {
+  display: flex;
+  padding: var(--tag-spacing-x, 8px) var(--tag-spacing-y, 12px);
+  align-items: center;
+  gap: var(--tag-spacing-gap-y, 8px);
+  border-radius: var(--tag-radius, 99px);
+  flex-grow: 0;
+  width: fit-content;
+  /* typography/body/p1-reg */
+  font-family: var(--type-body-p-family, Inter);
+  font-size: var(--type-body-p-size, 13px);
+  font-style: normal;
+  font-weight: var(--type-body-p-weight, 400);
+  line-height: 150%; /* 19.5px */
+}
+.ds-pill--orange {
+  color: var(--tag-category-orange-color-text, #7E3E00);
+  background: var(--tag-category-orange-color-background, #F7EED8);
+}
+.ds-pill--blue {
+  color: var(--tag-category-blue-color-text);
+  background: var(--tag-category-blue-color-background);
+}
+.ds-pill--green {
+  color: var(--tag-category-green-color-text);
+  background: var(--tag-category-green-color-background);
+}
+.ds-pill--purple {
+  color: var(--tag-category-purple-color-text);
+  background: var(--tag-category-purple-color-background);
+}
+.ds-pill--teal {
+  color: var(--tag-category-teal-color-text);
+  background: var(--tag-category-teal-color-background);
+}
+.ds-pill--salmon {
+  color: var(--tag-category-salmon-color-text);
+  background: var(--tag-category-salmon-color-background);
+}
+.ds-pill--yellow {
+  color: var(--tag-category-yellow-color-text);
+  background: var(--tag-category-yellow-color-background);
+}
+
+/*# sourceMappingURL=index.css.map */