Update color palette and styles across components for improved visual consistency

- Changed theme color in index.html to a brighter orange for better aesthetics.
- Introduced a modern color palette in styles.scss for enhanced readability and consistency.
- Updated various components (AppFooter, AppNavigation, DialogWidget, etc.) to utilize new color variables, ensuring a cohesive look throughout the application.
- Adjusted button styles and hover effects for improved user interaction feedback.
- Enhanced background colors and text colors for better contrast and visibility.

frontend/src/views/social/VocabLessonView.vue

@@ -1801,9 +1801,9 @@ export default {
 
 .btn-switch-mode {
   padding: 8px 16px;
-  background: #F9A22C;
+  background: #FF6B35;
   color: #000000;
-  border: 1px solid #F9A22C;
+  border: 1px solid #FF6B35;
   border-radius: 4px;
   cursor: pointer;
   font-size: 0.9em;
@@ -1812,9 +1812,9 @@ export default {
 }
 
 .btn-switch-mode:hover {
-  background: #fdf1db;
-  color: #7E471B;
-  border: 1px solid #7E471B;
+  background: #FFF4F0;
+  color: #5D4037;
+  border: 1px solid #5D4037;
 }
 
 .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: #F9A22C;
+  background-color: #FF6B35;
 }
 
 .dialog-title {