@import "variables";

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.text-7xl {
  font-size: 4.5rem;
  line-height: 1;
}

.text-8xl {
  font-size: 6rem;
  line-height: 1;
}

.text-9xl {
  font-size: 8rem;
  line-height: 1;
}

.gray-100 {
  color: $gray-100;
}

.gray-200 {
  color: $gray-200;
}

.gray-300 {
  color: $gray-300;
}

.gray-400 {
  color: $gray-400;
}

.gray-500 {
  color: $gray-500;
}

.gray-600 {
  color: $gray-600;
}

.gray-700 {
  color: $gray-700;
}

.gray-800 {
  color: $gray-800;
}

.gray-900 {
  color: $gray-900;
}

.bg-gray-100 {
  background-color: $gray-100;
}

.bg-gray-200 {
  background-color: $gray-200;
}

.bg-gray-300 {
  background-color: $gray-300;
}

.bg-gray-400 {
  background-color: $gray-400;
}

.bg-gray-500 {
  background-color: $gray-500;
}

.bg-gray-600 {
  background-color: $gray-600;
}

.bg-gray-700 {
  background-color: $gray-700;
}

.bg-gray-800 {
  background-color: $gray-800;
}

.bg-gray-900 {
  background-color: $gray-900;
}

