*,
*::before,
*::after {
  box-sizing: border-box;
}

/**
Use a more readable tab size (opinionated).
*/

:root {
  -moz-tab-size: 4;
  tab-size: 4;
}

/**
1. Correct the line height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
*/

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/*
Sections
========
*/

/**
Remove the margin in all browsers.
*/

body {
  margin: 0;
}

/**
Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
*/

body {
  font-family:
		system-ui,
		-apple-system, /* Firefox supports this but not yet `system-ui` */
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji';
}

a {
  color: inherit;
  text-decoration: inherit;
}


/**
 * Removes the default spacing and border for appropriate elements.
 */

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

button {
  background-color: transparent;
  background-image: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
  border: 0;
}
button,
input,
optgroup,
select,
textarea {
  padding: 0;
  line-height: inherit;
  color: inherit;
}

/**
Remove the inheritance of text transform in Edge and Firefox.
1. Remove the inheritance of text transform in Firefox.
*/

button,
select { /* 1 */
  text-transform: none;
}
button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}



ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

html {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
  line-height: 1.5; /* 2 */
}

/**
 * Inherit font-family and line-height from `html` so users can set them as
 * a class directly on the `html` element.
 */

body {
  font-family: inherit;
  line-height: inherit;
}

:root {
	--color-black: rgba(0, 0, 0, 1);
	--color-white: rgba(255, 255, 255, 1);
	--color-gray-50: rgba(249, 250, 251, 1);
	--color-gray-100: rgba(243, 244, 246, 1);
	--color-gray-200: rgba(229, 231, 235, 1);
	--color-gray-300: rgba(209, 213, 219, 1);
	--color-gray-400: rgba(156, 163, 175, 1);
	--color-gray-500: rgba(107, 114, 128, 1);
	--color-gray-600: rgba(75, 85, 99, 1);
	--color-gray-700: rgba(55, 65, 81, 1);
	--color-gray-800: rgba(31, 41, 55, 1);
	--color-gray-900: rgba(17, 24, 39, 1);
	--color-green-50: rgba(236, 253, 245, 1);
	--color-green-100: rgba(209, 250, 229, 1);
	--color-green-200: rgba(167, 243, 208, 1);
	--color-green-300: rgba(110, 231, 183, 1);
	--color-green-400: rgba(52, 211, 153, 1);
	--color-green-500: rgba(16, 185, 129, 1);
	--color-green-600: rgba(5, 150, 105, 1);
	--color-green-700: rgba(4, 120, 87, 1);
	--color-green-800: rgba(6, 95, 70, 1);
	--color-green-900: rgba(6, 78, 59, 1);
	--color-yellow-50: rgba(255, 251, 235, 1);
	--color-yellow-100: rgba(254, 243, 199, 1);
	--color-yellow-200: rgba(253, 230, 138, 1);
	--color-yellow-300: rgba(252, 211, 77, 1);
	--color-yellow-400: rgba(251, 191, 36, 1);
	--color-yellow-500: rgba(245, 158, 11, 1);
	--color-yellow-600: rgba(217, 119, 6, 1);
	--color-yellow-700: rgba(180, 83, 9, 1);
	--color-yellow-800: rgba(146, 64, 14, 1);
	--color-yellow-900: rgba(120, 53, 15, 1);
	--color-pink-50: rgba(253, 242, 248, 1);
	--color-pink-100: rgba(252, 231, 243, 1);
	--color-pink-200: rgba(251, 207, 232, 1);
	--color-pink-300: rgba(249, 168, 212, 1);
	--color-pink-400: rgba(244, 114, 182, 1);
	--color-pink-500: rgba(236, 72, 153, 1);
	--color-pink-600: rgba(219, 39, 119, 1);
	--color-pink-700: rgba(190, 24, 93, 1);
	--color-pink-800: rgba(157, 23, 77, 1);
	--color-pink-900: rgba(131, 24, 67, 1);
	--color-blue-50: rgba(239, 246, 255, 1);
	--color-blue-100: rgba(219, 234, 254, 1);
	--color-blue-200: rgba(191, 219, 254, 1);
	--color-blue-300: rgba(147, 197, 253, 1);
	--color-blue-400: rgba(96, 165, 250, 1);
	--color-blue-500: rgba(59, 130, 246, 1);
	--color-blue-600: rgba(37, 99, 235, 1);
	--color-blue-700: rgba(29, 78, 216, 1);
	--color-blue-800: rgba(30, 64, 175, 1);
	--color-blue-900: rgba(30, 58, 138, 1);
	--color-purple-50: rgba(245, 243, 255, 1);
	--color-purple-100: rgba(237, 233, 254, 1);
	--color-purple-200: rgba(221, 214, 254, 1);
	--color-purple-300: rgba(196, 181, 253, 1);
	--color-purple-400: rgba(167, 139, 250, 1);
	--color-purple-500: rgba(139, 92, 246, 1);
	--color-purple-600: rgba(124, 58, 237, 1);
	--color-purple-700: rgba(109, 40, 217, 1);
	--color-purple-800: rgba(91, 33, 182, 1);
	--color-purple-900: rgba(76, 29, 149, 1);
	--color-red-50: rgba(254, 242, 242, 1);
	--color-red-100: rgba(254, 226, 226, 1);
	--color-red-200: rgba(254, 202, 202, 1);
	--color-red-300: rgba(252, 165, 165, 1);
	--color-red-400: rgba(248, 113, 113, 1);
	--color-red-500: rgba(239, 68, 68, 1);
	--color-red-600: rgba(220, 38, 38, 1);
	--color-red-700: rgba(185, 28, 28, 1);
	--color-red-800: rgba(153, 27, 27, 1);
	--color-red-900: rgba(127, 29, 29, 1);
	--color-indigo-50: rgba(238, 242, 255, 1);
	--color-indigo-100: rgba(224, 231, 255, 1);
	--color-indigo-200: rgba(199, 210, 254, 1);
	--color-indigo-300: rgba(165, 180, 252, 1);
	--color-indigo-400: rgba(129, 140, 248, 1);
	--color-indigo-500: rgba(99, 102, 241, 1);
	--color-indigo-600: rgba(79, 70, 229, 1);
	--color-indigo-700: rgba(67, 56, 202, 1);
	--color-indigo-800: rgba(55, 48, 163, 1);
	--color-indigo-900: rgba(49, 46, 129, 1);
}

.test1 {
	background-color: var(--color-green-500);
}