/* pri color palette */
:root {
  --pri-50: hsl(221, 10%, 89%);
  --pri-100: hsl(221, 15%, 84%);
  --pri-200: hsl(221, 20%, 74%);
  --pri-300: hsl(221, 25%, 64%);
  --pri-400: hsl(221, 25%, 59%);
  --pri-500: hsl(221, 25%, 49%);
  --pri-600: hsl(221, 30%, 39%);
  --pri-700: hsl(221, 35%, 29%);
  --pri-800: hsl(221, 40%, 19%);
  --pri-900: hsl(221, 45%, 10%);
}

/* pri utility classes */
.bg-pri-50 { background-color: hsl(221, 10%, 89%) !important; }
.text-pri-50 { color: hsl(221, 10%, 89%) !important; }
.border-pri-50 { border-color: hsl(221, 10%, 89%) !important; }
.bg-pri-100 { background-color: hsl(221, 15%, 84%) !important; }
.text-pri-100 { color: hsl(221, 15%, 84%) !important; }
.border-pri-100 { border-color: hsl(221, 15%, 84%) !important; }
.bg-pri-200 { background-color: hsl(221, 20%, 74%) !important; }
.text-pri-200 { color: hsl(221, 20%, 74%) !important; }
.border-pri-200 { border-color: hsl(221, 20%, 74%) !important; }
.bg-pri-300 { background-color: hsl(221, 25%, 64%) !important; }
.text-pri-300 { color: hsl(221, 25%, 64%) !important; }
.border-pri-300 { border-color: hsl(221, 25%, 64%) !important; }
.bg-pri-400 { background-color: hsl(221, 25%, 59%) !important; }
.text-pri-400 { color: hsl(221, 25%, 59%) !important; }
.border-pri-400 { border-color: hsl(221, 25%, 59%) !important; }
.bg-pri-500 { background-color: hsl(221, 25%, 49%) !important; }
.text-pri-500 { color: hsl(221, 25%, 49%) !important; }
.border-pri-500 { border-color: hsl(221, 25%, 49%) !important; }
.bg-pri-600 { background-color: hsl(221, 30%, 39%) !important; }
.text-pri-600 { color: hsl(221, 30%, 39%) !important; }
.border-pri-600 { border-color: hsl(221, 30%, 39%) !important; }
.bg-pri-700 { background-color: hsl(221, 35%, 29%) !important; }
.text-pri-700 { color: hsl(221, 35%, 29%) !important; }
.border-pri-700 { border-color: hsl(221, 35%, 29%) !important; }
.bg-pri-800 { background-color: hsl(221, 40%, 19%) !important; }
.text-pri-800 { color: hsl(221, 40%, 19%) !important; }
.border-pri-800 { border-color: hsl(221, 40%, 19%) !important; }
.bg-pri-900 { background-color: hsl(221, 45%, 10%) !important; }
.text-pri-900 { color: hsl(221, 45%, 10%) !important; }
.border-pri-900 { border-color: hsl(221, 45%, 10%) !important; }

















/* acc color palette */
:root {
  --acc-50: hsl(20, 51%, 89%);
  --acc-100: hsl(20, 56%, 84%);
  --acc-200: hsl(20, 61%, 74%);
  --acc-300: hsl(20, 66%, 64%);
  --acc-400: hsl(20, 71%, 59%);
  --acc-500: hsl(20, 71%, 49%);
  --acc-600: hsl(20, 76%, 39%);
  --acc-700: hsl(20, 81%, 29%);
  --acc-800: hsl(20, 86%, 19%);
  --acc-900: hsl(20, 91%, 10%);
}

