From 375e5bcabf3743185e497e848dc92188a8850381 Mon Sep 17 00:00:00 2001
From: Jiuzhen Pan <2216991777@qq.com>
Date: Fri, 26 Aug 2022 01:52:51 -0700
Subject: [PATCH] fix(css): updated iframe css

---
 public/iframe/tw-iframe.css | 9881 +++++++++++++++++++++--------------
 1 file changed, 6012 insertions(+), 3869 deletions(-)

diff --git a/public/iframe/tw-iframe.css b/public/iframe/tw-iframe.css
index 9c9db01..c00ae3f 100644
--- a/public/iframe/tw-iframe.css
+++ b/public/iframe/tw-iframe.css
@@ -4412,6 +4412,11 @@ video {
   color: rgb(2 132 199 / var(--tw-text-opacity));
 }
 
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 .text-red-400 {
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity));
@@ -4714,11 +4719,6 @@ video {
   color: rgb(136 19 55 / var(--tw-text-opacity));
 }
 
-.text-gray-500 {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -5406,6 +5406,10 @@ video {
   transition-duration: 200ms;
 }
 
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 .ease-out {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
@@ -5414,10 +5418,6 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 
-.ease-in-out {
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
 .will-change-transform {
   will-change: transform;
 }
@@ -5437,11223 +5437,13203 @@ video {
 }
 
 .btn-light-red {
-  background-color: rgba(254, 226, 226, 0.8);
-  color: rgba(76, 73, 73, 0.9);
+  background-color: hsla(0, 93%, 94%, 0.8);
+  color: hsla(0, 56.00000000000001%, 39%, 0.9);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-red:enabled:hover {
-  background-color: #fca5a5;
-  color: #000;
+  background-color: hsla(0, 96%, 89%, 1);
+  color: hsla(0, 50%, 28.999999999999996%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-red:enabled:focus-visible {
-  background-color: #fca5a5;
-  color: #000;
+  background-color: hsla(0, 96%, 89%, 1);
+  color: hsla(0, 50%, 28.999999999999996%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-red:enabled:active {
-  background-color: #fecaca;
-  color: rgba(76, 61, 61, 1);
+  background-color: hsla(0, 91%, 71%, 0.65);
+  color: hsla(0, 49%, 11%, 0.65);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-red:disabled {
-  background-color: #fee2e2;
-  color: rgba(76, 68, 68, 1);
+  background-color: hsla(0, 93%, 94%, 1);
+  color: hsla(0, 50%, 34%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-light-red {
-  background-color: rgba(127, 29, 29, 0.4);
-  color: rgba(7772, 1372, 1372, 0.9);
+  background-color: hsla(0, 63%, 31%, 0.4);
+  color: hsla(0, 33%, 91%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-red:enabled:hover {
-  background-color: #991b1b;
-  color: rgba(7772, 1372, 1372, 1);
+  background-color: hsla(0, 70%, 35%, 1);
+  color: hsla(0, 37%, 95%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-red:enabled:focus-visible {
-  background-color: #991b1b;
-  color: rgba(7772, 1372, 1372, 1);
+  background-color: hsla(0, 70%, 35%, 1);
+  color: hsla(0, 37%, 95%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-red:enabled:active {
-  background-color: #b91c1c;
-  color: rgba(9398, 1422, 1422, 1);
+  background-color: hsla(0, 63%, 31%, 1);
+  color: hsla(0, 33%, 91%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-red:disabled {
-  background-color: #7f1d1d;
-  color: rgba(6452, 1473, 1473, 1);
+  background-color: hsla(0, 63%, 31%, 1);
+  color: hsla(0, 33%, 91%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-light-red {
-  background-color: #fef2f2;
+  background-color: hsla(0, 86%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #ef4444;
-  box-shadow: inset 0 0 0 1px #ef4444, 0 0px 0px 1px #7f1d1d;
+  border-color: hsla(0, 84%, 60%, 1);
+  box-shadow: inset 0 0 0 1px hsla(0, 84%, 60%, 1), 0 0px 0px 1px hsla(0, 63%, 31%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-light-red:enabled:hover {
-  background-color: #b91c1c;
+  background-color: hsla(0, 74%, 42%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-red:enabled:focus-visible {
-  background-color: #b91c1c;
+  background-color: hsla(0, 74%, 42%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-red:enabled:active {
-  background-color: #7f1d1d;
+  background-color: hsla(0, 63%, 31%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-red {
-  background-color: #7f1d1d;
+  background-color: hsla(0, 63%, 31%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #7f1d1d;
-  box-shadow: inset 0 0 0 1px #7f1d1d, 0 0px 0px 1px #fef2f2;
+  border-color: hsla(0, 63%, 31%, 1);
+  box-shadow: inset 0 0 0 1px hsla(0, 63%, 31%, 1), 0 0px 0px 1px hsla(0, 86%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-light-red:enabled:hover {
-  background-color: #fef2f2;
+  background-color: hsla(0, 86%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-red:enabled:focus-visible {
-  background-color: #fef2f2;
+  background-color: hsla(0, 86%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-red:enabled:active {
-  background-color: #fca5a5;
+  background-color: hsla(0, 94%, 82%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-red {
-  background-color: #f87171;
-  color: rgba(74, 34, 34, 1);
+  background-color: hsla(0, 91%, 71%, 1);
+  color: hsla(0, 49%, 11%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-red:enabled:hover {
-  background-color: #ef4444;
-  color: #FFF;
+  background-color: hsla(0, 84%, 60%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-red:enabled:focus-visible {
-  background-color: #ef4444;
-  color: #FFF;
+  background-color: hsla(0, 84%, 60%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-red:enabled:active {
-  background-color: #dc2626;
-  color: rgba(12141, 3454, 3454, 1);
+  background-color: hsla(0, 72%, 51%, 1);
+  color: hsla(0, 45%, 0%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-red:disabled {
-  background-color: #fecaca;
-  color: rgba(76, 61, 61, 1);
+  background-color: hsla(0, 96%, 89%, 1);
+  color: hsla(0, 50%, 28.999999999999996%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-red {
-  background-color: #ef4444;
-  color: rgba(12141, 3454, 3454, 1);
+  background-color: hsla(0, 84%, 60%, 1);
+  color: hsla(0, 45%, 0%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-red:enabled:hover {
-  background-color: #dc2626;
-  color: #FFF;
+  background-color: hsla(0, 72%, 51%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-red:enabled:focus-visible {
-  background-color: #dc2626;
-  color: #FFF;
+  background-color: hsla(0, 72%, 51%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-red:enabled:active {
-  background-color: rgba(220, 38, 38, 0.75);
-  color: #FFF;
+  background-color: hsla(0, 72%, 51%, 0.7);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-red:disabled {
-  background-color: #b91c1c;
-  color: rgba(9398, 1422, 1422, 1);
+  background-color: hsla(0, 74%, 42%, 1);
+  color: hsla(0, 40%, 100%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-red {
-  background-color: #fef2f2;
+  background-color: hsla(0, 86%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #ef4444;
-  box-shadow: inset 0 0 0 1px #ef4444, 0 0px 0px 2px #7f1d1d;
+  border-color: hsla(0, 84%, 60%, 1);
+  box-shadow: inset 0 0 0 1px hsla(0, 84%, 60%, 1), 0 0px 0px 2px hsla(0, 63%, 31%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-red:enabled:hover {
-  background-color: #b91c1c;
+  background-color: hsla(0, 74%, 42%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-red:enabled:focus-visible {
-  background-color: #b91c1c;
+  background-color: hsla(0, 74%, 42%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-red:enabled:active {
-  background-color: #7f1d1d;
+  background-color: hsla(0, 63%, 31%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-red {
-  background-color: #7f1d1d;
+  background-color: hsla(0, 63%, 31%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #7f1d1d;
-  box-shadow: inset 0 0 0 1px #7f1d1d, 0 0px 0px 2px #fef2f2;
+  border-color: hsla(0, 63%, 31%, 1);
+  box-shadow: inset 0 0 0 1px hsla(0, 63%, 31%, 1), 0 0px 0px 2px hsla(0, 86%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-red:enabled:hover {
-  background-color: #fef2f2;
+  background-color: hsla(0, 86%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-red:enabled:focus-visible {
-  background-color: #fef2f2;
+  background-color: hsla(0, 86%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-red:enabled:active {
-  background-color: #fca5a5;
+  background-color: hsla(0, 94%, 82%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-red {
-  background-color: rgba(185, 28, 28, 0.9);
-  color: rgba(9398, 1422, 1422, 0.9);
+  background-color: hsla(0, 74%, 42%, 0.9);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-red:enabled:hover {
-  background-color: rgba(153, 27, 27, 0.8);
-  color: rgba(6452, 1473, 1473, 1);
+  background-color: hsla(0, 70%, 35%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-red:enabled:focus-visible {
-  background-color: rgba(153, 27, 27, 0.8);
-  color: rgba(6452, 1473, 1473, 1);
+  background-color: hsla(0, 70%, 35%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-red:enabled:active {
-  background-color: #991b1b;
-  color: rgba(7772, 1372, 1372, 1);
+  background-color: hsla(0, 70%, 35%, 1);
+  color: hsla(0, 37%, 95%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-red:disabled {
-  background-color: rgba(153, 27, 27, 0.6);
-  color: rgba(7772, 1372, 1372, 0.6);
+  background-color: hsla(0, 70%, 35%, 0.6);
+  color: hsla(0, 41%, 85%, 0.6);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-bold-red {
-  background-color: rgba(127, 29, 29, 0.9);
-  color: rgba(6452, 1473, 1473, 0.9);
+  background-color: hsla(0, 63%, 31%, 0.85);
+  color: hsla(0, 33%, 91%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-red:enabled:hover {
-  background-color: rgba(127, 29, 29, 0.65);
+  background-color: hsla(0, 63%, 31%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-red:enabled:focus-visible {
-  background-color: rgba(127, 29, 29, 0.65);
+  background-color: hsla(0, 63%, 31%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-red:enabled:active {
-  background-color: #991b1b;
-  color: rgba(7772, 1372, 1372, 1);
+  background-color: hsla(0, 63%, 31%, 0.45);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-red:disabled {
-  background-color: rgba(127, 29, 29, 0.4);
-  color: rgba(6452, 1473, 1473, 0.4);
+  background-color: hsla(0, 63%, 31%, 0.4);
+  color: hsla(0, 33%, 91%, 0.4);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-bold-red {
-  background-color: #fef2f2;
+  background-color: hsla(0, 86%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #ef4444;
-  box-shadow: inset 0 0 0 3px #ef4444, 0 0px 0px 3px #7f1d1d;
+  border-color: hsla(0, 84%, 60%, 1);
+  box-shadow: inset 0 0 0 3px hsla(0, 84%, 60%, 1), 0 0px 0px 3px hsla(0, 63%, 31%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-bold-red:enabled:hover {
-  background-color: #b91c1c;
+  background-color: hsla(0, 74%, 42%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-red:enabled:focus-visible {
-  background-color: #b91c1c;
+  background-color: hsla(0, 74%, 42%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-red:enabled:active {
-  background-color: #7f1d1d;
+  background-color: hsla(0, 63%, 31%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-red {
-  background-color: #7f1d1d;
+  background-color: hsla(0, 63%, 31%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #7f1d1d;
-  box-shadow: inset 0 0 0 3px #7f1d1d, 0 0px 0px 3px #fef2f2;
+  border-color: hsla(0, 63%, 31%, 1);
+  box-shadow: inset 0 0 0 3px hsla(0, 63%, 31%, 1), 0 0px 0px 3px hsla(0, 86%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-bold-red:enabled:hover {
-  background-color: #fef2f2;
+  background-color: hsla(0, 86%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-red:enabled:focus-visible {
-  background-color: #fef2f2;
+  background-color: hsla(0, 86%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-red:enabled:active {
-  background-color: #fca5a5;
+  background-color: hsla(0, 94%, 82%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-red {
-  background-color: rgba(254, 242, 242, 0.01);
-  color: #ef4444;
+  background-color: hsla(0, 86%, 97%, 0.01);
+  color: hsla(0, 84%, 60%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-red:enabled:hover {
-  background-color: #ef4444;
-  color: #FFF;
+  background-color: hsla(0, 84%, 60%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-red:enabled:focus-visible {
-  background-color: #ef4444;
-  color: #FFF;
+  background-color: hsla(0, 84%, 60%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-red:enabled:active {
-  background-color: rgba(220, 38, 38, 0.85);
-  color: #FFF;
+  background-color: hsla(0, 72%, 51%, 0.85);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-red:disabled {
-  background-color: rgba(254, 242, 242, 0.5);
-  color: rgba(76, 73, 73, 0.5);
+  background-color: hsla(0, 86%, 97%, 0.5);
+  color: hsla(0, 45%, 37%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .btn-outline-red {
-  border-color: #ef4444;
+  border-color: hsla(0, 84%, 60%, 1);
   border-width: 1px;
   border-style: solid;
 }
 
 .dark .btn-outline-red {
-  background-color: rgba(127, 29, 29, 0.01);
-  color: #f87171;
+  background-color: hsla(0, 63%, 31%, 0.01);
+  color: hsla(0, 91%, 71%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-red:enabled:hover {
-  background-color: #ef4444;
-  color: #FFF;
+  background-color: hsla(0, 84%, 60%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-red:enabled:focus-visible {
-  background-color: #ef4444;
-  color: #FFF;
+  background-color: hsla(0, 84%, 60%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-red:enabled:active {
-  background-color: rgba(248, 113, 113, 0.85);
-  color: #FFF;
+  background-color: hsla(0, 84%, 60%, 0.8);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-red:disabled {
-  background-color: rgba(254, 242, 242, 0.5);
-  color: rgba(76, 73, 73, 0.5);
+  background-color: hsla(0, 86%, 97%, 0.5);
+  color: hsla(0, 45%, 37%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-outline-red {
-  border-color: #f87171;
+  border-color: hsla(0, 91%, 71%, 1);
 }
 
 .contrast .btn-outline-red {
-  background-color: rgba(254, 242, 242, 0.01);
-  color: #b91c1c;
+  background-color: hsla(0, 86%, 97%, 0.01);
+  color: hsla(0, 74%, 42%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #b91c1c;
-  box-shadow: inset 0 0 0 3px #b91c1c, 0 0px 0px 3px #fef2f2;
+  border-color: hsla(0, 74%, 42%, 1);
+  box-shadow: inset 0 0 0 3px hsla(0, 74%, 42%, 1), 0 0px 0px 3px hsla(0, 86%, 97%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-outline-red:enabled:hover {
-  background-color: #fef2f2;
+  background-color: hsla(0, 86%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-red:enabled:focus-visible {
-  background-color: #fef2f2;
+  background-color: hsla(0, 86%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-red:enabled:active {
-  background-color: #fca5a5;
+  background-color: hsla(0, 94%, 82%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-red {
-  background-color: rgba(127, 29, 29, 0.01);
-  color: #fee2e2;
+  background-color: hsla(0, 63%, 31%, 0.01);
+  color: hsla(0, 93%, 94%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #fecaca;
-  box-shadow: inset 0 0 0 3px #b91c1c, 0 0px 0px 3px #fee2e2;
+  border-color: hsla(0, 96%, 89%, 1);
+  box-shadow: inset 0 0 0 3px hsla(0, 74%, 42%, 1), 0 0px 0px 3px hsla(0, 93%, 94%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-outline-red:enabled:hover {
-  background-color: #b91c1c;
+  background-color: hsla(0, 74%, 42%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-red:enabled:focus-visible {
-  background-color: #b91c1c;
+  background-color: hsla(0, 74%, 42%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-red:enabled:active {
-  background-color: rgba(127, 29, 29, 0.6);
+  background-color: hsla(0, 63%, 31%, 0.6);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-red {
-  background-color: rgba(254, 242, 242, 0.01);
-  color: #ef4444;
+  background-color: hsla(0, 86%, 97%, 0.01);
+  color: hsla(0, 84%, 60%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-red:enabled:hover {
-  background-color: #fee2e2;
-  color: #ef4444;
+  background-color: hsla(0, 93%, 94%, 1);
+  color: hsla(0, 84%, 60%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-red:enabled:focus-visible {
-  background-color: #fee2e2;
-  color: #ef4444;
+  background-color: hsla(0, 93%, 94%, 1);
+  color: hsla(0, 84%, 60%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-red:enabled:active {
-  background-color: rgba(254, 202, 202, 0.85);
-  color: #dc2626;
+  background-color: hsla(0, 96%, 89%, 0.85);
+  color: hsla(0, 72%, 51%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-red:disabled {
-  background-color: rgba(254, 242, 242, 0.5);
-  color: rgba(76, 73, 73, 0.5);
+  background-color: hsla(0, 86%, 97%, 0.5);
+  color: hsla(0, 45%, 37%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-clear-red {
-  background-color: rgba(127, 29, 29, 0.01);
-  color: #f87171;
+  background-color: hsla(0, 63%, 31%, 0.01);
+  color: hsla(0, 91%, 71%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-red:enabled:hover {
-  background-color: rgba(220, 38, 38, 0.35);
-  color: #dc2626;
+  background-color: hsla(0, 94%, 82%, 0.25);
+  color: hsla(0, 84%, 60%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-red:enabled:focus-visible {
-  background-color: rgba(220, 38, 38, 0.35);
-  color: #dc2626;
+  background-color: hsla(0, 94%, 82%, 0.25);
+  color: hsla(0, 84%, 60%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-red:enabled:active {
-  background-color: rgba(185, 28, 28, 0.4);
-  color: #ef4444;
+  background-color: hsla(0, 91%, 71%, 0.2);
+  color: hsla(0, 72%, 51%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-red:disabled {
-  background-color: rgba(185, 28, 28, 7);
-  color: rgba(9398, 1422, 1422, 7);
+  background-color: hsla(0, 74%, 42%, 0.07);
+  color: hsla(0, 74%, 42%, 0.07);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-clear-red {
-  background-color: rgba(254, 242, 242, 0.01);
-  color: #b91c1c;
+  background-color: hsla(0, 86%, 97%, 0.01);
+  color: hsla(0, 74%, 42%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #ef4444;
-  box-shadow: inset 0 0 0 1px #ef4444, 0 0px 0px 2px #7f1d1d;
+  border-color: hsla(0, 84%, 60%, 1);
+  box-shadow: inset 0 0 0 1px hsla(0, 84%, 60%, 1), 0 0px 0px 2px hsla(0, 63%, 31%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-clear-red:enabled:hover {
-  background-color: #b91c1c;
+  background-color: hsla(0, 74%, 42%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-red:enabled:focus-visible {
-  background-color: #b91c1c;
+  background-color: hsla(0, 74%, 42%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-red:enabled:active {
-  background-color: #7f1d1d;
+  background-color: hsla(0, 63%, 31%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-red {
-  background-color: #7f1d1d;
+  background-color: hsla(0, 63%, 31%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #7f1d1d;
-  box-shadow: inset 0 0 0 1px #7f1d1d, 0 0px 0px 2px #fef2f2;
+  border-color: hsla(0, 63%, 31%, 1);
+  box-shadow: inset 0 0 0 1px hsla(0, 63%, 31%, 1), 0 0px 0px 2px hsla(0, 86%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-clear-red:enabled:hover {
-  background-color: #fef2f2;
+  background-color: hsla(0, 86%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-red:enabled:focus-visible {
-  background-color: #fef2f2;
+  background-color: hsla(0, 86%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-red:enabled:active {
-  background-color: #fca5a5;
+  background-color: hsla(0, 94%, 82%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-orange {
-  background-color: rgba(255, 237, 213, 0.8);
-  color: rgba(77, 74, 71, 0.9);
+  background-color: hsla(36, 100%, 92%, 0.8);
+  color: hsla(32.4, 52%, 23%, 0.9);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-orange:enabled:hover {
-  background-color: #fdba74;
-  color: #000;
+  background-color: hsla(32.4, 98%, 83%, 1);
+  color: hsla(32.4, 52%, 23%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-orange:enabled:focus-visible {
-  background-color: #fdba74;
-  color: #000;
+  background-color: hsla(32.4, 98%, 83%, 1);
+  color: hsla(32.4, 52%, 23%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-orange:enabled:active {
-  background-color: #fed7aa;
-  color: rgba(76, 65, 51, 1);
+  background-color: hsla(28.8, 96%, 61%, 0.65);
+  color: hsla(28.8, 56.00000000000001%, 11%, 0.65);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-orange:disabled {
-  background-color: #ffedd5;
-  color: rgba(77, 71, 64, 1);
+  background-color: hsla(36, 100%, 92%, 1);
+  color: hsla(36, 53%, 32%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-light-orange {
-  background-color: rgba(124, 45, 18, 0.4);
-  color: rgba(7823, 2642, 914, 0.9);
+  background-color: hsla(14.4, 75%, 28.000000000000004%, 0.4);
+  color: hsla(14.4, 41%, 88%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-orange:enabled:hover {
-  background-color: #9a3412;
-  color: rgba(7823, 2642, 914, 1);
+  background-color: hsla(14.4, 79%, 34%, 1);
+  color: hsla(14.4, 42%, 94%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-orange:enabled:focus-visible {
-  background-color: #9a3412;
-  color: rgba(7823, 2642, 914, 1);
+  background-color: hsla(14.4, 79%, 34%, 1);
+  color: hsla(14.4, 42%, 94%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-orange:enabled:active {
-  background-color: #c2410c;
-  color: rgba(9855, 3302, 610, 1);
+  background-color: hsla(14.4, 75%, 28.000000000000004%, 1);
+  color: hsla(14.4, 41%, 88%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-orange:disabled {
-  background-color: #7c2d12;
-  color: rgba(6299, 2286, 914, 1);
+  background-color: hsla(14.4, 75%, 28.000000000000004%, 1);
+  color: hsla(14.4, 41%, 88%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-light-orange {
-  background-color: #fff7ed;
+  background-color: hsla(32.4, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #f97316;
-  box-shadow: inset 0 0 0 1px #f97316, 0 0px 0px 1px #7c2d12;
+  border-color: hsla(25.200000000000003, 95%, 53%, 1);
+  box-shadow: inset 0 0 0 1px hsla(25.200000000000003, 95%, 53%, 1), 0 0px 0px 1px hsla(14.4, 75%, 28.000000000000004%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-light-orange:enabled:hover {
-  background-color: #c2410c;
+  background-color: hsla(18, 88%, 40%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-orange:enabled:focus-visible {
-  background-color: #c2410c;
+  background-color: hsla(18, 88%, 40%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-orange:enabled:active {
-  background-color: #7c2d12;
+  background-color: hsla(14.4, 75%, 28.000000000000004%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-orange {
-  background-color: #7c2d12;
+  background-color: hsla(14.4, 75%, 28.000000000000004%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #7c2d12;
-  box-shadow: inset 0 0 0 1px #7c2d12, 0 0px 0px 1px #fff7ed;
+  border-color: hsla(14.4, 75%, 28.000000000000004%, 1);
+  box-shadow: inset 0 0 0 1px hsla(14.4, 75%, 28.000000000000004%, 1), 0 0px 0px 1px hsla(32.4, 100%, 96%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-light-orange:enabled:hover {
-  background-color: #fff7ed;
+  background-color: hsla(32.4, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-orange:enabled:focus-visible {
-  background-color: #fff7ed;
+  background-color: hsla(32.4, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-orange:enabled:active {
-  background-color: #fdba74;
+  background-color: hsla(32.4, 97%, 72%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-orange {
-  background-color: #fb923c;
-  color: rgba(75, 44, 18, 1);
+  background-color: hsla(28.8, 96%, 61%, 1);
+  color: hsla(28.8, 50%, 1%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-orange:enabled:hover {
-  background-color: #f97316;
+  background-color: hsla(25.200000000000003, 95%, 53%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-orange:enabled:focus-visible {
-  background-color: #f97316;
+  background-color: hsla(25.200000000000003, 95%, 53%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-orange:enabled:active {
-  background-color: #ea580c;
-  color: rgba(75, 35, 7, 1);
+  background-color: hsla(21.599999999999998, 90%, 48%, 1);
+  color: hsla(25.200000000000003, 56.00000000000001%, 3%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-orange:disabled {
-  background-color: #fed7aa;
-  color: rgba(76, 65, 51, 1);
+  background-color: hsla(32.4, 98%, 83%, 1);
+  color: hsla(32.4, 52%, 23%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-orange {
-  background-color: #f97316;
-  color: rgba(75, 35, 7, 1);
+  background-color: hsla(25.200000000000003, 95%, 53%, 1);
+  color: hsla(25.200000000000003, 56.00000000000001%, 3%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-orange:enabled:hover {
-  background-color: #ea580c;
-  color: #FFF;
+  background-color: hsla(21.599999999999998, 90%, 48%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-orange:enabled:focus-visible {
-  background-color: #ea580c;
-  color: #FFF;
+  background-color: hsla(21.599999999999998, 90%, 48%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-orange:enabled:active {
-  background-color: rgba(234, 88, 12, 0.75);
-  color: #FFF;
+  background-color: hsla(21.599999999999998, 90%, 48%, 0.7);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-orange:disabled {
-  background-color: #c2410c;
-  color: rgba(9855, 3302, 610, 1);
+  background-color: hsla(18, 88%, 40%, 1);
+  color: hsla(18, 47%, 100%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-orange {
-  background-color: #fff7ed;
+  background-color: hsla(32.4, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #f97316;
-  box-shadow: inset 0 0 0 1px #f97316, 0 0px 0px 2px #7c2d12;
+  border-color: hsla(25.200000000000003, 95%, 53%, 1);
+  box-shadow: inset 0 0 0 1px hsla(25.200000000000003, 95%, 53%, 1), 0 0px 0px 2px hsla(14.4, 75%, 28.000000000000004%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-orange:enabled:hover {
-  background-color: #c2410c;
+  background-color: hsla(18, 88%, 40%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-orange:enabled:focus-visible {
-  background-color: #c2410c;
+  background-color: hsla(18, 88%, 40%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-orange:enabled:active {
-  background-color: #7c2d12;
+  background-color: hsla(14.4, 75%, 28.000000000000004%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-orange {
-  background-color: #7c2d12;
+  background-color: hsla(14.4, 75%, 28.000000000000004%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #7c2d12;
-  box-shadow: inset 0 0 0 1px #7c2d12, 0 0px 0px 2px #fff7ed;
+  border-color: hsla(14.4, 75%, 28.000000000000004%, 1);
+  box-shadow: inset 0 0 0 1px hsla(14.4, 75%, 28.000000000000004%, 1), 0 0px 0px 2px hsla(32.4, 100%, 96%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-orange:enabled:hover {
-  background-color: #fff7ed;
+  background-color: hsla(32.4, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-orange:enabled:focus-visible {
-  background-color: #fff7ed;
+  background-color: hsla(32.4, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-orange:enabled:active {
-  background-color: #fdba74;
+  background-color: hsla(32.4, 97%, 72%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-orange {
-  background-color: rgba(194, 65, 12, 0.9);
-  color: rgba(9855, 3302, 610, 0.9);
+  background-color: hsla(18, 88%, 40%, 0.9);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-orange:enabled:hover {
-  background-color: rgba(154, 52, 18, 0.8);
-  color: rgba(6299, 2286, 914, 1);
+  background-color: hsla(14.4, 79%, 34%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-orange:enabled:focus-visible {
-  background-color: rgba(154, 52, 18, 0.8);
-  color: rgba(6299, 2286, 914, 1);
+  background-color: hsla(14.4, 79%, 34%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-orange:enabled:active {
-  background-color: #9a3412;
-  color: rgba(7823, 2642, 914, 1);
+  background-color: hsla(14.4, 79%, 34%, 1);
+  color: hsla(14.4, 42%, 94%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-orange:disabled {
-  background-color: rgba(154, 52, 18, 0.6);
-  color: rgba(7823, 2642, 914, 0.6);
+  background-color: hsla(14.4, 79%, 34%, 0.6);
+  color: hsla(14.4, 42%, 94%, 0.6);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-bold-orange {
-  background-color: rgba(124, 45, 18, 0.9);
-  color: rgba(6299, 2286, 914, 0.9);
+  background-color: hsla(14.4, 75%, 28.000000000000004%, 0.85);
+  color: hsla(14.4, 41%, 88%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-orange:enabled:hover {
-  background-color: rgba(124, 45, 18, 0.65);
+  background-color: hsla(14.4, 75%, 28.000000000000004%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-orange:enabled:focus-visible {
-  background-color: rgba(124, 45, 18, 0.65);
+  background-color: hsla(14.4, 75%, 28.000000000000004%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-orange:enabled:active {
-  background-color: #9a3412;
-  color: rgba(7823, 2642, 914, 1);
+  background-color: hsla(14.4, 75%, 28.000000000000004%, 0.45);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-orange:disabled {
-  background-color: rgba(124, 45, 18, 0.4);
-  color: rgba(6299, 2286, 914, 0.4);
+  background-color: hsla(14.4, 75%, 28.000000000000004%, 0.4);
+  color: hsla(14.4, 41%, 88%, 0.4);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-bold-orange {
-  background-color: #fff7ed;
+  background-color: hsla(32.4, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #f97316;
-  box-shadow: inset 0 0 0 3px #f97316, 0 0px 0px 3px #7c2d12;
+  border-color: hsla(25.200000000000003, 95%, 53%, 1);
+  box-shadow: inset 0 0 0 3px hsla(25.200000000000003, 95%, 53%, 1), 0 0px 0px 3px hsla(14.4, 75%, 28.000000000000004%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-bold-orange:enabled:hover {
-  background-color: #c2410c;
+  background-color: hsla(18, 88%, 40%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-orange:enabled:focus-visible {
-  background-color: #c2410c;
+  background-color: hsla(18, 88%, 40%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-orange:enabled:active {
-  background-color: #7c2d12;
+  background-color: hsla(14.4, 75%, 28.000000000000004%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-orange {
-  background-color: #7c2d12;
+  background-color: hsla(14.4, 75%, 28.000000000000004%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #7c2d12;
-  box-shadow: inset 0 0 0 3px #7c2d12, 0 0px 0px 3px #fff7ed;
+  border-color: hsla(14.4, 75%, 28.000000000000004%, 1);
+  box-shadow: inset 0 0 0 3px hsla(14.4, 75%, 28.000000000000004%, 1), 0 0px 0px 3px hsla(32.4, 100%, 96%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-bold-orange:enabled:hover {
-  background-color: #fff7ed;
+  background-color: hsla(32.4, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-orange:enabled:focus-visible {
-  background-color: #fff7ed;
+  background-color: hsla(32.4, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-orange:enabled:active {
-  background-color: #fdba74;
+  background-color: hsla(32.4, 97%, 72%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-orange {
-  background-color: rgba(255, 247, 237, 0.01);
-  color: #f97316;
+  background-color: hsla(32.4, 100%, 96%, 0.01);
+  color: hsla(25.200000000000003, 95%, 53%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-orange:enabled:hover {
-  background-color: #f97316;
+  background-color: hsla(25.200000000000003, 95%, 53%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-orange:enabled:focus-visible {
-  background-color: #f97316;
+  background-color: hsla(25.200000000000003, 95%, 53%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-orange:enabled:active {
-  background-color: rgba(234, 88, 12, 0.85);
+  background-color: hsla(21.599999999999998, 90%, 48%, 0.85);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-orange:disabled {
-  background-color: rgba(255, 247, 237, 0.5);
-  color: rgba(77, 74, 71, 0.5);
+  background-color: hsla(32.4, 100%, 96%, 0.5);
+  color: hsla(32.4, 53%, 36%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .btn-outline-orange {
-  border-color: #f97316;
+  border-color: hsla(25.200000000000003, 95%, 53%, 1);
   border-width: 1px;
   border-style: solid;
 }
 
 .dark .btn-outline-orange {
-  background-color: rgba(124, 45, 18, 0.01);
-  color: #fb923c;
+  background-color: hsla(14.4, 75%, 28.000000000000004%, 0.01);
+  color: hsla(28.8, 96%, 61%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-orange:enabled:hover {
-  background-color: #f97316;
+  background-color: hsla(25.200000000000003, 95%, 53%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-orange:enabled:focus-visible {
-  background-color: #f97316;
+  background-color: hsla(25.200000000000003, 95%, 53%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-orange:enabled:active {
-  background-color: rgba(251, 146, 60, 0.85);
+  background-color: hsla(25.200000000000003, 95%, 53%, 0.8);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-orange:disabled {
-  background-color: rgba(255, 247, 237, 0.5);
-  color: rgba(77, 74, 71, 0.5);
+  background-color: hsla(32.4, 100%, 96%, 0.5);
+  color: hsla(32.4, 53%, 36%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-outline-orange {
-  border-color: #fb923c;
+  border-color: hsla(28.8, 96%, 61%, 1);
 }
 
 .contrast .btn-outline-orange {
-  background-color: rgba(255, 247, 237, 0.01);
-  color: #c2410c;
+  background-color: hsla(32.4, 100%, 96%, 0.01);
+  color: hsla(18, 88%, 40%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #c2410c;
-  box-shadow: inset 0 0 0 3px #c2410c, 0 0px 0px 3px #fff7ed;
+  border-color: hsla(18, 88%, 40%, 1);
+  box-shadow: inset 0 0 0 3px hsla(18, 88%, 40%, 1), 0 0px 0px 3px hsla(32.4, 100%, 96%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-outline-orange:enabled:hover {
-  background-color: #fff7ed;
+  background-color: hsla(32.4, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-orange:enabled:focus-visible {
-  background-color: #fff7ed;
+  background-color: hsla(32.4, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-orange:enabled:active {
-  background-color: #fdba74;
+  background-color: hsla(32.4, 97%, 72%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-orange {
-  background-color: rgba(124, 45, 18, 0.01);
-  color: #ffedd5;
+  background-color: hsla(14.4, 75%, 28.000000000000004%, 0.01);
+  color: hsla(36, 100%, 92%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #fed7aa;
-  box-shadow: inset 0 0 0 3px #c2410c, 0 0px 0px 3px #ffedd5;
+  border-color: hsla(32.4, 98%, 83%, 1);
+  box-shadow: inset 0 0 0 3px hsla(18, 88%, 40%, 1), 0 0px 0px 3px hsla(36, 100%, 92%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-outline-orange:enabled:hover {
-  background-color: #c2410c;
+  background-color: hsla(18, 88%, 40%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-orange:enabled:focus-visible {
-  background-color: #c2410c;
+  background-color: hsla(18, 88%, 40%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-orange:enabled:active {
-  background-color: rgba(124, 45, 18, 0.6);
+  background-color: hsla(14.4, 75%, 28.000000000000004%, 0.6);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-orange {
-  background-color: rgba(255, 247, 237, 0.01);
-  color: #f97316;
+  background-color: hsla(32.4, 100%, 96%, 0.01);
+  color: hsla(25.200000000000003, 95%, 53%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-orange:enabled:hover {
-  background-color: #ffedd5;
-  color: #f97316;
+  background-color: hsla(36, 100%, 92%, 1);
+  color: hsla(25.200000000000003, 95%, 53%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-orange:enabled:focus-visible {
-  background-color: #ffedd5;
-  color: #f97316;
+  background-color: hsla(36, 100%, 92%, 1);
+  color: hsla(25.200000000000003, 95%, 53%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-orange:enabled:active {
-  background-color: rgba(254, 215, 170, 0.85);
-  color: #ea580c;
+  background-color: hsla(32.4, 98%, 83%, 0.85);
+  color: hsla(21.599999999999998, 90%, 48%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-orange:disabled {
-  background-color: rgba(255, 247, 237, 0.5);
-  color: rgba(77, 74, 71, 0.5);
+  background-color: hsla(32.4, 100%, 96%, 0.5);
+  color: hsla(32.4, 53%, 36%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-clear-orange {
-  background-color: rgba(124, 45, 18, 0.01);
-  color: #fb923c;
+  background-color: hsla(14.4, 75%, 28.000000000000004%, 0.01);
+  color: hsla(28.8, 96%, 61%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-orange:enabled:hover {
-  background-color: rgba(234, 88, 12, 0.35);
-  color: #ea580c;
+  background-color: hsla(32.4, 97%, 72%, 0.25);
+  color: hsla(25.200000000000003, 95%, 53%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-orange:enabled:focus-visible {
-  background-color: rgba(234, 88, 12, 0.35);
-  color: #ea580c;
+  background-color: hsla(32.4, 97%, 72%, 0.25);
+  color: hsla(25.200000000000003, 95%, 53%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-orange:enabled:active {
-  background-color: rgba(194, 65, 12, 0.4);
-  color: #f97316;
+  background-color: hsla(28.8, 96%, 61%, 0.2);
+  color: hsla(21.599999999999998, 90%, 48%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-orange:disabled {
-  background-color: rgba(194, 65, 12, 7);
-  color: rgba(9855, 3302, 610, 7);
+  background-color: hsla(18, 88%, 40%, 0.07);
+  color: hsla(18, 88%, 40%, 0.07);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-clear-orange {
-  background-color: rgba(255, 247, 237, 0.01);
-  color: #c2410c;
+  background-color: hsla(32.4, 100%, 96%, 0.01);
+  color: hsla(18, 88%, 40%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #f97316;
-  box-shadow: inset 0 0 0 1px #f97316, 0 0px 0px 2px #7c2d12;
+  border-color: hsla(25.200000000000003, 95%, 53%, 1);
+  box-shadow: inset 0 0 0 1px hsla(25.200000000000003, 95%, 53%, 1), 0 0px 0px 2px hsla(14.4, 75%, 28.000000000000004%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-clear-orange:enabled:hover {
-  background-color: #c2410c;
+  background-color: hsla(18, 88%, 40%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-orange:enabled:focus-visible {
-  background-color: #c2410c;
+  background-color: hsla(18, 88%, 40%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-orange:enabled:active {
-  background-color: #7c2d12;
+  background-color: hsla(14.4, 75%, 28.000000000000004%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-orange {
-  background-color: #7c2d12;
+  background-color: hsla(14.4, 75%, 28.000000000000004%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #7c2d12;
-  box-shadow: inset 0 0 0 1px #7c2d12, 0 0px 0px 2px #fff7ed;
+  border-color: hsla(14.4, 75%, 28.000000000000004%, 1);
+  box-shadow: inset 0 0 0 1px hsla(14.4, 75%, 28.000000000000004%, 1), 0 0px 0px 2px hsla(32.4, 100%, 96%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-clear-orange:enabled:hover {
-  background-color: #fff7ed;
+  background-color: hsla(32.4, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-orange:enabled:focus-visible {
-  background-color: #fff7ed;
+  background-color: hsla(32.4, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-orange:enabled:active {
-  background-color: #fdba74;
+  background-color: hsla(32.4, 97%, 72%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-amber {
-  background-color: rgba(254, 243, 199, 0.8);
-  color: rgba(77, 75, 71, 0.9);
+  background-color: hsla(46.800000000000004, 96%, 89%, 0.8);
+  color: hsla(46.800000000000004, 51%, 17%, 0.9);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-amber:enabled:hover {
-  background-color: #fcd34d;
-  color: #000;
+  background-color: hsla(46.800000000000004, 97%, 77%, 1);
+  color: hsla(46.800000000000004, 51%, 17%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-amber:enabled:focus-visible {
-  background-color: #fcd34d;
-  color: #000;
+  background-color: hsla(46.800000000000004, 97%, 77%, 1);
+  color: hsla(46.800000000000004, 51%, 17%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-amber:enabled:active {
-  background-color: #fde68a;
-  color: rgba(76, 69, 41, 1);
+  background-color: hsla(43.199999999999996, 96%, 56.00000000000001%, 0.65);
+  color: hsla(43.199999999999996, 56.00000000000001%, 6%, 0.65);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-amber:disabled {
-  background-color: #fef3c7;
-  color: rgba(76, 73, 60, 1);
+  background-color: hsla(46.800000000000004, 96%, 89%, 1);
+  color: hsla(46.800000000000004, 50%, 28.999999999999996%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-light-amber {
-  background-color: rgba(120, 53, 15, 0.4);
-  color: rgba(7417, 3251, 711, 0.9);
+  background-color: hsla(21.599999999999998, 78%, 26%, 0.4);
+  color: hsla(21.599999999999998, 41%, 86%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-amber:enabled:hover {
-  background-color: #92400e;
-  color: rgba(7417, 3251, 711, 1);
+  background-color: hsla(21.599999999999998, 83%, 31%, 1);
+  color: hsla(21.599999999999998, 45%, 91%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-amber:enabled:focus-visible {
-  background-color: #92400e;
-  color: rgba(7417, 3251, 711, 1);
+  background-color: hsla(21.599999999999998, 83%, 31%, 1);
+  color: hsla(21.599999999999998, 45%, 91%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-amber:enabled:active {
-  background-color: #b45309;
-  color: rgba(9144, 4216, 457, 1);
+  background-color: hsla(21.599999999999998, 78%, 26%, 1);
+  color: hsla(21.599999999999998, 41%, 86%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-amber:disabled {
-  background-color: #78350f;
-  color: rgba(6096, 2692, 762, 1);
+  background-color: hsla(21.599999999999998, 78%, 26%, 1);
+  color: hsla(21.599999999999998, 41%, 86%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-light-amber {
-  background-color: #fffbeb;
+  background-color: hsla(46.800000000000004, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #f59e0b;
-  box-shadow: inset 0 0 0 1px #f59e0b, 0 0px 0px 1px #78350f;
+  border-color: hsla(36, 92%, 50%, 1);
+  box-shadow: inset 0 0 0 1px hsla(36, 92%, 50%, 1), 0 0px 0px 1px hsla(21.599999999999998, 78%, 26%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-light-amber:enabled:hover {
-  background-color: #b45309;
+  background-color: hsla(25.200000000000003, 90%, 37%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-amber:enabled:focus-visible {
-  background-color: #b45309;
+  background-color: hsla(25.200000000000003, 90%, 37%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-amber:enabled:active {
-  background-color: #78350f;
+  background-color: hsla(21.599999999999998, 78%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-amber {
-  background-color: #78350f;
+  background-color: hsla(21.599999999999998, 78%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #78350f;
-  box-shadow: inset 0 0 0 1px #78350f, 0 0px 0px 1px #fffbeb;
+  border-color: hsla(21.599999999999998, 78%, 26%, 1);
+  box-shadow: inset 0 0 0 1px hsla(21.599999999999998, 78%, 26%, 1), 0 0px 0px 1px hsla(46.800000000000004, 100%, 96%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-light-amber:enabled:hover {
-  background-color: #fffbeb;
+  background-color: hsla(46.800000000000004, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-amber:enabled:focus-visible {
-  background-color: #fffbeb;
+  background-color: hsla(46.800000000000004, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-amber:enabled:active {
-  background-color: #fcd34d;
+  background-color: hsla(46.800000000000004, 97%, 65%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-amber {
-  background-color: #fbbf24;
-  color: rgba(75, 57, 11, 1);
+  background-color: hsla(43.199999999999996, 96%, 56.00000000000001%, 1);
+  color: hsla(43.199999999999996, 50%, 0%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-amber:enabled:hover {
-  background-color: #f59e0b;
+  background-color: hsla(36, 92%, 50%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-amber:enabled:focus-visible {
-  background-color: #f59e0b;
+  background-color: hsla(36, 92%, 50%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-amber:enabled:active {
-  background-color: #d97706;
-  color: rgba(74, 47, 3, 1);
+  background-color: hsla(32.4, 95%, 44%, 1);
+  color: hsla(36, 55.00000000000001%, 0%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-amber:disabled {
-  background-color: #fde68a;
-  color: rgba(76, 69, 41, 1);
+  background-color: hsla(46.800000000000004, 97%, 77%, 1);
+  color: hsla(46.800000000000004, 51%, 17%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-amber {
-  background-color: #f59e0b;
-  color: rgba(74, 47, 3, 1);
+  background-color: hsla(36, 92%, 50%, 1);
+  color: hsla(36, 55.00000000000001%, 0%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-amber:enabled:hover {
-  background-color: #d97706;
-  color: #000;
+  background-color: hsla(32.4, 95%, 44%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-amber:enabled:focus-visible {
-  background-color: #d97706;
-  color: #000;
+  background-color: hsla(32.4, 95%, 44%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-amber:enabled:active {
-  background-color: rgba(217, 119, 6, 0.75);
-  color: #000;
+  background-color: hsla(32.4, 95%, 44%, 0.7);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-amber:disabled {
-  background-color: #b45309;
-  color: rgba(9144, 4216, 457, 1);
+  background-color: hsla(25.200000000000003, 90%, 37%, 1);
+  color: hsla(25.200000000000003, 48%, 97%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-amber {
-  background-color: #fffbeb;
+  background-color: hsla(46.800000000000004, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #f59e0b;
-  box-shadow: inset 0 0 0 1px #f59e0b, 0 0px 0px 2px #78350f;
+  border-color: hsla(36, 92%, 50%, 1);
+  box-shadow: inset 0 0 0 1px hsla(36, 92%, 50%, 1), 0 0px 0px 2px hsla(21.599999999999998, 78%, 26%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-amber:enabled:hover {
-  background-color: #b45309;
+  background-color: hsla(25.200000000000003, 90%, 37%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-amber:enabled:focus-visible {
-  background-color: #b45309;
+  background-color: hsla(25.200000000000003, 90%, 37%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-amber:enabled:active {
-  background-color: #78350f;
+  background-color: hsla(21.599999999999998, 78%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-amber {
-  background-color: #78350f;
+  background-color: hsla(21.599999999999998, 78%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #78350f;
-  box-shadow: inset 0 0 0 1px #78350f, 0 0px 0px 2px #fffbeb;
+  border-color: hsla(21.599999999999998, 78%, 26%, 1);
+  box-shadow: inset 0 0 0 1px hsla(21.599999999999998, 78%, 26%, 1), 0 0px 0px 2px hsla(46.800000000000004, 100%, 96%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-amber:enabled:hover {
-  background-color: #fffbeb;
+  background-color: hsla(46.800000000000004, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-amber:enabled:focus-visible {
-  background-color: #fffbeb;
+  background-color: hsla(46.800000000000004, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-amber:enabled:active {
-  background-color: #fcd34d;
+  background-color: hsla(46.800000000000004, 97%, 65%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-amber {
-  background-color: rgba(180, 83, 9, 0.9);
-  color: rgba(9144, 4216, 457, 0.9);
+  background-color: hsla(25.200000000000003, 90%, 37%, 0.9);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-amber:enabled:hover {
-  background-color: rgba(146, 64, 14, 0.8);
-  color: rgba(6096, 2692, 762, 1);
+  background-color: hsla(21.599999999999998, 83%, 31%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-amber:enabled:focus-visible {
-  background-color: rgba(146, 64, 14, 0.8);
-  color: rgba(6096, 2692, 762, 1);
+  background-color: hsla(21.599999999999998, 83%, 31%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-amber:enabled:active {
-  background-color: #92400e;
-  color: rgba(7417, 3251, 711, 1);
+  background-color: hsla(21.599999999999998, 83%, 31%, 1);
+  color: hsla(21.599999999999998, 45%, 91%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-amber:disabled {
-  background-color: rgba(146, 64, 14, 0.6);
-  color: rgba(7417, 3251, 711, 0.6);
+  background-color: hsla(21.599999999999998, 83%, 31%, 0.6);
+  color: hsla(21.599999999999998, 45%, 91%, 0.6);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-bold-amber {
-  background-color: rgba(120, 53, 15, 0.9);
-  color: rgba(6096, 2692, 762, 0.9);
+  background-color: hsla(21.599999999999998, 78%, 26%, 0.85);
+  color: hsla(21.599999999999998, 41%, 86%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-amber:enabled:hover {
-  background-color: rgba(120, 53, 15, 0.65);
+  background-color: hsla(21.599999999999998, 78%, 26%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-amber:enabled:focus-visible {
-  background-color: rgba(120, 53, 15, 0.65);
+  background-color: hsla(21.599999999999998, 78%, 26%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-amber:enabled:active {
-  background-color: #92400e;
-  color: rgba(7417, 3251, 711, 1);
+  background-color: hsla(21.599999999999998, 78%, 26%, 0.45);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-amber:disabled {
-  background-color: rgba(120, 53, 15, 0.4);
-  color: rgba(6096, 2692, 762, 0.4);
+  background-color: hsla(21.599999999999998, 78%, 26%, 0.4);
+  color: hsla(21.599999999999998, 41%, 86%, 0.4);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-bold-amber {
-  background-color: #fffbeb;
+  background-color: hsla(46.800000000000004, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #f59e0b;
-  box-shadow: inset 0 0 0 3px #f59e0b, 0 0px 0px 3px #78350f;
+  border-color: hsla(36, 92%, 50%, 1);
+  box-shadow: inset 0 0 0 3px hsla(36, 92%, 50%, 1), 0 0px 0px 3px hsla(21.599999999999998, 78%, 26%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-bold-amber:enabled:hover {
-  background-color: #b45309;
+  background-color: hsla(25.200000000000003, 90%, 37%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-amber:enabled:focus-visible {
-  background-color: #b45309;
+  background-color: hsla(25.200000000000003, 90%, 37%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-amber:enabled:active {
-  background-color: #78350f;
+  background-color: hsla(21.599999999999998, 78%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-amber {
-  background-color: #78350f;
+  background-color: hsla(21.599999999999998, 78%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #78350f;
-  box-shadow: inset 0 0 0 3px #78350f, 0 0px 0px 3px #fffbeb;
+  border-color: hsla(21.599999999999998, 78%, 26%, 1);
+  box-shadow: inset 0 0 0 3px hsla(21.599999999999998, 78%, 26%, 1), 0 0px 0px 3px hsla(46.800000000000004, 100%, 96%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-bold-amber:enabled:hover {
-  background-color: #fffbeb;
+  background-color: hsla(46.800000000000004, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-amber:enabled:focus-visible {
-  background-color: #fffbeb;
+  background-color: hsla(46.800000000000004, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-amber:enabled:active {
-  background-color: #fcd34d;
+  background-color: hsla(46.800000000000004, 97%, 65%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-amber {
-  background-color: rgba(255, 251, 235, 0.01);
-  color: #f59e0b;
+  background-color: hsla(46.800000000000004, 100%, 96%, 0.01);
+  color: hsla(36, 92%, 50%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-amber:enabled:hover {
-  background-color: #f59e0b;
+  background-color: hsla(36, 92%, 50%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-amber:enabled:focus-visible {
-  background-color: #f59e0b;
+  background-color: hsla(36, 92%, 50%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-amber:enabled:active {
-  background-color: rgba(217, 119, 6, 0.85);
+  background-color: hsla(32.4, 95%, 44%, 0.85);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-amber:disabled {
-  background-color: rgba(255, 251, 235, 0.5);
-  color: rgba(77, 75, 71, 0.5);
+  background-color: hsla(46.800000000000004, 100%, 96%, 0.5);
+  color: hsla(46.800000000000004, 53%, 36%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .btn-outline-amber {
-  border-color: #f59e0b;
+  border-color: hsla(36, 92%, 50%, 1);
   border-width: 1px;
   border-style: solid;
 }
 
 .dark .btn-outline-amber {
-  background-color: rgba(120, 53, 15, 0.01);
-  color: #fbbf24;
+  background-color: hsla(21.599999999999998, 78%, 26%, 0.01);
+  color: hsla(43.199999999999996, 96%, 56.00000000000001%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-amber:enabled:hover {
-  background-color: #f59e0b;
+  background-color: hsla(36, 92%, 50%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-amber:enabled:focus-visible {
-  background-color: #f59e0b;
+  background-color: hsla(36, 92%, 50%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-amber:enabled:active {
-  background-color: rgba(251, 191, 36, 0.85);
+  background-color: hsla(36, 92%, 50%, 0.8);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-amber:disabled {
-  background-color: rgba(255, 251, 235, 0.5);
-  color: rgba(77, 75, 71, 0.5);
+  background-color: hsla(46.800000000000004, 100%, 96%, 0.5);
+  color: hsla(46.800000000000004, 53%, 36%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-outline-amber {
-  border-color: #fbbf24;
+  border-color: hsla(43.199999999999996, 96%, 56.00000000000001%, 1);
 }
 
 .contrast .btn-outline-amber {
-  background-color: rgba(255, 251, 235, 0.01);
-  color: #b45309;
+  background-color: hsla(46.800000000000004, 100%, 96%, 0.01);
+  color: hsla(25.200000000000003, 90%, 37%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #b45309;
-  box-shadow: inset 0 0 0 3px #b45309, 0 0px 0px 3px #fffbeb;
+  border-color: hsla(25.200000000000003, 90%, 37%, 1);
+  box-shadow: inset 0 0 0 3px hsla(25.200000000000003, 90%, 37%, 1), 0 0px 0px 3px hsla(46.800000000000004, 100%, 96%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-outline-amber:enabled:hover {
-  background-color: #fffbeb;
+  background-color: hsla(46.800000000000004, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-amber:enabled:focus-visible {
-  background-color: #fffbeb;
+  background-color: hsla(46.800000000000004, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-amber:enabled:active {
-  background-color: #fcd34d;
+  background-color: hsla(46.800000000000004, 97%, 65%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-amber {
-  background-color: rgba(120, 53, 15, 0.01);
-  color: #fef3c7;
+  background-color: hsla(21.599999999999998, 78%, 26%, 0.01);
+  color: hsla(46.800000000000004, 96%, 89%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #fde68a;
-  box-shadow: inset 0 0 0 3px #b45309, 0 0px 0px 3px #fef3c7;
+  border-color: hsla(46.800000000000004, 97%, 77%, 1);
+  box-shadow: inset 0 0 0 3px hsla(25.200000000000003, 90%, 37%, 1), 0 0px 0px 3px hsla(46.800000000000004, 96%, 89%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-outline-amber:enabled:hover {
-  background-color: #b45309;
+  background-color: hsla(25.200000000000003, 90%, 37%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-amber:enabled:focus-visible {
-  background-color: #b45309;
+  background-color: hsla(25.200000000000003, 90%, 37%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-amber:enabled:active {
-  background-color: rgba(120, 53, 15, 0.6);
+  background-color: hsla(21.599999999999998, 78%, 26%, 0.6);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-amber {
-  background-color: rgba(255, 251, 235, 0.01);
-  color: #f59e0b;
+  background-color: hsla(46.800000000000004, 100%, 96%, 0.01);
+  color: hsla(36, 92%, 50%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-amber:enabled:hover {
-  background-color: #fef3c7;
-  color: #f59e0b;
+  background-color: hsla(46.800000000000004, 96%, 89%, 1);
+  color: hsla(36, 92%, 50%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-amber:enabled:focus-visible {
-  background-color: #fef3c7;
-  color: #f59e0b;
+  background-color: hsla(46.800000000000004, 96%, 89%, 1);
+  color: hsla(36, 92%, 50%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-amber:enabled:active {
-  background-color: rgba(253, 230, 138, 0.85);
-  color: #d97706;
+  background-color: hsla(46.800000000000004, 97%, 77%, 0.85);
+  color: hsla(32.4, 95%, 44%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-amber:disabled {
-  background-color: rgba(255, 251, 235, 0.5);
-  color: rgba(77, 75, 71, 0.5);
+  background-color: hsla(46.800000000000004, 100%, 96%, 0.5);
+  color: hsla(46.800000000000004, 53%, 36%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-clear-amber {
-  background-color: rgba(120, 53, 15, 0.01);
-  color: #fbbf24;
+  background-color: hsla(21.599999999999998, 78%, 26%, 0.01);
+  color: hsla(43.199999999999996, 96%, 56.00000000000001%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-amber:enabled:hover {
-  background-color: rgba(217, 119, 6, 0.35);
-  color: #d97706;
+  background-color: hsla(46.800000000000004, 97%, 65%, 0.25);
+  color: hsla(36, 92%, 50%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-amber:enabled:focus-visible {
-  background-color: rgba(217, 119, 6, 0.35);
-  color: #d97706;
+  background-color: hsla(46.800000000000004, 97%, 65%, 0.25);
+  color: hsla(36, 92%, 50%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-amber:enabled:active {
-  background-color: rgba(180, 83, 9, 0.4);
-  color: #f59e0b;
+  background-color: hsla(43.199999999999996, 96%, 56.00000000000001%, 0.2);
+  color: hsla(32.4, 95%, 44%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-amber:disabled {
-  background-color: rgba(180, 83, 9, 7);
-  color: rgba(9144, 4216, 457, 7);
+  background-color: hsla(25.200000000000003, 90%, 37%, 0.07);
+  color: hsla(25.200000000000003, 90%, 37%, 0.07);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-clear-amber {
-  background-color: rgba(255, 251, 235, 0.01);
-  color: #b45309;
+  background-color: hsla(46.800000000000004, 100%, 96%, 0.01);
+  color: hsla(25.200000000000003, 90%, 37%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #f59e0b;
-  box-shadow: inset 0 0 0 1px #f59e0b, 0 0px 0px 2px #78350f;
+  border-color: hsla(36, 92%, 50%, 1);
+  box-shadow: inset 0 0 0 1px hsla(36, 92%, 50%, 1), 0 0px 0px 2px hsla(21.599999999999998, 78%, 26%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-clear-amber:enabled:hover {
-  background-color: #b45309;
+  background-color: hsla(25.200000000000003, 90%, 37%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-amber:enabled:focus-visible {
-  background-color: #b45309;
+  background-color: hsla(25.200000000000003, 90%, 37%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-amber:enabled:active {
-  background-color: #78350f;
+  background-color: hsla(21.599999999999998, 78%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-amber {
-  background-color: #78350f;
+  background-color: hsla(21.599999999999998, 78%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #78350f;
-  box-shadow: inset 0 0 0 1px #78350f, 0 0px 0px 2px #fffbeb;
+  border-color: hsla(21.599999999999998, 78%, 26%, 1);
+  box-shadow: inset 0 0 0 1px hsla(21.599999999999998, 78%, 26%, 1), 0 0px 0px 2px hsla(46.800000000000004, 100%, 96%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-clear-amber:enabled:hover {
-  background-color: #fffbeb;
+  background-color: hsla(46.800000000000004, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-amber:enabled:focus-visible {
-  background-color: #fffbeb;
+  background-color: hsla(46.800000000000004, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-amber:enabled:active {
-  background-color: #fcd34d;
+  background-color: hsla(46.800000000000004, 97%, 65%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-yellow {
-  background-color: rgba(254, 249, 195, 0.8);
-  color: rgba(76, 76, 70, 0.9);
+  background-color: hsla(54, 97%, 88%, 0.8);
+  color: hsla(54, 52%, 17%, 0.9);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-yellow:enabled:hover {
-  background-color: #fde047;
-  color: #000;
+  background-color: hsla(54, 98%, 77%, 1);
+  color: hsla(54, 52%, 17%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-yellow:enabled:focus-visible {
-  background-color: #fde047;
-  color: #000;
+  background-color: hsla(54, 98%, 77%, 1);
+  color: hsla(54, 52%, 17%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-yellow:enabled:active {
-  background-color: #fef08a;
-  color: rgba(76, 72, 41, 1);
+  background-color: hsla(46.800000000000004, 96%, 53%, 0.65);
+  color: hsla(46.800000000000004, 56.00000000000001%, 3%, 0.65);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-yellow:disabled {
-  background-color: #fef9c3;
-  color: rgba(76, 75, 59, 1);
+  background-color: hsla(54, 97%, 88%, 1);
+  color: hsla(54, 51%, 28.000000000000004%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-light-yellow {
-  background-color: rgba(113, 63, 18, 0.4);
-  color: rgba(6756, 3912, 711, 0.9);
+  background-color: hsla(28.8, 73%, 26%, 0.4);
+  color: hsla(28.8, 39%, 86%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-yellow:enabled:hover {
-  background-color: #854d0e;
-  color: rgba(6756, 3912, 711, 1);
+  background-color: hsla(32.4, 81%, 28.999999999999996%, 1);
+  color: hsla(32.4, 43%, 89%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-yellow:enabled:focus-visible {
-  background-color: #854d0e;
-  color: rgba(6756, 3912, 711, 1);
+  background-color: hsla(32.4, 81%, 28.999999999999996%, 1);
+  color: hsla(32.4, 43%, 89%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-yellow:enabled:active {
-  background-color: #a16207;
-  color: rgba(8179, 4978, 356, 1);
+  background-color: hsla(28.8, 73%, 26%, 1);
+  color: hsla(28.8, 39%, 86%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-yellow:disabled {
-  background-color: #713f12;
-  color: rgba(5740, 3200, 914, 1);
+  background-color: hsla(28.8, 73%, 26%, 1);
+  color: hsla(28.8, 39%, 86%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-light-yellow {
-  background-color: #fefce8;
+  background-color: hsla(54, 92%, 95%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #eab308;
-  box-shadow: inset 0 0 0 1px #eab308, 0 0px 0px 1px #713f12;
+  border-color: hsla(46.800000000000004, 93%, 47%, 1);
+  box-shadow: inset 0 0 0 1px hsla(46.800000000000004, 93%, 47%, 1), 0 0px 0px 1px hsla(28.8, 73%, 26%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-light-yellow:enabled:hover {
-  background-color: #a16207;
+  background-color: hsla(36, 92%, 33%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-yellow:enabled:focus-visible {
-  background-color: #a16207;
+  background-color: hsla(36, 92%, 33%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-yellow:enabled:active {
-  background-color: #713f12;
+  background-color: hsla(28.8, 73%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-yellow {
-  background-color: #713f12;
+  background-color: hsla(28.8, 73%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #713f12;
-  box-shadow: inset 0 0 0 1px #713f12, 0 0px 0px 1px #fefce8;
+  border-color: hsla(28.8, 73%, 26%, 1);
+  box-shadow: inset 0 0 0 1px hsla(28.8, 73%, 26%, 1), 0 0px 0px 1px hsla(54, 92%, 95%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-light-yellow:enabled:hover {
-  background-color: #fefce8;
+  background-color: hsla(54, 92%, 95%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-yellow:enabled:focus-visible {
-  background-color: #fefce8;
+  background-color: hsla(54, 92%, 95%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-yellow:enabled:active {
-  background-color: #fde047;
+  background-color: hsla(50.400000000000006, 98%, 64%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-yellow {
-  background-color: #facc15;
-  color: rgba(75, 61, 6, 1);
+  background-color: hsla(46.800000000000004, 96%, 53%, 1);
+  color: hsla(46.800000000000004, 56.00000000000001%, 3%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-yellow:enabled:hover {
-  background-color: #eab308;
+  background-color: hsla(46.800000000000004, 93%, 47%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-yellow:enabled:focus-visible {
-  background-color: #eab308;
+  background-color: hsla(46.800000000000004, 93%, 47%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-yellow:enabled:active {
-  background-color: #ca8a04;
-  color: rgba(70, 54, 2, 1);
+  background-color: hsla(39.6, 96%, 40%, 1);
+  color: hsla(46.800000000000004, 55.00000000000001%, 0%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-yellow:disabled {
-  background-color: #fef08a;
-  color: rgba(76, 72, 41, 1);
+  background-color: hsla(54, 98%, 77%, 1);
+  color: hsla(54, 52%, 17%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-yellow {
-  background-color: #eab308;
-  color: rgba(70, 54, 2, 1);
+  background-color: hsla(46.800000000000004, 93%, 47%, 1);
+  color: hsla(46.800000000000004, 55.00000000000001%, 0%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-yellow:enabled:hover {
-  background-color: #ca8a04;
-  color: #000;
+  background-color: hsla(39.6, 96%, 40%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-yellow:enabled:focus-visible {
-  background-color: #ca8a04;
-  color: #000;
+  background-color: hsla(39.6, 96%, 40%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-yellow:enabled:active {
-  background-color: rgba(202, 138, 4, 0.75);
-  color: #000;
+  background-color: hsla(39.6, 96%, 40%, 0.7);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-yellow:disabled {
-  background-color: #a16207;
-  color: rgba(8179, 4978, 356, 1);
+  background-color: hsla(36, 92%, 33%, 1);
+  color: hsla(36, 50%, 93%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-yellow {
-  background-color: #fefce8;
+  background-color: hsla(54, 92%, 95%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #eab308;
-  box-shadow: inset 0 0 0 1px #eab308, 0 0px 0px 2px #713f12;
+  border-color: hsla(46.800000000000004, 93%, 47%, 1);
+  box-shadow: inset 0 0 0 1px hsla(46.800000000000004, 93%, 47%, 1), 0 0px 0px 2px hsla(28.8, 73%, 26%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-yellow:enabled:hover {
-  background-color: #a16207;
+  background-color: hsla(36, 92%, 33%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-yellow:enabled:focus-visible {
-  background-color: #a16207;
+  background-color: hsla(36, 92%, 33%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-yellow:enabled:active {
-  background-color: #713f12;
+  background-color: hsla(28.8, 73%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-yellow {
-  background-color: #713f12;
+  background-color: hsla(28.8, 73%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #713f12;
-  box-shadow: inset 0 0 0 1px #713f12, 0 0px 0px 2px #fefce8;
+  border-color: hsla(28.8, 73%, 26%, 1);
+  box-shadow: inset 0 0 0 1px hsla(28.8, 73%, 26%, 1), 0 0px 0px 2px hsla(54, 92%, 95%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-yellow:enabled:hover {
-  background-color: #fefce8;
+  background-color: hsla(54, 92%, 95%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-yellow:enabled:focus-visible {
-  background-color: #fefce8;
+  background-color: hsla(54, 92%, 95%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-yellow:enabled:active {
-  background-color: #fde047;
+  background-color: hsla(50.400000000000006, 98%, 64%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-yellow {
-  background-color: rgba(161, 98, 7, 0.9);
-  color: rgba(8179, 4978, 356, 0.9);
+  background-color: hsla(36, 92%, 33%, 0.9);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-yellow:enabled:hover {
-  background-color: rgba(133, 77, 14, 0.8);
-  color: rgba(5740, 3200, 914, 1);
+  background-color: hsla(32.4, 81%, 28.999999999999996%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-yellow:enabled:focus-visible {
-  background-color: rgba(133, 77, 14, 0.8);
-  color: rgba(5740, 3200, 914, 1);
+  background-color: hsla(32.4, 81%, 28.999999999999996%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-yellow:enabled:active {
-  background-color: #854d0e;
-  color: rgba(6756, 3912, 711, 1);
+  background-color: hsla(32.4, 81%, 28.999999999999996%, 1);
+  color: hsla(32.4, 43%, 89%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-yellow:disabled {
-  background-color: rgba(133, 77, 14, 0.6);
-  color: rgba(6756, 3912, 711, 0.6);
+  background-color: hsla(32.4, 81%, 28.999999999999996%, 0.6);
+  color: hsla(32.4, 43%, 89%, 0.6);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-bold-yellow {
-  background-color: rgba(113, 63, 18, 0.9);
-  color: rgba(5740, 3200, 914, 0.9);
+  background-color: hsla(28.8, 73%, 26%, 0.85);
+  color: hsla(28.8, 39%, 86%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-yellow:enabled:hover {
-  background-color: rgba(113, 63, 18, 0.65);
+  background-color: hsla(28.8, 73%, 26%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-yellow:enabled:focus-visible {
-  background-color: rgba(113, 63, 18, 0.65);
+  background-color: hsla(28.8, 73%, 26%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-yellow:enabled:active {
-  background-color: #854d0e;
-  color: rgba(6756, 3912, 711, 1);
+  background-color: hsla(28.8, 73%, 26%, 0.45);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-yellow:disabled {
-  background-color: rgba(113, 63, 18, 0.4);
-  color: rgba(5740, 3200, 914, 0.4);
+  background-color: hsla(28.8, 73%, 26%, 0.4);
+  color: hsla(28.8, 39%, 86%, 0.4);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-bold-yellow {
-  background-color: #fefce8;
+  background-color: hsla(54, 92%, 95%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #eab308;
-  box-shadow: inset 0 0 0 3px #eab308, 0 0px 0px 3px #713f12;
+  border-color: hsla(46.800000000000004, 93%, 47%, 1);
+  box-shadow: inset 0 0 0 3px hsla(46.800000000000004, 93%, 47%, 1), 0 0px 0px 3px hsla(28.8, 73%, 26%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-bold-yellow:enabled:hover {
-  background-color: #a16207;
+  background-color: hsla(36, 92%, 33%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-yellow:enabled:focus-visible {
-  background-color: #a16207;
+  background-color: hsla(36, 92%, 33%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-yellow:enabled:active {
-  background-color: #713f12;
+  background-color: hsla(28.8, 73%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-yellow {
-  background-color: #713f12;
+  background-color: hsla(28.8, 73%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #713f12;
-  box-shadow: inset 0 0 0 3px #713f12, 0 0px 0px 3px #fefce8;
+  border-color: hsla(28.8, 73%, 26%, 1);
+  box-shadow: inset 0 0 0 3px hsla(28.8, 73%, 26%, 1), 0 0px 0px 3px hsla(54, 92%, 95%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-bold-yellow:enabled:hover {
-  background-color: #fefce8;
+  background-color: hsla(54, 92%, 95%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-yellow:enabled:focus-visible {
-  background-color: #fefce8;
+  background-color: hsla(54, 92%, 95%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-yellow:enabled:active {
-  background-color: #fde047;
+  background-color: hsla(50.400000000000006, 98%, 64%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-yellow {
-  background-color: rgba(254, 252, 232, 0.01);
-  color: #eab308;
+  background-color: hsla(54, 92%, 95%, 0.01);
+  color: hsla(46.800000000000004, 93%, 47%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-yellow:enabled:hover {
-  background-color: #eab308;
+  background-color: hsla(46.800000000000004, 93%, 47%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-yellow:enabled:focus-visible {
-  background-color: #eab308;
+  background-color: hsla(46.800000000000004, 93%, 47%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-yellow:enabled:active {
-  background-color: rgba(202, 138, 4, 0.85);
+  background-color: hsla(39.6, 96%, 40%, 0.85);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-yellow:disabled {
-  background-color: rgba(254, 252, 232, 0.5);
-  color: rgba(76, 76, 70, 0.5);
+  background-color: hsla(54, 92%, 95%, 0.5);
+  color: hsla(54, 50%, 35%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .btn-outline-yellow {
-  border-color: #eab308;
+  border-color: hsla(46.800000000000004, 93%, 47%, 1);
   border-width: 1px;
   border-style: solid;
 }
 
 .dark .btn-outline-yellow {
-  background-color: rgba(113, 63, 18, 0.01);
-  color: #facc15;
+  background-color: hsla(28.8, 73%, 26%, 0.01);
+  color: hsla(46.800000000000004, 96%, 53%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-yellow:enabled:hover {
-  background-color: #eab308;
+  background-color: hsla(46.800000000000004, 93%, 47%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-yellow:enabled:focus-visible {
-  background-color: #eab308;
+  background-color: hsla(46.800000000000004, 93%, 47%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-yellow:enabled:active {
-  background-color: rgba(250, 204, 21, 0.85);
+  background-color: hsla(46.800000000000004, 93%, 47%, 0.8);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-yellow:disabled {
-  background-color: rgba(254, 252, 232, 0.5);
-  color: rgba(76, 76, 70, 0.5);
+  background-color: hsla(54, 92%, 95%, 0.5);
+  color: hsla(54, 50%, 35%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-outline-yellow {
-  border-color: #facc15;
+  border-color: hsla(46.800000000000004, 96%, 53%, 1);
 }
 
 .contrast .btn-outline-yellow {
-  background-color: rgba(254, 252, 232, 0.01);
-  color: #a16207;
+  background-color: hsla(54, 92%, 95%, 0.01);
+  color: hsla(36, 92%, 33%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #a16207;
-  box-shadow: inset 0 0 0 3px #a16207, 0 0px 0px 3px #fefce8;
+  border-color: hsla(36, 92%, 33%, 1);
+  box-shadow: inset 0 0 0 3px hsla(36, 92%, 33%, 1), 0 0px 0px 3px hsla(54, 92%, 95%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-outline-yellow:enabled:hover {
-  background-color: #fefce8;
+  background-color: hsla(54, 92%, 95%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-yellow:enabled:focus-visible {
-  background-color: #fefce8;
+  background-color: hsla(54, 92%, 95%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-yellow:enabled:active {
-  background-color: #fde047;
+  background-color: hsla(50.400000000000006, 98%, 64%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-yellow {
-  background-color: rgba(113, 63, 18, 0.01);
-  color: #fef9c3;
+  background-color: hsla(28.8, 73%, 26%, 0.01);
+  color: hsla(54, 97%, 88%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #fef08a;
-  box-shadow: inset 0 0 0 3px #a16207, 0 0px 0px 3px #fef9c3;
+  border-color: hsla(54, 98%, 77%, 1);
+  box-shadow: inset 0 0 0 3px hsla(36, 92%, 33%, 1), 0 0px 0px 3px hsla(54, 97%, 88%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-outline-yellow:enabled:hover {
-  background-color: #a16207;
+  background-color: hsla(36, 92%, 33%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-yellow:enabled:focus-visible {
-  background-color: #a16207;
+  background-color: hsla(36, 92%, 33%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-yellow:enabled:active {
-  background-color: rgba(113, 63, 18, 0.6);
+  background-color: hsla(28.8, 73%, 26%, 0.6);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-yellow {
-  background-color: rgba(254, 252, 232, 0.01);
-  color: #eab308;
+  background-color: hsla(54, 92%, 95%, 0.01);
+  color: hsla(46.800000000000004, 93%, 47%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-yellow:enabled:hover {
-  background-color: #fef9c3;
-  color: #eab308;
+  background-color: hsla(54, 97%, 88%, 1);
+  color: hsla(46.800000000000004, 93%, 47%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-yellow:enabled:focus-visible {
-  background-color: #fef9c3;
-  color: #eab308;
+  background-color: hsla(54, 97%, 88%, 1);
+  color: hsla(46.800000000000004, 93%, 47%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-yellow:enabled:active {
-  background-color: rgba(254, 240, 138, 0.85);
-  color: #ca8a04;
+  background-color: hsla(54, 98%, 77%, 0.85);
+  color: hsla(39.6, 96%, 40%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-yellow:disabled {
-  background-color: rgba(254, 252, 232, 0.5);
-  color: rgba(76, 76, 70, 0.5);
+  background-color: hsla(54, 92%, 95%, 0.5);
+  color: hsla(54, 50%, 35%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-clear-yellow {
-  background-color: rgba(113, 63, 18, 0.01);
-  color: #facc15;
+  background-color: hsla(28.8, 73%, 26%, 0.01);
+  color: hsla(46.800000000000004, 96%, 53%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-yellow:enabled:hover {
-  background-color: rgba(202, 138, 4, 0.35);
-  color: #ca8a04;
+  background-color: hsla(50.400000000000006, 98%, 64%, 0.25);
+  color: hsla(46.800000000000004, 93%, 47%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-yellow:enabled:focus-visible {
-  background-color: rgba(202, 138, 4, 0.35);
-  color: #ca8a04;
+  background-color: hsla(50.400000000000006, 98%, 64%, 0.25);
+  color: hsla(46.800000000000004, 93%, 47%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-yellow:enabled:active {
-  background-color: rgba(161, 98, 7, 0.4);
-  color: #eab308;
+  background-color: hsla(46.800000000000004, 96%, 53%, 0.2);
+  color: hsla(39.6, 96%, 40%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-yellow:disabled {
-  background-color: rgba(161, 98, 7, 7);
-  color: rgba(8179, 4978, 356, 7);
+  background-color: hsla(36, 92%, 33%, 0.07);
+  color: hsla(36, 92%, 33%, 0.07);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-clear-yellow {
-  background-color: rgba(254, 252, 232, 0.01);
-  color: #a16207;
+  background-color: hsla(54, 92%, 95%, 0.01);
+  color: hsla(36, 92%, 33%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #eab308;
-  box-shadow: inset 0 0 0 1px #eab308, 0 0px 0px 2px #713f12;
+  border-color: hsla(46.800000000000004, 93%, 47%, 1);
+  box-shadow: inset 0 0 0 1px hsla(46.800000000000004, 93%, 47%, 1), 0 0px 0px 2px hsla(28.8, 73%, 26%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-clear-yellow:enabled:hover {
-  background-color: #a16207;
+  background-color: hsla(36, 92%, 33%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-yellow:enabled:focus-visible {
-  background-color: #a16207;
+  background-color: hsla(36, 92%, 33%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-yellow:enabled:active {
-  background-color: #713f12;
+  background-color: hsla(28.8, 73%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-yellow {
-  background-color: #713f12;
+  background-color: hsla(28.8, 73%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #713f12;
-  box-shadow: inset 0 0 0 1px #713f12, 0 0px 0px 2px #fefce8;
+  border-color: hsla(28.8, 73%, 26%, 1);
+  box-shadow: inset 0 0 0 1px hsla(28.8, 73%, 26%, 1), 0 0px 0px 2px hsla(54, 92%, 95%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-clear-yellow:enabled:hover {
-  background-color: #fefce8;
+  background-color: hsla(54, 92%, 95%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-yellow:enabled:focus-visible {
-  background-color: #fefce8;
+  background-color: hsla(54, 92%, 95%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-yellow:enabled:active {
-  background-color: #fde047;
+  background-color: hsla(50.400000000000006, 98%, 64%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-lime {
-  background-color: rgba(236, 252, 203, 0.8);
-  color: rgba(74, 76, 69, 0.9);
+  background-color: hsla(79.2, 89%, 89%, 0.8);
+  color: hsla(79.2, 47%, 20%, 0.9);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-lime:enabled:hover {
-  background-color: #bef264;
-  color: #000;
+  background-color: hsla(79.2, 88%, 80%, 1);
+  color: hsla(79.2, 47%, 20%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-lime:enabled:focus-visible {
-  background-color: #bef264;
-  color: #000;
+  background-color: hsla(79.2, 88%, 80%, 1);
+  color: hsla(79.2, 47%, 20%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-lime:enabled:active {
-  background-color: #d9f99d;
-  color: rgba(65, 75, 47, 1);
+  background-color: hsla(82.8, 78%, 55.00000000000001%, 0.65);
+  color: hsla(82.8, 46%, 5%, 0.65);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-lime:disabled {
-  background-color: #ecfccb;
-  color: rgba(71, 76, 61, 1);
+  background-color: hsla(79.2, 89%, 89%, 1);
+  color: hsla(79.2, 48%, 28.999999999999996%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-light-lime {
-  background-color: rgba(54, 83, 20, 0.4);
-  color: rgba(3200, 4978, 914, 0.9);
+  background-color: hsla(86.39999999999999, 61%, 20%, 0.4);
+  color: hsla(86.39999999999999, 33%, 80%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-lime:enabled:hover {
-  background-color: #3f6212;
-  color: rgba(3200, 4978, 914, 1);
+  background-color: hsla(86.39999999999999, 69%, 23%, 1);
+  color: hsla(86.39999999999999, 37%, 83%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-lime:enabled:focus-visible {
-  background-color: #3f6212;
-  color: rgba(3200, 4978, 914, 1);
+  background-color: hsla(86.39999999999999, 69%, 23%, 1);
+  color: hsla(86.39999999999999, 37%, 83%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-lime:enabled:active {
-  background-color: #4d7c0f;
-  color: rgba(3912, 6299, 762, 1);
+  background-color: hsla(86.39999999999999, 61%, 20%, 1);
+  color: hsla(86.39999999999999, 33%, 80%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-lime:disabled {
-  background-color: #365314;
-  color: rgba(2743, 4216, 1016, 1);
+  background-color: hsla(86.39999999999999, 61%, 20%, 1);
+  color: hsla(86.39999999999999, 33%, 80%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-light-lime {
-  background-color: #f7fee7;
+  background-color: hsla(79.2, 92%, 95%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #84cc16;
-  box-shadow: inset 0 0 0 1px #84cc16, 0 0px 0px 1px #365314;
+  border-color: hsla(82.8, 81%, 44%, 1);
+  box-shadow: inset 0 0 0 1px hsla(82.8, 81%, 44%, 1), 0 0px 0px 1px hsla(86.39999999999999, 61%, 20%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-light-lime:enabled:hover {
-  background-color: #4d7c0f;
+  background-color: hsla(86.39999999999999, 78%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-lime:enabled:focus-visible {
-  background-color: #4d7c0f;
+  background-color: hsla(86.39999999999999, 78%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-lime:enabled:active {
-  background-color: #365314;
+  background-color: hsla(86.39999999999999, 61%, 20%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-lime {
-  background-color: #365314;
+  background-color: hsla(86.39999999999999, 61%, 20%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #365314;
-  box-shadow: inset 0 0 0 1px #365314, 0 0px 0px 1px #f7fee7;
+  border-color: hsla(86.39999999999999, 61%, 20%, 1);
+  box-shadow: inset 0 0 0 1px hsla(86.39999999999999, 61%, 20%, 1), 0 0px 0px 1px hsla(79.2, 92%, 95%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-light-lime:enabled:hover {
-  background-color: #f7fee7;
+  background-color: hsla(79.2, 92%, 95%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-lime:enabled:focus-visible {
-  background-color: #f7fee7;
+  background-color: hsla(79.2, 92%, 95%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-lime:enabled:active {
-  background-color: #bef264;
+  background-color: hsla(82.8, 85%, 67%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-lime {
-  background-color: #a3e635;
-  color: rgba(49, 69, 16, 1);
+  background-color: hsla(82.8, 78%, 55.00000000000001%, 1);
+  color: hsla(82.8, 41%, 0%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-lime:enabled:hover {
-  background-color: #84cc16;
-  color: #000;
+  background-color: hsla(82.8, 81%, 44%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-lime:enabled:focus-visible {
-  background-color: #84cc16;
-  color: #000;
+  background-color: hsla(82.8, 81%, 44%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-lime:enabled:active {
-  background-color: #65a30d;
-  color: rgba(40, 61, 7, 1);
+  background-color: hsla(86.39999999999999, 85%, 35%, 1);
+  color: hsla(82.8, 43%, 100%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-lime:disabled {
-  background-color: #d9f99d;
-  color: rgba(65, 75, 47, 1);
+  background-color: hsla(79.2, 88%, 80%, 1);
+  color: hsla(79.2, 47%, 20%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-lime {
-  background-color: #84cc16;
-  color: rgba(40, 61, 7, 1);
+  background-color: hsla(82.8, 81%, 44%, 1);
+  color: hsla(82.8, 43%, 100%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-lime:enabled:hover {
-  background-color: #65a30d;
-  color: #000;
+  background-color: hsla(86.39999999999999, 85%, 35%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-lime:enabled:focus-visible {
-  background-color: #65a30d;
-  color: #000;
+  background-color: hsla(86.39999999999999, 85%, 35%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-lime:enabled:active {
-  background-color: rgba(101, 163, 13, 0.75);
-  color: #000;
+  background-color: hsla(86.39999999999999, 85%, 35%, 0.7);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-lime:disabled {
-  background-color: #4d7c0f;
-  color: rgba(3912, 6299, 762, 1);
+  background-color: hsla(86.39999999999999, 78%, 27%, 1);
+  color: hsla(86.39999999999999, 41%, 87%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-lime {
-  background-color: #f7fee7;
+  background-color: hsla(79.2, 92%, 95%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #84cc16;
-  box-shadow: inset 0 0 0 1px #84cc16, 0 0px 0px 2px #365314;
+  border-color: hsla(82.8, 81%, 44%, 1);
+  box-shadow: inset 0 0 0 1px hsla(82.8, 81%, 44%, 1), 0 0px 0px 2px hsla(86.39999999999999, 61%, 20%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-lime:enabled:hover {
-  background-color: #4d7c0f;
+  background-color: hsla(86.39999999999999, 78%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-lime:enabled:focus-visible {
-  background-color: #4d7c0f;
+  background-color: hsla(86.39999999999999, 78%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-lime:enabled:active {
-  background-color: #365314;
+  background-color: hsla(86.39999999999999, 61%, 20%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-lime {
-  background-color: #365314;
+  background-color: hsla(86.39999999999999, 61%, 20%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #365314;
-  box-shadow: inset 0 0 0 1px #365314, 0 0px 0px 2px #f7fee7;
+  border-color: hsla(86.39999999999999, 61%, 20%, 1);
+  box-shadow: inset 0 0 0 1px hsla(86.39999999999999, 61%, 20%, 1), 0 0px 0px 2px hsla(79.2, 92%, 95%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-lime:enabled:hover {
-  background-color: #f7fee7;
+  background-color: hsla(79.2, 92%, 95%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-lime:enabled:focus-visible {
-  background-color: #f7fee7;
+  background-color: hsla(79.2, 92%, 95%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-lime:enabled:active {
-  background-color: #bef264;
+  background-color: hsla(82.8, 85%, 67%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-lime {
-  background-color: rgba(77, 124, 15, 0.9);
-  color: rgba(3912, 6299, 762, 0.9);
+  background-color: hsla(86.39999999999999, 78%, 27%, 0.9);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-lime:enabled:hover {
-  background-color: rgba(63, 98, 18, 0.8);
-  color: rgba(2743, 4216, 1016, 1);
+  background-color: hsla(86.39999999999999, 69%, 23%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-lime:enabled:focus-visible {
-  background-color: rgba(63, 98, 18, 0.8);
-  color: rgba(2743, 4216, 1016, 1);
+  background-color: hsla(86.39999999999999, 69%, 23%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-lime:enabled:active {
-  background-color: #3f6212;
-  color: rgba(3200, 4978, 914, 1);
+  background-color: hsla(86.39999999999999, 69%, 23%, 1);
+  color: hsla(86.39999999999999, 37%, 83%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-lime:disabled {
-  background-color: rgba(63, 98, 18, 0.6);
-  color: rgba(3200, 4978, 914, 0.6);
+  background-color: hsla(86.39999999999999, 69%, 23%, 0.6);
+  color: hsla(86.39999999999999, 37%, 83%, 0.6);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-bold-lime {
-  background-color: rgba(54, 83, 20, 0.9);
-  color: rgba(2743, 4216, 1016, 0.9);
+  background-color: hsla(86.39999999999999, 61%, 20%, 0.85);
+  color: hsla(86.39999999999999, 33%, 80%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-lime:enabled:hover {
-  background-color: rgba(54, 83, 20, 0.65);
+  background-color: hsla(86.39999999999999, 61%, 20%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-lime:enabled:focus-visible {
-  background-color: rgba(54, 83, 20, 0.65);
+  background-color: hsla(86.39999999999999, 61%, 20%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-lime:enabled:active {
-  background-color: #3f6212;
-  color: rgba(3200, 4978, 914, 1);
+  background-color: hsla(86.39999999999999, 61%, 20%, 0.45);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-lime:disabled {
-  background-color: rgba(54, 83, 20, 0.4);
-  color: rgba(2743, 4216, 1016, 0.4);
+  background-color: hsla(86.39999999999999, 61%, 20%, 0.4);
+  color: hsla(86.39999999999999, 33%, 80%, 0.4);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-bold-lime {
-  background-color: #f7fee7;
+  background-color: hsla(79.2, 92%, 95%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #84cc16;
-  box-shadow: inset 0 0 0 3px #84cc16, 0 0px 0px 3px #365314;
+  border-color: hsla(82.8, 81%, 44%, 1);
+  box-shadow: inset 0 0 0 3px hsla(82.8, 81%, 44%, 1), 0 0px 0px 3px hsla(86.39999999999999, 61%, 20%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-bold-lime:enabled:hover {
-  background-color: #4d7c0f;
+  background-color: hsla(86.39999999999999, 78%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-lime:enabled:focus-visible {
-  background-color: #4d7c0f;
+  background-color: hsla(86.39999999999999, 78%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-lime:enabled:active {
-  background-color: #365314;
+  background-color: hsla(86.39999999999999, 61%, 20%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-lime {
-  background-color: #365314;
+  background-color: hsla(86.39999999999999, 61%, 20%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #365314;
-  box-shadow: inset 0 0 0 3px #365314, 0 0px 0px 3px #f7fee7;
+  border-color: hsla(86.39999999999999, 61%, 20%, 1);
+  box-shadow: inset 0 0 0 3px hsla(86.39999999999999, 61%, 20%, 1), 0 0px 0px 3px hsla(79.2, 92%, 95%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-bold-lime:enabled:hover {
-  background-color: #f7fee7;
+  background-color: hsla(79.2, 92%, 95%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-lime:enabled:focus-visible {
-  background-color: #f7fee7;
+  background-color: hsla(79.2, 92%, 95%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-lime:enabled:active {
-  background-color: #bef264;
+  background-color: hsla(82.8, 85%, 67%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-lime {
-  background-color: rgba(247, 254, 231, 0.01);
-  color: #84cc16;
+  background-color: hsla(79.2, 92%, 95%, 0.01);
+  color: hsla(82.8, 81%, 44%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-lime:enabled:hover {
-  background-color: #84cc16;
-  color: #000;
+  background-color: hsla(82.8, 81%, 44%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-lime:enabled:focus-visible {
-  background-color: #84cc16;
-  color: #000;
+  background-color: hsla(82.8, 81%, 44%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-lime:enabled:active {
-  background-color: rgba(101, 163, 13, 0.85);
-  color: #000;
+  background-color: hsla(86.39999999999999, 85%, 35%, 0.85);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-lime:disabled {
-  background-color: rgba(247, 254, 231, 0.5);
-  color: rgba(74, 76, 69, 0.5);
+  background-color: hsla(79.2, 92%, 95%, 0.5);
+  color: hsla(79.2, 50%, 35%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .btn-outline-lime {
-  border-color: #84cc16;
+  border-color: hsla(82.8, 81%, 44%, 1);
   border-width: 1px;
   border-style: solid;
 }
 
 .dark .btn-outline-lime {
-  background-color: rgba(54, 83, 20, 0.01);
-  color: #a3e635;
+  background-color: hsla(86.39999999999999, 61%, 20%, 0.01);
+  color: hsla(82.8, 78%, 55.00000000000001%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-lime:enabled:hover {
-  background-color: #84cc16;
-  color: #000;
+  background-color: hsla(82.8, 81%, 44%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-lime:enabled:focus-visible {
-  background-color: #84cc16;
-  color: #000;
+  background-color: hsla(82.8, 81%, 44%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-lime:enabled:active {
-  background-color: rgba(163, 230, 53, 0.85);
-  color: #000;
+  background-color: hsla(82.8, 81%, 44%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-lime:disabled {
-  background-color: rgba(247, 254, 231, 0.5);
-  color: rgba(74, 76, 69, 0.5);
+  background-color: hsla(79.2, 92%, 95%, 0.5);
+  color: hsla(79.2, 50%, 35%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-outline-lime {
-  border-color: #a3e635;
+  border-color: hsla(82.8, 78%, 55.00000000000001%, 1);
 }
 
 .contrast .btn-outline-lime {
-  background-color: rgba(247, 254, 231, 0.01);
-  color: #4d7c0f;
+  background-color: hsla(79.2, 92%, 95%, 0.01);
+  color: hsla(86.39999999999999, 78%, 27%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #4d7c0f;
-  box-shadow: inset 0 0 0 3px #4d7c0f, 0 0px 0px 3px #f7fee7;
+  border-color: hsla(86.39999999999999, 78%, 27%, 1);
+  box-shadow: inset 0 0 0 3px hsla(86.39999999999999, 78%, 27%, 1), 0 0px 0px 3px hsla(79.2, 92%, 95%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-outline-lime:enabled:hover {
-  background-color: #f7fee7;
+  background-color: hsla(79.2, 92%, 95%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-lime:enabled:focus-visible {
-  background-color: #f7fee7;
+  background-color: hsla(79.2, 92%, 95%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-lime:enabled:active {
-  background-color: #bef264;
+  background-color: hsla(82.8, 85%, 67%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-lime {
-  background-color: rgba(54, 83, 20, 0.01);
-  color: #ecfccb;
+  background-color: hsla(86.39999999999999, 61%, 20%, 0.01);
+  color: hsla(79.2, 89%, 89%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #d9f99d;
-  box-shadow: inset 0 0 0 3px #4d7c0f, 0 0px 0px 3px #ecfccb;
+  border-color: hsla(79.2, 88%, 80%, 1);
+  box-shadow: inset 0 0 0 3px hsla(86.39999999999999, 78%, 27%, 1), 0 0px 0px 3px hsla(79.2, 89%, 89%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-outline-lime:enabled:hover {
-  background-color: #4d7c0f;
+  background-color: hsla(86.39999999999999, 78%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-lime:enabled:focus-visible {
-  background-color: #4d7c0f;
+  background-color: hsla(86.39999999999999, 78%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-lime:enabled:active {
-  background-color: rgba(54, 83, 20, 0.6);
+  background-color: hsla(86.39999999999999, 61%, 20%, 0.6);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-lime {
-  background-color: rgba(247, 254, 231, 0.01);
-  color: #84cc16;
+  background-color: hsla(79.2, 92%, 95%, 0.01);
+  color: hsla(82.8, 81%, 44%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-lime:enabled:hover {
-  background-color: #ecfccb;
-  color: #84cc16;
+  background-color: hsla(79.2, 89%, 89%, 1);
+  color: hsla(82.8, 81%, 44%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-lime:enabled:focus-visible {
-  background-color: #ecfccb;
-  color: #84cc16;
+  background-color: hsla(79.2, 89%, 89%, 1);
+  color: hsla(82.8, 81%, 44%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-lime:enabled:active {
-  background-color: rgba(217, 249, 157, 0.85);
-  color: #65a30d;
+  background-color: hsla(79.2, 88%, 80%, 0.85);
+  color: hsla(86.39999999999999, 85%, 35%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-lime:disabled {
-  background-color: rgba(247, 254, 231, 0.5);
-  color: rgba(74, 76, 69, 0.5);
+  background-color: hsla(79.2, 92%, 95%, 0.5);
+  color: hsla(79.2, 50%, 35%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-clear-lime {
-  background-color: rgba(54, 83, 20, 0.01);
-  color: #a3e635;
+  background-color: hsla(86.39999999999999, 61%, 20%, 0.01);
+  color: hsla(82.8, 78%, 55.00000000000001%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-lime:enabled:hover {
-  background-color: rgba(101, 163, 13, 0.35);
-  color: #65a30d;
+  background-color: hsla(82.8, 85%, 67%, 0.25);
+  color: hsla(82.8, 81%, 44%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-lime:enabled:focus-visible {
-  background-color: rgba(101, 163, 13, 0.35);
-  color: #65a30d;
+  background-color: hsla(82.8, 85%, 67%, 0.25);
+  color: hsla(82.8, 81%, 44%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-lime:enabled:active {
-  background-color: rgba(77, 124, 15, 0.4);
-  color: #84cc16;
+  background-color: hsla(82.8, 78%, 55.00000000000001%, 0.2);
+  color: hsla(86.39999999999999, 85%, 35%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-lime:disabled {
-  background-color: rgba(77, 124, 15, 7);
-  color: rgba(3912, 6299, 762, 7);
+  background-color: hsla(86.39999999999999, 78%, 27%, 0.07);
+  color: hsla(86.39999999999999, 78%, 27%, 0.07);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-clear-lime {
-  background-color: rgba(247, 254, 231, 0.01);
-  color: #4d7c0f;
+  background-color: hsla(79.2, 92%, 95%, 0.01);
+  color: hsla(86.39999999999999, 78%, 27%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #84cc16;
-  box-shadow: inset 0 0 0 1px #84cc16, 0 0px 0px 2px #365314;
+  border-color: hsla(82.8, 81%, 44%, 1);
+  box-shadow: inset 0 0 0 1px hsla(82.8, 81%, 44%, 1), 0 0px 0px 2px hsla(86.39999999999999, 61%, 20%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-clear-lime:enabled:hover {
-  background-color: #4d7c0f;
+  background-color: hsla(86.39999999999999, 78%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-lime:enabled:focus-visible {
-  background-color: #4d7c0f;
+  background-color: hsla(86.39999999999999, 78%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-lime:enabled:active {
-  background-color: #365314;
+  background-color: hsla(86.39999999999999, 61%, 20%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-lime {
-  background-color: #365314;
+  background-color: hsla(86.39999999999999, 61%, 20%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #365314;
-  box-shadow: inset 0 0 0 1px #365314, 0 0px 0px 2px #f7fee7;
+  border-color: hsla(86.39999999999999, 61%, 20%, 1);
+  box-shadow: inset 0 0 0 1px hsla(86.39999999999999, 61%, 20%, 1), 0 0px 0px 2px hsla(79.2, 92%, 95%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-clear-lime:enabled:hover {
-  background-color: #f7fee7;
+  background-color: hsla(79.2, 92%, 95%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-lime:enabled:focus-visible {
-  background-color: #f7fee7;
+  background-color: hsla(79.2, 92%, 95%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-lime:enabled:active {
-  background-color: #bef264;
+  background-color: hsla(82.8, 85%, 67%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-green {
-  background-color: rgba(220, 252, 231, 0.8);
-  color: rgba(72, 76, 73, 0.9);
+  background-color: hsla(140.4, 84%, 93%, 0.8);
+  color: hsla(140.4, 42%, 25%, 0.9);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-green:enabled:hover {
-  background-color: #86efac;
-  color: #000;
+  background-color: hsla(140.4, 79%, 85%, 1);
+  color: hsla(140.4, 42%, 25%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-green:enabled:focus-visible {
-  background-color: #86efac;
-  color: #000;
+  background-color: hsla(140.4, 79%, 85%, 1);
+  color: hsla(140.4, 42%, 25%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-green:enabled:active {
-  background-color: #bbf7d0;
-  color: rgba(56, 74, 62, 1);
+  background-color: hsla(140.4, 69%, 57.99999999999999%, 0.65);
+  color: hsla(140.4, 41%, 8%, 0.65);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-green:disabled {
-  background-color: #dcfce7;
-  color: rgba(66, 76, 69, 1);
+  background-color: hsla(140.4, 84%, 93%, 1);
+  color: hsla(140.4, 45%, 33%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-light-green {
-  background-color: rgba(20, 83, 45, 0.4);
-  color: rgba(1118, 5131, 2642, 0.9);
+  background-color: hsla(144, 61%, 20%, 0.4);
+  color: hsla(144, 33%, 80%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-green:enabled:hover {
-  background-color: #166534;
-  color: rgba(1118, 5131, 2642, 1);
+  background-color: hsla(144, 64%, 24%, 1);
+  color: hsla(144, 34%, 84%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-green:enabled:focus-visible {
-  background-color: #166534;
-  color: rgba(1118, 5131, 2642, 1);
+  background-color: hsla(144, 64%, 24%, 1);
+  color: hsla(144, 34%, 84%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-green:enabled:active {
-  background-color: #15803d;
-  color: rgba(1067, 6502, 3099, 1);
+  background-color: hsla(144, 61%, 20%, 1);
+  color: hsla(144, 33%, 80%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-green:disabled {
-  background-color: #14532d;
-  color: rgba(1016, 4216, 2286, 1);
+  background-color: hsla(144, 61%, 20%, 1);
+  color: hsla(144, 33%, 80%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-light-green {
-  background-color: #f0fdf4;
+  background-color: hsla(136.8, 76%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #22c55e;
-  box-shadow: inset 0 0 0 1px #22c55e, 0 0px 0px 1px #14532d;
+  border-color: hsla(140.4, 71%, 45%, 1);
+  box-shadow: inset 0 0 0 1px hsla(140.4, 71%, 45%, 1), 0 0px 0px 1px hsla(144, 61%, 20%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-light-green:enabled:hover {
-  background-color: #15803d;
+  background-color: hsla(144, 72%, 28.999999999999996%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-green:enabled:focus-visible {
-  background-color: #15803d;
+  background-color: hsla(144, 72%, 28.999999999999996%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-green:enabled:active {
-  background-color: #14532d;
+  background-color: hsla(144, 61%, 20%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-green {
-  background-color: #14532d;
+  background-color: hsla(144, 61%, 20%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #14532d;
-  box-shadow: inset 0 0 0 1px #14532d, 0 0px 0px 1px #f0fdf4;
+  border-color: hsla(144, 61%, 20%, 1);
+  box-shadow: inset 0 0 0 1px hsla(144, 61%, 20%, 1), 0 0px 0px 1px hsla(136.8, 76%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-light-green:enabled:hover {
-  background-color: #f0fdf4;
+  background-color: hsla(136.8, 76%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-green:enabled:focus-visible {
-  background-color: #f0fdf4;
+  background-color: hsla(136.8, 76%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-green:enabled:active {
-  background-color: #86efac;
+  background-color: hsla(140.4, 77%, 73%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-green {
-  background-color: #4ade80;
-  color: rgba(22, 67, 38, 1);
+  background-color: hsla(140.4, 69%, 57.99999999999999%, 1);
+  color: hsla(140.4, 37%, 0%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-green:enabled:hover {
-  background-color: #22c55e;
-  color: #000;
+  background-color: hsla(140.4, 71%, 45%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-green:enabled:focus-visible {
-  background-color: #22c55e;
-  color: #000;
+  background-color: hsla(140.4, 71%, 45%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-green:enabled:active {
-  background-color: #16a34a;
-  color: rgba(10, 59, 28, 1);
+  background-color: hsla(140.4, 76%, 36%, 1);
+  color: hsla(140.4, 38%, 100%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-green:disabled {
-  background-color: #bbf7d0;
-  color: rgba(56, 74, 62, 1);
+  background-color: hsla(140.4, 79%, 85%, 1);
+  color: hsla(140.4, 42%, 25%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-green {
-  background-color: #22c55e;
-  color: rgba(10, 59, 28, 1);
+  background-color: hsla(140.4, 71%, 45%, 1);
+  color: hsla(140.4, 38%, 100%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-green:enabled:hover {
-  background-color: #16a34a;
+  background-color: hsla(140.4, 76%, 36%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-green:enabled:focus-visible {
-  background-color: #16a34a;
+  background-color: hsla(140.4, 76%, 36%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-green:enabled:active {
-  background-color: rgba(22, 163, 74, 0.75);
+  background-color: hsla(140.4, 76%, 36%, 0.7);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-green:disabled {
-  background-color: #15803d;
-  color: rgba(1067, 6502, 3099, 1);
+  background-color: hsla(144, 72%, 28.999999999999996%, 1);
+  color: hsla(144, 39%, 89%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-green {
-  background-color: #f0fdf4;
+  background-color: hsla(136.8, 76%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #22c55e;
-  box-shadow: inset 0 0 0 1px #22c55e, 0 0px 0px 2px #14532d;
+  border-color: hsla(140.4, 71%, 45%, 1);
+  box-shadow: inset 0 0 0 1px hsla(140.4, 71%, 45%, 1), 0 0px 0px 2px hsla(144, 61%, 20%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-green:enabled:hover {
-  background-color: #15803d;
+  background-color: hsla(144, 72%, 28.999999999999996%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-green:enabled:focus-visible {
-  background-color: #15803d;
+  background-color: hsla(144, 72%, 28.999999999999996%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-green:enabled:active {
-  background-color: #14532d;
+  background-color: hsla(144, 61%, 20%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-green {
-  background-color: #14532d;
+  background-color: hsla(144, 61%, 20%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #14532d;
-  box-shadow: inset 0 0 0 1px #14532d, 0 0px 0px 2px #f0fdf4;
+  border-color: hsla(144, 61%, 20%, 1);
+  box-shadow: inset 0 0 0 1px hsla(144, 61%, 20%, 1), 0 0px 0px 2px hsla(136.8, 76%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-green:enabled:hover {
-  background-color: #f0fdf4;
+  background-color: hsla(136.8, 76%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-green:enabled:focus-visible {
-  background-color: #f0fdf4;
+  background-color: hsla(136.8, 76%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-green:enabled:active {
-  background-color: #86efac;
+  background-color: hsla(140.4, 77%, 73%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-green {
-  background-color: rgba(21, 128, 61, 0.9);
-  color: rgba(1067, 6502, 3099, 0.9);
+  background-color: hsla(144, 72%, 28.999999999999996%, 0.9);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-green:enabled:hover {
-  background-color: rgba(22, 101, 52, 0.8);
-  color: rgba(1016, 4216, 2286, 1);
+  background-color: hsla(144, 64%, 24%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-green:enabled:focus-visible {
-  background-color: rgba(22, 101, 52, 0.8);
-  color: rgba(1016, 4216, 2286, 1);
+  background-color: hsla(144, 64%, 24%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-green:enabled:active {
-  background-color: #166534;
-  color: rgba(1118, 5131, 2642, 1);
+  background-color: hsla(144, 64%, 24%, 1);
+  color: hsla(144, 34%, 84%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-green:disabled {
-  background-color: rgba(22, 101, 52, 0.6);
-  color: rgba(1118, 5131, 2642, 0.6);
+  background-color: hsla(144, 64%, 24%, 0.6);
+  color: hsla(144, 34%, 84%, 0.6);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-bold-green {
-  background-color: rgba(20, 83, 45, 0.9);
-  color: rgba(1016, 4216, 2286, 0.9);
+  background-color: hsla(144, 61%, 20%, 0.85);
+  color: hsla(144, 33%, 80%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-green:enabled:hover {
-  background-color: rgba(20, 83, 45, 0.65);
+  background-color: hsla(144, 61%, 20%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-green:enabled:focus-visible {
-  background-color: rgba(20, 83, 45, 0.65);
+  background-color: hsla(144, 61%, 20%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-green:enabled:active {
-  background-color: #166534;
-  color: rgba(1118, 5131, 2642, 1);
+  background-color: hsla(144, 61%, 20%, 0.45);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-green:disabled {
-  background-color: rgba(20, 83, 45, 0.4);
-  color: rgba(1016, 4216, 2286, 0.4);
+  background-color: hsla(144, 61%, 20%, 0.4);
+  color: hsla(144, 33%, 80%, 0.4);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-bold-green {
-  background-color: #f0fdf4;
+  background-color: hsla(136.8, 76%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #22c55e;
-  box-shadow: inset 0 0 0 3px #22c55e, 0 0px 0px 3px #14532d;
+  border-color: hsla(140.4, 71%, 45%, 1);
+  box-shadow: inset 0 0 0 3px hsla(140.4, 71%, 45%, 1), 0 0px 0px 3px hsla(144, 61%, 20%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-bold-green:enabled:hover {
-  background-color: #15803d;
+  background-color: hsla(144, 72%, 28.999999999999996%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-green:enabled:focus-visible {
-  background-color: #15803d;
+  background-color: hsla(144, 72%, 28.999999999999996%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-green:enabled:active {
-  background-color: #14532d;
+  background-color: hsla(144, 61%, 20%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-green {
-  background-color: #14532d;
+  background-color: hsla(144, 61%, 20%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #14532d;
-  box-shadow: inset 0 0 0 3px #14532d, 0 0px 0px 3px #f0fdf4;
+  border-color: hsla(144, 61%, 20%, 1);
+  box-shadow: inset 0 0 0 3px hsla(144, 61%, 20%, 1), 0 0px 0px 3px hsla(136.8, 76%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-bold-green:enabled:hover {
-  background-color: #f0fdf4;
+  background-color: hsla(136.8, 76%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-green:enabled:focus-visible {
-  background-color: #f0fdf4;
+  background-color: hsla(136.8, 76%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-green:enabled:active {
-  background-color: #86efac;
+  background-color: hsla(140.4, 77%, 73%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-green {
-  background-color: rgba(240, 253, 244, 0.01);
-  color: #22c55e;
+  background-color: hsla(136.8, 76%, 97%, 0.01);
+  color: hsla(140.4, 71%, 45%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-green:enabled:hover {
-  background-color: #22c55e;
-  color: #000;
+  background-color: hsla(140.4, 71%, 45%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-green:enabled:focus-visible {
-  background-color: #22c55e;
-  color: #000;
+  background-color: hsla(140.4, 71%, 45%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-green:enabled:active {
-  background-color: rgba(22, 163, 74, 0.85);
-  color: #000;
+  background-color: hsla(140.4, 76%, 36%, 0.85);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-green:disabled {
-  background-color: rgba(240, 253, 244, 0.5);
-  color: rgba(72, 76, 73, 0.5);
+  background-color: hsla(136.8, 76%, 97%, 0.5);
+  color: hsla(136.8, 41%, 37%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .btn-outline-green {
-  border-color: #22c55e;
+  border-color: hsla(140.4, 71%, 45%, 1);
   border-width: 1px;
   border-style: solid;
 }
 
 .dark .btn-outline-green {
-  background-color: rgba(20, 83, 45, 0.01);
-  color: #4ade80;
+  background-color: hsla(144, 61%, 20%, 0.01);
+  color: hsla(140.4, 69%, 57.99999999999999%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-green:enabled:hover {
-  background-color: #22c55e;
-  color: #000;
+  background-color: hsla(140.4, 71%, 45%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-green:enabled:focus-visible {
-  background-color: #22c55e;
-  color: #000;
+  background-color: hsla(140.4, 71%, 45%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-green:enabled:active {
-  background-color: rgba(74, 222, 128, 0.85);
-  color: #000;
+  background-color: hsla(140.4, 71%, 45%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-green:disabled {
-  background-color: rgba(240, 253, 244, 0.5);
-  color: rgba(72, 76, 73, 0.5);
+  background-color: hsla(136.8, 76%, 97%, 0.5);
+  color: hsla(136.8, 41%, 37%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-outline-green {
-  border-color: #4ade80;
+  border-color: hsla(140.4, 69%, 57.99999999999999%, 1);
 }
 
 .contrast .btn-outline-green {
-  background-color: rgba(240, 253, 244, 0.01);
-  color: #15803d;
+  background-color: hsla(136.8, 76%, 97%, 0.01);
+  color: hsla(144, 72%, 28.999999999999996%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #15803d;
-  box-shadow: inset 0 0 0 3px #15803d, 0 0px 0px 3px #f0fdf4;
+  border-color: hsla(144, 72%, 28.999999999999996%, 1);
+  box-shadow: inset 0 0 0 3px hsla(144, 72%, 28.999999999999996%, 1), 0 0px 0px 3px hsla(136.8, 76%, 97%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-outline-green:enabled:hover {
-  background-color: #f0fdf4;
+  background-color: hsla(136.8, 76%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-green:enabled:focus-visible {
-  background-color: #f0fdf4;
+  background-color: hsla(136.8, 76%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-green:enabled:active {
-  background-color: #86efac;
+  background-color: hsla(140.4, 77%, 73%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-green {
-  background-color: rgba(20, 83, 45, 0.01);
-  color: #dcfce7;
+  background-color: hsla(144, 61%, 20%, 0.01);
+  color: hsla(140.4, 84%, 93%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #bbf7d0;
-  box-shadow: inset 0 0 0 3px #15803d, 0 0px 0px 3px #dcfce7;
+  border-color: hsla(140.4, 79%, 85%, 1);
+  box-shadow: inset 0 0 0 3px hsla(144, 72%, 28.999999999999996%, 1), 0 0px 0px 3px hsla(140.4, 84%, 93%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-outline-green:enabled:hover {
-  background-color: #15803d;
+  background-color: hsla(144, 72%, 28.999999999999996%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-green:enabled:focus-visible {
-  background-color: #15803d;
+  background-color: hsla(144, 72%, 28.999999999999996%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-green:enabled:active {
-  background-color: rgba(20, 83, 45, 0.6);
+  background-color: hsla(144, 61%, 20%, 0.6);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-green {
-  background-color: rgba(240, 253, 244, 0.01);
-  color: #22c55e;
+  background-color: hsla(136.8, 76%, 97%, 0.01);
+  color: hsla(140.4, 71%, 45%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-green:enabled:hover {
-  background-color: #dcfce7;
-  color: #22c55e;
+  background-color: hsla(140.4, 84%, 93%, 1);
+  color: hsla(140.4, 71%, 45%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-green:enabled:focus-visible {
-  background-color: #dcfce7;
-  color: #22c55e;
+  background-color: hsla(140.4, 84%, 93%, 1);
+  color: hsla(140.4, 71%, 45%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-green:enabled:active {
-  background-color: rgba(187, 247, 208, 0.85);
-  color: #16a34a;
+  background-color: hsla(140.4, 79%, 85%, 0.85);
+  color: hsla(140.4, 76%, 36%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-green:disabled {
-  background-color: rgba(240, 253, 244, 0.5);
-  color: rgba(72, 76, 73, 0.5);
+  background-color: hsla(136.8, 76%, 97%, 0.5);
+  color: hsla(136.8, 41%, 37%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-clear-green {
-  background-color: rgba(20, 83, 45, 0.01);
-  color: #4ade80;
+  background-color: hsla(144, 61%, 20%, 0.01);
+  color: hsla(140.4, 69%, 57.99999999999999%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-green:enabled:hover {
-  background-color: rgba(22, 163, 74, 0.35);
-  color: #16a34a;
+  background-color: hsla(140.4, 77%, 73%, 0.25);
+  color: hsla(140.4, 71%, 45%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-green:enabled:focus-visible {
-  background-color: rgba(22, 163, 74, 0.35);
-  color: #16a34a;
+  background-color: hsla(140.4, 77%, 73%, 0.25);
+  color: hsla(140.4, 71%, 45%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-green:enabled:active {
-  background-color: rgba(21, 128, 61, 0.4);
-  color: #22c55e;
+  background-color: hsla(140.4, 69%, 57.99999999999999%, 0.2);
+  color: hsla(140.4, 76%, 36%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-green:disabled {
-  background-color: rgba(21, 128, 61, 7);
-  color: rgba(1067, 6502, 3099, 7);
+  background-color: hsla(144, 72%, 28.999999999999996%, 0.07);
+  color: hsla(144, 72%, 28.999999999999996%, 0.07);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-clear-green {
-  background-color: rgba(240, 253, 244, 0.01);
-  color: #15803d;
+  background-color: hsla(136.8, 76%, 97%, 0.01);
+  color: hsla(144, 72%, 28.999999999999996%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #22c55e;
-  box-shadow: inset 0 0 0 1px #22c55e, 0 0px 0px 2px #14532d;
+  border-color: hsla(140.4, 71%, 45%, 1);
+  box-shadow: inset 0 0 0 1px hsla(140.4, 71%, 45%, 1), 0 0px 0px 2px hsla(144, 61%, 20%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-clear-green:enabled:hover {
-  background-color: #15803d;
+  background-color: hsla(144, 72%, 28.999999999999996%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-green:enabled:focus-visible {
-  background-color: #15803d;
+  background-color: hsla(144, 72%, 28.999999999999996%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-green:enabled:active {
-  background-color: #14532d;
+  background-color: hsla(144, 61%, 20%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-green {
-  background-color: #14532d;
+  background-color: hsla(144, 61%, 20%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #14532d;
-  box-shadow: inset 0 0 0 1px #14532d, 0 0px 0px 2px #f0fdf4;
+  border-color: hsla(144, 61%, 20%, 1);
+  box-shadow: inset 0 0 0 1px hsla(144, 61%, 20%, 1), 0 0px 0px 2px hsla(136.8, 76%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-clear-green:enabled:hover {
-  background-color: #f0fdf4;
+  background-color: hsla(136.8, 76%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-green:enabled:focus-visible {
-  background-color: #f0fdf4;
+  background-color: hsla(136.8, 76%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-green:enabled:active {
-  background-color: #86efac;
+  background-color: hsla(140.4, 77%, 73%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-emerald {
-  background-color: rgba(209, 250, 229, 0.8);
-  color: rgba(71, 76, 74, 0.9);
+  background-color: hsla(147.6, 80%, 90%, 0.8);
+  color: hsla(151.2, 41%, 20%, 0.9);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-emerald:enabled:hover {
-  background-color: #6ee7b7;
-  color: #000;
+  background-color: hsla(151.2, 76%, 80%, 1);
+  color: hsla(151.2, 41%, 20%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-emerald:enabled:focus-visible {
-  background-color: #6ee7b7;
-  color: #000;
+  background-color: hsla(151.2, 76%, 80%, 1);
+  color: hsla(151.2, 41%, 20%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-emerald:enabled:active {
-  background-color: #a7f3d0;
-  color: rgba(50, 73, 62, 1);
+  background-color: hsla(158.4, 64%, 52%, 0.65);
+  color: hsla(158.4, 38%, 2%, 0.65);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-emerald:disabled {
-  background-color: #d1fae5;
-  color: rgba(63, 75, 69, 1);
+  background-color: hsla(147.6, 80%, 90%, 1);
+  color: hsla(147.6, 43%, 30%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-light-emerald {
-  background-color: rgba(6, 78, 59, 0.4);
-  color: rgba(305, 4826, 3556, 0.9);
+  background-color: hsla(165.6, 86%, 16%, 0.4);
+  color: hsla(165.6, 45%, 76%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-emerald:enabled:hover {
-  background-color: #065f46;
-  color: rgba(305, 4826, 3556, 1);
+  background-color: hsla(162, 88%, 20%, 1);
+  color: hsla(162, 47%, 80%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-emerald:enabled:focus-visible {
-  background-color: #065f46;
-  color: rgba(305, 4826, 3556, 1);
+  background-color: hsla(162, 88%, 20%, 1);
+  color: hsla(162, 47%, 80%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-emerald:enabled:active {
-  background-color: #047857;
-  color: rgba(203, 6096, 4420, 1);
+  background-color: hsla(165.6, 86%, 16%, 1);
+  color: hsla(165.6, 45%, 76%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-emerald:disabled {
-  background-color: #064e3b;
-  color: rgba(305, 3962, 2997, 1);
+  background-color: hsla(165.6, 86%, 16%, 1);
+  color: hsla(165.6, 45%, 76%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-light-emerald {
-  background-color: #ecfdf5;
+  background-color: hsla(151.2, 81%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #10b981;
-  box-shadow: inset 0 0 0 1px #10b981, 0 0px 0px 1px #064e3b;
+  border-color: hsla(158.4, 84%, 39%, 1);
+  box-shadow: inset 0 0 0 1px hsla(158.4, 84%, 39%, 1), 0 0px 0px 1px hsla(165.6, 86%, 16%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-light-emerald:enabled:hover {
-  background-color: #047857;
+  background-color: hsla(162, 94%, 24%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-emerald:enabled:focus-visible {
-  background-color: #047857;
+  background-color: hsla(162, 94%, 24%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-emerald:enabled:active {
-  background-color: #064e3b;
+  background-color: hsla(165.6, 86%, 16%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-emerald {
-  background-color: #064e3b;
+  background-color: hsla(165.6, 86%, 16%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #064e3b;
-  box-shadow: inset 0 0 0 1px #064e3b, 0 0px 0px 1px #ecfdf5;
+  border-color: hsla(165.6, 86%, 16%, 1);
+  box-shadow: inset 0 0 0 1px hsla(165.6, 86%, 16%, 1), 0 0px 0px 1px hsla(151.2, 81%, 96%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-light-emerald:enabled:hover {
-  background-color: #ecfdf5;
+  background-color: hsla(151.2, 81%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-emerald:enabled:focus-visible {
-  background-color: #ecfdf5;
+  background-color: hsla(151.2, 81%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-emerald:enabled:active {
-  background-color: #6ee7b7;
+  background-color: hsla(154.8, 72%, 67%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-emerald {
-  background-color: #34d399;
-  color: rgba(16, 63, 46, 1);
+  background-color: hsla(158.4, 64%, 52%, 1);
+  color: hsla(158.4, 38%, 2%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-emerald:enabled:hover {
-  background-color: #10b981;
-  color: #000;
+  background-color: hsla(158.4, 84%, 39%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-emerald:enabled:focus-visible {
-  background-color: #10b981;
-  color: #000;
+  background-color: hsla(158.4, 84%, 39%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-emerald:enabled:active {
-  background-color: #059669;
-  color: rgba(5, 56, 39, 1);
+  background-color: hsla(162, 94%, 30%, 1);
+  color: hsla(158.4, 45%, 99%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-emerald:disabled {
-  background-color: #a7f3d0;
-  color: rgba(50, 73, 62, 1);
+  background-color: hsla(151.2, 76%, 80%, 1);
+  color: hsla(151.2, 41%, 20%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-emerald {
-  background-color: #10b981;
-  color: rgba(5, 56, 39, 1);
+  background-color: hsla(158.4, 84%, 39%, 1);
+  color: hsla(158.4, 45%, 99%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-emerald:enabled:hover {
-  background-color: #059669;
+  background-color: hsla(162, 94%, 30%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-emerald:enabled:focus-visible {
-  background-color: #059669;
+  background-color: hsla(162, 94%, 30%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-emerald:enabled:active {
-  background-color: rgba(5, 150, 105, 0.75);
+  background-color: hsla(162, 94%, 30%, 0.7);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-emerald:disabled {
-  background-color: #047857;
-  color: rgba(203, 6096, 4420, 1);
+  background-color: hsla(162, 94%, 24%, 1);
+  color: hsla(162, 50%, 84%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-emerald {
-  background-color: #ecfdf5;
+  background-color: hsla(151.2, 81%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #10b981;
-  box-shadow: inset 0 0 0 1px #10b981, 0 0px 0px 2px #064e3b;
+  border-color: hsla(158.4, 84%, 39%, 1);
+  box-shadow: inset 0 0 0 1px hsla(158.4, 84%, 39%, 1), 0 0px 0px 2px hsla(165.6, 86%, 16%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-emerald:enabled:hover {
-  background-color: #047857;
+  background-color: hsla(162, 94%, 24%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-emerald:enabled:focus-visible {
-  background-color: #047857;
+  background-color: hsla(162, 94%, 24%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-emerald:enabled:active {
-  background-color: #064e3b;
+  background-color: hsla(165.6, 86%, 16%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-emerald {
-  background-color: #064e3b;
+  background-color: hsla(165.6, 86%, 16%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #064e3b;
-  box-shadow: inset 0 0 0 1px #064e3b, 0 0px 0px 2px #ecfdf5;
+  border-color: hsla(165.6, 86%, 16%, 1);
+  box-shadow: inset 0 0 0 1px hsla(165.6, 86%, 16%, 1), 0 0px 0px 2px hsla(151.2, 81%, 96%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-emerald:enabled:hover {
-  background-color: #ecfdf5;
+  background-color: hsla(151.2, 81%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-emerald:enabled:focus-visible {
-  background-color: #ecfdf5;
+  background-color: hsla(151.2, 81%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-emerald:enabled:active {
-  background-color: #6ee7b7;
+  background-color: hsla(154.8, 72%, 67%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-emerald {
-  background-color: rgba(4, 120, 87, 0.9);
-  color: rgba(203, 6096, 4420, 0.9);
+  background-color: hsla(162, 94%, 24%, 0.9);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-emerald:enabled:hover {
-  background-color: rgba(6, 95, 70, 0.8);
-  color: rgba(305, 3962, 2997, 1);
+  background-color: hsla(162, 88%, 20%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-emerald:enabled:focus-visible {
-  background-color: rgba(6, 95, 70, 0.8);
-  color: rgba(305, 3962, 2997, 1);
+  background-color: hsla(162, 88%, 20%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-emerald:enabled:active {
-  background-color: #065f46;
-  color: rgba(305, 4826, 3556, 1);
+  background-color: hsla(162, 88%, 20%, 1);
+  color: hsla(162, 47%, 80%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-emerald:disabled {
-  background-color: rgba(6, 95, 70, 0.6);
-  color: rgba(305, 4826, 3556, 0.6);
+  background-color: hsla(162, 88%, 20%, 0.6);
+  color: hsla(162, 47%, 80%, 0.6);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-bold-emerald {
-  background-color: rgba(6, 78, 59, 0.9);
-  color: rgba(305, 3962, 2997, 0.9);
+  background-color: hsla(165.6, 86%, 16%, 0.85);
+  color: hsla(165.6, 45%, 76%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-emerald:enabled:hover {
-  background-color: rgba(6, 78, 59, 0.65);
+  background-color: hsla(165.6, 86%, 16%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-emerald:enabled:focus-visible {
-  background-color: rgba(6, 78, 59, 0.65);
+  background-color: hsla(165.6, 86%, 16%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-emerald:enabled:active {
-  background-color: #065f46;
-  color: rgba(305, 4826, 3556, 1);
+  background-color: hsla(165.6, 86%, 16%, 0.45);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-emerald:disabled {
-  background-color: rgba(6, 78, 59, 0.4);
-  color: rgba(305, 3962, 2997, 0.4);
+  background-color: hsla(165.6, 86%, 16%, 0.4);
+  color: hsla(165.6, 45%, 76%, 0.4);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-bold-emerald {
-  background-color: #ecfdf5;
+  background-color: hsla(151.2, 81%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #10b981;
-  box-shadow: inset 0 0 0 3px #10b981, 0 0px 0px 3px #064e3b;
+  border-color: hsla(158.4, 84%, 39%, 1);
+  box-shadow: inset 0 0 0 3px hsla(158.4, 84%, 39%, 1), 0 0px 0px 3px hsla(165.6, 86%, 16%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-bold-emerald:enabled:hover {
-  background-color: #047857;
+  background-color: hsla(162, 94%, 24%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-emerald:enabled:focus-visible {
-  background-color: #047857;
+  background-color: hsla(162, 94%, 24%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-emerald:enabled:active {
-  background-color: #064e3b;
+  background-color: hsla(165.6, 86%, 16%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-emerald {
-  background-color: #064e3b;
+  background-color: hsla(165.6, 86%, 16%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #064e3b;
-  box-shadow: inset 0 0 0 3px #064e3b, 0 0px 0px 3px #ecfdf5;
+  border-color: hsla(165.6, 86%, 16%, 1);
+  box-shadow: inset 0 0 0 3px hsla(165.6, 86%, 16%, 1), 0 0px 0px 3px hsla(151.2, 81%, 96%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-bold-emerald:enabled:hover {
-  background-color: #ecfdf5;
+  background-color: hsla(151.2, 81%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-emerald:enabled:focus-visible {
-  background-color: #ecfdf5;
+  background-color: hsla(151.2, 81%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-emerald:enabled:active {
-  background-color: #6ee7b7;
+  background-color: hsla(154.8, 72%, 67%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-emerald {
-  background-color: rgba(236, 253, 245, 0.01);
-  color: #10b981;
+  background-color: hsla(151.2, 81%, 96%, 0.01);
+  color: hsla(158.4, 84%, 39%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-emerald:enabled:hover {
-  background-color: #10b981;
-  color: #000;
+  background-color: hsla(158.4, 84%, 39%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-emerald:enabled:focus-visible {
-  background-color: #10b981;
-  color: #000;
+  background-color: hsla(158.4, 84%, 39%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-emerald:enabled:active {
-  background-color: rgba(5, 150, 105, 0.85);
-  color: #000;
+  background-color: hsla(162, 94%, 30%, 0.85);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-emerald:disabled {
-  background-color: rgba(236, 253, 245, 0.5);
-  color: rgba(71, 76, 74, 0.5);
+  background-color: hsla(151.2, 81%, 96%, 0.5);
+  color: hsla(151.2, 43%, 36%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .btn-outline-emerald {
-  border-color: #10b981;
+  border-color: hsla(158.4, 84%, 39%, 1);
   border-width: 1px;
   border-style: solid;
 }
 
 .dark .btn-outline-emerald {
-  background-color: rgba(6, 78, 59, 0.01);
-  color: #34d399;
+  background-color: hsla(165.6, 86%, 16%, 0.01);
+  color: hsla(158.4, 64%, 52%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-emerald:enabled:hover {
-  background-color: #10b981;
-  color: #000;
+  background-color: hsla(158.4, 84%, 39%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-emerald:enabled:focus-visible {
-  background-color: #10b981;
-  color: #000;
+  background-color: hsla(158.4, 84%, 39%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-emerald:enabled:active {
-  background-color: rgba(52, 211, 153, 0.85);
-  color: #000;
+  background-color: hsla(158.4, 84%, 39%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-emerald:disabled {
-  background-color: rgba(236, 253, 245, 0.5);
-  color: rgba(71, 76, 74, 0.5);
+  background-color: hsla(151.2, 81%, 96%, 0.5);
+  color: hsla(151.2, 43%, 36%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-outline-emerald {
-  border-color: #34d399;
+  border-color: hsla(158.4, 64%, 52%, 1);
 }
 
 .contrast .btn-outline-emerald {
-  background-color: rgba(236, 253, 245, 0.01);
-  color: #047857;
+  background-color: hsla(151.2, 81%, 96%, 0.01);
+  color: hsla(162, 94%, 24%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #047857;
-  box-shadow: inset 0 0 0 3px #047857, 0 0px 0px 3px #ecfdf5;
+  border-color: hsla(162, 94%, 24%, 1);
+  box-shadow: inset 0 0 0 3px hsla(162, 94%, 24%, 1), 0 0px 0px 3px hsla(151.2, 81%, 96%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-outline-emerald:enabled:hover {
-  background-color: #ecfdf5;
+  background-color: hsla(151.2, 81%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-emerald:enabled:focus-visible {
-  background-color: #ecfdf5;
+  background-color: hsla(151.2, 81%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-emerald:enabled:active {
-  background-color: #6ee7b7;
+  background-color: hsla(154.8, 72%, 67%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-emerald {
-  background-color: rgba(6, 78, 59, 0.01);
-  color: #d1fae5;
+  background-color: hsla(165.6, 86%, 16%, 0.01);
+  color: hsla(147.6, 80%, 90%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #a7f3d0;
-  box-shadow: inset 0 0 0 3px #047857, 0 0px 0px 3px #d1fae5;
+  border-color: hsla(151.2, 76%, 80%, 1);
+  box-shadow: inset 0 0 0 3px hsla(162, 94%, 24%, 1), 0 0px 0px 3px hsla(147.6, 80%, 90%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-outline-emerald:enabled:hover {
-  background-color: #047857;
+  background-color: hsla(162, 94%, 24%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-emerald:enabled:focus-visible {
-  background-color: #047857;
+  background-color: hsla(162, 94%, 24%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-emerald:enabled:active {
-  background-color: rgba(6, 78, 59, 0.6);
+  background-color: hsla(165.6, 86%, 16%, 0.6);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-emerald {
-  background-color: rgba(236, 253, 245, 0.01);
-  color: #10b981;
+  background-color: hsla(151.2, 81%, 96%, 0.01);
+  color: hsla(158.4, 84%, 39%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-emerald:enabled:hover {
-  background-color: #d1fae5;
-  color: #10b981;
+  background-color: hsla(147.6, 80%, 90%, 1);
+  color: hsla(158.4, 84%, 39%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-emerald:enabled:focus-visible {
-  background-color: #d1fae5;
-  color: #10b981;
+  background-color: hsla(147.6, 80%, 90%, 1);
+  color: hsla(158.4, 84%, 39%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-emerald:enabled:active {
-  background-color: rgba(167, 243, 208, 0.85);
-  color: #059669;
+  background-color: hsla(151.2, 76%, 80%, 0.85);
+  color: hsla(162, 94%, 30%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-emerald:disabled {
-  background-color: rgba(236, 253, 245, 0.5);
-  color: rgba(71, 76, 74, 0.5);
+  background-color: hsla(151.2, 81%, 96%, 0.5);
+  color: hsla(151.2, 43%, 36%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-clear-emerald {
-  background-color: rgba(6, 78, 59, 0.01);
-  color: #34d399;
+  background-color: hsla(165.6, 86%, 16%, 0.01);
+  color: hsla(158.4, 64%, 52%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-emerald:enabled:hover {
-  background-color: rgba(5, 150, 105, 0.35);
-  color: #059669;
+  background-color: hsla(154.8, 72%, 67%, 0.25);
+  color: hsla(158.4, 84%, 39%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-emerald:enabled:focus-visible {
-  background-color: rgba(5, 150, 105, 0.35);
-  color: #059669;
+  background-color: hsla(154.8, 72%, 67%, 0.25);
+  color: hsla(158.4, 84%, 39%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-emerald:enabled:active {
-  background-color: rgba(4, 120, 87, 0.4);
-  color: #10b981;
+  background-color: hsla(158.4, 64%, 52%, 0.2);
+  color: hsla(162, 94%, 30%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-emerald:disabled {
-  background-color: rgba(4, 120, 87, 7);
-  color: rgba(203, 6096, 4420, 7);
+  background-color: hsla(162, 94%, 24%, 0.07);
+  color: hsla(162, 94%, 24%, 0.07);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-clear-emerald {
-  background-color: rgba(236, 253, 245, 0.01);
-  color: #047857;
+  background-color: hsla(151.2, 81%, 96%, 0.01);
+  color: hsla(162, 94%, 24%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #10b981;
-  box-shadow: inset 0 0 0 1px #10b981, 0 0px 0px 2px #064e3b;
+  border-color: hsla(158.4, 84%, 39%, 1);
+  box-shadow: inset 0 0 0 1px hsla(158.4, 84%, 39%, 1), 0 0px 0px 2px hsla(165.6, 86%, 16%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-clear-emerald:enabled:hover {
-  background-color: #047857;
+  background-color: hsla(162, 94%, 24%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-emerald:enabled:focus-visible {
-  background-color: #047857;
+  background-color: hsla(162, 94%, 24%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-emerald:enabled:active {
-  background-color: #064e3b;
+  background-color: hsla(165.6, 86%, 16%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-emerald {
-  background-color: #064e3b;
+  background-color: hsla(165.6, 86%, 16%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #064e3b;
-  box-shadow: inset 0 0 0 1px #064e3b, 0 0px 0px 2px #ecfdf5;
+  border-color: hsla(165.6, 86%, 16%, 1);
+  box-shadow: inset 0 0 0 1px hsla(165.6, 86%, 16%, 1), 0 0px 0px 2px hsla(151.2, 81%, 96%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-clear-emerald:enabled:hover {
-  background-color: #ecfdf5;
+  background-color: hsla(151.2, 81%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-emerald:enabled:focus-visible {
-  background-color: #ecfdf5;
+  background-color: hsla(151.2, 81%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-emerald:enabled:active {
-  background-color: #6ee7b7;
+  background-color: hsla(154.8, 72%, 67%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-teal {
-  background-color: rgba(204, 251, 241, 0.8);
-  color: rgba(72, 76, 75, 0.9);
+  background-color: hsla(165.6, 85%, 89%, 0.8);
+  color: hsla(169.2, 45%, 18%, 0.9);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-teal:enabled:hover {
-  background-color: #5eead4;
-  color: #000;
+  background-color: hsla(169.2, 84%, 78%, 1);
+  color: hsla(169.2, 45%, 18%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-teal:enabled:focus-visible {
-  background-color: #5eead4;
-  color: #000;
+  background-color: hsla(169.2, 84%, 78%, 1);
+  color: hsla(169.2, 45%, 18%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-teal:enabled:active {
-  background-color: #99f6e4;
-  color: rgba(46, 74, 68, 1);
+  background-color: hsla(172.79999999999998, 66%, 50%, 0.65);
+  color: hsla(172.79999999999998, 39%, 0%, 0.65);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-teal:disabled {
-  background-color: #ccfbf1;
-  color: rgba(61, 75, 72, 1);
+  background-color: hsla(165.6, 85%, 89%, 1);
+  color: hsla(165.6, 45%, 28.999999999999996%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-light-teal {
-  background-color: rgba(19, 78, 74, 0.4);
-  color: rgba(864, 4775, 4521, 0.9);
+  background-color: hsla(176.4, 61%, 19%, 0.4);
+  color: hsla(176.4, 33%, 79%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-teal:enabled:hover {
-  background-color: #115e59;
-  color: rgba(864, 4775, 4521, 1);
+  background-color: hsla(176.4, 69%, 22%, 1);
+  color: hsla(176.4, 37%, 82%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-teal:enabled:focus-visible {
-  background-color: #115e59;
-  color: rgba(864, 4775, 4521, 1);
+  background-color: hsla(176.4, 69%, 22%, 1);
+  color: hsla(176.4, 37%, 82%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-teal:enabled:active {
-  background-color: #0f766e;
-  color: rgba(762, 5994, 5588, 1);
+  background-color: hsla(176.4, 61%, 19%, 1);
+  color: hsla(176.4, 33%, 79%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-teal:disabled {
-  background-color: #134e4a;
-  color: rgba(965, 3962, 3759, 1);
+  background-color: hsla(176.4, 61%, 19%, 1);
+  color: hsla(176.4, 33%, 79%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-light-teal {
-  background-color: #f0fdfa;
+  background-color: hsla(165.6, 76%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #14b8a6;
-  box-shadow: inset 0 0 0 1px #14b8a6, 0 0px 0px 1px #134e4a;
+  border-color: hsla(172.79999999999998, 80%, 40%, 1);
+  box-shadow: inset 0 0 0 1px hsla(172.79999999999998, 80%, 40%, 1), 0 0px 0px 1px hsla(176.4, 61%, 19%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-light-teal:enabled:hover {
-  background-color: #0f766e;
+  background-color: hsla(176.4, 77%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-teal:enabled:focus-visible {
-  background-color: #0f766e;
+  background-color: hsla(176.4, 77%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-teal:enabled:active {
-  background-color: #134e4a;
+  background-color: hsla(176.4, 61%, 19%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-teal {
-  background-color: #134e4a;
+  background-color: hsla(176.4, 61%, 19%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #134e4a;
-  box-shadow: inset 0 0 0 1px #134e4a, 0 0px 0px 1px #f0fdfa;
+  border-color: hsla(176.4, 61%, 19%, 1);
+  box-shadow: inset 0 0 0 1px hsla(176.4, 61%, 19%, 1), 0 0px 0px 1px hsla(165.6, 76%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-light-teal:enabled:hover {
-  background-color: #f0fdfa;
+  background-color: hsla(165.6, 76%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-teal:enabled:focus-visible {
-  background-color: #f0fdfa;
+  background-color: hsla(165.6, 76%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-teal:enabled:active {
-  background-color: #5eead4;
+  background-color: hsla(169.2, 77%, 64%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-teal {
-  background-color: #2dd4bf;
-  color: rgba(14, 64, 57, 1);
+  background-color: hsla(172.79999999999998, 66%, 50%, 1);
+  color: hsla(172.79999999999998, 39%, 0%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-teal:enabled:hover {
-  background-color: #14b8a6;
-  color: #000;
+  background-color: hsla(172.79999999999998, 80%, 40%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-teal:enabled:focus-visible {
-  background-color: #14b8a6;
-  color: #000;
+  background-color: hsla(172.79999999999998, 80%, 40%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-teal:enabled:active {
-  background-color: #0d9488;
-  color: rgba(6, 55, 50, 1);
+  background-color: hsla(176.4, 84%, 32%, 1);
+  color: hsla(172.79999999999998, 43%, 100%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-teal:disabled {
-  background-color: #99f6e4;
-  color: rgba(46, 74, 68, 1);
+  background-color: hsla(169.2, 84%, 78%, 1);
+  color: hsla(169.2, 45%, 18%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-teal {
-  background-color: #14b8a6;
-  color: rgba(6, 55, 50, 1);
+  background-color: hsla(172.79999999999998, 80%, 40%, 1);
+  color: hsla(172.79999999999998, 43%, 100%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-teal:enabled:hover {
-  background-color: #0d9488;
+  background-color: hsla(176.4, 84%, 32%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-teal:enabled:focus-visible {
-  background-color: #0d9488;
+  background-color: hsla(176.4, 84%, 32%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-teal:enabled:active {
-  background-color: rgba(13, 148, 136, 0.75);
+  background-color: hsla(176.4, 84%, 32%, 0.7);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-teal:disabled {
-  background-color: #0f766e;
-  color: rgba(762, 5994, 5588, 1);
+  background-color: hsla(176.4, 77%, 26%, 1);
+  color: hsla(176.4, 41%, 86%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-teal {
-  background-color: #f0fdfa;
+  background-color: hsla(165.6, 76%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #14b8a6;
-  box-shadow: inset 0 0 0 1px #14b8a6, 0 0px 0px 2px #134e4a;
+  border-color: hsla(172.79999999999998, 80%, 40%, 1);
+  box-shadow: inset 0 0 0 1px hsla(172.79999999999998, 80%, 40%, 1), 0 0px 0px 2px hsla(176.4, 61%, 19%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-teal:enabled:hover {
-  background-color: #0f766e;
+  background-color: hsla(176.4, 77%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-teal:enabled:focus-visible {
-  background-color: #0f766e;
+  background-color: hsla(176.4, 77%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-teal:enabled:active {
-  background-color: #134e4a;
+  background-color: hsla(176.4, 61%, 19%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-teal {
-  background-color: #134e4a;
+  background-color: hsla(176.4, 61%, 19%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #134e4a;
-  box-shadow: inset 0 0 0 1px #134e4a, 0 0px 0px 2px #f0fdfa;
+  border-color: hsla(176.4, 61%, 19%, 1);
+  box-shadow: inset 0 0 0 1px hsla(176.4, 61%, 19%, 1), 0 0px 0px 2px hsla(165.6, 76%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-teal:enabled:hover {
-  background-color: #f0fdfa;
+  background-color: hsla(165.6, 76%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-teal:enabled:focus-visible {
-  background-color: #f0fdfa;
+  background-color: hsla(165.6, 76%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-teal:enabled:active {
-  background-color: #5eead4;
+  background-color: hsla(169.2, 77%, 64%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-teal {
-  background-color: rgba(15, 118, 110, 0.9);
-  color: rgba(762, 5994, 5588, 0.9);
+  background-color: hsla(176.4, 77%, 26%, 0.9);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-teal:enabled:hover {
-  background-color: rgba(17, 94, 89, 0.8);
-  color: rgba(965, 3962, 3759, 1);
+  background-color: hsla(176.4, 69%, 22%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-teal:enabled:focus-visible {
-  background-color: rgba(17, 94, 89, 0.8);
-  color: rgba(965, 3962, 3759, 1);
+  background-color: hsla(176.4, 69%, 22%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-teal:enabled:active {
-  background-color: #115e59;
-  color: rgba(864, 4775, 4521, 1);
+  background-color: hsla(176.4, 69%, 22%, 1);
+  color: hsla(176.4, 37%, 82%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-teal:disabled {
-  background-color: rgba(17, 94, 89, 0.6);
-  color: rgba(864, 4775, 4521, 0.6);
+  background-color: hsla(176.4, 69%, 22%, 0.6);
+  color: hsla(176.4, 37%, 82%, 0.6);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-bold-teal {
-  background-color: rgba(19, 78, 74, 0.9);
-  color: rgba(965, 3962, 3759, 0.9);
+  background-color: hsla(176.4, 61%, 19%, 0.85);
+  color: hsla(176.4, 33%, 79%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-teal:enabled:hover {
-  background-color: rgba(19, 78, 74, 0.65);
+  background-color: hsla(176.4, 61%, 19%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-teal:enabled:focus-visible {
-  background-color: rgba(19, 78, 74, 0.65);
+  background-color: hsla(176.4, 61%, 19%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-teal:enabled:active {
-  background-color: #115e59;
-  color: rgba(864, 4775, 4521, 1);
+  background-color: hsla(176.4, 61%, 19%, 0.45);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-teal:disabled {
-  background-color: rgba(19, 78, 74, 0.4);
-  color: rgba(965, 3962, 3759, 0.4);
+  background-color: hsla(176.4, 61%, 19%, 0.4);
+  color: hsla(176.4, 33%, 79%, 0.4);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-bold-teal {
-  background-color: #f0fdfa;
+  background-color: hsla(165.6, 76%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #14b8a6;
-  box-shadow: inset 0 0 0 3px #14b8a6, 0 0px 0px 3px #134e4a;
+  border-color: hsla(172.79999999999998, 80%, 40%, 1);
+  box-shadow: inset 0 0 0 3px hsla(172.79999999999998, 80%, 40%, 1), 0 0px 0px 3px hsla(176.4, 61%, 19%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-bold-teal:enabled:hover {
-  background-color: #0f766e;
+  background-color: hsla(176.4, 77%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-teal:enabled:focus-visible {
-  background-color: #0f766e;
+  background-color: hsla(176.4, 77%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-teal:enabled:active {
-  background-color: #134e4a;
+  background-color: hsla(176.4, 61%, 19%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-teal {
-  background-color: #134e4a;
+  background-color: hsla(176.4, 61%, 19%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #134e4a;
-  box-shadow: inset 0 0 0 3px #134e4a, 0 0px 0px 3px #f0fdfa;
+  border-color: hsla(176.4, 61%, 19%, 1);
+  box-shadow: inset 0 0 0 3px hsla(176.4, 61%, 19%, 1), 0 0px 0px 3px hsla(165.6, 76%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-bold-teal:enabled:hover {
-  background-color: #f0fdfa;
+  background-color: hsla(165.6, 76%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-teal:enabled:focus-visible {
-  background-color: #f0fdfa;
+  background-color: hsla(165.6, 76%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-teal:enabled:active {
-  background-color: #5eead4;
+  background-color: hsla(169.2, 77%, 64%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-teal {
-  background-color: rgba(240, 253, 250, 0.01);
-  color: #14b8a6;
+  background-color: hsla(165.6, 76%, 97%, 0.01);
+  color: hsla(172.79999999999998, 80%, 40%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-teal:enabled:hover {
-  background-color: #14b8a6;
-  color: #000;
+  background-color: hsla(172.79999999999998, 80%, 40%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-teal:enabled:focus-visible {
-  background-color: #14b8a6;
-  color: #000;
+  background-color: hsla(172.79999999999998, 80%, 40%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-teal:enabled:active {
-  background-color: rgba(13, 148, 136, 0.85);
-  color: #000;
+  background-color: hsla(176.4, 84%, 32%, 0.85);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-teal:disabled {
-  background-color: rgba(240, 253, 250, 0.5);
-  color: rgba(72, 76, 75, 0.5);
+  background-color: hsla(165.6, 76%, 97%, 0.5);
+  color: hsla(165.6, 41%, 37%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .btn-outline-teal {
-  border-color: #14b8a6;
+  border-color: hsla(172.79999999999998, 80%, 40%, 1);
   border-width: 1px;
   border-style: solid;
 }
 
 .dark .btn-outline-teal {
-  background-color: rgba(19, 78, 74, 0.01);
-  color: #2dd4bf;
+  background-color: hsla(176.4, 61%, 19%, 0.01);
+  color: hsla(172.79999999999998, 66%, 50%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-teal:enabled:hover {
-  background-color: #14b8a6;
-  color: #000;
+  background-color: hsla(172.79999999999998, 80%, 40%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-teal:enabled:focus-visible {
-  background-color: #14b8a6;
-  color: #000;
+  background-color: hsla(172.79999999999998, 80%, 40%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-teal:enabled:active {
-  background-color: rgba(45, 212, 191, 0.85);
-  color: #000;
+  background-color: hsla(172.79999999999998, 80%, 40%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-teal:disabled {
-  background-color: rgba(240, 253, 250, 0.5);
-  color: rgba(72, 76, 75, 0.5);
+  background-color: hsla(165.6, 76%, 97%, 0.5);
+  color: hsla(165.6, 41%, 37%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-outline-teal {
-  border-color: #2dd4bf;
+  border-color: hsla(172.79999999999998, 66%, 50%, 1);
 }
 
 .contrast .btn-outline-teal {
-  background-color: rgba(240, 253, 250, 0.01);
-  color: #0f766e;
+  background-color: hsla(165.6, 76%, 97%, 0.01);
+  color: hsla(176.4, 77%, 26%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #0f766e;
-  box-shadow: inset 0 0 0 3px #0f766e, 0 0px 0px 3px #f0fdfa;
+  border-color: hsla(176.4, 77%, 26%, 1);
+  box-shadow: inset 0 0 0 3px hsla(176.4, 77%, 26%, 1), 0 0px 0px 3px hsla(165.6, 76%, 97%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-outline-teal:enabled:hover {
-  background-color: #f0fdfa;
+  background-color: hsla(165.6, 76%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-teal:enabled:focus-visible {
-  background-color: #f0fdfa;
+  background-color: hsla(165.6, 76%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-teal:enabled:active {
-  background-color: #5eead4;
+  background-color: hsla(169.2, 77%, 64%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-teal {
-  background-color: rgba(19, 78, 74, 0.01);
-  color: #ccfbf1;
+  background-color: hsla(176.4, 61%, 19%, 0.01);
+  color: hsla(165.6, 85%, 89%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #99f6e4;
-  box-shadow: inset 0 0 0 3px #0f766e, 0 0px 0px 3px #ccfbf1;
+  border-color: hsla(169.2, 84%, 78%, 1);
+  box-shadow: inset 0 0 0 3px hsla(176.4, 77%, 26%, 1), 0 0px 0px 3px hsla(165.6, 85%, 89%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-outline-teal:enabled:hover {
-  background-color: #0f766e;
+  background-color: hsla(176.4, 77%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-teal:enabled:focus-visible {
-  background-color: #0f766e;
+  background-color: hsla(176.4, 77%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-teal:enabled:active {
-  background-color: rgba(19, 78, 74, 0.6);
+  background-color: hsla(176.4, 61%, 19%, 0.6);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-teal {
-  background-color: rgba(240, 253, 250, 0.01);
-  color: #14b8a6;
+  background-color: hsla(165.6, 76%, 97%, 0.01);
+  color: hsla(172.79999999999998, 80%, 40%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-teal:enabled:hover {
-  background-color: #ccfbf1;
-  color: #14b8a6;
+  background-color: hsla(165.6, 85%, 89%, 1);
+  color: hsla(172.79999999999998, 80%, 40%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-teal:enabled:focus-visible {
-  background-color: #ccfbf1;
-  color: #14b8a6;
+  background-color: hsla(165.6, 85%, 89%, 1);
+  color: hsla(172.79999999999998, 80%, 40%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-teal:enabled:active {
-  background-color: rgba(153, 246, 228, 0.85);
-  color: #0d9488;
+  background-color: hsla(169.2, 84%, 78%, 0.85);
+  color: hsla(176.4, 84%, 32%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-teal:disabled {
-  background-color: rgba(240, 253, 250, 0.5);
-  color: rgba(72, 76, 75, 0.5);
+  background-color: hsla(165.6, 76%, 97%, 0.5);
+  color: hsla(165.6, 41%, 37%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-clear-teal {
-  background-color: rgba(19, 78, 74, 0.01);
-  color: #2dd4bf;
+  background-color: hsla(176.4, 61%, 19%, 0.01);
+  color: hsla(172.79999999999998, 66%, 50%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-teal:enabled:hover {
-  background-color: rgba(13, 148, 136, 0.35);
-  color: #0d9488;
+  background-color: hsla(169.2, 77%, 64%, 0.25);
+  color: hsla(172.79999999999998, 80%, 40%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-teal:enabled:focus-visible {
-  background-color: rgba(13, 148, 136, 0.35);
-  color: #0d9488;
+  background-color: hsla(169.2, 77%, 64%, 0.25);
+  color: hsla(172.79999999999998, 80%, 40%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-teal:enabled:active {
-  background-color: rgba(15, 118, 110, 0.4);
-  color: #14b8a6;
+  background-color: hsla(172.79999999999998, 66%, 50%, 0.2);
+  color: hsla(176.4, 84%, 32%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-teal:disabled {
-  background-color: rgba(15, 118, 110, 7);
-  color: rgba(762, 5994, 5588, 7);
+  background-color: hsla(176.4, 77%, 26%, 0.07);
+  color: hsla(176.4, 77%, 26%, 0.07);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-clear-teal {
-  background-color: rgba(240, 253, 250, 0.01);
-  color: #0f766e;
+  background-color: hsla(165.6, 76%, 97%, 0.01);
+  color: hsla(176.4, 77%, 26%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #14b8a6;
-  box-shadow: inset 0 0 0 1px #14b8a6, 0 0px 0px 2px #134e4a;
+  border-color: hsla(172.79999999999998, 80%, 40%, 1);
+  box-shadow: inset 0 0 0 1px hsla(172.79999999999998, 80%, 40%, 1), 0 0px 0px 2px hsla(176.4, 61%, 19%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-clear-teal:enabled:hover {
-  background-color: #0f766e;
+  background-color: hsla(176.4, 77%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-teal:enabled:focus-visible {
-  background-color: #0f766e;
+  background-color: hsla(176.4, 77%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-teal:enabled:active {
-  background-color: #134e4a;
+  background-color: hsla(176.4, 61%, 19%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-teal {
-  background-color: #134e4a;
+  background-color: hsla(176.4, 61%, 19%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #134e4a;
-  box-shadow: inset 0 0 0 1px #134e4a, 0 0px 0px 2px #f0fdfa;
+  border-color: hsla(176.4, 61%, 19%, 1);
+  box-shadow: inset 0 0 0 1px hsla(176.4, 61%, 19%, 1), 0 0px 0px 2px hsla(165.6, 76%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-clear-teal:enabled:hover {
-  background-color: #f0fdfa;
+  background-color: hsla(165.6, 76%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-teal:enabled:focus-visible {
-  background-color: #f0fdfa;
+  background-color: hsla(165.6, 76%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-teal:enabled:active {
-  background-color: #5eead4;
+  background-color: hsla(169.2, 77%, 64%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-cyan {
-  background-color: rgba(207, 250, 254, 0.8);
-  color: rgba(71, 76, 77, 0.9);
+  background-color: hsla(183.6, 96%, 90%, 0.8);
+  color: hsla(187.20000000000002, 50%, 22%, 0.9);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-cyan:enabled:hover {
-  background-color: #67e8f9;
-  color: #000;
+  background-color: hsla(187.20000000000002, 94%, 82%, 1);
+  color: hsla(187.20000000000002, 50%, 22%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-cyan:enabled:focus-visible {
-  background-color: #67e8f9;
-  color: #000;
+  background-color: hsla(187.20000000000002, 94%, 82%, 1);
+  color: hsla(187.20000000000002, 50%, 22%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-cyan:enabled:active {
-  background-color: #a5f3fc;
-  color: rgba(50, 73, 76, 1);
+  background-color: hsla(187.20000000000002, 86%, 53%, 0.65);
+  color: hsla(187.20000000000002, 50%, 3%, 0.65);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-cyan:disabled {
-  background-color: #cffafe;
-  color: rgba(62, 75, 76, 1);
+  background-color: hsla(183.6, 96%, 90%, 1);
+  color: hsla(183.6, 50%, 30%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-light-cyan {
-  background-color: rgba(22, 78, 99, 0.4);
-  color: rgba(1067, 4775, 5944, 0.9);
+  background-color: hsla(198.00000000000003, 64%, 24%, 0.4);
+  color: hsla(198.00000000000003, 34%, 84%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-cyan:enabled:hover {
-  background-color: #155e75;
-  color: rgba(1067, 4775, 5944, 1);
+  background-color: hsla(194.4, 70%, 27%, 1);
+  color: hsla(194.4, 37%, 87%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-cyan:enabled:focus-visible {
-  background-color: #155e75;
-  color: rgba(1067, 4775, 5944, 1);
+  background-color: hsla(194.4, 70%, 27%, 1);
+  color: hsla(194.4, 37%, 87%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-cyan:enabled:active {
-  background-color: #0e7490;
-  color: rgba(711, 5893, 7315, 1);
+  background-color: hsla(198.00000000000003, 64%, 24%, 1);
+  color: hsla(198.00000000000003, 34%, 84%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-cyan:disabled {
-  background-color: #164e63;
-  color: rgba(1118, 3962, 5029, 1);
+  background-color: hsla(198.00000000000003, 64%, 24%, 1);
+  color: hsla(198.00000000000003, 34%, 84%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-light-cyan {
-  background-color: #ecfeff;
+  background-color: hsla(183.6, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #06b6d4;
-  box-shadow: inset 0 0 0 1px #06b6d4, 0 0px 0px 1px #164e63;
+  border-color: hsla(187.20000000000002, 94%, 43%, 1);
+  box-shadow: inset 0 0 0 1px hsla(187.20000000000002, 94%, 43%, 1), 0 0px 0px 1px hsla(198.00000000000003, 64%, 24%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-light-cyan:enabled:hover {
-  background-color: #0e7490;
+  background-color: hsla(194.4, 82%, 31%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-cyan:enabled:focus-visible {
-  background-color: #0e7490;
+  background-color: hsla(194.4, 82%, 31%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-cyan:enabled:active {
-  background-color: #164e63;
+  background-color: hsla(198.00000000000003, 64%, 24%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-cyan {
-  background-color: #164e63;
+  background-color: hsla(198.00000000000003, 64%, 24%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #164e63;
-  box-shadow: inset 0 0 0 1px #164e63, 0 0px 0px 1px #ecfeff;
+  border-color: hsla(198.00000000000003, 64%, 24%, 1);
+  box-shadow: inset 0 0 0 1px hsla(198.00000000000003, 64%, 24%, 1), 0 0px 0px 1px hsla(183.6, 100%, 96%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-light-cyan:enabled:hover {
-  background-color: #ecfeff;
+  background-color: hsla(183.6, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-cyan:enabled:focus-visible {
-  background-color: #ecfeff;
+  background-color: hsla(183.6, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-cyan:enabled:active {
-  background-color: #67e8f9;
+  background-color: hsla(187.20000000000002, 92%, 69%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-cyan {
-  background-color: #22d3ee;
-  color: rgba(10, 63, 71, 1);
+  background-color: hsla(187.20000000000002, 86%, 53%, 1);
+  color: hsla(187.20000000000002, 50%, 3%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-cyan:enabled:hover {
-  background-color: #06b6d4;
-  color: #000;
+  background-color: hsla(187.20000000000002, 94%, 43%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-cyan:enabled:focus-visible {
-  background-color: #06b6d4;
-  color: #000;
+  background-color: hsla(187.20000000000002, 94%, 43%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-cyan:enabled:active {
-  background-color: #0891b2;
-  color: rgba(2, 55, 64, 1);
+  background-color: hsla(190.8, 91%, 36%, 1);
+  color: hsla(187.20000000000002, 50%, 100%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-cyan:disabled {
-  background-color: #a5f3fc;
-  color: rgba(50, 73, 76, 1);
+  background-color: hsla(187.20000000000002, 94%, 82%, 1);
+  color: hsla(187.20000000000002, 50%, 22%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-cyan {
-  background-color: #06b6d4;
-  color: rgba(2, 55, 64, 1);
+  background-color: hsla(187.20000000000002, 94%, 43%, 1);
+  color: hsla(187.20000000000002, 50%, 100%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-cyan:enabled:hover {
-  background-color: #0891b2;
+  background-color: hsla(190.8, 91%, 36%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-cyan:enabled:focus-visible {
-  background-color: #0891b2;
+  background-color: hsla(190.8, 91%, 36%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-cyan:enabled:active {
-  background-color: rgba(8, 145, 178, 0.75);
+  background-color: hsla(190.8, 91%, 36%, 0.7);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-cyan:disabled {
-  background-color: #0e7490;
-  color: rgba(711, 5893, 7315, 1);
+  background-color: hsla(194.4, 82%, 31%, 1);
+  color: hsla(194.4, 44%, 91%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-cyan {
-  background-color: #ecfeff;
+  background-color: hsla(183.6, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #06b6d4;
-  box-shadow: inset 0 0 0 1px #06b6d4, 0 0px 0px 2px #164e63;
+  border-color: hsla(187.20000000000002, 94%, 43%, 1);
+  box-shadow: inset 0 0 0 1px hsla(187.20000000000002, 94%, 43%, 1), 0 0px 0px 2px hsla(198.00000000000003, 64%, 24%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-cyan:enabled:hover {
-  background-color: #0e7490;
+  background-color: hsla(194.4, 82%, 31%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-cyan:enabled:focus-visible {
-  background-color: #0e7490;
+  background-color: hsla(194.4, 82%, 31%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-cyan:enabled:active {
-  background-color: #164e63;
+  background-color: hsla(198.00000000000003, 64%, 24%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-cyan {
-  background-color: #164e63;
+  background-color: hsla(198.00000000000003, 64%, 24%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #164e63;
-  box-shadow: inset 0 0 0 1px #164e63, 0 0px 0px 2px #ecfeff;
+  border-color: hsla(198.00000000000003, 64%, 24%, 1);
+  box-shadow: inset 0 0 0 1px hsla(198.00000000000003, 64%, 24%, 1), 0 0px 0px 2px hsla(183.6, 100%, 96%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-cyan:enabled:hover {
-  background-color: #ecfeff;
+  background-color: hsla(183.6, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-cyan:enabled:focus-visible {
-  background-color: #ecfeff;
+  background-color: hsla(183.6, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-cyan:enabled:active {
-  background-color: #67e8f9;
+  background-color: hsla(187.20000000000002, 92%, 69%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-cyan {
-  background-color: rgba(14, 116, 144, 0.9);
-  color: rgba(711, 5893, 7315, 0.9);
+  background-color: hsla(194.4, 82%, 31%, 0.9);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-cyan:enabled:hover {
-  background-color: rgba(21, 94, 117, 0.8);
-  color: rgba(1118, 3962, 5029, 1);
+  background-color: hsla(194.4, 70%, 27%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-cyan:enabled:focus-visible {
-  background-color: rgba(21, 94, 117, 0.8);
-  color: rgba(1118, 3962, 5029, 1);
+  background-color: hsla(194.4, 70%, 27%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-cyan:enabled:active {
-  background-color: #155e75;
-  color: rgba(1067, 4775, 5944, 1);
+  background-color: hsla(194.4, 70%, 27%, 1);
+  color: hsla(194.4, 37%, 87%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-cyan:disabled {
-  background-color: rgba(21, 94, 117, 0.6);
-  color: rgba(1067, 4775, 5944, 0.6);
+  background-color: hsla(194.4, 70%, 27%, 0.6);
+  color: hsla(194.4, 41%, 77%, 0.6);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-bold-cyan {
-  background-color: rgba(22, 78, 99, 0.9);
-  color: rgba(1118, 3962, 5029, 0.9);
+  background-color: hsla(198.00000000000003, 64%, 24%, 0.85);
+  color: hsla(198.00000000000003, 34%, 84%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-cyan:enabled:hover {
-  background-color: rgba(22, 78, 99, 0.65);
+  background-color: hsla(198.00000000000003, 64%, 24%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-cyan:enabled:focus-visible {
-  background-color: rgba(22, 78, 99, 0.65);
+  background-color: hsla(198.00000000000003, 64%, 24%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-cyan:enabled:active {
-  background-color: #155e75;
-  color: rgba(1067, 4775, 5944, 1);
+  background-color: hsla(198.00000000000003, 64%, 24%, 0.45);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-cyan:disabled {
-  background-color: rgba(22, 78, 99, 0.4);
-  color: rgba(1118, 3962, 5029, 0.4);
+  background-color: hsla(198.00000000000003, 64%, 24%, 0.4);
+  color: hsla(198.00000000000003, 34%, 84%, 0.4);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-bold-cyan {
-  background-color: #ecfeff;
+  background-color: hsla(183.6, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #06b6d4;
-  box-shadow: inset 0 0 0 3px #06b6d4, 0 0px 0px 3px #164e63;
+  border-color: hsla(187.20000000000002, 94%, 43%, 1);
+  box-shadow: inset 0 0 0 3px hsla(187.20000000000002, 94%, 43%, 1), 0 0px 0px 3px hsla(198.00000000000003, 64%, 24%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-bold-cyan:enabled:hover {
-  background-color: #0e7490;
+  background-color: hsla(194.4, 82%, 31%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-cyan:enabled:focus-visible {
-  background-color: #0e7490;
+  background-color: hsla(194.4, 82%, 31%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-cyan:enabled:active {
-  background-color: #164e63;
+  background-color: hsla(198.00000000000003, 64%, 24%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-cyan {
-  background-color: #164e63;
+  background-color: hsla(198.00000000000003, 64%, 24%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #164e63;
-  box-shadow: inset 0 0 0 3px #164e63, 0 0px 0px 3px #ecfeff;
+  border-color: hsla(198.00000000000003, 64%, 24%, 1);
+  box-shadow: inset 0 0 0 3px hsla(198.00000000000003, 64%, 24%, 1), 0 0px 0px 3px hsla(183.6, 100%, 96%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-bold-cyan:enabled:hover {
-  background-color: #ecfeff;
+  background-color: hsla(183.6, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-cyan:enabled:focus-visible {
-  background-color: #ecfeff;
+  background-color: hsla(183.6, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-cyan:enabled:active {
-  background-color: #67e8f9;
+  background-color: hsla(187.20000000000002, 92%, 69%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-cyan {
-  background-color: rgba(236, 254, 255, 0.01);
-  color: #06b6d4;
+  background-color: hsla(183.6, 100%, 96%, 0.01);
+  color: hsla(187.20000000000002, 94%, 43%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-cyan:enabled:hover {
-  background-color: #06b6d4;
-  color: #000;
+  background-color: hsla(187.20000000000002, 94%, 43%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-cyan:enabled:focus-visible {
-  background-color: #06b6d4;
-  color: #000;
+  background-color: hsla(187.20000000000002, 94%, 43%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-cyan:enabled:active {
-  background-color: rgba(8, 145, 178, 0.85);
-  color: #000;
+  background-color: hsla(190.8, 91%, 36%, 0.85);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-cyan:disabled {
-  background-color: rgba(236, 254, 255, 0.5);
-  color: rgba(71, 76, 77, 0.5);
+  background-color: hsla(183.6, 100%, 96%, 0.5);
+  color: hsla(183.6, 53%, 36%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .btn-outline-cyan {
-  border-color: #06b6d4;
+  border-color: hsla(187.20000000000002, 94%, 43%, 1);
   border-width: 1px;
   border-style: solid;
 }
 
 .dark .btn-outline-cyan {
-  background-color: rgba(22, 78, 99, 0.01);
-  color: #22d3ee;
+  background-color: hsla(198.00000000000003, 64%, 24%, 0.01);
+  color: hsla(187.20000000000002, 86%, 53%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-cyan:enabled:hover {
-  background-color: #06b6d4;
-  color: #000;
+  background-color: hsla(187.20000000000002, 94%, 43%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-cyan:enabled:focus-visible {
-  background-color: #06b6d4;
-  color: #000;
+  background-color: hsla(187.20000000000002, 94%, 43%, 1);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-cyan:enabled:active {
-  background-color: rgba(34, 211, 238, 0.85);
-  color: #000;
+  background-color: hsla(187.20000000000002, 94%, 43%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-cyan:disabled {
-  background-color: rgba(236, 254, 255, 0.5);
-  color: rgba(71, 76, 77, 0.5);
+  background-color: hsla(183.6, 100%, 96%, 0.5);
+  color: hsla(183.6, 53%, 36%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-outline-cyan {
-  border-color: #22d3ee;
+  border-color: hsla(187.20000000000002, 86%, 53%, 1);
 }
 
 .contrast .btn-outline-cyan {
-  background-color: rgba(236, 254, 255, 0.01);
-  color: #0e7490;
+  background-color: hsla(183.6, 100%, 96%, 0.01);
+  color: hsla(194.4, 82%, 31%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #0e7490;
-  box-shadow: inset 0 0 0 3px #0e7490, 0 0px 0px 3px #ecfeff;
+  border-color: hsla(194.4, 82%, 31%, 1);
+  box-shadow: inset 0 0 0 3px hsla(194.4, 82%, 31%, 1), 0 0px 0px 3px hsla(183.6, 100%, 96%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-outline-cyan:enabled:hover {
-  background-color: #ecfeff;
+  background-color: hsla(183.6, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-cyan:enabled:focus-visible {
-  background-color: #ecfeff;
+  background-color: hsla(183.6, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-cyan:enabled:active {
-  background-color: #67e8f9;
+  background-color: hsla(187.20000000000002, 92%, 69%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-cyan {
-  background-color: rgba(22, 78, 99, 0.01);
-  color: #cffafe;
+  background-color: hsla(198.00000000000003, 64%, 24%, 0.01);
+  color: hsla(183.6, 96%, 90%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #a5f3fc;
-  box-shadow: inset 0 0 0 3px #0e7490, 0 0px 0px 3px #cffafe;
+  border-color: hsla(187.20000000000002, 94%, 82%, 1);
+  box-shadow: inset 0 0 0 3px hsla(194.4, 82%, 31%, 1), 0 0px 0px 3px hsla(183.6, 96%, 90%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-outline-cyan:enabled:hover {
-  background-color: #0e7490;
+  background-color: hsla(194.4, 82%, 31%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-cyan:enabled:focus-visible {
-  background-color: #0e7490;
+  background-color: hsla(194.4, 82%, 31%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-cyan:enabled:active {
-  background-color: rgba(22, 78, 99, 0.6);
+  background-color: hsla(198.00000000000003, 64%, 24%, 0.6);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-cyan {
-  background-color: rgba(236, 254, 255, 0.01);
-  color: #06b6d4;
+  background-color: hsla(183.6, 100%, 96%, 0.01);
+  color: hsla(187.20000000000002, 94%, 43%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-cyan:enabled:hover {
-  background-color: #cffafe;
-  color: #06b6d4;
+  background-color: hsla(183.6, 96%, 90%, 1);
+  color: hsla(187.20000000000002, 94%, 43%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-cyan:enabled:focus-visible {
-  background-color: #cffafe;
-  color: #06b6d4;
+  background-color: hsla(183.6, 96%, 90%, 1);
+  color: hsla(187.20000000000002, 94%, 43%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-cyan:enabled:active {
-  background-color: rgba(165, 243, 252, 0.85);
-  color: #0891b2;
+  background-color: hsla(187.20000000000002, 94%, 82%, 0.85);
+  color: hsla(190.8, 91%, 36%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-cyan:disabled {
-  background-color: rgba(236, 254, 255, 0.5);
-  color: rgba(71, 76, 77, 0.5);
+  background-color: hsla(183.6, 100%, 96%, 0.5);
+  color: hsla(183.6, 53%, 36%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-clear-cyan {
-  background-color: rgba(22, 78, 99, 0.01);
-  color: #22d3ee;
+  background-color: hsla(198.00000000000003, 64%, 24%, 0.01);
+  color: hsla(187.20000000000002, 86%, 53%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-cyan:enabled:hover {
-  background-color: rgba(8, 145, 178, 0.35);
-  color: #0891b2;
+  background-color: hsla(187.20000000000002, 92%, 69%, 0.25);
+  color: hsla(187.20000000000002, 94%, 43%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-cyan:enabled:focus-visible {
-  background-color: rgba(8, 145, 178, 0.35);
-  color: #0891b2;
+  background-color: hsla(187.20000000000002, 92%, 69%, 0.25);
+  color: hsla(187.20000000000002, 94%, 43%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-cyan:enabled:active {
-  background-color: rgba(14, 116, 144, 0.4);
-  color: #06b6d4;
+  background-color: hsla(187.20000000000002, 86%, 53%, 0.2);
+  color: hsla(190.8, 91%, 36%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-cyan:disabled {
-  background-color: rgba(14, 116, 144, 7);
-  color: rgba(711, 5893, 7315, 7);
+  background-color: hsla(194.4, 82%, 31%, 0.07);
+  color: hsla(194.4, 82%, 31%, 0.07);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-clear-cyan {
-  background-color: rgba(236, 254, 255, 0.01);
-  color: #0e7490;
+  background-color: hsla(183.6, 100%, 96%, 0.01);
+  color: hsla(194.4, 82%, 31%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #06b6d4;
-  box-shadow: inset 0 0 0 1px #06b6d4, 0 0px 0px 2px #164e63;
+  border-color: hsla(187.20000000000002, 94%, 43%, 1);
+  box-shadow: inset 0 0 0 1px hsla(187.20000000000002, 94%, 43%, 1), 0 0px 0px 2px hsla(198.00000000000003, 64%, 24%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-clear-cyan:enabled:hover {
-  background-color: #0e7490;
+  background-color: hsla(194.4, 82%, 31%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-cyan:enabled:focus-visible {
-  background-color: #0e7490;
+  background-color: hsla(194.4, 82%, 31%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-cyan:enabled:active {
-  background-color: #164e63;
+  background-color: hsla(198.00000000000003, 64%, 24%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-cyan {
-  background-color: #164e63;
+  background-color: hsla(198.00000000000003, 64%, 24%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #164e63;
-  box-shadow: inset 0 0 0 1px #164e63, 0 0px 0px 2px #ecfeff;
+  border-color: hsla(198.00000000000003, 64%, 24%, 1);
+  box-shadow: inset 0 0 0 1px hsla(198.00000000000003, 64%, 24%, 1), 0 0px 0px 2px hsla(183.6, 100%, 96%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-clear-cyan:enabled:hover {
-  background-color: #ecfeff;
+  background-color: hsla(183.6, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-cyan:enabled:focus-visible {
-  background-color: #ecfeff;
+  background-color: hsla(183.6, 100%, 96%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-cyan:enabled:active {
-  background-color: #67e8f9;
+  background-color: hsla(187.20000000000002, 92%, 69%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-sky {
-  background-color: rgba(224, 242, 254, 0.8);
-  color: rgba(72, 75, 77, 0.9);
+  background-color: hsla(205.2, 94%, 94%, 0.8);
+  color: hsla(201.60000000000002, 50%, 26%, 0.9);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-sky:enabled:hover {
-  background-color: #7dd3fc;
-  color: #000;
+  background-color: hsla(201.60000000000002, 94%, 86%, 1);
+  color: hsla(201.60000000000002, 50%, 26%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-sky:enabled:focus-visible {
-  background-color: #7dd3fc;
-  color: #000;
+  background-color: hsla(201.60000000000002, 94%, 86%, 1);
+  color: hsla(201.60000000000002, 50%, 26%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-sky:enabled:active {
-  background-color: #bae6fd;
-  color: rgba(56, 69, 76, 1);
+  background-color: hsla(198.00000000000003, 93%, 60%, 0.65);
+  color: hsla(198.00000000000003, 50%, 0%, 0.65);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-sky:disabled {
-  background-color: #e0f2fe;
-  color: rgba(67, 73, 76, 1);
+  background-color: hsla(205.2, 94%, 94%, 1);
+  color: hsla(205.2, 50%, 34%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-light-sky {
-  background-color: rgba(12, 74, 110, 0.4);
-  color: rgba(356, 4521, 6756, 0.9);
+  background-color: hsla(201.60000000000002, 80%, 24%, 0.4);
+  color: hsla(201.60000000000002, 43%, 84%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-sky:enabled:hover {
-  background-color: #075985;
-  color: rgba(356, 4521, 6756, 1);
+  background-color: hsla(201.60000000000002, 90%, 27%, 1);
+  color: hsla(201.60000000000002, 48%, 87%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-sky:enabled:focus-visible {
-  background-color: #075985;
-  color: rgba(356, 4521, 6756, 1);
+  background-color: hsla(201.60000000000002, 90%, 27%, 1);
+  color: hsla(201.60000000000002, 48%, 87%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-sky:enabled:active {
-  background-color: #0369a1;
-  color: rgba(152, 5334, 8179, 1);
+  background-color: hsla(201.60000000000002, 80%, 24%, 1);
+  color: hsla(201.60000000000002, 43%, 84%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-sky:disabled {
-  background-color: #0c4a6e;
-  color: rgba(610, 3759, 5588, 1);
+  background-color: hsla(201.60000000000002, 80%, 24%, 1);
+  color: hsla(201.60000000000002, 43%, 84%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-light-sky {
-  background-color: #f0f9ff;
+  background-color: hsla(205.2, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #0ea5e9;
-  box-shadow: inset 0 0 0 1px #0ea5e9, 0 0px 0px 1px #0c4a6e;
+  border-color: hsla(198.00000000000003, 89%, 48%, 1);
+  box-shadow: inset 0 0 0 1px hsla(198.00000000000003, 89%, 48%, 1), 0 0px 0px 1px hsla(201.60000000000002, 80%, 24%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-light-sky:enabled:hover {
-  background-color: #0369a1;
+  background-color: hsla(201.60000000000002, 96%, 32%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-sky:enabled:focus-visible {
-  background-color: #0369a1;
+  background-color: hsla(201.60000000000002, 96%, 32%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-sky:enabled:active {
-  background-color: #0c4a6e;
+  background-color: hsla(201.60000000000002, 80%, 24%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-sky {
-  background-color: #0c4a6e;
+  background-color: hsla(201.60000000000002, 80%, 24%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #0c4a6e;
-  box-shadow: inset 0 0 0 1px #0c4a6e, 0 0px 0px 1px #f0f9ff;
+  border-color: hsla(201.60000000000002, 80%, 24%, 1);
+  box-shadow: inset 0 0 0 1px hsla(201.60000000000002, 80%, 24%, 1), 0 0px 0px 1px hsla(205.2, 100%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-light-sky:enabled:hover {
-  background-color: #f0f9ff;
+  background-color: hsla(205.2, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-sky:enabled:focus-visible {
-  background-color: #f0f9ff;
+  background-color: hsla(205.2, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-sky:enabled:active {
-  background-color: #7dd3fc;
+  background-color: hsla(198.00000000000003, 95%, 74%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-sky {
-  background-color: #38bdf8;
-  color: rgba(17, 57, 74, 1);
+  background-color: hsla(198.00000000000003, 93%, 60%, 1);
+  color: hsla(198.00000000000003, 50%, 0%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-sky:enabled:hover {
-  background-color: #0ea5e9;
+  background-color: hsla(198.00000000000003, 89%, 48%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-sky:enabled:focus-visible {
-  background-color: #0ea5e9;
+  background-color: hsla(198.00000000000003, 89%, 48%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-sky:enabled:active {
-  background-color: #0284c7;
-  color: rgba(4, 50, 70, 1);
+  background-color: hsla(201.60000000000002, 98%, 39%, 1);
+  color: hsla(198.00000000000003, 53%, 0%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-sky:disabled {
-  background-color: #bae6fd;
-  color: rgba(56, 69, 76, 1);
+  background-color: hsla(201.60000000000002, 94%, 86%, 1);
+  color: hsla(201.60000000000002, 50%, 26%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-sky {
-  background-color: #0ea5e9;
-  color: rgba(4, 50, 70, 1);
+  background-color: hsla(198.00000000000003, 89%, 48%, 1);
+  color: hsla(198.00000000000003, 53%, 0%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-sky:enabled:hover {
-  background-color: #0284c7;
+  background-color: hsla(201.60000000000002, 98%, 39%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-sky:enabled:focus-visible {
-  background-color: #0284c7;
+  background-color: hsla(201.60000000000002, 98%, 39%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-sky:enabled:active {
-  background-color: rgba(2, 132, 199, 0.75);
+  background-color: hsla(201.60000000000002, 98%, 39%, 0.7);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-sky:disabled {
-  background-color: #0369a1;
-  color: rgba(152, 5334, 8179, 1);
+  background-color: hsla(201.60000000000002, 96%, 32%, 1);
+  color: hsla(201.60000000000002, 50%, 92%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-sky {
-  background-color: #f0f9ff;
+  background-color: hsla(205.2, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #0ea5e9;
-  box-shadow: inset 0 0 0 1px #0ea5e9, 0 0px 0px 2px #0c4a6e;
+  border-color: hsla(198.00000000000003, 89%, 48%, 1);
+  box-shadow: inset 0 0 0 1px hsla(198.00000000000003, 89%, 48%, 1), 0 0px 0px 2px hsla(201.60000000000002, 80%, 24%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-sky:enabled:hover {
-  background-color: #0369a1;
+  background-color: hsla(201.60000000000002, 96%, 32%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-sky:enabled:focus-visible {
-  background-color: #0369a1;
+  background-color: hsla(201.60000000000002, 96%, 32%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-sky:enabled:active {
-  background-color: #0c4a6e;
+  background-color: hsla(201.60000000000002, 80%, 24%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-sky {
-  background-color: #0c4a6e;
+  background-color: hsla(201.60000000000002, 80%, 24%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #0c4a6e;
-  box-shadow: inset 0 0 0 1px #0c4a6e, 0 0px 0px 2px #f0f9ff;
+  border-color: hsla(201.60000000000002, 80%, 24%, 1);
+  box-shadow: inset 0 0 0 1px hsla(201.60000000000002, 80%, 24%, 1), 0 0px 0px 2px hsla(205.2, 100%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-sky:enabled:hover {
-  background-color: #f0f9ff;
+  background-color: hsla(205.2, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-sky:enabled:focus-visible {
-  background-color: #f0f9ff;
+  background-color: hsla(205.2, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-sky:enabled:active {
-  background-color: #7dd3fc;
+  background-color: hsla(198.00000000000003, 95%, 74%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-sky {
-  background-color: rgba(3, 105, 161, 0.9);
-  color: rgba(152, 5334, 8179, 0.9);
+  background-color: hsla(201.60000000000002, 96%, 32%, 0.9);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-sky:enabled:hover {
-  background-color: rgba(7, 89, 133, 0.8);
-  color: rgba(610, 3759, 5588, 1);
+  background-color: hsla(201.60000000000002, 90%, 27%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-sky:enabled:focus-visible {
-  background-color: rgba(7, 89, 133, 0.8);
-  color: rgba(610, 3759, 5588, 1);
+  background-color: hsla(201.60000000000002, 90%, 27%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-sky:enabled:active {
-  background-color: #075985;
-  color: rgba(356, 4521, 6756, 1);
+  background-color: hsla(201.60000000000002, 90%, 27%, 1);
+  color: hsla(201.60000000000002, 48%, 87%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-sky:disabled {
-  background-color: rgba(7, 89, 133, 0.6);
-  color: rgba(356, 4521, 6756, 0.6);
+  background-color: hsla(201.60000000000002, 90%, 27%, 0.6);
+  color: hsla(201.60000000000002, 53%, 77%, 0.6);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-bold-sky {
-  background-color: rgba(12, 74, 110, 0.9);
-  color: rgba(610, 3759, 5588, 0.9);
+  background-color: hsla(201.60000000000002, 80%, 24%, 0.85);
+  color: hsla(201.60000000000002, 43%, 84%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-sky:enabled:hover {
-  background-color: rgba(12, 74, 110, 0.65);
+  background-color: hsla(201.60000000000002, 80%, 24%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-sky:enabled:focus-visible {
-  background-color: rgba(12, 74, 110, 0.65);
+  background-color: hsla(201.60000000000002, 80%, 24%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-sky:enabled:active {
-  background-color: #075985;
-  color: rgba(356, 4521, 6756, 1);
+  background-color: hsla(201.60000000000002, 80%, 24%, 0.45);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-sky:disabled {
-  background-color: rgba(12, 74, 110, 0.4);
-  color: rgba(610, 3759, 5588, 0.4);
+  background-color: hsla(201.60000000000002, 80%, 24%, 0.4);
+  color: hsla(201.60000000000002, 43%, 84%, 0.4);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-bold-sky {
-  background-color: #f0f9ff;
+  background-color: hsla(205.2, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #0ea5e9;
-  box-shadow: inset 0 0 0 3px #0ea5e9, 0 0px 0px 3px #0c4a6e;
+  border-color: hsla(198.00000000000003, 89%, 48%, 1);
+  box-shadow: inset 0 0 0 3px hsla(198.00000000000003, 89%, 48%, 1), 0 0px 0px 3px hsla(201.60000000000002, 80%, 24%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-bold-sky:enabled:hover {
-  background-color: #0369a1;
+  background-color: hsla(201.60000000000002, 96%, 32%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-sky:enabled:focus-visible {
-  background-color: #0369a1;
+  background-color: hsla(201.60000000000002, 96%, 32%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-sky:enabled:active {
-  background-color: #0c4a6e;
+  background-color: hsla(201.60000000000002, 80%, 24%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-sky {
-  background-color: #0c4a6e;
+  background-color: hsla(201.60000000000002, 80%, 24%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #0c4a6e;
-  box-shadow: inset 0 0 0 3px #0c4a6e, 0 0px 0px 3px #f0f9ff;
+  border-color: hsla(201.60000000000002, 80%, 24%, 1);
+  box-shadow: inset 0 0 0 3px hsla(201.60000000000002, 80%, 24%, 1), 0 0px 0px 3px hsla(205.2, 100%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-bold-sky:enabled:hover {
-  background-color: #f0f9ff;
+  background-color: hsla(205.2, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-sky:enabled:focus-visible {
-  background-color: #f0f9ff;
+  background-color: hsla(205.2, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-sky:enabled:active {
-  background-color: #7dd3fc;
+  background-color: hsla(198.00000000000003, 95%, 74%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-sky {
-  background-color: rgba(240, 249, 255, 0.01);
-  color: #0ea5e9;
+  background-color: hsla(205.2, 100%, 97%, 0.01);
+  color: hsla(198.00000000000003, 89%, 48%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-sky:enabled:hover {
-  background-color: #0ea5e9;
+  background-color: hsla(198.00000000000003, 89%, 48%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-sky:enabled:focus-visible {
-  background-color: #0ea5e9;
+  background-color: hsla(198.00000000000003, 89%, 48%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-sky:enabled:active {
-  background-color: rgba(2, 132, 199, 0.85);
+  background-color: hsla(201.60000000000002, 98%, 39%, 0.85);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-sky:disabled {
-  background-color: rgba(240, 249, 255, 0.5);
-  color: rgba(72, 75, 77, 0.5);
+  background-color: hsla(205.2, 100%, 97%, 0.5);
+  color: hsla(205.2, 53%, 37%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .btn-outline-sky {
-  border-color: #0ea5e9;
+  border-color: hsla(198.00000000000003, 89%, 48%, 1);
   border-width: 1px;
   border-style: solid;
 }
 
 .dark .btn-outline-sky {
-  background-color: rgba(12, 74, 110, 0.01);
-  color: #38bdf8;
+  background-color: hsla(201.60000000000002, 80%, 24%, 0.01);
+  color: hsla(198.00000000000003, 93%, 60%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-sky:enabled:hover {
-  background-color: #0ea5e9;
+  background-color: hsla(198.00000000000003, 89%, 48%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-sky:enabled:focus-visible {
-  background-color: #0ea5e9;
+  background-color: hsla(198.00000000000003, 89%, 48%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-sky:enabled:active {
-  background-color: rgba(56, 189, 248, 0.85);
+  background-color: hsla(198.00000000000003, 89%, 48%, 0.8);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-sky:disabled {
-  background-color: rgba(240, 249, 255, 0.5);
-  color: rgba(72, 75, 77, 0.5);
+  background-color: hsla(205.2, 100%, 97%, 0.5);
+  color: hsla(205.2, 53%, 37%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-outline-sky {
-  border-color: #38bdf8;
+  border-color: hsla(198.00000000000003, 93%, 60%, 1);
 }
 
 .contrast .btn-outline-sky {
-  background-color: rgba(240, 249, 255, 0.01);
-  color: #0369a1;
+  background-color: hsla(205.2, 100%, 97%, 0.01);
+  color: hsla(201.60000000000002, 96%, 32%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #0369a1;
-  box-shadow: inset 0 0 0 3px #0369a1, 0 0px 0px 3px #f0f9ff;
+  border-color: hsla(201.60000000000002, 96%, 32%, 1);
+  box-shadow: inset 0 0 0 3px hsla(201.60000000000002, 96%, 32%, 1), 0 0px 0px 3px hsla(205.2, 100%, 97%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-outline-sky:enabled:hover {
-  background-color: #f0f9ff;
+  background-color: hsla(205.2, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-sky:enabled:focus-visible {
-  background-color: #f0f9ff;
+  background-color: hsla(205.2, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-sky:enabled:active {
-  background-color: #7dd3fc;
+  background-color: hsla(198.00000000000003, 95%, 74%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-sky {
-  background-color: rgba(12, 74, 110, 0.01);
-  color: #e0f2fe;
+  background-color: hsla(201.60000000000002, 80%, 24%, 0.01);
+  color: hsla(205.2, 94%, 94%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #bae6fd;
-  box-shadow: inset 0 0 0 3px #0369a1, 0 0px 0px 3px #e0f2fe;
+  border-color: hsla(201.60000000000002, 94%, 86%, 1);
+  box-shadow: inset 0 0 0 3px hsla(201.60000000000002, 96%, 32%, 1), 0 0px 0px 3px hsla(205.2, 94%, 94%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-outline-sky:enabled:hover {
-  background-color: #0369a1;
+  background-color: hsla(201.60000000000002, 96%, 32%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-sky:enabled:focus-visible {
-  background-color: #0369a1;
+  background-color: hsla(201.60000000000002, 96%, 32%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-sky:enabled:active {
-  background-color: rgba(12, 74, 110, 0.6);
+  background-color: hsla(201.60000000000002, 80%, 24%, 0.6);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-sky {
-  background-color: rgba(240, 249, 255, 0.01);
-  color: #0ea5e9;
+  background-color: hsla(205.2, 100%, 97%, 0.01);
+  color: hsla(198.00000000000003, 89%, 48%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-sky:enabled:hover {
-  background-color: #e0f2fe;
-  color: #0ea5e9;
+  background-color: hsla(205.2, 94%, 94%, 1);
+  color: hsla(198.00000000000003, 89%, 48%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-sky:enabled:focus-visible {
-  background-color: #e0f2fe;
-  color: #0ea5e9;
+  background-color: hsla(205.2, 94%, 94%, 1);
+  color: hsla(198.00000000000003, 89%, 48%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-sky:enabled:active {
-  background-color: rgba(186, 230, 253, 0.85);
-  color: #0284c7;
+  background-color: hsla(201.60000000000002, 94%, 86%, 0.85);
+  color: hsla(201.60000000000002, 98%, 39%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-sky:disabled {
-  background-color: rgba(240, 249, 255, 0.5);
-  color: rgba(72, 75, 77, 0.5);
+  background-color: hsla(205.2, 100%, 97%, 0.5);
+  color: hsla(205.2, 53%, 37%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-clear-sky {
-  background-color: rgba(12, 74, 110, 0.01);
-  color: #38bdf8;
+  background-color: hsla(201.60000000000002, 80%, 24%, 0.01);
+  color: hsla(198.00000000000003, 93%, 60%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-sky:enabled:hover {
-  background-color: rgba(2, 132, 199, 0.35);
-  color: #0284c7;
+  background-color: hsla(198.00000000000003, 95%, 74%, 0.25);
+  color: hsla(198.00000000000003, 89%, 48%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-sky:enabled:focus-visible {
-  background-color: rgba(2, 132, 199, 0.35);
-  color: #0284c7;
+  background-color: hsla(198.00000000000003, 95%, 74%, 0.25);
+  color: hsla(198.00000000000003, 89%, 48%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-sky:enabled:active {
-  background-color: rgba(3, 105, 161, 0.4);
-  color: #0ea5e9;
+  background-color: hsla(198.00000000000003, 93%, 60%, 0.2);
+  color: hsla(201.60000000000002, 98%, 39%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-sky:disabled {
-  background-color: rgba(3, 105, 161, 7);
-  color: rgba(152, 5334, 8179, 7);
+  background-color: hsla(201.60000000000002, 96%, 32%, 0.07);
+  color: hsla(201.60000000000002, 96%, 32%, 0.07);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-clear-sky {
-  background-color: rgba(240, 249, 255, 0.01);
-  color: #0369a1;
+  background-color: hsla(205.2, 100%, 97%, 0.01);
+  color: hsla(201.60000000000002, 96%, 32%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #0ea5e9;
-  box-shadow: inset 0 0 0 1px #0ea5e9, 0 0px 0px 2px #0c4a6e;
+  border-color: hsla(198.00000000000003, 89%, 48%, 1);
+  box-shadow: inset 0 0 0 1px hsla(198.00000000000003, 89%, 48%, 1), 0 0px 0px 2px hsla(201.60000000000002, 80%, 24%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-clear-sky:enabled:hover {
-  background-color: #0369a1;
+  background-color: hsla(201.60000000000002, 96%, 32%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-sky:enabled:focus-visible {
-  background-color: #0369a1;
+  background-color: hsla(201.60000000000002, 96%, 32%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-sky:enabled:active {
-  background-color: #0c4a6e;
+  background-color: hsla(201.60000000000002, 80%, 24%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-sky {
-  background-color: #0c4a6e;
+  background-color: hsla(201.60000000000002, 80%, 24%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #0c4a6e;
-  box-shadow: inset 0 0 0 1px #0c4a6e, 0 0px 0px 2px #f0f9ff;
+  border-color: hsla(201.60000000000002, 80%, 24%, 1);
+  box-shadow: inset 0 0 0 1px hsla(201.60000000000002, 80%, 24%, 1), 0 0px 0px 2px hsla(205.2, 100%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-clear-sky:enabled:hover {
-  background-color: #f0f9ff;
+  background-color: hsla(205.2, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-sky:enabled:focus-visible {
-  background-color: #f0f9ff;
+  background-color: hsla(205.2, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-sky:enabled:active {
-  background-color: #7dd3fc;
+  background-color: hsla(198.00000000000003, 95%, 74%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-blue {
-  background-color: rgba(219, 234, 254, 0.8);
-  color: rgba(72, 74, 77, 0.9);
+  background-color: hsla(216, 95%, 93%, 0.8);
+  color: hsla(212.39999999999998, 51%, 27%, 0.9);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-blue:enabled:hover {
-  background-color: #93c5fd;
-  color: #000;
+  background-color: hsla(212.39999999999998, 97%, 87%, 1);
+  color: hsla(212.39999999999998, 51%, 27%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-blue:enabled:focus-visible {
-  background-color: #93c5fd;
-  color: #000;
+  background-color: hsla(212.39999999999998, 97%, 87%, 1);
+  color: hsla(212.39999999999998, 51%, 27%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-blue:enabled:active {
-  background-color: #bfdbfe;
-  color: rgba(57, 66, 76, 1);
+  background-color: hsla(212.39999999999998, 94%, 68%, 0.65);
+  color: hsla(212.39999999999998, 50%, 8%, 0.65);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-blue:disabled {
-  background-color: #dbeafe;
-  color: rgba(66, 70, 76, 1);
+  background-color: hsla(216, 95%, 93%, 1);
+  color: hsla(216, 50%, 33%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-light-blue {
-  background-color: rgba(30, 58, 138, 0.4);
-  color: rgba(1524, 3251, 8890, 0.9);
+  background-color: hsla(223.2, 64%, 33%, 0.4);
+  color: hsla(223.2, 34%, 93%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-blue:enabled:hover {
-  background-color: #1e40af;
-  color: rgba(1524, 3251, 8890, 1);
+  background-color: hsla(226.8, 71%, 40%, 1);
+  color: hsla(226.8, 38%, 100%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-blue:enabled:focus-visible {
-  background-color: #1e40af;
-  color: rgba(1524, 3251, 8890, 1);
+  background-color: hsla(226.8, 71%, 40%, 1);
+  color: hsla(226.8, 38%, 100%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-blue:enabled:active {
-  background-color: #1d4ed8;
-  color: rgba(1473, 3962, 10973, 1);
+  background-color: hsla(223.2, 64%, 33%, 1);
+  color: hsla(223.2, 34%, 93%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-blue:disabled {
-  background-color: #1e3a8a;
-  color: rgba(1524, 2946, 7010, 1);
+  background-color: hsla(223.2, 64%, 33%, 1);
+  color: hsla(223.2, 34%, 93%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-light-blue {
-  background-color: #eff6ff;
+  background-color: hsla(212.39999999999998, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #3b82f6;
-  box-shadow: inset 0 0 0 1px #3b82f6, 0 0px 0px 1px #1e3a8a;
+  border-color: hsla(216, 91%, 60%, 1);
+  box-shadow: inset 0 0 0 1px hsla(216, 91%, 60%, 1), 0 0px 0px 1px hsla(223.2, 64%, 33%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-light-blue:enabled:hover {
-  background-color: #1d4ed8;
-  color: #FFF;
+  background-color: hsla(223.2, 76%, 48%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-blue:enabled:focus-visible {
-  background-color: #1d4ed8;
-  color: #FFF;
+  background-color: hsla(223.2, 76%, 48%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-blue:enabled:active {
-  background-color: #1e3a8a;
+  background-color: hsla(223.2, 64%, 33%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-blue {
-  background-color: #1e3a8a;
+  background-color: hsla(223.2, 64%, 33%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #1e3a8a;
-  box-shadow: inset 0 0 0 1px #1e3a8a, 0 0px 0px 1px #eff6ff;
+  border-color: hsla(223.2, 64%, 33%, 1);
+  box-shadow: inset 0 0 0 1px hsla(223.2, 64%, 33%, 1), 0 0px 0px 1px hsla(212.39999999999998, 100%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-light-blue:enabled:hover {
-  background-color: #eff6ff;
+  background-color: hsla(212.39999999999998, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-blue:enabled:focus-visible {
-  background-color: #eff6ff;
+  background-color: hsla(212.39999999999998, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-blue:enabled:active {
-  background-color: #93c5fd;
+  background-color: hsla(212.39999999999998, 96%, 78%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-blue {
-  background-color: #60a5fa;
-  color: rgba(29, 50, 75, 1);
+  background-color: hsla(212.39999999999998, 94%, 68%, 1);
+  color: hsla(212.39999999999998, 50%, 8%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-blue:enabled:hover {
-  background-color: #3b82f6;
-  color: #FFF;
+  background-color: hsla(216, 91%, 60%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-blue:enabled:focus-visible {
-  background-color: #3b82f6;
-  color: #FFF;
+  background-color: hsla(216, 91%, 60%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-blue:enabled:active {
-  background-color: #2563eb;
-  color: rgba(2997, 6604, 12497, 1);
+  background-color: hsla(219.6, 83%, 53%, 1);
+  color: hsla(216, 49%, 0%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-blue:disabled {
-  background-color: #bfdbfe;
-  color: rgba(57, 66, 76, 1);
+  background-color: hsla(212.39999999999998, 97%, 87%, 1);
+  color: hsla(212.39999999999998, 51%, 27%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-blue {
-  background-color: #3b82f6;
-  color: rgba(2997, 6604, 12497, 1);
+  background-color: hsla(216, 91%, 60%, 1);
+  color: hsla(216, 49%, 0%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-blue:enabled:hover {
-  background-color: #2563eb;
-  color: #FFF;
+  background-color: hsla(219.6, 83%, 53%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-blue:enabled:focus-visible {
-  background-color: #2563eb;
-  color: #FFF;
+  background-color: hsla(219.6, 83%, 53%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-blue:enabled:active {
-  background-color: rgba(37, 99, 235, 0.75);
-  color: #FFF;
+  background-color: hsla(219.6, 83%, 53%, 0.7);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-blue:disabled {
-  background-color: #1d4ed8;
-  color: rgba(1473, 3962, 10973, 1);
+  background-color: hsla(223.2, 76%, 48%, 1);
+  color: hsla(223.2, 45%, 0%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-blue {
-  background-color: #eff6ff;
+  background-color: hsla(212.39999999999998, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #3b82f6;
-  box-shadow: inset 0 0 0 1px #3b82f6, 0 0px 0px 2px #1e3a8a;
+  border-color: hsla(216, 91%, 60%, 1);
+  box-shadow: inset 0 0 0 1px hsla(216, 91%, 60%, 1), 0 0px 0px 2px hsla(223.2, 64%, 33%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-blue:enabled:hover {
-  background-color: #1d4ed8;
-  color: #FFF;
+  background-color: hsla(223.2, 76%, 48%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-blue:enabled:focus-visible {
-  background-color: #1d4ed8;
-  color: #FFF;
+  background-color: hsla(223.2, 76%, 48%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-blue:enabled:active {
-  background-color: #1e3a8a;
+  background-color: hsla(223.2, 64%, 33%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-blue {
-  background-color: #1e3a8a;
+  background-color: hsla(223.2, 64%, 33%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #1e3a8a;
-  box-shadow: inset 0 0 0 1px #1e3a8a, 0 0px 0px 2px #eff6ff;
+  border-color: hsla(223.2, 64%, 33%, 1);
+  box-shadow: inset 0 0 0 1px hsla(223.2, 64%, 33%, 1), 0 0px 0px 2px hsla(212.39999999999998, 100%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-blue:enabled:hover {
-  background-color: #eff6ff;
+  background-color: hsla(212.39999999999998, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-blue:enabled:focus-visible {
-  background-color: #eff6ff;
+  background-color: hsla(212.39999999999998, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-blue:enabled:active {
-  background-color: #93c5fd;
+  background-color: hsla(212.39999999999998, 96%, 78%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-blue {
-  background-color: rgba(29, 78, 216, 0.9);
-  color: rgba(1473, 3962, 10973, 0.9);
+  background-color: hsla(223.2, 76%, 48%, 0.9);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-blue:enabled:hover {
-  background-color: rgba(30, 64, 175, 0.8);
-  color: rgba(1524, 2946, 7010, 1);
+  background-color: hsla(226.8, 71%, 40%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-blue:enabled:focus-visible {
-  background-color: rgba(30, 64, 175, 0.8);
-  color: rgba(1524, 2946, 7010, 1);
+  background-color: hsla(226.8, 71%, 40%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-blue:enabled:active {
-  background-color: #1e40af;
-  color: rgba(1524, 3251, 8890, 1);
+  background-color: hsla(226.8, 71%, 40%, 1);
+  color: hsla(226.8, 38%, 100%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-blue:disabled {
-  background-color: rgba(30, 64, 175, 0.6);
-  color: rgba(1524, 3251, 8890, 0.6);
+  background-color: hsla(226.8, 71%, 40%, 0.6);
+  color: hsla(226.8, 42%, 90%, 0.6);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-bold-blue {
-  background-color: rgba(30, 58, 138, 0.9);
-  color: rgba(1524, 2946, 7010, 0.9);
+  background-color: hsla(223.2, 64%, 33%, 0.85);
+  color: hsla(223.2, 34%, 93%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-blue:enabled:hover {
-  background-color: rgba(30, 58, 138, 0.65);
+  background-color: hsla(223.2, 64%, 33%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-blue:enabled:focus-visible {
-  background-color: rgba(30, 58, 138, 0.65);
+  background-color: hsla(223.2, 64%, 33%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-blue:enabled:active {
-  background-color: #1e40af;
-  color: rgba(1524, 3251, 8890, 1);
+  background-color: hsla(223.2, 64%, 33%, 0.45);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-blue:disabled {
-  background-color: rgba(30, 58, 138, 0.4);
-  color: rgba(1524, 2946, 7010, 0.4);
+  background-color: hsla(223.2, 64%, 33%, 0.4);
+  color: hsla(223.2, 34%, 93%, 0.4);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-bold-blue {
-  background-color: #eff6ff;
+  background-color: hsla(212.39999999999998, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #3b82f6;
-  box-shadow: inset 0 0 0 3px #3b82f6, 0 0px 0px 3px #1e3a8a;
+  border-color: hsla(216, 91%, 60%, 1);
+  box-shadow: inset 0 0 0 3px hsla(216, 91%, 60%, 1), 0 0px 0px 3px hsla(223.2, 64%, 33%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-bold-blue:enabled:hover {
-  background-color: #1d4ed8;
-  color: #FFF;
+  background-color: hsla(223.2, 76%, 48%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-blue:enabled:focus-visible {
-  background-color: #1d4ed8;
-  color: #FFF;
+  background-color: hsla(223.2, 76%, 48%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-blue:enabled:active {
-  background-color: #1e3a8a;
+  background-color: hsla(223.2, 64%, 33%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-blue {
-  background-color: #1e3a8a;
+  background-color: hsla(223.2, 64%, 33%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #1e3a8a;
-  box-shadow: inset 0 0 0 3px #1e3a8a, 0 0px 0px 3px #eff6ff;
+  border-color: hsla(223.2, 64%, 33%, 1);
+  box-shadow: inset 0 0 0 3px hsla(223.2, 64%, 33%, 1), 0 0px 0px 3px hsla(212.39999999999998, 100%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-bold-blue:enabled:hover {
-  background-color: #eff6ff;
+  background-color: hsla(212.39999999999998, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-blue:enabled:focus-visible {
-  background-color: #eff6ff;
+  background-color: hsla(212.39999999999998, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-blue:enabled:active {
-  background-color: #93c5fd;
+  background-color: hsla(212.39999999999998, 96%, 78%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-blue {
-  background-color: rgba(239, 246, 255, 0.01);
-  color: #3b82f6;
+  background-color: hsla(212.39999999999998, 100%, 97%, 0.01);
+  color: hsla(216, 91%, 60%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-blue:enabled:hover {
-  background-color: #3b82f6;
-  color: #FFF;
+  background-color: hsla(216, 91%, 60%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-blue:enabled:focus-visible {
-  background-color: #3b82f6;
-  color: #FFF;
+  background-color: hsla(216, 91%, 60%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-blue:enabled:active {
-  background-color: rgba(37, 99, 235, 0.85);
-  color: #FFF;
+  background-color: hsla(219.6, 83%, 53%, 0.85);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-blue:disabled {
-  background-color: rgba(239, 246, 255, 0.5);
-  color: rgba(72, 74, 77, 0.5);
+  background-color: hsla(212.39999999999998, 100%, 97%, 0.5);
+  color: hsla(212.39999999999998, 53%, 37%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .btn-outline-blue {
-  border-color: #3b82f6;
+  border-color: hsla(216, 91%, 60%, 1);
   border-width: 1px;
   border-style: solid;
 }
 
 .dark .btn-outline-blue {
-  background-color: rgba(30, 58, 138, 0.01);
-  color: #60a5fa;
+  background-color: hsla(223.2, 64%, 33%, 0.01);
+  color: hsla(212.39999999999998, 94%, 68%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-blue:enabled:hover {
-  background-color: #3b82f6;
-  color: #FFF;
+  background-color: hsla(216, 91%, 60%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-blue:enabled:focus-visible {
-  background-color: #3b82f6;
-  color: #FFF;
+  background-color: hsla(216, 91%, 60%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-blue:enabled:active {
-  background-color: rgba(96, 165, 250, 0.85);
-  color: #FFF;
+  background-color: hsla(216, 91%, 60%, 0.8);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-blue:disabled {
-  background-color: rgba(239, 246, 255, 0.5);
-  color: rgba(72, 74, 77, 0.5);
+  background-color: hsla(212.39999999999998, 100%, 97%, 0.5);
+  color: hsla(212.39999999999998, 53%, 37%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-outline-blue {
-  border-color: #60a5fa;
+  border-color: hsla(212.39999999999998, 94%, 68%, 1);
 }
 
 .contrast .btn-outline-blue {
-  background-color: rgba(239, 246, 255, 0.01);
-  color: #1d4ed8;
+  background-color: hsla(212.39999999999998, 100%, 97%, 0.01);
+  color: hsla(223.2, 76%, 48%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #1d4ed8;
-  box-shadow: inset 0 0 0 3px #1d4ed8, 0 0px 0px 3px #eff6ff;
+  border-color: hsla(223.2, 76%, 48%, 1);
+  box-shadow: inset 0 0 0 3px hsla(223.2, 76%, 48%, 1), 0 0px 0px 3px hsla(212.39999999999998, 100%, 97%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-outline-blue:enabled:hover {
-  background-color: #eff6ff;
+  background-color: hsla(212.39999999999998, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-blue:enabled:focus-visible {
-  background-color: #eff6ff;
+  background-color: hsla(212.39999999999998, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-blue:enabled:active {
-  background-color: #93c5fd;
+  background-color: hsla(212.39999999999998, 96%, 78%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-blue {
-  background-color: rgba(30, 58, 138, 0.01);
-  color: #dbeafe;
+  background-color: hsla(223.2, 64%, 33%, 0.01);
+  color: hsla(216, 95%, 93%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #bfdbfe;
-  box-shadow: inset 0 0 0 3px #1d4ed8, 0 0px 0px 3px #dbeafe;
+  border-color: hsla(212.39999999999998, 97%, 87%, 1);
+  box-shadow: inset 0 0 0 3px hsla(223.2, 76%, 48%, 1), 0 0px 0px 3px hsla(216, 95%, 93%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-outline-blue:enabled:hover {
-  background-color: #1d4ed8;
-  color: #FFF;
+  background-color: hsla(223.2, 76%, 48%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-blue:enabled:focus-visible {
-  background-color: #1d4ed8;
-  color: #FFF;
+  background-color: hsla(223.2, 76%, 48%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-blue:enabled:active {
-  background-color: rgba(30, 58, 138, 0.6);
+  background-color: hsla(223.2, 64%, 33%, 0.6);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-blue {
-  background-color: rgba(239, 246, 255, 0.01);
-  color: #3b82f6;
+  background-color: hsla(212.39999999999998, 100%, 97%, 0.01);
+  color: hsla(216, 91%, 60%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-blue:enabled:hover {
-  background-color: #dbeafe;
-  color: #3b82f6;
+  background-color: hsla(216, 95%, 93%, 1);
+  color: hsla(216, 91%, 60%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-blue:enabled:focus-visible {
-  background-color: #dbeafe;
-  color: #3b82f6;
+  background-color: hsla(216, 95%, 93%, 1);
+  color: hsla(216, 91%, 60%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-blue:enabled:active {
-  background-color: rgba(191, 219, 254, 0.85);
-  color: #2563eb;
+  background-color: hsla(212.39999999999998, 97%, 87%, 0.85);
+  color: hsla(219.6, 83%, 53%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-blue:disabled {
-  background-color: rgba(239, 246, 255, 0.5);
-  color: rgba(72, 74, 77, 0.5);
+  background-color: hsla(212.39999999999998, 100%, 97%, 0.5);
+  color: hsla(212.39999999999998, 53%, 37%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-clear-blue {
-  background-color: rgba(30, 58, 138, 0.01);
-  color: #60a5fa;
+  background-color: hsla(223.2, 64%, 33%, 0.01);
+  color: hsla(212.39999999999998, 94%, 68%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-blue:enabled:hover {
-  background-color: rgba(37, 99, 235, 0.35);
-  color: #2563eb;
+  background-color: hsla(212.39999999999998, 96%, 78%, 0.25);
+  color: hsla(216, 91%, 60%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-blue:enabled:focus-visible {
-  background-color: rgba(37, 99, 235, 0.35);
-  color: #2563eb;
+  background-color: hsla(212.39999999999998, 96%, 78%, 0.25);
+  color: hsla(216, 91%, 60%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-blue:enabled:active {
-  background-color: rgba(29, 78, 216, 0.4);
-  color: #3b82f6;
+  background-color: hsla(212.39999999999998, 94%, 68%, 0.2);
+  color: hsla(219.6, 83%, 53%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-blue:disabled {
-  background-color: rgba(29, 78, 216, 7);
-  color: rgba(1473, 3962, 10973, 7);
+  background-color: hsla(223.2, 76%, 48%, 0.07);
+  color: hsla(223.2, 76%, 48%, 0.07);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-clear-blue {
-  background-color: rgba(239, 246, 255, 0.01);
-  color: #1d4ed8;
+  background-color: hsla(212.39999999999998, 100%, 97%, 0.01);
+  color: hsla(223.2, 76%, 48%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #3b82f6;
-  box-shadow: inset 0 0 0 1px #3b82f6, 0 0px 0px 2px #1e3a8a;
+  border-color: hsla(216, 91%, 60%, 1);
+  box-shadow: inset 0 0 0 1px hsla(216, 91%, 60%, 1), 0 0px 0px 2px hsla(223.2, 64%, 33%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-clear-blue:enabled:hover {
-  background-color: #1d4ed8;
-  color: #FFF;
+  background-color: hsla(223.2, 76%, 48%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-blue:enabled:focus-visible {
-  background-color: #1d4ed8;
-  color: #FFF;
+  background-color: hsla(223.2, 76%, 48%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-blue:enabled:active {
-  background-color: #1e3a8a;
+  background-color: hsla(223.2, 64%, 33%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-blue {
-  background-color: #1e3a8a;
+  background-color: hsla(223.2, 64%, 33%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #1e3a8a;
-  box-shadow: inset 0 0 0 1px #1e3a8a, 0 0px 0px 2px #eff6ff;
+  border-color: hsla(223.2, 64%, 33%, 1);
+  box-shadow: inset 0 0 0 1px hsla(223.2, 64%, 33%, 1), 0 0px 0px 2px hsla(212.39999999999998, 100%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-clear-blue:enabled:hover {
-  background-color: #eff6ff;
+  background-color: hsla(212.39999999999998, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-blue:enabled:focus-visible {
-  background-color: #eff6ff;
+  background-color: hsla(212.39999999999998, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-blue:enabled:active {
-  background-color: #93c5fd;
+  background-color: hsla(212.39999999999998, 96%, 78%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-indigo {
-  background-color: rgba(224, 231, 255, 0.8);
-  color: rgba(71, 73, 77, 0.9);
+  background-color: hsla(226.8, 100%, 94%, 0.8);
+  color: hsla(226.8, 56.00000000000001%, 39%, 0.9);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-indigo:enabled:hover {
-  background-color: #a5b4fc;
-  color: #000;
+  background-color: hsla(226.8, 96%, 89%, 1);
+  color: hsla(226.8, 50%, 28.999999999999996%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-indigo:enabled:focus-visible {
-  background-color: #a5b4fc;
-  color: #000;
+  background-color: hsla(226.8, 96%, 89%, 1);
+  color: hsla(226.8, 50%, 28.999999999999996%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-indigo:enabled:active {
-  background-color: #c7d2fe;
-  color: rgba(60, 63, 76, 1);
+  background-color: hsla(234, 89%, 74%, 0.65);
+  color: hsla(234, 48%, 14.000000000000002%, 0.65);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-indigo:disabled {
-  background-color: #e0e7ff;
-  color: rgba(67, 69, 77, 1);
+  background-color: hsla(226.8, 100%, 94%, 1);
+  color: hsla(226.8, 53%, 34%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-light-indigo {
-  background-color: rgba(49, 46, 129, 0.4);
-  color: rgba(2794, 2438, 8280, 0.9);
+  background-color: hsla(241.20000000000002, 47%, 34%, 0.4);
+  color: hsla(241.20000000000002, 25%, 94%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-indigo:enabled:hover {
-  background-color: #3730a3;
-  color: rgba(2794, 2438, 8280, 1);
+  background-color: hsla(244.8, 55.00000000000001%, 41%, 1);
+  color: hsla(244.8, 30%, 100%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-indigo:enabled:focus-visible {
-  background-color: #3730a3;
-  color: rgba(2794, 2438, 8280, 1);
+  background-color: hsla(244.8, 55.00000000000001%, 41%, 1);
+  color: hsla(244.8, 30%, 100%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-indigo:enabled:active {
-  background-color: #4338ca;
-  color: rgba(3404, 2845, 10262, 1);
+  background-color: hsla(241.20000000000002, 47%, 34%, 1);
+  color: hsla(241.20000000000002, 25%, 94%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-indigo:disabled {
-  background-color: #312e81;
-  color: rgba(2489, 2337, 6553, 1);
+  background-color: hsla(241.20000000000002, 47%, 34%, 1);
+  color: hsla(241.20000000000002, 25%, 94%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-light-indigo {
-  background-color: #eef2ff;
+  background-color: hsla(226.8, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #6366f1;
-  box-shadow: inset 0 0 0 1px #6366f1, 0 0px 0px 1px #312e81;
+  border-color: hsla(237.60000000000002, 84%, 67%, 1);
+  box-shadow: inset 0 0 0 1px hsla(237.60000000000002, 84%, 67%, 1), 0 0px 0px 1px hsla(241.20000000000002, 47%, 34%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-light-indigo:enabled:hover {
-  background-color: #4338ca;
-  color: #FFF;
+  background-color: hsla(244.8, 57.99999999999999%, 51%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-indigo:enabled:focus-visible {
-  background-color: #4338ca;
-  color: #FFF;
+  background-color: hsla(244.8, 57.99999999999999%, 51%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-indigo:enabled:active {
-  background-color: #312e81;
+  background-color: hsla(241.20000000000002, 47%, 34%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-indigo {
-  background-color: #312e81;
+  background-color: hsla(241.20000000000002, 47%, 34%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #312e81;
-  box-shadow: inset 0 0 0 1px #312e81, 0 0px 0px 1px #eef2ff;
+  border-color: hsla(241.20000000000002, 47%, 34%, 1);
+  box-shadow: inset 0 0 0 1px hsla(241.20000000000002, 47%, 34%, 1), 0 0px 0px 1px hsla(226.8, 100%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-light-indigo:enabled:hover {
-  background-color: #eef2ff;
+  background-color: hsla(226.8, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-indigo:enabled:focus-visible {
-  background-color: #eef2ff;
+  background-color: hsla(226.8, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-indigo:enabled:active {
-  background-color: #a5b4fc;
+  background-color: hsla(230.4, 94%, 82%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-indigo {
-  background-color: #818cf8;
-  color: rgba(39, 42, 74, 1);
+  background-color: hsla(234, 89%, 74%, 1);
+  color: hsla(234, 48%, 14.000000000000002%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-indigo:enabled:hover {
-  background-color: #6366f1;
-  color: #FFF;
+  background-color: hsla(237.60000000000002, 84%, 67%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-indigo:enabled:focus-visible {
-  background-color: #6366f1;
-  color: #FFF;
+  background-color: hsla(237.60000000000002, 84%, 67%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-indigo:enabled:active {
-  background-color: #4f46e5;
-  color: rgba(5029, 5182, 12243, 1);
+  background-color: hsla(244.8, 75%, 59%, 1);
+  color: hsla(237.60000000000002, 45%, 7.000000000000001%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-indigo:disabled {
-  background-color: #c7d2fe;
-  color: rgba(60, 63, 76, 1);
+  background-color: hsla(226.8, 96%, 89%, 1);
+  color: hsla(226.8, 50%, 28.999999999999996%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-indigo {
-  background-color: #6366f1;
-  color: rgba(5029, 5182, 12243, 1);
+  background-color: hsla(237.60000000000002, 84%, 67%, 1);
+  color: hsla(237.60000000000002, 45%, 7.000000000000001%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-indigo:enabled:hover {
-  background-color: #4f46e5;
-  color: #FFF;
+  background-color: hsla(244.8, 75%, 59%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-indigo:enabled:focus-visible {
-  background-color: #4f46e5;
-  color: #FFF;
+  background-color: hsla(244.8, 75%, 59%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-indigo:enabled:active {
-  background-color: rgba(79, 70, 229, 0.75);
-  color: #FFF;
+  background-color: hsla(244.8, 75%, 59%, 0.7);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-indigo:disabled {
-  background-color: #4338ca;
-  color: rgba(3404, 2845, 10262, 1);
+  background-color: hsla(244.8, 57.99999999999999%, 51%, 1);
+  color: hsla(244.8, 34%, 1%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-indigo {
-  background-color: #eef2ff;
+  background-color: hsla(226.8, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #6366f1;
-  box-shadow: inset 0 0 0 1px #6366f1, 0 0px 0px 2px #312e81;
+  border-color: hsla(237.60000000000002, 84%, 67%, 1);
+  box-shadow: inset 0 0 0 1px hsla(237.60000000000002, 84%, 67%, 1), 0 0px 0px 2px hsla(241.20000000000002, 47%, 34%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-indigo:enabled:hover {
-  background-color: #4338ca;
-  color: #FFF;
+  background-color: hsla(244.8, 57.99999999999999%, 51%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-indigo:enabled:focus-visible {
-  background-color: #4338ca;
-  color: #FFF;
+  background-color: hsla(244.8, 57.99999999999999%, 51%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-indigo:enabled:active {
-  background-color: #312e81;
+  background-color: hsla(241.20000000000002, 47%, 34%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-indigo {
-  background-color: #312e81;
+  background-color: hsla(241.20000000000002, 47%, 34%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #312e81;
-  box-shadow: inset 0 0 0 1px #312e81, 0 0px 0px 2px #eef2ff;
+  border-color: hsla(241.20000000000002, 47%, 34%, 1);
+  box-shadow: inset 0 0 0 1px hsla(241.20000000000002, 47%, 34%, 1), 0 0px 0px 2px hsla(226.8, 100%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-indigo:enabled:hover {
-  background-color: #eef2ff;
+  background-color: hsla(226.8, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-indigo:enabled:focus-visible {
-  background-color: #eef2ff;
+  background-color: hsla(226.8, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-indigo:enabled:active {
-  background-color: #a5b4fc;
+  background-color: hsla(230.4, 94%, 82%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-indigo {
-  background-color: rgba(67, 56, 202, 0.9);
-  color: rgba(3404, 2845, 10262, 0.9);
+  background-color: hsla(244.8, 57.99999999999999%, 51%, 0.9);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-indigo:enabled:hover {
-  background-color: rgba(55, 48, 163, 0.8);
-  color: rgba(2489, 2337, 6553, 1);
+  background-color: hsla(244.8, 55.00000000000001%, 41%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-indigo:enabled:focus-visible {
-  background-color: rgba(55, 48, 163, 0.8);
-  color: rgba(2489, 2337, 6553, 1);
+  background-color: hsla(244.8, 55.00000000000001%, 41%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-indigo:enabled:active {
-  background-color: #3730a3;
-  color: rgba(2794, 2438, 8280, 1);
+  background-color: hsla(244.8, 55.00000000000001%, 41%, 1);
+  color: hsla(244.8, 30%, 100%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-indigo:disabled {
-  background-color: rgba(55, 48, 163, 0.6);
-  color: rgba(2794, 2438, 8280, 0.6);
+  background-color: hsla(244.8, 55.00000000000001%, 41%, 0.6);
+  color: hsla(244.8, 33%, 91%, 0.6);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-bold-indigo {
-  background-color: rgba(49, 46, 129, 0.9);
-  color: rgba(2489, 2337, 6553, 0.9);
+  background-color: hsla(241.20000000000002, 47%, 34%, 0.85);
+  color: hsla(241.20000000000002, 25%, 94%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-indigo:enabled:hover {
-  background-color: rgba(49, 46, 129, 0.65);
+  background-color: hsla(241.20000000000002, 47%, 34%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-indigo:enabled:focus-visible {
-  background-color: rgba(49, 46, 129, 0.65);
+  background-color: hsla(241.20000000000002, 47%, 34%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-indigo:enabled:active {
-  background-color: #3730a3;
-  color: rgba(2794, 2438, 8280, 1);
+  background-color: hsla(241.20000000000002, 47%, 34%, 0.45);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-indigo:disabled {
-  background-color: rgba(49, 46, 129, 0.4);
-  color: rgba(2489, 2337, 6553, 0.4);
+  background-color: hsla(241.20000000000002, 47%, 34%, 0.4);
+  color: hsla(241.20000000000002, 25%, 94%, 0.4);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-bold-indigo {
-  background-color: #eef2ff;
+  background-color: hsla(226.8, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #6366f1;
-  box-shadow: inset 0 0 0 3px #6366f1, 0 0px 0px 3px #312e81;
+  border-color: hsla(237.60000000000002, 84%, 67%, 1);
+  box-shadow: inset 0 0 0 3px hsla(237.60000000000002, 84%, 67%, 1), 0 0px 0px 3px hsla(241.20000000000002, 47%, 34%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-bold-indigo:enabled:hover {
-  background-color: #4338ca;
-  color: #FFF;
+  background-color: hsla(244.8, 57.99999999999999%, 51%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-indigo:enabled:focus-visible {
-  background-color: #4338ca;
-  color: #FFF;
+  background-color: hsla(244.8, 57.99999999999999%, 51%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-indigo:enabled:active {
-  background-color: #312e81;
+  background-color: hsla(241.20000000000002, 47%, 34%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-indigo {
-  background-color: #312e81;
+  background-color: hsla(241.20000000000002, 47%, 34%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #312e81;
-  box-shadow: inset 0 0 0 3px #312e81, 0 0px 0px 3px #eef2ff;
+  border-color: hsla(241.20000000000002, 47%, 34%, 1);
+  box-shadow: inset 0 0 0 3px hsla(241.20000000000002, 47%, 34%, 1), 0 0px 0px 3px hsla(226.8, 100%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-bold-indigo:enabled:hover {
-  background-color: #eef2ff;
+  background-color: hsla(226.8, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-indigo:enabled:focus-visible {
-  background-color: #eef2ff;
+  background-color: hsla(226.8, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-indigo:enabled:active {
-  background-color: #a5b4fc;
+  background-color: hsla(230.4, 94%, 82%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-indigo {
-  background-color: rgba(238, 242, 255, 0.01);
-  color: #6366f1;
+  background-color: hsla(226.8, 100%, 97%, 0.01);
+  color: hsla(237.60000000000002, 84%, 67%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-indigo:enabled:hover {
-  background-color: #6366f1;
-  color: #FFF;
+  background-color: hsla(237.60000000000002, 84%, 67%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-indigo:enabled:focus-visible {
-  background-color: #6366f1;
-  color: #FFF;
+  background-color: hsla(237.60000000000002, 84%, 67%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-indigo:enabled:active {
-  background-color: rgba(79, 70, 229, 0.85);
-  color: #FFF;
+  background-color: hsla(244.8, 75%, 59%, 0.85);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-indigo:disabled {
-  background-color: rgba(238, 242, 255, 0.5);
-  color: rgba(71, 73, 77, 0.5);
+  background-color: hsla(226.8, 100%, 97%, 0.5);
+  color: hsla(226.8, 53%, 37%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .btn-outline-indigo {
-  border-color: #6366f1;
+  border-color: hsla(237.60000000000002, 84%, 67%, 1);
   border-width: 1px;
   border-style: solid;
 }
 
 .dark .btn-outline-indigo {
-  background-color: rgba(49, 46, 129, 0.01);
-  color: #818cf8;
+  background-color: hsla(241.20000000000002, 47%, 34%, 0.01);
+  color: hsla(234, 89%, 74%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-indigo:enabled:hover {
-  background-color: #6366f1;
-  color: #FFF;
+  background-color: hsla(237.60000000000002, 84%, 67%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-indigo:enabled:focus-visible {
-  background-color: #6366f1;
-  color: #FFF;
+  background-color: hsla(237.60000000000002, 84%, 67%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-indigo:enabled:active {
-  background-color: rgba(129, 140, 248, 0.85);
-  color: #FFF;
+  background-color: hsla(237.60000000000002, 84%, 67%, 0.8);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-indigo:disabled {
-  background-color: rgba(238, 242, 255, 0.5);
-  color: rgba(71, 73, 77, 0.5);
+  background-color: hsla(226.8, 100%, 97%, 0.5);
+  color: hsla(226.8, 53%, 37%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-outline-indigo {
-  border-color: #818cf8;
+  border-color: hsla(234, 89%, 74%, 1);
 }
 
 .contrast .btn-outline-indigo {
-  background-color: rgba(238, 242, 255, 0.01);
-  color: #4338ca;
+  background-color: hsla(226.8, 100%, 97%, 0.01);
+  color: hsla(244.8, 57.99999999999999%, 51%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #4338ca;
-  box-shadow: inset 0 0 0 3px #4338ca, 0 0px 0px 3px #eef2ff;
+  border-color: hsla(244.8, 57.99999999999999%, 51%, 1);
+  box-shadow: inset 0 0 0 3px hsla(244.8, 57.99999999999999%, 51%, 1), 0 0px 0px 3px hsla(226.8, 100%, 97%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-outline-indigo:enabled:hover {
-  background-color: #eef2ff;
+  background-color: hsla(226.8, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-indigo:enabled:focus-visible {
-  background-color: #eef2ff;
+  background-color: hsla(226.8, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-indigo:enabled:active {
-  background-color: #a5b4fc;
+  background-color: hsla(230.4, 94%, 82%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-indigo {
-  background-color: rgba(49, 46, 129, 0.01);
-  color: #e0e7ff;
+  background-color: hsla(241.20000000000002, 47%, 34%, 0.01);
+  color: hsla(226.8, 100%, 94%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #c7d2fe;
-  box-shadow: inset 0 0 0 3px #4338ca, 0 0px 0px 3px #e0e7ff;
+  border-color: hsla(226.8, 96%, 89%, 1);
+  box-shadow: inset 0 0 0 3px hsla(244.8, 57.99999999999999%, 51%, 1), 0 0px 0px 3px hsla(226.8, 100%, 94%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-outline-indigo:enabled:hover {
-  background-color: #4338ca;
-  color: #FFF;
+  background-color: hsla(244.8, 57.99999999999999%, 51%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-indigo:enabled:focus-visible {
-  background-color: #4338ca;
-  color: #FFF;
+  background-color: hsla(244.8, 57.99999999999999%, 51%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-indigo:enabled:active {
-  background-color: rgba(49, 46, 129, 0.6);
+  background-color: hsla(241.20000000000002, 47%, 34%, 0.6);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-indigo {
-  background-color: rgba(238, 242, 255, 0.01);
-  color: #6366f1;
+  background-color: hsla(226.8, 100%, 97%, 0.01);
+  color: hsla(237.60000000000002, 84%, 67%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-indigo:enabled:hover {
-  background-color: #e0e7ff;
-  color: #6366f1;
+  background-color: hsla(226.8, 100%, 94%, 1);
+  color: hsla(237.60000000000002, 84%, 67%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-indigo:enabled:focus-visible {
-  background-color: #e0e7ff;
-  color: #6366f1;
+  background-color: hsla(226.8, 100%, 94%, 1);
+  color: hsla(237.60000000000002, 84%, 67%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-indigo:enabled:active {
-  background-color: rgba(199, 210, 254, 0.85);
-  color: #4f46e5;
+  background-color: hsla(226.8, 96%, 89%, 0.85);
+  color: hsla(244.8, 75%, 59%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-indigo:disabled {
-  background-color: rgba(238, 242, 255, 0.5);
-  color: rgba(71, 73, 77, 0.5);
+  background-color: hsla(226.8, 100%, 97%, 0.5);
+  color: hsla(226.8, 53%, 37%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-clear-indigo {
-  background-color: rgba(49, 46, 129, 0.01);
-  color: #818cf8;
+  background-color: hsla(241.20000000000002, 47%, 34%, 0.01);
+  color: hsla(234, 89%, 74%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-indigo:enabled:hover {
-  background-color: rgba(79, 70, 229, 0.35);
-  color: #4f46e5;
+  background-color: hsla(230.4, 94%, 82%, 0.25);
+  color: hsla(237.60000000000002, 84%, 67%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-indigo:enabled:focus-visible {
-  background-color: rgba(79, 70, 229, 0.35);
-  color: #4f46e5;
+  background-color: hsla(230.4, 94%, 82%, 0.25);
+  color: hsla(237.60000000000002, 84%, 67%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-indigo:enabled:active {
-  background-color: rgba(67, 56, 202, 0.4);
-  color: #6366f1;
+  background-color: hsla(234, 89%, 74%, 0.2);
+  color: hsla(244.8, 75%, 59%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-indigo:disabled {
-  background-color: rgba(67, 56, 202, 7);
-  color: rgba(3404, 2845, 10262, 7);
+  background-color: hsla(244.8, 57.99999999999999%, 51%, 0.07);
+  color: hsla(244.8, 57.99999999999999%, 51%, 0.07);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-clear-indigo {
-  background-color: rgba(238, 242, 255, 0.01);
-  color: #4338ca;
+  background-color: hsla(226.8, 100%, 97%, 0.01);
+  color: hsla(244.8, 57.99999999999999%, 51%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #6366f1;
-  box-shadow: inset 0 0 0 1px #6366f1, 0 0px 0px 2px #312e81;
+  border-color: hsla(237.60000000000002, 84%, 67%, 1);
+  box-shadow: inset 0 0 0 1px hsla(237.60000000000002, 84%, 67%, 1), 0 0px 0px 2px hsla(241.20000000000002, 47%, 34%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-clear-indigo:enabled:hover {
-  background-color: #4338ca;
-  color: #FFF;
+  background-color: hsla(244.8, 57.99999999999999%, 51%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-indigo:enabled:focus-visible {
-  background-color: #4338ca;
-  color: #FFF;
+  background-color: hsla(244.8, 57.99999999999999%, 51%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-indigo:enabled:active {
-  background-color: #312e81;
+  background-color: hsla(241.20000000000002, 47%, 34%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-indigo {
-  background-color: #312e81;
+  background-color: hsla(241.20000000000002, 47%, 34%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #312e81;
-  box-shadow: inset 0 0 0 1px #312e81, 0 0px 0px 2px #eef2ff;
+  border-color: hsla(241.20000000000002, 47%, 34%, 1);
+  box-shadow: inset 0 0 0 1px hsla(241.20000000000002, 47%, 34%, 1), 0 0px 0px 2px hsla(226.8, 100%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-clear-indigo:enabled:hover {
-  background-color: #eef2ff;
+  background-color: hsla(226.8, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-indigo:enabled:focus-visible {
-  background-color: #eef2ff;
+  background-color: hsla(226.8, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-indigo:enabled:active {
-  background-color: #a5b4fc;
+  background-color: hsla(230.4, 94%, 82%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-violet {
-  background-color: rgba(237, 233, 254, 0.8);
-  color: rgba(74, 73, 77, 0.9);
+  background-color: hsla(251.99999999999997, 91%, 95%, 0.8);
+  color: hsla(251.99999999999997, 50%, 32%, 0.9);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-violet:enabled:hover {
-  background-color: #c4b5fd;
-  color: #000;
+  background-color: hsla(251.99999999999997, 95%, 92%, 1);
+  color: hsla(251.99999999999997, 50%, 32%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-violet:enabled:focus-visible {
-  background-color: #c4b5fd;
-  color: #000;
+  background-color: hsla(251.99999999999997, 95%, 92%, 1);
+  color: hsla(251.99999999999997, 50%, 32%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-violet:enabled:active {
-  background-color: #ddd6fe;
-  color: rgba(66, 64, 76, 1);
+  background-color: hsla(255.6, 92%, 76%, 0.65);
+  color: hsla(255.6, 50%, 16%, 0.65);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-violet:disabled {
-  background-color: #ede9fe;
-  color: rgba(71, 70, 76, 1);
+  background-color: hsla(251.99999999999997, 91%, 95%, 1);
+  color: hsla(251.99999999999997, 49%, 35%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-light-violet {
-  background-color: rgba(76, 29, 149, 0.4);
-  color: rgba(4623, 1676, 9246, 0.9);
+  background-color: hsla(262.8, 67%, 35%, 0.4);
+  color: hsla(262.8, 36%, 95%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-violet:enabled:hover {
-  background-color: #5b21b6;
-  color: rgba(4623, 1676, 9246, 1);
+  background-color: hsla(262.8, 69%, 42%, 1);
+  color: hsla(262.8, 37%, 100%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-violet:enabled:focus-visible {
-  background-color: #5b21b6;
-  color: rgba(4623, 1676, 9246, 1);
+  background-color: hsla(262.8, 69%, 42%, 1);
+  color: hsla(262.8, 37%, 100%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-violet:enabled:active {
-  background-color: #6d28d9;
-  color: rgba(5537, 2032, 11024, 1);
+  background-color: hsla(262.8, 67%, 35%, 1);
+  color: hsla(262.8, 36%, 95%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-violet:disabled {
-  background-color: #4c1d95;
-  color: rgba(3861, 1473, 7569, 1);
+  background-color: hsla(262.8, 67%, 35%, 1);
+  color: hsla(262.8, 36%, 95%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-light-violet {
-  background-color: #f5f3ff;
+  background-color: hsla(248.39999999999998, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #8b5cf6;
-  box-shadow: inset 0 0 0 1px #8b5cf6, 0 0px 0px 1px #4c1d95;
+  border-color: hsla(259.2, 90%, 66%, 1);
+  box-shadow: inset 0 0 0 1px hsla(259.2, 90%, 66%, 1), 0 0px 0px 1px hsla(262.8, 67%, 35%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-light-violet:enabled:hover {
-  background-color: #6d28d9;
-  color: #FFF;
+  background-color: hsla(262.8, 70%, 50%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-violet:enabled:focus-visible {
-  background-color: #6d28d9;
-  color: #FFF;
+  background-color: hsla(262.8, 70%, 50%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-violet:enabled:active {
-  background-color: #4c1d95;
+  background-color: hsla(262.8, 67%, 35%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-violet {
-  background-color: #4c1d95;
+  background-color: hsla(262.8, 67%, 35%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #4c1d95;
-  box-shadow: inset 0 0 0 1px #4c1d95, 0 0px 0px 1px #f5f3ff;
+  border-color: hsla(262.8, 67%, 35%, 1);
+  box-shadow: inset 0 0 0 1px hsla(262.8, 67%, 35%, 1), 0 0px 0px 1px hsla(248.39999999999998, 100%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-light-violet:enabled:hover {
-  background-color: #f5f3ff;
+  background-color: hsla(248.39999999999998, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-violet:enabled:focus-visible {
-  background-color: #f5f3ff;
+  background-color: hsla(248.39999999999998, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-violet:enabled:active {
-  background-color: #c4b5fd;
+  background-color: hsla(251.99999999999997, 95%, 85%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-violet {
-  background-color: #a78bfa;
-  color: rgba(50, 42, 75, 1);
+  background-color: hsla(255.6, 92%, 76%, 1);
+  color: hsla(255.6, 50%, 16%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-violet:enabled:hover {
-  background-color: #8b5cf6;
-  color: #FFF;
+  background-color: hsla(259.2, 90%, 66%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-violet:enabled:focus-visible {
-  background-color: #8b5cf6;
-  color: #FFF;
+  background-color: hsla(259.2, 90%, 66%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-violet:enabled:active {
-  background-color: #7c3aed;
-  color: rgba(7061, 4674, 12497, 1);
+  background-color: hsla(262.8, 83%, 57.99999999999999%, 1);
+  color: hsla(259.2, 48%, 6%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-violet:disabled {
-  background-color: #ddd6fe;
-  color: rgba(66, 64, 76, 1);
+  background-color: hsla(251.99999999999997, 95%, 92%, 1);
+  color: hsla(251.99999999999997, 50%, 32%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-violet {
-  background-color: #8b5cf6;
-  color: rgba(7061, 4674, 12497, 1);
+  background-color: hsla(259.2, 90%, 66%, 1);
+  color: hsla(259.2, 48%, 6%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-violet:enabled:hover {
-  background-color: #7c3aed;
-  color: #FFF;
+  background-color: hsla(262.8, 83%, 57.99999999999999%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-violet:enabled:focus-visible {
-  background-color: #7c3aed;
-  color: #FFF;
+  background-color: hsla(262.8, 83%, 57.99999999999999%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-violet:enabled:active {
-  background-color: rgba(124, 58, 237, 0.75);
-  color: #FFF;
+  background-color: hsla(262.8, 83%, 57.99999999999999%, 0.7);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-violet:disabled {
-  background-color: #6d28d9;
-  color: rgba(5537, 2032, 11024, 1);
+  background-color: hsla(262.8, 70%, 50%, 1);
+  color: hsla(262.8, 41%, 0%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-violet {
-  background-color: #f5f3ff;
+  background-color: hsla(248.39999999999998, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #8b5cf6;
-  box-shadow: inset 0 0 0 1px #8b5cf6, 0 0px 0px 2px #4c1d95;
+  border-color: hsla(259.2, 90%, 66%, 1);
+  box-shadow: inset 0 0 0 1px hsla(259.2, 90%, 66%, 1), 0 0px 0px 2px hsla(262.8, 67%, 35%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-violet:enabled:hover {
-  background-color: #6d28d9;
-  color: #FFF;
+  background-color: hsla(262.8, 70%, 50%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-violet:enabled:focus-visible {
-  background-color: #6d28d9;
-  color: #FFF;
+  background-color: hsla(262.8, 70%, 50%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-violet:enabled:active {
-  background-color: #4c1d95;
+  background-color: hsla(262.8, 67%, 35%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-violet {
-  background-color: #4c1d95;
+  background-color: hsla(262.8, 67%, 35%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #4c1d95;
-  box-shadow: inset 0 0 0 1px #4c1d95, 0 0px 0px 2px #f5f3ff;
+  border-color: hsla(262.8, 67%, 35%, 1);
+  box-shadow: inset 0 0 0 1px hsla(262.8, 67%, 35%, 1), 0 0px 0px 2px hsla(248.39999999999998, 100%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-violet:enabled:hover {
-  background-color: #f5f3ff;
+  background-color: hsla(248.39999999999998, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-violet:enabled:focus-visible {
-  background-color: #f5f3ff;
+  background-color: hsla(248.39999999999998, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-violet:enabled:active {
-  background-color: #c4b5fd;
+  background-color: hsla(251.99999999999997, 95%, 85%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-violet {
-  background-color: rgba(109, 40, 217, 0.9);
-  color: rgba(5537, 2032, 11024, 0.9);
+  background-color: hsla(262.8, 70%, 50%, 0.9);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-violet:enabled:hover {
-  background-color: rgba(91, 33, 182, 0.8);
-  color: rgba(3861, 1473, 7569, 1);
+  background-color: hsla(262.8, 69%, 42%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-violet:enabled:focus-visible {
-  background-color: rgba(91, 33, 182, 0.8);
-  color: rgba(3861, 1473, 7569, 1);
+  background-color: hsla(262.8, 69%, 42%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-violet:enabled:active {
-  background-color: #5b21b6;
-  color: rgba(4623, 1676, 9246, 1);
+  background-color: hsla(262.8, 69%, 42%, 1);
+  color: hsla(262.8, 37%, 100%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-violet:disabled {
-  background-color: rgba(91, 33, 182, 0.6);
-  color: rgba(4623, 1676, 9246, 0.6);
+  background-color: hsla(262.8, 69%, 42%, 0.6);
+  color: hsla(262.8, 41%, 92%, 0.6);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-bold-violet {
-  background-color: rgba(76, 29, 149, 0.9);
-  color: rgba(3861, 1473, 7569, 0.9);
+  background-color: hsla(262.8, 67%, 35%, 0.85);
+  color: hsla(262.8, 36%, 95%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-violet:enabled:hover {
-  background-color: rgba(76, 29, 149, 0.65);
+  background-color: hsla(262.8, 67%, 35%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-violet:enabled:focus-visible {
-  background-color: rgba(76, 29, 149, 0.65);
+  background-color: hsla(262.8, 67%, 35%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-violet:enabled:active {
-  background-color: #5b21b6;
-  color: rgba(4623, 1676, 9246, 1);
+  background-color: hsla(262.8, 67%, 35%, 0.45);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-violet:disabled {
-  background-color: rgba(76, 29, 149, 0.4);
-  color: rgba(3861, 1473, 7569, 0.4);
+  background-color: hsla(262.8, 67%, 35%, 0.4);
+  color: hsla(262.8, 36%, 95%, 0.4);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-bold-violet {
-  background-color: #f5f3ff;
+  background-color: hsla(248.39999999999998, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #8b5cf6;
-  box-shadow: inset 0 0 0 3px #8b5cf6, 0 0px 0px 3px #4c1d95;
+  border-color: hsla(259.2, 90%, 66%, 1);
+  box-shadow: inset 0 0 0 3px hsla(259.2, 90%, 66%, 1), 0 0px 0px 3px hsla(262.8, 67%, 35%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-bold-violet:enabled:hover {
-  background-color: #6d28d9;
-  color: #FFF;
+  background-color: hsla(262.8, 70%, 50%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-violet:enabled:focus-visible {
-  background-color: #6d28d9;
-  color: #FFF;
+  background-color: hsla(262.8, 70%, 50%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-violet:enabled:active {
-  background-color: #4c1d95;
+  background-color: hsla(262.8, 67%, 35%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-violet {
-  background-color: #4c1d95;
+  background-color: hsla(262.8, 67%, 35%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #4c1d95;
-  box-shadow: inset 0 0 0 3px #4c1d95, 0 0px 0px 3px #f5f3ff;
+  border-color: hsla(262.8, 67%, 35%, 1);
+  box-shadow: inset 0 0 0 3px hsla(262.8, 67%, 35%, 1), 0 0px 0px 3px hsla(248.39999999999998, 100%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-bold-violet:enabled:hover {
-  background-color: #f5f3ff;
+  background-color: hsla(248.39999999999998, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-violet:enabled:focus-visible {
-  background-color: #f5f3ff;
+  background-color: hsla(248.39999999999998, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-violet:enabled:active {
-  background-color: #c4b5fd;
+  background-color: hsla(251.99999999999997, 95%, 85%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-violet {
-  background-color: rgba(245, 243, 255, 0.01);
-  color: #8b5cf6;
+  background-color: hsla(248.39999999999998, 100%, 98%, 0.01);
+  color: hsla(259.2, 90%, 66%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-violet:enabled:hover {
-  background-color: #8b5cf6;
-  color: #FFF;
+  background-color: hsla(259.2, 90%, 66%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-violet:enabled:focus-visible {
-  background-color: #8b5cf6;
-  color: #FFF;
+  background-color: hsla(259.2, 90%, 66%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-violet:enabled:active {
-  background-color: rgba(124, 58, 237, 0.85);
-  color: #FFF;
+  background-color: hsla(262.8, 83%, 57.99999999999999%, 0.85);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-violet:disabled {
-  background-color: rgba(245, 243, 255, 0.5);
-  color: rgba(74, 73, 77, 0.5);
+  background-color: hsla(248.39999999999998, 100%, 98%, 0.5);
+  color: hsla(248.39999999999998, 53%, 38%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .btn-outline-violet {
-  border-color: #8b5cf6;
+  border-color: hsla(259.2, 90%, 66%, 1);
   border-width: 1px;
   border-style: solid;
 }
 
 .dark .btn-outline-violet {
-  background-color: rgba(76, 29, 149, 0.01);
-  color: #a78bfa;
+  background-color: hsla(262.8, 67%, 35%, 0.01);
+  color: hsla(255.6, 92%, 76%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-violet:enabled:hover {
-  background-color: #8b5cf6;
-  color: #FFF;
+  background-color: hsla(259.2, 90%, 66%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-violet:enabled:focus-visible {
-  background-color: #8b5cf6;
-  color: #FFF;
+  background-color: hsla(259.2, 90%, 66%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-violet:enabled:active {
-  background-color: rgba(167, 139, 250, 0.85);
-  color: #FFF;
+  background-color: hsla(259.2, 90%, 66%, 0.8);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-violet:disabled {
-  background-color: rgba(245, 243, 255, 0.5);
-  color: rgba(74, 73, 77, 0.5);
+  background-color: hsla(248.39999999999998, 100%, 98%, 0.5);
+  color: hsla(248.39999999999998, 53%, 38%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-outline-violet {
-  border-color: #a78bfa;
+  border-color: hsla(255.6, 92%, 76%, 1);
 }
 
 .contrast .btn-outline-violet {
-  background-color: rgba(245, 243, 255, 0.01);
-  color: #6d28d9;
+  background-color: hsla(248.39999999999998, 100%, 98%, 0.01);
+  color: hsla(262.8, 70%, 50%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #6d28d9;
-  box-shadow: inset 0 0 0 3px #6d28d9, 0 0px 0px 3px #f5f3ff;
+  border-color: hsla(262.8, 70%, 50%, 1);
+  box-shadow: inset 0 0 0 3px hsla(262.8, 70%, 50%, 1), 0 0px 0px 3px hsla(248.39999999999998, 100%, 98%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-outline-violet:enabled:hover {
-  background-color: #f5f3ff;
+  background-color: hsla(248.39999999999998, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-violet:enabled:focus-visible {
-  background-color: #f5f3ff;
+  background-color: hsla(248.39999999999998, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-violet:enabled:active {
-  background-color: #c4b5fd;
+  background-color: hsla(251.99999999999997, 95%, 85%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-violet {
-  background-color: rgba(76, 29, 149, 0.01);
-  color: #ede9fe;
+  background-color: hsla(262.8, 67%, 35%, 0.01);
+  color: hsla(251.99999999999997, 91%, 95%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #ddd6fe;
-  box-shadow: inset 0 0 0 3px #6d28d9, 0 0px 0px 3px #ede9fe;
+  border-color: hsla(251.99999999999997, 95%, 92%, 1);
+  box-shadow: inset 0 0 0 3px hsla(262.8, 70%, 50%, 1), 0 0px 0px 3px hsla(251.99999999999997, 91%, 95%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-outline-violet:enabled:hover {
-  background-color: #6d28d9;
-  color: #FFF;
+  background-color: hsla(262.8, 70%, 50%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-violet:enabled:focus-visible {
-  background-color: #6d28d9;
-  color: #FFF;
+  background-color: hsla(262.8, 70%, 50%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-violet:enabled:active {
-  background-color: rgba(76, 29, 149, 0.6);
+  background-color: hsla(262.8, 67%, 35%, 0.6);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-violet {
-  background-color: rgba(245, 243, 255, 0.01);
-  color: #8b5cf6;
+  background-color: hsla(248.39999999999998, 100%, 98%, 0.01);
+  color: hsla(259.2, 90%, 66%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-violet:enabled:hover {
-  background-color: #ede9fe;
-  color: #8b5cf6;
+  background-color: hsla(251.99999999999997, 91%, 95%, 1);
+  color: hsla(259.2, 90%, 66%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-violet:enabled:focus-visible {
-  background-color: #ede9fe;
-  color: #8b5cf6;
+  background-color: hsla(251.99999999999997, 91%, 95%, 1);
+  color: hsla(259.2, 90%, 66%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-violet:enabled:active {
-  background-color: rgba(221, 214, 254, 0.85);
-  color: #7c3aed;
+  background-color: hsla(251.99999999999997, 95%, 92%, 0.85);
+  color: hsla(262.8, 83%, 57.99999999999999%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-violet:disabled {
-  background-color: rgba(245, 243, 255, 0.5);
-  color: rgba(74, 73, 77, 0.5);
+  background-color: hsla(248.39999999999998, 100%, 98%, 0.5);
+  color: hsla(248.39999999999998, 53%, 38%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-clear-violet {
-  background-color: rgba(76, 29, 149, 0.01);
-  color: #a78bfa;
+  background-color: hsla(262.8, 67%, 35%, 0.01);
+  color: hsla(255.6, 92%, 76%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-violet:enabled:hover {
-  background-color: rgba(124, 58, 237, 0.35);
-  color: #7c3aed;
+  background-color: hsla(251.99999999999997, 95%, 85%, 0.25);
+  color: hsla(259.2, 90%, 66%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-violet:enabled:focus-visible {
-  background-color: rgba(124, 58, 237, 0.35);
-  color: #7c3aed;
+  background-color: hsla(251.99999999999997, 95%, 85%, 0.25);
+  color: hsla(259.2, 90%, 66%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-violet:enabled:active {
-  background-color: rgba(109, 40, 217, 0.4);
-  color: #8b5cf6;
+  background-color: hsla(255.6, 92%, 76%, 0.2);
+  color: hsla(262.8, 83%, 57.99999999999999%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-violet:disabled {
-  background-color: rgba(109, 40, 217, 7);
-  color: rgba(5537, 2032, 11024, 7);
+  background-color: hsla(262.8, 70%, 50%, 0.07);
+  color: hsla(262.8, 70%, 50%, 0.07);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-clear-violet {
-  background-color: rgba(245, 243, 255, 0.01);
-  color: #6d28d9;
+  background-color: hsla(248.39999999999998, 100%, 98%, 0.01);
+  color: hsla(262.8, 70%, 50%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #8b5cf6;
-  box-shadow: inset 0 0 0 1px #8b5cf6, 0 0px 0px 2px #4c1d95;
+  border-color: hsla(259.2, 90%, 66%, 1);
+  box-shadow: inset 0 0 0 1px hsla(259.2, 90%, 66%, 1), 0 0px 0px 2px hsla(262.8, 67%, 35%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-clear-violet:enabled:hover {
-  background-color: #6d28d9;
-  color: #FFF;
+  background-color: hsla(262.8, 70%, 50%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-violet:enabled:focus-visible {
-  background-color: #6d28d9;
-  color: #FFF;
+  background-color: hsla(262.8, 70%, 50%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-violet:enabled:active {
-  background-color: #4c1d95;
+  background-color: hsla(262.8, 67%, 35%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-violet {
-  background-color: #4c1d95;
+  background-color: hsla(262.8, 67%, 35%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #4c1d95;
-  box-shadow: inset 0 0 0 1px #4c1d95, 0 0px 0px 2px #f5f3ff;
+  border-color: hsla(262.8, 67%, 35%, 1);
+  box-shadow: inset 0 0 0 1px hsla(262.8, 67%, 35%, 1), 0 0px 0px 2px hsla(248.39999999999998, 100%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-clear-violet:enabled:hover {
-  background-color: #f5f3ff;
+  background-color: hsla(248.39999999999998, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-violet:enabled:focus-visible {
-  background-color: #f5f3ff;
+  background-color: hsla(248.39999999999998, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-violet:enabled:active {
-  background-color: #c4b5fd;
+  background-color: hsla(251.99999999999997, 95%, 85%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-purple {
-  background-color: rgba(243, 232, 255, 0.8);
-  color: rgba(75, 74, 77, 0.9);
+  background-color: hsla(270, 100%, 95%, 0.8);
+  color: hsla(270, 53%, 32%, 0.9);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-purple:enabled:hover {
-  background-color: #d8b4fe;
-  color: #000;
+  background-color: hsla(270, 100%, 92%, 1);
+  color: hsla(270, 53%, 32%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-purple:enabled:focus-visible {
-  background-color: #d8b4fe;
-  color: #000;
+  background-color: hsla(270, 100%, 92%, 1);
+  color: hsla(270, 53%, 32%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-purple:enabled:active {
-  background-color: #e9d5ff;
-  color: rgba(70, 64, 77, 1);
+  background-color: hsla(270, 95%, 75%, 0.65);
+  color: hsla(270, 56.00000000000001%, 25%, 0.65);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-purple:disabled {
-  background-color: #f3e8ff;
-  color: rgba(73, 70, 77, 1);
+  background-color: hsla(270, 100%, 95%, 1);
+  color: hsla(270, 53%, 35%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-light-purple {
-  background-color: rgba(88, 28, 135, 0.4);
-  color: rgba(5436, 1676, 8534, 0.9);
+  background-color: hsla(273.6, 66%, 32%, 0.4);
+  color: hsla(273.6, 35%, 92%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-purple:enabled:hover {
-  background-color: #6b21a8;
-  color: rgba(5436, 1676, 8534, 1);
+  background-color: hsla(273.6, 67%, 39%, 1);
+  color: hsla(273.6, 36%, 99%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-purple:enabled:focus-visible {
-  background-color: #6b21a8;
-  color: rgba(5436, 1676, 8534, 1);
+  background-color: hsla(273.6, 67%, 39%, 1);
+  color: hsla(273.6, 36%, 99%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-purple:enabled:active {
-  background-color: #7e22ce;
-  color: rgba(6401, 1727, 10465, 1);
+  background-color: hsla(273.6, 66%, 32%, 1);
+  color: hsla(273.6, 35%, 92%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-purple:disabled {
-  background-color: #581c87;
-  color: rgba(4470, 1422, 6858, 1);
+  background-color: hsla(273.6, 66%, 32%, 1);
+  color: hsla(273.6, 35%, 92%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-light-purple {
-  background-color: #faf5ff;
+  background-color: hsla(270, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #a855f7;
-  box-shadow: inset 0 0 0 1px #a855f7, 0 0px 0px 1px #581c87;
+  border-color: hsla(270, 91%, 65%, 1);
+  box-shadow: inset 0 0 0 1px hsla(270, 91%, 65%, 1), 0 0px 0px 1px hsla(273.6, 66%, 32%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-light-purple:enabled:hover {
-  background-color: #7e22ce;
-  color: #FFF;
+  background-color: hsla(273.6, 72%, 47%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-purple:enabled:focus-visible {
-  background-color: #7e22ce;
-  color: #FFF;
+  background-color: hsla(273.6, 72%, 47%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-purple:enabled:active {
-  background-color: #581c87;
+  background-color: hsla(273.6, 66%, 32%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-purple {
-  background-color: #581c87;
+  background-color: hsla(273.6, 66%, 32%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #581c87;
-  box-shadow: inset 0 0 0 1px #581c87, 0 0px 0px 1px #faf5ff;
+  border-color: hsla(273.6, 66%, 32%, 1);
+  box-shadow: inset 0 0 0 1px hsla(273.6, 66%, 32%, 1), 0 0px 0px 1px hsla(270, 100%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-light-purple:enabled:hover {
-  background-color: #faf5ff;
+  background-color: hsla(270, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-purple:enabled:focus-visible {
-  background-color: #faf5ff;
+  background-color: hsla(270, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-purple:enabled:active {
-  background-color: #d8b4fe;
+  background-color: hsla(270, 97%, 85%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-purple {
-  background-color: #c084fc;
-  color: rgba(58, 40, 76, 1);
+  background-color: hsla(270, 95%, 75%, 1);
+  color: hsla(270, 50%, 15%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-purple:enabled:hover {
-  background-color: #a855f7;
-  color: #FFF;
+  background-color: hsla(270, 91%, 65%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-purple:enabled:focus-visible {
-  background-color: #a855f7;
-  color: #FFF;
+  background-color: hsla(270, 91%, 65%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-purple:enabled:active {
-  background-color: #9333ea;
-  color: rgba(8534, 4318, 12548, 1);
+  background-color: hsla(270, 81%, 56.00000000000001%, 1);
+  color: hsla(270, 49%, 5%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-purple:disabled {
-  background-color: #e9d5ff;
-  color: rgba(70, 64, 77, 1);
+  background-color: hsla(270, 100%, 92%, 1);
+  color: hsla(270, 53%, 32%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-purple {
-  background-color: #a855f7;
-  color: rgba(8534, 4318, 12548, 1);
+  background-color: hsla(270, 91%, 65%, 1);
+  color: hsla(270, 49%, 5%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-purple:enabled:hover {
-  background-color: #9333ea;
-  color: #FFF;
+  background-color: hsla(270, 81%, 56.00000000000001%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-purple:enabled:focus-visible {
-  background-color: #9333ea;
-  color: #FFF;
+  background-color: hsla(270, 81%, 56.00000000000001%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-purple:enabled:active {
-  background-color: rgba(147, 51, 234, 0.75);
-  color: #FFF;
+  background-color: hsla(270, 81%, 56.00000000000001%, 0.7);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-purple:disabled {
-  background-color: #7e22ce;
-  color: rgba(6401, 1727, 10465, 1);
+  background-color: hsla(273.6, 72%, 47%, 1);
+  color: hsla(273.6, 43%, 0%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-purple {
-  background-color: #faf5ff;
+  background-color: hsla(270, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #a855f7;
-  box-shadow: inset 0 0 0 1px #a855f7, 0 0px 0px 2px #581c87;
+  border-color: hsla(270, 91%, 65%, 1);
+  box-shadow: inset 0 0 0 1px hsla(270, 91%, 65%, 1), 0 0px 0px 2px hsla(273.6, 66%, 32%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-purple:enabled:hover {
-  background-color: #7e22ce;
-  color: #FFF;
+  background-color: hsla(273.6, 72%, 47%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-purple:enabled:focus-visible {
-  background-color: #7e22ce;
-  color: #FFF;
+  background-color: hsla(273.6, 72%, 47%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-purple:enabled:active {
-  background-color: #581c87;
+  background-color: hsla(273.6, 66%, 32%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-purple {
-  background-color: #581c87;
+  background-color: hsla(273.6, 66%, 32%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #581c87;
-  box-shadow: inset 0 0 0 1px #581c87, 0 0px 0px 2px #faf5ff;
+  border-color: hsla(273.6, 66%, 32%, 1);
+  box-shadow: inset 0 0 0 1px hsla(273.6, 66%, 32%, 1), 0 0px 0px 2px hsla(270, 100%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-purple:enabled:hover {
-  background-color: #faf5ff;
+  background-color: hsla(270, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-purple:enabled:focus-visible {
-  background-color: #faf5ff;
+  background-color: hsla(270, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-purple:enabled:active {
-  background-color: #d8b4fe;
+  background-color: hsla(270, 97%, 85%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-purple {
-  background-color: rgba(126, 34, 206, 0.9);
-  color: rgba(6401, 1727, 10465, 0.9);
+  background-color: hsla(273.6, 72%, 47%, 0.9);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-purple:enabled:hover {
-  background-color: rgba(107, 33, 168, 0.8);
-  color: rgba(4470, 1422, 6858, 1);
+  background-color: hsla(273.6, 67%, 39%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-purple:enabled:focus-visible {
-  background-color: rgba(107, 33, 168, 0.8);
-  color: rgba(4470, 1422, 6858, 1);
+  background-color: hsla(273.6, 67%, 39%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-purple:enabled:active {
-  background-color: #6b21a8;
-  color: rgba(5436, 1676, 8534, 1);
+  background-color: hsla(273.6, 67%, 39%, 1);
+  color: hsla(273.6, 36%, 99%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-purple:disabled {
-  background-color: rgba(107, 33, 168, 0.6);
-  color: rgba(5436, 1676, 8534, 0.6);
+  background-color: hsla(273.6, 67%, 39%, 0.6);
+  color: hsla(273.6, 40%, 89%, 0.6);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-bold-purple {
-  background-color: rgba(88, 28, 135, 0.9);
-  color: rgba(4470, 1422, 6858, 0.9);
+  background-color: hsla(273.6, 66%, 32%, 0.85);
+  color: hsla(273.6, 35%, 92%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-purple:enabled:hover {
-  background-color: rgba(88, 28, 135, 0.65);
+  background-color: hsla(273.6, 66%, 32%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-purple:enabled:focus-visible {
-  background-color: rgba(88, 28, 135, 0.65);
+  background-color: hsla(273.6, 66%, 32%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-purple:enabled:active {
-  background-color: #6b21a8;
-  color: rgba(5436, 1676, 8534, 1);
+  background-color: hsla(273.6, 66%, 32%, 0.45);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-purple:disabled {
-  background-color: rgba(88, 28, 135, 0.4);
-  color: rgba(4470, 1422, 6858, 0.4);
+  background-color: hsla(273.6, 66%, 32%, 0.4);
+  color: hsla(273.6, 35%, 92%, 0.4);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-bold-purple {
-  background-color: #faf5ff;
+  background-color: hsla(270, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #a855f7;
-  box-shadow: inset 0 0 0 3px #a855f7, 0 0px 0px 3px #581c87;
+  border-color: hsla(270, 91%, 65%, 1);
+  box-shadow: inset 0 0 0 3px hsla(270, 91%, 65%, 1), 0 0px 0px 3px hsla(273.6, 66%, 32%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-bold-purple:enabled:hover {
-  background-color: #7e22ce;
-  color: #FFF;
+  background-color: hsla(273.6, 72%, 47%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-purple:enabled:focus-visible {
-  background-color: #7e22ce;
-  color: #FFF;
+  background-color: hsla(273.6, 72%, 47%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-purple:enabled:active {
-  background-color: #581c87;
+  background-color: hsla(273.6, 66%, 32%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-purple {
-  background-color: #581c87;
+  background-color: hsla(273.6, 66%, 32%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #581c87;
-  box-shadow: inset 0 0 0 3px #581c87, 0 0px 0px 3px #faf5ff;
+  border-color: hsla(273.6, 66%, 32%, 1);
+  box-shadow: inset 0 0 0 3px hsla(273.6, 66%, 32%, 1), 0 0px 0px 3px hsla(270, 100%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-bold-purple:enabled:hover {
-  background-color: #faf5ff;
+  background-color: hsla(270, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-purple:enabled:focus-visible {
-  background-color: #faf5ff;
+  background-color: hsla(270, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-purple:enabled:active {
-  background-color: #d8b4fe;
+  background-color: hsla(270, 97%, 85%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-purple {
-  background-color: rgba(250, 245, 255, 0.01);
-  color: #a855f7;
+  background-color: hsla(270, 100%, 98%, 0.01);
+  color: hsla(270, 91%, 65%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-purple:enabled:hover {
-  background-color: #a855f7;
-  color: #FFF;
+  background-color: hsla(270, 91%, 65%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-purple:enabled:focus-visible {
-  background-color: #a855f7;
-  color: #FFF;
+  background-color: hsla(270, 91%, 65%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-purple:enabled:active {
-  background-color: rgba(147, 51, 234, 0.85);
-  color: #FFF;
+  background-color: hsla(270, 81%, 56.00000000000001%, 0.85);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-purple:disabled {
-  background-color: rgba(250, 245, 255, 0.5);
-  color: rgba(75, 74, 77, 0.5);
+  background-color: hsla(270, 100%, 98%, 0.5);
+  color: hsla(270, 53%, 38%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .btn-outline-purple {
-  border-color: #a855f7;
+  border-color: hsla(270, 91%, 65%, 1);
   border-width: 1px;
   border-style: solid;
 }
 
 .dark .btn-outline-purple {
-  background-color: rgba(88, 28, 135, 0.01);
-  color: #c084fc;
+  background-color: hsla(273.6, 66%, 32%, 0.01);
+  color: hsla(270, 95%, 75%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-purple:enabled:hover {
-  background-color: #a855f7;
-  color: #FFF;
+  background-color: hsla(270, 91%, 65%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-purple:enabled:focus-visible {
-  background-color: #a855f7;
-  color: #FFF;
+  background-color: hsla(270, 91%, 65%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-purple:enabled:active {
-  background-color: rgba(192, 132, 252, 0.85);
-  color: #FFF;
+  background-color: hsla(270, 91%, 65%, 0.8);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-purple:disabled {
-  background-color: rgba(250, 245, 255, 0.5);
-  color: rgba(75, 74, 77, 0.5);
+  background-color: hsla(270, 100%, 98%, 0.5);
+  color: hsla(270, 53%, 38%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-outline-purple {
-  border-color: #c084fc;
+  border-color: hsla(270, 95%, 75%, 1);
 }
 
 .contrast .btn-outline-purple {
-  background-color: rgba(250, 245, 255, 0.01);
-  color: #7e22ce;
+  background-color: hsla(270, 100%, 98%, 0.01);
+  color: hsla(273.6, 72%, 47%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #7e22ce;
-  box-shadow: inset 0 0 0 3px #7e22ce, 0 0px 0px 3px #faf5ff;
+  border-color: hsla(273.6, 72%, 47%, 1);
+  box-shadow: inset 0 0 0 3px hsla(273.6, 72%, 47%, 1), 0 0px 0px 3px hsla(270, 100%, 98%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-outline-purple:enabled:hover {
-  background-color: #faf5ff;
+  background-color: hsla(270, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-purple:enabled:focus-visible {
-  background-color: #faf5ff;
+  background-color: hsla(270, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-purple:enabled:active {
-  background-color: #d8b4fe;
+  background-color: hsla(270, 97%, 85%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-purple {
-  background-color: rgba(88, 28, 135, 0.01);
-  color: #f3e8ff;
+  background-color: hsla(273.6, 66%, 32%, 0.01);
+  color: hsla(270, 100%, 95%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #e9d5ff;
-  box-shadow: inset 0 0 0 3px #7e22ce, 0 0px 0px 3px #f3e8ff;
+  border-color: hsla(270, 100%, 92%, 1);
+  box-shadow: inset 0 0 0 3px hsla(273.6, 72%, 47%, 1), 0 0px 0px 3px hsla(270, 100%, 95%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-outline-purple:enabled:hover {
-  background-color: #7e22ce;
-  color: #FFF;
+  background-color: hsla(273.6, 72%, 47%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-purple:enabled:focus-visible {
-  background-color: #7e22ce;
-  color: #FFF;
+  background-color: hsla(273.6, 72%, 47%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-purple:enabled:active {
-  background-color: rgba(88, 28, 135, 0.6);
+  background-color: hsla(273.6, 66%, 32%, 0.6);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-purple {
-  background-color: rgba(250, 245, 255, 0.01);
-  color: #a855f7;
+  background-color: hsla(270, 100%, 98%, 0.01);
+  color: hsla(270, 91%, 65%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-purple:enabled:hover {
-  background-color: #f3e8ff;
-  color: #a855f7;
+  background-color: hsla(270, 100%, 95%, 1);
+  color: hsla(270, 91%, 65%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-purple:enabled:focus-visible {
-  background-color: #f3e8ff;
-  color: #a855f7;
+  background-color: hsla(270, 100%, 95%, 1);
+  color: hsla(270, 91%, 65%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-purple:enabled:active {
-  background-color: rgba(233, 213, 255, 0.85);
-  color: #9333ea;
+  background-color: hsla(270, 100%, 92%, 0.85);
+  color: hsla(270, 81%, 56.00000000000001%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-purple:disabled {
-  background-color: rgba(250, 245, 255, 0.5);
-  color: rgba(75, 74, 77, 0.5);
+  background-color: hsla(270, 100%, 98%, 0.5);
+  color: hsla(270, 53%, 38%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-clear-purple {
-  background-color: rgba(88, 28, 135, 0.01);
-  color: #c084fc;
+  background-color: hsla(273.6, 66%, 32%, 0.01);
+  color: hsla(270, 95%, 75%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-purple:enabled:hover {
-  background-color: rgba(147, 51, 234, 0.35);
-  color: #9333ea;
+  background-color: hsla(270, 97%, 85%, 0.25);
+  color: hsla(270, 91%, 65%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-purple:enabled:focus-visible {
-  background-color: rgba(147, 51, 234, 0.35);
-  color: #9333ea;
+  background-color: hsla(270, 97%, 85%, 0.25);
+  color: hsla(270, 91%, 65%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-purple:enabled:active {
-  background-color: rgba(126, 34, 206, 0.4);
-  color: #a855f7;
+  background-color: hsla(270, 95%, 75%, 0.2);
+  color: hsla(270, 81%, 56.00000000000001%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-purple:disabled {
-  background-color: rgba(126, 34, 206, 7);
-  color: rgba(6401, 1727, 10465, 7);
+  background-color: hsla(273.6, 72%, 47%, 0.07);
+  color: hsla(273.6, 72%, 47%, 0.07);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-clear-purple {
-  background-color: rgba(250, 245, 255, 0.01);
-  color: #7e22ce;
+  background-color: hsla(270, 100%, 98%, 0.01);
+  color: hsla(273.6, 72%, 47%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #a855f7;
-  box-shadow: inset 0 0 0 1px #a855f7, 0 0px 0px 2px #581c87;
+  border-color: hsla(270, 91%, 65%, 1);
+  box-shadow: inset 0 0 0 1px hsla(270, 91%, 65%, 1), 0 0px 0px 2px hsla(273.6, 66%, 32%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-clear-purple:enabled:hover {
-  background-color: #7e22ce;
-  color: #FFF;
+  background-color: hsla(273.6, 72%, 47%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-purple:enabled:focus-visible {
-  background-color: #7e22ce;
-  color: #FFF;
+  background-color: hsla(273.6, 72%, 47%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-purple:enabled:active {
-  background-color: #581c87;
+  background-color: hsla(273.6, 66%, 32%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-purple {
-  background-color: #581c87;
+  background-color: hsla(273.6, 66%, 32%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #581c87;
-  box-shadow: inset 0 0 0 1px #581c87, 0 0px 0px 2px #faf5ff;
+  border-color: hsla(273.6, 66%, 32%, 1);
+  box-shadow: inset 0 0 0 1px hsla(273.6, 66%, 32%, 1), 0 0px 0px 2px hsla(270, 100%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-clear-purple:enabled:hover {
-  background-color: #faf5ff;
+  background-color: hsla(270, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-purple:enabled:focus-visible {
-  background-color: #faf5ff;
+  background-color: hsla(270, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-purple:enabled:active {
-  background-color: #d8b4fe;
+  background-color: hsla(270, 97%, 85%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-fuchsia {
-  background-color: rgba(250, 232, 255, 0.8);
-  color: rgba(76, 73, 77, 0.9);
+  background-color: hsla(288, 100%, 95%, 0.8);
+  color: hsla(288, 50%, 31%, 0.9);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-fuchsia:enabled:hover {
-  background-color: #f0abfc;
-  color: #000;
+  background-color: hsla(288, 96%, 91%, 1);
+  color: hsla(288, 50%, 31%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-fuchsia:enabled:focus-visible {
-  background-color: #f0abfc;
-  color: #000;
+  background-color: hsla(288, 96%, 91%, 1);
+  color: hsla(288, 50%, 31%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-fuchsia:enabled:active {
-  background-color: #f5d0fe;
-  color: rgba(74, 62, 76, 1);
+  background-color: hsla(291.6, 91%, 73%, 0.65);
+  color: hsla(291.6, 49%, 13%, 0.65);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-fuchsia:disabled {
-  background-color: #fae8ff;
-  color: rgba(75, 70, 77, 1);
+  background-color: hsla(288, 100%, 95%, 1);
+  color: hsla(288, 53%, 35%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-light-fuchsia {
-  background-color: rgba(112, 26, 117, 0.4);
-  color: rgba(6807, 1270, 7264, 0.9);
+  background-color: hsla(295.2, 64%, 28.000000000000004%, 0.4);
+  color: hsla(295.2, 34%, 88%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-fuchsia:enabled:hover {
-  background-color: #86198f;
-  color: rgba(6807, 1270, 7264, 1);
+  background-color: hsla(295.2, 70%, 33%, 1);
+  color: hsla(295.2, 37%, 93%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-fuchsia:enabled:focus-visible {
-  background-color: #86198f;
-  color: rgba(6807, 1270, 7264, 1);
+  background-color: hsla(295.2, 70%, 33%, 1);
+  color: hsla(295.2, 37%, 93%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-fuchsia:enabled:active {
-  background-color: #a21caf;
-  color: rgba(8230, 1422, 8890, 1);
+  background-color: hsla(295.2, 64%, 28.000000000000004%, 1);
+  color: hsla(295.2, 34%, 88%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-fuchsia:disabled {
-  background-color: #701a75;
-  color: rgba(5690, 1321, 5944, 1);
+  background-color: hsla(295.2, 64%, 28.000000000000004%, 1);
+  color: hsla(295.2, 34%, 88%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-light-fuchsia {
-  background-color: #fdf4ff;
+  background-color: hsla(288, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #d946ef;
-  box-shadow: inset 0 0 0 1px #d946ef, 0 0px 0px 1px #701a75;
+  border-color: hsla(291.6, 84%, 61%, 1);
+  box-shadow: inset 0 0 0 1px hsla(291.6, 84%, 61%, 1), 0 0px 0px 1px hsla(295.2, 64%, 28.000000000000004%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-light-fuchsia:enabled:hover {
-  background-color: #a21caf;
+  background-color: hsla(295.2, 72%, 40%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-fuchsia:enabled:focus-visible {
-  background-color: #a21caf;
+  background-color: hsla(295.2, 72%, 40%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-fuchsia:enabled:active {
-  background-color: #701a75;
+  background-color: hsla(295.2, 64%, 28.000000000000004%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-fuchsia {
-  background-color: #701a75;
+  background-color: hsla(295.2, 64%, 28.000000000000004%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #701a75;
-  box-shadow: inset 0 0 0 1px #701a75, 0 0px 0px 1px #fdf4ff;
+  border-color: hsla(295.2, 64%, 28.000000000000004%, 1);
+  box-shadow: inset 0 0 0 1px hsla(295.2, 64%, 28.000000000000004%, 1), 0 0px 0px 1px hsla(288, 100%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-light-fuchsia:enabled:hover {
-  background-color: #fdf4ff;
+  background-color: hsla(288, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-fuchsia:enabled:focus-visible {
-  background-color: #fdf4ff;
+  background-color: hsla(288, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-fuchsia:enabled:active {
-  background-color: #f0abfc;
+  background-color: hsla(291.6, 93%, 83%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-fuchsia {
-  background-color: #e879f9;
-  color: rgba(70, 36, 75, 1);
+  background-color: hsla(291.6, 91%, 73%, 1);
+  color: hsla(291.6, 49%, 13%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-fuchsia:enabled:hover {
-  background-color: #d946ef;
-  color: #FFF;
+  background-color: hsla(291.6, 84%, 61%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-fuchsia:enabled:focus-visible {
-  background-color: #d946ef;
-  color: #FFF;
+  background-color: hsla(291.6, 84%, 61%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-fuchsia:enabled:active {
-  background-color: #c026d3;
-  color: rgba(11024, 3556, 12141, 1);
+  background-color: hsla(295.2, 69%, 49%, 1);
+  color: hsla(291.6, 45%, 1%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-fuchsia:disabled {
-  background-color: #f5d0fe;
-  color: rgba(74, 62, 76, 1);
+  background-color: hsla(288, 96%, 91%, 1);
+  color: hsla(288, 50%, 31%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-fuchsia {
-  background-color: #d946ef;
-  color: rgba(11024, 3556, 12141, 1);
+  background-color: hsla(291.6, 84%, 61%, 1);
+  color: hsla(291.6, 45%, 1%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-fuchsia:enabled:hover {
-  background-color: #c026d3;
-  color: #FFF;
+  background-color: hsla(295.2, 69%, 49%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-fuchsia:enabled:focus-visible {
-  background-color: #c026d3;
-  color: #FFF;
+  background-color: hsla(295.2, 69%, 49%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-fuchsia:enabled:active {
-  background-color: rgba(192, 38, 211, 0.75);
-  color: #FFF;
+  background-color: hsla(295.2, 69%, 49%, 0.7);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-fuchsia:disabled {
-  background-color: #a21caf;
-  color: rgba(8230, 1422, 8890, 1);
+  background-color: hsla(295.2, 72%, 40%, 1);
+  color: hsla(295.2, 39%, 100%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-fuchsia {
-  background-color: #fdf4ff;
+  background-color: hsla(288, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #d946ef;
-  box-shadow: inset 0 0 0 1px #d946ef, 0 0px 0px 2px #701a75;
+  border-color: hsla(291.6, 84%, 61%, 1);
+  box-shadow: inset 0 0 0 1px hsla(291.6, 84%, 61%, 1), 0 0px 0px 2px hsla(295.2, 64%, 28.000000000000004%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-fuchsia:enabled:hover {
-  background-color: #a21caf;
+  background-color: hsla(295.2, 72%, 40%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-fuchsia:enabled:focus-visible {
-  background-color: #a21caf;
+  background-color: hsla(295.2, 72%, 40%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-fuchsia:enabled:active {
-  background-color: #701a75;
+  background-color: hsla(295.2, 64%, 28.000000000000004%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-fuchsia {
-  background-color: #701a75;
+  background-color: hsla(295.2, 64%, 28.000000000000004%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #701a75;
-  box-shadow: inset 0 0 0 1px #701a75, 0 0px 0px 2px #fdf4ff;
+  border-color: hsla(295.2, 64%, 28.000000000000004%, 1);
+  box-shadow: inset 0 0 0 1px hsla(295.2, 64%, 28.000000000000004%, 1), 0 0px 0px 2px hsla(288, 100%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-fuchsia:enabled:hover {
-  background-color: #fdf4ff;
+  background-color: hsla(288, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-fuchsia:enabled:focus-visible {
-  background-color: #fdf4ff;
+  background-color: hsla(288, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-fuchsia:enabled:active {
-  background-color: #f0abfc;
+  background-color: hsla(291.6, 93%, 83%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-fuchsia {
-  background-color: rgba(162, 28, 175, 0.9);
-  color: rgba(8230, 1422, 8890, 0.9);
+  background-color: hsla(295.2, 72%, 40%, 0.9);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-fuchsia:enabled:hover {
-  background-color: rgba(134, 25, 143, 0.8);
-  color: rgba(5690, 1321, 5944, 1);
+  background-color: hsla(295.2, 70%, 33%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-fuchsia:enabled:focus-visible {
-  background-color: rgba(134, 25, 143, 0.8);
-  color: rgba(5690, 1321, 5944, 1);
+  background-color: hsla(295.2, 70%, 33%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-fuchsia:enabled:active {
-  background-color: #86198f;
-  color: rgba(6807, 1270, 7264, 1);
+  background-color: hsla(295.2, 70%, 33%, 1);
+  color: hsla(295.2, 37%, 93%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-fuchsia:disabled {
-  background-color: rgba(134, 25, 143, 0.6);
-  color: rgba(6807, 1270, 7264, 0.6);
+  background-color: hsla(295.2, 70%, 33%, 0.6);
+  color: hsla(295.2, 37%, 93%, 0.6);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-bold-fuchsia {
-  background-color: rgba(112, 26, 117, 0.9);
-  color: rgba(5690, 1321, 5944, 0.9);
+  background-color: hsla(295.2, 64%, 28.000000000000004%, 0.85);
+  color: hsla(295.2, 34%, 88%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-fuchsia:enabled:hover {
-  background-color: rgba(112, 26, 117, 0.65);
+  background-color: hsla(295.2, 64%, 28.000000000000004%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-fuchsia:enabled:focus-visible {
-  background-color: rgba(112, 26, 117, 0.65);
+  background-color: hsla(295.2, 64%, 28.000000000000004%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-fuchsia:enabled:active {
-  background-color: #86198f;
-  color: rgba(6807, 1270, 7264, 1);
+  background-color: hsla(295.2, 64%, 28.000000000000004%, 0.45);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-fuchsia:disabled {
-  background-color: rgba(112, 26, 117, 0.4);
-  color: rgba(5690, 1321, 5944, 0.4);
+  background-color: hsla(295.2, 64%, 28.000000000000004%, 0.4);
+  color: hsla(295.2, 34%, 88%, 0.4);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-bold-fuchsia {
-  background-color: #fdf4ff;
+  background-color: hsla(288, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #d946ef;
-  box-shadow: inset 0 0 0 3px #d946ef, 0 0px 0px 3px #701a75;
+  border-color: hsla(291.6, 84%, 61%, 1);
+  box-shadow: inset 0 0 0 3px hsla(291.6, 84%, 61%, 1), 0 0px 0px 3px hsla(295.2, 64%, 28.000000000000004%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-bold-fuchsia:enabled:hover {
-  background-color: #a21caf;
+  background-color: hsla(295.2, 72%, 40%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-fuchsia:enabled:focus-visible {
-  background-color: #a21caf;
+  background-color: hsla(295.2, 72%, 40%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-fuchsia:enabled:active {
-  background-color: #701a75;
+  background-color: hsla(295.2, 64%, 28.000000000000004%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-fuchsia {
-  background-color: #701a75;
+  background-color: hsla(295.2, 64%, 28.000000000000004%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #701a75;
-  box-shadow: inset 0 0 0 3px #701a75, 0 0px 0px 3px #fdf4ff;
+  border-color: hsla(295.2, 64%, 28.000000000000004%, 1);
+  box-shadow: inset 0 0 0 3px hsla(295.2, 64%, 28.000000000000004%, 1), 0 0px 0px 3px hsla(288, 100%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-bold-fuchsia:enabled:hover {
-  background-color: #fdf4ff;
+  background-color: hsla(288, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-fuchsia:enabled:focus-visible {
-  background-color: #fdf4ff;
+  background-color: hsla(288, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-fuchsia:enabled:active {
-  background-color: #f0abfc;
+  background-color: hsla(291.6, 93%, 83%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-fuchsia {
-  background-color: rgba(253, 244, 255, 0.01);
-  color: #d946ef;
+  background-color: hsla(288, 100%, 98%, 0.01);
+  color: hsla(291.6, 84%, 61%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-fuchsia:enabled:hover {
-  background-color: #d946ef;
-  color: #FFF;
+  background-color: hsla(291.6, 84%, 61%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-fuchsia:enabled:focus-visible {
-  background-color: #d946ef;
-  color: #FFF;
+  background-color: hsla(291.6, 84%, 61%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-fuchsia:enabled:active {
-  background-color: rgba(192, 38, 211, 0.85);
-  color: #FFF;
+  background-color: hsla(295.2, 69%, 49%, 0.85);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-fuchsia:disabled {
-  background-color: rgba(253, 244, 255, 0.5);
-  color: rgba(76, 73, 77, 0.5);
+  background-color: hsla(288, 100%, 98%, 0.5);
+  color: hsla(288, 53%, 38%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .btn-outline-fuchsia {
-  border-color: #d946ef;
+  border-color: hsla(291.6, 84%, 61%, 1);
   border-width: 1px;
   border-style: solid;
 }
 
 .dark .btn-outline-fuchsia {
-  background-color: rgba(112, 26, 117, 0.01);
-  color: #e879f9;
+  background-color: hsla(295.2, 64%, 28.000000000000004%, 0.01);
+  color: hsla(291.6, 91%, 73%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-fuchsia:enabled:hover {
-  background-color: #d946ef;
-  color: #FFF;
+  background-color: hsla(291.6, 84%, 61%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-fuchsia:enabled:focus-visible {
-  background-color: #d946ef;
-  color: #FFF;
+  background-color: hsla(291.6, 84%, 61%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-fuchsia:enabled:active {
-  background-color: rgba(232, 121, 249, 0.85);
-  color: #FFF;
+  background-color: hsla(291.6, 84%, 61%, 0.8);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-fuchsia:disabled {
-  background-color: rgba(253, 244, 255, 0.5);
-  color: rgba(76, 73, 77, 0.5);
+  background-color: hsla(288, 100%, 98%, 0.5);
+  color: hsla(288, 53%, 38%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-outline-fuchsia {
-  border-color: #e879f9;
+  border-color: hsla(291.6, 91%, 73%, 1);
 }
 
 .contrast .btn-outline-fuchsia {
-  background-color: rgba(253, 244, 255, 0.01);
-  color: #a21caf;
+  background-color: hsla(288, 100%, 98%, 0.01);
+  color: hsla(295.2, 72%, 40%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #a21caf;
-  box-shadow: inset 0 0 0 3px #a21caf, 0 0px 0px 3px #fdf4ff;
+  border-color: hsla(295.2, 72%, 40%, 1);
+  box-shadow: inset 0 0 0 3px hsla(295.2, 72%, 40%, 1), 0 0px 0px 3px hsla(288, 100%, 98%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-outline-fuchsia:enabled:hover {
-  background-color: #fdf4ff;
+  background-color: hsla(288, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-fuchsia:enabled:focus-visible {
-  background-color: #fdf4ff;
+  background-color: hsla(288, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-fuchsia:enabled:active {
-  background-color: #f0abfc;
+  background-color: hsla(291.6, 93%, 83%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-fuchsia {
-  background-color: rgba(112, 26, 117, 0.01);
-  color: #fae8ff;
+  background-color: hsla(295.2, 64%, 28.000000000000004%, 0.01);
+  color: hsla(288, 100%, 95%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #f5d0fe;
-  box-shadow: inset 0 0 0 3px #a21caf, 0 0px 0px 3px #fae8ff;
+  border-color: hsla(288, 96%, 91%, 1);
+  box-shadow: inset 0 0 0 3px hsla(295.2, 72%, 40%, 1), 0 0px 0px 3px hsla(288, 100%, 95%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-outline-fuchsia:enabled:hover {
-  background-color: #a21caf;
+  background-color: hsla(295.2, 72%, 40%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-fuchsia:enabled:focus-visible {
-  background-color: #a21caf;
+  background-color: hsla(295.2, 72%, 40%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-fuchsia:enabled:active {
-  background-color: rgba(112, 26, 117, 0.6);
+  background-color: hsla(295.2, 64%, 28.000000000000004%, 0.6);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-fuchsia {
-  background-color: rgba(253, 244, 255, 0.01);
-  color: #d946ef;
+  background-color: hsla(288, 100%, 98%, 0.01);
+  color: hsla(291.6, 84%, 61%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-fuchsia:enabled:hover {
-  background-color: #fae8ff;
-  color: #d946ef;
+  background-color: hsla(288, 100%, 95%, 1);
+  color: hsla(291.6, 84%, 61%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-fuchsia:enabled:focus-visible {
-  background-color: #fae8ff;
-  color: #d946ef;
+  background-color: hsla(288, 100%, 95%, 1);
+  color: hsla(291.6, 84%, 61%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-fuchsia:enabled:active {
-  background-color: rgba(245, 208, 254, 0.85);
-  color: #c026d3;
+  background-color: hsla(288, 96%, 91%, 0.85);
+  color: hsla(295.2, 69%, 49%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-fuchsia:disabled {
-  background-color: rgba(253, 244, 255, 0.5);
-  color: rgba(76, 73, 77, 0.5);
+  background-color: hsla(288, 100%, 98%, 0.5);
+  color: hsla(288, 53%, 38%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-clear-fuchsia {
-  background-color: rgba(112, 26, 117, 0.01);
-  color: #e879f9;
+  background-color: hsla(295.2, 64%, 28.000000000000004%, 0.01);
+  color: hsla(291.6, 91%, 73%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-fuchsia:enabled:hover {
-  background-color: rgba(192, 38, 211, 0.35);
-  color: #c026d3;
+  background-color: hsla(291.6, 93%, 83%, 0.25);
+  color: hsla(291.6, 84%, 61%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-fuchsia:enabled:focus-visible {
-  background-color: rgba(192, 38, 211, 0.35);
-  color: #c026d3;
+  background-color: hsla(291.6, 93%, 83%, 0.25);
+  color: hsla(291.6, 84%, 61%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-fuchsia:enabled:active {
-  background-color: rgba(162, 28, 175, 0.4);
-  color: #d946ef;
+  background-color: hsla(291.6, 91%, 73%, 0.2);
+  color: hsla(295.2, 69%, 49%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-fuchsia:disabled {
-  background-color: rgba(162, 28, 175, 7);
-  color: rgba(8230, 1422, 8890, 7);
+  background-color: hsla(295.2, 72%, 40%, 0.07);
+  color: hsla(295.2, 72%, 40%, 0.07);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-clear-fuchsia {
-  background-color: rgba(253, 244, 255, 0.01);
-  color: #a21caf;
+  background-color: hsla(288, 100%, 98%, 0.01);
+  color: hsla(295.2, 72%, 40%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #d946ef;
-  box-shadow: inset 0 0 0 1px #d946ef, 0 0px 0px 2px #701a75;
+  border-color: hsla(291.6, 84%, 61%, 1);
+  box-shadow: inset 0 0 0 1px hsla(291.6, 84%, 61%, 1), 0 0px 0px 2px hsla(295.2, 64%, 28.000000000000004%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-clear-fuchsia:enabled:hover {
-  background-color: #a21caf;
+  background-color: hsla(295.2, 72%, 40%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-fuchsia:enabled:focus-visible {
-  background-color: #a21caf;
+  background-color: hsla(295.2, 72%, 40%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-fuchsia:enabled:active {
-  background-color: #701a75;
+  background-color: hsla(295.2, 64%, 28.000000000000004%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-fuchsia {
-  background-color: #701a75;
+  background-color: hsla(295.2, 64%, 28.000000000000004%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #701a75;
-  box-shadow: inset 0 0 0 1px #701a75, 0 0px 0px 2px #fdf4ff;
+  border-color: hsla(295.2, 64%, 28.000000000000004%, 1);
+  box-shadow: inset 0 0 0 1px hsla(295.2, 64%, 28.000000000000004%, 1), 0 0px 0px 2px hsla(288, 100%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-clear-fuchsia:enabled:hover {
-  background-color: #fdf4ff;
+  background-color: hsla(288, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-fuchsia:enabled:focus-visible {
-  background-color: #fdf4ff;
+  background-color: hsla(288, 100%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-fuchsia:enabled:active {
-  background-color: #f0abfc;
+  background-color: hsla(291.6, 93%, 83%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-pink {
-  background-color: rgba(252, 231, 243, 0.8);
-  color: rgba(76, 73, 74, 0.9);
+  background-color: hsla(324, 78%, 95%, 0.8);
+  color: hsla(327.6, 50%, 40%, 0.9);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-pink:enabled:hover {
-  background-color: #f9a8d4;
-  color: #000;
+  background-color: hsla(327.6, 85%, 90%, 1);
+  color: hsla(327.6, 45%, 30%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-pink:enabled:focus-visible {
-  background-color: #f9a8d4;
-  color: #000;
+  background-color: hsla(327.6, 85%, 90%, 1);
+  color: hsla(327.6, 45%, 30%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-pink:enabled:active {
-  background-color: #fbcfe8;
-  color: rgba(75, 62, 70, 1);
+  background-color: hsla(327.6, 86%, 70%, 0.65);
+  color: hsla(327.6, 45%, 10%, 0.65);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-pink:disabled {
-  background-color: #fce7f3;
-  color: rgba(76, 69, 73, 1);
+  background-color: hsla(324, 78%, 95%, 1);
+  color: hsla(324, 41%, 35%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-light-pink {
-  background-color: rgba(131, 24, 67, 0.4);
-  color: rgba(7976, 1168, 3912, 0.9);
+  background-color: hsla(334.8, 69%, 30%, 0.4);
+  color: hsla(334.8, 37%, 90%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-pink:enabled:hover {
-  background-color: #9d174d;
-  color: rgba(7976, 1168, 3912, 1);
+  background-color: hsla(334.8, 74%, 35%, 1);
+  color: hsla(334.8, 40%, 95%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-pink:enabled:focus-visible {
-  background-color: #9d174d;
-  color: rgba(7976, 1168, 3912, 1);
+  background-color: hsla(334.8, 74%, 35%, 1);
+  color: hsla(334.8, 40%, 95%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-pink:enabled:active {
-  background-color: #be185d;
-  color: rgba(9652, 1219, 4724, 1);
+  background-color: hsla(334.8, 69%, 30%, 1);
+  color: hsla(334.8, 37%, 90%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-pink:disabled {
-  background-color: #831843;
-  color: rgba(6655, 1219, 3404, 1);
+  background-color: hsla(334.8, 69%, 30%, 1);
+  color: hsla(334.8, 37%, 90%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-light-pink {
-  background-color: #fdf2f8;
+  background-color: hsla(327.6, 73%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #ec4899;
-  box-shadow: inset 0 0 0 1px #ec4899, 0 0px 0px 1px #831843;
+  border-color: hsla(331.2, 81%, 60%, 1);
+  box-shadow: inset 0 0 0 1px hsla(331.2, 81%, 60%, 1), 0 0px 0px 1px hsla(334.8, 69%, 30%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-light-pink:enabled:hover {
-  background-color: #be185d;
+  background-color: hsla(334.8, 78%, 42%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-pink:enabled:focus-visible {
-  background-color: #be185d;
+  background-color: hsla(334.8, 78%, 42%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-pink:enabled:active {
-  background-color: #831843;
+  background-color: hsla(334.8, 69%, 30%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-pink {
-  background-color: #831843;
+  background-color: hsla(334.8, 69%, 30%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #831843;
-  box-shadow: inset 0 0 0 1px #831843, 0 0px 0px 1px #fdf2f8;
+  border-color: hsla(334.8, 69%, 30%, 1);
+  box-shadow: inset 0 0 0 1px hsla(334.8, 69%, 30%, 1), 0 0px 0px 1px hsla(327.6, 73%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-light-pink:enabled:hover {
-  background-color: #fdf2f8;
+  background-color: hsla(327.6, 73%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-pink:enabled:focus-visible {
-  background-color: #fdf2f8;
+  background-color: hsla(327.6, 73%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-pink:enabled:active {
-  background-color: #f9a8d4;
+  background-color: hsla(327.6, 87%, 82%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-pink {
-  background-color: #f472b6;
-  color: rgba(73, 34, 55, 1);
+  background-color: hsla(327.6, 86%, 70%, 1);
+  color: hsla(327.6, 45%, 10%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-pink:enabled:hover {
-  background-color: #ec4899;
-  color: #FFF;
+  background-color: hsla(331.2, 81%, 60%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-pink:enabled:focus-visible {
-  background-color: #ec4899;
-  color: #FFF;
+  background-color: hsla(331.2, 81%, 60%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-pink:enabled:active {
-  background-color: #db2777;
-  color: rgba(11989, 3658, 7772, 1);
+  background-color: hsla(334.8, 71%, 51%, 1);
+  color: hsla(331.2, 43%, 0%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-pink:disabled {
-  background-color: #fbcfe8;
-  color: rgba(75, 62, 70, 1);
+  background-color: hsla(327.6, 85%, 90%, 1);
+  color: hsla(327.6, 45%, 30%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-pink {
-  background-color: #ec4899;
-  color: rgba(11989, 3658, 7772, 1);
+  background-color: hsla(331.2, 81%, 60%, 1);
+  color: hsla(331.2, 43%, 0%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-pink:enabled:hover {
-  background-color: #db2777;
-  color: #FFF;
+  background-color: hsla(334.8, 71%, 51%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-pink:enabled:focus-visible {
-  background-color: #db2777;
-  color: #FFF;
+  background-color: hsla(334.8, 71%, 51%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-pink:enabled:active {
-  background-color: rgba(219, 39, 119, 0.75);
-  color: #FFF;
+  background-color: hsla(334.8, 71%, 51%, 0.7);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-pink:disabled {
-  background-color: #be185d;
-  color: rgba(9652, 1219, 4724, 1);
+  background-color: hsla(334.8, 78%, 42%, 1);
+  color: hsla(334.8, 41%, 100%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-pink {
-  background-color: #fdf2f8;
+  background-color: hsla(327.6, 73%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #ec4899;
-  box-shadow: inset 0 0 0 1px #ec4899, 0 0px 0px 2px #831843;
+  border-color: hsla(331.2, 81%, 60%, 1);
+  box-shadow: inset 0 0 0 1px hsla(331.2, 81%, 60%, 1), 0 0px 0px 2px hsla(334.8, 69%, 30%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-pink:enabled:hover {
-  background-color: #be185d;
+  background-color: hsla(334.8, 78%, 42%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-pink:enabled:focus-visible {
-  background-color: #be185d;
+  background-color: hsla(334.8, 78%, 42%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-pink:enabled:active {
-  background-color: #831843;
+  background-color: hsla(334.8, 69%, 30%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-pink {
-  background-color: #831843;
+  background-color: hsla(334.8, 69%, 30%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #831843;
-  box-shadow: inset 0 0 0 1px #831843, 0 0px 0px 2px #fdf2f8;
+  border-color: hsla(334.8, 69%, 30%, 1);
+  box-shadow: inset 0 0 0 1px hsla(334.8, 69%, 30%, 1), 0 0px 0px 2px hsla(327.6, 73%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-pink:enabled:hover {
-  background-color: #fdf2f8;
+  background-color: hsla(327.6, 73%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-pink:enabled:focus-visible {
-  background-color: #fdf2f8;
+  background-color: hsla(327.6, 73%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-pink:enabled:active {
-  background-color: #f9a8d4;
+  background-color: hsla(327.6, 87%, 82%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-pink {
-  background-color: rgba(190, 24, 93, 0.9);
-  color: rgba(9652, 1219, 4724, 0.9);
+  background-color: hsla(334.8, 78%, 42%, 0.9);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-pink:enabled:hover {
-  background-color: rgba(157, 23, 77, 0.8);
-  color: rgba(6655, 1219, 3404, 1);
+  background-color: hsla(334.8, 74%, 35%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-pink:enabled:focus-visible {
-  background-color: rgba(157, 23, 77, 0.8);
-  color: rgba(6655, 1219, 3404, 1);
+  background-color: hsla(334.8, 74%, 35%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-pink:enabled:active {
-  background-color: #9d174d;
-  color: rgba(7976, 1168, 3912, 1);
+  background-color: hsla(334.8, 74%, 35%, 1);
+  color: hsla(334.8, 40%, 95%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-pink:disabled {
-  background-color: rgba(157, 23, 77, 0.6);
-  color: rgba(7976, 1168, 3912, 0.6);
+  background-color: hsla(334.8, 74%, 35%, 0.6);
+  color: hsla(334.8, 44%, 85%, 0.6);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-bold-pink {
-  background-color: rgba(131, 24, 67, 0.9);
-  color: rgba(6655, 1219, 3404, 0.9);
+  background-color: hsla(334.8, 69%, 30%, 0.85);
+  color: hsla(334.8, 37%, 90%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-pink:enabled:hover {
-  background-color: rgba(131, 24, 67, 0.65);
+  background-color: hsla(334.8, 69%, 30%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-pink:enabled:focus-visible {
-  background-color: rgba(131, 24, 67, 0.65);
+  background-color: hsla(334.8, 69%, 30%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-pink:enabled:active {
-  background-color: #9d174d;
-  color: rgba(7976, 1168, 3912, 1);
+  background-color: hsla(334.8, 69%, 30%, 0.45);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-pink:disabled {
-  background-color: rgba(131, 24, 67, 0.4);
-  color: rgba(6655, 1219, 3404, 0.4);
+  background-color: hsla(334.8, 69%, 30%, 0.4);
+  color: hsla(334.8, 37%, 90%, 0.4);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-bold-pink {
-  background-color: #fdf2f8;
+  background-color: hsla(327.6, 73%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #ec4899;
-  box-shadow: inset 0 0 0 3px #ec4899, 0 0px 0px 3px #831843;
+  border-color: hsla(331.2, 81%, 60%, 1);
+  box-shadow: inset 0 0 0 3px hsla(331.2, 81%, 60%, 1), 0 0px 0px 3px hsla(334.8, 69%, 30%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-bold-pink:enabled:hover {
-  background-color: #be185d;
+  background-color: hsla(334.8, 78%, 42%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-pink:enabled:focus-visible {
-  background-color: #be185d;
+  background-color: hsla(334.8, 78%, 42%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-pink:enabled:active {
-  background-color: #831843;
+  background-color: hsla(334.8, 69%, 30%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-pink {
-  background-color: #831843;
+  background-color: hsla(334.8, 69%, 30%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #831843;
-  box-shadow: inset 0 0 0 3px #831843, 0 0px 0px 3px #fdf2f8;
+  border-color: hsla(334.8, 69%, 30%, 1);
+  box-shadow: inset 0 0 0 3px hsla(334.8, 69%, 30%, 1), 0 0px 0px 3px hsla(327.6, 73%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-bold-pink:enabled:hover {
-  background-color: #fdf2f8;
+  background-color: hsla(327.6, 73%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-pink:enabled:focus-visible {
-  background-color: #fdf2f8;
+  background-color: hsla(327.6, 73%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-pink:enabled:active {
-  background-color: #f9a8d4;
+  background-color: hsla(327.6, 87%, 82%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-pink {
-  background-color: rgba(253, 242, 248, 0.01);
-  color: #ec4899;
+  background-color: hsla(327.6, 73%, 97%, 0.01);
+  color: hsla(331.2, 81%, 60%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-pink:enabled:hover {
-  background-color: #ec4899;
-  color: #FFF;
+  background-color: hsla(331.2, 81%, 60%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-pink:enabled:focus-visible {
-  background-color: #ec4899;
-  color: #FFF;
+  background-color: hsla(331.2, 81%, 60%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-pink:enabled:active {
-  background-color: rgba(219, 39, 119, 0.85);
-  color: #FFF;
+  background-color: hsla(334.8, 71%, 51%, 0.85);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-pink:disabled {
-  background-color: rgba(253, 242, 248, 0.5);
-  color: rgba(76, 73, 74, 0.5);
+  background-color: hsla(327.6, 73%, 97%, 0.5);
+  color: hsla(327.6, 39%, 37%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .btn-outline-pink {
-  border-color: #ec4899;
+  border-color: hsla(331.2, 81%, 60%, 1);
   border-width: 1px;
   border-style: solid;
 }
 
 .dark .btn-outline-pink {
-  background-color: rgba(131, 24, 67, 0.01);
-  color: #f472b6;
+  background-color: hsla(334.8, 69%, 30%, 0.01);
+  color: hsla(327.6, 86%, 70%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-pink:enabled:hover {
-  background-color: #ec4899;
-  color: #FFF;
+  background-color: hsla(331.2, 81%, 60%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-pink:enabled:focus-visible {
-  background-color: #ec4899;
-  color: #FFF;
+  background-color: hsla(331.2, 81%, 60%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-pink:enabled:active {
-  background-color: rgba(244, 114, 182, 0.85);
-  color: #FFF;
+  background-color: hsla(331.2, 81%, 60%, 0.8);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-pink:disabled {
-  background-color: rgba(253, 242, 248, 0.5);
-  color: rgba(76, 73, 74, 0.5);
+  background-color: hsla(327.6, 73%, 97%, 0.5);
+  color: hsla(327.6, 39%, 37%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-outline-pink {
-  border-color: #f472b6;
+  border-color: hsla(327.6, 86%, 70%, 1);
 }
 
 .contrast .btn-outline-pink {
-  background-color: rgba(253, 242, 248, 0.01);
-  color: #be185d;
+  background-color: hsla(327.6, 73%, 97%, 0.01);
+  color: hsla(334.8, 78%, 42%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #be185d;
-  box-shadow: inset 0 0 0 3px #be185d, 0 0px 0px 3px #fdf2f8;
+  border-color: hsla(334.8, 78%, 42%, 1);
+  box-shadow: inset 0 0 0 3px hsla(334.8, 78%, 42%, 1), 0 0px 0px 3px hsla(327.6, 73%, 97%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-outline-pink:enabled:hover {
-  background-color: #fdf2f8;
+  background-color: hsla(327.6, 73%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-pink:enabled:focus-visible {
-  background-color: #fdf2f8;
+  background-color: hsla(327.6, 73%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-pink:enabled:active {
-  background-color: #f9a8d4;
+  background-color: hsla(327.6, 87%, 82%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-pink {
-  background-color: rgba(131, 24, 67, 0.01);
-  color: #fce7f3;
+  background-color: hsla(334.8, 69%, 30%, 0.01);
+  color: hsla(324, 78%, 95%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #fbcfe8;
-  box-shadow: inset 0 0 0 3px #be185d, 0 0px 0px 3px #fce7f3;
+  border-color: hsla(327.6, 85%, 90%, 1);
+  box-shadow: inset 0 0 0 3px hsla(334.8, 78%, 42%, 1), 0 0px 0px 3px hsla(324, 78%, 95%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-outline-pink:enabled:hover {
-  background-color: #be185d;
+  background-color: hsla(334.8, 78%, 42%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-pink:enabled:focus-visible {
-  background-color: #be185d;
+  background-color: hsla(334.8, 78%, 42%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-pink:enabled:active {
-  background-color: rgba(131, 24, 67, 0.6);
+  background-color: hsla(334.8, 69%, 30%, 0.6);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-pink {
-  background-color: rgba(253, 242, 248, 0.01);
-  color: #ec4899;
+  background-color: hsla(327.6, 73%, 97%, 0.01);
+  color: hsla(331.2, 81%, 60%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-pink:enabled:hover {
-  background-color: #fce7f3;
-  color: #ec4899;
+  background-color: hsla(324, 78%, 95%, 1);
+  color: hsla(331.2, 81%, 60%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-pink:enabled:focus-visible {
-  background-color: #fce7f3;
-  color: #ec4899;
+  background-color: hsla(324, 78%, 95%, 1);
+  color: hsla(331.2, 81%, 60%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-pink:enabled:active {
-  background-color: rgba(251, 207, 232, 0.85);
-  color: #db2777;
+  background-color: hsla(327.6, 85%, 90%, 0.85);
+  color: hsla(334.8, 71%, 51%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-pink:disabled {
-  background-color: rgba(253, 242, 248, 0.5);
-  color: rgba(76, 73, 74, 0.5);
+  background-color: hsla(327.6, 73%, 97%, 0.5);
+  color: hsla(327.6, 39%, 37%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-clear-pink {
-  background-color: rgba(131, 24, 67, 0.01);
-  color: #f472b6;
+  background-color: hsla(334.8, 69%, 30%, 0.01);
+  color: hsla(327.6, 86%, 70%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-pink:enabled:hover {
-  background-color: rgba(219, 39, 119, 0.35);
-  color: #db2777;
+  background-color: hsla(327.6, 87%, 82%, 0.25);
+  color: hsla(331.2, 81%, 60%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-pink:enabled:focus-visible {
-  background-color: rgba(219, 39, 119, 0.35);
-  color: #db2777;
+  background-color: hsla(327.6, 87%, 82%, 0.25);
+  color: hsla(331.2, 81%, 60%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-pink:enabled:active {
-  background-color: rgba(190, 24, 93, 0.4);
-  color: #ec4899;
+  background-color: hsla(327.6, 86%, 70%, 0.2);
+  color: hsla(334.8, 71%, 51%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-pink:disabled {
-  background-color: rgba(190, 24, 93, 7);
-  color: rgba(9652, 1219, 4724, 7);
+  background-color: hsla(334.8, 78%, 42%, 0.07);
+  color: hsla(334.8, 78%, 42%, 0.07);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-clear-pink {
-  background-color: rgba(253, 242, 248, 0.01);
-  color: #be185d;
+  background-color: hsla(327.6, 73%, 97%, 0.01);
+  color: hsla(334.8, 78%, 42%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #ec4899;
-  box-shadow: inset 0 0 0 1px #ec4899, 0 0px 0px 2px #831843;
+  border-color: hsla(331.2, 81%, 60%, 1);
+  box-shadow: inset 0 0 0 1px hsla(331.2, 81%, 60%, 1), 0 0px 0px 2px hsla(334.8, 69%, 30%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-clear-pink:enabled:hover {
-  background-color: #be185d;
+  background-color: hsla(334.8, 78%, 42%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-pink:enabled:focus-visible {
-  background-color: #be185d;
+  background-color: hsla(334.8, 78%, 42%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-pink:enabled:active {
-  background-color: #831843;
+  background-color: hsla(334.8, 69%, 30%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-pink {
-  background-color: #831843;
+  background-color: hsla(334.8, 69%, 30%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #831843;
-  box-shadow: inset 0 0 0 1px #831843, 0 0px 0px 2px #fdf2f8;
+  border-color: hsla(334.8, 69%, 30%, 1);
+  box-shadow: inset 0 0 0 1px hsla(334.8, 69%, 30%, 1), 0 0px 0px 2px hsla(327.6, 73%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-clear-pink:enabled:hover {
-  background-color: #fdf2f8;
+  background-color: hsla(327.6, 73%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-pink:enabled:focus-visible {
-  background-color: #fdf2f8;
+  background-color: hsla(327.6, 73%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-pink:enabled:active {
-  background-color: #f9a8d4;
+  background-color: hsla(327.6, 87%, 82%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-rose {
-  background-color: rgba(255, 228, 230, 0.8);
-  color: rgba(77, 72, 73, 0.9);
+  background-color: hsla(356.4, 100%, 95%, 0.8);
+  color: hsla(352.8, 56.00000000000001%, 40%, 0.9);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-rose:enabled:hover {
-  background-color: #fda4af;
-  color: #000;
+  background-color: hsla(352.8, 96%, 90%, 1);
+  color: hsla(352.8, 50%, 30%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-rose:enabled:focus-visible {
-  background-color: #fda4af;
-  color: #000;
+  background-color: hsla(352.8, 96%, 90%, 1);
+  color: hsla(352.8, 50%, 30%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-rose:enabled:active {
-  background-color: #fecdd3;
-  color: rgba(76, 62, 63, 1);
+  background-color: hsla(352.8, 95%, 71%, 0.65);
+  color: hsla(352.8, 50%, 11%, 0.65);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-rose:disabled {
-  background-color: #ffe4e6;
-  color: rgba(77, 68, 69, 1);
+  background-color: hsla(356.4, 100%, 95%, 1);
+  color: hsla(356.4, 53%, 35%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-light-rose {
-  background-color: rgba(136, 19, 55, 0.4);
-  color: rgba(8077, 914, 2896, 0.9);
+  background-color: hsla(342, 75%, 30%, 0.4);
+  color: hsla(342, 41%, 90%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-rose:enabled:hover {
-  background-color: #9f1239;
-  color: rgba(8077, 914, 2896, 1);
+  background-color: hsla(342, 80%, 35%, 1);
+  color: hsla(342, 43%, 95%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-rose:enabled:focus-visible {
-  background-color: #9f1239;
-  color: rgba(8077, 914, 2896, 1);
+  background-color: hsla(342, 80%, 35%, 1);
+  color: hsla(342, 43%, 95%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-rose:enabled:active {
-  background-color: #be123c;
-  color: rgba(9652, 914, 3048, 1);
+  background-color: hsla(342, 75%, 30%, 1);
+  color: hsla(342, 41%, 90%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-rose:disabled {
-  background-color: #881337;
-  color: rgba(6909, 965, 2794, 1);
+  background-color: hsla(342, 75%, 30%, 1);
+  color: hsla(342, 41%, 90%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-light-rose {
-  background-color: #fff1f2;
+  background-color: hsla(356.4, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #f43f5e;
-  box-shadow: inset 0 0 0 1px #f43f5e, 0 0px 0px 1px #881337;
+  border-color: hsla(349.2, 89%, 60%, 1);
+  box-shadow: inset 0 0 0 1px hsla(349.2, 89%, 60%, 1), 0 0px 0px 1px hsla(342, 75%, 30%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-light-rose:enabled:hover {
-  background-color: #be123c;
+  background-color: hsla(345.59999999999997, 83%, 41%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-rose:enabled:focus-visible {
-  background-color: #be123c;
+  background-color: hsla(345.59999999999997, 83%, 41%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-rose:enabled:active {
-  background-color: #881337;
+  background-color: hsla(342, 75%, 30%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-rose {
-  background-color: #881337;
+  background-color: hsla(342, 75%, 30%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #881337;
-  box-shadow: inset 0 0 0 1px #881337, 0 0px 0px 1px #fff1f2;
+  border-color: hsla(342, 75%, 30%, 1);
+  box-shadow: inset 0 0 0 1px hsla(342, 75%, 30%, 1), 0 0px 0px 1px hsla(356.4, 100%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-light-rose:enabled:hover {
-  background-color: #fff1f2;
+  background-color: hsla(356.4, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-rose:enabled:focus-visible {
-  background-color: #fff1f2;
+  background-color: hsla(356.4, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-rose:enabled:active {
-  background-color: #fda4af;
+  background-color: hsla(352.8, 96%, 82%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-rose {
-  background-color: #fb7185;
-  color: rgba(75, 34, 40, 1);
+  background-color: hsla(352.8, 95%, 71%, 1);
+  color: hsla(352.8, 50%, 11%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-rose:enabled:hover {
-  background-color: #f43f5e;
-  color: #FFF;
+  background-color: hsla(349.2, 89%, 60%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-rose:enabled:focus-visible {
-  background-color: #f43f5e;
-  color: #FFF;
+  background-color: hsla(349.2, 89%, 60%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-rose:enabled:active {
-  background-color: #e11d48;
-  color: rgba(12395, 3200, 4775, 1);
+  background-color: hsla(345.59999999999997, 77%, 50%, 1);
+  color: hsla(349.2, 48%, 0%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-rose:disabled {
-  background-color: #fecdd3;
-  color: rgba(76, 62, 63, 1);
+  background-color: hsla(352.8, 96%, 90%, 1);
+  color: hsla(352.8, 50%, 30%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-rose {
-  background-color: #f43f5e;
-  color: rgba(12395, 3200, 4775, 1);
+  background-color: hsla(349.2, 89%, 60%, 1);
+  color: hsla(349.2, 48%, 0%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-rose:enabled:hover {
-  background-color: #e11d48;
-  color: #FFF;
+  background-color: hsla(345.59999999999997, 77%, 50%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-rose:enabled:focus-visible {
-  background-color: #e11d48;
-  color: #FFF;
+  background-color: hsla(345.59999999999997, 77%, 50%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-rose:enabled:active {
-  background-color: rgba(225, 29, 72, 0.75);
-  color: #FFF;
+  background-color: hsla(345.59999999999997, 77%, 50%, 0.7);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-rose:disabled {
-  background-color: #be123c;
-  color: rgba(9652, 914, 3048, 1);
+  background-color: hsla(345.59999999999997, 83%, 41%, 1);
+  color: hsla(345.59999999999997, 45%, 100%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-rose {
-  background-color: #fff1f2;
+  background-color: hsla(356.4, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #f43f5e;
-  box-shadow: inset 0 0 0 1px #f43f5e, 0 0px 0px 2px #881337;
+  border-color: hsla(349.2, 89%, 60%, 1);
+  box-shadow: inset 0 0 0 1px hsla(349.2, 89%, 60%, 1), 0 0px 0px 2px hsla(342, 75%, 30%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-rose:enabled:hover {
-  background-color: #be123c;
+  background-color: hsla(345.59999999999997, 83%, 41%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-rose:enabled:focus-visible {
-  background-color: #be123c;
+  background-color: hsla(345.59999999999997, 83%, 41%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-rose:enabled:active {
-  background-color: #881337;
+  background-color: hsla(342, 75%, 30%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-rose {
-  background-color: #881337;
+  background-color: hsla(342, 75%, 30%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #881337;
-  box-shadow: inset 0 0 0 1px #881337, 0 0px 0px 2px #fff1f2;
+  border-color: hsla(342, 75%, 30%, 1);
+  box-shadow: inset 0 0 0 1px hsla(342, 75%, 30%, 1), 0 0px 0px 2px hsla(356.4, 100%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-rose:enabled:hover {
-  background-color: #fff1f2;
+  background-color: hsla(356.4, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-rose:enabled:focus-visible {
-  background-color: #fff1f2;
+  background-color: hsla(356.4, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-rose:enabled:active {
-  background-color: #fda4af;
+  background-color: hsla(352.8, 96%, 82%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-rose {
-  background-color: rgba(190, 18, 60, 0.9);
-  color: rgba(9652, 914, 3048, 0.9);
+  background-color: hsla(345.59999999999997, 83%, 41%, 0.9);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-rose:enabled:hover {
-  background-color: rgba(159, 18, 57, 0.8);
-  color: rgba(6909, 965, 2794, 1);
+  background-color: hsla(342, 80%, 35%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-rose:enabled:focus-visible {
-  background-color: rgba(159, 18, 57, 0.8);
-  color: rgba(6909, 965, 2794, 1);
+  background-color: hsla(342, 80%, 35%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-rose:enabled:active {
-  background-color: #9f1239;
-  color: rgba(8077, 914, 2896, 1);
+  background-color: hsla(342, 80%, 35%, 1);
+  color: hsla(342, 43%, 95%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-rose:disabled {
-  background-color: rgba(159, 18, 57, 0.6);
-  color: rgba(8077, 914, 2896, 0.6);
+  background-color: hsla(342, 80%, 35%, 0.6);
+  color: hsla(342, 48%, 85%, 0.6);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-bold-rose {
-  background-color: rgba(136, 19, 55, 0.9);
-  color: rgba(6909, 965, 2794, 0.9);
+  background-color: hsla(342, 75%, 30%, 0.85);
+  color: hsla(342, 41%, 90%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-rose:enabled:hover {
-  background-color: rgba(136, 19, 55, 0.65);
+  background-color: hsla(342, 75%, 30%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-rose:enabled:focus-visible {
-  background-color: rgba(136, 19, 55, 0.65);
+  background-color: hsla(342, 75%, 30%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-rose:enabled:active {
-  background-color: #9f1239;
-  color: rgba(8077, 914, 2896, 1);
+  background-color: hsla(342, 75%, 30%, 0.45);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-rose:disabled {
-  background-color: rgba(136, 19, 55, 0.4);
-  color: rgba(6909, 965, 2794, 0.4);
+  background-color: hsla(342, 75%, 30%, 0.4);
+  color: hsla(342, 41%, 90%, 0.4);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-bold-rose {
-  background-color: #fff1f2;
+  background-color: hsla(356.4, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #f43f5e;
-  box-shadow: inset 0 0 0 3px #f43f5e, 0 0px 0px 3px #881337;
+  border-color: hsla(349.2, 89%, 60%, 1);
+  box-shadow: inset 0 0 0 3px hsla(349.2, 89%, 60%, 1), 0 0px 0px 3px hsla(342, 75%, 30%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-bold-rose:enabled:hover {
-  background-color: #be123c;
+  background-color: hsla(345.59999999999997, 83%, 41%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-rose:enabled:focus-visible {
-  background-color: #be123c;
+  background-color: hsla(345.59999999999997, 83%, 41%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-rose:enabled:active {
-  background-color: #881337;
+  background-color: hsla(342, 75%, 30%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-rose {
-  background-color: #881337;
+  background-color: hsla(342, 75%, 30%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #881337;
-  box-shadow: inset 0 0 0 3px #881337, 0 0px 0px 3px #fff1f2;
+  border-color: hsla(342, 75%, 30%, 1);
+  box-shadow: inset 0 0 0 3px hsla(342, 75%, 30%, 1), 0 0px 0px 3px hsla(356.4, 100%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-bold-rose:enabled:hover {
-  background-color: #fff1f2;
+  background-color: hsla(356.4, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-rose:enabled:focus-visible {
-  background-color: #fff1f2;
+  background-color: hsla(356.4, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-rose:enabled:active {
-  background-color: #fda4af;
+  background-color: hsla(352.8, 96%, 82%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-rose {
-  background-color: rgba(255, 241, 242, 0.01);
-  color: #f43f5e;
+  background-color: hsla(356.4, 100%, 97%, 0.01);
+  color: hsla(349.2, 89%, 60%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-rose:enabled:hover {
-  background-color: #f43f5e;
-  color: #FFF;
+  background-color: hsla(349.2, 89%, 60%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-rose:enabled:focus-visible {
-  background-color: #f43f5e;
-  color: #FFF;
+  background-color: hsla(349.2, 89%, 60%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-rose:enabled:active {
-  background-color: rgba(225, 29, 72, 0.85);
-  color: #FFF;
+  background-color: hsla(345.59999999999997, 77%, 50%, 0.85);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-rose:disabled {
-  background-color: rgba(255, 241, 242, 0.5);
-  color: rgba(77, 72, 73, 0.5);
+  background-color: hsla(356.4, 100%, 97%, 0.5);
+  color: hsla(356.4, 53%, 37%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .btn-outline-rose {
-  border-color: #f43f5e;
+  border-color: hsla(349.2, 89%, 60%, 1);
   border-width: 1px;
   border-style: solid;
 }
 
 .dark .btn-outline-rose {
-  background-color: rgba(136, 19, 55, 0.01);
-  color: #fb7185;
+  background-color: hsla(342, 75%, 30%, 0.01);
+  color: hsla(352.8, 95%, 71%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-rose:enabled:hover {
-  background-color: #f43f5e;
-  color: #FFF;
+  background-color: hsla(349.2, 89%, 60%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-rose:enabled:focus-visible {
-  background-color: #f43f5e;
-  color: #FFF;
+  background-color: hsla(349.2, 89%, 60%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-rose:enabled:active {
-  background-color: rgba(251, 113, 133, 0.85);
-  color: #FFF;
+  background-color: hsla(349.2, 89%, 60%, 0.8);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-rose:disabled {
-  background-color: rgba(255, 241, 242, 0.5);
-  color: rgba(77, 72, 73, 0.5);
+  background-color: hsla(356.4, 100%, 97%, 0.5);
+  color: hsla(356.4, 53%, 37%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-outline-rose {
-  border-color: #fb7185;
+  border-color: hsla(352.8, 95%, 71%, 1);
 }
 
 .contrast .btn-outline-rose {
-  background-color: rgba(255, 241, 242, 0.01);
-  color: #be123c;
+  background-color: hsla(356.4, 100%, 97%, 0.01);
+  color: hsla(345.59999999999997, 83%, 41%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #be123c;
-  box-shadow: inset 0 0 0 3px #be123c, 0 0px 0px 3px #fff1f2;
+  border-color: hsla(345.59999999999997, 83%, 41%, 1);
+  box-shadow: inset 0 0 0 3px hsla(345.59999999999997, 83%, 41%, 1), 0 0px 0px 3px hsla(356.4, 100%, 97%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-outline-rose:enabled:hover {
-  background-color: #fff1f2;
+  background-color: hsla(356.4, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-rose:enabled:focus-visible {
-  background-color: #fff1f2;
+  background-color: hsla(356.4, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-rose:enabled:active {
-  background-color: #fda4af;
+  background-color: hsla(352.8, 96%, 82%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-rose {
-  background-color: rgba(136, 19, 55, 0.01);
-  color: #ffe4e6;
+  background-color: hsla(342, 75%, 30%, 0.01);
+  color: hsla(356.4, 100%, 95%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #fecdd3;
-  box-shadow: inset 0 0 0 3px #be123c, 0 0px 0px 3px #ffe4e6;
+  border-color: hsla(352.8, 96%, 90%, 1);
+  box-shadow: inset 0 0 0 3px hsla(345.59999999999997, 83%, 41%, 1), 0 0px 0px 3px hsla(356.4, 100%, 95%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-outline-rose:enabled:hover {
-  background-color: #be123c;
+  background-color: hsla(345.59999999999997, 83%, 41%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-rose:enabled:focus-visible {
-  background-color: #be123c;
+  background-color: hsla(345.59999999999997, 83%, 41%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-rose:enabled:active {
-  background-color: rgba(136, 19, 55, 0.6);
+  background-color: hsla(342, 75%, 30%, 0.6);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-rose {
-  background-color: rgba(255, 241, 242, 0.01);
-  color: #f43f5e;
+  background-color: hsla(356.4, 100%, 97%, 0.01);
+  color: hsla(349.2, 89%, 60%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-rose:enabled:hover {
-  background-color: #ffe4e6;
-  color: #f43f5e;
+  background-color: hsla(356.4, 100%, 95%, 1);
+  color: hsla(349.2, 89%, 60%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-rose:enabled:focus-visible {
-  background-color: #ffe4e6;
-  color: #f43f5e;
+  background-color: hsla(356.4, 100%, 95%, 1);
+  color: hsla(349.2, 89%, 60%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-rose:enabled:active {
-  background-color: rgba(254, 205, 211, 0.85);
-  color: #e11d48;
+  background-color: hsla(352.8, 96%, 90%, 0.85);
+  color: hsla(345.59999999999997, 77%, 50%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-rose:disabled {
-  background-color: rgba(255, 241, 242, 0.5);
-  color: rgba(77, 72, 73, 0.5);
+  background-color: hsla(356.4, 100%, 97%, 0.5);
+  color: hsla(356.4, 53%, 37%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-clear-rose {
-  background-color: rgba(136, 19, 55, 0.01);
-  color: #fb7185;
+  background-color: hsla(342, 75%, 30%, 0.01);
+  color: hsla(352.8, 95%, 71%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-rose:enabled:hover {
-  background-color: rgba(225, 29, 72, 0.35);
-  color: #e11d48;
+  background-color: hsla(352.8, 96%, 82%, 0.25);
+  color: hsla(349.2, 89%, 60%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-rose:enabled:focus-visible {
-  background-color: rgba(225, 29, 72, 0.35);
-  color: #e11d48;
+  background-color: hsla(352.8, 96%, 82%, 0.25);
+  color: hsla(349.2, 89%, 60%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-rose:enabled:active {
-  background-color: rgba(190, 18, 60, 0.4);
-  color: #f43f5e;
+  background-color: hsla(352.8, 95%, 71%, 0.2);
+  color: hsla(345.59999999999997, 77%, 50%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-rose:disabled {
-  background-color: rgba(190, 18, 60, 7);
-  color: rgba(9652, 914, 3048, 7);
+  background-color: hsla(345.59999999999997, 83%, 41%, 0.07);
+  color: hsla(345.59999999999997, 83%, 41%, 0.07);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-clear-rose {
-  background-color: rgba(255, 241, 242, 0.01);
-  color: #be123c;
+  background-color: hsla(356.4, 100%, 97%, 0.01);
+  color: hsla(345.59999999999997, 83%, 41%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #f43f5e;
-  box-shadow: inset 0 0 0 1px #f43f5e, 0 0px 0px 2px #881337;
+  border-color: hsla(349.2, 89%, 60%, 1);
+  box-shadow: inset 0 0 0 1px hsla(349.2, 89%, 60%, 1), 0 0px 0px 2px hsla(342, 75%, 30%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-clear-rose:enabled:hover {
-  background-color: #be123c;
+  background-color: hsla(345.59999999999997, 83%, 41%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-rose:enabled:focus-visible {
-  background-color: #be123c;
+  background-color: hsla(345.59999999999997, 83%, 41%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-rose:enabled:active {
-  background-color: #881337;
+  background-color: hsla(342, 75%, 30%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-rose {
-  background-color: #881337;
+  background-color: hsla(342, 75%, 30%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #881337;
-  box-shadow: inset 0 0 0 1px #881337, 0 0px 0px 2px #fff1f2;
+  border-color: hsla(342, 75%, 30%, 1);
+  box-shadow: inset 0 0 0 1px hsla(342, 75%, 30%, 1), 0 0px 0px 2px hsla(356.4, 100%, 97%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-clear-rose:enabled:hover {
-  background-color: #fff1f2;
+  background-color: hsla(356.4, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-rose:enabled:focus-visible {
-  background-color: #fff1f2;
+  background-color: hsla(356.4, 100%, 97%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-rose:enabled:active {
-  background-color: #fda4af;
+  background-color: hsla(352.8, 96%, 82%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-gray {
-  background-color: rgba(243, 244, 246, 0.8);
-  color: rgba(75, 75, 75, 0.9);
+  background-color: hsla(219.6, 14.000000000000002%, 96%, 0.8);
+  color: hsla(219.6, 7.000000000000001%, 31%, 0.9);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-gray:enabled:hover {
-  background-color: #d1d5db;
-  color: #000;
+  background-color: hsla(219.6, 13%, 91%, 1);
+  color: hsla(219.6, 7.000000000000001%, 31%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-gray:enabled:focus-visible {
-  background-color: #d1d5db;
-  color: #000;
+  background-color: hsla(219.6, 13%, 91%, 1);
+  color: hsla(219.6, 7.000000000000001%, 31%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-gray:enabled:active {
-  background-color: #e5e7eb;
-  color: rgba(69, 69, 71, 1);
+  background-color: hsla(219.6, 11%, 65%, 0.65);
+  color: hsla(219.6, 5%, 5%, 0.65);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-gray:disabled {
-  background-color: #f3f4f6;
-  color: rgba(73, 73, 74, 1);
+  background-color: hsla(219.6, 14.000000000000002%, 96%, 1);
+  color: hsla(219.6, 14.000000000000002%, 96%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-light-gray {
-  background-color: rgba(17, 24, 39, 0.4);
-  color: rgba(1575, 2083, 2794, 0.9);
+  background-color: hsla(219.6, 39%, 11%, 0.4);
+  color: hsla(219.6, 21%, 71%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-gray:enabled:hover {
-  background-color: #1f2937;
-  color: rgba(1575, 2083, 2794, 1);
+  background-color: hsla(216, 28.000000000000004%, 17%, 1);
+  color: hsla(216, 15%, 77%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-gray:enabled:focus-visible {
-  background-color: #1f2937;
-  color: rgba(1575, 2083, 2794, 1);
+  background-color: hsla(216, 28.000000000000004%, 17%, 1);
+  color: hsla(216, 15%, 77%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-gray:enabled:active {
-  background-color: #374151;
-  color: rgba(2794, 3302, 4115, 1);
+  background-color: hsla(219.6, 39%, 11%, 1);
+  color: hsla(219.6, 21%, 71%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-gray:disabled {
-  background-color: #111827;
-  color: rgba(864, 1219, 1981, 1);
+  background-color: hsla(219.6, 39%, 11%, 1);
+  color: hsla(219.6, 21%, 71%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-light-gray {
-  background-color: #f9fafb;
+  background-color: hsla(208.79999999999998, 20%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #6b7280;
-  box-shadow: inset 0 0 0 1px #6b7280, 0 0px 0px 1px #111827;
+  border-color: hsla(219.6, 9%, 46%, 1);
+  box-shadow: inset 0 0 0 1px hsla(219.6, 9%, 46%, 1), 0 0px 0px 1px hsla(219.6, 39%, 11%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-light-gray:enabled:hover {
-  background-color: #374151;
+  background-color: hsla(216, 19%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-gray:enabled:focus-visible {
-  background-color: #374151;
+  background-color: hsla(216, 19%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-gray:enabled:active {
-  background-color: #111827;
+  background-color: hsla(219.6, 39%, 11%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-gray {
-  background-color: #111827;
+  background-color: hsla(219.6, 39%, 11%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #111827;
-  box-shadow: inset 0 0 0 1px #111827, 0 0px 0px 1px #f9fafb;
+  border-color: hsla(219.6, 39%, 11%, 1);
+  box-shadow: inset 0 0 0 1px hsla(219.6, 39%, 11%, 1), 0 0px 0px 1px hsla(208.79999999999998, 20%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-light-gray:enabled:hover {
-  background-color: #f9fafb;
+  background-color: hsla(208.79999999999998, 20%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-gray:enabled:focus-visible {
-  background-color: #f9fafb;
+  background-color: hsla(208.79999999999998, 20%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-gray:enabled:active {
-  background-color: #d1d5db;
+  background-color: hsla(216, 12%, 84%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-gray {
-  background-color: #9ca3af;
-  color: rgba(47, 49, 53, 1);
+  background-color: hsla(219.6, 11%, 65%, 1);
+  color: hsla(219.6, 5%, 5%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-gray:enabled:hover {
-  background-color: #6b7280;
+  background-color: hsla(219.6, 9%, 46%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-gray:enabled:focus-visible {
-  background-color: #6b7280;
+  background-color: hsla(219.6, 9%, 46%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-gray:enabled:active {
-  background-color: #4b5563;
-  color: rgba(5436, 5791, 6502, 1);
+  background-color: hsla(216, 14.000000000000002%, 34%, 1);
+  color: hsla(219.6, 5%, 96%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-gray:disabled {
-  background-color: #e5e7eb;
-  color: rgba(69, 69, 71, 1);
+  background-color: hsla(219.6, 13%, 91%, 1);
+  color: hsla(219.6, 7.000000000000001%, 31%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-gray {
-  background-color: #6b7280;
-  color: rgba(5436, 5791, 6502, 1);
+  background-color: hsla(219.6, 9%, 46%, 1);
+  color: hsla(219.6, 5%, 96%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-gray:enabled:hover {
-  background-color: #4b5563;
+  background-color: hsla(216, 14.000000000000002%, 34%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-gray:enabled:focus-visible {
-  background-color: #4b5563;
+  background-color: hsla(216, 14.000000000000002%, 34%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-gray:enabled:active {
-  background-color: rgba(75, 85, 99, 0.75);
+  background-color: hsla(216, 14.000000000000002%, 34%, 0.7);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-gray:disabled {
-  background-color: #374151;
-  color: rgba(2794, 3302, 4115, 1);
+  background-color: hsla(216, 19%, 27%, 1);
+  color: hsla(216, 11%, 87%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-gray {
-  background-color: #f9fafb;
+  background-color: hsla(208.79999999999998, 20%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #6b7280;
-  box-shadow: inset 0 0 0 1px #6b7280, 0 0px 0px 2px #111827;
+  border-color: hsla(219.6, 9%, 46%, 1);
+  box-shadow: inset 0 0 0 1px hsla(219.6, 9%, 46%, 1), 0 0px 0px 2px hsla(219.6, 39%, 11%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-gray:enabled:hover {
-  background-color: #374151;
+  background-color: hsla(216, 19%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-gray:enabled:focus-visible {
-  background-color: #374151;
+  background-color: hsla(216, 19%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-gray:enabled:active {
-  background-color: #111827;
+  background-color: hsla(219.6, 39%, 11%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-gray {
-  background-color: #111827;
+  background-color: hsla(219.6, 39%, 11%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #111827;
-  box-shadow: inset 0 0 0 1px #111827, 0 0px 0px 2px #f9fafb;
+  border-color: hsla(219.6, 39%, 11%, 1);
+  box-shadow: inset 0 0 0 1px hsla(219.6, 39%, 11%, 1), 0 0px 0px 2px hsla(208.79999999999998, 20%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-gray:enabled:hover {
-  background-color: #f9fafb;
+  background-color: hsla(208.79999999999998, 20%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-gray:enabled:focus-visible {
-  background-color: #f9fafb;
+  background-color: hsla(208.79999999999998, 20%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-gray:enabled:active {
-  background-color: #d1d5db;
+  background-color: hsla(216, 12%, 84%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-gray {
-  background-color: rgba(55, 65, 81, 0.9);
-  color: rgba(2794, 3302, 4115, 0.9);
+  background-color: hsla(216, 19%, 27%, 0.9);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-gray:enabled:hover {
-  background-color: rgba(31, 41, 55, 0.8);
-  color: rgba(864, 1219, 1981, 1);
+  background-color: hsla(216, 28.000000000000004%, 17%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-gray:enabled:focus-visible {
-  background-color: rgba(31, 41, 55, 0.8);
-  color: rgba(864, 1219, 1981, 1);
+  background-color: hsla(216, 28.000000000000004%, 17%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-gray:enabled:active {
-  background-color: #1f2937;
-  color: rgba(1575, 2083, 2794, 1);
+  background-color: hsla(216, 28.000000000000004%, 17%, 1);
+  color: hsla(216, 15%, 77%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-gray:disabled {
-  background-color: rgba(31, 41, 55, 0.6);
-  color: rgba(1575, 2083, 2794, 0.6);
+  background-color: hsla(216, 28.000000000000004%, 17%, 0.6);
+  color: hsla(216, 17%, 67%, 0.6);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-bold-gray {
-  background-color: rgba(17, 24, 39, 0.9);
-  color: rgba(864, 1219, 1981, 0.9);
+  background-color: hsla(219.6, 39%, 11%, 0.85);
+  color: hsla(219.6, 21%, 71%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-gray:enabled:hover {
-  background-color: rgba(17, 24, 39, 0.65);
+  background-color: hsla(219.6, 39%, 11%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-gray:enabled:focus-visible {
-  background-color: rgba(17, 24, 39, 0.65);
+  background-color: hsla(219.6, 39%, 11%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-gray:enabled:active {
-  background-color: #1f2937;
-  color: rgba(1575, 2083, 2794, 1);
+  background-color: hsla(219.6, 39%, 11%, 0.45);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-gray:disabled {
-  background-color: rgba(17, 24, 39, 0.4);
-  color: rgba(864, 1219, 1981, 0.4);
+  background-color: hsla(219.6, 39%, 11%, 0.4);
+  color: hsla(219.6, 39%, 11%, 0.4);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-bold-gray {
-  background-color: #f9fafb;
+  background-color: hsla(208.79999999999998, 20%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #6b7280;
-  box-shadow: inset 0 0 0 3px #6b7280, 0 0px 0px 3px #111827;
+  border-color: hsla(219.6, 9%, 46%, 1);
+  box-shadow: inset 0 0 0 3px hsla(219.6, 9%, 46%, 1), 0 0px 0px 3px hsla(219.6, 39%, 11%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-bold-gray:enabled:hover {
-  background-color: #374151;
+  background-color: hsla(216, 19%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-gray:enabled:focus-visible {
-  background-color: #374151;
+  background-color: hsla(216, 19%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-gray:enabled:active {
-  background-color: #111827;
+  background-color: hsla(219.6, 39%, 11%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-gray {
-  background-color: #111827;
+  background-color: hsla(219.6, 39%, 11%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #111827;
-  box-shadow: inset 0 0 0 3px #111827, 0 0px 0px 3px #f9fafb;
+  border-color: hsla(219.6, 39%, 11%, 1);
+  box-shadow: inset 0 0 0 3px hsla(219.6, 39%, 11%, 1), 0 0px 0px 3px hsla(208.79999999999998, 20%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-bold-gray:enabled:hover {
-  background-color: #f9fafb;
+  background-color: hsla(208.79999999999998, 20%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-gray:enabled:focus-visible {
-  background-color: #f9fafb;
+  background-color: hsla(208.79999999999998, 20%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-gray:enabled:active {
-  background-color: #d1d5db;
+  background-color: hsla(216, 12%, 84%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-gray {
-  background-color: rgba(249, 250, 251, 0.01);
-  color: #6b7280;
+  background-color: hsla(208.79999999999998, 20%, 98%, 0.01);
+  color: hsla(219.6, 9%, 46%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-gray:enabled:hover {
-  background-color: #6b7280;
+  background-color: hsla(219.6, 9%, 46%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-gray:enabled:focus-visible {
-  background-color: #6b7280;
+  background-color: hsla(219.6, 9%, 46%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-gray:enabled:active {
-  background-color: rgba(75, 85, 99, 0.85);
+  background-color: hsla(216, 14.000000000000002%, 34%, 0.85);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-gray:disabled {
-  background-color: rgba(249, 250, 251, 0.5);
-  color: rgba(75, 75, 75, 0.5);
+  background-color: hsla(208.79999999999998, 20%, 98%, 0.5);
+  color: hsla(208.79999999999998, 11%, 38%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .btn-outline-gray {
-  border-color: #6b7280;
+  border-color: hsla(219.6, 9%, 46%, 1);
   border-width: 1px;
   border-style: solid;
 }
 
 .dark .btn-outline-gray {
-  background-color: rgba(17, 24, 39, 0.01);
-  color: #9ca3af;
+  background-color: hsla(219.6, 39%, 11%, 0.01);
+  color: hsla(219.6, 11%, 65%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-gray:enabled:hover {
-  background-color: #6b7280;
+  background-color: hsla(219.6, 9%, 46%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-gray:enabled:focus-visible {
-  background-color: #6b7280;
+  background-color: hsla(219.6, 9%, 46%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-gray:enabled:active {
-  background-color: rgba(156, 163, 175, 0.85);
+  background-color: hsla(219.6, 9%, 46%, 0.8);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-gray:disabled {
-  background-color: rgba(249, 250, 251, 0.5);
-  color: rgba(75, 75, 75, 0.5);
+  background-color: hsla(208.79999999999998, 20%, 98%, 0.5);
+  color: hsla(208.79999999999998, 11%, 38%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-outline-gray {
-  border-color: #9ca3af;
+  border-color: hsla(219.6, 11%, 65%, 1);
 }
 
 .contrast .btn-outline-gray {
-  background-color: rgba(249, 250, 251, 0.01);
-  color: #374151;
+  background-color: hsla(208.79999999999998, 20%, 98%, 0.01);
+  color: hsla(216, 19%, 27%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #374151;
-  box-shadow: inset 0 0 0 3px #374151, 0 0px 0px 3px #f9fafb;
+  border-color: hsla(216, 19%, 27%, 1);
+  box-shadow: inset 0 0 0 3px hsla(216, 19%, 27%, 1), 0 0px 0px 3px hsla(208.79999999999998, 20%, 98%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-outline-gray:enabled:hover {
-  background-color: #f9fafb;
+  background-color: hsla(208.79999999999998, 20%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-gray:enabled:focus-visible {
-  background-color: #f9fafb;
+  background-color: hsla(208.79999999999998, 20%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-gray:enabled:active {
-  background-color: #d1d5db;
+  background-color: hsla(216, 12%, 84%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-gray {
-  background-color: rgba(17, 24, 39, 0.01);
-  color: #f3f4f6;
+  background-color: hsla(219.6, 39%, 11%, 0.01);
+  color: hsla(219.6, 14.000000000000002%, 96%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #e5e7eb;
-  box-shadow: inset 0 0 0 3px #374151, 0 0px 0px 3px #f3f4f6;
+  border-color: hsla(219.6, 13%, 91%, 1);
+  box-shadow: inset 0 0 0 3px hsla(216, 19%, 27%, 1), 0 0px 0px 3px hsla(219.6, 14.000000000000002%, 96%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-outline-gray:enabled:hover {
-  background-color: #374151;
+  background-color: hsla(216, 19%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-gray:enabled:focus-visible {
-  background-color: #374151;
+  background-color: hsla(216, 19%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-gray:enabled:active {
-  background-color: rgba(17, 24, 39, 0.6);
+  background-color: hsla(219.6, 39%, 11%, 0.6);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-gray {
-  background-color: rgba(249, 250, 251, 0.01);
-  color: #6b7280;
+  background-color: hsla(208.79999999999998, 20%, 98%, 0.01);
+  color: hsla(219.6, 9%, 46%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-gray:enabled:hover {
-  background-color: #f3f4f6;
-  color: #6b7280;
+  background-color: hsla(219.6, 14.000000000000002%, 96%, 1);
+  color: hsla(219.6, 9%, 46%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-gray:enabled:focus-visible {
-  background-color: #f3f4f6;
-  color: #6b7280;
+  background-color: hsla(219.6, 14.000000000000002%, 96%, 1);
+  color: hsla(219.6, 9%, 46%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-gray:enabled:active {
-  background-color: rgba(229, 231, 235, 0.85);
-  color: #4b5563;
+  background-color: hsla(219.6, 13%, 91%, 0.85);
+  color: hsla(216, 14.000000000000002%, 34%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-gray:disabled {
-  background-color: rgba(249, 250, 251, 0.5);
-  color: rgba(75, 75, 75, 0.5);
+  background-color: hsla(208.79999999999998, 20%, 98%, 0.5);
+  color: hsla(208.79999999999998, 11%, 38%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-clear-gray {
-  background-color: rgba(17, 24, 39, 0.01);
-  color: #9ca3af;
+  background-color: hsla(219.6, 39%, 11%, 0.01);
+  color: hsla(219.6, 11%, 65%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-gray:enabled:hover {
-  background-color: rgba(75, 85, 99, 0.35);
-  color: #4b5563;
+  background-color: hsla(216, 12%, 84%, 0.25);
+  color: hsla(219.6, 9%, 46%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-gray:enabled:focus-visible {
-  background-color: rgba(75, 85, 99, 0.35);
-  color: #4b5563;
+  background-color: hsla(216, 12%, 84%, 0.25);
+  color: hsla(219.6, 9%, 46%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-gray:enabled:active {
-  background-color: rgba(55, 65, 81, 0.4);
-  color: #6b7280;
+  background-color: hsla(219.6, 11%, 65%, 0.2);
+  color: hsla(216, 14.000000000000002%, 34%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-gray:disabled {
-  background-color: rgba(55, 65, 81, 7);
-  color: rgba(2794, 3302, 4115, 7);
+  background-color: hsla(216, 19%, 27%, 0.07);
+  color: hsla(216, 19%, 27%, 0.07);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-clear-gray {
-  background-color: rgba(249, 250, 251, 0.01);
-  color: #374151;
+  background-color: hsla(208.79999999999998, 20%, 98%, 0.01);
+  color: hsla(216, 19%, 27%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #6b7280;
-  box-shadow: inset 0 0 0 1px #6b7280, 0 0px 0px 2px #111827;
+  border-color: hsla(219.6, 9%, 46%, 1);
+  box-shadow: inset 0 0 0 1px hsla(219.6, 9%, 46%, 1), 0 0px 0px 2px hsla(219.6, 39%, 11%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-clear-gray:enabled:hover {
-  background-color: #374151;
+  background-color: hsla(216, 19%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-gray:enabled:focus-visible {
-  background-color: #374151;
+  background-color: hsla(216, 19%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-gray:enabled:active {
-  background-color: #111827;
+  background-color: hsla(219.6, 39%, 11%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-gray {
-  background-color: #111827;
+  background-color: hsla(219.6, 39%, 11%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #111827;
-  box-shadow: inset 0 0 0 1px #111827, 0 0px 0px 2px #f9fafb;
+  border-color: hsla(219.6, 39%, 11%, 1);
+  box-shadow: inset 0 0 0 1px hsla(219.6, 39%, 11%, 1), 0 0px 0px 2px hsla(208.79999999999998, 20%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-clear-gray:enabled:hover {
-  background-color: #f9fafb;
+  background-color: hsla(208.79999999999998, 20%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-gray:enabled:focus-visible {
-  background-color: #f9fafb;
+  background-color: hsla(208.79999999999998, 20%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-gray:enabled:active {
-  background-color: #d1d5db;
+  background-color: hsla(216, 12%, 84%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-slate {
-  background-color: rgba(241, 245, 249, 0.8);
-  color: rgba(74, 75, 76, 0.9);
+  background-color: hsla(208.79999999999998, 40%, 96%, 0.8);
+  color: hsla(216, 17%, 31%, 0.9);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-slate:enabled:hover {
-  background-color: #cbd5e1;
-  color: #000;
+  background-color: hsla(216, 32%, 91%, 1);
+  color: hsla(216, 17%, 31%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-slate:enabled:focus-visible {
-  background-color: #cbd5e1;
-  color: #000;
+  background-color: hsla(216, 32%, 91%, 1);
+  color: hsla(216, 17%, 31%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-slate:enabled:active {
-  background-color: #e2e8f0;
-  color: rgba(68, 70, 72, 1);
+  background-color: hsla(216, 20%, 65%, 0.65);
+  color: hsla(216, 11%, 5%, 0.65);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-slate:disabled {
-  background-color: #f1f5f9;
-  color: rgba(72, 74, 75, 1);
+  background-color: hsla(208.79999999999998, 40%, 96%, 1);
+  color: hsla(208.79999999999998, 40%, 96%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-light-slate {
-  background-color: rgba(15, 23, 42, 0.4);
-  color: rgba(1524, 2083, 2997, 0.9);
+  background-color: hsla(223.2, 47%, 11%, 0.4);
+  color: hsla(223.2, 25%, 71%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-slate:enabled:hover {
-  background-color: #1e293b;
-  color: rgba(1524, 2083, 2997, 1);
+  background-color: hsla(216, 33%, 17%, 1);
+  color: hsla(216, 18%, 77%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-slate:enabled:focus-visible {
-  background-color: #1e293b;
-  color: rgba(1524, 2083, 2997, 1);
+  background-color: hsla(216, 33%, 17%, 1);
+  color: hsla(216, 18%, 77%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-slate:enabled:active {
-  background-color: #334155;
-  color: rgba(2591, 3302, 4318, 1);
+  background-color: hsla(223.2, 47%, 11%, 1);
+  color: hsla(223.2, 25%, 71%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-slate:disabled {
-  background-color: #0f172a;
-  color: rgba(762, 1168, 2134, 1);
+  background-color: hsla(223.2, 47%, 11%, 1);
+  color: hsla(223.2, 25%, 71%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-light-slate {
-  background-color: #f8fafc;
+  background-color: hsla(208.79999999999998, 40%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #64748b;
-  box-shadow: inset 0 0 0 1px #64748b, 0 0px 0px 1px #0f172a;
+  border-color: hsla(216, 16%, 47%, 1);
+  box-shadow: inset 0 0 0 1px hsla(216, 16%, 47%, 1), 0 0px 0px 1px hsla(223.2, 47%, 11%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-light-slate:enabled:hover {
-  background-color: #334155;
+  background-color: hsla(216, 25%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-slate:enabled:focus-visible {
-  background-color: #334155;
+  background-color: hsla(216, 25%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-slate:enabled:active {
-  background-color: #0f172a;
+  background-color: hsla(223.2, 47%, 11%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-slate {
-  background-color: #0f172a;
+  background-color: hsla(223.2, 47%, 11%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #0f172a;
-  box-shadow: inset 0 0 0 1px #0f172a, 0 0px 0px 1px #f8fafc;
+  border-color: hsla(223.2, 47%, 11%, 1);
+  box-shadow: inset 0 0 0 1px hsla(223.2, 47%, 11%, 1), 0 0px 0px 1px hsla(208.79999999999998, 40%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-light-slate:enabled:hover {
-  background-color: #f8fafc;
+  background-color: hsla(208.79999999999998, 40%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-slate:enabled:focus-visible {
-  background-color: #f8fafc;
+  background-color: hsla(208.79999999999998, 40%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-slate:enabled:active {
-  background-color: #cbd5e1;
+  background-color: hsla(212.39999999999998, 27%, 84%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-slate {
-  background-color: #94a3b8;
-  color: rgba(44, 49, 55, 1);
+  background-color: hsla(216, 20%, 65%, 1);
+  color: hsla(216, 11%, 5%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-slate:enabled:hover {
-  background-color: #64748b;
-  color: #FFF;
+  background-color: hsla(216, 16%, 47%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-slate:enabled:focus-visible {
-  background-color: #64748b;
-  color: #FFF;
+  background-color: hsla(216, 16%, 47%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-slate:enabled:active {
-  background-color: #475569;
-  color: rgba(5080, 5893, 7061, 1);
+  background-color: hsla(216, 19%, 35%, 1);
+  color: hsla(216, 10%, 0%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-slate:disabled {
-  background-color: #e2e8f0;
-  color: rgba(68, 70, 72, 1);
+  background-color: hsla(216, 32%, 91%, 1);
+  color: hsla(216, 17%, 31%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-slate {
-  background-color: #64748b;
-  color: rgba(5080, 5893, 7061, 1);
+  background-color: hsla(216, 16%, 47%, 1);
+  color: hsla(216, 10%, 0%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-slate:enabled:hover {
-  background-color: #475569;
+  background-color: hsla(216, 19%, 35%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-slate:enabled:focus-visible {
-  background-color: #475569;
+  background-color: hsla(216, 19%, 35%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-slate:enabled:active {
-  background-color: rgba(71, 85, 105, 0.75);
+  background-color: hsla(216, 19%, 35%, 0.7);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-slate:disabled {
-  background-color: #334155;
-  color: rgba(2591, 3302, 4318, 1);
+  background-color: hsla(216, 25%, 27%, 1);
+  color: hsla(216, 14.000000000000002%, 87%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-slate {
-  background-color: #f8fafc;
+  background-color: hsla(208.79999999999998, 40%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #64748b;
-  box-shadow: inset 0 0 0 1px #64748b, 0 0px 0px 2px #0f172a;
+  border-color: hsla(216, 16%, 47%, 1);
+  box-shadow: inset 0 0 0 1px hsla(216, 16%, 47%, 1), 0 0px 0px 2px hsla(223.2, 47%, 11%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-slate:enabled:hover {
-  background-color: #334155;
+  background-color: hsla(216, 25%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-slate:enabled:focus-visible {
-  background-color: #334155;
+  background-color: hsla(216, 25%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-slate:enabled:active {
-  background-color: #0f172a;
+  background-color: hsla(223.2, 47%, 11%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-slate {
-  background-color: #0f172a;
+  background-color: hsla(223.2, 47%, 11%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #0f172a;
-  box-shadow: inset 0 0 0 1px #0f172a, 0 0px 0px 2px #f8fafc;
+  border-color: hsla(223.2, 47%, 11%, 1);
+  box-shadow: inset 0 0 0 1px hsla(223.2, 47%, 11%, 1), 0 0px 0px 2px hsla(208.79999999999998, 40%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-slate:enabled:hover {
-  background-color: #f8fafc;
+  background-color: hsla(208.79999999999998, 40%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-slate:enabled:focus-visible {
-  background-color: #f8fafc;
+  background-color: hsla(208.79999999999998, 40%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-slate:enabled:active {
-  background-color: #cbd5e1;
+  background-color: hsla(212.39999999999998, 27%, 84%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-slate {
-  background-color: rgba(51, 65, 85, 0.9);
-  color: rgba(2591, 3302, 4318, 0.9);
+  background-color: hsla(216, 25%, 27%, 0.9);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-slate:enabled:hover {
-  background-color: rgba(30, 41, 59, 0.8);
-  color: rgba(762, 1168, 2134, 1);
+  background-color: hsla(216, 33%, 17%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-slate:enabled:focus-visible {
-  background-color: rgba(30, 41, 59, 0.8);
-  color: rgba(762, 1168, 2134, 1);
+  background-color: hsla(216, 33%, 17%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-slate:enabled:active {
-  background-color: #1e293b;
-  color: rgba(1524, 2083, 2997, 1);
+  background-color: hsla(216, 33%, 17%, 1);
+  color: hsla(216, 18%, 77%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-slate:disabled {
-  background-color: rgba(30, 41, 59, 0.6);
-  color: rgba(1524, 2083, 2997, 0.6);
+  background-color: hsla(216, 33%, 17%, 0.6);
+  color: hsla(216, 20%, 67%, 0.6);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-bold-slate {
-  background-color: rgba(15, 23, 42, 0.9);
-  color: rgba(762, 1168, 2134, 0.9);
+  background-color: hsla(223.2, 47%, 11%, 0.85);
+  color: hsla(223.2, 25%, 71%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-slate:enabled:hover {
-  background-color: rgba(15, 23, 42, 0.65);
+  background-color: hsla(223.2, 47%, 11%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-slate:enabled:focus-visible {
-  background-color: rgba(15, 23, 42, 0.65);
+  background-color: hsla(223.2, 47%, 11%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-slate:enabled:active {
-  background-color: #1e293b;
-  color: rgba(1524, 2083, 2997, 1);
+  background-color: hsla(223.2, 47%, 11%, 0.45);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-slate:disabled {
-  background-color: rgba(15, 23, 42, 0.4);
-  color: rgba(762, 1168, 2134, 0.4);
+  background-color: hsla(223.2, 47%, 11%, 0.4);
+  color: hsla(223.2, 47%, 11%, 0.4);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-bold-slate {
-  background-color: #f8fafc;
+  background-color: hsla(208.79999999999998, 40%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #64748b;
-  box-shadow: inset 0 0 0 3px #64748b, 0 0px 0px 3px #0f172a;
+  border-color: hsla(216, 16%, 47%, 1);
+  box-shadow: inset 0 0 0 3px hsla(216, 16%, 47%, 1), 0 0px 0px 3px hsla(223.2, 47%, 11%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-bold-slate:enabled:hover {
-  background-color: #334155;
+  background-color: hsla(216, 25%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-slate:enabled:focus-visible {
-  background-color: #334155;
+  background-color: hsla(216, 25%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-slate:enabled:active {
-  background-color: #0f172a;
+  background-color: hsla(223.2, 47%, 11%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-slate {
-  background-color: #0f172a;
+  background-color: hsla(223.2, 47%, 11%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #0f172a;
-  box-shadow: inset 0 0 0 3px #0f172a, 0 0px 0px 3px #f8fafc;
+  border-color: hsla(223.2, 47%, 11%, 1);
+  box-shadow: inset 0 0 0 3px hsla(223.2, 47%, 11%, 1), 0 0px 0px 3px hsla(208.79999999999998, 40%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-bold-slate:enabled:hover {
-  background-color: #f8fafc;
+  background-color: hsla(208.79999999999998, 40%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-slate:enabled:focus-visible {
-  background-color: #f8fafc;
+  background-color: hsla(208.79999999999998, 40%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-slate:enabled:active {
-  background-color: #cbd5e1;
+  background-color: hsla(212.39999999999998, 27%, 84%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-slate {
-  background-color: rgba(248, 250, 252, 0.01);
-  color: #64748b;
+  background-color: hsla(208.79999999999998, 40%, 98%, 0.01);
+  color: hsla(216, 16%, 47%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-slate:enabled:hover {
-  background-color: #64748b;
-  color: #FFF;
+  background-color: hsla(216, 16%, 47%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-slate:enabled:focus-visible {
-  background-color: #64748b;
-  color: #FFF;
+  background-color: hsla(216, 16%, 47%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-slate:enabled:active {
-  background-color: rgba(71, 85, 105, 0.85);
-  color: #FFF;
+  background-color: hsla(216, 19%, 35%, 0.85);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-slate:disabled {
-  background-color: rgba(248, 250, 252, 0.5);
-  color: rgba(74, 75, 76, 0.5);
+  background-color: hsla(208.79999999999998, 40%, 98%, 0.5);
+  color: hsla(208.79999999999998, 21%, 38%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .btn-outline-slate {
-  border-color: #64748b;
+  border-color: hsla(216, 16%, 47%, 1);
   border-width: 1px;
   border-style: solid;
 }
 
 .dark .btn-outline-slate {
-  background-color: rgba(15, 23, 42, 0.01);
-  color: #94a3b8;
+  background-color: hsla(223.2, 47%, 11%, 0.01);
+  color: hsla(216, 20%, 65%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-slate:enabled:hover {
-  background-color: #64748b;
-  color: #FFF;
+  background-color: hsla(216, 16%, 47%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-slate:enabled:focus-visible {
-  background-color: #64748b;
-  color: #FFF;
+  background-color: hsla(216, 16%, 47%, 1);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-slate:enabled:active {
-  background-color: rgba(148, 163, 184, 0.85);
-  color: #FFF;
+  background-color: hsla(216, 16%, 47%, 0.8);
+  color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-slate:disabled {
-  background-color: rgba(248, 250, 252, 0.5);
-  color: rgba(74, 75, 76, 0.5);
+  background-color: hsla(208.79999999999998, 40%, 98%, 0.5);
+  color: hsla(208.79999999999998, 21%, 38%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-outline-slate {
-  border-color: #94a3b8;
+  border-color: hsla(216, 20%, 65%, 1);
 }
 
 .contrast .btn-outline-slate {
-  background-color: rgba(248, 250, 252, 0.01);
-  color: #334155;
+  background-color: hsla(208.79999999999998, 40%, 98%, 0.01);
+  color: hsla(216, 25%, 27%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #334155;
-  box-shadow: inset 0 0 0 3px #334155, 0 0px 0px 3px #f8fafc;
+  border-color: hsla(216, 25%, 27%, 1);
+  box-shadow: inset 0 0 0 3px hsla(216, 25%, 27%, 1), 0 0px 0px 3px hsla(208.79999999999998, 40%, 98%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-outline-slate:enabled:hover {
-  background-color: #f8fafc;
+  background-color: hsla(208.79999999999998, 40%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-slate:enabled:focus-visible {
-  background-color: #f8fafc;
+  background-color: hsla(208.79999999999998, 40%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-slate:enabled:active {
-  background-color: #cbd5e1;
+  background-color: hsla(212.39999999999998, 27%, 84%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-slate {
-  background-color: rgba(15, 23, 42, 0.01);
-  color: #f1f5f9;
+  background-color: hsla(223.2, 47%, 11%, 0.01);
+  color: hsla(208.79999999999998, 40%, 96%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #e2e8f0;
-  box-shadow: inset 0 0 0 3px #334155, 0 0px 0px 3px #f1f5f9;
+  border-color: hsla(216, 32%, 91%, 1);
+  box-shadow: inset 0 0 0 3px hsla(216, 25%, 27%, 1), 0 0px 0px 3px hsla(208.79999999999998, 40%, 96%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-outline-slate:enabled:hover {
-  background-color: #334155;
+  background-color: hsla(216, 25%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-slate:enabled:focus-visible {
-  background-color: #334155;
+  background-color: hsla(216, 25%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-slate:enabled:active {
-  background-color: rgba(15, 23, 42, 0.6);
+  background-color: hsla(223.2, 47%, 11%, 0.6);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-slate {
-  background-color: rgba(248, 250, 252, 0.01);
-  color: #64748b;
+  background-color: hsla(208.79999999999998, 40%, 98%, 0.01);
+  color: hsla(216, 16%, 47%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-slate:enabled:hover {
-  background-color: #f1f5f9;
-  color: #64748b;
+  background-color: hsla(208.79999999999998, 40%, 96%, 1);
+  color: hsla(216, 16%, 47%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-slate:enabled:focus-visible {
-  background-color: #f1f5f9;
-  color: #64748b;
+  background-color: hsla(208.79999999999998, 40%, 96%, 1);
+  color: hsla(216, 16%, 47%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-slate:enabled:active {
-  background-color: rgba(226, 232, 240, 0.85);
-  color: #475569;
+  background-color: hsla(216, 32%, 91%, 0.85);
+  color: hsla(216, 19%, 35%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-slate:disabled {
-  background-color: rgba(248, 250, 252, 0.5);
-  color: rgba(74, 75, 76, 0.5);
+  background-color: hsla(208.79999999999998, 40%, 98%, 0.5);
+  color: hsla(208.79999999999998, 21%, 38%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-clear-slate {
-  background-color: rgba(15, 23, 42, 0.01);
-  color: #94a3b8;
+  background-color: hsla(223.2, 47%, 11%, 0.01);
+  color: hsla(216, 20%, 65%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-slate:enabled:hover {
-  background-color: rgba(71, 85, 105, 0.35);
-  color: #475569;
+  background-color: hsla(212.39999999999998, 27%, 84%, 0.25);
+  color: hsla(216, 16%, 47%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-slate:enabled:focus-visible {
-  background-color: rgba(71, 85, 105, 0.35);
-  color: #475569;
+  background-color: hsla(212.39999999999998, 27%, 84%, 0.25);
+  color: hsla(216, 16%, 47%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-slate:enabled:active {
-  background-color: rgba(51, 65, 85, 0.4);
-  color: #64748b;
+  background-color: hsla(216, 20%, 65%, 0.2);
+  color: hsla(216, 19%, 35%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-slate:disabled {
-  background-color: rgba(51, 65, 85, 7);
-  color: rgba(2591, 3302, 4318, 7);
+  background-color: hsla(216, 25%, 27%, 0.07);
+  color: hsla(216, 25%, 27%, 0.07);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-clear-slate {
-  background-color: rgba(248, 250, 252, 0.01);
-  color: #334155;
+  background-color: hsla(208.79999999999998, 40%, 98%, 0.01);
+  color: hsla(216, 25%, 27%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #64748b;
-  box-shadow: inset 0 0 0 1px #64748b, 0 0px 0px 2px #0f172a;
+  border-color: hsla(216, 16%, 47%, 1);
+  box-shadow: inset 0 0 0 1px hsla(216, 16%, 47%, 1), 0 0px 0px 2px hsla(223.2, 47%, 11%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-clear-slate:enabled:hover {
-  background-color: #334155;
+  background-color: hsla(216, 25%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-slate:enabled:focus-visible {
-  background-color: #334155;
+  background-color: hsla(216, 25%, 27%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-slate:enabled:active {
-  background-color: #0f172a;
+  background-color: hsla(223.2, 47%, 11%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-slate {
-  background-color: #0f172a;
+  background-color: hsla(223.2, 47%, 11%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #0f172a;
-  box-shadow: inset 0 0 0 1px #0f172a, 0 0px 0px 2px #f8fafc;
+  border-color: hsla(223.2, 47%, 11%, 1);
+  box-shadow: inset 0 0 0 1px hsla(223.2, 47%, 11%, 1), 0 0px 0px 2px hsla(208.79999999999998, 40%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-clear-slate:enabled:hover {
-  background-color: #f8fafc;
+  background-color: hsla(208.79999999999998, 40%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-slate:enabled:focus-visible {
-  background-color: #f8fafc;
+  background-color: hsla(208.79999999999998, 40%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-slate:enabled:active {
-  background-color: #cbd5e1;
+  background-color: hsla(212.39999999999998, 27%, 84%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-zinc {
-  background-color: rgba(244, 244, 245, 0.8);
-  color: rgba(75, 75, 75, 0.9);
+  background-color: hsla(241.20000000000002, 5%, 96%, 0.8);
+  color: hsla(241.20000000000002, 5%, 40%, 0.9);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-zinc:enabled:hover {
-  background-color: #d4d4d8;
-  color: #000;
+  background-color: hsla(241.20000000000002, 6%, 90%, 1);
+  color: hsla(241.20000000000002, 5%, 30%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-zinc:enabled:focus-visible {
-  background-color: #d4d4d8;
-  color: #000;
+  background-color: hsla(241.20000000000002, 6%, 90%, 1);
+  color: hsla(241.20000000000002, 5%, 30%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-zinc:enabled:active {
-  background-color: #e4e4e7;
-  color: rgba(68, 68, 69, 1);
+  background-color: hsla(241.20000000000002, 5%, 65%, 0.65);
+  color: hsla(241.20000000000002, 5%, 5%, 0.65);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-zinc:disabled {
-  background-color: #f4f4f5;
-  color: rgba(73, 73, 74, 1);
+  background-color: hsla(241.20000000000002, 5%, 96%, 1);
+  color: hsla(241.20000000000002, 5%, 96%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-light-zinc {
-  background-color: rgba(24, 24, 27, 0.4);
-  color: rgba(1981, 1981, 2134, 0.9);
+  background-color: hsla(241.20000000000002, 6%, 10%, 0.4);
+  color: hsla(241.20000000000002, 5%, 70%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-zinc:enabled:hover {
-  background-color: #27272a;
-  color: rgba(1981, 1981, 2134, 1);
+  background-color: hsla(241.20000000000002, 4%, 16%, 1);
+  color: hsla(241.20000000000002, 4%, 76%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-zinc:enabled:focus-visible {
-  background-color: #27272a;
-  color: rgba(1981, 1981, 2134, 1);
+  background-color: hsla(241.20000000000002, 4%, 16%, 1);
+  color: hsla(241.20000000000002, 4%, 76%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-zinc:enabled:active {
-  background-color: #3f3f46;
-  color: rgba(3200, 3200, 3556, 1);
+  background-color: hsla(241.20000000000002, 6%, 10%, 1);
+  color: hsla(241.20000000000002, 5%, 70%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-zinc:disabled {
-  background-color: #18181b;
-  color: rgba(1219, 1219, 1372, 1);
+  background-color: hsla(241.20000000000002, 6%, 10%, 1);
+  color: hsla(241.20000000000002, 5%, 70%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-light-zinc {
-  background-color: #fafafa;
+  background-color: hsla(0, 0%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #71717a;
-  box-shadow: inset 0 0 0 1px #71717a, 0 0px 0px 1px #18181b;
+  border-color: hsla(241.20000000000002, 4%, 46%, 1);
+  box-shadow: inset 0 0 0 1px hsla(241.20000000000002, 4%, 46%, 1), 0 0px 0px 1px hsla(241.20000000000002, 6%, 10%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-light-zinc:enabled:hover {
-  background-color: #3f3f46;
+  background-color: hsla(241.20000000000002, 5%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-zinc:enabled:focus-visible {
-  background-color: #3f3f46;
+  background-color: hsla(241.20000000000002, 5%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-zinc:enabled:active {
-  background-color: #18181b;
+  background-color: hsla(241.20000000000002, 6%, 10%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-zinc {
-  background-color: #18181b;
+  background-color: hsla(241.20000000000002, 6%, 10%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #18181b;
-  box-shadow: inset 0 0 0 1px #18181b, 0 0px 0px 1px #fafafa;
+  border-color: hsla(241.20000000000002, 6%, 10%, 1);
+  box-shadow: inset 0 0 0 1px hsla(241.20000000000002, 6%, 10%, 1), 0 0px 0px 1px hsla(0, 0%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-light-zinc:enabled:hover {
-  background-color: #fafafa;
+  background-color: hsla(0, 0%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-zinc:enabled:focus-visible {
-  background-color: #fafafa;
+  background-color: hsla(0, 0%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-zinc:enabled:active {
-  background-color: #d4d4d8;
+  background-color: hsla(241.20000000000002, 5%, 84%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-zinc {
-  background-color: #a1a1aa;
-  color: rgba(48, 48, 51, 1);
+  background-color: hsla(241.20000000000002, 5%, 65%, 1);
+  color: hsla(241.20000000000002, 5%, 5%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-zinc:enabled:hover {
-  background-color: #71717a;
+  background-color: hsla(241.20000000000002, 4%, 46%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-zinc:enabled:focus-visible {
-  background-color: #71717a;
+  background-color: hsla(241.20000000000002, 4%, 46%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-zinc:enabled:active {
-  background-color: #52525b;
-  color: rgba(5740, 5740, 6198, 1);
+  background-color: hsla(241.20000000000002, 5%, 34%, 1);
+  color: hsla(241.20000000000002, 4%, 96%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-zinc:disabled {
-  background-color: #e4e4e7;
-  color: rgba(68, 68, 69, 1);
+  background-color: hsla(241.20000000000002, 6%, 90%, 1);
+  color: hsla(241.20000000000002, 5%, 30%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-zinc {
-  background-color: #71717a;
-  color: rgba(5740, 5740, 6198, 1);
+  background-color: hsla(241.20000000000002, 4%, 46%, 1);
+  color: hsla(241.20000000000002, 4%, 96%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-zinc:enabled:hover {
-  background-color: #52525b;
+  background-color: hsla(241.20000000000002, 5%, 34%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-zinc:enabled:focus-visible {
-  background-color: #52525b;
+  background-color: hsla(241.20000000000002, 5%, 34%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-zinc:enabled:active {
-  background-color: rgba(82, 82, 91, 0.75);
+  background-color: hsla(241.20000000000002, 5%, 34%, 0.7);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-zinc:disabled {
-  background-color: #3f3f46;
-  color: rgba(3200, 3200, 3556, 1);
+  background-color: hsla(241.20000000000002, 5%, 26%, 1);
+  color: hsla(241.20000000000002, 5%, 86%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-zinc {
-  background-color: #fafafa;
+  background-color: hsla(0, 0%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #71717a;
-  box-shadow: inset 0 0 0 1px #71717a, 0 0px 0px 2px #18181b;
+  border-color: hsla(241.20000000000002, 4%, 46%, 1);
+  box-shadow: inset 0 0 0 1px hsla(241.20000000000002, 4%, 46%, 1), 0 0px 0px 2px hsla(241.20000000000002, 6%, 10%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-zinc:enabled:hover {
-  background-color: #3f3f46;
+  background-color: hsla(241.20000000000002, 5%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-zinc:enabled:focus-visible {
-  background-color: #3f3f46;
+  background-color: hsla(241.20000000000002, 5%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-zinc:enabled:active {
-  background-color: #18181b;
+  background-color: hsla(241.20000000000002, 6%, 10%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-zinc {
-  background-color: #18181b;
+  background-color: hsla(241.20000000000002, 6%, 10%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #18181b;
-  box-shadow: inset 0 0 0 1px #18181b, 0 0px 0px 2px #fafafa;
+  border-color: hsla(241.20000000000002, 6%, 10%, 1);
+  box-shadow: inset 0 0 0 1px hsla(241.20000000000002, 6%, 10%, 1), 0 0px 0px 2px hsla(0, 0%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-zinc:enabled:hover {
-  background-color: #fafafa;
+  background-color: hsla(0, 0%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-zinc:enabled:focus-visible {
-  background-color: #fafafa;
+  background-color: hsla(0, 0%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-zinc:enabled:active {
-  background-color: #d4d4d8;
+  background-color: hsla(241.20000000000002, 5%, 84%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-zinc {
-  background-color: rgba(63, 63, 70, 0.9);
-  color: rgba(3200, 3200, 3556, 0.9);
+  background-color: hsla(241.20000000000002, 5%, 26%, 0.9);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-zinc:enabled:hover {
-  background-color: rgba(39, 39, 42, 0.8);
-  color: rgba(1219, 1219, 1372, 1);
+  background-color: hsla(241.20000000000002, 4%, 16%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-zinc:enabled:focus-visible {
-  background-color: rgba(39, 39, 42, 0.8);
-  color: rgba(1219, 1219, 1372, 1);
+  background-color: hsla(241.20000000000002, 4%, 16%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-zinc:enabled:active {
-  background-color: #27272a;
-  color: rgba(1981, 1981, 2134, 1);
+  background-color: hsla(241.20000000000002, 4%, 16%, 1);
+  color: hsla(241.20000000000002, 4%, 76%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-zinc:disabled {
-  background-color: rgba(39, 39, 42, 0.6);
-  color: rgba(1981, 1981, 2134, 0.6);
+  background-color: hsla(241.20000000000002, 4%, 16%, 0.6);
+  color: hsla(241.20000000000002, 4%, 66%, 0.6);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-bold-zinc {
-  background-color: rgba(24, 24, 27, 0.9);
-  color: rgba(1219, 1219, 1372, 0.9);
+  background-color: hsla(241.20000000000002, 6%, 10%, 0.85);
+  color: hsla(241.20000000000002, 5%, 70%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-zinc:enabled:hover {
-  background-color: rgba(24, 24, 27, 0.65);
+  background-color: hsla(241.20000000000002, 6%, 10%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-zinc:enabled:focus-visible {
-  background-color: rgba(24, 24, 27, 0.65);
+  background-color: hsla(241.20000000000002, 6%, 10%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-zinc:enabled:active {
-  background-color: #27272a;
-  color: rgba(1981, 1981, 2134, 1);
+  background-color: hsla(241.20000000000002, 6%, 10%, 0.45);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-zinc:disabled {
-  background-color: rgba(24, 24, 27, 0.4);
-  color: rgba(1219, 1219, 1372, 0.4);
+  background-color: hsla(241.20000000000002, 6%, 10%, 0.4);
+  color: hsla(241.20000000000002, 6%, 10%, 0.4);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-bold-zinc {
-  background-color: #fafafa;
+  background-color: hsla(0, 0%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #71717a;
-  box-shadow: inset 0 0 0 3px #71717a, 0 0px 0px 3px #18181b;
+  border-color: hsla(241.20000000000002, 4%, 46%, 1);
+  box-shadow: inset 0 0 0 3px hsla(241.20000000000002, 4%, 46%, 1), 0 0px 0px 3px hsla(241.20000000000002, 6%, 10%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-bold-zinc:enabled:hover {
-  background-color: #3f3f46;
+  background-color: hsla(241.20000000000002, 5%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-zinc:enabled:focus-visible {
-  background-color: #3f3f46;
+  background-color: hsla(241.20000000000002, 5%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-zinc:enabled:active {
-  background-color: #18181b;
+  background-color: hsla(241.20000000000002, 6%, 10%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-zinc {
-  background-color: #18181b;
+  background-color: hsla(241.20000000000002, 6%, 10%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #18181b;
-  box-shadow: inset 0 0 0 3px #18181b, 0 0px 0px 3px #fafafa;
+  border-color: hsla(241.20000000000002, 6%, 10%, 1);
+  box-shadow: inset 0 0 0 3px hsla(241.20000000000002, 6%, 10%, 1), 0 0px 0px 3px hsla(0, 0%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-bold-zinc:enabled:hover {
-  background-color: #fafafa;
+  background-color: hsla(0, 0%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-zinc:enabled:focus-visible {
-  background-color: #fafafa;
+  background-color: hsla(0, 0%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-zinc:enabled:active {
-  background-color: #d4d4d8;
+  background-color: hsla(241.20000000000002, 5%, 84%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-zinc {
-  background-color: rgba(250, 250, 250, 0.01);
-  color: #71717a;
+  background-color: hsla(0, 0%, 98%, 0.01);
+  color: hsla(241.20000000000002, 4%, 46%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-zinc:enabled:hover {
-  background-color: #71717a;
+  background-color: hsla(241.20000000000002, 4%, 46%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-zinc:enabled:focus-visible {
-  background-color: #71717a;
+  background-color: hsla(241.20000000000002, 4%, 46%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-zinc:enabled:active {
-  background-color: rgba(82, 82, 91, 0.85);
+  background-color: hsla(241.20000000000002, 5%, 34%, 0.85);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-zinc:disabled {
-  background-color: rgba(250, 250, 250, 0.5);
-  color: rgba(75, 75, 75, 0.5);
+  background-color: hsla(0, 0%, 98%, 0.5);
+  color: hsla(0, 0%, 38%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .btn-outline-zinc {
-  border-color: #71717a;
+  border-color: hsla(241.20000000000002, 4%, 46%, 1);
   border-width: 1px;
   border-style: solid;
 }
 
 .dark .btn-outline-zinc {
-  background-color: rgba(24, 24, 27, 0.01);
-  color: #a1a1aa;
+  background-color: hsla(241.20000000000002, 6%, 10%, 0.01);
+  color: hsla(241.20000000000002, 5%, 65%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-zinc:enabled:hover {
-  background-color: #71717a;
+  background-color: hsla(241.20000000000002, 4%, 46%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-zinc:enabled:focus-visible {
-  background-color: #71717a;
+  background-color: hsla(241.20000000000002, 4%, 46%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-zinc:enabled:active {
-  background-color: rgba(161, 161, 170, 0.85);
+  background-color: hsla(241.20000000000002, 4%, 46%, 0.8);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-zinc:disabled {
-  background-color: rgba(250, 250, 250, 0.5);
-  color: rgba(75, 75, 75, 0.5);
+  background-color: hsla(0, 0%, 98%, 0.5);
+  color: hsla(0, 0%, 38%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-outline-zinc {
-  border-color: #a1a1aa;
+  border-color: hsla(241.20000000000002, 5%, 65%, 1);
 }
 
 .contrast .btn-outline-zinc {
-  background-color: rgba(250, 250, 250, 0.01);
-  color: #3f3f46;
+  background-color: hsla(0, 0%, 98%, 0.01);
+  color: hsla(241.20000000000002, 5%, 26%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #3f3f46;
-  box-shadow: inset 0 0 0 3px #3f3f46, 0 0px 0px 3px #fafafa;
+  border-color: hsla(241.20000000000002, 5%, 26%, 1);
+  box-shadow: inset 0 0 0 3px hsla(241.20000000000002, 5%, 26%, 1), 0 0px 0px 3px hsla(0, 0%, 98%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-outline-zinc:enabled:hover {
-  background-color: #fafafa;
+  background-color: hsla(0, 0%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-zinc:enabled:focus-visible {
-  background-color: #fafafa;
+  background-color: hsla(0, 0%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-zinc:enabled:active {
-  background-color: #d4d4d8;
+  background-color: hsla(241.20000000000002, 5%, 84%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-zinc {
-  background-color: rgba(24, 24, 27, 0.01);
-  color: #f4f4f5;
+  background-color: hsla(241.20000000000002, 6%, 10%, 0.01);
+  color: hsla(241.20000000000002, 5%, 96%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #e4e4e7;
-  box-shadow: inset 0 0 0 3px #3f3f46, 0 0px 0px 3px #f4f4f5;
+  border-color: hsla(241.20000000000002, 6%, 90%, 1);
+  box-shadow: inset 0 0 0 3px hsla(241.20000000000002, 5%, 26%, 1), 0 0px 0px 3px hsla(241.20000000000002, 5%, 96%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-outline-zinc:enabled:hover {
-  background-color: #3f3f46;
+  background-color: hsla(241.20000000000002, 5%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-zinc:enabled:focus-visible {
-  background-color: #3f3f46;
+  background-color: hsla(241.20000000000002, 5%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-zinc:enabled:active {
-  background-color: rgba(24, 24, 27, 0.6);
+  background-color: hsla(241.20000000000002, 6%, 10%, 0.6);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-zinc {
-  background-color: rgba(250, 250, 250, 0.01);
-  color: #71717a;
+  background-color: hsla(0, 0%, 98%, 0.01);
+  color: hsla(241.20000000000002, 4%, 46%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-zinc:enabled:hover {
-  background-color: #f4f4f5;
-  color: #71717a;
+  background-color: hsla(241.20000000000002, 5%, 96%, 1);
+  color: hsla(241.20000000000002, 4%, 46%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-zinc:enabled:focus-visible {
-  background-color: #f4f4f5;
-  color: #71717a;
+  background-color: hsla(241.20000000000002, 5%, 96%, 1);
+  color: hsla(241.20000000000002, 4%, 46%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-zinc:enabled:active {
-  background-color: rgba(228, 228, 231, 0.85);
-  color: #52525b;
+  background-color: hsla(241.20000000000002, 6%, 90%, 0.85);
+  color: hsla(241.20000000000002, 5%, 34%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-zinc:disabled {
-  background-color: rgba(250, 250, 250, 0.5);
-  color: rgba(75, 75, 75, 0.5);
+  background-color: hsla(0, 0%, 98%, 0.5);
+  color: hsla(0, 0%, 38%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-clear-zinc {
-  background-color: rgba(24, 24, 27, 0.01);
-  color: #a1a1aa;
+  background-color: hsla(241.20000000000002, 6%, 10%, 0.01);
+  color: hsla(241.20000000000002, 5%, 65%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-zinc:enabled:hover {
-  background-color: rgba(82, 82, 91, 0.35);
-  color: #52525b;
+  background-color: hsla(241.20000000000002, 5%, 84%, 0.25);
+  color: hsla(241.20000000000002, 4%, 46%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-zinc:enabled:focus-visible {
-  background-color: rgba(82, 82, 91, 0.35);
-  color: #52525b;
+  background-color: hsla(241.20000000000002, 5%, 84%, 0.25);
+  color: hsla(241.20000000000002, 4%, 46%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-zinc:enabled:active {
-  background-color: rgba(63, 63, 70, 0.4);
-  color: #71717a;
+  background-color: hsla(241.20000000000002, 5%, 65%, 0.2);
+  color: hsla(241.20000000000002, 5%, 34%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-zinc:disabled {
-  background-color: rgba(63, 63, 70, 7);
-  color: rgba(3200, 3200, 3556, 7);
+  background-color: hsla(241.20000000000002, 5%, 26%, 0.07);
+  color: hsla(241.20000000000002, 5%, 26%, 0.07);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-clear-zinc {
-  background-color: rgba(250, 250, 250, 0.01);
-  color: #3f3f46;
+  background-color: hsla(0, 0%, 98%, 0.01);
+  color: hsla(241.20000000000002, 5%, 26%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #71717a;
-  box-shadow: inset 0 0 0 1px #71717a, 0 0px 0px 2px #18181b;
+  border-color: hsla(241.20000000000002, 4%, 46%, 1);
+  box-shadow: inset 0 0 0 1px hsla(241.20000000000002, 4%, 46%, 1), 0 0px 0px 2px hsla(241.20000000000002, 6%, 10%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-clear-zinc:enabled:hover {
-  background-color: #3f3f46;
+  background-color: hsla(241.20000000000002, 5%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-zinc:enabled:focus-visible {
-  background-color: #3f3f46;
+  background-color: hsla(241.20000000000002, 5%, 26%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-zinc:enabled:active {
-  background-color: #18181b;
+  background-color: hsla(241.20000000000002, 6%, 10%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-zinc {
-  background-color: #18181b;
+  background-color: hsla(241.20000000000002, 6%, 10%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #18181b;
-  box-shadow: inset 0 0 0 1px #18181b, 0 0px 0px 2px #fafafa;
+  border-color: hsla(241.20000000000002, 6%, 10%, 1);
+  box-shadow: inset 0 0 0 1px hsla(241.20000000000002, 6%, 10%, 1), 0 0px 0px 2px hsla(0, 0%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-clear-zinc:enabled:hover {
-  background-color: #fafafa;
+  background-color: hsla(0, 0%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-zinc:enabled:focus-visible {
-  background-color: #fafafa;
+  background-color: hsla(0, 0%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-zinc:enabled:active {
-  background-color: #d4d4d8;
+  background-color: hsla(241.20000000000002, 5%, 84%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-neutral {
-  background-color: rgba(245, 245, 245, 0.8);
-  color: rgba(75, 75, 75, 0.9);
+  background-color: hsla(0, 0%, 96%, 0.8);
+  color: hsla(0, 0%, 40%, 0.9);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-neutral:enabled:hover {
-  background-color: #d4d4d4;
-  color: #000;
+  background-color: hsla(0, 0%, 90%, 1);
+  color: hsla(0, 0%, 30%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-neutral:enabled:focus-visible {
-  background-color: #d4d4d4;
-  color: #000;
+  background-color: hsla(0, 0%, 90%, 1);
+  color: hsla(0, 0%, 30%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-neutral:enabled:active {
-  background-color: #e5e5e5;
-  color: rgba(69, 69, 69, 1);
+  background-color: hsla(0, 0%, 64%, 0.65);
+  color: hsla(0, 0%, 14.000000000000002%, 0.65);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-neutral:disabled {
-  background-color: #f5f5f5;
-  color: rgba(74, 74, 74, 1);
+  background-color: hsla(0, 0%, 96%, 1);
+  color: hsla(0, 0%, 96%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-light-neutral {
-  background-color: rgba(23, 23, 23, 0.4);
-  color: rgba(1930, 1930, 1930, 0.9);
+  background-color: hsla(0, 0%, 9%, 0.4);
+  color: hsla(0, 0%, 69%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-neutral:enabled:hover {
-  background-color: #262626;
-  color: rgba(1930, 1930, 1930, 1);
+  background-color: hsla(0, 0%, 15%, 1);
+  color: hsla(0, 0%, 75%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-neutral:enabled:focus-visible {
-  background-color: #262626;
-  color: rgba(1930, 1930, 1930, 1);
+  background-color: hsla(0, 0%, 15%, 1);
+  color: hsla(0, 0%, 75%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-neutral:enabled:active {
-  background-color: #404040;
-  color: rgba(3251, 3251, 3251, 1);
+  background-color: hsla(0, 0%, 9%, 1);
+  color: hsla(0, 0%, 69%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-neutral:disabled {
-  background-color: #171717;
-  color: rgba(1168, 1168, 1168, 1);
+  background-color: hsla(0, 0%, 9%, 1);
+  color: hsla(0, 0%, 69%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-light-neutral {
-  background-color: #fafafa;
+  background-color: hsla(0, 0%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #737373;
-  box-shadow: inset 0 0 0 1px #737373, 0 0px 0px 1px #171717;
+  border-color: hsla(0, 0%, 45%, 1);
+  box-shadow: inset 0 0 0 1px hsla(0, 0%, 45%, 1), 0 0px 0px 1px hsla(0, 0%, 9%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-light-neutral:enabled:hover {
-  background-color: #404040;
+  background-color: hsla(0, 0%, 25%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-neutral:enabled:focus-visible {
-  background-color: #404040;
+  background-color: hsla(0, 0%, 25%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-neutral:enabled:active {
-  background-color: #171717;
+  background-color: hsla(0, 0%, 9%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-neutral {
-  background-color: #171717;
+  background-color: hsla(0, 0%, 9%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #171717;
-  box-shadow: inset 0 0 0 1px #171717, 0 0px 0px 1px #fafafa;
+  border-color: hsla(0, 0%, 9%, 1);
+  box-shadow: inset 0 0 0 1px hsla(0, 0%, 9%, 1), 0 0px 0px 1px hsla(0, 0%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-light-neutral:enabled:hover {
-  background-color: #fafafa;
+  background-color: hsla(0, 0%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-neutral:enabled:focus-visible {
-  background-color: #fafafa;
+  background-color: hsla(0, 0%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-neutral:enabled:active {
-  background-color: #d4d4d4;
+  background-color: hsla(0, 0%, 83%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-neutral {
-  background-color: #a3a3a3;
-  color: rgba(49, 49, 49, 1);
+  background-color: hsla(0, 0%, 64%, 1);
+  color: hsla(0, 0%, 4%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-neutral:enabled:hover {
-  background-color: #737373;
+  background-color: hsla(0, 0%, 45%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-neutral:enabled:focus-visible {
-  background-color: #737373;
+  background-color: hsla(0, 0%, 45%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-neutral:enabled:active {
-  background-color: #525252;
-  color: rgba(5842, 5842, 5842, 1);
+  background-color: hsla(0, 0%, 32%, 1);
+  color: hsla(0, 0%, 100%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-neutral:disabled {
-  background-color: #e5e5e5;
-  color: rgba(69, 69, 69, 1);
+  background-color: hsla(0, 0%, 90%, 1);
+  color: hsla(0, 0%, 30%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-neutral {
-  background-color: #737373;
-  color: rgba(5842, 5842, 5842, 1);
+  background-color: hsla(0, 0%, 45%, 1);
+  color: hsla(0, 0%, 100%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-neutral:enabled:hover {
-  background-color: #525252;
+  background-color: hsla(0, 0%, 32%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-neutral:enabled:focus-visible {
-  background-color: #525252;
+  background-color: hsla(0, 0%, 32%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-neutral:enabled:active {
-  background-color: rgba(82, 82, 82, 0.75);
+  background-color: hsla(0, 0%, 32%, 0.7);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-neutral:disabled {
-  background-color: #404040;
-  color: rgba(3251, 3251, 3251, 1);
+  background-color: hsla(0, 0%, 25%, 1);
+  color: hsla(0, 0%, 85%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-neutral {
-  background-color: #fafafa;
+  background-color: hsla(0, 0%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #737373;
-  box-shadow: inset 0 0 0 1px #737373, 0 0px 0px 2px #171717;
+  border-color: hsla(0, 0%, 45%, 1);
+  box-shadow: inset 0 0 0 1px hsla(0, 0%, 45%, 1), 0 0px 0px 2px hsla(0, 0%, 9%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-neutral:enabled:hover {
-  background-color: #404040;
+  background-color: hsla(0, 0%, 25%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-neutral:enabled:focus-visible {
-  background-color: #404040;
+  background-color: hsla(0, 0%, 25%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-neutral:enabled:active {
-  background-color: #171717;
+  background-color: hsla(0, 0%, 9%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-neutral {
-  background-color: #171717;
+  background-color: hsla(0, 0%, 9%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #171717;
-  box-shadow: inset 0 0 0 1px #171717, 0 0px 0px 2px #fafafa;
+  border-color: hsla(0, 0%, 9%, 1);
+  box-shadow: inset 0 0 0 1px hsla(0, 0%, 9%, 1), 0 0px 0px 2px hsla(0, 0%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-neutral:enabled:hover {
-  background-color: #fafafa;
+  background-color: hsla(0, 0%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-neutral:enabled:focus-visible {
-  background-color: #fafafa;
+  background-color: hsla(0, 0%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-neutral:enabled:active {
-  background-color: #d4d4d4;
+  background-color: hsla(0, 0%, 83%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-neutral {
-  background-color: rgba(64, 64, 64, 0.9);
-  color: rgba(3251, 3251, 3251, 0.9);
+  background-color: hsla(0, 0%, 25%, 0.9);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-neutral:enabled:hover {
-  background-color: rgba(38, 38, 38, 0.8);
-  color: rgba(1168, 1168, 1168, 1);
+  background-color: hsla(0, 0%, 15%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-neutral:enabled:focus-visible {
-  background-color: rgba(38, 38, 38, 0.8);
-  color: rgba(1168, 1168, 1168, 1);
+  background-color: hsla(0, 0%, 15%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-neutral:enabled:active {
-  background-color: #262626;
-  color: rgba(1930, 1930, 1930, 1);
+  background-color: hsla(0, 0%, 15%, 1);
+  color: hsla(0, 0%, 75%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-neutral:disabled {
-  background-color: rgba(38, 38, 38, 0.6);
-  color: rgba(1930, 1930, 1930, 0.6);
+  background-color: hsla(0, 0%, 15%, 0.6);
+  color: hsla(0, 0%, 65%, 0.6);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-bold-neutral {
-  background-color: rgba(23, 23, 23, 0.9);
-  color: rgba(1168, 1168, 1168, 0.9);
+  background-color: hsla(0, 0%, 9%, 0.85);
+  color: hsla(0, 0%, 69%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-neutral:enabled:hover {
-  background-color: rgba(23, 23, 23, 0.65);
+  background-color: hsla(0, 0%, 9%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-neutral:enabled:focus-visible {
-  background-color: rgba(23, 23, 23, 0.65);
+  background-color: hsla(0, 0%, 9%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-neutral:enabled:active {
-  background-color: #262626;
-  color: rgba(1930, 1930, 1930, 1);
+  background-color: hsla(0, 0%, 9%, 0.45);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-neutral:disabled {
-  background-color: rgba(23, 23, 23, 0.4);
-  color: rgba(1168, 1168, 1168, 0.4);
+  background-color: hsla(0, 0%, 9%, 0.4);
+  color: hsla(0, 0%, 9%, 0.4);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-bold-neutral {
-  background-color: #fafafa;
+  background-color: hsla(0, 0%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #737373;
-  box-shadow: inset 0 0 0 3px #737373, 0 0px 0px 3px #171717;
+  border-color: hsla(0, 0%, 45%, 1);
+  box-shadow: inset 0 0 0 3px hsla(0, 0%, 45%, 1), 0 0px 0px 3px hsla(0, 0%, 9%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-bold-neutral:enabled:hover {
-  background-color: #404040;
+  background-color: hsla(0, 0%, 25%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-neutral:enabled:focus-visible {
-  background-color: #404040;
+  background-color: hsla(0, 0%, 25%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-neutral:enabled:active {
-  background-color: #171717;
+  background-color: hsla(0, 0%, 9%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-neutral {
-  background-color: #171717;
+  background-color: hsla(0, 0%, 9%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #171717;
-  box-shadow: inset 0 0 0 3px #171717, 0 0px 0px 3px #fafafa;
+  border-color: hsla(0, 0%, 9%, 1);
+  box-shadow: inset 0 0 0 3px hsla(0, 0%, 9%, 1), 0 0px 0px 3px hsla(0, 0%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-bold-neutral:enabled:hover {
-  background-color: #fafafa;
+  background-color: hsla(0, 0%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-neutral:enabled:focus-visible {
-  background-color: #fafafa;
+  background-color: hsla(0, 0%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-neutral:enabled:active {
-  background-color: #d4d4d4;
+  background-color: hsla(0, 0%, 83%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-neutral {
-  background-color: rgba(250, 250, 250, 0.01);
-  color: #737373;
+  background-color: hsla(0, 0%, 98%, 0.01);
+  color: hsla(0, 0%, 45%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-neutral:enabled:hover {
-  background-color: #737373;
+  background-color: hsla(0, 0%, 45%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-neutral:enabled:focus-visible {
-  background-color: #737373;
+  background-color: hsla(0, 0%, 45%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-neutral:enabled:active {
-  background-color: rgba(82, 82, 82, 0.85);
+  background-color: hsla(0, 0%, 32%, 0.85);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-neutral:disabled {
-  background-color: rgba(250, 250, 250, 0.5);
-  color: rgba(75, 75, 75, 0.5);
+  background-color: hsla(0, 0%, 98%, 0.5);
+  color: hsla(0, 0%, 38%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .btn-outline-neutral {
-  border-color: #737373;
+  border-color: hsla(0, 0%, 45%, 1);
   border-width: 1px;
   border-style: solid;
 }
 
 .dark .btn-outline-neutral {
-  background-color: rgba(23, 23, 23, 0.01);
-  color: #a3a3a3;
+  background-color: hsla(0, 0%, 9%, 0.01);
+  color: hsla(0, 0%, 64%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-neutral:enabled:hover {
-  background-color: #737373;
+  background-color: hsla(0, 0%, 45%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-neutral:enabled:focus-visible {
-  background-color: #737373;
+  background-color: hsla(0, 0%, 45%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-neutral:enabled:active {
-  background-color: rgba(163, 163, 163, 0.85);
+  background-color: hsla(0, 0%, 45%, 0.8);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-neutral:disabled {
-  background-color: rgba(250, 250, 250, 0.5);
-  color: rgba(75, 75, 75, 0.5);
+  background-color: hsla(0, 0%, 98%, 0.5);
+  color: hsla(0, 0%, 38%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-outline-neutral {
-  border-color: #a3a3a3;
+  border-color: hsla(0, 0%, 64%, 1);
 }
 
 .contrast .btn-outline-neutral {
-  background-color: rgba(250, 250, 250, 0.01);
-  color: #404040;
+  background-color: hsla(0, 0%, 98%, 0.01);
+  color: hsla(0, 0%, 25%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #404040;
-  box-shadow: inset 0 0 0 3px #404040, 0 0px 0px 3px #fafafa;
+  border-color: hsla(0, 0%, 25%, 1);
+  box-shadow: inset 0 0 0 3px hsla(0, 0%, 25%, 1), 0 0px 0px 3px hsla(0, 0%, 98%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-outline-neutral:enabled:hover {
-  background-color: #fafafa;
+  background-color: hsla(0, 0%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-neutral:enabled:focus-visible {
-  background-color: #fafafa;
+  background-color: hsla(0, 0%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-neutral:enabled:active {
-  background-color: #d4d4d4;
+  background-color: hsla(0, 0%, 83%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-neutral {
-  background-color: rgba(23, 23, 23, 0.01);
-  color: #f5f5f5;
+  background-color: hsla(0, 0%, 9%, 0.01);
+  color: hsla(0, 0%, 96%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #e5e5e5;
-  box-shadow: inset 0 0 0 3px #404040, 0 0px 0px 3px #f5f5f5;
+  border-color: hsla(0, 0%, 90%, 1);
+  box-shadow: inset 0 0 0 3px hsla(0, 0%, 25%, 1), 0 0px 0px 3px hsla(0, 0%, 96%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-outline-neutral:enabled:hover {
-  background-color: #404040;
+  background-color: hsla(0, 0%, 25%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-neutral:enabled:focus-visible {
-  background-color: #404040;
+  background-color: hsla(0, 0%, 25%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-neutral:enabled:active {
-  background-color: rgba(23, 23, 23, 0.6);
+  background-color: hsla(0, 0%, 9%, 0.6);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-neutral {
-  background-color: rgba(250, 250, 250, 0.01);
-  color: #737373;
+  background-color: hsla(0, 0%, 98%, 0.01);
+  color: hsla(0, 0%, 45%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-neutral:enabled:hover {
-  background-color: #f5f5f5;
-  color: #737373;
+  background-color: hsla(0, 0%, 96%, 1);
+  color: hsla(0, 0%, 45%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-neutral:enabled:focus-visible {
-  background-color: #f5f5f5;
-  color: #737373;
+  background-color: hsla(0, 0%, 96%, 1);
+  color: hsla(0, 0%, 45%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-neutral:enabled:active {
-  background-color: rgba(229, 229, 229, 0.85);
-  color: #525252;
+  background-color: hsla(0, 0%, 90%, 0.85);
+  color: hsla(0, 0%, 32%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-neutral:disabled {
-  background-color: rgba(250, 250, 250, 0.5);
-  color: rgba(75, 75, 75, 0.5);
+  background-color: hsla(0, 0%, 98%, 0.5);
+  color: hsla(0, 0%, 38%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-clear-neutral {
-  background-color: rgba(23, 23, 23, 0.01);
-  color: #a3a3a3;
+  background-color: hsla(0, 0%, 9%, 0.01);
+  color: hsla(0, 0%, 64%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-neutral:enabled:hover {
-  background-color: rgba(82, 82, 82, 0.35);
-  color: #525252;
+  background-color: hsla(0, 0%, 83%, 0.25);
+  color: hsla(0, 0%, 45%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-neutral:enabled:focus-visible {
-  background-color: rgba(82, 82, 82, 0.35);
-  color: #525252;
+  background-color: hsla(0, 0%, 83%, 0.25);
+  color: hsla(0, 0%, 45%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-neutral:enabled:active {
-  background-color: rgba(64, 64, 64, 0.4);
-  color: #737373;
+  background-color: hsla(0, 0%, 64%, 0.2);
+  color: hsla(0, 0%, 32%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-neutral:disabled {
-  background-color: rgba(64, 64, 64, 7);
-  color: rgba(3251, 3251, 3251, 7);
+  background-color: hsla(0, 0%, 25%, 0.07);
+  color: hsla(0, 0%, 25%, 0.07);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-clear-neutral {
-  background-color: rgba(250, 250, 250, 0.01);
-  color: #404040;
+  background-color: hsla(0, 0%, 98%, 0.01);
+  color: hsla(0, 0%, 25%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #737373;
-  box-shadow: inset 0 0 0 1px #737373, 0 0px 0px 2px #171717;
+  border-color: hsla(0, 0%, 45%, 1);
+  box-shadow: inset 0 0 0 1px hsla(0, 0%, 45%, 1), 0 0px 0px 2px hsla(0, 0%, 9%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-clear-neutral:enabled:hover {
-  background-color: #404040;
+  background-color: hsla(0, 0%, 25%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-neutral:enabled:focus-visible {
-  background-color: #404040;
+  background-color: hsla(0, 0%, 25%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-neutral:enabled:active {
-  background-color: #171717;
+  background-color: hsla(0, 0%, 9%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-neutral {
-  background-color: #171717;
+  background-color: hsla(0, 0%, 9%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #171717;
-  box-shadow: inset 0 0 0 1px #171717, 0 0px 0px 2px #fafafa;
+  border-color: hsla(0, 0%, 9%, 1);
+  box-shadow: inset 0 0 0 1px hsla(0, 0%, 9%, 1), 0 0px 0px 2px hsla(0, 0%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-clear-neutral:enabled:hover {
-  background-color: #fafafa;
+  background-color: hsla(0, 0%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-neutral:enabled:focus-visible {
-  background-color: #fafafa;
+  background-color: hsla(0, 0%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-neutral:enabled:active {
-  background-color: #d4d4d4;
+  background-color: hsla(0, 0%, 83%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-stone {
-  background-color: rgba(245, 245, 244, 0.8);
-  color: rgba(75, 75, 75, 0.9);
+  background-color: hsla(61.2, 5%, 96%, 0.8);
+  color: hsla(21.599999999999998, 5%, 40%, 0.9);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-stone:enabled:hover {
-  background-color: #d6d3d1;
-  color: #000;
+  background-color: hsla(21.599999999999998, 6%, 90%, 1);
+  color: hsla(21.599999999999998, 5%, 30%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-stone:enabled:focus-visible {
-  background-color: #d6d3d1;
-  color: #000;
+  background-color: hsla(21.599999999999998, 6%, 90%, 1);
+  color: hsla(21.599999999999998, 5%, 30%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-stone:enabled:active {
-  background-color: #e7e5e4;
-  color: rgba(69, 69, 68, 1);
+  background-color: hsla(25.200000000000003, 5%, 64%, 0.65);
+  color: hsla(25.200000000000003, 5%, 14.000000000000002%, 0.65);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-light-stone:disabled {
-  background-color: #f5f5f4;
-  color: rgba(74, 74, 73, 1);
+  background-color: hsla(61.2, 5%, 96%, 1);
+  color: hsla(61.2, 5%, 96%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-light-stone {
-  background-color: rgba(28, 25, 23, 0.4);
-  color: rgba(2083, 1880, 1829, 0.9);
+  background-color: hsla(25.200000000000003, 10%, 10%, 0.4);
+  color: hsla(25.200000000000003, 5%, 70%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-stone:enabled:hover {
-  background-color: #292524;
-  color: rgba(2083, 1880, 1829, 1);
+  background-color: hsla(10.799999999999999, 6%, 15%, 1);
+  color: hsla(10.799999999999999, 5%, 75%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-stone:enabled:focus-visible {
-  background-color: #292524;
-  color: rgba(2083, 1880, 1829, 1);
+  background-color: hsla(10.799999999999999, 6%, 15%, 1);
+  color: hsla(10.799999999999999, 5%, 75%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-stone:enabled:active {
-  background-color: #44403c;
-  color: rgba(3454, 3251, 3048, 1);
+  background-color: hsla(25.200000000000003, 10%, 10%, 1);
+  color: hsla(25.200000000000003, 5%, 70%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-light-stone:disabled {
-  background-color: #1c1917;
-  color: rgba(1422, 1270, 1168, 1);
+  background-color: hsla(25.200000000000003, 10%, 10%, 1);
+  color: hsla(25.200000000000003, 5%, 70%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-light-stone {
-  background-color: #fafaf9;
+  background-color: hsla(61.2, 9%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #78716c;
-  box-shadow: inset 0 0 0 1px #78716c, 0 0px 0px 1px #1c1917;
+  border-color: hsla(25.200000000000003, 5%, 45%, 1);
+  box-shadow: inset 0 0 0 1px hsla(25.200000000000003, 5%, 45%, 1), 0 0px 0px 1px hsla(25.200000000000003, 10%, 10%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-light-stone:enabled:hover {
-  background-color: #44403c;
+  background-color: hsla(28.8, 6%, 25%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-stone:enabled:focus-visible {
-  background-color: #44403c;
+  background-color: hsla(28.8, 6%, 25%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-light-stone:enabled:active {
-  background-color: #1c1917;
+  background-color: hsla(25.200000000000003, 10%, 10%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-stone {
-  background-color: #1c1917;
+  background-color: hsla(25.200000000000003, 10%, 10%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #1c1917;
-  box-shadow: inset 0 0 0 1px #1c1917, 0 0px 0px 1px #fafaf9;
+  border-color: hsla(25.200000000000003, 10%, 10%, 1);
+  box-shadow: inset 0 0 0 1px hsla(25.200000000000003, 10%, 10%, 1), 0 0px 0px 1px hsla(61.2, 9%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-light-stone:enabled:hover {
-  background-color: #fafaf9;
+  background-color: hsla(61.2, 9%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-stone:enabled:focus-visible {
-  background-color: #fafaf9;
+  background-color: hsla(61.2, 9%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-light-stone:enabled:active {
-  background-color: #d6d3d1;
+  background-color: hsla(25.200000000000003, 6%, 83%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-stone {
-  background-color: #a8a29e;
-  color: rgba(50, 49, 47, 1);
+  background-color: hsla(25.200000000000003, 5%, 64%, 1);
+  color: hsla(25.200000000000003, 5%, 4%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-stone:enabled:hover {
-  background-color: #78716c;
+  background-color: hsla(25.200000000000003, 5%, 45%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-stone:enabled:focus-visible {
-  background-color: #78716c;
+  background-color: hsla(25.200000000000003, 5%, 45%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-stone:enabled:active {
-  background-color: #57534e;
-  color: rgba(6096, 5740, 5486, 1);
+  background-color: hsla(32.4, 5%, 32%, 1);
+  color: hsla(25.200000000000003, 5%, 100%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-stone:disabled {
-  background-color: #e7e5e4;
-  color: rgba(69, 69, 68, 1);
+  background-color: hsla(21.599999999999998, 6%, 90%, 1);
+  color: hsla(21.599999999999998, 5%, 30%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-stone {
-  background-color: #78716c;
-  color: rgba(6096, 5740, 5486, 1);
+  background-color: hsla(25.200000000000003, 5%, 45%, 1);
+  color: hsla(25.200000000000003, 5%, 100%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-stone:enabled:hover {
-  background-color: #57534e;
+  background-color: hsla(32.4, 5%, 32%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-stone:enabled:focus-visible {
-  background-color: #57534e;
+  background-color: hsla(32.4, 5%, 32%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-stone:enabled:active {
-  background-color: rgba(87, 83, 78, 0.75);
+  background-color: hsla(32.4, 5%, 32%, 0.7);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-stone:disabled {
-  background-color: #44403c;
-  color: rgba(3454, 3251, 3048, 1);
+  background-color: hsla(28.8, 6%, 25%, 1);
+  color: hsla(28.8, 5%, 85%, 1);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-stone {
-  background-color: #fafaf9;
+  background-color: hsla(61.2, 9%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #78716c;
-  box-shadow: inset 0 0 0 1px #78716c, 0 0px 0px 2px #1c1917;
+  border-color: hsla(25.200000000000003, 5%, 45%, 1);
+  box-shadow: inset 0 0 0 1px hsla(25.200000000000003, 5%, 45%, 1), 0 0px 0px 2px hsla(25.200000000000003, 10%, 10%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-stone:enabled:hover {
-  background-color: #44403c;
+  background-color: hsla(28.8, 6%, 25%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-stone:enabled:focus-visible {
-  background-color: #44403c;
+  background-color: hsla(28.8, 6%, 25%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-stone:enabled:active {
-  background-color: #1c1917;
+  background-color: hsla(25.200000000000003, 10%, 10%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-stone {
-  background-color: #1c1917;
+  background-color: hsla(25.200000000000003, 10%, 10%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #1c1917;
-  box-shadow: inset 0 0 0 1px #1c1917, 0 0px 0px 2px #fafaf9;
+  border-color: hsla(25.200000000000003, 10%, 10%, 1);
+  box-shadow: inset 0 0 0 1px hsla(25.200000000000003, 10%, 10%, 1), 0 0px 0px 2px hsla(61.2, 9%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-stone:enabled:hover {
-  background-color: #fafaf9;
+  background-color: hsla(61.2, 9%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-stone:enabled:focus-visible {
-  background-color: #fafaf9;
+  background-color: hsla(61.2, 9%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-stone:enabled:active {
-  background-color: #d6d3d1;
+  background-color: hsla(25.200000000000003, 6%, 83%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-stone {
-  background-color: rgba(68, 64, 60, 0.9);
-  color: rgba(3454, 3251, 3048, 0.9);
+  background-color: hsla(28.8, 6%, 25%, 0.9);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-stone:enabled:hover {
-  background-color: rgba(41, 37, 36, 0.8);
-  color: rgba(1422, 1270, 1168, 1);
+  background-color: hsla(10.799999999999999, 6%, 15%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-stone:enabled:focus-visible {
-  background-color: rgba(41, 37, 36, 0.8);
-  color: rgba(1422, 1270, 1168, 1);
+  background-color: hsla(10.799999999999999, 6%, 15%, 0.8);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-stone:enabled:active {
-  background-color: #292524;
-  color: rgba(2083, 1880, 1829, 1);
+  background-color: hsla(10.799999999999999, 6%, 15%, 1);
+  color: hsla(10.799999999999999, 5%, 75%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-bold-stone:disabled {
-  background-color: rgba(41, 37, 36, 0.6);
-  color: rgba(2083, 1880, 1829, 0.6);
+  background-color: hsla(10.799999999999999, 6%, 15%, 0.6);
+  color: hsla(10.799999999999999, 5%, 65%, 0.6);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-bold-stone {
-  background-color: rgba(28, 25, 23, 0.9);
-  color: rgba(1422, 1270, 1168, 0.9);
+  background-color: hsla(25.200000000000003, 10%, 10%, 0.85);
+  color: hsla(25.200000000000003, 5%, 70%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-stone:enabled:hover {
-  background-color: rgba(28, 25, 23, 0.65);
+  background-color: hsla(25.200000000000003, 10%, 10%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-stone:enabled:focus-visible {
-  background-color: rgba(28, 25, 23, 0.65);
+  background-color: hsla(25.200000000000003, 10%, 10%, 0.65);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-stone:enabled:active {
-  background-color: #292524;
-  color: rgba(2083, 1880, 1829, 1);
+  background-color: hsla(25.200000000000003, 10%, 10%, 0.45);
+  color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-bold-stone:disabled {
-  background-color: rgba(28, 25, 23, 0.4);
-  color: rgba(1422, 1270, 1168, 0.4);
+  background-color: hsla(25.200000000000003, 10%, 10%, 0.4);
+  color: hsla(25.200000000000003, 10%, 10%, 0.4);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-bold-stone {
-  background-color: #fafaf9;
+  background-color: hsla(61.2, 9%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #78716c;
-  box-shadow: inset 0 0 0 3px #78716c, 0 0px 0px 3px #1c1917;
+  border-color: hsla(25.200000000000003, 5%, 45%, 1);
+  box-shadow: inset 0 0 0 3px hsla(25.200000000000003, 5%, 45%, 1), 0 0px 0px 3px hsla(25.200000000000003, 10%, 10%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-bold-stone:enabled:hover {
-  background-color: #44403c;
+  background-color: hsla(28.8, 6%, 25%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-stone:enabled:focus-visible {
-  background-color: #44403c;
+  background-color: hsla(28.8, 6%, 25%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-bold-stone:enabled:active {
-  background-color: #1c1917;
+  background-color: hsla(25.200000000000003, 10%, 10%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-stone {
-  background-color: #1c1917;
+  background-color: hsla(25.200000000000003, 10%, 10%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 3px;
-  border-color: #1c1917;
-  box-shadow: inset 0 0 0 3px #1c1917, 0 0px 0px 3px #fafaf9;
+  border-color: hsla(25.200000000000003, 10%, 10%, 1);
+  box-shadow: inset 0 0 0 3px hsla(25.200000000000003, 10%, 10%, 1), 0 0px 0px 3px hsla(61.2, 9%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-bold-stone:enabled:hover {
-  background-color: #fafaf9;
+  background-color: hsla(61.2, 9%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-stone:enabled:focus-visible {
-  background-color: #fafaf9;
+  background-color: hsla(61.2, 9%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-bold-stone:enabled:active {
-  background-color: #d6d3d1;
+  background-color: hsla(25.200000000000003, 6%, 83%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-stone {
-  background-color: rgba(250, 250, 249, 0.01);
-  color: #78716c;
+  background-color: hsla(61.2, 9%, 98%, 0.01);
+  color: hsla(25.200000000000003, 5%, 45%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-stone:enabled:hover {
-  background-color: #78716c;
+  background-color: hsla(25.200000000000003, 5%, 45%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-stone:enabled:focus-visible {
-  background-color: #78716c;
+  background-color: hsla(25.200000000000003, 5%, 45%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-stone:enabled:active {
-  background-color: rgba(87, 83, 78, 0.85);
+  background-color: hsla(32.4, 5%, 32%, 0.85);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-outline-stone:disabled {
-  background-color: rgba(250, 250, 249, 0.5);
-  color: rgba(75, 75, 75, 0.5);
+  background-color: hsla(61.2, 9%, 98%, 0.5);
+  color: hsla(61.2, 5%, 38%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .btn-outline-stone {
-  border-color: #78716c;
+  border-color: hsla(25.200000000000003, 5%, 45%, 1);
   border-width: 1px;
   border-style: solid;
 }
 
 .dark .btn-outline-stone {
-  background-color: rgba(28, 25, 23, 0.01);
-  color: #a8a29e;
+  background-color: hsla(25.200000000000003, 10%, 10%, 0.01);
+  color: hsla(25.200000000000003, 5%, 64%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-stone:enabled:hover {
-  background-color: #78716c;
+  background-color: hsla(25.200000000000003, 5%, 45%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-stone:enabled:focus-visible {
-  background-color: #78716c;
+  background-color: hsla(25.200000000000003, 5%, 45%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-stone:enabled:active {
-  background-color: rgba(168, 162, 158, 0.85);
+  background-color: hsla(25.200000000000003, 5%, 45%, 0.8);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-outline-stone:disabled {
-  background-color: rgba(250, 250, 249, 0.5);
-  color: rgba(75, 75, 75, 0.5);
+  background-color: hsla(61.2, 9%, 98%, 0.5);
+  color: hsla(61.2, 5%, 38%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-outline-stone {
-  border-color: #a8a29e;
+  border-color: hsla(25.200000000000003, 5%, 64%, 1);
 }
 
 .contrast .btn-outline-stone {
-  background-color: rgba(250, 250, 249, 0.01);
-  color: #44403c;
+  background-color: hsla(61.2, 9%, 98%, 0.01);
+  color: hsla(28.8, 6%, 25%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #44403c;
-  box-shadow: inset 0 0 0 3px #44403c, 0 0px 0px 3px #fafaf9;
+  border-color: hsla(28.8, 6%, 25%, 1);
+  box-shadow: inset 0 0 0 3px hsla(28.8, 6%, 25%, 1), 0 0px 0px 3px hsla(61.2, 9%, 98%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-outline-stone:enabled:hover {
-  background-color: #fafaf9;
+  background-color: hsla(61.2, 9%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-stone:enabled:focus-visible {
-  background-color: #fafaf9;
+  background-color: hsla(61.2, 9%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-outline-stone:enabled:active {
-  background-color: #d6d3d1;
+  background-color: hsla(25.200000000000003, 6%, 83%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-stone {
-  background-color: rgba(28, 25, 23, 0.01);
-  color: #f5f5f4;
+  background-color: hsla(25.200000000000003, 10%, 10%, 0.01);
+  color: hsla(61.2, 5%, 96%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #e7e5e4;
-  box-shadow: inset 0 0 0 3px #44403c, 0 0px 0px 3px #f5f5f4;
+  border-color: hsla(21.599999999999998, 6%, 90%, 1);
+  box-shadow: inset 0 0 0 3px hsla(28.8, 6%, 25%, 1), 0 0px 0px 3px hsla(61.2, 5%, 96%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-outline-stone:enabled:hover {
-  background-color: #44403c;
+  background-color: hsla(28.8, 6%, 25%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-stone:enabled:focus-visible {
-  background-color: #44403c;
+  background-color: hsla(28.8, 6%, 25%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-outline-stone:enabled:active {
-  background-color: rgba(28, 25, 23, 0.6);
+  background-color: hsla(25.200000000000003, 10%, 10%, 0.6);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-stone {
-  background-color: rgba(250, 250, 249, 0.01);
-  color: #78716c;
+  background-color: hsla(61.2, 9%, 98%, 0.01);
+  color: hsla(25.200000000000003, 5%, 45%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-stone:enabled:hover {
-  background-color: #f5f5f4;
-  color: #78716c;
+  background-color: hsla(61.2, 5%, 96%, 1);
+  color: hsla(25.200000000000003, 5%, 45%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-stone:enabled:focus-visible {
-  background-color: #f5f5f4;
-  color: #78716c;
+  background-color: hsla(61.2, 5%, 96%, 1);
+  color: hsla(25.200000000000003, 5%, 45%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-stone:enabled:active {
-  background-color: rgba(231, 229, 228, 0.85);
-  color: #57534e;
+  background-color: hsla(21.599999999999998, 6%, 90%, 0.85);
+  color: hsla(32.4, 5%, 32%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .btn-clear-stone:disabled {
-  background-color: rgba(250, 250, 249, 0.5);
-  color: rgba(75, 75, 75, 0.5);
+  background-color: hsla(61.2, 9%, 98%, 0.5);
+  color: hsla(61.2, 5%, 38%, 0.5);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .dark .btn-clear-stone {
-  background-color: rgba(28, 25, 23, 0.01);
-  color: #a8a29e;
+  background-color: hsla(25.200000000000003, 10%, 10%, 0.01);
+  color: hsla(25.200000000000003, 5%, 64%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-stone:enabled:hover {
-  background-color: rgba(87, 83, 78, 0.35);
-  color: #57534e;
+  background-color: hsla(25.200000000000003, 6%, 83%, 0.25);
+  color: hsla(25.200000000000003, 5%, 45%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-stone:enabled:focus-visible {
-  background-color: rgba(87, 83, 78, 0.35);
-  color: #57534e;
+  background-color: hsla(25.200000000000003, 6%, 83%, 0.25);
+  color: hsla(25.200000000000003, 5%, 45%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-stone:enabled:active {
-  background-color: rgba(68, 64, 60, 0.4);
-  color: #78716c;
+  background-color: hsla(25.200000000000003, 5%, 64%, 0.2);
+  color: hsla(32.4, 5%, 32%, 1);
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .btn-clear-stone:disabled {
-  background-color: rgba(68, 64, 60, 7);
-  color: rgba(3454, 3251, 3048, 7);
+  background-color: hsla(28.8, 6%, 25%, 0.07);
+  color: hsla(28.8, 6%, 25%, 0.07);
+  transition: all 0.15s ease-in-out;
   cursor: not-allowed;
 }
 
 .contrast .btn-clear-stone {
-  background-color: rgba(250, 250, 249, 0.01);
-  color: #44403c;
+  background-color: hsla(61.2, 9%, 98%, 0.01);
+  color: hsla(28.8, 6%, 25%, 1);
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #78716c;
-  box-shadow: inset 0 0 0 1px #78716c, 0 0px 0px 2px #1c1917;
+  border-color: hsla(25.200000000000003, 5%, 45%, 1);
+  box-shadow: inset 0 0 0 1px hsla(25.200000000000003, 5%, 45%, 1), 0 0px 0px 2px hsla(25.200000000000003, 10%, 10%, 1);
   font-weight: bold;
 }
 
 .contrast .btn-clear-stone:enabled:hover {
-  background-color: #44403c;
+  background-color: hsla(28.8, 6%, 25%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-stone:enabled:focus-visible {
-  background-color: #44403c;
+  background-color: hsla(28.8, 6%, 25%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .contrast .btn-clear-stone:enabled:active {
-  background-color: #1c1917;
+  background-color: hsla(25.200000000000003, 10%, 10%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-stone {
-  background-color: #1c1917;
+  background-color: hsla(25.200000000000003, 10%, 10%, 1);
   color: #FFF;
+  transition: all 0.15s ease-in-out;
   border-width: 1px;
-  border-color: #1c1917;
-  box-shadow: inset 0 0 0 1px #1c1917, 0 0px 0px 2px #fafaf9;
+  border-color: hsla(25.200000000000003, 10%, 10%, 1);
+  box-shadow: inset 0 0 0 1px hsla(25.200000000000003, 10%, 10%, 1), 0 0px 0px 2px hsla(61.2, 9%, 98%, 1);
   font-weight: bold;
 }
 
 .dark .contrast .btn-clear-stone:enabled:hover {
-  background-color: #fafaf9;
+  background-color: hsla(61.2, 9%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-stone:enabled:focus-visible {
-  background-color: #fafaf9;
+  background-color: hsla(61.2, 9%, 98%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .dark .contrast .btn-clear-stone:enabled:active {
-  background-color: #d6d3d1;
+  background-color: hsla(25.200000000000003, 6%, 83%, 1);
   color: #000;
+  transition: all 0.15s ease-in-out;
 }
 
 .bg-grid-white\/40 {
@@ -18166,10 +20146,6 @@ a.skip-main:active {
   background-color: rgb(var(--tw-color-primary-300) / var(--tw-bg-opacity));
 }
 
-.hover\:bg-primary-200\/50:hover {
-  background-color: rgb(var(--tw-color-primary-200) / 0.5);
-}
-
 .hover\:bg-primary-800:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--tw-color-primary-800) / var(--tw-bg-opacity));
@@ -18303,6 +20279,10 @@ a.skip-main:active {
   background-color: rgb(0 0 0 / 0.6);
 }
 
+.hover\:bg-primary-200\/50:hover {
+  background-color: rgb(var(--tw-color-primary-200) / 0.5);
+}
+
 .hover\:text-primary-600:hover {
   --tw-text-opacity: 1;
   color: rgb(var(--tw-color-primary-600) / var(--tw-text-opacity));
@@ -18502,10 +20482,6 @@ a.skip-main:active {
   background-color: rgb(var(--tw-color-primary-700) / var(--tw-bg-opacity));
 }
 
-.focus\:bg-primary-200\/50:focus {
-  background-color: rgb(var(--tw-color-primary-200) / 0.5);
-}
-
 .focus\:bg-primary-800:focus {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--tw-color-primary-800) / var(--tw-bg-opacity));
@@ -18611,6 +20587,10 @@ a.skip-main:active {
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
 }
 
+.focus\:bg-primary-200\/50:focus {
+  background-color: rgb(var(--tw-color-primary-200) / 0.5);
+}
+
 .focus\:text-primary-600:focus {
   --tw-text-opacity: 1;
   color: rgb(var(--tw-color-primary-600) / var(--tw-text-opacity));
@@ -18986,116 +20966,6 @@ a.skip-main:active {
   --tw-gradient-to: #78716c;
 }
 
-.focus-visible\:text-red-600:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(220 38 38 / var(--tw-text-opacity));
-}
-
-.focus-visible\:text-orange-600:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(234 88 12 / var(--tw-text-opacity));
-}
-
-.focus-visible\:text-amber-600:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(217 119 6 / var(--tw-text-opacity));
-}
-
-.focus-visible\:text-yellow-600:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(202 138 4 / var(--tw-text-opacity));
-}
-
-.focus-visible\:text-lime-600:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(101 163 13 / var(--tw-text-opacity));
-}
-
-.focus-visible\:text-green-600:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(22 163 74 / var(--tw-text-opacity));
-}
-
-.focus-visible\:text-emerald-600:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(5 150 105 / var(--tw-text-opacity));
-}
-
-.focus-visible\:text-teal-600:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(13 148 136 / var(--tw-text-opacity));
-}
-
-.focus-visible\:text-cyan-600:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(8 145 178 / var(--tw-text-opacity));
-}
-
-.focus-visible\:text-sky-600:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(2 132 199 / var(--tw-text-opacity));
-}
-
-.focus-visible\:text-blue-600:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(37 99 235 / var(--tw-text-opacity));
-}
-
-.focus-visible\:text-indigo-600:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(79 70 229 / var(--tw-text-opacity));
-}
-
-.focus-visible\:text-violet-600:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(124 58 237 / var(--tw-text-opacity));
-}
-
-.focus-visible\:text-purple-600:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(147 51 234 / var(--tw-text-opacity));
-}
-
-.focus-visible\:text-fuchsia-600:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(192 38 211 / var(--tw-text-opacity));
-}
-
-.focus-visible\:text-pink-600:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(219 39 119 / var(--tw-text-opacity));
-}
-
-.focus-visible\:text-rose-600:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(225 29 72 / var(--tw-text-opacity));
-}
-
-.focus-visible\:text-gray-600:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
-}
-
-.focus-visible\:text-slate-600:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(71 85 105 / var(--tw-text-opacity));
-}
-
-.focus-visible\:text-zinc-600:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(82 82 91 / var(--tw-text-opacity));
-}
-
-.focus-visible\:text-neutral-600:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(82 82 82 / var(--tw-text-opacity));
-}
-
-.focus-visible\:text-stone-600:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(87 83 78 / var(--tw-text-opacity));
-}
-
 .focus-visible\:outline-none:focus-visible {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -19633,6 +21503,116 @@ a.skip-main:active {
   background-color: rgb(0 0 0 / 0.7);
 }
 
+.active\:text-red-700:active {
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity));
+}
+
+.active\:text-orange-700:active {
+  --tw-text-opacity: 1;
+  color: rgb(194 65 12 / var(--tw-text-opacity));
+}
+
+.active\:text-amber-700:active {
+  --tw-text-opacity: 1;
+  color: rgb(180 83 9 / var(--tw-text-opacity));
+}
+
+.active\:text-yellow-700:active {
+  --tw-text-opacity: 1;
+  color: rgb(161 98 7 / var(--tw-text-opacity));
+}
+
+.active\:text-lime-700:active {
+  --tw-text-opacity: 1;
+  color: rgb(77 124 15 / var(--tw-text-opacity));
+}
+
+.active\:text-green-700:active {
+  --tw-text-opacity: 1;
+  color: rgb(21 128 61 / var(--tw-text-opacity));
+}
+
+.active\:text-emerald-700:active {
+  --tw-text-opacity: 1;
+  color: rgb(4 120 87 / var(--tw-text-opacity));
+}
+
+.active\:text-teal-700:active {
+  --tw-text-opacity: 1;
+  color: rgb(15 118 110 / var(--tw-text-opacity));
+}
+
+.active\:text-cyan-700:active {
+  --tw-text-opacity: 1;
+  color: rgb(14 116 144 / var(--tw-text-opacity));
+}
+
+.active\:text-sky-700:active {
+  --tw-text-opacity: 1;
+  color: rgb(3 105 161 / var(--tw-text-opacity));
+}
+
+.active\:text-blue-700:active {
+  --tw-text-opacity: 1;
+  color: rgb(29 78 216 / var(--tw-text-opacity));
+}
+
+.active\:text-indigo-700:active {
+  --tw-text-opacity: 1;
+  color: rgb(67 56 202 / var(--tw-text-opacity));
+}
+
+.active\:text-violet-700:active {
+  --tw-text-opacity: 1;
+  color: rgb(109 40 217 / var(--tw-text-opacity));
+}
+
+.active\:text-purple-700:active {
+  --tw-text-opacity: 1;
+  color: rgb(126 34 206 / var(--tw-text-opacity));
+}
+
+.active\:text-fuchsia-700:active {
+  --tw-text-opacity: 1;
+  color: rgb(162 28 175 / var(--tw-text-opacity));
+}
+
+.active\:text-pink-700:active {
+  --tw-text-opacity: 1;
+  color: rgb(190 24 93 / var(--tw-text-opacity));
+}
+
+.active\:text-rose-700:active {
+  --tw-text-opacity: 1;
+  color: rgb(190 18 60 / var(--tw-text-opacity));
+}
+
+.active\:text-gray-700:active {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+.active\:text-slate-700:active {
+  --tw-text-opacity: 1;
+  color: rgb(51 65 85 / var(--tw-text-opacity));
+}
+
+.active\:text-zinc-700:active {
+  --tw-text-opacity: 1;
+  color: rgb(63 63 70 / var(--tw-text-opacity));
+}
+
+.active\:text-neutral-700:active {
+  --tw-text-opacity: 1;
+  color: rgb(64 64 64 / var(--tw-text-opacity));
+}
+
+.active\:text-stone-700:active {
+  --tw-text-opacity: 1;
+  color: rgb(68 64 60 / var(--tw-text-opacity));
+}
+
 .active\:opacity-80:active {
   opacity: 0.8;
 }
@@ -20024,8 +22004,8 @@ a.skip-main:active {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.disabled\:saturate-50:disabled {
-  --tw-saturate: saturate(.5);
+.disabled\:saturate-\[0\.5\]:disabled {
+  --tw-saturate: saturate(0.5);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
@@ -20162,6 +22142,10 @@ a.skip-main:active {
   background-color: rgb(231 229 228 / 0.5);
 }
 
+.hocus\:text-inherit:hover {
+  color: inherit;
+}
+
 .hocus\:text-primary-900:hover {
   --tw-text-opacity: 1;
   color: rgb(var(--tw-color-primary-900) / var(--tw-text-opacity));
@@ -20351,6 +22335,10 @@ a.skip-main:active {
   background-color: rgb(231 229 228 / 0.5);
 }
 
+.hocus\:text-inherit:focus-visible {
+  color: inherit;
+}
+
 .hocus\:text-primary-900:focus-visible {
   --tw-text-opacity: 1;
   color: rgb(var(--tw-color-primary-900) / var(--tw-text-opacity));
@@ -22472,6 +24460,11 @@ a.skip-main:active {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.dark .dark\:text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
 .dark .dark\:text-primary-300\/80 {
   color: rgb(var(--tw-color-primary-300) / 0.8);
 }
@@ -23221,120 +25214,50 @@ a.skip-main:active {
   color: rgb(254 242 242 / var(--tw-text-opacity));
 }
 
-.dark .dark\:hover\:text-red-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(248 113 113 / var(--tw-text-opacity));
+.dark .dark\:hover\:shadow-ring-dark:hover {
+  --tw-shadow: 0 0 0 8px #403b3a, 0px 4px 45px -1px rgba(0, 0, 0, 0.05);
+  --tw-shadow-colored: 0 0 0 8px var(--tw-shadow-color), 0px 4px 45px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.dark .dark\:hover\:text-amber-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(251 191 36 / var(--tw-text-opacity));
+.dark .dark\:hover\:shadow-ring-dark-sm:hover {
+  --tw-shadow: 0 0 0 4px #403b3a, 0px 4px 45px -1px rgba(0, 0, 0, 0.05);
+  --tw-shadow-colored: 0 0 0 4px var(--tw-shadow-color), 0px 4px 45px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.dark .dark\:hover\:text-emerald-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(52 211 153 / var(--tw-text-opacity));
+.dark .dark\:hover\:shadow-lg:hover {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.dark .dark\:hover\:text-cyan-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(34 211 238 / var(--tw-text-opacity));
+.dark .dark\:focus\:bg-primary-300\/10:focus {
+  background-color: rgb(var(--tw-color-primary-300) / 0.1);
 }
 
-.dark .dark\:hover\:text-blue-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity));
+.dark .dark\:focus\:bg-primary-600:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--tw-color-primary-600) / var(--tw-bg-opacity));
 }
 
-.dark .dark\:hover\:text-indigo-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(129 140 248 / var(--tw-text-opacity));
+.dark .dark\:focus\:bg-primary-500:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--tw-color-primary-500) / var(--tw-bg-opacity));
 }
 
-.dark .dark\:hover\:text-violet-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(167 139 250 / var(--tw-text-opacity));
+.dark .dark\:focus\:bg-primary-900\/50:focus {
+  background-color: rgb(var(--tw-color-primary-900) / 0.5);
 }
 
-.dark .dark\:hover\:text-purple-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(192 132 252 / var(--tw-text-opacity));
+.dark .dark\:focus\:bg-orange-500:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 115 22 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:hover\:text-pink-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(244 114 182 / var(--tw-text-opacity));
-}
-
-.dark .dark\:hover\:text-gray-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity));
-}
-
-.dark .dark\:hover\:text-slate-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(148 163 184 / var(--tw-text-opacity));
-}
-
-.dark .dark\:hover\:text-zinc-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(161 161 170 / var(--tw-text-opacity));
-}
-
-.dark .dark\:hover\:text-neutral-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(163 163 163 / var(--tw-text-opacity));
-}
-
-.dark .dark\:hover\:text-stone-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(168 162 158 / var(--tw-text-opacity));
-}
-
-.dark .dark\:hover\:shadow-ring-dark:hover {
-  --tw-shadow: 0 0 0 8px #403b3a, 0px 4px 45px -1px rgba(0, 0, 0, 0.05);
-  --tw-shadow-colored: 0 0 0 8px var(--tw-shadow-color), 0px 4px 45px -1px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.dark .dark\:hover\:shadow-ring-dark-sm:hover {
-  --tw-shadow: 0 0 0 4px #403b3a, 0px 4px 45px -1px rgba(0, 0, 0, 0.05);
-  --tw-shadow-colored: 0 0 0 4px var(--tw-shadow-color), 0px 4px 45px -1px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.dark .dark\:hover\:shadow-lg:hover {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.dark .dark\:focus\:bg-primary-300\/10:focus {
-  background-color: rgb(var(--tw-color-primary-300) / 0.1);
-}
-
-.dark .dark\:focus\:bg-primary-600:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--tw-color-primary-600) / var(--tw-bg-opacity));
-}
-
-.dark .dark\:focus\:bg-primary-500:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--tw-color-primary-500) / var(--tw-bg-opacity));
-}
-
-.dark .dark\:focus\:bg-primary-900\/50:focus {
-  background-color: rgb(var(--tw-color-primary-900) / 0.5);
-}
-
-.dark .dark\:focus\:bg-orange-500:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 115 22 / var(--tw-bg-opacity));
-}
-
-.dark .dark\:focus\:bg-yellow-400:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgb(250 204 21 / var(--tw-bg-opacity));
+.dark .dark\:focus\:bg-yellow-400:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 204 21 / var(--tw-bg-opacity));
 }
 
 .dark .dark\:focus\:bg-lime-400:focus {
@@ -23720,116 +25643,6 @@ a.skip-main:active {
   --tw-gradient-to: #292524;
 }
 
-.dark .dark\:focus-visible\:text-red-400:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(248 113 113 / var(--tw-text-opacity));
-}
-
-.dark .dark\:focus-visible\:text-orange-400:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(251 146 60 / var(--tw-text-opacity));
-}
-
-.dark .dark\:focus-visible\:text-amber-400:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(251 191 36 / var(--tw-text-opacity));
-}
-
-.dark .dark\:focus-visible\:text-yellow-400:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(250 204 21 / var(--tw-text-opacity));
-}
-
-.dark .dark\:focus-visible\:text-lime-400:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(163 230 53 / var(--tw-text-opacity));
-}
-
-.dark .dark\:focus-visible\:text-green-400:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(74 222 128 / var(--tw-text-opacity));
-}
-
-.dark .dark\:focus-visible\:text-emerald-400:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(52 211 153 / var(--tw-text-opacity));
-}
-
-.dark .dark\:focus-visible\:text-teal-400:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(45 212 191 / var(--tw-text-opacity));
-}
-
-.dark .dark\:focus-visible\:text-cyan-400:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(34 211 238 / var(--tw-text-opacity));
-}
-
-.dark .dark\:focus-visible\:text-sky-400:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(56 189 248 / var(--tw-text-opacity));
-}
-
-.dark .dark\:focus-visible\:text-blue-400:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity));
-}
-
-.dark .dark\:focus-visible\:text-indigo-400:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(129 140 248 / var(--tw-text-opacity));
-}
-
-.dark .dark\:focus-visible\:text-violet-400:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(167 139 250 / var(--tw-text-opacity));
-}
-
-.dark .dark\:focus-visible\:text-purple-400:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(192 132 252 / var(--tw-text-opacity));
-}
-
-.dark .dark\:focus-visible\:text-fuchsia-400:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(232 121 249 / var(--tw-text-opacity));
-}
-
-.dark .dark\:focus-visible\:text-pink-400:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(244 114 182 / var(--tw-text-opacity));
-}
-
-.dark .dark\:focus-visible\:text-rose-400:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(251 113 133 / var(--tw-text-opacity));
-}
-
-.dark .dark\:focus-visible\:text-gray-400:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity));
-}
-
-.dark .dark\:focus-visible\:text-slate-400:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(148 163 184 / var(--tw-text-opacity));
-}
-
-.dark .dark\:focus-visible\:text-zinc-400:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(161 161 170 / var(--tw-text-opacity));
-}
-
-.dark .dark\:focus-visible\:text-neutral-400:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(163 163 163 / var(--tw-text-opacity));
-}
-
-.dark .dark\:focus-visible\:text-stone-400:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(168 162 158 / var(--tw-text-opacity));
-}
-
 .dark .dark\:focus-visible\:ring-stone-500:focus-visible {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(120 113 108 / var(--tw-ring-opacity));
@@ -24172,6 +25985,116 @@ a.skip-main:active {
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
 }
 
+.dark .dark\:active\:text-red-100:active {
+  --tw-text-opacity: 1;
+  color: rgb(254 226 226 / var(--tw-text-opacity));
+}
+
+.dark .dark\:active\:text-orange-100:active {
+  --tw-text-opacity: 1;
+  color: rgb(255 237 213 / var(--tw-text-opacity));
+}
+
+.dark .dark\:active\:text-amber-100:active {
+  --tw-text-opacity: 1;
+  color: rgb(254 243 199 / var(--tw-text-opacity));
+}
+
+.dark .dark\:active\:text-yellow-100:active {
+  --tw-text-opacity: 1;
+  color: rgb(254 249 195 / var(--tw-text-opacity));
+}
+
+.dark .dark\:active\:text-lime-100:active {
+  --tw-text-opacity: 1;
+  color: rgb(236 252 203 / var(--tw-text-opacity));
+}
+
+.dark .dark\:active\:text-green-100:active {
+  --tw-text-opacity: 1;
+  color: rgb(220 252 231 / var(--tw-text-opacity));
+}
+
+.dark .dark\:active\:text-emerald-100:active {
+  --tw-text-opacity: 1;
+  color: rgb(209 250 229 / var(--tw-text-opacity));
+}
+
+.dark .dark\:active\:text-teal-100:active {
+  --tw-text-opacity: 1;
+  color: rgb(204 251 241 / var(--tw-text-opacity));
+}
+
+.dark .dark\:active\:text-cyan-100:active {
+  --tw-text-opacity: 1;
+  color: rgb(207 250 254 / var(--tw-text-opacity));
+}
+
+.dark .dark\:active\:text-sky-100:active {
+  --tw-text-opacity: 1;
+  color: rgb(224 242 254 / var(--tw-text-opacity));
+}
+
+.dark .dark\:active\:text-blue-100:active {
+  --tw-text-opacity: 1;
+  color: rgb(219 234 254 / var(--tw-text-opacity));
+}
+
+.dark .dark\:active\:text-indigo-100:active {
+  --tw-text-opacity: 1;
+  color: rgb(224 231 255 / var(--tw-text-opacity));
+}
+
+.dark .dark\:active\:text-violet-100:active {
+  --tw-text-opacity: 1;
+  color: rgb(237 233 254 / var(--tw-text-opacity));
+}
+
+.dark .dark\:active\:text-purple-100:active {
+  --tw-text-opacity: 1;
+  color: rgb(243 232 255 / var(--tw-text-opacity));
+}
+
+.dark .dark\:active\:text-fuchsia-100:active {
+  --tw-text-opacity: 1;
+  color: rgb(250 232 255 / var(--tw-text-opacity));
+}
+
+.dark .dark\:active\:text-pink-100:active {
+  --tw-text-opacity: 1;
+  color: rgb(252 231 243 / var(--tw-text-opacity));
+}
+
+.dark .dark\:active\:text-rose-100:active {
+  --tw-text-opacity: 1;
+  color: rgb(255 228 230 / var(--tw-text-opacity));
+}
+
+.dark .dark\:active\:text-gray-100:active {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
+
+.dark .dark\:active\:text-slate-100:active {
+  --tw-text-opacity: 1;
+  color: rgb(241 245 249 / var(--tw-text-opacity));
+}
+
+.dark .dark\:active\:text-zinc-100:active {
+  --tw-text-opacity: 1;
+  color: rgb(244 244 245 / var(--tw-text-opacity));
+}
+
+.dark .dark\:active\:text-neutral-100:active {
+  --tw-text-opacity: 1;
+  color: rgb(245 245 245 / var(--tw-text-opacity));
+}
+
+.dark .dark\:active\:text-stone-100:active {
+  --tw-text-opacity: 1;
+  color: rgb(245 245 244 / var(--tw-text-opacity));
+}
+
 .dark .dark\:enabled\:hover\:from-red-600:hover:enabled {
   --tw-gradient-from: #dc2626;
   --tw-gradient-to: rgb(220 38 38 / 0);
@@ -24433,6 +26356,116 @@ a.skip-main:active {
   color: rgb(var(--tw-color-primary-100) / var(--tw-text-opacity));
 }
 
+.dark .dark\:hocus\:text-red-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(254 202 202 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-orange-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(254 215 170 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-amber-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(253 230 138 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-yellow-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(254 240 138 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-lime-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(217 249 157 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-green-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(187 247 208 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-emerald-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(167 243 208 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-teal-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(153 246 228 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-cyan-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(165 243 252 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-sky-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(186 230 253 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-blue-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(191 219 254 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-indigo-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(199 210 254 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-violet-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(221 214 254 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-purple-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(233 213 255 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-fuchsia-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(245 208 254 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-pink-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(251 207 232 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-rose-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(254 205 211 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-gray-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-slate-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(226 232 240 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-zinc-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(228 228 231 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-neutral-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(229 229 229 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-stone-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(231 229 228 / var(--tw-text-opacity));
+}
+
 .dark .dark\:hocus\:bg-primary-700\/80:focus-visible {
   background-color: rgb(var(--tw-color-primary-700) / 0.8);
 }
@@ -24459,6 +26492,116 @@ a.skip-main:active {
   color: rgb(var(--tw-color-primary-100) / var(--tw-text-opacity));
 }
 
+.dark .dark\:hocus\:text-red-200:focus-visible {
+  --tw-text-opacity: 1;
+  color: rgb(254 202 202 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-orange-200:focus-visible {
+  --tw-text-opacity: 1;
+  color: rgb(254 215 170 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-amber-200:focus-visible {
+  --tw-text-opacity: 1;
+  color: rgb(253 230 138 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-yellow-200:focus-visible {
+  --tw-text-opacity: 1;
+  color: rgb(254 240 138 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-lime-200:focus-visible {
+  --tw-text-opacity: 1;
+  color: rgb(217 249 157 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-green-200:focus-visible {
+  --tw-text-opacity: 1;
+  color: rgb(187 247 208 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-emerald-200:focus-visible {
+  --tw-text-opacity: 1;
+  color: rgb(167 243 208 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-teal-200:focus-visible {
+  --tw-text-opacity: 1;
+  color: rgb(153 246 228 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-cyan-200:focus-visible {
+  --tw-text-opacity: 1;
+  color: rgb(165 243 252 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-sky-200:focus-visible {
+  --tw-text-opacity: 1;
+  color: rgb(186 230 253 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-blue-200:focus-visible {
+  --tw-text-opacity: 1;
+  color: rgb(191 219 254 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-indigo-200:focus-visible {
+  --tw-text-opacity: 1;
+  color: rgb(199 210 254 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-violet-200:focus-visible {
+  --tw-text-opacity: 1;
+  color: rgb(221 214 254 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-purple-200:focus-visible {
+  --tw-text-opacity: 1;
+  color: rgb(233 213 255 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-fuchsia-200:focus-visible {
+  --tw-text-opacity: 1;
+  color: rgb(245 208 254 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-pink-200:focus-visible {
+  --tw-text-opacity: 1;
+  color: rgb(251 207 232 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-rose-200:focus-visible {
+  --tw-text-opacity: 1;
+  color: rgb(254 205 211 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-gray-200:focus-visible {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-slate-200:focus-visible {
+  --tw-text-opacity: 1;
+  color: rgb(226 232 240 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-zinc-200:focus-visible {
+  --tw-text-opacity: 1;
+  color: rgb(228 228 231 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-neutral-200:focus-visible {
+  --tw-text-opacity: 1;
+  color: rgb(229 229 229 / var(--tw-text-opacity));
+}
+
+.dark .dark\:hocus\:text-stone-200:focus-visible {
+  --tw-text-opacity: 1;
+  color: rgb(231 229 228 / var(--tw-text-opacity));
+}
+
 .dark .contrast .dark\:contrast\:divide-transparent > :not([hidden]) ~ :not([hidden]) {
   border-color: transparent;
 }