/* acc color palette */
:root {
  --acc-50: hsl(19, 62%, 76%);
  --acc-100: hsl(19, 67%, 71%);
  --acc-200: hsl(19, 72%, 61%);
  --acc-300: hsl(19, 77%, 51%);
  --acc-400: hsl(19, 82%, 46%);
  --acc-500: hsl(19, 82%, 36%);
  --acc-600: hsl(19, 87%, 26%);
  --acc-700: hsl(19, 92%, 20%);
  --acc-800: hsl(19, 97%, 15%);
  --acc-900: hsl(19, 100%, 10%);
}

/* acc utility classes */
.bg-acc-50 { background-color: hsl(19, 62%, 76%) !important; }
.text-acc-50 { color: hsl(19, 62%, 76%) !important; }
.border-acc-50 { border-color: hsl(19, 62%, 76%) !important; }
.bg-acc-100 { background-color: hsl(19, 67%, 71%) !important; }
.text-acc-100 { color: hsl(19, 67%, 71%) !important; }
.border-acc-100 { border-color: hsl(19, 67%, 71%) !important; }
.bg-acc-200 { background-color: hsl(19, 72%, 61%) !important; }
.text-acc-200 { color: hsl(19, 72%, 61%) !important; }
.border-acc-200 { border-color: hsl(19, 72%, 61%) !important; }
.bg-acc-300 { background-color: hsl(19, 77%, 51%) !important; }
.text-acc-300 { color: hsl(19, 77%, 51%) !important; }
.border-acc-300 { border-color: hsl(19, 77%, 51%) !important; }
.bg-acc-400 { background-color: hsl(19, 82%, 46%) !important; }
.text-acc-400 { color: hsl(19, 82%, 46%) !important; }
.border-acc-400 { border-color: hsl(19, 82%, 46%) !important; }
.bg-acc-500 { background-color: hsl(19, 82%, 36%) !important; }
.text-acc-500 { color: hsl(19, 82%, 36%) !important; }
.border-acc-500 { border-color: hsl(19, 82%, 36%) !important; }
.bg-acc-600 { background-color: hsl(19, 87%, 26%) !important; }
.text-acc-600 { color: hsl(19, 87%, 26%) !important; }
.border-acc-600 { border-color: hsl(19, 87%, 26%) !important; }
.bg-acc-700 { background-color: hsl(19, 92%, 20%) !important; }
.text-acc-700 { color: hsl(19, 92%, 20%) !important; }
.border-acc-700 { border-color: hsl(19, 92%, 20%) !important; }
.bg-acc-800 { background-color: hsl(19, 97%, 15%) !important; }
.text-acc-800 { color: hsl(19, 97%, 15%) !important; }
.border-acc-800 { border-color: hsl(19, 97%, 15%) !important; }
.bg-acc-900 { background-color: hsl(19, 100%, 10%) !important; }
.text-acc-900 { color: hsl(19, 100%, 10%) !important; }
.border-acc-900 { border-color: hsl(19, 100%, 10%) !important; }

/* pri color palette */
:root {
  --pri-50: hsl(31, 65%, 91%);
  --pri-100: hsl(31, 70%, 86%);
  --pri-200: hsl(31, 75%, 76%);
  --pri-300: hsl(31, 80%, 66%);
  --pri-400: hsl(31, 85%, 61%);
  --pri-500: hsl(31, 85%, 51%);
  --pri-600: hsl(31, 90%, 41%);
  --pri-700: hsl(31, 95%, 31%);
  --pri-800: hsl(31, 100%, 21%);
  --pri-900: hsl(31, 100%, 11%);
}

