@primer/react-brand 0.1.0-rc.ae0dfda → 0.1.0

package/lib/css/main.css

@@ -1,13 +1,1167 @@
-/* TODO: Extract these global styles */
+/**
+ * Modified from https://github.com/hankchizljaw/modern-css-reset
+ * Copyright (c) 2019 Andy Bell and other contributors
+ * License: MIT
+ */
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+/* Set core root defaults */
+html[focus-within] {
+  scroll-behavior: smooth;
+}
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+/* Set core body defaults */
 body {
-  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; /* TODO: Use Alliance No. 1 or Mona Sans */
+  min-height: 100vh;
   line-height: 1.5;
 }
 
-/* TODO: Replace hard-coded values with design tokens */
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  -webkit-text-decoration-skip: ink;
+          text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  html[focus-within] {
+    scroll-behavior: auto;
+  }
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    -webkit-animation-duration: 0.01ms !important;
+            animation-duration: 0.01ms !important;
+    -webkit-animation-iteration-count: 1 !important;
+            animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:48 GMT
+ */
+
+:root {
+  --base-color-scale-gray-0-hsl: 210 25% 98%;
+  --base-color-scale-gray-0: hsl(210, 25%, 98%);
+  --base-color-scale-gray-1-hsl: 210 24% 93%;
+  --base-color-scale-gray-1: hsl(210, 24%, 93%);
+  --base-color-scale-gray-2-hsl: 210 16% 85%;
+  --base-color-scale-gray-2: hsl(210, 16%, 85%);
+  --base-color-scale-gray-3-hsl: 210 13% 75%;
+  --base-color-scale-gray-3: hsl(210, 13%, 75%);
+  --base-color-scale-gray-4-hsl: 212 10% 62%;
+  --base-color-scale-gray-4: hsl(212, 10%, 62%);
+  --base-color-scale-gray-5-hsl: 210 8% 48%;
+  --base-color-scale-gray-5: hsl(210, 8%, 48%);
+  --base-color-scale-gray-6-hsl: 212 10% 38%;
+  --base-color-scale-gray-6: hsl(212, 10%, 38%);
+  --base-color-scale-gray-7-hsl: 212 11% 29%;
+  --base-color-scale-gray-7: hsl(212, 11%, 29%);
+  --base-color-scale-gray-8-hsl: 212 12% 22%;
+  --base-color-scale-gray-8: hsl(212, 12%, 22%);
+  --base-color-scale-gray-9-hsl: 213 13% 16%;
+  --base-color-scale-gray-9: hsl(213, 13%, 16%);
+  --base-color-scale-red-0-hsl: 4 100% 97%;
+  --base-color-scale-red-0: hsl(4, 100%, 97%);
+  --base-color-scale-red-1-hsl: 3 100% 91%;
+  --base-color-scale-red-1: hsl(3, 100%, 91%);
+  --base-color-scale-red-2-hsl: 2 100% 85%;
+  --base-color-scale-red-2: hsl(2, 100%, 85%);
+  --base-color-scale-red-3-hsl: 1 100% 76%;
+  --base-color-scale-red-3: hsl(1, 100%, 76%);
+  --base-color-scale-red-4-hsl: 359 95% 65%;
+  --base-color-scale-red-4: hsl(359, 95%, 65%);
+  --base-color-scale-red-5-hsl: 357 67% 50%;
+  --base-color-scale-red-5: hsl(357, 67%, 50%);
+  --base-color-scale-red-6-hsl: 356 71% 38%;
+  --base-color-scale-red-6: hsl(356, 71%, 38%);
+  --base-color-scale-red-7-hsl: 355 71% 30%;
+  --base-color-scale-red-7: hsl(355, 71%, 30%);
+  --base-color-scale-red-8-hsl: 354 74% 24%;
+  --base-color-scale-red-8: hsl(354, 74%, 24%);
+  --base-color-scale-red-9-hsl: 352 91% 17%;
+  --base-color-scale-red-9: hsl(352, 91%, 17%);
+  --base-color-scale-coral-0-hsl: 15 100% 96%;
+  --base-color-scale-coral-0: hsl(15, 100%, 96%);
+  --base-color-scale-coral-1-hsl: 12 100% 90%;
+  --base-color-scale-coral-1: hsl(12, 100%, 90%);
+  --base-color-scale-coral-2-hsl: 12 100% 82%;
+  --base-color-scale-coral-2: hsl(12, 100%, 82%);
+  --base-color-scale-coral-3-hsl: 11 97% 72%;
+  --base-color-scale-coral-3: hsl(11, 97%, 72%);
+  --base-color-scale-coral-4-hsl: 11 81% 60%;
+  --base-color-scale-coral-4: hsl(11, 81%, 60%);
+  --base-color-scale-coral-5-hsl: 9 64% 47%;
+  --base-color-scale-coral-5: hsl(9, 64%, 47%);
+  --base-color-scale-coral-6-hsl: 9 70% 36%;
+  --base-color-scale-coral-6: hsl(9, 70%, 36%);
+  --base-color-scale-coral-7-hsl: 8 79% 28%;
+  --base-color-scale-coral-7: hsl(8, 79%, 28%);
+  --base-color-scale-coral-8-hsl: 7 91% 22%;
+  --base-color-scale-coral-8: hsl(7, 91%, 22%);
+  --base-color-scale-coral-9-hsl: 6 98% 16%;
+  --base-color-scale-coral-9: hsl(6, 98%, 16%);
+  --base-color-scale-orange-0-hsl: 28 100% 95%;
+  --base-color-scale-orange-0: hsl(28, 100%, 95%);
+  --base-color-scale-orange-1-hsl: 28 100% 85%;
+  --base-color-scale-orange-1: hsl(28, 100%, 85%);
+  --base-color-scale-orange-2-hsl: 27 100% 74%;
+  --base-color-scale-orange-2: hsl(27, 100%, 74%);
+  --base-color-scale-orange-3-hsl: 25 96% 63%;
+  --base-color-scale-orange-3: hsl(25, 96%, 63%);
+  --base-color-scale-orange-4-hsl: 24 76% 51%;
+  --base-color-scale-orange-4: hsl(24, 76%, 51%);
+  --base-color-scale-orange-5-hsl: 24 100% 37%;
+  --base-color-scale-orange-5: hsl(24, 100%, 37%);
+  --base-color-scale-orange-6-hsl: 23 100% 29%;
+  --base-color-scale-orange-6: hsl(23, 100%, 29%);
+  --base-color-scale-orange-7-hsl: 22 100% 23%;
+  --base-color-scale-orange-7: hsl(22, 100%, 23%);
+  --base-color-scale-orange-8-hsl: 22 100% 18%;
+  --base-color-scale-orange-8: hsl(22, 100%, 18%);
+  --base-color-scale-orange-9-hsl: 19 100% 14%;
+  --base-color-scale-orange-9: hsl(19, 100%, 14%);
+  --base-color-scale-yellow-0-hsl: 50 89% 89%;
+  --base-color-scale-yellow-0: hsl(50, 89%, 89%);
+  --base-color-scale-yellow-1-hsl: 48 87% 73%;
+  --base-color-scale-yellow-1: hsl(48, 87%, 73%);
+  --base-color-scale-yellow-2-hsl: 46 76% 60%;
+  --base-color-scale-yellow-2: hsl(46, 76%, 60%);
+  --base-color-scale-yellow-3-hsl: 44 65% 50%;
+  --base-color-scale-yellow-3: hsl(44, 65%, 50%);
+  --base-color-scale-yellow-4-hsl: 42 100% 37%;
+  --base-color-scale-yellow-4: hsl(42, 100%, 37%);
+  --base-color-scale-yellow-5-hsl: 40 100% 30%;
+  --base-color-scale-yellow-5: hsl(40, 100%, 30%);
+  --base-color-scale-yellow-6-hsl: 37 100% 24%;
+  --base-color-scale-yellow-6: hsl(37, 100%, 24%);
+  --base-color-scale-yellow-7-hsl: 36 98% 19%;
+  --base-color-scale-yellow-7: hsl(36, 98%, 19%);
+  --base-color-scale-yellow-8-hsl: 35 100% 15%;
+  --base-color-scale-yellow-8: hsl(35, 100%, 15%);
+  --base-color-scale-yellow-9-hsl: 34 90% 12%;
+  --base-color-scale-yellow-9: hsl(34, 90%, 12%);
+  --base-color-scale-lemon-0-hsl: 54 95% 85%;
+  --base-color-scale-lemon-0: hsl(54, 95%, 85%);
+  --base-color-scale-lemon-1-hsl: 52 87% 67%;
+  --base-color-scale-lemon-1: hsl(52, 87%, 67%);
+  --base-color-scale-lemon-2-hsl: 51 70% 56%;
+  --base-color-scale-lemon-2: hsl(51, 70%, 56%);
+  --base-color-scale-lemon-3-hsl: 50 72% 45%;
+  --base-color-scale-lemon-3: hsl(50, 72%, 45%);
+  --base-color-scale-lemon-4-hsl: 50 98% 33%;
+  --base-color-scale-lemon-4: hsl(50, 98%, 33%);
+  --base-color-scale-lemon-5-hsl: 49 100% 26%;
+  --base-color-scale-lemon-5: hsl(49, 100%, 26%);
+  --base-color-scale-lemon-6-hsl: 48 100% 20%;
+  --base-color-scale-lemon-6: hsl(48, 100%, 20%);
+  --base-color-scale-lemon-7-hsl: 47 100% 16%;
+  --base-color-scale-lemon-7: hsl(47, 100%, 16%);
+  --base-color-scale-lemon-8-hsl: 46 100% 13%;
+  --base-color-scale-lemon-8: hsl(46, 100%, 13%);
+  --base-color-scale-lemon-9-hsl: 43 100% 10%;
+  --base-color-scale-lemon-9: hsl(43, 100%, 10%);
+  --base-color-scale-lime-0-hsl: 75 86% 85%;
+  --base-color-scale-lime-0: hsl(75, 86%, 85%);
+  --base-color-scale-lime-1-hsl: 76 75% 70%;
+  --base-color-scale-lime-1: hsl(76, 75%, 70%);
+  --base-color-scale-lime-2-hsl: 76 59% 58%;
+  --base-color-scale-lime-2: hsl(76, 59%, 58%);
+  --base-color-scale-lime-3-hsl: 77 51% 48%;
+  --base-color-scale-lime-3: hsl(77, 51%, 48%);
+  --base-color-scale-lime-4-hsl: 78 57% 38%;
+  --base-color-scale-lime-4: hsl(78, 57%, 38%);
+  --base-color-scale-lime-5-hsl: 80 64% 29%;
+  --base-color-scale-lime-5: hsl(80, 64%, 29%);
+  --base-color-scale-lime-6-hsl: 82 66% 22%;
+  --base-color-scale-lime-6: hsl(82, 66%, 22%);
+  --base-color-scale-lime-7-hsl: 84 85% 16%;
+  --base-color-scale-lime-7: hsl(84, 85%, 16%);
+  --base-color-scale-lime-8-hsl: 86 90% 12%;
+  --base-color-scale-lime-8: hsl(86, 90%, 12%);
+  --base-color-scale-lime-9-hsl: 88 96% 9%;
+  --base-color-scale-lime-9: hsl(88, 96%, 9%);
+  --base-color-scale-green-0-hsl: 133 80% 92%;
+  --base-color-scale-green-0: hsl(133, 80%, 92%);
+  --base-color-scale-green-1-hsl: 134 66% 80%;
+  --base-color-scale-green-1: hsl(134, 66%, 80%);
+  --base-color-scale-green-2-hsl: 135 62% 65%;
+  --base-color-scale-green-2: hsl(135, 62%, 65%);
+  --base-color-scale-green-3-hsl: 136 50% 53%;
+  --base-color-scale-green-3: hsl(136, 50%, 53%);
+  --base-color-scale-green-4-hsl: 137 57% 41%;
+  --base-color-scale-green-4: hsl(137, 57%, 41%);
+  --base-color-scale-green-5-hsl: 137 66% 30%;
+  --base-color-scale-green-5: hsl(137, 66%, 30%);
+  --base-color-scale-green-6-hsl: 138 71% 23%;
+  --base-color-scale-green-6: hsl(138, 71%, 23%);
+  --base-color-scale-green-7-hsl: 141 90% 16%;
+  --base-color-scale-green-7: hsl(141, 90%, 16%);
+  --base-color-scale-green-8-hsl: 142 100% 12%;
+  --base-color-scale-green-8: hsl(142, 100%, 12%);
+  --base-color-scale-green-9-hsl: 143 100% 9%;
+  --base-color-scale-green-9: hsl(143, 100%, 9%);
+  --base-color-scale-teal-0-hsl: 172 72% 92%;
+  --base-color-scale-teal-0: hsl(172, 72%, 92%);
+  --base-color-scale-teal-1-hsl: 173 58% 80%;
+  --base-color-scale-teal-1: hsl(173, 58%, 80%);
+  --base-color-scale-teal-2-hsl: 177 57% 63%;
+  --base-color-scale-teal-2: hsl(177, 57%, 63%);
+  --base-color-scale-teal-3-hsl: 177 46% 51%;
+  --base-color-scale-teal-3: hsl(177, 46%, 51%);
+  --base-color-scale-teal-4-hsl: 179 51% 41%;
+  --base-color-scale-teal-4: hsl(179, 51%, 41%);
+  --base-color-scale-teal-5-hsl: 180 66% 29%;
+  --base-color-scale-teal-5: hsl(180, 66%, 29%);
+  --base-color-scale-teal-6-hsl: 181 67% 23%;
+  --base-color-scale-teal-6: hsl(181, 67%, 23%);
+  --base-color-scale-teal-7-hsl: 182 95% 15%;
+  --base-color-scale-teal-7: hsl(182, 95%, 15%);
+  --base-color-scale-teal-8-hsl: 182 82% 13%;
+  --base-color-scale-teal-8: hsl(182, 82%, 13%);
+  --base-color-scale-teal-9-hsl: 182 80% 10%;
+  --base-color-scale-teal-9: hsl(182, 80%, 10%);
+  --base-color-scale-blue-0-hsl: 200 100% 95%;
+  --base-color-scale-blue-0: hsl(200, 100%, 95%);
+  --base-color-scale-blue-1-hsl: 203 100% 87%;
+  --base-color-scale-blue-1: hsl(203, 100%, 87%);
+  --base-color-scale-blue-2-hsl: 205 100% 77%;
+  --base-color-scale-blue-2: hsl(205, 100%, 77%);
+  --base-color-scale-blue-3-hsl: 208 100% 67%;
+  --base-color-scale-blue-3: hsl(208, 100%, 67%);
+  --base-color-scale-blue-4-hsl: 211 100% 58%;
+  --base-color-scale-blue-4: hsl(211, 100%, 58%);
+  --base-color-scale-blue-5-hsl: 212 92% 45%;
+  --base-color-scale-blue-5: hsl(212, 92%, 45%);
+  --base-color-scale-blue-6-hsl: 213 95% 36%;
+  --base-color-scale-blue-6: hsl(213, 95%, 36%);
+  --base-color-scale-blue-7-hsl: 214 96% 29%;
+  --base-color-scale-blue-7: hsl(214, 96%, 29%);
+  --base-color-scale-blue-8-hsl: 216 82% 24%;
+  --base-color-scale-blue-8: hsl(216, 82%, 24%);
+  --base-color-scale-blue-9-hsl: 217 89% 18%;
+  --base-color-scale-blue-9: hsl(217, 89%, 18%);
+  --base-color-scale-indigo-0-hsl: 229 100% 97%;
+  --base-color-scale-indigo-0: hsl(229, 100%, 97%);
+  --base-color-scale-indigo-1-hsl: 231 100% 92%;
+  --base-color-scale-indigo-1: hsl(231, 100%, 92%);
+  --base-color-scale-indigo-2-hsl: 232 100% 86%;
+  --base-color-scale-indigo-2: hsl(232, 100%, 86%);
+  --base-color-scale-indigo-3-hsl: 234 100% 80%;
+  --base-color-scale-indigo-3: hsl(234, 100%, 80%);
+  --base-color-scale-indigo-4-hsl: 234 100% 73%;
+  --base-color-scale-indigo-4: hsl(234, 100%, 73%);
+  --base-color-scale-indigo-5-hsl: 237 84% 64%;
+  --base-color-scale-indigo-5: hsl(237, 84%, 64%);
+  --base-color-scale-indigo-6-hsl: 238 61% 53%;
+  --base-color-scale-indigo-6: hsl(238, 61%, 53%);
+  --base-color-scale-indigo-7-hsl: 237 58% 41%;
+  --base-color-scale-indigo-7: hsl(237, 58%, 41%);
+  --base-color-scale-indigo-8-hsl: 235 58% 32%;
+  --base-color-scale-indigo-8: hsl(235, 58%, 32%);
+  --base-color-scale-indigo-9-hsl: 235 57% 23%;
+  --base-color-scale-indigo-9: hsl(235, 57%, 23%);
+  --base-color-scale-purple-0-hsl: 285 100% 97%;
+  --base-color-scale-purple-0: hsl(285, 100%, 97%);
+  --base-color-scale-purple-1-hsl: 271 100% 92%;
+  --base-color-scale-purple-1: hsl(271, 100%, 92%);
+  --base-color-scale-purple-2-hsl: 267 100% 86%;
+  --base-color-scale-purple-2: hsl(267, 100%, 86%);
+  --base-color-scale-purple-3-hsl: 265 100% 80%;
+  --base-color-scale-purple-3: hsl(265, 100%, 80%);
+  --base-color-scale-purple-4-hsl: 261 92% 72%;
+  --base-color-scale-purple-4: hsl(261, 92%, 72%);
+  --base-color-scale-purple-5-hsl: 261 69% 59%;
+  --base-color-scale-purple-5: hsl(261, 69%, 59%);
+  --base-color-scale-purple-6-hsl: 261 53% 48%;
+  --base-color-scale-purple-6: hsl(261, 53%, 48%);
+  --base-color-scale-purple-7-hsl: 261 56% 38%;
+  --base-color-scale-purple-7: hsl(261, 56%, 38%);
+  --base-color-scale-purple-8-hsl: 261 59% 30%;
+  --base-color-scale-purple-8: hsl(261, 59%, 30%);
+  --base-color-scale-purple-9-hsl: 260 66% 23%;
+  --base-color-scale-purple-9: hsl(260, 66%, 23%);
+  --base-color-scale-pink-0-hsl: 330 100% 97%;
+  --base-color-scale-pink-0: hsl(330, 100%, 97%);
+  --base-color-scale-pink-1-hsl: 327 100% 91%;
+  --base-color-scale-pink-1: hsl(327, 100%, 91%);
+  --base-color-scale-pink-2-hsl: 327 100% 84%;
+  --base-color-scale-pink-2: hsl(327, 100%, 84%);
+  --base-color-scale-pink-3-hsl: 326 100% 75%;
+  --base-color-scale-pink-3: hsl(326, 100%, 75%);
+  --base-color-scale-pink-4-hsl: 325 76% 63%;
+  --base-color-scale-pink-4: hsl(325, 76%, 63%);
+  --base-color-scale-pink-5-hsl: 324 54% 49%;
+  --base-color-scale-pink-5: hsl(324, 54%, 49%);
+  --base-color-scale-pink-6-hsl: 323 59% 38%;
+  --base-color-scale-pink-6: hsl(323, 59%, 38%);
+  --base-color-scale-pink-7-hsl: 322 58% 30%;
+  --base-color-scale-pink-7: hsl(322, 58%, 30%);
+  --base-color-scale-pink-8-hsl: 320 67% 23%;
+  --base-color-scale-pink-8: hsl(320, 67%, 23%);
+  --base-color-scale-pink-9-hsl: 319 93% 16%;
+  --base-color-scale-pink-9: hsl(319, 93%, 16%);
+  --base-color-scale-black-0-hsl: 213 14% 12%;
+  --base-color-scale-black-0: hsl(213, 14%, 12%);
+  --base-color-scale-white-0-hsl: 0 100% 100%;
+  --base-color-scale-white-0: hsl(0, 100%, 100%);
+}
+
+[data-color-mode="light"] {
+  --base-color-scale-gray-0-hsl: 210 25% 98%;
+  --base-color-scale-gray-0: hsl(210, 25%, 98%);
+  --base-color-scale-gray-1-hsl: 210 24% 93%;
+  --base-color-scale-gray-1: hsl(210, 24%, 93%);
+  --base-color-scale-gray-2-hsl: 210 16% 85%;
+  --base-color-scale-gray-2: hsl(210, 16%, 85%);
+  --base-color-scale-gray-3-hsl: 210 13% 75%;
+  --base-color-scale-gray-3: hsl(210, 13%, 75%);
+  --base-color-scale-gray-4-hsl: 212 10% 62%;
+  --base-color-scale-gray-4: hsl(212, 10%, 62%);
+  --base-color-scale-gray-5-hsl: 210 8% 48%;
+  --base-color-scale-gray-5: hsl(210, 8%, 48%);
+  --base-color-scale-gray-6-hsl: 212 10% 38%;
+  --base-color-scale-gray-6: hsl(212, 10%, 38%);
+  --base-color-scale-gray-7-hsl: 212 11% 29%;
+  --base-color-scale-gray-7: hsl(212, 11%, 29%);
+  --base-color-scale-gray-8-hsl: 212 12% 22%;
+  --base-color-scale-gray-8: hsl(212, 12%, 22%);
+  --base-color-scale-gray-9-hsl: 213 13% 16%;
+  --base-color-scale-gray-9: hsl(213, 13%, 16%);
+  --base-color-scale-red-0-hsl: 4 100% 97%;
+  --base-color-scale-red-0: hsl(4, 100%, 97%);
+  --base-color-scale-red-1-hsl: 3 100% 91%;
+  --base-color-scale-red-1: hsl(3, 100%, 91%);
+  --base-color-scale-red-2-hsl: 2 100% 85%;
+  --base-color-scale-red-2: hsl(2, 100%, 85%);
+  --base-color-scale-red-3-hsl: 1 100% 76%;
+  --base-color-scale-red-3: hsl(1, 100%, 76%);
+  --base-color-scale-red-4-hsl: 359 95% 65%;
+  --base-color-scale-red-4: hsl(359, 95%, 65%);
+  --base-color-scale-red-5-hsl: 357 67% 50%;
+  --base-color-scale-red-5: hsl(357, 67%, 50%);
+  --base-color-scale-red-6-hsl: 356 71% 38%;
+  --base-color-scale-red-6: hsl(356, 71%, 38%);
+  --base-color-scale-red-7-hsl: 355 71% 30%;
+  --base-color-scale-red-7: hsl(355, 71%, 30%);
+  --base-color-scale-red-8-hsl: 354 74% 24%;
+  --base-color-scale-red-8: hsl(354, 74%, 24%);
+  --base-color-scale-red-9-hsl: 352 91% 17%;
+  --base-color-scale-red-9: hsl(352, 91%, 17%);
+  --base-color-scale-coral-0-hsl: 15 100% 96%;
+  --base-color-scale-coral-0: hsl(15, 100%, 96%);
+  --base-color-scale-coral-1-hsl: 12 100% 90%;
+  --base-color-scale-coral-1: hsl(12, 100%, 90%);
+  --base-color-scale-coral-2-hsl: 12 100% 82%;
+  --base-color-scale-coral-2: hsl(12, 100%, 82%);
+  --base-color-scale-coral-3-hsl: 11 97% 72%;
+  --base-color-scale-coral-3: hsl(11, 97%, 72%);
+  --base-color-scale-coral-4-hsl: 11 81% 60%;
+  --base-color-scale-coral-4: hsl(11, 81%, 60%);
+  --base-color-scale-coral-5-hsl: 9 64% 47%;
+  --base-color-scale-coral-5: hsl(9, 64%, 47%);
+  --base-color-scale-coral-6-hsl: 9 70% 36%;
+  --base-color-scale-coral-6: hsl(9, 70%, 36%);
+  --base-color-scale-coral-7-hsl: 8 79% 28%;
+  --base-color-scale-coral-7: hsl(8, 79%, 28%);
+  --base-color-scale-coral-8-hsl: 7 91% 22%;
+  --base-color-scale-coral-8: hsl(7, 91%, 22%);
+  --base-color-scale-coral-9-hsl: 6 98% 16%;
+  --base-color-scale-coral-9: hsl(6, 98%, 16%);
+  --base-color-scale-orange-0-hsl: 28 100% 95%;
+  --base-color-scale-orange-0: hsl(28, 100%, 95%);
+  --base-color-scale-orange-1-hsl: 28 100% 85%;
+  --base-color-scale-orange-1: hsl(28, 100%, 85%);
+  --base-color-scale-orange-2-hsl: 27 100% 74%;
+  --base-color-scale-orange-2: hsl(27, 100%, 74%);
+  --base-color-scale-orange-3-hsl: 25 96% 63%;
+  --base-color-scale-orange-3: hsl(25, 96%, 63%);
+  --base-color-scale-orange-4-hsl: 24 76% 51%;
+  --base-color-scale-orange-4: hsl(24, 76%, 51%);
+  --base-color-scale-orange-5-hsl: 24 100% 37%;
+  --base-color-scale-orange-5: hsl(24, 100%, 37%);
+  --base-color-scale-orange-6-hsl: 23 100% 29%;
+  --base-color-scale-orange-6: hsl(23, 100%, 29%);
+  --base-color-scale-orange-7-hsl: 22 100% 23%;
+  --base-color-scale-orange-7: hsl(22, 100%, 23%);
+  --base-color-scale-orange-8-hsl: 22 100% 18%;
+  --base-color-scale-orange-8: hsl(22, 100%, 18%);
+  --base-color-scale-orange-9-hsl: 19 100% 14%;
+  --base-color-scale-orange-9: hsl(19, 100%, 14%);
+  --base-color-scale-yellow-0-hsl: 50 89% 89%;
+  --base-color-scale-yellow-0: hsl(50, 89%, 89%);
+  --base-color-scale-yellow-1-hsl: 48 87% 73%;
+  --base-color-scale-yellow-1: hsl(48, 87%, 73%);
+  --base-color-scale-yellow-2-hsl: 46 76% 60%;
+  --base-color-scale-yellow-2: hsl(46, 76%, 60%);
+  --base-color-scale-yellow-3-hsl: 44 65% 50%;
+  --base-color-scale-yellow-3: hsl(44, 65%, 50%);
+  --base-color-scale-yellow-4-hsl: 42 100% 37%;
+  --base-color-scale-yellow-4: hsl(42, 100%, 37%);
+  --base-color-scale-yellow-5-hsl: 40 100% 30%;
+  --base-color-scale-yellow-5: hsl(40, 100%, 30%);
+  --base-color-scale-yellow-6-hsl: 37 100% 24%;
+  --base-color-scale-yellow-6: hsl(37, 100%, 24%);
+  --base-color-scale-yellow-7-hsl: 36 98% 19%;
+  --base-color-scale-yellow-7: hsl(36, 98%, 19%);
+  --base-color-scale-yellow-8-hsl: 35 100% 15%;
+  --base-color-scale-yellow-8: hsl(35, 100%, 15%);
+  --base-color-scale-yellow-9-hsl: 34 90% 12%;
+  --base-color-scale-yellow-9: hsl(34, 90%, 12%);
+  --base-color-scale-lemon-0-hsl: 54 95% 85%;
+  --base-color-scale-lemon-0: hsl(54, 95%, 85%);
+  --base-color-scale-lemon-1-hsl: 52 87% 67%;
+  --base-color-scale-lemon-1: hsl(52, 87%, 67%);
+  --base-color-scale-lemon-2-hsl: 51 70% 56%;
+  --base-color-scale-lemon-2: hsl(51, 70%, 56%);
+  --base-color-scale-lemon-3-hsl: 50 72% 45%;
+  --base-color-scale-lemon-3: hsl(50, 72%, 45%);
+  --base-color-scale-lemon-4-hsl: 50 98% 33%;
+  --base-color-scale-lemon-4: hsl(50, 98%, 33%);
+  --base-color-scale-lemon-5-hsl: 49 100% 26%;
+  --base-color-scale-lemon-5: hsl(49, 100%, 26%);
+  --base-color-scale-lemon-6-hsl: 48 100% 20%;
+  --base-color-scale-lemon-6: hsl(48, 100%, 20%);
+  --base-color-scale-lemon-7-hsl: 47 100% 16%;
+  --base-color-scale-lemon-7: hsl(47, 100%, 16%);
+  --base-color-scale-lemon-8-hsl: 46 100% 13%;
+  --base-color-scale-lemon-8: hsl(46, 100%, 13%);
+  --base-color-scale-lemon-9-hsl: 43 100% 10%;
+  --base-color-scale-lemon-9: hsl(43, 100%, 10%);
+  --base-color-scale-lime-0-hsl: 75 86% 85%;
+  --base-color-scale-lime-0: hsl(75, 86%, 85%);
+  --base-color-scale-lime-1-hsl: 76 75% 70%;
+  --base-color-scale-lime-1: hsl(76, 75%, 70%);
+  --base-color-scale-lime-2-hsl: 76 59% 58%;
+  --base-color-scale-lime-2: hsl(76, 59%, 58%);
+  --base-color-scale-lime-3-hsl: 77 51% 48%;
+  --base-color-scale-lime-3: hsl(77, 51%, 48%);
+  --base-color-scale-lime-4-hsl: 78 57% 38%;
+  --base-color-scale-lime-4: hsl(78, 57%, 38%);
+  --base-color-scale-lime-5-hsl: 80 64% 29%;
+  --base-color-scale-lime-5: hsl(80, 64%, 29%);
+  --base-color-scale-lime-6-hsl: 82 66% 22%;
+  --base-color-scale-lime-6: hsl(82, 66%, 22%);
+  --base-color-scale-lime-7-hsl: 84 85% 16%;
+  --base-color-scale-lime-7: hsl(84, 85%, 16%);
+  --base-color-scale-lime-8-hsl: 86 90% 12%;
+  --base-color-scale-lime-8: hsl(86, 90%, 12%);
+  --base-color-scale-lime-9-hsl: 88 96% 9%;
+  --base-color-scale-lime-9: hsl(88, 96%, 9%);
+  --base-color-scale-green-0-hsl: 133 80% 92%;
+  --base-color-scale-green-0: hsl(133, 80%, 92%);
+  --base-color-scale-green-1-hsl: 134 66% 80%;
+  --base-color-scale-green-1: hsl(134, 66%, 80%);
+  --base-color-scale-green-2-hsl: 135 62% 65%;
+  --base-color-scale-green-2: hsl(135, 62%, 65%);
+  --base-color-scale-green-3-hsl: 136 50% 53%;
+  --base-color-scale-green-3: hsl(136, 50%, 53%);
+  --base-color-scale-green-4-hsl: 137 57% 41%;
+  --base-color-scale-green-4: hsl(137, 57%, 41%);
+  --base-color-scale-green-5-hsl: 137 66% 30%;
+  --base-color-scale-green-5: hsl(137, 66%, 30%);
+  --base-color-scale-green-6-hsl: 138 71% 23%;
+  --base-color-scale-green-6: hsl(138, 71%, 23%);
+  --base-color-scale-green-7-hsl: 141 90% 16%;
+  --base-color-scale-green-7: hsl(141, 90%, 16%);
+  --base-color-scale-green-8-hsl: 142 100% 12%;
+  --base-color-scale-green-8: hsl(142, 100%, 12%);
+  --base-color-scale-green-9-hsl: 143 100% 9%;
+  --base-color-scale-green-9: hsl(143, 100%, 9%);
+  --base-color-scale-teal-0-hsl: 172 72% 92%;
+  --base-color-scale-teal-0: hsl(172, 72%, 92%);
+  --base-color-scale-teal-1-hsl: 173 58% 80%;
+  --base-color-scale-teal-1: hsl(173, 58%, 80%);
+  --base-color-scale-teal-2-hsl: 177 57% 63%;
+  --base-color-scale-teal-2: hsl(177, 57%, 63%);
+  --base-color-scale-teal-3-hsl: 177 46% 51%;
+  --base-color-scale-teal-3: hsl(177, 46%, 51%);
+  --base-color-scale-teal-4-hsl: 179 51% 41%;
+  --base-color-scale-teal-4: hsl(179, 51%, 41%);
+  --base-color-scale-teal-5-hsl: 180 66% 29%;
+  --base-color-scale-teal-5: hsl(180, 66%, 29%);
+  --base-color-scale-teal-6-hsl: 181 67% 23%;
+  --base-color-scale-teal-6: hsl(181, 67%, 23%);
+  --base-color-scale-teal-7-hsl: 182 95% 15%;
+  --base-color-scale-teal-7: hsl(182, 95%, 15%);
+  --base-color-scale-teal-8-hsl: 182 82% 13%;
+  --base-color-scale-teal-8: hsl(182, 82%, 13%);
+  --base-color-scale-teal-9-hsl: 182 80% 10%;
+  --base-color-scale-teal-9: hsl(182, 80%, 10%);
+  --base-color-scale-blue-0-hsl: 200 100% 95%;
+  --base-color-scale-blue-0: hsl(200, 100%, 95%);
+  --base-color-scale-blue-1-hsl: 203 100% 87%;
+  --base-color-scale-blue-1: hsl(203, 100%, 87%);
+  --base-color-scale-blue-2-hsl: 205 100% 77%;
+  --base-color-scale-blue-2: hsl(205, 100%, 77%);
+  --base-color-scale-blue-3-hsl: 208 100% 67%;
+  --base-color-scale-blue-3: hsl(208, 100%, 67%);
+  --base-color-scale-blue-4-hsl: 211 100% 58%;
+  --base-color-scale-blue-4: hsl(211, 100%, 58%);
+  --base-color-scale-blue-5-hsl: 212 92% 45%;
+  --base-color-scale-blue-5: hsl(212, 92%, 45%);
+  --base-color-scale-blue-6-hsl: 213 95% 36%;
+  --base-color-scale-blue-6: hsl(213, 95%, 36%);
+  --base-color-scale-blue-7-hsl: 214 96% 29%;
+  --base-color-scale-blue-7: hsl(214, 96%, 29%);
+  --base-color-scale-blue-8-hsl: 216 82% 24%;
+  --base-color-scale-blue-8: hsl(216, 82%, 24%);
+  --base-color-scale-blue-9-hsl: 217 89% 18%;
+  --base-color-scale-blue-9: hsl(217, 89%, 18%);
+  --base-color-scale-indigo-0-hsl: 229 100% 97%;
+  --base-color-scale-indigo-0: hsl(229, 100%, 97%);
+  --base-color-scale-indigo-1-hsl: 231 100% 92%;
+  --base-color-scale-indigo-1: hsl(231, 100%, 92%);
+  --base-color-scale-indigo-2-hsl: 232 100% 86%;
+  --base-color-scale-indigo-2: hsl(232, 100%, 86%);
+  --base-color-scale-indigo-3-hsl: 234 100% 80%;
+  --base-color-scale-indigo-3: hsl(234, 100%, 80%);
+  --base-color-scale-indigo-4-hsl: 234 100% 73%;
+  --base-color-scale-indigo-4: hsl(234, 100%, 73%);
+  --base-color-scale-indigo-5-hsl: 237 84% 64%;
+  --base-color-scale-indigo-5: hsl(237, 84%, 64%);
+  --base-color-scale-indigo-6-hsl: 238 61% 53%;
+  --base-color-scale-indigo-6: hsl(238, 61%, 53%);
+  --base-color-scale-indigo-7-hsl: 237 58% 41%;
+  --base-color-scale-indigo-7: hsl(237, 58%, 41%);
+  --base-color-scale-indigo-8-hsl: 235 58% 32%;
+  --base-color-scale-indigo-8: hsl(235, 58%, 32%);
+  --base-color-scale-indigo-9-hsl: 235 57% 23%;
+  --base-color-scale-indigo-9: hsl(235, 57%, 23%);
+  --base-color-scale-purple-0-hsl: 285 100% 97%;
+  --base-color-scale-purple-0: hsl(285, 100%, 97%);
+  --base-color-scale-purple-1-hsl: 271 100% 92%;
+  --base-color-scale-purple-1: hsl(271, 100%, 92%);
+  --base-color-scale-purple-2-hsl: 267 100% 86%;
+  --base-color-scale-purple-2: hsl(267, 100%, 86%);
+  --base-color-scale-purple-3-hsl: 265 100% 80%;
+  --base-color-scale-purple-3: hsl(265, 100%, 80%);
+  --base-color-scale-purple-4-hsl: 261 92% 72%;
+  --base-color-scale-purple-4: hsl(261, 92%, 72%);
+  --base-color-scale-purple-5-hsl: 261 69% 59%;
+  --base-color-scale-purple-5: hsl(261, 69%, 59%);
+  --base-color-scale-purple-6-hsl: 261 53% 48%;
+  --base-color-scale-purple-6: hsl(261, 53%, 48%);
+  --base-color-scale-purple-7-hsl: 261 56% 38%;
+  --base-color-scale-purple-7: hsl(261, 56%, 38%);
+  --base-color-scale-purple-8-hsl: 261 59% 30%;
+  --base-color-scale-purple-8: hsl(261, 59%, 30%);
+  --base-color-scale-purple-9-hsl: 260 66% 23%;
+  --base-color-scale-purple-9: hsl(260, 66%, 23%);
+  --base-color-scale-pink-0-hsl: 330 100% 97%;
+  --base-color-scale-pink-0: hsl(330, 100%, 97%);
+  --base-color-scale-pink-1-hsl: 327 100% 91%;
+  --base-color-scale-pink-1: hsl(327, 100%, 91%);
+  --base-color-scale-pink-2-hsl: 327 100% 84%;
+  --base-color-scale-pink-2: hsl(327, 100%, 84%);
+  --base-color-scale-pink-3-hsl: 326 100% 75%;
+  --base-color-scale-pink-3: hsl(326, 100%, 75%);
+  --base-color-scale-pink-4-hsl: 325 76% 63%;
+  --base-color-scale-pink-4: hsl(325, 76%, 63%);
+  --base-color-scale-pink-5-hsl: 324 54% 49%;
+  --base-color-scale-pink-5: hsl(324, 54%, 49%);
+  --base-color-scale-pink-6-hsl: 323 59% 38%;
+  --base-color-scale-pink-6: hsl(323, 59%, 38%);
+  --base-color-scale-pink-7-hsl: 322 58% 30%;
+  --base-color-scale-pink-7: hsl(322, 58%, 30%);
+  --base-color-scale-pink-8-hsl: 320 67% 23%;
+  --base-color-scale-pink-8: hsl(320, 67%, 23%);
+  --base-color-scale-pink-9-hsl: 319 93% 16%;
+  --base-color-scale-pink-9: hsl(319, 93%, 16%);
+  --base-color-scale-black-0-hsl: 213 14% 12%;
+  --base-color-scale-black-0: hsl(213, 14%, 12%);
+  --base-color-scale-white-0-hsl: 0 100% 100%;
+  --base-color-scale-white-0: hsl(0, 100%, 100%);
+}
+
+[data-color-mode="dark"] {
+  --base-color-scale-gray-0-hsl: 210 67% 96%;
+  --base-color-scale-gray-0: hsl(210, 67%, 96%);
+  --base-color-scale-gray-1-hsl: 210 17% 82%;
+  --base-color-scale-gray-1: hsl(210, 17%, 82%);
+  --base-color-scale-gray-2-hsl: 212 14% 73%;
+  --base-color-scale-gray-2: hsl(212, 14%, 73%);
+  --base-color-scale-gray-3-hsl: 212 9% 58%;
+  --base-color-scale-gray-3: hsl(212, 9%, 58%);
+  --base-color-scale-gray-4-hsl: 215 8% 47%;
+  --base-color-scale-gray-4: hsl(215, 8%, 47%);
+  --base-color-scale-gray-5-hsl: 214 10% 31%;
+  --base-color-scale-gray-5: hsl(214, 10%, 31%);
+  --base-color-scale-gray-6-hsl: 212 12% 21%;
+  --base-color-scale-gray-6: hsl(212, 12%, 21%);
+  --base-color-scale-gray-7-hsl: 215 15% 15%;
+  --base-color-scale-gray-7: hsl(215, 15%, 15%);
+  --base-color-scale-gray-8-hsl: 215 21% 11%;
+  --base-color-scale-gray-8: hsl(215, 21%, 11%);
+  --base-color-scale-gray-9-hsl: 216 28% 7%;
+  --base-color-scale-gray-9: hsl(216, 28%, 7%);
+  --base-color-scale-red-0-hsl: 8 100% 92%;
+  --base-color-scale-red-0: hsl(8, 100%, 92%);
+  --base-color-scale-red-1-hsl: 6 100% 86%;
+  --base-color-scale-red-1: hsl(6, 100%, 86%);
+  --base-color-scale-red-2-hsl: 5 100% 80%;
+  --base-color-scale-red-2: hsl(5, 100%, 80%);
+  --base-color-scale-red-3-hsl: 4 100% 72%;
+  --base-color-scale-red-3: hsl(4, 100%, 72%);
+  --base-color-scale-red-4-hsl: 3 93% 63%;
+  --base-color-scale-red-4: hsl(3, 93%, 63%);
+  --base-color-scale-red-5-hsl: 1 69% 53%;
+  --base-color-scale-red-5: hsl(1, 69%, 53%);
+  --base-color-scale-red-6-hsl: 360 68% 43%;
+  --base-color-scale-red-6: hsl(360, 68%, 43%);
+  --base-color-scale-red-7-hsl: 358 74% 32%;
+  --base-color-scale-red-7: hsl(358, 74%, 32%);
+  --base-color-scale-red-8-hsl: 356 89% 21%;
+  --base-color-scale-red-8: hsl(356, 89%, 21%);
+  --base-color-scale-red-9-hsl: 0 95% 15%;
+  --base-color-scale-red-9: hsl(0, 95%, 15%);
+  --base-color-scale-coral-0-hsl: 15 100% 91%;
+  --base-color-scale-coral-0: hsl(15, 100%, 91%);
+  --base-color-scale-coral-1-hsl: 12 100% 85%;
+  --base-color-scale-coral-1: hsl(12, 100%, 85%);
+  --base-color-scale-coral-2-hsl: 12 100% 77%;
+  --base-color-scale-coral-2: hsl(12, 100%, 77%);
+  --base-color-scale-coral-3-hsl: 11 90% 68%;
+  --base-color-scale-coral-3: hsl(11, 90%, 68%);
+  --base-color-scale-coral-4-hsl: 10 80% 59%;
+  --base-color-scale-coral-4: hsl(10, 80%, 59%);
+  --base-color-scale-coral-5-hsl: 9 64% 49%;
+  --base-color-scale-coral-5: hsl(9, 64%, 49%);
+  --base-color-scale-coral-6-hsl: 8 69% 40%;
+  --base-color-scale-coral-6: hsl(8, 69%, 40%);
+  --base-color-scale-coral-7-hsl: 7 76% 30%;
+  --base-color-scale-coral-7: hsl(7, 76%, 30%);
+  --base-color-scale-coral-8-hsl: 6 92% 20%;
+  --base-color-scale-coral-8: hsl(6, 92%, 20%);
+  --base-color-scale-coral-9-hsl: 5 97% 14%;
+  --base-color-scale-coral-9: hsl(5, 97%, 14%);
+  --base-color-scale-orange-0-hsl: 34 100% 86%;
+  --base-color-scale-orange-0: hsl(34, 100%, 86%);
+  --base-color-scale-orange-1-hsl: 33 100% 75%;
+  --base-color-scale-orange-1: hsl(33, 100%, 75%);
+  --base-color-scale-orange-2-hsl: 28 100% 67%;
+  --base-color-scale-orange-2: hsl(28, 100%, 67%);
+  --base-color-scale-orange-3-hsl: 25 86% 59%;
+  --base-color-scale-orange-3: hsl(25, 86%, 59%);
+  --base-color-scale-orange-4-hsl: 23 71% 51%;
+  --base-color-scale-orange-4: hsl(23, 71%, 51%);
+  --base-color-scale-orange-5-hsl: 21 73% 43%;
+  --base-color-scale-orange-5: hsl(21, 73%, 43%);
+  --base-color-scale-orange-6-hsl: 20 76% 35%;
+  --base-color-scale-orange-6: hsl(20, 76%, 35%);
+  --base-color-scale-orange-7-hsl: 19 84% 25%;
+  --base-color-scale-orange-7: hsl(19, 84%, 25%);
+  --base-color-scale-orange-8-hsl: 19 96% 18%;
+  --base-color-scale-orange-8: hsl(19, 96%, 18%);
+  --base-color-scale-orange-9-hsl: 19 100% 12%;
+  --base-color-scale-orange-9: hsl(19, 100%, 12%);
+  --base-color-scale-yellow-0-hsl: 46 86% 80%;
+  --base-color-scale-yellow-0: hsl(46, 86%, 80%);
+  --base-color-scale-yellow-1-hsl: 44 85% 66%;
+  --base-color-scale-yellow-1: hsl(44, 85%, 66%);
+  --base-color-scale-yellow-2-hsl: 42 74% 57%;
+  --base-color-scale-yellow-2: hsl(42, 74%, 57%);
+  --base-color-scale-yellow-3-hsl: 41 72% 48%;
+  --base-color-scale-yellow-3: hsl(41, 72%, 48%);
+  --base-color-scale-yellow-4-hsl: 40 91% 38%;
+  --base-color-scale-yellow-4: hsl(40, 91%, 38%);
+  --base-color-scale-yellow-5-hsl: 40 96% 32%;
+  --base-color-scale-yellow-5: hsl(40, 96%, 32%);
+  --base-color-scale-yellow-6-hsl: 37 91% 27%;
+  --base-color-scale-yellow-6: hsl(37, 91%, 27%);
+  --base-color-scale-yellow-7-hsl: 35 100% 21%;
+  --base-color-scale-yellow-7: hsl(35, 100%, 21%);
+  --base-color-scale-yellow-8-hsl: 33 100% 15%;
+  --base-color-scale-yellow-8: hsl(33, 100%, 15%);
+  --base-color-scale-yellow-9-hsl: 30 100% 10%;
+  --base-color-scale-yellow-9: hsl(30, 100%, 10%);
+  --base-color-scale-lemon-0-hsl: 54 100% 83%;
+  --base-color-scale-lemon-0: hsl(54, 100%, 83%);
+  --base-color-scale-lemon-1-hsl: 53 94% 67%;
+  --base-color-scale-lemon-1: hsl(53, 94%, 67%);
+  --base-color-scale-lemon-2-hsl: 52 73% 57%;
+  --base-color-scale-lemon-2: hsl(52, 73%, 57%);
+  --base-color-scale-lemon-3-hsl: 52 82% 42%;
+  --base-color-scale-lemon-3: hsl(52, 82%, 42%);
+  --base-color-scale-lemon-4-hsl: 52 100% 33%;
+  --base-color-scale-lemon-4: hsl(52, 100%, 33%);
+  --base-color-scale-lemon-5-hsl: 51 100% 27%;
+  --base-color-scale-lemon-5: hsl(51, 100%, 27%);
+  --base-color-scale-lemon-6-hsl: 50 100% 22%;
+  --base-color-scale-lemon-6: hsl(50, 100%, 22%);
+  --base-color-scale-lemon-7-hsl: 48 100% 17%;
+  --base-color-scale-lemon-7: hsl(48, 100%, 17%);
+  --base-color-scale-lemon-8-hsl: 46 100% 12%;
+  --base-color-scale-lemon-8: hsl(46, 100%, 12%);
+  --base-color-scale-lemon-9-hsl: 43 100% 8%;
+  --base-color-scale-lemon-9: hsl(43, 100%, 8%);
+  --base-color-scale-lime-0-hsl: 75 74% 76%;
+  --base-color-scale-lime-0: hsl(75, 74%, 76%);
+  --base-color-scale-lime-1-hsl: 76 62% 64%;
+  --base-color-scale-lime-1: hsl(76, 62%, 64%);
+  --base-color-scale-lime-2-hsl: 77 54% 53%;
+  --base-color-scale-lime-2: hsl(77, 54%, 53%);
+  --base-color-scale-lime-3-hsl: 78 54% 45%;
+  --base-color-scale-lime-3: hsl(78, 54%, 45%);
+  --base-color-scale-lime-4-hsl: 79 60% 37%;
+  --base-color-scale-lime-4: hsl(79, 60%, 37%);
+  --base-color-scale-lime-5-hsl: 81 69% 30%;
+  --base-color-scale-lime-5: hsl(81, 69%, 30%);
+  --base-color-scale-lime-6-hsl: 83 75% 23%;
+  --base-color-scale-lime-6: hsl(83, 75%, 23%);
+  --base-color-scale-lime-7-hsl: 85 84% 17%;
+  --base-color-scale-lime-7: hsl(85, 84%, 17%);
+  --base-color-scale-lime-8-hsl: 89 90% 11%;
+  --base-color-scale-lime-8: hsl(89, 90%, 11%);
+  --base-color-scale-lime-9-hsl: 94 95% 7%;
+  --base-color-scale-lime-9: hsl(94, 95%, 7%);
+  --base-color-scale-green-0-hsl: 124 78% 82%;
+  --base-color-scale-green-0: hsl(124, 78%, 82%);
+  --base-color-scale-green-1-hsl: 125 69% 70%;
+  --base-color-scale-green-1: hsl(125, 69%, 70%);
+  --base-color-scale-green-2-hsl: 127 59% 58%;
+  --base-color-scale-green-2: hsl(127, 59%, 58%);
+  --base-color-scale-green-3-hsl: 128 49% 49%;
+  --base-color-scale-green-3: hsl(128, 49%, 49%);
+  --base-color-scale-green-4-hsl: 131 55% 40%;
+  --base-color-scale-green-4: hsl(131, 55%, 40%);
+  --base-color-scale-green-5-hsl: 132 59% 33%;
+  --base-color-scale-green-5: hsl(132, 59%, 33%);
+  --base-color-scale-green-6-hsl: 135 62% 26%;
+  --base-color-scale-green-6: hsl(135, 62%, 26%);
+  --base-color-scale-green-7-hsl: 138 69% 19%;
+  --base-color-scale-green-7: hsl(138, 69%, 19%);
+  --base-color-scale-green-8-hsl: 141 90% 12%;
+  --base-color-scale-green-8: hsl(141, 90%, 12%);
+  --base-color-scale-green-9-hsl: 139 81% 8%;
+  --base-color-scale-green-9: hsl(139, 81%, 8%);
+  --base-color-scale-teal-0-hsl: 173 59% 84%;
+  --base-color-scale-teal-0: hsl(173, 59%, 84%);
+  --base-color-scale-teal-1-hsl: 174 57% 71%;
+  --base-color-scale-teal-1: hsl(174, 57%, 71%);
+  --base-color-scale-teal-2-hsl: 176 53% 57%;
+  --base-color-scale-teal-2: hsl(176, 53%, 57%);
+  --base-color-scale-teal-3-hsl: 178 56% 45%;
+  --base-color-scale-teal-3: hsl(178, 56%, 45%);
+  --base-color-scale-teal-4-hsl: 178 58% 39%;
+  --base-color-scale-teal-4: hsl(178, 58%, 39%);
+  --base-color-scale-teal-5-hsl: 179 64% 31%;
+  --base-color-scale-teal-5: hsl(179, 64%, 31%);
+  --base-color-scale-teal-6-hsl: 181 68% 25%;
+  --base-color-scale-teal-6: hsl(181, 68%, 25%);
+  --base-color-scale-teal-7-hsl: 181 76% 18%;
+  --base-color-scale-teal-7: hsl(181, 76%, 18%);
+  --base-color-scale-teal-8-hsl: 181 84% 12%;
+  --base-color-scale-teal-8: hsl(181, 84%, 12%);
+  --base-color-scale-teal-9-hsl: 182 90% 8%;
+  --base-color-scale-teal-9: hsl(182, 90%, 8%);
+  --base-color-scale-blue-0-hsl: 206 100% 90%;
+  --base-color-scale-blue-0: hsl(206, 100%, 90%);
+  --base-color-scale-blue-1-hsl: 207 100% 82%;
+  --base-color-scale-blue-1: hsl(207, 100%, 82%);
+  --base-color-scale-blue-2-hsl: 208 100% 74%;
+  --base-color-scale-blue-2: hsl(208, 100%, 74%);
+  --base-color-scale-blue-3-hsl: 212 100% 67%;
+  --base-color-scale-blue-3: hsl(212, 100%, 67%);
+  --base-color-scale-blue-4-hsl: 215 98% 61%;
+  --base-color-scale-blue-4: hsl(215, 98%, 61%);
+  --base-color-scale-blue-5-hsl: 216 84% 52%;
+  --base-color-scale-blue-5: hsl(216, 84%, 52%);
+  --base-color-scale-blue-6-hsl: 217 84% 42%;
+  --base-color-scale-blue-6: hsl(217, 84%, 42%);
+  --base-color-scale-blue-7-hsl: 218 85% 33%;
+  --base-color-scale-blue-7: hsl(218, 85%, 33%);
+  --base-color-scale-blue-8-hsl: 219 80% 23%;
+  --base-color-scale-blue-8: hsl(219, 80%, 23%);
+  --base-color-scale-blue-9-hsl: 220 88% 16%;
+  --base-color-scale-blue-9: hsl(220, 88%, 16%);
+  --base-color-scale-indigo-0-hsl: 227 100% 93%;
+  --base-color-scale-indigo-0: hsl(227, 100%, 93%);
+  --base-color-scale-indigo-1-hsl: 230 100% 89%;
+  --base-color-scale-indigo-1: hsl(230, 100%, 89%);
+  --base-color-scale-indigo-2-hsl: 234 100% 84%;
+  --base-color-scale-indigo-2: hsl(234, 100%, 84%);
+  --base-color-scale-indigo-3-hsl: 236 100% 79%;
+  --base-color-scale-indigo-3: hsl(236, 100%, 79%);
+  --base-color-scale-indigo-4-hsl: 238 91% 73%;
+  --base-color-scale-indigo-4: hsl(238, 91%, 73%);
+  --base-color-scale-indigo-5-hsl: 238 83% 65%;
+  --base-color-scale-indigo-5: hsl(238, 83%, 65%);
+  --base-color-scale-indigo-6-hsl: 237 60% 55%;
+  --base-color-scale-indigo-6: hsl(237, 60%, 55%);
+  --base-color-scale-indigo-7-hsl: 237 54% 43%;
+  --base-color-scale-indigo-7: hsl(237, 54%, 43%);
+  --base-color-scale-indigo-8-hsl: 235 61% 30%;
+  --base-color-scale-indigo-8: hsl(235, 61%, 30%);
+  --base-color-scale-indigo-9-hsl: 237 65% 21%;
+  --base-color-scale-indigo-9: hsl(237, 65%, 21%);
+  --base-color-scale-purple-0-hsl: 267 100% 94%;
+  --base-color-scale-purple-0: hsl(267, 100%, 94%);
+  --base-color-scale-purple-1-hsl: 270 100% 89%;
+  --base-color-scale-purple-1: hsl(270, 100%, 89%);
+  --base-color-scale-purple-2-hsl: 269 100% 83%;
+  --base-color-scale-purple-2: hsl(269, 100%, 83%);
+  --base-color-scale-purple-3-hsl: 265 100% 77%;
+  --base-color-scale-purple-3: hsl(265, 100%, 77%);
+  --base-color-scale-purple-4-hsl: 262 89% 71%;
+  --base-color-scale-purple-4: hsl(262, 89%, 71%);
+  --base-color-scale-purple-5-hsl: 261 73% 62%;
+  --base-color-scale-purple-5: hsl(261, 73%, 62%);
+  --base-color-scale-purple-6-hsl: 260 56% 52%;
+  --base-color-scale-purple-6: hsl(260, 56%, 52%);
+  --base-color-scale-purple-7-hsl: 261 52% 39%;
+  --base-color-scale-purple-7: hsl(261, 52%, 39%);
+  --base-color-scale-purple-8-hsl: 262 58% 28%;
+  --base-color-scale-purple-8: hsl(262, 58%, 28%);
+  --base-color-scale-purple-9-hsl: 261 67% 19%;
+  --base-color-scale-purple-9: hsl(261, 67%, 19%);
+  --base-color-scale-pink-0-hsl: 331 100% 93%;
+  --base-color-scale-pink-0: hsl(331, 100%, 93%);
+  --base-color-scale-pink-1-hsl: 331 100% 87%;
+  --base-color-scale-pink-1: hsl(331, 100%, 87%);
+  --base-color-scale-pink-2-hsl: 329 100% 80%;
+  --base-color-scale-pink-2: hsl(329, 100%, 80%);
+  --base-color-scale-pink-3-hsl: 329 89% 72%;
+  --base-color-scale-pink-3: hsl(329, 89%, 72%);
+  --base-color-scale-pink-4-hsl: 328 63% 62%;
+  --base-color-scale-pink-4: hsl(328, 63%, 62%);
+  --base-color-scale-pink-5-hsl: 327 48% 52%;
+  --base-color-scale-pink-5: hsl(327, 48%, 52%);
+  --base-color-scale-pink-6-hsl: 327 49% 42%;
+  --base-color-scale-pink-6: hsl(327, 49%, 42%);
+  --base-color-scale-pink-7-hsl: 326 55% 32%;
+  --base-color-scale-pink-7: hsl(326, 55%, 32%);
+  --base-color-scale-pink-8-hsl: 325 71% 22%;
+  --base-color-scale-pink-8: hsl(325, 71%, 22%);
+  --base-color-scale-pink-9-hsl: 324 83% 14%;
+  --base-color-scale-pink-9: hsl(324, 83%, 14%);
+  --base-color-scale-black-0-hsl: 218 80% 2%;
+  --base-color-scale-black-0: hsl(218, 80%, 2%);
+  --base-color-scale-white-0-hsl: 0 100% 100%;
+  --base-color-scale-white-0: hsl(0, 100%, 100%);
+}
+
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:48 GMT
+ */
+
+:root {
+  --base-size-128: 8rem;
+  --base-size-112: 7rem;
+  --base-size-96: 6rem;
+  --base-size-80: 5rem;
+  --base-size-64: 4rem;
+  --base-size-48: 3rem;
+  --base-size-44: 2.75rem;
+  --base-size-40: 2.5rem;
+  --base-size-36: 2.25rem;
+  --base-size-32: 2rem;
+  --base-size-28: 1.75rem;
+  --base-size-24: 1.5rem;
+  --base-size-20: 1.25rem;
+  --base-size-16: 1rem;
+  --base-size-12: 0.75rem;
+  --base-size-8: 0.5rem;
+  --base-size-4: 0.25rem;
+}
+
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:48 GMT
+ */
+
+:root {
+  --brand-text-style-italic-10: "ital" 10;
+  --brand-text-style-italic-9: "ital" 9;
+  --brand-text-style-italic-8: "ital" 8;
+  --brand-text-style-italic-7: "ital" 7;
+  --brand-text-style-italic-6: "ital" 6;
+  --brand-text-style-italic-5: "ital" 5;
+  --brand-text-style-italic-4: "ital" 4;
+  --brand-text-style-italic-3: "ital" 3;
+  --brand-text-style-italic-2: "ital" 2;
+  --brand-text-style-italic-1: "ital" 1;
+  --brand-text-letterSpacing-1000: -0.01em;
+  --brand-text-letterSpacing-900: -0.01em;
+  --brand-text-letterSpacing-800: -0.01em;
+  --brand-text-letterSpacing-700: -0.01em;
+  --brand-text-lineHeight-1000: 3.25rem;
+  --brand-text-lineHeight-900: 2.75rem;
+  --brand-text-lineHeight-800: 2.25rem;
+  --brand-text-lineHeight-700: 2.5rem;
+  --brand-text-lineHeight-600: 2rem;
+  --brand-text-lineHeight-500: 1.75rem;
+  --brand-text-lineHeight-400: 1.5rem;
+  --brand-text-lineHeight-300: 1.5rem;
+  --brand-text-lineHeight-200: 1.25rem;
+  --brand-text-lineHeight-100: 1.25rem;
+  --brand-text-size-1000: 3rem;
+  --brand-text-size-900: 2.5rem;
+  --brand-text-size-800: 2rem;
+  --brand-text-size-700: 1.75rem;
+  --brand-text-size-600: 1.5rem;
+  --brand-text-size-500: 1.25rem;
+  --brand-text-size-400: 1rem;
+  --brand-text-size-300: 1rem;
+  --brand-text-size-200: 0.875rem;
+  --brand-text-size-100: 0.75rem;
+  --brand-text-weight-1000: var(--base-text-weight-extrabold);
+  --brand-text-weight-900: var(--base-text-weight-extrabold);
+  --brand-text-weight-800: var(--base-text-weight-extrabold);
+  --brand-text-weight-700: var(--base-text-weight-normal);
+  --brand-text-weight-600: var(--base-text-weight-normal);
+  --brand-text-weight-500: var(--base-text-weight-normal);
+  --brand-text-weight-400: var(--base-text-weight-normal);
+  --brand-text-weight-300: var(--base-text-weight-normal);
+  --brand-text-weight-200: var(--base-text-weight-normal);
+  --brand-text-weight-100: var(--base-text-weight-normal);
+  --brand-heading-letterSpacing-700: -0.01em;
+  --brand-heading-letterSpacing-600: -0.01em;
+  --brand-heading-letterSpacing-500: -0.01em;
+  --brand-heading-letterSpacing-400: -0.01em;
+  --brand-heading-weight-700: var(--base-text-weight-bold);
+  --brand-heading-weight-600: var(--base-text-weight-semibold);
+  --brand-heading-weight-500: var(--base-text-weight-semibold);
+  --brand-heading-weight-400: var(--base-text-weight-semibold);
+  --brand-fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+  --brand-fontStack-sansSerifAlt: "Alliance2", "Alliance2HeaderFallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  --brand-fontStack-sansSerif: "Alliance1", "Alliance1Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  --brand-fontStack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  --base-text-weight-heavy: 900;
+  --base-text-weight-extrabold: 800;
+  --base-text-weight-bold: 700;
+  --base-text-weight-semibold: 600;
+  --base-text-weight-medium: 500;
+  --base-text-weight-normal: 400;
+  --base-text-weight-light: 300;
+  --brand-heading-fontFamily: var(--brand-fontStack-sansSerif);
+  --brand-body-fontFamily: var(--brand-fontStack-sansSerif);
+}
+
+@media (min-width: 768px) {
+  :root {
+    --brand-text-letterSpacing-1000: -0.03em;
+    --brand-text-letterSpacing-900: -0.03em;
+    --brand-text-letterSpacing-800: -0.01em;
+    --brand-text-letterSpacing-700: -0.01em;
+    --brand-text-lineHeight-1000: 4.75rem;
+    --brand-text-lineHeight-900: 3.75rem;
+    --brand-text-lineHeight-800: 3.25rem;
+    --brand-text-lineHeight-700: 3.25rem;
+    --brand-text-lineHeight-600: 2.5rem;
+    --brand-text-lineHeight-500: 1.75rem;
+    --brand-text-lineHeight-400: 1.75rem;
+    --brand-text-lineHeight-300: 1.5rem;
+    --brand-text-lineHeight-200: 1.25rem;
+    --brand-text-lineHeight-100: 1.25rem;
+    --brand-text-size-1000: 4.5rem;
+    --brand-text-size-900: 3.5rem;
+    --brand-text-size-800: 3rem;
+    --brand-text-size-700: 2.5rem;
+    --brand-text-size-600: 1.75rem;
+    --brand-text-size-500: 1.25rem;
+    --brand-text-size-400: 1.25rem;
+    --brand-text-size-300: 1rem;
+    --brand-text-size-200: 0.875rem;
+    --brand-text-size-100: 0.75rem;
+    --brand-text-weight-1000: var(--base-text-weight-extrabold);
+    --brand-text-weight-900: var(--base-text-weight-extrabold);
+    --brand-text-weight-800: var(--base-text-weight-extrabold);
+    --brand-text-weight-700: var(--base-text-weight-normal);
+    --brand-text-weight-600: var(--base-text-weight-normal);
+    --brand-text-weight-500: var(--base-text-weight-normal);
+    --brand-text-weight-400: var(--base-text-weight-normal);
+    --brand-text-weight-300: var(--base-text-weight-normal);
+    --brand-text-weight-200: var(--base-text-weight-normal);
+    --brand-text-weight-100: var(--base-text-weight-normal);
+    --brand-heading-letterSpacing-700: -0.01em;
+    --brand-heading-letterSpacing-600: -0.01em;
+    --brand-heading-letterSpacing-500: -0.01em;
+    --brand-heading-letterSpacing-400: -0.01em;
+    --brand-heading-weight-700: var(--base-text-weight-bold);
+    --brand-heading-weight-600: var(--base-text-weight-semibold);
+    --brand-heading-weight-500: var(--base-text-weight-semibold);
+    --brand-heading-weight-400: var(--base-text-weight-semibold);
+  }
+}
+
+@media (min-width: 1012px) {
+  :root {
+    --brand-text-letterSpacing-1000: -0.03em;
+    --brand-text-letterSpacing-900: -0.03em;
+    --brand-text-letterSpacing-800: -0.01em;
+    --brand-text-letterSpacing-700: -0.01em;
+    --brand-text-lineHeight-1000: 6.25rem;
+    --brand-text-lineHeight-900: 4.75rem;
+    --brand-text-lineHeight-800: 4.25rem;
+    --brand-text-lineHeight-700: 4rem;
+    --brand-text-lineHeight-600: 2.75rem;
+    --brand-text-lineHeight-500: 2rem;
+    --brand-text-lineHeight-400: 1.75rem;
+    --brand-text-lineHeight-300: 1.5rem;
+    --brand-text-lineHeight-200: 1.25rem;
+    --brand-text-lineHeight-100: 1.25rem;
+    --brand-text-size-1000: 6rem;
+    --brand-text-size-900: 4.5rem;
+    --brand-text-size-800: 4rem;
+    --brand-text-size-700: 3rem;
+    --brand-text-size-600: 2rem;
+    --brand-text-size-500: 1.5rem;
+    --brand-text-size-400: 1.25rem;
+    --brand-text-size-300: 1rem;
+    --brand-text-size-200: 0.875rem;
+    --brand-text-size-100: 0.75rem;
+    --brand-text-weight-1000: var(--base-text-weight-extrabold);
+    --brand-text-weight-900: var(--base-text-weight-extrabold);
+    --brand-text-weight-800: var(--base-text-weight-extrabold);
+    --brand-text-weight-700: var(--base-text-weight-normal);
+    --brand-text-weight-600: var(--base-text-weight-normal);
+    --brand-text-weight-500: var(--base-text-weight-normal);
+    --brand-text-weight-400: var(--base-text-weight-normal);
+    --brand-text-weight-300: var(--base-text-weight-normal);
+    --brand-text-weight-200: var(--base-text-weight-normal);
+    --brand-text-weight-100: var(--base-text-weight-normal);
+    --brand-heading-letterSpacing-700: -0.01em;
+    --brand-heading-letterSpacing-600: -0.01em;
+    --brand-heading-letterSpacing-500: -0.01em;
+    --brand-heading-letterSpacing-400: -0.01em;
+    --brand-heading-weight-700: var(--base-text-weight-bold);
+    --brand-heading-weight-600: var(--base-text-weight-semibold);
+    --brand-heading-weight-500: var(--base-text-weight-semibold);
+    --brand-heading-weight-400: var(--base-text-weight-semibold);
+  }
+}
+
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:47 GMT
+ */
+
+:root {
+  --brand-breakpoint-xxlarge: 90rem;
+  --brand-breakpoint-xlarge: 80rem;
+  --brand-breakpoint-large: 63.25rem;
+  --brand-breakpoint-medium: 48rem;
+  --brand-breakpoint-small: 34rem;
+  --brand-breakpoint-xsmall: 20rem;
+}
+
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:48 GMT
+ */
+
+:root {
+  --brand-color-text-default: var(--base-color-scale-gray-9);
+  --brand-color-text-muted: var(--base-color-scale-gray-6);
+  --brand-color-text-subtle: var(--base-color-scale-gray-5);
+  --brand-color-text-onEmphasis: var(--base-color-scale-white-0);
+  --brand-color-neutral-emphasisPlus: var(--base-color-scale-gray-9);
+  --brand-color-neutral-emphasis: var(--base-color-scale-gray-5);
+  --brand-color-neutral-muted: hsl(var(--base-color-scale-gray-3-hsl) / 99.8%);
+  --brand-color-neutral-subtle: hsl(var(--base-color-scale-gray-1-hsl) / 99.5%);
+  --brand-color-canvas-default: var(--base-color-scale-white-0);
+  --brand-color-canvas-overlay: var(--base-color-scale-white-0);
+  --brand-color-canvas-inset: var(--base-color-scale-gray-0);
+  --brand-color-canvas-subtle: var(--base-color-scale-gray-0);
+  --brand-color-border-default: var(--base-color-scale-gray-2);
+  --brand-color-border-muted: hsl(var(--base-color-scale-gray-2-hsl) / 99.7%);
+  --brand-color-border-subtle: hsl(var(--base-color-scale-black-0-hsl) / 99.85%);
+}
+
+[data-color-mode="light"] {
+  --brand-color-text-default: var(--base-color-scale-gray-9);
+  --brand-color-text-muted: var(--base-color-scale-gray-6);
+  --brand-color-text-subtle: var(--base-color-scale-gray-5);
+  --brand-color-text-onEmphasis: var(--base-color-scale-white-0);
+  --brand-color-neutral-emphasisPlus: var(--base-color-scale-gray-9);
+  --brand-color-neutral-emphasis: var(--base-color-scale-gray-5);
+  --brand-color-neutral-muted: hsl(var(--base-color-scale-gray-3-hsl) / 99.8%);
+  --brand-color-neutral-subtle: hsl(var(--base-color-scale-gray-1-hsl) / 99.5%);
+  --brand-color-canvas-default: var(--base-color-scale-white-0);
+  --brand-color-canvas-overlay: var(--base-color-scale-white-0);
+  --brand-color-canvas-inset: var(--base-color-scale-gray-0);
+  --brand-color-canvas-subtle: var(--base-color-scale-gray-0);
+  --brand-color-border-default: var(--base-color-scale-gray-2);
+  --brand-color-border-muted: hsl(var(--base-color-scale-gray-2-hsl) / 99.7%);
+  --brand-color-border-subtle: hsl(var(--base-color-scale-black-0-hsl) / 99.85%);
+}
+
+[data-color-mode="dark"] {
+  --brand-color-text-default: var(--base-color-scale-white-0);
+  --brand-color-text-muted: var(--base-color-scale-gray-3);
+  --brand-color-text-subtle: var(--base-color-scale-gray-4);
+  --brand-color-text-onEmphasis: var(--base-color-scale-black-0);
+  --brand-color-neutral-emphasisPlus: var(--base-color-scale-gray-4);
+  --brand-color-neutral-emphasis: var(--base-color-scale-gray-4);
+  --brand-color-neutral-muted: hsl(var(--base-color-scale-gray-4-hsl) / 99.6%);
+  --brand-color-neutral-subtle: hsl(var(--base-color-scale-gray-4-hsl) / 99.9%);
+  --brand-color-canvas-default: var(--base-color-scale-gray-9);
+  --brand-color-canvas-overlay: var(--base-color-scale-gray-8);
+  --brand-color-canvas-inset: var(--base-color-scale-black-0);
+  --brand-color-canvas-subtle: var(--base-color-scale-gray-8);
+  --brand-color-border-default: var(--base-color-scale-gray-6);
+  --brand-color-border-muted: var(--base-color-scale-gray-7);
+  --brand-color-border-subtle: hsl(var(--base-color-scale-gray-0-hsl) / 99.9%);
+}
 
 .Hero-module__Hero___-LIGB {
-  padding: 6rem 0;
+  padding: var(--brand-Hero-narrow-padding);
   display: flex;
   flex-direction: column;
 }
