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/student_cards_admin.html

@@ -22,7 +22,7 @@
     }
 
     .student-card-form {
-        background: #f5f5f5;
+        background: var(--ui-bg);
         padding: 20px;
         border-radius: 8px;
         margin-bottom: 30px;
@@ -43,7 +43,7 @@
     .form-group label {
         font-weight: 600;
         margin-bottom: 5px;
-        color: #333;
+        color: var(--ui-text);
     }
 
     .form-group input,