v1.0.2: Complete CSS refactoring with custom properties

- Introduced comprehensive CSS custom properties for colors, fonts, and transitions
- Eliminated 40+ hardcoded color values with centralized variables
- Consolidated duplicate font family definitions
- Removed redundant button styles and input styling
- Optimized theme system with consistent property usage
- Fixed accessibility issue with MIT license link
- Reduced code redundancy while maintaining full functionality
- All themes (auto/light/dark) now use unified variable system

src/index.css

@@ -1,10 +1,5 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
   background-color: #f8f9fa;
 }
 
@@ -32,8 +27,6 @@ code {
 
 .form-control {
   resize: vertical;
-  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
-  font-size: 14px;
 }
 
 .input-section .form-control {
@@ -48,27 +41,15 @@ code {
 }
 
 .error {
-  background-color: #f8d7da !important;
-  border-color: #f5c6cb !important;
-  color: #721c24;
+  background-color: var(--error-bg-light) !important;
+  border-color: var(--error-border-light) !important;
+  color: var(--error-text-light);
 }
 
 .success {
-  background-color: #d4edda !important;
-  border-color: #c3e6cb !important;
-  color: #155724;
-}
-
-.btn-outline-success:hover {
-  background-color: #28a745;
-  border-color: #28a745;
-  color: white;
-}
-
-.btn-outline-info:hover {
-  background-color: #17a2b8;
-  border-color: #17a2b8;
-  color: white;
+  background-color: var(--success-bg-light) !important;
+  border-color: var(--success-border-light) !important;
+  color: var(--success-text-light);
 }
 
 .header-section {
@@ -78,40 +59,50 @@ code {
   margin-bottom: 2rem;
 }
 
-.jmespath-input {
-  background-color: #fff3cd;
-  border-color: #ffeaa7;
-  font-weight: 500;
-}
-
-.json-input {
-  background-color: #e8f5e8;
-  border-color: #c3e6cb;
-}
-
-.result-output {
-  background-color: #e7f3ff;
-  border-color: #b3d7ff;
-}
-
 /* Dark mode support for error states */
 @media (prefers-color-scheme: dark) {
   .error {
-    background-color: #4a1e1e !important;
-    border-color: #6d2c2c !important;
-    color: #f8d7da !important;
+    background-color: var(--error-bg-dark) !important;
+    border-color: var(--error-border-dark) !important;
+    color: var(--error-text-dark) !important;
   }
 }
 
 /* Manual theme overrides for error states */
 .theme-dark .error {
-  background-color: #4a1e1e !important;
-  border-color: #6d2c2c !important;
-  color: #f8d7da !important;
+  background-color: var(--error-bg-dark) !important;
+  border-color: var(--error-border-dark) !important;
+  color: var(--error-text-dark) !important;
 }
 
 .theme-light .error {
-  background-color: #f8d7da !important;
-  border-color: #f5c6cb !important;
-  color: #721c24 !important;
+  background-color: var(--error-bg-light) !important;
+  border-color: var(--error-border-light) !important;
+  color: var(--error-text-light) !important;
+}
+
+/* Manual theme overrides for success states */
+.theme-dark .success {
+  background-color: var(--success-bg-dark) !important;
+  border-color: var(--success-border-dark) !important;
+  color: var(--success-text-dark) !important;
+}
+
+.theme-light .success {
+  background-color: var(--success-bg-light) !important;
+  border-color: var(--success-border-light) !important;
+  color: var(--success-text-light) !important;
+}
+
+/* Additional specificity for jmespath-input with error class */
+.theme-dark .jmespath-input.error {
+  background-color: var(--error-bg-dark) !important;
+  border-color: var(--error-border-dark) !important;
+  color: var(--error-text-dark) !important;
+}
+
+.theme-light .jmespath-input.error {
+  background-color: var(--error-bg-light) !important;
+  border-color: var(--error-border-light) !important;
+  color: var(--error-text-light) !important;
 }