@@ -24,32 +1178,19 @@ body {
 
 .Hero-module__Hero-heading___Ns\+oe {
   margin: 0;
-  font-weight: 700;
-  line-height: 1.1;
   max-width: 18ch;
-  color: var(--gh-color-fg-default);
-}
-
-.Hero-module__Hero--size-small___lTdu6 .Hero-module__Hero-heading___Ns\+oe {
-  font-size: 2.5rem;
-}
-
-.Hero-module__Hero--size-large___LjSYu .Hero-module__Hero-heading___Ns\+oe {
-  font-size: 3rem;
 }
 
 .Hero-module__Hero-description___5DYuI {
   margin: 1.5rem 0 0;
-  font-size: 1rem;
   max-width: 50ch;
-  color: var(--gh-color-fg-muted);
 }
 
 .Hero-module__Hero-actions___TSUhJ {
   margin-top: 2rem;
   display: flex;
   flex-direction: column;
-  align-items: stretch;
+  align-items: center;
   width: 100%;
 }
 
@@ -60,19 +1201,7 @@ body {
 /* Small breakpoint and up */
 @media screen and (min-width: 544px) {
   .Hero-module__Hero___-LIGB {
-    padding: 10.75rem 0;
-  }
-
-  .Hero-module__Hero--size-small___lTdu6 .Hero-module__Hero-heading___Ns\+oe {
-    font-size: 3.5rem;
-  }
-
-  .Hero-module__Hero--size-large___LjSYu .Hero-module__Hero-heading___Ns\+oe {
-    font-size: 4.5rem;
-  }
-
-  .Hero-module__Hero-description___5DYuI {
-    font-size: 1.25rem;
+    padding: var(--brand-Hero-regular-padding);
   }
 
   .Hero-module__Hero-actions___TSUhJ {
@@ -85,21 +1214,6 @@ body {
   }
 }
 
-/* Medium breakpoint and up */
-@media screen and (min-width: 768px) {
-  .Hero-module__Hero--size-small___lTdu6 .Hero-module__Hero-heading___Ns\+oe {
-    font-size: 4.5rem;
-  }
-
-  .Hero-module__Hero--size-large___LjSYu .Hero-module__Hero-heading___Ns\+oe {
-    font-size: 6rem;
-  }
-
-  .Hero-module__Hero--size-large___LjSYu .Hero-module__Hero-description___5DYuI {
-    font-size: 1.5rem;
-  }
-}
-
 .ExpandableArrow-module__ExpandableArrow___Zzb6R {
   transition: transform 200ms;
   transform: translateX(0);
@@ -119,42 +1233,197 @@ body {
   stroke-dashoffset: 20;
 }
 
+.Text-module__Text___TZM3g {
+  font-family: var(--brand-body-fontFamily);
+}
+
+.Text-module__Text--default___cDtXM {
+  color: var(--brand-color-text-default);
+}
+
+.Text-module__Text--muted___\+aYSJ {
+  color: var(--brand-color-text-muted);
+}
+
+.Text-module__Text--700___K4B6u {
+  font-weight: var(--brand-text-weight-700);
+  font-size: var(--brand-text-size-700);
+  line-height: var(--brand-text-lineHeight-700);
+  letter-spacing: var(--brand-text-body-letterSpacing-100);
+}
+
+.Text-module__Text--600___GROsL {
+  font-weight: var(--brand-text-weight-600);
+  font-size: var(--brand-text-size-600);
+  line-height: var(--brand-text-lineHeight-600);
+}
+
+.Text-module__Text--500___ljKQp {
+  font-weight: var(--brand-text-weight-500);
+  font-size: var(--brand-text-size-500);
+  line-height: var(--brand-text-lineHeight-500);
+}
+
+.Text-module__Text--400___jiw28 {
+  font-weight: var(--brand-text-weight-400);
+  font-size: var(--brand-text-size-400);
+  line-height: var(--brand-text-lineHeight-400);
+}
+
+.Text-module__Text--300___iZZEy {
+  font-weight: var(--brand-text-weight-300);
+  font-size: var(--brand-text-size-300);
+  line-height: var(--brand-text-lineHeight-300);
+}
+
+.Text-module__Text--200___EUSWb {
+  font-weight: var(--brand-text-weight-200);
+  font-size: var(--brand-text-size-200);
+  line-height: var(--brand-text-lineHeight-200);
+}
+
+.Text-module__Text--100___kOhhP {
+  font-weight: var(--brand-text-weight-100);
+  font-size: var(--brand-text-size-100);
+  line-height: var(--brand-text-lineHeight-100);
+}
+
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:48 GMT
+ */
+
+:root {
+  --brand-Button-background-base: var(--base-color-scale-black-0);
+  --brand-Button-background-overlay: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15) 0, hsla(0, 0%, 100%, 0) 100%), var(--base-color-scale-black-0);
+  --brand-Button-shadow-default: 0 0 0 1px var(--base-color-scale-black-0);
+  --brand-Button-shadow-hover: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
+  --brand-Button-shadow-focus: hsl(var(--base-color-scale-black-0-hsl) / 15%) 0 0 0 4px;
+}
+
+[data-color-mode="light"] {
+  --brand-Button-background-base: var(--base-color-scale-black-0);
+  --brand-Button-background-overlay: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15) 0, hsla(0, 0%, 100%, 0) 100%), var(--base-color-scale-black-0);
+  --brand-Button-shadow-default: 0 0 0 1px var(--base-color-scale-black-0);
+  --brand-Button-shadow-hover: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
+  --brand-Button-shadow-focus: hsl(var(--base-color-scale-black-0-hsl) / 15%) 0 0 0 4px;
+}
+
+[data-color-mode="dark"] {
+  --brand-Button-background-base: var(--base-color-scale-white-0);
+  --brand-Button-background-overlay: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15) 0, hsla(0, 0%, 100%, 0) 100%), var(--base-color-scale-white-0);
+  --brand-Button-shadow-default: 0 0 0 1px var(--base-color-scale-white-0);
+  --brand-Button-shadow-hover: 0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07);
+  --brand-Button-shadow-focus: hsl(var(--base-color-scale-white-0-hsl) / 25%) 0 0 0 4px;
+}
+
 .LinkButton-module__LinkButton___73d6V {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 1rem 1.5rem;
-  font-size: 1rem;
-  font-weight: 600;
-  line-height: 1;
+  transition: box-shadow 0.2s;
   text-decoration: none;
   border-radius: 6px;
   cursor: pointer;
 }
 
