:root {
  --color-primary-100: #e6dbf0;
  --color-primary-200: #c5a9de;
  --color-primary-300: #a477cc;
  --color-primary-400: #8444ba;
  --color-primary-500: #4b0082; /* base */
  --color-primary-600: #3f006f;
  --color-primary-700: #32005c;
  --color-primary-800: #260048;
  --color-primary-900: #1a0035;
}

.bg-primary-500 {
  background-color: var(--color-primary-500);
}
.bg-primary-600 {
  background-color: var(--color-primary-600);
}
.bg-primary-700 {
  background-color: var(--color-primary-700);
}

.text-primary-500 {
  color: var(--color-primary-500);
}
.text-primary-600 {
  color: var(--color-primary-600);
}
.text-primary-700 {
  color: var(--color-primary-700);
}

.border-primary-500 {
  border-color: var(--color-primary-500);
}
.border-primary-600 {
  border-color: var(--color-primary-600);
}
.border-primary-700 {
  border-color: var(--color-primary-700);
}

.hover\:bg-primary-600:hover {
  background-color: var(--color-primary-600);
}

.focus\:ring-primary-500:focus {
  --tw-ring-color: var(--color-primary-500);
}