:root {
  --color-neutral: #8A8A8A;
  --color-neutral-50: #F9F9F9;
  --color-neutral-100: #F4F4F4;
  --color-neutral-200: #E4E4E4;
  --color-neutral-300: #D3D3D3;
  --color-neutral-400: #A2A2A2;
  --color-neutral-500: #8A8A8A;
  --color-neutral-600: #737373;
  --color-neutral-700: #525252;
  --color-neutral-800: #404040;
  --color-neutral-900: #262626;
  --color-neutral-950: #171717;
  --color-on-neutral: #F4F4F4;
  --color-on-neutral-dark: #262626; }

.neutral {
  background-color: var(--color-neutral);
  color: var(--color-on-neutral); }

.neutral-50 {
  background-color: var(--color-neutral-50);
  color: var(--color-on-neutral-dark); }

.neutral-100 {
  background-color: var(--color-neutral-100);
  color: var(--color-on-neutral-dark); }

.neutral-200 {
  background-color: var(--color-neutral-200);
  color: var(--color-on-neutral-dark); }

.neutral-300 {
  background-color: var(--color-neutral-300);
  color: var(--color-on-neutral-dark); }

.neutral-400 {
  background-color: var(--color-neutral-400);
  color: var(--color-on-neutral); }

.neutral-500 {
  background-color: var(--color-neutral-500);
  color: var(--color-on-neutral); }

.neutral-600 {
  background-color: var(--color-neutral-600);
  color: var(--color-on-neutral); }

.neutral-700 {
  background-color: var(--color-neutral-700);
  color: var(--color-on-neutral); }

.neutral-800 {
  background-color: var(--color-neutral-800);
  color: var(--color-on-neutral); }

.neutral-900 {
  background-color: var(--color-neutral-900);
  color: var(--color-on-neutral); }

.neutral-950 {
  background-color: var(--color-neutral-950);
  color: var(--color-on-neutral); }