/* acc utility classes */
.bg-acc-50 { background-color: hsl(20, 51%, 89%) !important; }
.text-acc-50 { color: hsl(20, 51%, 89%) !important; }
.border-acc-50 { border-color: hsl(20, 51%, 89%) !important; }
.bg-acc-100 { background-color: hsl(20, 56%, 84%) !important; }
.text-acc-100 { color: hsl(20, 56%, 84%) !important; }
.border-acc-100 { border-color: hsl(20, 56%, 84%) !important; }
.bg-acc-200 { background-color: hsl(20, 61%, 74%) !important; }
.text-acc-200 { color: hsl(20, 61%, 74%) !important; }
.border-acc-200 { border-color: hsl(20, 61%, 74%) !important; }
.bg-acc-300 { background-color: hsl(20, 66%, 64%) !important; }
.text-acc-300 { color: hsl(20, 66%, 64%) !important; }
.border-acc-300 { border-color: hsl(20, 66%, 64%) !important; }
.bg-acc-400 { background-color: hsl(20, 71%, 59%) !important; }
.text-acc-400 { color: hsl(20, 71%, 59%) !important; }
.border-acc-400 { border-color: hsl(20, 71%, 59%) !important; }
.bg-acc-500 { background-color: hsl(20, 71%, 49%) !important; }
.text-acc-500 { color: hsl(20, 71%, 49%) !important; }
.border-acc-500 { border-color: hsl(20, 71%, 49%) !important; }
.bg-acc-600 { background-color: hsl(20, 76%, 39%) !important; }
.text-acc-600 { color: hsl(20, 76%, 39%) !important; }
.border-acc-600 { border-color: hsl(20, 76%, 39%) !important; }
.bg-acc-700 { background-color: hsl(20, 81%, 29%) !important; }
.text-acc-700 { color: hsl(20, 81%, 29%) !important; }
.border-acc-700 { border-color: hsl(20, 81%, 29%) !important; }
.bg-acc-800 { background-color: hsl(20, 86%, 19%) !important; }
.text-acc-800 { color: hsl(20, 86%, 19%) !important; }
.border-acc-800 { border-color: hsl(20, 86%, 19%) !important; }
.bg-acc-900 { background-color: hsl(20, 91%, 10%) !important; }
.text-acc-900 { color: hsl(20, 91%, 10%) !important; }
.border-acc-900 { border-color: hsl(20, 91%, 10%) !important; }

























































/* ter color palette */
:root {
  --ter-50: hsl(41, 10%, 88%);
  --ter-100: hsl(41, 15%, 83%);
  --ter-200: hsl(41, 20%, 73%);
  --ter-300: hsl(41, 25%, 63%);
  --ter-400: hsl(41, 25%, 58%);
  --ter-500: hsl(41, 25%, 48%);
  --ter-600: hsl(41, 30%, 38%);
  --ter-700: hsl(41, 35%, 28%);
  --ter-800: hsl(41, 40%, 18%);
  --ter-900: hsl(41, 45%, 10%);
}

/* ter utility classes */
.bg-ter-50 { background-color: hsl(41, 10%, 88%) !important; }
.text-ter-50 { color: hsl(41, 10%, 88%) !important; }
.border-ter-50 { border-color: hsl(41, 10%, 88%) !important; }
.bg-ter-100 { background-color: hsl(41, 15%, 83%) !important; }
.text-ter-100 { color: hsl(41, 15%, 83%) !important; }
.border-ter-100 { border-color: hsl(41, 15%, 83%) !important; }
.bg-ter-200 { background-color: hsl(41, 20%, 73%) !important; }
.text-ter-200 { color: hsl(41, 20%, 73%) !important; }
.border-ter-200 { border-color: hsl(41, 20%, 73%) !important; }
.bg-ter-300 { background-color: hsl(41, 25%, 63%) !important; }
.text-ter-300 { color: hsl(41, 25%, 63%) !important; }
.border-ter-300 { border-color: hsl(41, 25%, 63%) !important; }
.bg-ter-400 { background-color: hsl(41, 25%, 58%) !important; }
.text-ter-400 { color: hsl(41, 25%, 58%) !important; }
.border-ter-400 { border-color: hsl(41, 25%, 58%) !important; }
.bg-ter-500 { background-color: hsl(41, 25%, 48%) !important; }
.text-ter-500 { color: hsl(41, 25%, 48%) !important; }
.border-ter-500 { border-color: hsl(41, 25%, 48%) !important; }
.bg-ter-600 { background-color: hsl(41, 30%, 38%) !important; }
.text-ter-600 { color: hsl(41, 30%, 38%) !important; }
.border-ter-600 { border-color: hsl(41, 30%, 38%) !important; }
.bg-ter-700 { background-color: hsl(41, 35%, 28%) !important; }
.text-ter-700 { color: hsl(41, 35%, 28%) !important; }
.border-ter-700 { border-color: hsl(41, 35%, 28%) !important; }
.bg-ter-800 { background-color: hsl(41, 40%, 18%) !important; }
.text-ter-800 { color: hsl(41, 40%, 18%) !important; }
.border-ter-800 { border-color: hsl(41, 40%, 18%) !important; }
.bg-ter-900 { background-color: hsl(41, 45%, 10%) !important; }
.text-ter-900 { color: hsl(41, 45%, 10%) !important; }
.border-ter-900 { border-color: hsl(41, 45%, 10%) !important; }