Faça variando em tons dessas cores:

script.js

@@ -6,8 +6,8 @@ document.addEventListener('DOMContentLoaded', function() {
         datasets: [{
             label: 'Tokens Gerados',
             data: [1245, 1890, 1823, 2345, 2789, 3021, 3420, 3210, 2956, 2567, 2108, 1765],
-            backgroundColor: 'rgba(67, 97, 238, 0.8)',
-            borderColor: 'rgba(63, 55, 201, 1)',
+            backgroundColor: 'rgba(255, 88, 15, 0.8)',
+            borderColor: 'rgba(255, 61, 0, 1)',
 borderWidth: 1,
             borderRadius: {
                 topLeft: 6,

style.css

@@ -1,36 +1,36 @@
 
 /* Base colors */
 :root {
-    --primary: #4361ee;
-    --primary-light: #4895ef;
-    --secondary: #3f37c9;
-    --light: #f8f9fa;
-    --dark: #212529;
-    --gray: #6c757d;
+    --primary: #ff580f;
+    --primary-light: #ff8040;
+    --secondary: #ff3d00;
+    --light: #f8f5f5;
+    --dark: #21223a;
+    --gray: #6c6d8a;
+    --dark-light: #3a3b5a;
 }
-
 /* Custom chart tooltip styling */
 .chartjs-tooltip {
-    background: rgba(33, 37, 41, 0.9) !important;
+    background: rgba(33, 34, 58, 0.95) !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);
 }
-
 .chartjs-tooltip-key {
     display: inline-block;
     width: 10px;
     height: 10px;
     margin-right: 6px;
     border-radius: 2px;
-    background: var(--primary-light);
+    background: var(--primary);
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
 }
-
 body {
     background-color: var(--light);
+    color: var(--dark);
 }
-
 /* Animation for chart loading */
 @keyframes fadeIn {
     from { opacity: 0; transform: translateY(10px); }