Refactor styles across multiple components to use new color variables

- Updated background and border colors in DashboardWidget, DialogWidget, MessageboxWidget, and TermineWidget to use new CSS variables for consistency.
- Changed button colors in various widgets and dialogs to utilize the new primary color variable.
- Adjusted text colors in VocabCourseView, VocabDictionaryView, and VocabTrainerView to align with the new color scheme.
- Replaced hardcoded colors with CSS variables in multiple components for improved maintainability and theming.

frontend/src/components/MessageboxWidget.vue

@@ -115,12 +115,12 @@ export default {
 }
 
 .dialog {
-    background: linear-gradient(180deg, rgba(255, 252, 247, 0.98) 0%, rgba(249, 242, 232, 0.98) 100%);
+    background: var(--color-surface-strong);
     display: flex;
     flex-direction: column;
     box-shadow: var(--shadow-medium);
     border-radius: var(--radius-lg);
-    border: 1px solid rgba(93, 64, 55, 0.12);
+    border: 1px solid var(--color-border);
     pointer-events: all;
     overflow: hidden;
 }
@@ -135,8 +135,8 @@ export default {
     align-items: center;
     justify-content: space-between;
     padding: 12px 16px;
-    border-bottom: 1px solid rgba(93, 64, 55, 0.1);
-    background: linear-gradient(180deg, rgba(248, 162, 43, 0.16) 0%, rgba(255, 255, 255, 0.56) 100%);
+    border-bottom: 1px solid var(--color-border);
+    background: var(--color-surface-accent);
 }
 
 .dialog-icon {
@@ -175,8 +175,8 @@ export default {
     display: flex;
     justify-content: flex-end;
     padding: 14px 20px 18px;
-    border-top: 1px solid rgba(93, 64, 55, 0.08);
-    background: rgba(255, 255, 255, 0.46);
+    border-top: 1px solid var(--color-border);
+    background: var(--color-bg-elevated);
 }
 
 .dialog-button {
@@ -185,6 +185,6 @@ export default {
 }
 
 .dialog-button:hover {
-    color: #2b1f14;
+    color: var(--color-primary-hover);
 }
 </style>