/* -- Illustration Color Themes -- */

/* For light backgrounds */

.lgt-cobalt {
  --outline: var(--cobalt-900);
  --tint-1: var(--cobalt-500);
  --tint-2: var(--cobalt-50);
}

.lgt-purple {
  --outline: var(--purple-800);
  --tint-1: var(--purple-700);
  --tint-2: var(--purple-100);
}

.lgt-coral {
  --outline: var(--coral-900);
  --tint-1: var(--coral-400);
  --tint-2: var(--coral-50);
}

/* For dark backgrounds */

.drk-cobalt {
  --outline: var(--cobalt-50);
  --tint-1: var(--cobalt-500);
  --tint-2: var(--cobalt-200);
}

.drk-purple {
  --outline: var(--purple-50);
  --tint-1: var(--purple-600);
  --tint-2: var(--purple-300);
}

.drk-coral {
  --outline: var(--coral-50);
  --tint-1: var(--coral-500);
  --tint-2: var(--coral-200);
}