Faça variando em tons dessas cores:

style.css

@@ -2,21 +2,28 @@
 /* Base colors */
 :root {
     --primary: #ff580f;
-    --primary-light: #ff8040;
+    --primary-light: #ff8850;
+    --primary-lighter: #ffb080;
+    --primary-dark: #d0470a;
     --secondary: #ff3d00;
+    --secondary-light: #ff6640;
     --light: #f8f5f5;
     --dark: #21223a;
-    --gray: #6c6d8a;
+    --dark-medium: #2d2e4a;
     --dark-light: #3a3b5a;
+    --dark-lighter: #4a4b6a;
+    --gray: #6c6d8a;
+    --gray-light: #8d8eaa;
+    --gray-lighter: #afb0ca;
 }
 /* Custom chart tooltip styling */
 .chartjs-tooltip {
-    background: rgba(33, 34, 58, 0.95) !important;
-    border-radius: 4px !important;
+    background: rgba(33, 34, 58, 0.98) !important;
+border-radius: 4px !important;
     color: var(--light) !important;
     padding: 8px 12px !important;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    border: 1px solid var(--dark-light);
+    border: 1px solid var(--dark-lighter);
 }
 .chartjs-tooltip-key {
     display: inline-block;
@@ -24,8 +31,8 @@
     height: 10px;
     margin-right: 6px;
     border-radius: 2px;
-    background: var(--primary);
-    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
+background: var(--primary-light);
+box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
 }
 body {
     background-color: var(--light);