diff --git a/frontend/src/components/DashboardWidget.vue b/frontend/src/components/DashboardWidget.vue
index b8724d1..4a67601 100755
--- a/frontend/src/components/DashboardWidget.vue
+++ b/frontend/src/components/DashboardWidget.vue
@@ -230,8 +230,8 @@ export default {
   max-height: 100%;
   display: flex;
   flex-direction: column;
-  background: var(--dashboard-widget-bg, #fff);
-  border: 1px solid var(--dashboard-widget-border, #dee2e6);
+  background: var(--dashboard-widget-bg, var(--color-surface));
+  border: 1px solid var(--dashboard-widget-border, var(--color-border));
   border-radius: 8px;
   box-shadow: 0 1px 3px rgba(0,0,0,0.06);
   overflow: hidden;
@@ -242,7 +242,7 @@ export default {
   opacity: 0.4;
   box-shadow: 0 4px 12px rgba(0,0,0,0.2);
   cursor: grabbing;
-  border: 2px dashed #0d6efd;
+  border: 2px dashed var(--color-primary);
 }
 
 .dashboard-widget__titlebar {
@@ -250,8 +250,8 @@ export default {
   align-items: center;
   gap: 8px;
   padding: 10px 12px;
-  background: var(--color-primary-orange-light, #fff8e1);
-  border-bottom: 1px solid var(--color-text-secondary, #dee2e6);
+  background: var(--color-surface-accent);
+  border-bottom: 1px solid var(--color-border);
   font-weight: 600;
   font-size: 0.95rem;
   color: var(--color-text-primary);
diff --git a/frontend/src/components/DialogWidget.vue b/frontend/src/components/DialogWidget.vue
index 513fce7..da8d10f 100755
--- a/frontend/src/components/DialogWidget.vue
+++ b/frontend/src/components/DialogWidget.vue
@@ -201,13 +201,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;
   position: absolute;
   transform: translate(-50%, -50%);
@@ -225,9 +224,8 @@ export default {
   justify-content: space-between;
   gap: 10px;
   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);
   cursor: move;
 }
 
@@ -285,8 +283,8 @@ export default {
   justify-content: flex-end;
   gap: 10px;
   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 {
@@ -295,7 +293,7 @@ export default {
 }
 
 .dialog-button:hover {
-  color: #2b1f14;
+  color: var(--color-primary-hover);
 }
 
 .is-active {
diff --git a/frontend/src/components/MessageboxWidget.vue b/frontend/src/components/MessageboxWidget.vue
index 4207bc6..7b08861 100755
--- a/frontend/src/components/MessageboxWidget.vue
+++ b/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>
diff --git a/frontend/src/components/TermineWidget.vue b/frontend/src/components/TermineWidget.vue
index 7eea212..f9df3aa 100755
--- a/frontend/src/components/TermineWidget.vue
+++ b/frontend/src/components/TermineWidget.vue
@@ -81,8 +81,8 @@ export default {
 
 <style scoped>
 .termine-widget {
-  background: #f8f9fa;
-  border: 1px solid #dee2e6;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
   border-radius: 8px;
   padding: 20px;
   margin: 20px 0;
@@ -90,7 +90,7 @@ export default {
 
 .termine-widget h2 {
   margin: 0 0 15px 0;
-  color: #333;
+  color: var(--color-text-primary);
   font-size: 1.5em;
 }
 
@@ -99,7 +99,7 @@ export default {
 .no-termine {
   text-align: center;
   padding: 20px;
-  color: #666;
+  color: var(--color-text-secondary);
 }
 
 .error {
@@ -115,8 +115,8 @@ export default {
 .termin-item {
   display: flex;
   gap: 15px;
-  background: white;
-  border-left: 4px solid #007bff;
+  background: var(--color-surface-strong);
+  border-left: 4px solid var(--color-primary);
   padding: 15px;
   border-radius: 4px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
@@ -126,7 +126,7 @@ export default {
   flex-shrink: 0;
   text-align: center;
   padding: 10px;
-  background: #007bff;
+  background: var(--color-primary);
   color: white;
   border-radius: 4px;
   min-width: 120px;
@@ -140,13 +140,13 @@ export default {
 
 .termin-details h3 {
   margin: 0 0 8px 0;
-  color: #333;
+  color: var(--color-text-primary);
   font-size: 1.1em;
 }
 
 .termin-details p {
   margin: 0 0 8px 0;
-  color: #666;
+  color: var(--color-text-secondary);
   line-height: 1.5;
 }
 
@@ -157,4 +157,3 @@ export default {
   margin-top: 5px;
 }
 </style>
-
diff --git a/frontend/src/components/widgets/BirthdayWidget.vue b/frontend/src/components/widgets/BirthdayWidget.vue
index 3139fd2..d887d06 100755
--- a/frontend/src/components/widgets/BirthdayWidget.vue
+++ b/frontend/src/components/widgets/BirthdayWidget.vue
@@ -80,8 +80,8 @@ export default {
 }
 
 .birthday-item.birthday-today {
-  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
-  border: 1px solid #ffd54f;
+  background: var(--color-surface-accent);
+  border: 1px solid rgba(61, 139, 87, 0.24);
 }
 
 .birthday-icon {
@@ -107,7 +107,7 @@ export default {
 }
 
 .birthday-highlight {
-  color: #f57c00;
+  color: var(--color-primary);
   font-weight: 600;
 }
 
diff --git a/frontend/src/components/widgets/MiniCalendarWidget.vue b/frontend/src/components/widgets/MiniCalendarWidget.vue
index 2637225..51cf869 100755
--- a/frontend/src/components/widgets/MiniCalendarWidget.vue
+++ b/frontend/src/components/widgets/MiniCalendarWidget.vue
@@ -147,8 +147,8 @@ export default {
 }
 
 .mini-calendar-day.today {
-  background: var(--color-primary-orange, #FFB84D);
-  color: #000;
+  background: var(--color-secondary);
+  color: var(--color-text-primary);
   font-weight: 600;
   border-radius: 50%;
 }
@@ -194,7 +194,7 @@ export default {
   margin-top: 12px;
   padding-top: 8px;
   border-top: 1px solid #eee;
-  color: var(--color-primary-orange, #FFB84D);
+  color: var(--color-primary);
   text-decoration: none;
   font-size: 0.85em;
 }
diff --git a/frontend/src/components/widgets/VocabCoursesWidget.vue b/frontend/src/components/widgets/VocabCoursesWidget.vue
index a0b7b21..a9c355f 100755
--- a/frontend/src/components/widgets/VocabCoursesWidget.vue
+++ b/frontend/src/components/widgets/VocabCoursesWidget.vue
@@ -91,7 +91,7 @@ export default {
   display: inline-block;
   margin-top: 0.35rem;
   font-weight: 600;
-  color: var(--color-primary-orange-dark, #c2410c);
+  color: var(--color-primary);
 }
 
 .vocab-courses-widget__list {
@@ -156,7 +156,7 @@ export default {
   border: none;
   border-radius: 6px;
   cursor: pointer;
-  background: var(--color-primary-orange, #f97316);
+  background: var(--color-primary);
   color: #fff;
 }
 
diff --git a/frontend/src/dialogues/chat/MultiChatDialog.vue b/frontend/src/dialogues/chat/MultiChatDialog.vue
index 0197ef9..36da8b7 100755
--- a/frontend/src/dialogues/chat/MultiChatDialog.vue
+++ b/frontend/src/dialogues/chat/MultiChatDialog.vue
@@ -2439,7 +2439,7 @@ export default {
 .send-btn {
     padding: 0.3em 1.1em;
     border-radius: 3px;
-    background: #1976d2;
+    background: var(--color-primary);
     color: #fff;
     border: none;
     cursor: pointer;
diff --git a/frontend/src/dialogues/socialnetwork/UserProfileDialog.vue b/frontend/src/dialogues/socialnetwork/UserProfileDialog.vue
index 3b53cd5..d2b4b41 100755
--- a/frontend/src/dialogues/socialnetwork/UserProfileDialog.vue
+++ b/frontend/src/dialogues/socialnetwork/UserProfileDialog.vue
@@ -577,7 +577,7 @@ export default {
 .image-list li {
     display: inline-block;
     padding: 2px;
-    border: 1px solid #F9A22C;
+    border: 1px solid var(--color-secondary);
     margin: 0 4px 4px 0;
 }
 
@@ -666,7 +666,7 @@ export default {
 }
 
 .activities {
-    background-color: #F9A22C;
+    background-color: var(--color-secondary);
     margin: -20px -20px 0 -20px;
     height: 26px !important;
     display: flex !important;
diff --git a/frontend/src/dialogues/standard/ContactDialog.vue b/frontend/src/dialogues/standard/ContactDialog.vue
index 574f0a8..143be3e 100755
--- a/frontend/src/dialogues/standard/ContactDialog.vue
+++ b/frontend/src/dialogues/standard/ContactDialog.vue
@@ -72,7 +72,7 @@ p {
 }
 
 a {
-    color: #007bff;
+    color: var(--color-primary);
     text-decoration: none;
 }
 
diff --git a/frontend/src/dialogues/standard/DataPrivacyDialog.vue b/frontend/src/dialogues/standard/DataPrivacyDialog.vue
index 3cc65bf..b1bbe0a 100755
--- a/frontend/src/dialogues/standard/DataPrivacyDialog.vue
+++ b/frontend/src/dialogues/standard/DataPrivacyDialog.vue
@@ -60,7 +60,7 @@ p {
 }
 
 a {
-    color: #007bff;
+    color: var(--color-primary);
     text-decoration: none;
 }
 
diff --git a/frontend/src/dialogues/standard/ImprintDialog.vue b/frontend/src/dialogues/standard/ImprintDialog.vue
index 886d9d8..8a6aed6 100755
--- a/frontend/src/dialogues/standard/ImprintDialog.vue
+++ b/frontend/src/dialogues/standard/ImprintDialog.vue
@@ -60,7 +60,7 @@ p {
 }
 
 a {
-    color: #007bff;
+    color: var(--color-primary);
     text-decoration: none;
 }
 
diff --git a/frontend/src/views/social/VocabChapterView.vue b/frontend/src/views/social/VocabChapterView.vue
index 395214a..6909905 100755
--- a/frontend/src/views/social/VocabChapterView.vue
+++ b/frontend/src/views/social/VocabChapterView.vue
@@ -160,7 +160,7 @@ export default {
 
 .vocab-chapter-hero,
 .box {
-  background: linear-gradient(180deg, rgba(255, 252, 247, 0.97), rgba(250, 244, 235, 0.95));
+  background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-soft);
@@ -253,7 +253,7 @@ export default {
 }
 
 .tbl th {
-  background: rgba(248, 162, 43, 0.12);
+  background: var(--color-secondary-soft);
   color: var(--color-text-secondary);
   font-weight: 700;
 }
diff --git a/frontend/src/views/social/VocabCourseListView.vue b/frontend/src/views/social/VocabCourseListView.vue
index fa405b8..07dc626 100755
--- a/frontend/src/views/social/VocabCourseListView.vue
+++ b/frontend/src/views/social/VocabCourseListView.vue
@@ -497,8 +497,8 @@ export default {
   border: 1px solid transparent;
   border-radius: 4px;
   background: var(--color-primary);
-  color: #2b1f14;
-  box-shadow: 0 6px 14px rgba(248, 162, 43, 0.18);
+  color: var(--color-text-on-accent);
+  box-shadow: 0 6px 14px rgba(61, 139, 87, 0.18);
   cursor: pointer;
   font-size: 0.9em;
   white-space: nowrap;
@@ -507,18 +507,18 @@ export default {
 
 .course-actions button:hover {
   background: var(--color-primary-hover);
-  box-shadow: 0 10px 18px rgba(248, 162, 43, 0.22);
+  box-shadow: 0 10px 18px rgba(61, 139, 87, 0.22);
 }
 
 .btn-enroll {
   background: var(--color-primary) !important;
-  color: #2b1f14 !important;
+  color: var(--color-text-on-accent) !important;
   border-color: transparent !important;
 }
 
 .btn-continue {
   background: var(--color-primary) !important;
-  color: #2b1f14 !important;
+  color: var(--color-text-on-accent) !important;
   border-color: transparent !important;
 }
 
diff --git a/frontend/src/views/social/VocabCourseView.vue b/frontend/src/views/social/VocabCourseView.vue
index 770a1a3..68e2dff 100755
--- a/frontend/src/views/social/VocabCourseView.vue
+++ b/frontend/src/views/social/VocabCourseView.vue
@@ -1080,9 +1080,9 @@ export default {
   display: inline-block;
   margin-bottom: 10px;
   padding: 4px 10px;
-  border-radius: 999px;
-  background: rgba(248, 162, 43, 0.14);
-  color: #8a5411;
+  border-radius: var(--radius-sm);
+  background: var(--color-secondary-soft);
+  color: #28643d;
   font-size: 0.75rem;
   font-weight: 700;
   text-transform: uppercase;
@@ -1228,9 +1228,10 @@ export default {
   display: inline-flex;
   align-items: center;
   padding: 6px 10px;
-  border-radius: 999px;
-  background: rgba(93, 64, 55, 0.08);
-  color: #6d5446;
+  border-radius: var(--radius-sm);
+  background: rgba(238, 247, 237, 0.82);
+  border: 1px solid rgba(61, 139, 87, 0.14);
+  color: #365845;
   font-size: 0.82rem;
   font-weight: 700;
 }
@@ -1248,9 +1249,9 @@ export default {
   gap: 16px;
   margin-bottom: 20px;
   padding: 16px 18px;
-  border-radius: 14px;
-  border: 1px solid rgba(102, 153, 126, 0.38);
-  background: linear-gradient(135deg, rgba(232, 247, 238, 0.95), rgba(255, 251, 240, 0.8));
+  border-radius: var(--radius-lg);
+  border: 1px solid rgba(61, 139, 87, 0.24);
+  background: #eef8ee;
 }
 
 .course-srs-plan__eyebrow {
@@ -1260,7 +1261,7 @@ export default {
   font-weight: 800;
   letter-spacing: 0.06em;
   text-transform: uppercase;
-  color: #4f7b60;
+  color: #357148;
 }
 
 .course-srs-plan h4,
@@ -1316,8 +1317,8 @@ export default {
 }
 
 .course-flow-card__badge--block {
-  background: rgba(248, 162, 43, 0.18);
-  color: #8a5411;
+  background: var(--color-secondary-soft);
+  color: #28643d;
 }
 
 .course-flow-card__badge--intensive {
@@ -1419,19 +1420,19 @@ export default {
 .btn-current-lesson {
   padding: 12px 24px;
   background: var(--color-primary);
-  color: #2b1f14;
+  color: var(--color-text-on-accent);
   border: 1px solid transparent;
   border-radius: 4px;
   cursor: pointer;
   font-size: 1em;
   font-weight: 600;
   transition: background 0.2s, box-shadow 0.2s;
-  box-shadow: 0 6px 14px rgba(248, 162, 43, 0.18);
+  box-shadow: 0 6px 14px rgba(61, 139, 87, 0.18);
 }
 
 .btn-current-lesson:hover {
   background: var(--color-primary-hover);
-  box-shadow: 0 10px 18px rgba(248, 162, 43, 0.22);
+  box-shadow: 0 10px 18px rgba(61, 139, 87, 0.22);
 }
 
 .lesson-cards {
@@ -1441,7 +1442,7 @@ export default {
 
 .lesson-number {
   font-weight: 600;
-  color: #666;
+  color: var(--color-text-secondary);
   font-size: 0.95em;
   display: inline-flex;
   align-items: center;
@@ -1449,7 +1450,7 @@ export default {
   min-width: 48px;
   padding: 6px 10px;
   border-radius: 999px;
-  background: rgba(248, 162, 43, 0.12);
+  background: var(--color-secondary-soft);
 }
 
 .lesson-card {
@@ -1484,13 +1485,13 @@ export default {
 }
 
 .lesson-chip--mode {
-  background: rgba(248, 162, 43, 0.16);
-  color: #8a5411;
+  background: var(--color-secondary-soft);
+  color: #28643d;
 }
 
 .lesson-chip--block {
-  background: rgba(93, 64, 55, 0.09);
-  color: #6d5446;
+  background: var(--color-bg-muted);
+  color: var(--color-text-secondary);
 }
 
 .lesson-chip--intensive {
@@ -1704,19 +1705,21 @@ export default {
 .course-today-plan {
   margin-bottom: 20px;
   padding: 16px 18px;
-  border-radius: 12px;
-  background: rgba(255, 248, 235, 0.75);
-  border: 1px solid rgba(212, 184, 150, 0.45);
+  border-radius: var(--radius-lg);
+  background: rgba(255, 255, 251, 0.92);
+  border: 1px solid var(--color-border);
 }
 
 .course-today-plan--soft {
+  background: rgba(238, 247, 237, 0.64);
+  border-color: rgba(61, 139, 87, 0.26);
   border-style: dashed;
   opacity: 0.95;
 }
 
 .course-today-plan--empty {
-  background: rgba(250, 250, 250, 0.85);
-  border-color: var(--color-border, #e0dcd6);
+  background: rgba(248, 250, 247, 0.88);
+  border-color: var(--color-border);
 }
 
 .course-today-plan__title {
@@ -1763,26 +1766,27 @@ export default {
   font-weight: 700;
   letter-spacing: 0.04em;
   text-transform: uppercase;
-  color: #8a6d3b;
+  color: #3c754d;
 }
 
 .course-today-plan__lesson-title {
   font-weight: 600;
-  color: #333;
+  color: var(--color-text-primary);
   font-size: 0.95rem;
 }
 
 .course-today-plan__lesson-meta {
   font-size: 0.8rem;
-  color: #888;
+  color: var(--color-text-muted);
 }
 
 .course-today-plan__action {
   flex-shrink: 0;
   padding: 6px 12px;
-  border-radius: 8px;
-  border: 1px solid var(--color-border-strong, #c9c2b8);
-  background: rgba(255, 255, 255, 0.95);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border-strong);
+  background: #ffffff;
+  color: var(--color-text-primary);
   font-size: 0.82rem;
   cursor: pointer;
 }
@@ -1792,8 +1796,8 @@ export default {
 }
 
 .course-today-plan__action:hover {
-  border-color: #b8a896;
-  background: #fff;
+  border-color: var(--color-primary);
+  background: var(--color-primary-soft);
 }
 
 .review-badge[title] {
diff --git a/frontend/src/views/social/VocabDictionaryView.vue b/frontend/src/views/social/VocabDictionaryView.vue
index 0500ada..30f703d 100755
--- a/frontend/src/views/social/VocabDictionaryView.vue
+++ b/frontend/src/views/social/VocabDictionaryView.vue
@@ -250,8 +250,8 @@ export default {
   margin-bottom: 10px;
   padding: 4px 10px;
   border-radius: 999px;
-  background: rgba(248, 162, 43, 0.14);
-  color: #8a5411;
+  background: var(--color-secondary-soft);
+  color: #28643d;
   font-size: 0.75rem;
   font-weight: 700;
   text-transform: uppercase;
diff --git a/frontend/src/views/social/VocabLanguageView.vue b/frontend/src/views/social/VocabLanguageView.vue
index a20d064..5322911 100755
--- a/frontend/src/views/social/VocabLanguageView.vue
+++ b/frontend/src/views/social/VocabLanguageView.vue
@@ -164,8 +164,8 @@ export default {
   margin-bottom: 10px;
   padding: 4px 10px;
   border-radius: 999px;
-  background: rgba(248, 162, 43, 0.14);
-  color: #8a5411;
+  background: var(--color-secondary-soft);
+  color: #28643d;
   font-size: 0.75rem;
   font-weight: 700;
   text-transform: uppercase;
diff --git a/frontend/src/views/social/VocabLessonView.vue b/frontend/src/views/social/VocabLessonView.vue
index 842a2b4..a6453a1 100755
--- a/frontend/src/views/social/VocabLessonView.vue
+++ b/frontend/src/views/social/VocabLessonView.vue
@@ -4621,8 +4621,8 @@ export default {
 }
 
 .language-assistant-card--focused {
-  border-color: var(--color-primary-orange);
-  box-shadow: 0 0 0 3px rgba(248, 162, 43, 0.18);
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgba(61, 139, 87, 0.18);
 }
 
 .language-assistant-card__header {
@@ -4680,8 +4680,8 @@ export default {
 }
 
 .assistant-mode-button.active {
-  border-color: var(--color-primary-orange);
-  background: rgba(248, 162, 43, 0.16);
+  border-color: var(--color-primary);
+  background: var(--color-secondary-soft);
 }
 
 .language-assistant-chat {
@@ -4712,7 +4712,7 @@ export default {
 }
 
 .assistant-message--assistant {
-  background: rgba(248, 162, 43, 0.08);
+  background: var(--color-surface-accent);
 }
 
 .assistant-message--user {
@@ -4724,17 +4724,17 @@ export default {
   align-items: flex-start;
   gap: 12px;
   padding: 12px 14px;
-  border: 1px solid rgba(248, 162, 43, 0.35);
+  border: 1px solid rgba(61, 139, 87, 0.35);
   border-radius: var(--radius-md);
-  background: rgba(248, 162, 43, 0.1);
+  background: var(--color-secondary-soft);
 }
 
 .language-assistant-waiting__spinner {
   width: 18px;
   height: 18px;
   margin-top: 2px;
-  border: 3px solid rgba(248, 162, 43, 0.28);
-  border-top-color: var(--color-primary-orange);
+  border: 3px solid rgba(61, 139, 87, 0.28);
+  border-top-color: var(--color-primary);
   border-radius: 50%;
   animation: assistant-spin 0.9s linear infinite;
   flex: 0 0 auto;
@@ -4785,10 +4785,10 @@ export default {
 .btn-reset-lesson {
   flex-shrink: 0;
   padding: 8px 14px;
-  border: 1px solid rgba(140, 90, 60, 0.35);
+  border: 1px solid var(--color-border-strong);
   border-radius: 4px;
-  background: rgba(255, 248, 240, 0.95);
-  color: #6b4420;
+  background: var(--color-bg-elevated);
+  color: var(--color-text-primary);
   cursor: pointer;
   font-size: 0.875rem;
   font-weight: 600;
@@ -4805,14 +4805,14 @@ export default {
   gap: 16px;
   padding: 18px 18px 16px;
   margin-bottom: 16px;
-  background: linear-gradient(135deg, #fff8eb 0%, #f7efe2 100%);
-  border: 1px solid rgba(160, 120, 40, 0.18);
+  background: var(--color-surface-accent);
+  border: 1px solid rgba(61, 139, 87, 0.18);
   border-radius: 12px;
 }
 
 .lesson-overview-text {
   margin: 8px 0 0;
-  color: #5b4b2f;
+  color: var(--color-text-secondary);
 }
 
 .lesson-meta-grid {
@@ -4886,7 +4886,7 @@ export default {
   display: block;
   margin-bottom: 6px;
   font-size: 0.82rem;
-  color: #7a6848;
+  color: var(--color-text-muted);
 }
 
 .lesson-intensity-banner {
@@ -4933,7 +4933,7 @@ export default {
 }
 
 .lesson-overview-more {
-  border-top: 1px solid rgba(160, 120, 40, 0.18);
+  border-top: 1px solid var(--color-border);
   padding-top: 14px;
 }
 
@@ -4941,7 +4941,7 @@ export default {
 .lesson-deepen-section__summary {
   cursor: pointer;
   font-weight: 600;
-  color: #5f4313;
+  color: var(--color-primary);
 }
 
 .lesson-overview-more__grid {
@@ -4960,9 +4960,9 @@ export default {
 .didactic-card,
 .cultural-notes {
   padding: 18px;
-  background: #f8f9fa;
+  background: var(--color-bg-elevated);
   border-radius: 12px;
-  border: 1px solid #e7e7e7;
+  border: 1px solid var(--color-border);
 }
 
 .lesson-intro-combined {
@@ -4996,8 +4996,8 @@ export default {
 
 .pattern-item {
   padding: 12px 14px;
-  border-left: 4px solid #d2831f;
-  background: #fff;
+  border-left: 4px solid var(--color-secondary);
+  background: var(--color-surface-strong);
   border-radius: 8px;
 }
 
@@ -5020,22 +5020,22 @@ export default {
 
 .vocab-prep-pass {
   margin-bottom: 14px;
-  background: linear-gradient(180deg, #fffefd 0%, #fff7ec 100%);
-  border: 1px solid rgba(210, 131, 31, 0.18);
+  background: var(--color-surface-accent);
+  border: 1px solid rgba(61, 139, 87, 0.18);
 }
 
 .vocab-prep-pass__step {
   margin: 0 0 10px;
   font-size: 0.9rem;
-  color: #7a6848;
+  color: var(--color-text-secondary);
   font-weight: 600;
 }
 
 .vocab-prep-card {
   margin-top: 12px;
   padding: 16px 18px;
-  background: #fff;
-  border: 1px solid #e5dccf;
+  background: var(--color-surface-strong);
+  border: 1px solid var(--color-border);
   border-radius: 10px;
 }
 
@@ -5056,18 +5056,18 @@ export default {
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: #8a7658;
+  color: var(--color-text-muted);
 }
 
 .vocab-prep-card__target {
   font-size: 1.2rem;
   font-weight: 700;
-  color: #1f1a16;
+  color: var(--color-text-primary);
 }
 
 .vocab-prep-card__gloss {
   font-size: 1rem;
-  color: #6a5a44;
+  color: var(--color-text-secondary);
 }
 
 .vocab-prep-pass .btn-prep-pass {
@@ -5083,9 +5083,9 @@ export default {
 .lesson-primary-flow {
   margin-top: 18px;
   padding: 18px;
-  border: 1px solid rgba(210, 131, 31, 0.2);
-  background: linear-gradient(180deg, rgba(255, 251, 245, 0.98), rgba(255, 246, 233, 0.94));
-  box-shadow: 0 14px 30px rgba(194, 141, 61, 0.08);
+  border: 1px solid rgba(61, 139, 87, 0.2);
+  background: var(--color-surface-accent);
+  box-shadow: 0 14px 30px rgba(42, 90, 56, 0.06);
 }
 
 .lesson-primary-flow__header {
@@ -5096,8 +5096,8 @@ export default {
   display: inline-flex;
   padding: 4px 10px;
   border-radius: 999px;
-  background: rgba(248, 162, 43, 0.16);
-  color: #7a4b00;
+  background: var(--color-secondary-soft);
+  color: #28643d;
   font-size: 0.76rem;
   font-weight: 700;
   letter-spacing: 0.06em;
@@ -5106,19 +5106,19 @@ export default {
 
 .lesson-primary-flow__title {
   margin: 10px 0 6px;
-  color: #2d2114;
+  color: var(--color-text-primary);
 }
 
 .lesson-primary-flow__intro {
   margin: 0;
-  color: #6b5535;
+  color: var(--color-text-secondary);
 }
 
 .lesson-grammar-impulse {
   margin-top: 16px;
   padding: 16px 18px;
-  border: 1px solid rgba(121, 100, 56, 0.18);
-  background: rgba(255, 255, 255, 0.72);
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
 }
 
 .lesson-grammar-impulse__header {
@@ -5130,12 +5130,12 @@ export default {
 
 .lesson-grammar-impulse__header h4 {
   margin: 0;
-  color: #3f2d14;
+  color: var(--color-text-primary);
 }
 
 .lesson-grammar-impulse__intro {
   margin: 0 0 12px;
-  color: #6b5535;
+  color: var(--color-text-secondary);
 }
 
 .lesson-grammar-impulse__list {
@@ -5146,8 +5146,8 @@ export default {
 .lesson-grammar-impulse__item {
   padding: 12px 14px;
   border-radius: 10px;
-  background: rgba(255, 249, 240, 0.88);
-  border: 1px solid rgba(121, 100, 56, 0.12);
+  background: var(--color-surface-accent);
+  border: 1px solid rgba(61, 139, 87, 0.14);
 }
 
 .lesson-grammar-impulse__item p {
@@ -5176,7 +5176,7 @@ export default {
 .speaking-cue,
 .pattern-drill-hint {
   margin-top: 8px;
-  color: #66553a;
+  color: var(--color-text-secondary);
   font-style: italic;
 }
 
@@ -5385,8 +5385,8 @@ export default {
 .exercise-grammar-card {
   margin-bottom: 16px;
   padding: 16px 18px;
-  border: 1px solid rgba(113, 94, 54, 0.18);
-  background: linear-gradient(180deg, rgba(255, 250, 241, 0.98), rgba(255, 246, 229, 0.94));
+  border: 1px solid var(--color-border);
+  background: var(--color-surface-accent);
 }
 
 .exercise-grammar-card__header {
@@ -5404,8 +5404,8 @@ export default {
 .exercise-grammar-card__item {
   padding: 12px 14px;
   border-radius: 10px;
-  background: rgba(255, 255, 255, 0.72);
-  border: 1px solid rgba(113, 94, 54, 0.12);
+  background: var(--color-surface-strong);
+  border: 1px solid var(--color-border);
 }
 
 .exercise-grammar-card__item p {
@@ -5513,7 +5513,7 @@ export default {
 }
 
 .option-label:hover {
-  background-color: #f5f5f5;
+  background-color: var(--color-primary-soft);
 }
 
 .option-label input[type="radio"] {
@@ -5545,19 +5545,19 @@ export default {
 .exercise-item button {
   padding: 10px 20px;
   background: var(--color-primary);
-  color: #2b1f14;
+  color: var(--color-text-on-accent);
   border: 1px solid transparent;
   border-radius: 4px;
   cursor: pointer;
   font-size: 1em;
   margin-top: 10px;
   transition: background-color 0.2s, box-shadow 0.2s;
-  box-shadow: 0 6px 14px rgba(248, 162, 43, 0.18);
+  box-shadow: 0 6px 14px rgba(61, 139, 87, 0.18);
 }
 
 .exercise-item button:hover:not(:disabled) {
   background: var(--color-primary-hover);
-  box-shadow: 0 10px 18px rgba(248, 162, 43, 0.22);
+  box-shadow: 0 10px 18px rgba(61, 139, 87, 0.22);
 }
 
 .exercise-item button:disabled {
@@ -5629,7 +5629,7 @@ export default {
 }
 
 .tab-button.active {
-  color: #2b1f14;
+  color: var(--color-text-on-accent);
   background: var(--color-primary);
   border-bottom-color: var(--color-primary);
   font-weight: bold;
@@ -5673,7 +5673,7 @@ export default {
 .vocab-list__summary {
   cursor: pointer;
   font-weight: 600;
-  color: #5f4313;
+  color: var(--color-primary);
   margin-bottom: 12px;
 }
 
@@ -5683,8 +5683,8 @@ export default {
 
 .vocab-list--overview {
   padding: 14px 16px;
-  background: rgba(255, 255, 255, 0.86);
-  border: 1px solid #eadfcf;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
   border-radius: 12px;
 }
 
@@ -5726,21 +5726,21 @@ export default {
   gap: 12px 16px;
   margin-top: 14px;
   padding-top: 12px;
-  border-top: 1px solid #eadfcf;
+  border-top: 1px solid var(--color-border);
 }
 
 .vocab-items-pager__btn {
   padding: 6px 14px;
   font-size: 0.9rem;
-  border: 1px solid #c9b896;
+  border: 1px solid var(--color-border-strong);
   border-radius: 8px;
-  background: #faf8f3;
-  color: #333;
+  background: var(--color-surface-strong);
+  color: var(--color-text-primary);
   cursor: pointer;
 }
 
 .vocab-items-pager__btn:hover:not(:disabled) {
-  background: #f0ebe0;
+  background: var(--color-primary-soft);
 }
 
 .vocab-items-pager__btn:disabled {
@@ -5784,10 +5784,10 @@ export default {
 .vocab-trainer-section {
   margin: 20px 0;
   padding: 18px;
-  background: #fff;
-  border: 1px solid rgba(210, 131, 31, 0.2);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
   border-radius: 12px;
-  box-shadow: 0 10px 20px rgba(210, 131, 31, 0.08);
+  box-shadow: 0 10px 20px rgba(42, 90, 56, 0.06);
 }
 
 .vocab-trainer-section h4 {
@@ -5822,7 +5822,7 @@ export default {
 
 .trainer-progress-row {
   font-size: 0.92em;
-  color: #5b4636;
+  color: var(--color-text-secondary);
 }
 
 .vocab-trainer-start {
@@ -5832,13 +5832,13 @@ export default {
 .btn-start-trainer {
   padding: 10px 20px;
   background: var(--color-primary);
-  color: #2b1f14;
+  color: var(--color-text-on-accent);
   border: 1px solid transparent;
   border-radius: 4px;
   cursor: pointer;
   font-size: 1em;
   margin-top: 10px;
-  box-shadow: 0 6px 14px rgba(248, 162, 43, 0.18);
+  box-shadow: 0 6px 14px rgba(61, 139, 87, 0.18);
 }
 
 .btn-start-trainer:hover {
@@ -5887,7 +5887,7 @@ export default {
 
 .mode-badge.mode-active {
   background: var(--color-primary);
-  color: #2b1f14;
+  color: var(--color-text-on-accent);
   font-weight: bold;
 }
 
@@ -5996,13 +5996,13 @@ export default {
 
 .choice-button:hover {
   border-color: var(--color-primary);
-  background: rgba(248, 162, 43, 0.08);
+  background: var(--color-primary-soft);
 }
 
 .choice-button.selected {
   border-color: var(--color-primary);
   background: var(--color-primary);
-  color: #2b1f14;
+  color: var(--color-text-on-accent);
 }
 
 .vocab-input {
@@ -6016,7 +6016,7 @@ export default {
 .btn-check {
   padding: 10px 20px;
   background: var(--color-primary);
-  color: #2b1f14;
+  color: var(--color-text-on-accent);
   border: 1px solid transparent;
   border-radius: 4px;
   cursor: pointer;
@@ -6091,7 +6091,7 @@ export default {
 .vocab-next button {
   padding: 10px 20px;
   background: var(--color-primary);
-  color: #2b1f14;
+  color: var(--color-text-on-accent);
   border: 1px solid transparent;
   border-radius: 4px;
   cursor: pointer;
@@ -6124,7 +6124,7 @@ export default {
 .btn-continue {
   padding: 12px 24px;
   background: var(--color-primary);
-  color: #2b1f14;
+  color: var(--color-text-on-accent);
   border: 1px solid transparent;
   border-radius: 4px;
   font-size: 1.1em;
@@ -6169,7 +6169,7 @@ export default {
 
 .btn-record {
   background: var(--color-primary);
-  color: #2b1f14;
+  color: var(--color-text-on-accent);
 }
 
 .btn-record:hover:not(:disabled) {
@@ -6193,7 +6193,7 @@ export default {
 .btn-check {
   padding: 10px 20px;
   background: var(--color-primary);
-  color: #2b1f14;
+  color: var(--color-text-on-accent);
   border: 1px solid transparent;
   border-radius: 6px;
   cursor: pointer;
@@ -6338,7 +6338,7 @@ export default {
 .dialog-button {
   padding: 8px 16px;
   background: var(--color-primary);
-  color: #2b1f14;
+  color: var(--color-text-on-accent);
   border: 1px solid transparent;
   border-radius: 4px;
   cursor: pointer;
diff --git a/frontend/src/views/social/VocabTrainerView.vue b/frontend/src/views/social/VocabTrainerView.vue
index b9b72d8..203470b 100755
--- a/frontend/src/views/social/VocabTrainerView.vue
+++ b/frontend/src/views/social/VocabTrainerView.vue
@@ -169,8 +169,8 @@ export default {
   margin-bottom: 10px;
   padding: 4px 10px;
   border-radius: 999px;
-  background: rgba(248, 162, 43, 0.14);
-  color: #8a5411;
+  background: var(--color-secondary-soft);
+  color: #28643d;
   font-size: 0.75rem;
   font-weight: 700;
   text-transform: uppercase;
@@ -282,8 +282,8 @@ export default {
   height: 36px;
   padding: 0 10px;
   border-radius: 999px;
-  background: rgba(248, 162, 43, 0.12);
-  color: #8a5411;
+  background: var(--color-secondary-soft);
+  color: #28643d;
   font-weight: 700;
 }