: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-tint-15: #fff5e5;
  --color-2-tint-10: #ffc9b5;
  --color-2-tint-5: #ff8c71;
  --color-2: #ff5f3f;
  --color-2-shade-5: #ce4537;
  --color-2-shade-10: #99292e;
  --color-2-shade-15: #4c0021;
  --color-3-tint-15: #fffae5;
  --color-3-tint-10: #ffd9a3;
  --color-3-tint-5: #ffbc68;
  --color-3: #fe961c;
  --color-3-shade-5: #d26914;
  --color-3-shade-10: #aa410c;
  --color-3-shade-15: #6a0000;
  --color-4-tint-15: #ffffe5;
  --color-4-tint-10: #fff58f;
  --color-4-tint-5: #ffee56;
  --color-4: #ffe619;
  --color-4-shade-5: #dbb412;
  --color-4-shade-10: #b6800b;
  --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-6-tint-15: #fde5ff;
  --color-6-tint-10: #e0beff;
  --color-6-tint-5: #bd8eff;
  --color-6: #a168ff;
  --color-6-shade-5: #794fcd;
  --color-6-shade-10: #4c3293;
  --color-6-shade-15: #0d0a43;
  --color-7-tint-15: #ffe9e5;
  --color-7-tint-10: #ffbdc8;
  --color-7-tint-5: #ff86a3;
  --color-7: #ff5d88;
  --color-7-shade-5: #cc4373;
  --color-7-shade-10: #96275d;
  --color-7-shade-15: #4c003e;
  --color-8-tint-15: #e5ffe6;
  --color-8-tint-10: #b1f8df;
  --color-8-tint-5: #82f2d9;
  --color-8: #48ead1;
  --color-8-shade-5: #34b9ac;
  --color-8-shade-10: #1b7b7e;
  --color-8-shade-15: #003a4c;
  --color-gray-1: #f5f4f1;
  --color-gray-2: #ebeae7;
  --color-gray-3: #dfdedc;
  --color-gray-4: #d5d4d2;
  --color-gray-5: #c8c8c6;
  --color-gray-6: #babab9;
  --color-gray-7: #969797;
  --color-gray-8: #87888b;
  --color-gray-9: #74767a;
  --color-gray-10: #626467;
  --color-gray-11: #55575a;
  --color-gray-12: #404347;
  --color-gray-13: #313335;
  --color-white: #fff;
  --color-black: #000;
  --color-teal-2: #284D59;

  /* body */
  --body-background-color: var(--color-white);
  --body-alt-background-color: var(--color-gray-10);

  /* Lato font added as a fallback for in-app content */
  --body-font-family: 'Red Hat Text', 'Red Hat Text-fallback', 'Lato';
  --body-font-weight: 400;
  --body-color: var(--color-gray-12);

  /* headings */
  --heading-font-weight: 700;
  --heading-color: var(--color-gray-12);
  
  /* Lato font added as a fallback for in-app content */
  --heading-font-family: 'Fira Sans', 'Fira Sans-fallback', 'Lato';

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

  /* stylized font */
  --stylized-font-family: 'Permanent Marker', 'Permanent Marker-fallback';

  /* display font */
  --display-font-family: 'Red Hat Display', 'Red Hat Display-fallback';

  /* button sizing */
  --button-padding-size-lg: 18px 40px;
  --button-font-size-lg: 17px;
  --button-line-height-size-lg: 20px;
  --button-padding-size-sm: 10px 30px;
  --button-font-size-sm: 15px;
  --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);
}

.red main,
div.red {
  --theme-base: var(--color-2);
  --theme-tint5: var(--color-2-tint-5);
  --theme-tint10: var(--color-2-tint-10);
  --theme-tint15: var(--color-2-tint-15);
  --theme-shade5: var(--color-2-shade-5);
  --theme-shade10: var(--color-2-shade-10);
  --theme-shade15: var(--color-2-shade-15);
  --theme-bullet-level1: var(--bullet-level1-red);
  --theme-bullet-level2: var(--bullet-level2-red);
  --theme-bullet-level3: var(--bullet-level3-red);
  --theme-shadow1-shade5: var(--box-shadow-1-color2-shade5);
  --theme-shadow2-shade5: var(--box-shadow-2-color2-shade5);
  --theme-shadow3-shade5: var(--box-shadow-3-color2-shade5);
  --theme-shadow4-shade5: var(--box-shadow-4-color2-shade5);
  --theme-shadow1-shade10: var(--box-shadow-1-color2-shade10);
  --theme-shadow2-shade10: var(--box-shadow-2-color2-shade10);
  --theme-shadow3-shade10: var(--box-shadow-3-color2-shade10);
  --theme-shadow4-shade10: var(--box-shadow-4-color2-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);
}

