:root,
:host {
  --color-1-tint-15: #edffc8;
  --color-1-tint-10: #d5fe81;
  --color-1-tint-5: #9fe12d;
  --color-1: #73c41d;
  --color-1-shade-5: #1d9336;
  --color-1-shade-10: #00673b;
  --color-1-shade-15: #004c39;
  --color-2: #ff5f3f;
  --color-2-shade-5: #ce4537;
  --color-2-shade-10: #99292e;
  --color-3-shade-10: #AA410C;
  --color-4-tint-10: #fff58f;
  --color-4: #ffe619;
  --color-4-shade-15: #7c3000;
  --color-5-tint-15: #e5fdff;
  --color-5-tint-10: #a2e3ff;
  --color-5-tint-5: #5cc8ff;
  --color-5: #16acff;
  --color-5-shade-5: #1087cc;
  --color-5-shade-10: #095c8f;
  --color-5-shade-15: #002b4c;
  --color-8-tint-15: #e5ffe6;
  --color-8-tint-10: #b1f8df;
  --color-8: #48ead1;
  --color-8-shade-10: #1b7b7e;
  --color-black: #000;

  /* Rebrand colors */
  --color-white: #fff;
  --color-green: #599D15;
  --color-green-banner: #FFFCF3;
  --color-green-0: #F6FFE3;
  --color-green-1: #ECFFC7;
  --color-green-2: #D4FD80;
  --color-green-focus: #AAE868; /* was green 3 */
  --color-green-3: #599D15; /* was green 4 */
  --color-green-4: #2E7918; /* was green 5 */
  --color-green-5: #03551C; /* was green 6 */
  --color-blue-100: #EAF6FA;
  --color-blue-200: #e5f4f9;
  --color-azure-0: #E8F5FA;
  --color-azure-1: #77C6E3;
  --color-azure-2: #1599D3;
  --color-azure-3: #117EAC;
  --color-azure-4: #0E6487;
  --color-gray-0: #FAFAF8;
  --color-gray-1: #F5F4F0;
  --color-gray-2: #E4E3E0;
  --color-gray-3: #D4D2D0;
  --color-gray-4: #C6C2BF;
  --color-gray-5: #B5B2AF;
  --color-gray-6: #A5A29F;
  --color-gray-7: #95918F;
  --color-gray-8: #868180;
  --color-gray-9: #777270;
  --color-gray-10: #676260;
  --color-gray-11: #58524F;
  --color-gray-12: #48413F;
  --color-gray-13: #38312F;
  --color-teal-1: #2A9292; /* hrvs teal */
  --color-teal-2: #284D59;
  --color-rose-1: #FFAAB0;
  --color-rose-2: #E45160;
  --color-rose-3: #CE4755;
  --color-rose-4: #A73440;
  --color-tangerine-3: #BE5920;
  --color-dark-violet: #683180;

  /* body */
  --body-background-color: var(--color-white);
  --body-alt-background-color: var(--color-gray-10);
  --body-font-family: 'Inter', 'Lato', 'inter-fallback', arial; /* Lato font added as a fallback for in-app content */
  --body-font-size-heading-4: 1rem; /* 16px */
  --body-font-size-subheading-1: 1.3125rem; /* 21px */
  --body-font-size-subheading-2: 1.125rem; /* 18px */
  --body-font-size-caption-1: 1rem; /* 16px */
  --body-font-size-caption-2: 0.75rem; /* 12px */
  --body-font-size: 1rem; /* 16px */
  --body-font-size-table: 0.875rem; /* 14px */
  --body-font-size-small-buttons-and-forms: 0.75rem; /* 12px */
  --body-font-size-check-list: 1.25rem; /* 20px */
  --body-line-height-heading-4: 1.625rem; /* 26px */
  --body-line-height-subheading-1: 2rem; /* 32px */
  --body-line-height-subheading-2: 1.6875rem; /* 27px */
  --body-line-height-caption-1: 1.5rem; /* 24px */
  --body-line-height-caption-2: 0.9375rem; /* 15px */
  --body-line-height: 1.5rem; /* 24px */
  --body-line-height-table: 1.375rem; /* 22px */
  --body-line-height-small-buttons-and-forms: 1rem; /* 16px */
  --body-line-height-check-list: 1.75rem; /* 28px */
  --body-color: var(--color-gray-12);

  /* headings */
  --heading-font-family: 'Fields', 'Lato', 'fields-fallback', georgia; /* Lato font added as a fallback for in-app content */
  --heading-font-size-heading-1: 3.5rem; /* 56px */
  --heading-font-size-heading-2: 2.25rem; /* 36px */
  --heading-font-size-heading-3: 1.5rem; /* 24px */
  --heading-font-size-quote: 1.5rem; /* 24px */
  --heading-line-height-heading-1: 4.1875rem; /* 67px */
  --heading-line-height-heading-2: 2.875rem; /* 46px */
  --heading-line-height-heading-3: 1.875rem; /* 30px */
  --heading-line-height-quote: 2.25rem; /* 36px */
  --heading-color: var(--color-gray-12);

  /* Font weight */
  --typ-font-weight-regular: 400;
  --typ-font-weight-medium: 500;
  --typ-font-weight-semi-bold: 600;
  --typ-font-weight-bold: 700;

  /* Letter spacing */
  --typ-letter-spacing-md: 0.0938rem; /* 1.5px */
  --typ-letter-spacing-lg: 0.125rem; /* 2px */

  /* wrappers/containers sizes */
  --width-xxs: 360px;
  --width-xs: 560px;
  --width-sm: 760px;
  --width-md: 960px;
  --width-lg: 1160px;
  --width-xl: 1360px;
  --width-xxl: 1560px;
  --width-xxxl: 1920px;

  /* stylized font */
  --stylized-font-family: 'Permanent Marker', 'Comic Sans MS';

  /* radius */
  --border-radius: 1rem;

  /* button sizing */
  --button-padding-size-lg: 18px 40px;
  --button-font-size-lg: 16px;
  --button-line-height-size-lg: 20px;
  --button-padding-size-sm: 10px 30px;
  --button-font-size-sm: 16px;
  --button-line-height-size-sm: 18px;
  --button-letter-spacing: .5px;

  /* box-shadow */
  --box-shadow-transition-default: 0 0 0 0 rgb(0 0 0 / 0%);
  --box-shadow-1: 0 2px 5px 0 rgb(0 0 0 / 20%);
  --box-shadow-2: 0 30px 60px -40px rgb(31 38 23 / 50%);
  --box-shadow-3: 0 30px 60px -40px rgb(31 38 23 / 50%), 0 70px 100px -60px rgb(31 38 23 / 25%);
  --box-shadow-4: 0 68px 62px -35px rgb(54 63 58 / 50%);

  /* gray */
  --box-shadow-1-gray-shade5: 0 2px 5px 0 rgb(200 200 198 / 20%);
  --box-shadow-2-gray-shade5: 0 30px 60px -40px rgb(200 200 198 / 50%);
  --box-shadow-3-gray-shade5: 0 30px 60px -40px rgb(200 200 198 / 50%),
    0 70px 100px -60px rgb(200 200 198 / 25%);
  --box-shadow-4-gray-shade5: 0 68px 62px -35px rgb(200 200 198 / 20%);
  --box-shadow-1-gray-shade10: 0 2px 5px 0 rgb(98 100 103 / 20%);
  --box-shadow-2-gray-shade10: 0 30px 60px -40px rgb(98 100 103 / 50%);
  --box-shadow-3-gray-shade10: 0 30px 60px -40px rgb(98 100 103 / 50%),
    0 70px 100px -60px rgb(98 100 103 / 25%);
  --box-shadow-4-gray-shade10: 0 68px 62px -35px rgb(98 100 103 / 20%);

  /* green */
  --box-shadow-1-color1-shade5: 0 2px 5px 0 rgb(29 147 54 / 20%);
  --box-shadow-2-color1-shade5: 0 30px 60px -40px rgb(29 147 54 / 50%);
  --box-shadow-3-color1-shade5: 0 30px 60px -40px rgb(29 147 54 / 50%),
    0 70px 100px -60px rgb(29 147 54 / 25%);
  --box-shadow-4-color1-shade5: 0 68px 62px -35px rgb(29 147 54 / 20%);
  --box-shadow-1-color1-shade10: 0 2px 5px 0 rgb(0 103 59 / 20%);
  --box-shadow-2-color1-shade10: 0 30px 60px -40px rgb(0 103 59 / 50%);
  --box-shadow-3-color1-shade10: 0 30px 60px -40px rgb(0 103 59 / 50%),
    0 70px 100px -60px rgb(0 103 59 / 25%);
  --box-shadow-4-color1-shade10: 0 68px 62px -35px rgb(0 103 59 / 20%);

  /* red */
  --box-shadow-1-color2-shade5: 0 2px 5px 0 rgb(206 69 55 / 20%);
  --box-shadow-2-color2-shade5: 0 30px 60px -40px rgb(206 69 55 / 50%);
  --box-shadow-3-color2-shade5: 0 30px 60px -40px rgb(206 69 55 / 20%),
    0 70px 100px -60px rgb(206 69 55 / 20%);
  --box-shadow-4-color2-shade5: 0 68px 62px -35px rgb(206 69 55 / 20%);
  --box-shadow-1-color2-shade10: 0 2px 5px 0 rgb(153 41 46 / 20%);
  --box-shadow-2-color2-shade10: 0 30px 60px -40px rgb(153 41 46 / 50%);
  --box-shadow-3-color2-shade10: 0 30px 60px -40px rgb(153 41 46 / 20%),
    0 70px 100px -60px rgb(153 41 46 / 20%);
  --box-shadow-4-color2-shade10: 0 68px 62px -35px rgb(153 41 46 / 20%);

  /* orange */
  --box-shadow-1-color3-shade5: 0 2px 5px 0 rgb(210 105 20 / 20%);
  --box-shadow-2-color3-shade5: 0 30px 60px -40px rgb(210 105 20 / 50%);
  --box-shadow-3-color3-shade5: 0 30px 60px -40px rgb(210 105 20 / 20%),
    0 70px 100px -60px rgb(210 105 20 / 20%);
  --box-shadow-4-color3-shade5: 0 68px 62px -35px rgb(210 105 20 / 20%);
  --box-shadow-1-color3-shade10: 0 2px 5px 0 rgb(170 65 12 / 20%);
  --box-shadow-2-color3-shade10: 0 30px 60px -40px rgb(170 65 12 / 50%);
  --box-shadow-3-color3-shade10: 0 30px 60px -40px rgb(170 65 12 / 20%),
    0 70px 100px -60px rgb(170 65 12 / 20%);
  --box-shadow-4-color3-shade10: 0 68px 62px -35px rgb(170 65 12 / 20%);

  /* yellow */
  --box-shadow-1-color4-shade5: 0 2px 5px 0 rgb(219 180 18 / 20%);
  --box-shadow-2-color4-shade5: 0 30px 60px -40px rgb(219 180 18 / 50%);
  --box-shadow-3-color4-shade5: 0 30px 60px -40px rgb(219 180 18 / 20%),
    0 70px 100px -60px rgb(219 180 18 / 20%);
  --box-shadow-4-color4-shade5: 0 68px 62px -35px rgb(219 180 18 / 20%);
  --box-shadow-1-color4-shade10: 0 2px 5px 0 rgb(182 128 11 / 20%);
  --box-shadow-2-color4-shade10: 0 30px 60px -40px rgb(182 128 11 / 50%);
  --box-shadow-3-color4-shade10: 0 30px 60px -40px rgb(182 128 11 / 20%),
    0 70px 100px -60px rgb(182 128 11 / 20%);
  --box-shadow-4-color4-shade10: 0 68px 62px -35px rgb(182 128 11 / 20%);

  /* blue */
  --box-shadow-1-color5-shade5: 0 2px 5px 0 rgb(16 135 204 / 20%);
  --box-shadow-2-color5-shade5: 0 30px 60px -40px rgb(16 135 204 / 50%);
  --box-shadow-3-color5-shade5: 0 30px 60px -40px rgb(16 135 204 / 20%),
    0 70px 100px -60px rgb(16 135 204 / 20%);
  --box-shadow-4-color5-shade5: 0 68px 62px -35px rgb(16 135 204 / 20%);
  --box-shadow-1-color5-shade10: 0 2px 5px 0 rgb(9 92 143 / 20%);
  --box-shadow-2-color5-shade10: 0 30px 60px -40px rgb(9 92 143 / 50%);
  --box-shadow-3-color5-shade10: 0 30px 60px -40px rgb(9 92 143 / 20%),
    0 70px 100px -60px rgb(9 92 143 / 20%);
  --box-shadow-4-color5-shade10: 0 68px 62px -35px rgb(9 92 143 / 20%);

  /* purple */
  --box-shadow-1-color6-shade5: 0 2px 5px 0 rgb(121 79 205 / 20%);
  --box-shadow-2-color6-shade5: 0 30px 60px -40px rgb(121 79 205 / 50%);
  --box-shadow-3-color6-shade5: 0 30px 60px -40px rgb(121 79 205 / 20%),
    0 70px 100px -60px rgb(121 79 205 / 20%);
  --box-shadow-4-color6-shade5: 0 68px 62px -35px rgb(121 79 205 / 20%);
  --box-shadow-1-color6-shade10: 0 2px 5px 0 rgb(76 50 147 / 20%);
  --box-shadow-2-color6-shade10: 0 30px 60px -40px rgb(76 50 147 / 50%);
  --box-shadow-3-color6-shade10: 0 30px 60px -40px rgb(76 50 147 / 20%),
    0 70px 100px -60px rgb(76 50 147 / 20%);
  --box-shadow-4-color6-shade10: 0 68px 62px -35px rgb(76 50 147 / 20%);

  /* pink */
  --box-shadow-1-color7-shade5: 0 2px 5px 0 rgb(204 67 115 / 20%);
  --box-shadow-2-color7-shade5: 0 30px 60px -40px rgb(204 67 115 / 50%);
  --box-shadow-3-color7-shade5: 0 30px 60px -40px rgb(204 67 115 / 20%),
    0 70px 100px -60px rgb(204 67 115 / 20%);
  --box-shadow-4-color7-shade5: 0 68px 62px -35px rgb(204 67 115 / 20%);
  --box-shadow-1-color7-shade10: 0 2px 5px 0 rgb(150 39 93 / 20%);
  --box-shadow-2-color7-shade10: 0 30px 60px -40px rgb(150 39 93 / 50%);
  --box-shadow-3-color7-shade10: 0 30px 60px -40px rgb(150 39 93 / 20%),
    0 70px 100px -60px rgb(150 39 93 / 20%);
  --box-shadow-4-color7-shade10: 0 68px 62px -35px rgb(150 39 93 / 20%);

  /* teal */
  --box-shadow-1-color8-shade5: 0 2px 5px 0 rgb(52 185 172 / 20%);
  --box-shadow-2-color8-shade5: 0 30px 60px -40px rgb(52 185 172 / 50%);
  --box-shadow-3-color8-shade5: 0 30px 60px -40px rgb(52 185 172 / 20%),
    0 70px 100px -60px rgb(52 185 172 / 20%);
  --box-shadow-4-color8-shade5: 0 68px 62px -35px rgb(52 185 172 / 20%);
  --box-shadow-1-color8-shade10: 0 2px 5px 0 rgb(27 123 126 / 20%);
  --box-shadow-2-color8-shade10: 0 30px 60px -40px rgb(27 123 126 / 50%);
  --box-shadow-3-color8-shade10: 0 30px 60px -40px rgb(27 123 126 / 20%),
    0 70px 100px -60px rgb(27 123 126 / 20%);
  --box-shadow-4-color8-shade10: 0 68px 62px -35px rgb(27 123 126 / 20%);

  /* custom bullet svgs */
  --bullet-level1-gray: url('/icons/bullets/level1-gray.svg');
  --bullet-level2-gray: url('/icons/bullets/level2-gray.svg');
  --bullet-level3-gray: url('/icons/bullets/level3-gray.svg');
  --bullet-level1-green: url('/icons/bullets/level1-green.svg');
  --bullet-level2-green: url('/icons/bullets/level2-green.svg');
  --bullet-level3-green: url('/icons/bullets/level3-green.svg');
  --bullet-level1-red: url('/icons/bullets/level1-red.svg');
  --bullet-level2-red: url('/icons/bullets/level2-red.svg');
  --bullet-level3-red: url('/icons/bullets/level3-red.svg');
  --bullet-level1-orange: url('/icons/bullets/level1-orange.svg');
  --bullet-level2-orange: url('/icons/bullets/level2-orange.svg');
  --bullet-level3-orange: url('/icons/bullets/level3-orange.svg');
  --bullet-level1-yellow: url('/icons/bullets/level1-yellow.svg');
  --bullet-level2-yellow: url('/icons/bullets/level2-yellow.svg');
  --bullet-level3-yellow: url('/icons/bullets/level3-yellow.svg');
  --bullet-level1-blue: url('/icons/bullets/level1-blue.svg');
  --bullet-level2-blue: url('/icons/bullets/level2-blue.svg');
  --bullet-level3-blue: url('/icons/bullets/level3-blue.svg');
  --bullet-level1-purple: url('/icons/bullets/level1-purple.svg');
  --bullet-level2-purple: url('/icons/bullets/level2-purple.svg');
  --bullet-level3-purple: url('/icons/bullets/level3-purple.svg');
  --bullet-level1-pink: url('/icons/bullets/level1-pink.svg');
  --bullet-level2-pink: url('/icons/bullets/level2-pink.svg');
  --bullet-level3-pink: url('/icons/bullets/level3-pink.svg');
  --bullet-level1-teal: url('/icons/bullets/level1-teal.svg');
  --bullet-level2-teal: url('/icons/bullets/level2-teal.svg');
  --bullet-level3-teal: url('/icons/bullets/level3-teal.svg');

  /* Theme variables */
  --theme-base: var(--color-1);
  --theme-tint5: var(--color-1-tint-5);
  --theme-tint10: var(--color-1-tint-10);
  --theme-tint15: var(--color-1-tint-15);
  --theme-shade5: var(--color-1-shade-5);
  --theme-shade10: var(--color-1-shade-10);
  --theme-shade15: var(--color-1-shade-15);
  --secondary-theme-base: var(--color-1);
  --secondary-theme-tint5: var(--color-1-tint-5);
  --secondary-theme-tint10: var(--color-1-tint-10);
  --secondary-theme-tint15: var(--color-1-tint-15);
  --secondary-theme-shade5: var(--color-1-shade-5);
  --secondary-theme-shade10: var(--color-1-shade-10);
  --secondary-theme-shade15: var(--color-1-shade-15);
  --theme-bullet-level1: var(--bullet-level1-gray);
  --theme-bullet-level2: var(--bullet-level2-gray);
  --theme-bullet-level3: var(--bullet-level3-gray);
  --theme-shadow1-shade5: var(--box-shadow-1-color1-shade5);
  --theme-shadow2-shade5: var(--box-shadow-2-color1-shade5);
  --theme-shadow3-shade5: var(--box-shadow-3-color1-shade5);
  --theme-shadow4-shade5: var(--box-shadow-4-color1-shade5);
  --theme-shadow1-shade10: var(--box-shadow-1-color1-shade10);
  --theme-shadow2-shade10: var(--box-shadow-2-color1-shade10);
  --theme-shadow3-shade10: var(--box-shadow-3-color1-shade10);
  --theme-shadow4-shade10: var(--box-shadow-4-color1-shade10);
}

