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/home/NoLoginView.vue

@@ -174,26 +174,26 @@ export default {
 
 .actions>div {
     flex: 1;
-    background-color: #fdf1db;
+    background-color: #FFF4F0;
     align-items: center;
     justify-content: flex-start;
     display: flex;
-    color: #7E471B;
+    color: #5D4037;
     flex-direction: column;
     overflow: auto;
     padding: 0.5rem;
 }
 
 .actions>div>h2 {
-    color: #F9A22C;
+    color: #FF6B35;
 }
 
 .seo-content {
     max-width: 1000px;
     margin: 24px auto 0 auto;
     padding: 0 16px 40px 16px;
-    color: #7E471B;
-    background-color: #fdf1db;
+    color: #5D4037;
+    background-color: #FFF4F0;
     border: 1px solid rgba(0, 0, 0, 0.06);
     border-radius: 4px;
 }

frontend/src/views/social/VocabCourseView.vue

@@ -321,9 +321,9 @@ export default {
 
 .btn-current-lesson {
   padding: 12px 24px;
-  background: #F9A22C;
+  background: #FF6B35;
   color: #000000;
-  border: 1px solid #F9A22C;
+  border: 1px solid #FF6B35;
   border-radius: 4px;
   cursor: pointer;
   font-size: 1em;
@@ -332,9 +332,9 @@ export default {
 }
 
 .btn-current-lesson:hover {
-  background: #fdf1db;
-  color: #7E471B;
-  border: 1px solid #7E471B;
+  background: #FFF4F0;
+  color: #5D4037;
+  border: 1px solid #5D4037;
 }
 
 .lessons-table {
@@ -491,9 +491,9 @@ export default {
 
 .btn-start {
   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;
@@ -502,9 +502,9 @@ export default {
 }
 
 .btn-start:hover:not(:disabled) {
-  background: #fdf1db;
-  color: #7E471B;
-  border: 1px solid #7E471B;
+  background: #FFF4F0;
+  color: #5D4037;
+  border: 1px solid #5D4037;
 }
 
 .btn-start:disabled {
@@ -517,9 +517,9 @@ export default {
 
 .btn-edit {
   padding: 6px 12px;
-  background: #F9A22C;
+  background: #FF6B35;
   color: #000000;
-  border: 1px solid #F9A22C;
+  border: 1px solid #FF6B35;
   border-radius: 4px;
   cursor: pointer;
   font-size: 0.85em;
@@ -527,9 +527,9 @@ export default {
 }
 
 .btn-edit:hover {
-  background: #fdf1db;
-  color: #7E471B;
-  border: 1px solid #7E471B;
+  background: #FFF4F0;
+  color: #5D4037;
+  border: 1px solid #5D4037;
 }
 
 .btn-delete {

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 {