Refactor UI styles to use CSS variables for consistent theming

- Updated background colors across various templates to use CSS variables for better theming support.
- Replaced hardcoded colors with variables like `var(--ui-surface)` and `var(--ui-surface-soft)` for backgrounds.
- Adjusted text colors to use `var(--ui-text)` for improved readability and consistency.
- Enhanced the theme toggle functionality in the base template to dynamically change theme colors based on user preference.
- Ensured that all relevant templates reflect the new theming approach for a cohesive user experience.

Web/templates/library_item_invoices.html

@@ -40,7 +40,7 @@
   }
 
   .invoice-card {
-    background: #fff;
+    background: var(--ui-surface);
     border: 1px solid #e2e8f0;
     border-radius: 16px;
     padding: 18px;
@@ -65,7 +65,7 @@
     text-transform: uppercase;
     letter-spacing: 0.04em;
     color: #64748b;
-    background: #f8fafc;
+    background: var(--ui-surface-soft);
   }
 
   .invoice-table tr:hover td {