.orange main,
div.orange {
  --theme-base: var(--color-3);
  --theme-tint5: var(--color-3-tint-5);
  --theme-tint10: var(--color-3-tint-10);
  --theme-tint15: var(--color-3-tint-15);
  --theme-shade5: var(--color-3-shade-5);
  --theme-shade10: var(--color-3-shade-10);
  --theme-shade15: var(--color-3-shade-15);
  --theme-bullet-level1: var(--bullet-level1-orange);
  --theme-bullet-level2: var(--bullet-level2-orange);
  --theme-bullet-level3: var(--bullet-level3-orange);
  --theme-shadow1-shade5: var(--box-shadow-1-color3-shade5);
  --theme-shadow2-shade5: var(--box-shadow-2-color3-shade5);
  --theme-shadow3-shade5: var(--box-shadow-3-color3-shade5);
  --theme-shadow4-shade5: var(--box-shadow-4-color3-shade5);
  --theme-shadow1-shade10: var(--box-shadow-1-color3-shade10);
  --theme-shadow2-shade10: var(--box-shadow-2-color3-shade10);
  --theme-shadow3-shade10: var(--box-shadow-3-color3-shade10);
  --theme-shadow4-shade10: var(--box-shadow-4-color3-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);
}

.yellow main,
div.yellow {
  --theme-base: var(--color-4);
  --theme-tint5: var(--color-4-tint-5);
  --theme-tint10: var(--color-4-tint-10);
  --theme-tint15: var(--color-4-tint-15);
  --theme-shade5: var(--color-4-shade-5);
  --theme-shade10: var(--color-4-shade-10);
  --theme-shade15: var(--color-4-shade-15);
  --theme-bullet-level1: var(--bullet-level1-yellow);
  --theme-bullet-level2: var(--bullet-level2-yellow);
  --theme-bullet-level3: var(--bullet-level3-yellow);
  --theme-shadow1-shade5: var(--box-shadow-1-color4-shade5);
  --theme-shadow2-shade5: var(--box-shadow-2-color4-shade5);
  --theme-shadow3-shade5: var(--box-shadow-3-color4-shade5);
  --theme-shadow4-shade5: var(--box-shadow-4-color4-shade5);
  --theme-shadow1-shade10: var(--box-shadow-1-color4-shade10);
  --theme-shadow2-shade10: var(--box-shadow-2-color4-shade10);
  --theme-shadow3-shade10: var(--box-shadow-3-color4-shade10);
  --theme-shadow4-shade10: var(--box-shadow-4-color4-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);
}

.purple main,
div.purple {
  --theme-base: var(--color-6);
  --theme-tint5: var(--color-6-tint-5);
  --theme-tint10: var(--color-6-tint-10);
  --theme-tint15: var(--color-6-tint-15);
  --theme-shade5: var(--color-6-shade-5);
  --theme-shade10: var(--color-6-shade-10);
  --theme-shade15: var(--color-6-shade-15);
  --theme-bullet-level1: var(--bullet-level1-purple);
  --theme-bullet-level2: var(--bullet-level2-purple);
  --theme-bullet-level3: var(--bullet-level3-purple);
  --theme-shadow1-shade5: var(--box-shadow-1-color6-shade5);
  --theme-shadow2-shade5: var(--box-shadow-2-color6-shade5);
  --theme-shadow3-shade5: var(--box-shadow-3-color6-shade5);
  --theme-shadow4-shade5: var(--box-shadow-4-color6-shade5);
  --theme-shadow1-shade10: var(--box-shadow-1-color6-shade10);
  --theme-shadow2-shade10: var(--box-shadow-2-color6-shade10);
  --theme-shadow3-shade10: var(--box-shadow-3-color6-shade10);
  --theme-shadow4-shade10: var(--box-shadow-4-color6-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);
}