/* Theme Settings */
.green main,
div.green {
  --theme-base: var(--color-1);
  --theme-tint5: var(--color-1-tint-5);
  --theme-tint10: var(--color-1-tint-10);
  --theme-tint15: var(--color-1-tint-15);
  --theme-shade5: var(--color-1-shade-5);
  --theme-shade10: var(--color-1-shade-10);
  --theme-shade15: var(--color-1-shade-15);
  --theme-bullet-level1: var(--bullet-level1-green);
  --theme-bullet-level2: var(--bullet-level2-green);
  --theme-bullet-level3: var(--bullet-level3-green);
  --theme-shadow1-shade5: var(--box-shadow-1-color1-shade5);
  --theme-shadow2-shade5: var(--box-shadow-2-color1-shade5);
  --theme-shadow3-shade5: var(--box-shadow-3-color1-shade5);
  --theme-shadow4-shade5: var(--box-shadow-4-color1-shade5);
  --theme-shadow1-shade10: var(--box-shadow-1-color1-shade10);
  --theme-shadow2-shade10: var(--box-shadow-2-color1-shade10);
  --theme-shadow3-shade10: var(--box-shadow-3-color1-shade10);
  --theme-shadow4-shade10: var(--box-shadow-4-color1-shade10);
  --secondary-theme-base: var(--theme-base);
  --secondary-theme-tint5: var(--theme-tint5);
  --secondary-theme-tint10: var(--theme-tint10);
  --secondary-theme-tint15: var(--theme-tint15);
  --secondary-theme-shade5: var(--theme-shade5);
  --secondary-theme-shade10: var(--theme-shade10);
  --secondary-theme-shade15: var(--theme-shade15);
}

