@ngrok/mantle 0.0.4 → 0.0.6

package/dist/mantle.css

@@ -1,14 +1,24 @@
 @import url("https://cdn.ngrok.com/static/fonts/fonts.css");
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/**
+ * provide an a11y escape hatch for those that prefer less motion
+ */
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+		scroll-behavior: auto !important;
+	}
+}
 
 :root {
 	/* ngrok custom blue (600 is current button)
 	* These are required as they are referenced by both light and dark modes.
 	* Replaces the Tailwind blue and a single value of gray.
-	* Not to be used directly. 
+	* Not to be used directly.
 	*/
 
 	--ngrok-blue-050: 221 100% 97%;
@@ -37,74 +47,14 @@
 	--ngrok-grayple-900: 234 18% 17%;
 	--ngrok-grayple-950: 236 20% 11.5%;
 
-	/* for use with the tw-gray scale between 700 and 800 */
-
-	--ngrok-gray-800: 216 23% 22%;
-
 	/**
 	* Tailwind palette.
 	* These are required as they are referenced by both light and dark modes.
-	* Colors not currently utilized: tw-slate, tw-gray, tw-zinc, tw-neutral, tw-stone, tw-blue.
-	* Not to be used directly. 
+	* Not to be used directly.
 	*/
 
 	--tw-black: 0 0% 0%;
 	--tw-white: 0 0% 100%;
-	--tw-slate-050: 210 40% 98%;
-	--tw-slate-100: 210 40% 96.1%;
-	--tw-slate-200: 214.3 31.8% 91.4%;
-	--tw-slate-300: 212.7 26.8% 83.9%;
-	--tw-slate-400: 215 20.2% 65.1%;
-	--tw-slate-500: 215.4 16.3% 46.9%;
-	--tw-slate-600: 215.3 19.3% 34.5%;
-	--tw-slate-700: 215.3 25% 26.7%;
-	--tw-slate-800: 217.2 32.6% 17.5%;
-	--tw-slate-900: 222.2 47.4% 11.2%;
-	--tw-slate-950: 228.6 84% 4.9%;
-	--tw-gray-050: 210 20% 98%;
-	--tw-gray-100: 220 14.3% 95.9%;
-	--tw-gray-200: 220 13% 91%;
-	--tw-gray-300: 216 12.2% 83.9%;
-	--tw-gray-400: 217.9 10.6% 64.9%;
-	--tw-gray-500: 220 8.9% 46.1%;
-	--tw-gray-600: 215 13.8% 34.1%;
-	--tw-gray-700: 216.9 19.1% 26.7%;
-	--tw-gray-800: 215 27.9% 16.9%;
-	--tw-gray-900: 220.9 39.3% 11%;
-	--tw-gray-950: 224 71.4% 4.1%;
-	--tw-zinc-050: 0 0% 98%;
-	--tw-zinc-100: 240 4.8% 95.9%;
-	--tw-zinc-200: 240 5.9% 90%;
-	--tw-zinc-300: 240 4.9% 83.9%;
-	--tw-zinc-400: 240 5% 64.9%;
-	--tw-zinc-500: 240 3.8% 46.1%;
-	--tw-zinc-600: 240 5.2% 33.9%;
-	--tw-zinc-700: 240 5.3% 26.1%;
-	--tw-zinc-800: 240 3.7% 15.9%;
-	--tw-zinc-900: 240 5.9% 10%;
-	--tw-zinc-950: 240 10% 3.9%;
-	--tw-neutral-050: 0 0% 98%;
-	--tw-neutral-100: 0 0% 96.1%;
-	--tw-neutral-200: 0 0% 89.8%;
-	--tw-neutral-300: 0 0% 83.1%;
-	--tw-neutral-400: 0 0% 63.9%;
-	--tw-neutral-500: 0 0% 45.1%;
-	--tw-neutral-600: 0 0% 32.2%;
-	--tw-neutral-700: 0 0% 25.1%;
-	--tw-neutral-800: 0 0% 14.9%;
-	--tw-neutral-900: 0 0% 9%;
-	--tw-neutral-950: 0 0% 3.9%;
-	--tw-stone-050: 60 9.1% 97.8%;
-	--tw-stone-100: 60 4.8% 95.9%;
-	--tw-stone-200: 20 5.9% 90%;
-	--tw-stone-300: 24 5.7% 82.9%;
-	--tw-stone-400: 24 5.4% 63.9%;
-	--tw-stone-500: 25 5.3% 44.7%;
-	--tw-stone-600: 33.3 5.5% 32.4%;
-	--tw-stone-700: 30 6.3% 25.1%;
-	--tw-stone-800: 12 6.5% 15.1%;
-	--tw-stone-900: 24 9.8% 10%;
-	--tw-stone-950: 20 14.3% 4.1%;
 	--tw-red-050: 0 85.7% 97.3%;
 	--tw-red-100: 0 93.3% 94.1%;
 	--tw-red-200: 0 96.3% 89.4%;
@@ -215,17 +165,6 @@
 	--tw-sky-800: 201 90% 27.5%;
 	--tw-sky-900: 202 80.3% 23.9%;
 	--tw-sky-950: 204 80.2% 15.9%;
-	--tw-blue-050: 213.8 100% 96.9%;
-	--tw-blue-100: 214.3 94.6% 92.7%;
-	--tw-blue-200: 213.3 96.9% 87.3%;
-	--tw-blue-300: 211.7 96.4% 78.4%;
-	--tw-blue-400: 213.1 93.9% 67.8%;
-	--tw-blue-500: 217.2 91.2% 59.8%;
-	--tw-blue-600: 221.2 83.2% 53.3%;
-	--tw-blue-700: 224.3 76.3% 48%;
-	--tw-blue-800: 225.9 70.7% 40.2%;
-	--tw-blue-900: 224.4 64.3% 32.9%;
-	--tw-blue-950: 226.2 57% 21%;
 	--tw-indigo-050: 225.9 100% 96.7%;
 	--tw-indigo-100: 226.5 100% 93.9%;
 	--tw-indigo-200: 228 96.5% 88.8%;
@@ -588,6 +527,17 @@
 	--green-800: var(--tw-green-200);
 	--green-900: var(--tw-green-100);
 	--green-950: var(--tw-green-050);
+	--emerald-050: var(--tw-emerald-950);
+	--emerald-100: var(--tw-emerald-900);
+	--emerald-200: var(--tw-emerald-800);
+	--emerald-300: var(--tw-emerald-700);
+	--emerald-400: var(--tw-emerald-600);
+	--emerald-500: var(--tw-emerald-500);
+	--emerald-600: var(--tw-emerald-400);
+	--emerald-700: var(--tw-emerald-300);
+	--emerald-800: var(--tw-emerald-200);
+	--emerald-900: var(--tw-emerald-100);
+	--emerald-950: var(--tw-emerald-050);
 	--teal-050: var(--tw-teal-950);
 	--teal-100: var(--tw-teal-900);
 	--teal-200: var(--tw-teal-800);
@@ -706,20 +656,466 @@
 	--popover-foreground: 210 40% 98%;
 }
 
