/* ter color palette */
:root {
  --ter-50: hsl(270, 55%, 95%);
  --ter-100: hsl(270, 60%, 90%);
  --ter-200: hsl(270, 65%, 85%);
  --ter-300: hsl(270, 70%, 75%);
  --ter-400: hsl(270, 75%, 70%);
  --ter-500: hsl(270, 75%, 60%);
  --ter-600: hsl(270, 80%, 50%);
  --ter-700: hsl(270, 85%, 40%);
  --ter-800: hsl(270, 90%, 30%);
  --ter-900: hsl(270, 95%, 20%);
}

/* ter utility classes */
.bg-ter-50 { background-color: hsl(270, 55%, 95%) !important; }
.text-ter-50 { color: hsl(270, 55%, 95%) !important; }
.border-ter-50 { border-color: hsl(270, 55%, 95%) !important; }
.bg-ter-100 { background-color: hsl(270, 60%, 90%) !important; }
.text-ter-100 { color: hsl(270, 60%, 90%) !important; }
.border-ter-100 { border-color: hsl(270, 60%, 90%) !important; }
.bg-ter-200 { background-color: hsl(270, 65%, 85%) !important; }
.text-ter-200 { color: hsl(270, 65%, 85%) !important; }
.border-ter-200 { border-color: hsl(270, 65%, 85%) !important; }
.bg-ter-300 { background-color: hsl(270, 70%, 75%) !important; }
.text-ter-300 { color: hsl(270, 70%, 75%) !important; }
.border-ter-300 { border-color: hsl(270, 70%, 75%) !important; }
.bg-ter-400 { background-color: hsl(270, 75%, 70%) !important; }
.text-ter-400 { color: hsl(270, 75%, 70%) !important; }
.border-ter-400 { border-color: hsl(270, 75%, 70%) !important; }
.bg-ter-500 { background-color: hsl(270, 75%, 60%) !important; }
.text-ter-500 { color: hsl(270, 75%, 60%) !important; }
.border-ter-500 { border-color: hsl(270, 75%, 60%) !important; }
.bg-ter-600 { background-color: hsl(270, 80%, 50%) !important; }
.text-ter-600 { color: hsl(270, 80%, 50%) !important; }
.border-ter-600 { border-color: hsl(270, 80%, 50%) !important; }
.bg-ter-700 { background-color: hsl(270, 85%, 40%) !important; }
.text-ter-700 { color: hsl(270, 85%, 40%) !important; }
.border-ter-700 { border-color: hsl(270, 85%, 40%) !important; }
.bg-ter-800 { background-color: hsl(270, 90%, 30%) !important; }
.text-ter-800 { color: hsl(270, 90%, 30%) !important; }
.border-ter-800 { border-color: hsl(270, 90%, 30%) !important; }
.bg-ter-900 { background-color: hsl(270, 95%, 20%) !important; }
.text-ter-900 { color: hsl(270, 95%, 20%) !important; }
.border-ter-900 { border-color: hsl(270, 95%, 20%) !important; }







/* pri color palette */
:root {
  --pri-50: hsl(272, 49%, 93%);
  --pri-100: hsl(272, 54%, 88%);
  --pri-200: hsl(272, 59%, 78%);
  --pri-300: hsl(272, 64%, 68%);
  --pri-400: hsl(272, 69%, 63%);
  --pri-500: hsl(272, 69%, 53%);
  --pri-600: hsl(272, 74%, 43%);
  --pri-700: hsl(272, 79%, 33%);
  --pri-800: hsl(272, 84%, 23%);
  --pri-900: hsl(272, 89%, 13%);
}

/* pri utility classes */
.bg-pri-50 { background-color: hsl(272, 49%, 93%) !important; }
.text-pri-50 { color: hsl(272, 49%, 93%) !important; }
.border-pri-50 { border-color: hsl(272, 49%, 93%) !important; }
.bg-pri-100 { background-color: hsl(272, 54%, 88%) !important; }
.text-pri-100 { color: hsl(272, 54%, 88%) !important; }
.border-pri-100 { border-color: hsl(272, 54%, 88%) !important; }
.bg-pri-200 { background-color: hsl(272, 59%, 78%) !important; }
.text-pri-200 { color: hsl(272, 59%, 78%) !important; }
.border-pri-200 { border-color: hsl(272, 59%, 78%) !important; }
.bg-pri-300 { background-color: hsl(272, 64%, 68%) !important; }
.text-pri-300 { color: hsl(272, 64%, 68%) !important; }
.border-pri-300 { border-color: hsl(272, 64%, 68%) !important; }
.bg-pri-400 { background-color: hsl(272, 69%, 63%) !important; }
.text-pri-400 { color: hsl(272, 69%, 63%) !important; }
.border-pri-400 { border-color: hsl(272, 69%, 63%) !important; }
.bg-pri-500 { background-color: hsl(272, 69%, 53%) !important; }
.text-pri-500 { color: hsl(272, 69%, 53%) !important; }
.border-pri-500 { border-color: hsl(272, 69%, 53%) !important; }
.bg-pri-600 { background-color: hsl(272, 74%, 43%) !important; }
.text-pri-600 { color: hsl(272, 74%, 43%) !important; }
.border-pri-600 { border-color: hsl(272, 74%, 43%) !important; }
.bg-pri-700 { background-color: hsl(272, 79%, 33%) !important; }
.text-pri-700 { color: hsl(272, 79%, 33%) !important; }
.border-pri-700 { border-color: hsl(272, 79%, 33%) !important; }
.bg-pri-800 { background-color: hsl(272, 84%, 23%) !important; }
.text-pri-800 { color: hsl(272, 84%, 23%) !important; }
.border-pri-800 { border-color: hsl(272, 84%, 23%) !important; }
.bg-pri-900 { background-color: hsl(272, 89%, 13%) !important; }
.text-pri-900 { color: hsl(272, 89%, 13%) !important; }
.border-pri-900 { border-color: hsl(272, 89%, 13%) !important; }