.blue main,
div.blue {
  --theme-base: var(--color-5);
  --theme-tint5: var(--color-5-tint-5);
  --theme-tint10: var(--color-5-tint-10);
  --theme-tint15: var(--color-5-tint-15);
  --theme-shade5: var(--color-5-shade-5);
  --theme-shade10: var(--color-5-shade-10);
  --theme-shade15: var(--color-5-shade-15);
  --theme-bullet-level1: var(--bullet-level1-blue);
  --theme-bullet-level2: var(--bullet-level2-blue);
  --theme-bullet-level3: var(--bullet-level3-blue);
  --theme-shadow1-shade5: var(--box-shadow-1-color5-shade5);
  --theme-shadow2-shade5: var(--box-shadow-2-color5-shade5);
  --theme-shadow3-shade5: var(--box-shadow-3-color5-shade5);
  --theme-shadow4-shade5: var(--box-shadow-4-color5-shade5);
  --theme-shadow1-shade10: var(--box-shadow-1-color5-shade10);
  --theme-shadow2-shade10: var(--box-shadow-2-color5-shade10);
  --theme-shadow3-shade10: var(--box-shadow-3-color5-shade10);
  --theme-shadow4-shade10: var(--box-shadow-4-color5-shade10);
  --secondary-theme-base: var(--theme-base);
  --secondary-theme-tint5: var(--theme-tint5);
  --secondary-theme-tint10: var(--theme-tint10);
  --secondary-theme-tint15: var(--theme-tint15);
  --secondary-theme-shade5: var(--theme-shade5);
  --secondary-theme-shade10: var(--theme-shade10);
  --secondary-theme-shade15: var(--theme-shade15);
}