.pink main,
div.pink {
  --theme-base: var(--color-7);
  --theme-tint5: var(--color-7-tint-5);
  --theme-tint10: var(--color-7-tint-10);
  --theme-tint15: var(--color-7-tint-15);
  --theme-shade5: var(--color-7-shade-5);
  --theme-shade10: var(--color-7-shade-10);
  --theme-shade15: var(--color-7-shade-15);
  --theme-bullet-level1: var(--bullet-level1-pink);
  --theme-bullet-level2: var(--bullet-level2-pink);
  --theme-bullet-level3: var(--bullet-level3-pink);
  --theme-shadow1-shade5: var(--box-shadow-1-color7-shade5);
  --theme-shadow2-shade5: var(--box-shadow-2-color7-shade5);
  --theme-shadow3-shade5: var(--box-shadow-3-color7-shade5);
  --theme-shadow4-shade5: var(--box-shadow-4-color7-shade5);
  --theme-shadow1-shade10: var(--box-shadow-1-color7-shade10);
  --theme-shadow2-shade10: var(--box-shadow-2-color7-shade10);
  --theme-shadow3-shade10: var(--box-shadow-3-color7-shade10);
  --theme-shadow4-shade10: var(--box-shadow-4-color7-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);
}

.teal main,
div.teal {
  --theme-base: var(--color-8);
  --theme-tint5: var(--color-8-tint-5);
  --theme-tint10: var(--color-8-tint-10);
  --theme-tint15: var(--color-8-tint-15);
  --theme-shade5: var(--color-8-shade-5);
  --theme-shade10: var(--color-8-shade-10);
  --theme-shade15: var(--color-8-shade-15);
  --theme-bullet-level1: var(--bullet-level1-teal);
  --theme-bullet-level2: var(--bullet-level2-teal);
  --theme-bullet-level3: var(--bullet-level3-teal);
  --theme-shadow1-shade5: var(--box-shadow-1-color8-shade5);
  --theme-shadow2-shade5: var(--box-shadow-2-color8-shade5);
  --theme-shadow3-shade5: var(--box-shadow-3-color8-shade5);
  --theme-shadow4-shade5: var(--box-shadow-4-color8-shade5);
  --theme-shadow1-shade10: var(--box-shadow-1-color8-shade10);
  --theme-shadow2-shade10: var(--box-shadow-2-color8-shade10);
  --theme-shadow3-shade10: var(--box-shadow-3-color8-shade10);
  --theme-shadow4-shade10: var(--box-shadow-4-color8-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-red main,
div.secondary-red {
  --secondary-theme-base: var(--color-2);
  --secondary-theme-tint5: var(--color-2-tint-5);
  --secondary-theme-tint10: var(--color-2-tint-10);
  --secondary-theme-tint15: var(--color-2-tint-15);
  --secondary-theme-shade5: var(--color-2-shade-5);
  --secondary-theme-shade10: var(--color-2-shade-10);
  --secondary-theme-shade15: var(--color-2-shade-15);
}

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

.secondary-yellow main,
div.secondary-yellow {
  --secondary-theme-base: var(--color-4);
  --secondary-theme-tint5: var(--color-4-tint-5);
  --secondary-theme-tint10: var(--color-4-tint-10);
  --secondary-theme-tint15: var(--color-4-tint-15);
  --secondary-theme-shade5: var(--color-4-shade-5);
  --secondary-theme-shade10: var(--color-4-shade-10);
  --secondary-theme-shade15: var(--color-4-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);
}

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

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

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

.color-1,
.color-1 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-1);
}

.color-1-tint-5,
.color-1-tint-5 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-1-tint-5);
}

.color-1-tint-15,
.color-1-tint-15 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-1-tint-15);
}

.color-1-tint-10,
.color-1-tint-10 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-1-tint-10);
}

.color-1-shade-5,
.color-1-shade-5 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-1-shade-5);
}

.color-1-shade-10,
.color-1-shade-10 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-1-shade-10);
}

.color-1-shade-15,
.color-1-shade-15 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-1-shade-15);
}

.color-2,
.color-2 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-2);
}

.color-2-tint-15,
.color-2-tint-15 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-2-tint-15);
}

.color-2-tint-10,
.color-2-tint-10 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-2-tint-10);
}

.color-2-shade-5,
.color-2-shade-5 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-2-shade-5);
}

.color-2-shade-10,
.color-2-shade-10 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-2-shade-10);
}

.color-2-shade-15,
.color-2-shade-15 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-2-shade-15);
}

