some ui changes and docs

public/css/custom.css

@@ -40,7 +40,7 @@
 .spinner {
     border: 3px solid rgba(0, 0, 0, 0.1);
     border-radius: 50%;
-    border-top: 3px solid var(--indigo-600);
+    border-top: 3px solid #0ea5e9;
     width: 40px;
     height: 40px;
     animation: spin 1s linear infinite;
@@ -124,7 +124,7 @@
 
 /* Button focus states */
 .btn:focus {
-    outline: 2px solid var(--indigo-600);
+    outline: 2px solid #0ea5e9;
     outline-offset: 2px;
 }
 
@@ -148,7 +148,7 @@
     top: 0;
     height: 100%;
     width: 3px;
-    background-color: var(--indigo-600);
+    background-color: #0ea5e9;
     transform: scaleY(0);
     transition: transform 0.2s ease;
 }
@@ -190,7 +190,7 @@
 
 /* Card stat improvements */
 .card-stat {
-    border-left: 4px solid var(--indigo-600);
+    border-left: 4px solid #0ea5e9;
 }
 
 .card-stat.success {