.gray main,
div.gray{
  --theme-base: var(--color-gray-8);
  --theme-tint5: var(--color-gray-6);
  --theme-tint10: var(--color-gray-5);
  --theme-tint15: var(--color-gray-4);
  --theme-shade5: var(--color-gray-11);
  --theme-shade10: var(--color-gray-12);
  --theme-shade15: var(--color-gray-13);
  --theme-bullet-level1: var(--bullet-level1-gray);
  --theme-bullet-level2: var(--bullet-level2-gray);
  --theme-bullet-level3: var(--bullet-level3-gray);
  --theme-shadow1-shade5: var(--box-shadow-1-gray-shade5);
  --theme-shadow2-shade5: var(--box-shadow-2-gray-shade5);
  --theme-shadow3-shade5: var(--box-shadow-3-gray-shade5);
  --theme-shadow4-shade5: var(--box-shadow-4-gray-shade5);
  --theme-shadow1-shade10: var(--box-shadow-1-gray-shade10);
  --theme-shadow2-shade10: var(--box-shadow-2-gray-shade10);
  --theme-shadow3-shade10: var(--box-shadow-3-gray-shade10);
  --theme-shadow4-shade10: var(--box-shadow-4-gray-shade10);
  --secondary-theme-base: var(--theme-base);
  --secondary-theme-tint5: var(--theme-tint5);
  --secondary-theme-tint10: var(--theme-tint10);
  --secondary-theme-tint15: var(--theme-tint15);
  --secondary-theme-shade5: var(--theme-shade5);
  --secondary-theme-shade10: var(--theme-shade10);
  --secondary-theme-shade15: var(--theme-shade15);
}

