Update color scheme across components to use new primary orange variable

- Replaced hardcoded orange color values with the new CSS variable for primary orange in multiple components, ensuring consistency in styling.
- Updated styles in DialogWidget, MessageboxWidget, SettingsWidget, SimpleTabs, and various Falukant components to enhance maintainability and readability.

frontend/src/views/social/VocabLessonView.vue

@@ -1801,9 +1801,9 @@ export default {
 
 .btn-switch-mode {
   padding: 8px 16px;
-  background: #FF6B35;
+  background: var(--color-primary-orange);
   color: #000000;
-  border: 1px solid #FF6B35;
+  border: 1px solid var(--color-primary-orange);
   border-radius: 4px;
   cursor: pointer;
   font-size: 0.9em;
@@ -1812,9 +1812,9 @@ export default {
 }
 
 .btn-switch-mode:hover {
-  background: #FFF4F0;
-  color: #5D4037;
-  border: 1px solid #5D4037;
+  background: var(--color-primary-orange-light);
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-text-secondary);
 }
 
 .vocab-answer-area.multiple-choice {
@@ -2114,7 +2114,7 @@ export default {
   justify-content: space-between;
   padding: 10px 20px;
   border-bottom: 1px solid #ddd;
-  background-color: #FF6B35;
+  background-color: var(--color-primary-orange);
 }
 
 .dialog-title {