.color-3,
.color-3 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-3);
}

.color-3-tint-15,
.color-3-tint-15 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-3-tint-15);
}

.color-3-tint-10,
.color-3-tint-10 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-3-tint-10);
}

.color-3-shade-5,
.color-3-shade-5 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-3-shade-5);
}

.color-3-shade-10,
.color-3-shade-10 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-3-shade-10);
}

.color-3-shade-15,
.color-3-shade-15 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-3-shade-15);
}

.color-4,
.color-4 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-4);
}

.color-4-tint-15,
.color-4-tint-15 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-4-tint-15);
}

.color-4-tint-10,
.color-4-tint-10 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-4-tint-10);
}

.color-4-shade-5,
.color-4-shade-5 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-4-shade-5);
}

.color-4-shade-10,
.color-4-shade-10 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-4-shade-10);
}

.color-4-shade-15,
.color-4-shade-15 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-4-shade-15);
}

.color-5,
.color-5 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-5);
}

.color-5-tint-15,
.color-5-tint-15 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-5-tint-15);
}

.color-5-tint-10,
.color-5-tint-10 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-5-tint-10);
}

.color-5-shade-5,
.color-5-shade-5 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-5-shade-5);
}

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

.color-5-shade-15,
.color-5-shade-15 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-5-shade-15);
}

.color-6,
.color-6 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-6);
}

.color-6-tint-15,
.color-6-tint-15 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-6-tint-15);
}

.color-6-tint-10,
.color-6-tint-10 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-6-tint-10);
}

.color-6-shade-5,
.color-6-shade-5 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-6-shade-5);
}

.color-6-shade-10,
.color-6-shade-10 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-6-shade-10);
}

.color-6-shade-15,
.color-6-shade-15 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-6-shade-15);
}

.color-7,
.color-7 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-7);
}

.color-7-tint-15,
.color-7-tint-15 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-7-tint-15);
}

.color-7-tint-10,
.color-7-tint-10 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-7-tint-10);
}

.color-7-shade-5,
.color-7-shade-5 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-7-shade-5);
}

.color-7-shade-10,
.color-7-shade-10 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-7-shade-10);
}

.color-7-shade-15,
.color-7-shade-15 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-7-shade-15);
}

.color-8,
.color-8 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-8);
}

.color-8-tint-15,
.color-8-tint-15 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-8-tint-15);
}

.color-8-tint-10,
.color-8-tint-10 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-8-tint-10);
}

.color-8-shade-5,
.color-8-shade-5 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-8-shade-5);
}

.color-8-shade-10,
.color-8-shade-10 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-8-shade-10);
}

.color-8-shade-15,
.color-8-shade-15 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-8-shade-15);
}

.color-gray-1,
.color-gray-1 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-gray-1);
}

.color-gray-2,
.color-gray-2 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-gray-2);
}

.color-gray-3,
.color-gray-3 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-gray-3);
}

.color-gray-4,
.color-gray-4 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-gray-4);
}

.color-gray-5,
.color-gray-5 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-gray-5);
}

.color-gray-6,
.color-gray-6 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-gray-6);
}

.color-gray-7,
.color-gray-7 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-gray-7);
}

.color-gray-8,
.color-gray-8 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-gray-8);
}

.color-gray-9,
.color-gray-9 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-gray-9);
}

.color-gray-10,
.color-gray-10 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-gray-10);
}

.color-gray-11,
.color-gray-11 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-gray-11);
}

.color-gray-12,
.color-gray-12 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-gray-12);
}

.color-gray-13,
.color-gray-13 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-gray-3);
}

.color-white,
.color-white :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-white);
}

.theme,
.color-base,
.color-base :is(h1, h2, h3, h4, h5, h6) {
  color: var(--theme-base);
}

.theme-tint-5,
.color-tint-5,
.color-tint-5 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--theme-tint5);
}

.theme-tint-10,
.color-tint-10,
.color-tint-10 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--theme-tint10);
}

.theme-tint-15,
.color-tint-15,
.color-tint-15 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--theme-tint15);
}

.theme-shade-5,
.color-shade-5,
.color-shade-5 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--theme-shade5);
}

.theme-shade-10,
.color-shade-10,
.color-shade-10 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--theme-shade10);
}

.theme-shade-15,
.color-shade-15,
.color-shade-15 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--theme-shade15);
}