.secondary-green main,
div.secondary-green {
  --secondary-theme-base: var(--color-1);
  --secondary-theme-tint5: var(--color-1-tint-5);
  --secondary-theme-tint10: var(--color-1-tint-10);
  --secondary-theme-tint15: var(--color-1-tint-15);
  --secondary-theme-shade5: var(--color-1-shade-5);
  --secondary-theme-shade10: var(--color-1-shade-10);
  --secondary-theme-shade15: var(--color-1-shade-15);
}

.secondary-blue main,
div.secondary-blue {
  --secondary-theme-base: var(--color-5);
  --secondary-theme-tint5: var(--color-5-tint-5);
  --secondary-theme-tint10: var(--color-5-tint-10);
  --secondary-theme-tint15: var(--color-5-tint-15);
  --secondary-theme-shade5: var(--color-5-shade-5);
  --secondary-theme-shade10: var(--color-5-shade-10);
  --secondary-theme-shade15: var(--color-5-shade-15);
}

.color-1 {
  color: var(--color-1);
}

.color-1-tint-5 {
  color: var(--color-1-tint-5);
}

.color-1-tint-15 {
  color: var(--color-1-tint-15);
}

.color-1-tint-10 {
  color: var(--color-1-tint-10);
}

.color-1-shade-5 {
  color: var(--color-1-shade-5);
}