-@layer base {
-	/**
- * provide an a11y escape hatch for those that prefer less motion
- */
-	@media (prefers-reduced-motion: reduce) {
-		*,
-		*::before,
-		*::after {
-			animation-duration: 0.01ms !important;
-			animation-iteration-count: 1 !important;
-			transition-duration: 0.01ms !important;
-			scroll-behavior: auto !important;
-		}
-	}
+:root.light-high-contrast {
+	--amber-050: 48 100% 96%;
+	--amber-100: 48 96% 89%;
+	--amber-200: 48 97% 77%;
+	--amber-300: 32 95% 44%;
+	--amber-400: 31 94% 40%;
+	--amber-500: 31 93% 36%;
+	--amber-600: 30 94% 31%;
+	--amber-700: 29 93% 27%;
+	--amber-800: 27 91% 23%;
+	--amber-900: 25 92% 19%;
+	--amber-950: 21 92% 14%;
+
+	--blue-050: 220 100% 97%;
+	--blue-100: 221 94% 93%;
+	--blue-200: 221 94% 87%;
+	--blue-300: 228 82% 55%;
+	--blue-400: 228 67% 50%;
+	--blue-500: 228 65% 45%;
+	--blue-600: 229 64% 40%;
+	--blue-700: 229 63% 36%;
+	--blue-800: 231 61% 31%;
+	--blue-900: 232 58% 26%;
+	--blue-950: 234 55% 21%;
+
+	--cyan-050: 183 100% 96%;
+	--cyan-100: 185 96% 90%;
+	--cyan-200: 186 94% 82%;
+	--cyan-300: 192 91% 36%;
+	--cyan-400: 192 90% 34%;
+	--cyan-500: 193 88% 31%;
+	--cyan-600: 193 87% 27%;
+	--cyan-700: 193 86% 25%;
+	--cyan-800: 194 83% 21%;
+	--cyan-900: 196 81% 18%;
+	--cyan-950: 197 79% 15%;
+
+	--emerald-050: 152 81% 96%;
+	--emerald-100: 149 80% 90%;
+	--emerald-200: 152 76% 80%;
+	--emerald-300: 161 94% 30%;
+	--emerald-400: 162 93% 28%;
+	--emerald-500: 162 92% 25%;
+	--emerald-600: 162 93% 21%;
+	--emerald-700: 163 91% 18%;
+	--emerald-800: 163 90% 15%;
+	--emerald-900: 164 90% 12%;
+	--emerald-950: 166 91% 9%;
+
+	--fuchsia-050: 289 100% 98%;
+	--fuchsia-100: 287 100% 95%;
+	--fuchsia-200: 288 96% 91%;
+	--fuchsia-300: 293 69% 49%;
+	--fuchsia-400: 294 70% 45%;
+	--fuchsia-500: 294 71% 40%;
+	--fuchsia-600: 294 73% 35%;
+	--fuchsia-700: 295 75% 30%;
+	--fuchsia-800: 295 78% 25%;
+	--fuchsia-900: 296 81% 21%;
+	--fuchsia-950: 297 90% 16%;
+
+	--gray-050: 210 20% 98%;
+	--gray-100: 220 14% 96%;
+	--gray-200: 223 14% 90%;
+	--gray-300: 228 11% 35%;
+	--gray-400: 227 12% 32%;
+	--gray-500: 229 12% 28%;
+	--gray-600: 233 13% 25%;
+	--gray-700: 232 14% 22%;
+	--gray-800: 232 16% 18%;
+	--gray-900: 235 17% 15%;
+	--gray-950: 235 21% 11%;
+
+	--green-050: 138 76% 97%;
+	--green-100: 141 84% 93%;
+	--green-200: 141 79% 85%;
+	--green-300: 142 76% 36%;
+	--green-400: 142 76% 33%;
+	--green-500: 142 76% 29%;
+	--green-600: 143 77% 25%;
+	--green-700: 143 76% 22%;
+	--green-800: 143 76% 18%;
+	--green-900: 144 77% 14%;
+	--green-950: 145 80% 10%;
+
+	--indigo-050: 226 100% 97%;
+	--indigo-100: 226 100% 94%;
+	--indigo-200: 228 96% 89%;
+	--indigo-300: 243 75% 59%;
+	--indigo-400: 244 60% 53%;
+	--indigo-500: 243 52% 48%;
+	--indigo-600: 243 52% 42%;
+	--indigo-700: 244 51% 37%;
+	--indigo-800: 244 50% 31%;
+	--indigo-900: 244 49% 26%;
+	--indigo-950: 244 47% 20%;
+
+	--lime-050: 78 92% 95%;
+	--lime-100: 80 89% 89%;
+	--lime-200: 81 88% 80%;
+	--lime-300: 85 85% 35%;
+	--lime-400: 85 84% 31%;
+	--lime-500: 85 84% 28%;
+	--lime-600: 86 84% 24%;
+	--lime-700: 86 83% 21%;
+	--lime-800: 87 82% 17%;
+	--lime-900: 87 80% 14%;
+	--lime-950: 89 80% 10%;
+
+	--orange-050: 33 100% 96%;
+	--orange-100: 34 100% 92%;
+	--orange-200: 32 98% 83%;
+	--orange-300: 21 90% 48%;
+	--orange-400: 20 89% 44%;
+	--orange-500: 20 89% 39%;
+	--orange-600: 19 87% 34%;
+	--orange-700: 19 87% 29%;
+	--orange-800: 18 85% 24%;
+	--orange-900: 16 84% 20%;
+	--orange-950: 13 81% 15%;
+
+	--pink-050: 327 73% 97%;
+	--pink-100: 326 78% 95%;
+	--pink-200: 326 85% 90%;
+	--pink-300: 333 71% 51%;
+	--pink-400: 333 70% 46%;
+	--pink-500: 333 71% 41%;
+	--pink-600: 334 72% 36%;
+	--pink-700: 334 74% 32%;
+	--pink-800: 335 75% 27%;
+	--pink-900: 335 79% 22%;
+	--pink-950: 336 84% 17%;
+
+	--purple-050: 270 100% 98%;
+	--purple-100: 269 100% 95%;
+	--purple-200: 269 100% 92%;
+	--purple-300: 271 81% 56%;
+	--purple-400: 272 68% 51%;
+	--purple-500: 272 67% 46%;
+	--purple-600: 272 69% 41%;
+	--purple-700: 272 72% 36%;
+	--purple-800: 273 75% 31%;
+	--purple-900: 273 79% 26%;
+	--purple-950: 274 87% 21%;
+
+	--red-050: 0 86% 97%;
+	--red-100: 0 93% 94%;
+	--red-200: 0 96% 89%;
+	--red-300: 0 72% 51%;
+	--red-400: 0 70% 46%;
+	--red-500: 0 71% 40%;
+	--red-600: 0 71% 35%;
+	--red-700: 0 71% 31%;
+	--red-800: 0 71% 26%;
+	--red-900: 0 72% 21%;
+	--red-950: 0 75% 15%;
+
+	--rose-050: 356 100% 97%;
+	--rose-100: 356 100% 95%;
+	--rose-200: 353 96% 90%;
+	--rose-300: 347 77% 50%;
+	--rose-400: 347 77% 45%;
+	--rose-500: 347 78% 40%;
+	--rose-600: 346 79% 35%;
+	--rose-700: 345 79% 31%;
+	--rose-800: 345 80% 26%;
+	--rose-900: 344 83% 21%;
+	--rose-950: 343 88% 16%;
+
+	--sky-050: 204 100% 97%;
+	--sky-100: 204 94% 94%;
+	--sky-200: 201 94% 86%;
+	--sky-300: 200 98% 39%;
+	--sky-400: 201 96% 36%;
+	--sky-500: 201 95% 33%;
+	--sky-600: 201 93% 30%;
+	--sky-700: 202 91% 26%;
+	--sky-800: 202 88% 23%;
+	--sky-900: 203 84% 20%;
+	--sky-950: 204 80% 16%;
+
+	--teal-050: 166 76% 97%;
+	--teal-100: 167 85% 89%;
+	--teal-200: 168 84% 78%;
+	--teal-300: 175 84% 32%;
+	--teal-400: 175 84% 29%;
+	--teal-500: 175 83% 26%;
+	--teal-600: 176 83% 23%;
+	--teal-700: 176 82% 20%;
+	--teal-800: 177 83% 16%;
+	--teal-900: 178 82% 13%;
+	--teal-950: 179 84% 10%;
+
+	--violet-050: 250 100% 98%;
+	--violet-100: 251 91% 95%;
+	--violet-200: 251 95% 92%;
+	--violet-300: 262 83% 58%;
+	--violet-400: 262 69% 53%;
+	--violet-500: 262 62% 48%;
+	--violet-600: 262 63% 43%;
+	--violet-700: 262 64% 38%;
+	--violet-800: 262 66% 33%;
+	--violet-900: 261 68% 28%;
+	--violet-950: 261 73% 23%;
+
+	--yellow-050: 55 92% 95%;
+	--yellow-100: 55 97% 88%;
+	--yellow-200: 53 98% 77%;
+	--yellow-300: 41 96% 40%;
+	--yellow-400: 40 95% 37%;
+	--yellow-500: 39 94% 33%;
+	--yellow-600: 38 92% 29%;
+	--yellow-700: 36 91% 26%;
+	--yellow-800: 34 89% 22%;
+	--yellow-900: 31 87% 18%;
+	--yellow-950: 26 83% 14%;
+
+	--black: 0 0% 0%;
+	--white: 0 0% 100%;
+}
+
+:root.dark-high-contrast {
+	--white: 0 0% 0%;
+	--black: 0 0% 100%;
+
+	--amber-050: 21 92% 14%;
+	--amber-100: 22 78% 26%;
+	--amber-200: 23 83% 31%;
+	--amber-300: 43 96% 56%;
+	--amber-400: 43 97% 62%;
+	--amber-500: 43 96% 68%;
+	--amber-600: 44 97% 74%;
+	--amber-700: 44 98% 79%;
+	--amber-800: 44 97% 85%;
+	--amber-900: 44 100% 90%;
+	--amber-950: 48 100% 96%;
+
+	--blue-050: 234 55% 21%;
+	--blue-100: 232 63% 33%;
+	--blue-200: 232 70% 40%;
+	--blue-300: 220 96% 70%;
+	--blue-400: 220 97% 74%;
+	--blue-500: 220 96% 78%;
+	--blue-600: 220 98% 82%;
+	--blue-700: 220 97% 85%;
+	--blue-800: 221 94% 87%;
+	--blue-900: 221 94% 93%;
+	--blue-950: 220 100% 97%;
+
+	--cyan-050: 197 79% 15%;
+	--cyan-100: 196 64% 24%;
+	--cyan-200: 194 70% 27%;
+	--cyan-300: 188 86% 53%;
+	--cyan-400: 188 86% 60%;
+	--cyan-500: 188 86% 66%;
+	--cyan-600: 188 88% 72%;
+	--cyan-700: 188 87% 78%;
+	--cyan-800: 188 90% 85%;
+	--cyan-900: 187 92% 90%;
+	--cyan-950: 183 100% 96%;
+
+	--emerald-050: 166 91% 9%;
+	--emerald-100: 164 86% 16%;
+	--emerald-200: 163 88% 20%;
+	--emerald-300: 158 64% 52%;
+	--emerald-400: 158 64% 58%;
+	--emerald-500: 158 65% 64%;
+	--emerald-600: 158 65% 71%;
+	--emerald-700: 157 66% 77%;
+	--emerald-800: 156 69% 84%;
+	--emerald-900: 155 71% 89%;
+	--emerald-950: 152 81% 96%;
+
+	--fuchsia-050: 297 90% 16%;
+	--fuchsia-100: 297 64% 28%;
+	--fuchsia-200: 295 70% 33%;
+	--fuchsia-300: 292 91% 73%;
+	--fuchsia-400: 292 92% 76%;
+	--fuchsia-500: 292 92% 80%;
+	--fuchsia-600: 291 93% 84%;
+	--fuchsia-700: 292 94% 87%;
+	--fuchsia-800: 290 96% 91%;
+	--fuchsia-900: 289 100% 95%;
+	--fuchsia-950: 289 100% 98%;
+
+	--gray-050: 235 21% 11%;
+	--gray-100: 236 17% 17%;
+	--gray-200: 233 16% 21%;
+	--gray-300: 226 9% 65%;
+	--gray-400: 227 9% 70%;
+	--gray-500: 222 10% 75%;
+	--gray-600: 224 10% 79%;
+	--gray-700: 227 11% 84%;
+	--gray-800: 220 11% 89%;
+	--gray-900: 210 12% 93%;
+	--gray-950: 210 20% 98%;
+
+	--green-050: 145 80% 10%;
+	--green-100: 144 61% 20%;
+	--green-200: 143 64% 24%;
+	--green-300: 142 69% 58%;
+	--green-400: 142 70% 64%;
+	--green-500: 141 69% 69%;
+	--green-600: 141 70% 75%;
+	--green-700: 141 70% 80%;
+	--green-800: 141 72% 86%;
+	--green-900: 142 73% 91%;
+	--green-950: 138 76% 97%;
+
+	--indigo-050: 244 47% 20%;
+	--indigo-100: 242 47% 34%;
+	--indigo-200: 244 55% 41%;
+	--indigo-300: 234 89% 74%;
+	--indigo-400: 234 90% 77%;
+	--indigo-500: 234 90% 80%;
+	--indigo-600: 234 90% 84%;
+	--indigo-700: 233 91% 87%;
+	--indigo-800: 232 92% 90%;
+	--indigo-900: 230 94% 94%;
+	--indigo-950: 226 100% 97%;
+
+	--lime-050: 89 80% 10%;
+	--lime-100: 88 61% 20%;
+	--lime-200: 86 69% 23%;
+	--lime-300: 83 78% 55%;
+	--lime-400: 83 79% 61%;
+	--lime-500: 82 78% 67%;
+	--lime-600: 82 80% 73%;
+	--lime-700: 82 80% 78%;
+	--lime-800: 82 80% 84%;
+	--lime-900: 80 85% 90%;
+	--lime-950: 78 92% 95%;
+
+	--orange-050: 13 81% 15%;
+	--orange-100: 15 75% 28%;
+	--orange-200: 15 79% 34%;
+	--orange-300: 27 96% 61%;
+	--orange-400: 27 97% 66%;
+	--orange-500: 27 96% 71%;
+	--orange-600: 27 97% 76%;
+	--orange-700: 28 98% 82%;
+	--orange-800: 28 97% 86%;
+	--orange-900: 29 100% 91%;
+	--orange-950: 33 100% 96%;
+
+	--pink-050: 336 84% 17%;
+	--pink-100: 336 69% 30%;
+	--pink-200: 336 74% 35%;
+	--pink-300: 329 86% 70%;
+	--pink-400: 328 86% 74%;
+	--pink-500: 328 86% 78%;
+	--pink-600: 328 85% 82%;
+	--pink-700: 328 84% 85%;
+	--pink-800: 328 85% 90%;
+	--pink-900: 329 82% 94%;
+	--pink-950: 327 73% 97%;
+
+	--purple-050: 274 87% 21%;
+	--purple-100: 274 66% 32%;
+	--purple-200: 273 67% 39%;
+	--purple-300: 270 95% 75%;
+	--purple-400: 270 96% 78%;
+	--purple-500: 270 96% 82%;
+	--purple-600: 270 97% 85%;
+	--purple-700: 270 97% 88%;
+	--purple-800: 269 95% 92%;
+	--purple-900: 270 100% 95%;
+	--purple-950: 270 100% 98%;
+
+	--red-050: 0 75% 15%;
+	--red-100: 0 63% 31%;
+	--red-200: 0 70% 35%;
+	--red-300: 0 91% 71%;
+	--red-400: 0 91% 75%;
+	--red-500: 0 91% 79%;
+	--red-600: 0 91% 82%;
+	--red-700: 0 92% 86%;
+	--red-800: 0 92% 90%;
+	--red-900: 0 88% 93%;
+	--red-950: 0 86% 97%;
+
+	--rose-050: 343 88% 16%;
+	--rose-100: 342 75% 30%;
+	--rose-200: 343 80% 35%;
+	--rose-300: 351 95% 71%;
+	--rose-400: 351 95% 75%;
+	--rose-500: 352 94% 79%;
+	--rose-600: 351 95% 83%;
+	--rose-700: 352 97% 86%;
+	--rose-800: 353 96% 90%;
+	--rose-900: 353 100% 94%;
+	--rose-950: 356 100% 97%;
+
+	--sky-050: 204 80% 16%;
+	--sky-100: 202 80% 24%;
+	--sky-200: 201 90% 27%;
+	--sky-300: 198 93% 60%;
+	--sky-400: 198 93% 65%;
+	--sky-500: 199 93% 70%;
+	--sky-600: 199 93% 76%;
+	--sky-700: 199 94% 81%;
+	--sky-800: 199 94% 86%;
+	--sky-900: 200 95% 91%;
+	--sky-950: 204 100% 97%;
+
+	--teal-050: 179 84% 10%;
+	--teal-100: 176 61% 19%;
+	--teal-200: 176 69% 22%;
+	--teal-300: 172 66% 50%;
+	--teal-400: 173 66% 57%;
+	--teal-500: 172 66% 64%;
+	--teal-600: 172 67% 70%;
+	--teal-700: 172 67% 77%;
+	--teal-800: 171 69% 84%;
+	--teal-900: 170 70% 90%;
+	--teal-950: 166 76% 97%;
+
+	--violet-050: 261 73% 23%;
+	--violet-100: 264 67% 35%;
+	--violet-200: 263 69% 42%;
+	--violet-300: 255 92% 76%;
+	--violet-400: 255 92% 80%;
+	--violet-500: 255 93% 83%;
+	--violet-600: 255 95% 86%;
+	--violet-700: 254 93% 89%;
+	--violet-800: 253 95% 92%;
+	--violet-900: 253 100% 95%;
+	--violet-950: 250 100% 98%;
+
+	--yellow-050: 26 83% 14%;
+	--yellow-100: 28 73% 26%;
+	--yellow-200: 32 81% 29%;
+	--yellow-300: 48 96% 53%;
+	--yellow-400: 48 96% 59%;
+	--yellow-500: 48 95% 65%;
+	--yellow-600: 48 96% 72%;
+	--yellow-700: 49 96% 78%;
+	--yellow-800: 49 95% 84%;
+	--yellow-900: 50 96% 89%;
+	--yellow-950: 55 92% 95%;
+
+	--background: var(--white);
+	--foreground: var(--gray-050);
+	--card: var(--gray-050);
+	--popover: var(--gray-100);
+	--popover-foreground: 210 40% 98%;
+	--button: var(--white);
+}
+
+.light {
+	color-scheme: light;
+}
+.dark {
+	color-scheme: dark;
+}
+.light-high-contrast {
+	color-scheme: light;
+}
+.dark-high-contrast {
+	color-scheme: dark;
 }
 
 /**
@@ -788,12 +1184,6 @@
 	font-style: italic;
 }
 
-@layer base {
-	body {
-		@apply bg-white text-gray-900;
-	}
-}
-
 .scrollbar::-webkit-scrollbar {
 	width: 0.5rem;
 	height: 0.5rem;
@@ -819,3 +1209,7 @@
 	scrollbar-color: hsl(var(--gray-600) / 0.5) transparent;
 	scrollbar-width: thin;
 }
+
+body {
+	@apply bg-white text-gray-900;
+}