+.LinkButton-module__LinkButton___73d6V:focus {
+  outline: 0;
+  box-shadow: var(--brand-Button-shadow-focus), var(--brand-Button-shadow-hover);
+}
+
+.LinkButton-module__LinkButton--label___-NRnw {
+  font-weight: var(--base-text-weight-semibold);
+}
+
 .LinkButton-module__LinkButton-arrow___bd7ZC {
   margin-left: 4px;
 }
 
 .LinkButton-module__LinkButton--primary___5T51r {
-  color: var(--gh-color-fg-onEmphasis);
-  background-color: var(--gh-color-neutral-emphasisPlus);
+  color: var(--brand-color-text-onEmphasis);
+  background-color: var(--brand-Button-background-base);
+  background: var(--brand-Button-background-overlay);
+}
+
+.LinkButton-module__LinkButton--primary___5T51r:hover {
+  box-shadow: var(--brand-Button-shadow-hover);
+}
+
+.LinkButton-module__LinkButton--label-primary___TSZx\+ {
+  color: var(--brand-color-text-onEmphasis);
 }
 
 .LinkButton-module__LinkButton--secondary___Oc3L1 {
-  color: var(--gh-color-fg-default);
-  box-shadow: inset 0 0 0 1px var(--gh-color-border-default);
+  color: var(--brand-color-text-default);
+  box-shadow: inset 0 0 0 1px var(--brand-color-border-default);
   transition: box-shadow 200ms;
 }
 
 .LinkButton-module__LinkButton--secondary___Oc3L1:hover {
-  box-shadow: inset 0 0 0 2px var(--gh-color-neutral-emphasisPlus);
+  box-shadow: inset 0 0 0 2px var(--brand-color-neutral-emphasisPlus);
 }
 