.color-1-shade-10 {
  color: var(--color-1-shade-10);
}

.color-1-shade-15 {
  color: var(--color-1-shade-15);
}

.color-2 {
  color: var(--color-2);
}

.color-2-shade-5 {
  color: var(--color-2-shade-5);
}

.color-2-shade-10 {
  color: var(--color-2-shade-10);
}

.color-4 {
  color: var(--color-4);
}

.color-4-tint-10 {
  color: var(--color-4-tint-10);
}

.color-4-shade-15 {
  color: var(--color-4-shade-15);
}

.color-5 {
  color: var(--color-5);
}

.color-5-tint-15 {
  color: var(--color-5-tint-15);
}

.color-5-tint-10 {
  color: var(--color-5-tint-10);
}

.color-5-shade-5 {
  color: var(--color-5-shade-5);
}

.color-5-shade-10 {
  color: var(--color-5-shade-10);
}

.color-5-shade-10,
.color-5-shade-10 :is(h3, h4, h5, h6) {
  color: var(--color-gray-13);
}

.color-5-shade-15 {
  color: var(--color-5-shade-15);
}

.color-8 {
  color: var(--color-8);
}

.color-8-tint-15 {
  color: var(--color-8-tint-15);
}

.color-8-tint-10 {
  color: var(--color-8-tint-10);
}