/* pri utility classes */
.bg-pri-50 { background-color: hsl(31, 65%, 91%) !important; }
.text-pri-50 { color: hsl(31, 65%, 91%) !important; }
.border-pri-50 { border-color: hsl(31, 65%, 91%) !important; }
.bg-pri-100 { background-color: hsl(31, 70%, 86%) !important; }
.text-pri-100 { color: hsl(31, 70%, 86%) !important; }
.border-pri-100 { border-color: hsl(31, 70%, 86%) !important; }
.bg-pri-200 { background-color: hsl(31, 75%, 76%) !important; }
.text-pri-200 { color: hsl(31, 75%, 76%) !important; }
.border-pri-200 { border-color: hsl(31, 75%, 76%) !important; }
.bg-pri-300 { background-color: hsl(31, 80%, 66%) !important; }
.text-pri-300 { color: hsl(31, 80%, 66%) !important; }
.border-pri-300 { border-color: hsl(31, 80%, 66%) !important; }
.bg-pri-400 { background-color: hsl(31, 85%, 61%) !important; }
.text-pri-400 { color: hsl(31, 85%, 61%) !important; }
.border-pri-400 { border-color: hsl(31, 85%, 61%) !important; }
.bg-pri-500 { background-color: hsl(31, 85%, 51%) !important; }
.text-pri-500 { color: hsl(31, 85%, 51%) !important; }
.border-pri-500 { border-color: hsl(31, 85%, 51%) !important; }
.bg-pri-600 { background-color: hsl(31, 90%, 41%) !important; }
.text-pri-600 { color: hsl(31, 90%, 41%) !important; }
.border-pri-600 { border-color: hsl(31, 90%, 41%) !important; }
.bg-pri-700 { background-color: hsl(31, 95%, 31%) !important; }
.text-pri-700 { color: hsl(31, 95%, 31%) !important; }
.border-pri-700 { border-color: hsl(31, 95%, 31%) !important; }
.bg-pri-800 { background-color: hsl(31, 100%, 21%) !important; }
.text-pri-800 { color: hsl(31, 100%, 21%) !important; }
.border-pri-800 { border-color: hsl(31, 100%, 21%) !important; }
.bg-pri-900 { background-color: hsl(31, 100%, 11%) !important; }
.text-pri-900 { color: hsl(31, 100%, 11%) !important; }
.border-pri-900 { border-color: hsl(31, 100%, 11%) !important; }











/* ter color palette */
:root {
  --ter-50: hsl(63, 13%, 95%);
  --ter-100: hsl(63, 18%, 90%);
  --ter-200: hsl(63, 23%, 85%);
  --ter-300: hsl(63, 28%, 80%);
  --ter-400: hsl(63, 33%, 75%);
  --ter-500: hsl(63, 33%, 89%);
  --ter-600: hsl(63, 38%, 79%);
  --ter-700: hsl(63, 43%, 69%);
  --ter-800: hsl(63, 48%, 59%);
  --ter-900: hsl(63, 53%, 49%);
}

/* ter utility classes */
.bg-ter-50 { background-color: hsl(63, 13%, 95%) !important; }
.text-ter-50 { color: hsl(63, 13%, 95%) !important; }
.border-ter-50 { border-color: hsl(63, 13%, 95%) !important; }
.bg-ter-100 { background-color: hsl(63, 18%, 90%) !important; }
.text-ter-100 { color: hsl(63, 18%, 90%) !important; }
.border-ter-100 { border-color: hsl(63, 18%, 90%) !important; }
.bg-ter-200 { background-color: hsl(63, 23%, 85%) !important; }
.text-ter-200 { color: hsl(63, 23%, 85%) !important; }
.border-ter-200 { border-color: hsl(63, 23%, 85%) !important; }
.bg-ter-300 { background-color: hsl(63, 28%, 80%) !important; }
.text-ter-300 { color: hsl(63, 28%, 80%) !important; }
.border-ter-300 { border-color: hsl(63, 28%, 80%) !important; }
.bg-ter-400 { background-color: hsl(63, 33%, 75%) !important; }
.text-ter-400 { color: hsl(63, 33%, 75%) !important; }
.border-ter-400 { border-color: hsl(63, 33%, 75%) !important; }
.bg-ter-500 { background-color: hsl(63, 33%, 89%) !important; }
.text-ter-500 { color: hsl(63, 33%, 89%) !important; }
.border-ter-500 { border-color: hsl(63, 33%, 89%) !important; }
.bg-ter-600 { background-color: hsl(63, 38%, 79%) !important; }
.text-ter-600 { color: hsl(63, 38%, 79%) !important; }
.border-ter-600 { border-color: hsl(63, 38%, 79%) !important; }
.bg-ter-700 { background-color: hsl(63, 43%, 69%) !important; }
.text-ter-700 { color: hsl(63, 43%, 69%) !important; }
.border-ter-700 { border-color: hsl(63, 43%, 69%) !important; }
.bg-ter-800 { background-color: hsl(63, 48%, 59%) !important; }
.text-ter-800 { color: hsl(63, 48%, 59%) !important; }
.border-ter-800 { border-color: hsl(63, 48%, 59%) !important; }
.bg-ter-900 { background-color: hsl(63, 53%, 49%) !important; }
.text-ter-900 { color: hsl(63, 53%, 49%) !important; }
.border-ter-900 { border-color: hsl(63, 53%, 49%) !important; }