/* pri color palette */
:root {
  --pri-50: hsl(45, 51%, 87%);
  --pri-100: hsl(45, 56%, 82%);
  --pri-200: hsl(45, 61%, 72%);
  --pri-300: hsl(45, 66%, 62%);
  --pri-400: hsl(45, 71%, 57%);
  --pri-500: hsl(45, 71%, 47%);
  --pri-600: hsl(45, 76%, 37%);
  --pri-700: hsl(45, 81%, 27%);
  --pri-800: hsl(45, 86%, 17%);
  --pri-900: hsl(45, 91%, 10%);
}

/* pri utility classes */
.bg-pri-50 { background-color: hsl(45, 51%, 87%) !important; }
.text-pri-50 { color: hsl(45, 51%, 87%) !important; }
.border-pri-50 { border-color: hsl(45, 51%, 87%) !important; }
.bg-pri-100 { background-color: hsl(45, 56%, 82%) !important; }
.text-pri-100 { color: hsl(45, 56%, 82%) !important; }
.border-pri-100 { border-color: hsl(45, 56%, 82%) !important; }
.bg-pri-200 { background-color: hsl(45, 61%, 72%) !important; }
.text-pri-200 { color: hsl(45, 61%, 72%) !important; }
.border-pri-200 { border-color: hsl(45, 61%, 72%) !important; }
.bg-pri-300 { background-color: hsl(45, 66%, 62%) !important; }
.text-pri-300 { color: hsl(45, 66%, 62%) !important; }
.border-pri-300 { border-color: hsl(45, 66%, 62%) !important; }
.bg-pri-400 { background-color: hsl(45, 71%, 57%) !important; }
.text-pri-400 { color: hsl(45, 71%, 57%) !important; }
.border-pri-400 { border-color: hsl(45, 71%, 57%) !important; }
.bg-pri-500 { background-color: hsl(45, 71%, 47%) !important; }
.text-pri-500 { color: hsl(45, 71%, 47%) !important; }
.border-pri-500 { border-color: hsl(45, 71%, 47%) !important; }
.bg-pri-600 { background-color: hsl(45, 76%, 37%) !important; }
.text-pri-600 { color: hsl(45, 76%, 37%) !important; }
.border-pri-600 { border-color: hsl(45, 76%, 37%) !important; }
.bg-pri-700 { background-color: hsl(45, 81%, 27%) !important; }
.text-pri-700 { color: hsl(45, 81%, 27%) !important; }
.border-pri-700 { border-color: hsl(45, 81%, 27%) !important; }
.bg-pri-800 { background-color: hsl(45, 86%, 17%) !important; }
.text-pri-800 { color: hsl(45, 86%, 17%) !important; }
.border-pri-800 { border-color: hsl(45, 86%, 17%) !important; }
.bg-pri-900 { background-color: hsl(45, 91%, 10%) !important; }
.text-pri-900 { color: hsl(45, 91%, 10%) !important; }
.border-pri-900 { border-color: hsl(45, 91%, 10%) !important; }































































































/* acc color palette */
:root {
  --acc-50: hsl(218, 55%, 95%);
  --acc-100: hsl(218, 60%, 90%);
  --acc-200: hsl(218, 65%, 84%);
  --acc-300: hsl(218, 70%, 74%);
  --acc-400: hsl(218, 75%, 69%);
  --acc-500: hsl(218, 75%, 59%);
  --acc-600: hsl(218, 80%, 49%);
  --acc-700: hsl(218, 85%, 39%);
  --acc-800: hsl(218, 90%, 29%);
  --acc-900: hsl(218, 95%, 19%);
}

/* acc utility classes */
.bg-acc-50 { background-color: hsl(218, 55%, 95%) !important; }
.text-acc-50 { color: hsl(218, 55%, 95%) !important; }
.border-acc-50 { border-color: hsl(218, 55%, 95%) !important; }
.bg-acc-100 { background-color: hsl(218, 60%, 90%) !important; }
.text-acc-100 { color: hsl(218, 60%, 90%) !important; }
.border-acc-100 { border-color: hsl(218, 60%, 90%) !important; }
.bg-acc-200 { background-color: hsl(218, 65%, 84%) !important; }
.text-acc-200 { color: hsl(218, 65%, 84%) !important; }
.border-acc-200 { border-color: hsl(218, 65%, 84%) !important; }
.bg-acc-300 { background-color: hsl(218, 70%, 74%) !important; }
.text-acc-300 { color: hsl(218, 70%, 74%) !important; }
.border-acc-300 { border-color: hsl(218, 70%, 74%) !important; }
.bg-acc-400 { background-color: hsl(218, 75%, 69%) !important; }
.text-acc-400 { color: hsl(218, 75%, 69%) !important; }
.border-acc-400 { border-color: hsl(218, 75%, 69%) !important; }
.bg-acc-500 { background-color: hsl(218, 75%, 59%) !important; }
.text-acc-500 { color: hsl(218, 75%, 59%) !important; }
.border-acc-500 { border-color: hsl(218, 75%, 59%) !important; }
.bg-acc-600 { background-color: hsl(218, 80%, 49%) !important; }
.text-acc-600 { color: hsl(218, 80%, 49%) !important; }
.border-acc-600 { border-color: hsl(218, 80%, 49%) !important; }
.bg-acc-700 { background-color: hsl(218, 85%, 39%) !important; }
.text-acc-700 { color: hsl(218, 85%, 39%) !important; }
.border-acc-700 { border-color: hsl(218, 85%, 39%) !important; }
.bg-acc-800 { background-color: hsl(218, 90%, 29%) !important; }
.text-acc-800 { color: hsl(218, 90%, 29%) !important; }
.border-acc-800 { border-color: hsl(218, 90%, 29%) !important; }
.bg-acc-900 { background-color: hsl(218, 95%, 19%) !important; }
.text-acc-900 { color: hsl(218, 95%, 19%) !important; }
.border-acc-900 { border-color: hsl(218, 95%, 19%) !important; }