.color-8-shade-10 {
  color: var(--color-8-shade-10);
}

.color-gray-1 {
  color: var(--color-gray-1);
}

.color-gray-2 {
  color: var(--color-gray-2);
}

.color-gray-3 {
  color: var(--color-gray-3);
}

.color-gray-4 {
  color: var(--color-gray-4);
}

.color-gray-5 {
  color: var(--color-gray-5);
}

.color-gray-6 {
  color: var(--color-gray-6);
}

.color-gray-7 {
  color: var(--color-gray-7);
}

.color-gray-8 {
  color: var(--color-gray-8);
}

.color-gray-9 {
  color: var(--color-gray-9);
}

.color-gray-10 {
  color: var(--color-gray-10);
}

.color-gray-11 {
  color: var(--color-gray-11);
}

.color-gray-12 {
  color: var(--color-gray-12);
}

.color-gray-13 {
  color: var(--color-gray-3);
}

.color-white {
  color: var(--color-white);
}

.theme,
.color-base {
  color: var(--theme-base);
}

.theme-tint-5,
.color-tint-5 {
  color: var(--theme-tint5);
}

.theme-tint-10,
.color-tint-10 {
  color: var(--theme-tint10);
}

.theme-tint-15,
.color-tint-15 {
  color: var(--theme-tint15);
}

.theme-shade-5,
.color-shade-5 {
  color: var(--theme-shade5);
}

.theme-shade-10,
.color-shade-10 {
  color: var(--theme-shade10);
}

.theme-shade-10,
.color-shade-10,
.color-shade-10 :is(h3, h4, h5, h6) {
  color: var(--color-gray-13);
}

.theme-shade-15,
.color-shade-15 {
  color: var(--theme-shade15);
}