-/* Small breakpoint and up */
-@media screen and (min-width: 544px) {
-  .LinkButton-module__LinkButton___73d6V {
-    font-size: 1.25rem;
-  }
+.Heading-module__Heading___D-P9Z {
+  color: var(--brand-color-text-default);
+}
+
+.Heading-module__Heading--1___2biru {
+  font-weight: var(--brand-text-weight-900);
+  font-size: var(--brand-text-size-900);
+  line-height: var(--brand-text-lineHeight-900);
+  font-family: var(--brand-heading-fontFamily);
+  letter-spacing: var(--brand-text-letterSpacing-900);
+}
+
+.Heading-module__Heading--2___7UT78 {
+  font-weight: var(--brand-text-weight-800);
+  font-size: var(--brand-text-size-800);
+  line-height: var(--brand-text-lineHeight-800);
+  font-family: var(--brand-heading-fontFamily);
+  letter-spacing: var(--brand-text-letterSpacing-800);
+}
+
+.Heading-module__Heading--3___zFRZy {
+  font-weight: var(--brand-heading-weight-700);
+  font-size: var(--brand-text-size-700);
+  line-height: var(--brand-text-lineHeight-700);
+  font-family: var(--brand-heading-fontFamily);
+  letter-spacing: var(--brand-heading-letterSpacing-700);
+}
+
+.Heading-module__Heading--4___6NI2U {
+  font-weight: var(--brand-heading-weight-600);
+  font-size: var(--brand-text-size-600);
+  line-height: var(--brand-text-lineHeight-600);
+  font-family: var(--brand-heading-fontFamily);
+  letter-spacing: var(--brand-heading-letterSpacing-600);
+}
+
+.Heading-module__Heading--5___Wb4zR {
+  font-weight: var(--brand-heading-weight-500);
+  font-size: var(--brand-text-size-500);
+  line-height: var(--brand-text-lineHeight-500);
+  font-family: var(--brand-heading-fontFamily);
+  letter-spacing: var(--brand-heading-letterSpacing-500);
+}
+
+.Heading-module__Heading--6___6GNA5 {
+  font-weight: var(--brand-heading-weight-400);
+  font-size: var(--brand-text-size-400);
+  line-height: var(--brand-text-lineHeight-400);
+  font-family: var(--brand-heading-fontFamily);
+  letter-spacing: var(--brand-heading-letterSpacing-400);
+}
+
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 May 2022 16:03:47 GMT
+ */
+
+:root {
+  --brand-Hero-regular-padding: var(--base-size-128) 0;
+  --brand-Hero-narrow-padding: var(--base-size-96) 0;
 }