From 7797d69a20034a256337c3ae9e9012182938a21c Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Fri, 21 Aug 2026 12:05:59 +0200
Subject: [PATCH] Refactor styles and improve UI consistency across components

- Updated color variables in styles.scss for a more cohesive color scheme.
- Adjusted padding, margins, and border-radius in AppContent, AppFooter, AppHeader, AppNavigation, AppSectionBar, LoggedInView, and NoLoginView for better spacing and alignment.
- Changed background gradients to solid colors for a cleaner look.
- Enhanced hover effects and button styles for improved interactivity.
- Standardized text colors and borders to align with the new color palette.
---
 frontend/src/assets/styles.scss           |  65 ++++++-----
 frontend/src/components/AppContent.vue    |  16 +--
 frontend/src/components/AppFooter.vue     |  95 ++++++++--------
 frontend/src/components/AppHeader.vue     |  93 ++++++++--------
 frontend/src/components/AppNavigation.vue | 125 ++++++++++++----------
 frontend/src/components/AppSectionBar.vue |   9 +-
 frontend/src/views/home/LoggedInView.vue  |  16 ++-
 frontend/src/views/home/NoLoginView.vue   |  55 +++++-----
 8 files changed, 238 insertions(+), 236 deletions(-)

diff --git a/frontend/src/assets/styles.scss b/frontend/src/assets/styles.scss
index a53602d..4b2f080 100755
--- a/frontend/src/assets/styles.scss
+++ b/frontend/src/assets/styles.scss
@@ -1,29 +1,29 @@
 :root {
   color-scheme: light;
 
-  --font-display: "Trebuchet MS", "Segoe UI", sans-serif;
+  --font-display: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
   --font-body: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
 
-  --color-bg: #f4f1ea;
-  --color-bg-elevated: #faf7f1;
-  --color-bg-muted: #f5eee2;
-  --color-surface: rgba(255, 251, 246, 0.94);
-  --color-surface-strong: #fffdfa;
-  --color-surface-accent: #fff4e5;
-  --color-border: rgba(93, 64, 55, 0.12);
-  --color-border-strong: rgba(93, 64, 55, 0.24);
+  --color-bg: #f7f7f1;
+  --color-bg-elevated: #fffefa;
+  --color-bg-muted: #edf2e9;
+  --color-surface: rgba(255, 255, 251, 0.97);
+  --color-surface-strong: #ffffff;
+  --color-surface-accent: #eef7ed;
+  --color-border: rgba(57, 81, 65, 0.15);
+  --color-border-strong: rgba(57, 81, 65, 0.3);
 
-  --color-text-primary: #211910;
-  --color-text-secondary: #5f4b39;
-  --color-text-muted: #7a6857;
-  --color-text-on-accent: #fffaf4;
+  --color-text-primary: #26372e;
+  --color-text-secondary: #526258;
+  --color-text-muted: #758277;
+  --color-text-on-accent: #ffffff;
 
-  --color-primary: #f8a22b;
-  --color-primary-hover: #ea961f;
-  --color-primary-soft: rgba(248, 162, 43, 0.14);
+  --color-primary: #3d8b57;
+  --color-primary-hover: #2f7045;
+  --color-primary-soft: rgba(61, 139, 87, 0.13);
   --color-secondary: #78c38a;
-  --color-secondary-soft: rgba(120, 195, 138, 0.18);
-  --color-highlight: #ffcf74;
+  --color-secondary-soft: rgba(120, 195, 138, 0.2);
+  --color-highlight: #b9dfc2;
 
   --color-success: #287d5a;
   --color-warning: #c9821f;
@@ -31,6 +31,7 @@
 
   --shell-max-width: 1440px;
   --content-max-width: 1200px;
+  --shell-inset: clamp(12px, 2vw, 22px);
   --header-height: 62px;
   --nav-height: 52px;
   --footer-height: 46px;
@@ -45,13 +46,13 @@
   --space-10: 40px;
   --space-12: 48px;
 
-  --radius-sm: 3px;
-  --radius-md: 5px;
-  --radius-lg: 8px;
-  --radius-pill: 8px;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 7px;
+  --radius-pill: 5px;
 
-  --shadow-soft: 0 12px 30px rgba(47, 29, 14, 0.08);
-  --shadow-medium: 0 20px 50px rgba(47, 29, 14, 0.12);
+  --shadow-soft: 0 10px 25px rgba(21, 37, 30, 0.06);
+  --shadow-medium: 0 18px 42px rgba(21, 37, 30, 0.1);
   --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);
 
   --transition-fast: 140ms ease;
@@ -59,9 +60,9 @@
 
   --color-primary-orange: var(--color-primary);
   --color-primary-orange-hover: var(--color-primary-hover);
-  --color-primary-orange-light: #f9ece1;
-  --color-primary-green: #84c6a3;
-  --color-primary-green-hover: #95d1b0;
+  --color-primary-orange-light: #edf6ef;
+  --color-primary-green: #3d8b57;
+  --color-primary-green-hover: #2f7045;
 }
 
 *,
@@ -77,9 +78,7 @@ body,
 }
 
 html {
-  background:
-    radial-gradient(circle at top left, rgba(255, 255, 255, 0.85), transparent 30%),
-    linear-gradient(180deg, #f8f2e8 0%, #f3ebdd 100%);
+  background: #f3f5f2;
 }
 
 body {
@@ -123,8 +122,8 @@ span.button {
   border: 1px solid transparent;
   border-radius: var(--radius-pill);
   background: var(--color-primary);
-  color: #2b1f14;
-  box-shadow: 0 6px 14px rgba(248, 162, 43, 0.2);
+  color: var(--color-text-on-accent);
+  box-shadow: 0 5px 12px rgba(38, 91, 56, 0.18);
   cursor: pointer;
   transition:
     transform var(--transition-fast),
@@ -138,7 +137,7 @@ button:hover,
 span.button:hover {
   transform: translateY(-1px);
   background: var(--color-primary-hover);
-  box-shadow: 0 10px 18px rgba(248, 162, 43, 0.24);
+  box-shadow: 0 8px 16px rgba(38, 91, 56, 0.22);
 }
 
 button:active,
diff --git a/frontend/src/components/AppContent.vue b/frontend/src/components/AppContent.vue
index 1514389..0d40fcd 100755
--- a/frontend/src/components/AppContent.vue
+++ b/frontend/src/components/AppContent.vue
@@ -35,11 +35,11 @@
   min-height: 0;
   padding: 0;
   overflow: hidden;
-  background: #ffffff;
+  background: var(--color-bg);
 }
 
 .app-content__scroll {
-  background: #ffffff;
+  background: var(--color-bg);
   height: 100%;
   min-height: 0;
 }
@@ -50,7 +50,7 @@
      height:100% + flex:1 auf dem letzten Kind hätte die Seite auf die Viewport-Höhe geklemmt (kein äußerer Scroll). */
   min-height: 100%;
   margin: 0 auto;
-  padding: 20px 18px 16px;
+  padding: 24px var(--shell-inset) 20px;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -61,13 +61,13 @@
 }
 
 .app-content__route--panel {
-  padding: 14px;
-  border-radius: 16px;
-  border: 1px solid rgba(93, 64, 55, 0.08);
-  background: #ffffff;
+  padding: 18px;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.7),
-    0 10px 22px rgba(93, 64, 55, 0.05);
+    0 10px 22px rgba(26, 44, 35, 0.045);
 }
 
 /* Volle Resthöhe nur wenn eine View meta.contentFill setzt (z. B. feste Split-Layouts) */
diff --git a/frontend/src/components/AppFooter.vue b/frontend/src/components/AppFooter.vue
index f81b038..0abbff8 100755
--- a/frontend/src/components/AppFooter.vue
+++ b/frontend/src/components/AppFooter.vue
@@ -87,6 +87,7 @@ export default {
 .app-footer {
   flex: 0 0 auto;
   padding: 0;
+  background: #f0f6ee;
 }
 
 .app-footer__inner {
@@ -94,14 +95,13 @@ export default {
   margin: 0 auto;
   display: flex;
   align-items: center;
-  gap: 16px;
-  min-height: 44px;
-  padding: 6px 12px;
+  gap: 14px;
+  min-height: 42px;
+  padding: 5px var(--shell-inset);
   border-radius: 0;
-  background:
-    linear-gradient(180deg, rgba(242, 248, 243, 0.96) 0%, rgba(224, 238, 227, 0.98) 100%);
-  border-top: 1px solid rgba(120, 195, 138, 0.28);
-  box-shadow: 0 -6px 18px rgba(93, 64, 55, 0.06);
+  background: #f0f6ee;
+  border-top: 1px solid rgba(86, 120, 94, 0.2);
+  box-shadow: 0 -4px 12px rgba(42, 68, 48, 0.035);
 }
 
 .footer-system {
@@ -113,9 +113,9 @@ export default {
 .footer-brand {
   min-height: 32px;
   padding: 0 10px 0 8px;
-  background: rgba(120, 195, 138, 0.12);
-  border: 1px solid rgba(120, 195, 138, 0.22);
-  color: #24523a;
+  background: rgba(120, 195, 138, 0.16);
+  border: 1px solid rgba(61, 139, 87, 0.24);
+  color: #28643d;
   box-shadow: none;
 }
 
@@ -148,9 +148,9 @@ export default {
   overflow: auto;
   min-width: 0;
   padding: 4px 8px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.42);
-  border: 1px solid rgba(120, 195, 138, 0.16);
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(86, 120, 94, 0.16);
 }
 
 .window-bar--empty {
@@ -169,15 +169,15 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
   padding: 0 12px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.7);
+  border-radius: 2px;
+  background: #ffffff;
   color: var(--color-text-primary);
-  border: 1px solid rgba(120, 195, 138, 0.18);
+  border: 1px solid rgba(86, 120, 94, 0.2);
   box-shadow: none;
 }
 
 .dialog-button:hover {
-  background: rgba(255, 255, 255, 0.92);
+  background: var(--color-secondary-soft);
 }
 
 .dialog-button>img {
@@ -194,48 +194,54 @@ export default {
   gap: 18px;
   white-space: nowrap;
   padding-left: 8px;
-  border-left: 1px solid rgba(120, 195, 138, 0.22);
+  border-left: 1px solid rgba(86, 120, 94, 0.18);
 }
 
 .static-block>a {
-  color: #42634e;
+  color: #3f654c;
   font-weight: 600;
 }
 
 .static-block > a:hover {
-  color: #24523a;
+  color: var(--color-primary);
 }
 
 @media (max-width: 960px) {
   .app-footer__inner {
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+    min-height: 40px;
+    gap: 8px;
   }
 
-  .footer-system,
-  .window-bar,
-  .static-block {
-    width: 100%;
+  .footer-brand {
+    width: 32px;
+    min-width: 32px;
+    padding: 0;
   }
 
-  .footer-system {
-    justify-content: space-between;
+  .footer-brand span,
+  .footer-caption {
+    display: none;
   }
 
   .static-block {
-    justify-content: space-between;
-    gap: 12px;
-    padding-left: 0;
-    border-left: 0;
-    border-top: 1px solid rgba(120, 195, 138, 0.2);
-    padding-top: 6px;
+    gap: 10px;
+    padding-left: 6px;
+    font-size: 0.8rem;
+  }
+
+  .static-block > a {
+    display: inline-flex;
+    align-items: center;
+    min-height: 30px;
   }
 }
 
 @media (max-width: 640px) {
   .app-footer__inner {
-    gap: 6px;
-    min-height: 0;
-    padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
+    gap: 7px;
+    min-height: 38px;
+    padding: 4px 10px calc(4px + env(safe-area-inset-bottom, 0px));
   }
 
   .footer-system {
@@ -243,28 +249,21 @@ export default {
   }
 
   .window-bar {
-    display: none;
-  }
-
-  .window-bar:not(.window-bar--empty) {
     display: flex;
     border-radius: var(--radius-md);
     padding: 4px 6px;
   }
 
+  .window-bar--empty {
+    justify-content: center;
+  }
+
   .dialog-button {
     min-height: 30px;
   }
 
   .static-block {
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    width: 100%;
-    gap: 8px;
-    padding-top: 0;
-    border-top: 0;
-    font-size: 0.78rem;
-    overflow-x: auto;
+    display: none;
   }
 }
 </style>
diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
index fdd1e6f..ec6d8e1 100755
--- a/frontend/src/components/AppHeader.vue
+++ b/frontend/src/components/AppHeader.vue
@@ -265,12 +265,11 @@ export default {
 .app-header {
   position: relative;
   flex: 0 0 auto;
-  padding: 6px 14px;
-  background:
-    linear-gradient(180deg, rgba(255, 249, 240, 0.96) 0%, rgba(246, 236, 220, 0.98) 100%);
-  color: #2b1f14;
-  border-bottom: 1px solid rgba(93, 64, 55, 0.12);
-  box-shadow: 0 5px 14px rgba(93, 64, 55, 0.06);
+  padding: 8px var(--shell-inset);
+  background: #fffefa;
+  color: var(--color-text-primary);
+  border-bottom: 1px solid rgba(86, 120, 94, 0.18);
+  box-shadow: 0 3px 12px rgba(42, 68, 48, 0.045);
 }
 
 .app-header__inner {
@@ -293,11 +292,10 @@ export default {
   width: 40px;
   height: 40px;
   padding: 5px;
-  border-radius: 12px;
-  background:
-    linear-gradient(180deg, rgba(248, 162, 43, 0.18) 0%, rgba(255, 255, 255, 0.76) 100%);
-  border: 1px solid rgba(248, 162, 43, 0.22);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
+  border-radius: 4px;
+  background: var(--color-secondary-soft);
+  border: 1px solid rgba(61, 139, 87, 0.22);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
 }
 
 .logo > img {
@@ -314,14 +312,15 @@ export default {
 }
 
 .brand-copy strong {
-  font-size: 1rem;
+  font-size: 1.02rem;
   line-height: 1.1;
-  color: #3a2a1b;
+  color: #294535;
+  letter-spacing: 0.015em;
 }
 
 .brand-copy span {
   font-size: 0.74rem;
-  color: rgba(95, 75, 57, 0.78);
+  color: var(--color-text-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -369,7 +368,7 @@ export default {
   gap: 6px;
   margin: 0;
   font-size: 0.72rem;
-  color: rgba(95, 75, 57, 0.85);
+  color: var(--color-text-secondary);
 }
 
 .header-lang__label {
@@ -381,17 +380,17 @@ export default {
   min-width: 7.5rem;
   max-width: 11rem;
   padding: 4px 8px;
-  border-radius: 8px;
-  border: 1px solid rgba(93, 64, 55, 0.18);
-  background: rgba(255, 255, 255, 0.85);
-  color: #3a2a1b;
+  border-radius: 3px;
+  border: 1px solid var(--color-border);
+  background: #ffffff;
+  color: var(--color-text-primary);
   font-size: 0.72rem;
   font-weight: 600;
   cursor: pointer;
 }
 
 .header-lang__select:focus {
-  outline: 2px solid rgba(248, 162, 43, 0.45);
+  outline: 2px solid rgba(120, 195, 138, 0.8);
   outline-offset: 1px;
 }
 
@@ -407,11 +406,11 @@ export default {
   gap: 8px;
   min-height: 28px;
   padding: 0 10px;
-  border-radius: 999px;
+  border-radius: 3px;
   font-size: 0.72rem;
   font-weight: 700;
-  border: 1px solid rgba(93, 64, 55, 0.1);
-  background: rgba(255, 255, 255, 0.62);
+  border: 1px solid var(--color-border);
+  background: rgba(238, 247, 237, 0.7);
 }
 
 .status-dot {
@@ -438,23 +437,20 @@ export default {
 }
 
 .status-connected {
-  background-color: rgba(76, 175, 80, 0.12);
-  color: #245b2c;
+  background-color: rgba(120, 195, 138, 0.22);
+  color: #28643d;
 }
 
 .status-connecting {
-  background-color: rgba(255, 152, 0, 0.12);
-  color: #8b5e0d;
+  color: #7d5c21;
 }
 
 .status-disconnected {
-  background-color: rgba(244, 67, 54, 0.12);
-  color: #8f2c27;
+  color: #8f3d35;
 }
 
 .status-error {
-  background-color: rgba(244, 67, 54, 0.12);
-  color: #8f2c27;
+  color: #8f3d35;
 }
 
 @keyframes pulse {
@@ -465,12 +461,12 @@ export default {
 
 @media (max-width: 960px) {
   .app-header {
-    padding: 6px 10px;
+    padding: 6px var(--shell-inset);
   }
 
   .app-header__inner {
     gap: 10px;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
   }
 
   .header-ad {
@@ -499,13 +495,14 @@ export default {
   }
 
   .header-meta {
-    width: 100%;
-    justify-content: space-between;
-    flex-wrap: wrap;
+    width: auto;
+    margin-left: auto;
+    justify-content: flex-end;
+    flex-wrap: nowrap;
   }
 
   .header-meta__context {
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
   }
 
   .brand-copy span {
@@ -544,31 +541,27 @@ export default {
   }
 
   .header-meta {
-    width: 100%;
+    width: auto;
+    margin-left: 0;
     gap: 8px;
   }
 
   .header-lang {
-    width: 100%;
-    justify-content: space-between;
+    width: auto;
+    justify-content: flex-end;
   }
 
   .header-lang__select {
-    min-width: 8.5rem;
+    min-width: 6.4rem;
+    max-width: 7.2rem;
   }
 
   .connection-status {
-    width: 100%;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 8px;
+    display: none;
   }
 
-  .status-indicator {
-    min-height: 30px;
-    justify-content: center;
-    padding: 0 8px;
-    font-size: 0.68rem;
+  .header-lang__label {
+    display: none;
   }
 }
 </style>
diff --git a/frontend/src/components/AppNavigation.vue b/frontend/src/components/AppNavigation.vue
index cdd02e0..3e145ed 100755
--- a/frontend/src/components/AppNavigation.vue
+++ b/frontend/src/components/AppNavigation.vue
@@ -734,17 +734,14 @@ export default {
   max-width: none;
   margin: 0 auto;
   align-items: center;
-  gap: 10px;
-  padding: 6px 12px;
+  gap: 8px;
+  padding: 7px var(--shell-inset);
   flex-wrap: wrap;
   border-radius: 0;
-  background:
-    linear-gradient(180deg, rgba(244, 230, 213, 0.98) 0%, rgba(236, 216, 194, 0.99) 100%);
-  border-top: 1px solid rgba(93, 64, 55, 0.06);
-  border-bottom: 1px solid rgba(93, 64, 55, 0.18);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.5),
-    0 8px 18px rgba(71, 52, 35, 0.1);
+  background: #f2f8f0;
+  border-top: 1px solid rgba(86, 120, 94, 0.08);
+  border-bottom: 1px solid var(--color-border);
+  box-shadow: 0 5px 14px rgba(42, 68, 48, 0.035);
   color: var(--color-text-primary);
   z-index: 999;
 }
@@ -783,7 +780,7 @@ ul {
   padding: 0 12px;
   line-height: 1;
   cursor: pointer;
-  border-radius: var(--radius-md);
+  border-radius: 3px;
   border: 1px solid transparent;
   transition: background-color 0.25s, color 0.25s, transform 0.2s, border-color 0.25s, box-shadow 0.25s;
 }
@@ -799,9 +796,9 @@ ul {
 }
 
 .mainmenuitem:hover {
-  background-color: rgba(248, 162, 43, 0.16);
-  border-color: rgba(248, 162, 43, 0.2);
-  transform: translateY(-1px);
+  background-color: var(--color-primary-soft);
+  border-color: rgba(61, 139, 87, 0.22);
+  transform: none;
 }
 
 .mainmenuitem:hover > span {
@@ -809,8 +806,8 @@ ul {
 }
 
 .mainmenuitem--expanded {
-  background-color: rgba(248, 162, 43, 0.16);
-  border-color: rgba(248, 162, 43, 0.2);
+  background-color: var(--color-primary-soft);
+  border-color: rgba(61, 139, 87, 0.22);
 }
 
 .mainmenuitem--disabled,
@@ -821,14 +818,25 @@ ul {
 
 .mainmenuitem--disabled:hover {
   transform: none;
-  background-color: rgba(248, 162, 43, 0.1);
-  border-color: rgba(248, 162, 43, 0.15);
+  background-color: rgba(61, 139, 87, 0.07);
+  border-color: rgba(61, 139, 87, 0.14);
 }
 
 .mainmenuitem--active {
-  background: rgba(255, 250, 242, 0.92);
-  border-color: rgba(248, 162, 43, 0.34);
-  box-shadow: 0 8px 16px rgba(93, 64, 55, 0.09);
+  background: rgba(61, 139, 87, 0.06);
+  border-color: transparent;
+  box-shadow: none;
+  color: #225f38;
+}
+
+.mainmenuitem--active::after {
+  position: absolute;
+  right: 12px;
+  bottom: -8px;
+  left: 12px;
+  height: 2px;
+  background: var(--color-primary);
+  content: '';
 }
 
 .mainmenuitem__label {
@@ -838,7 +846,7 @@ ul {
 .mainmenuitem__caret {
   margin-left: 6px;
   font-size: 0.7rem;
-  color: rgba(95, 75, 57, 0.7);
+  color: var(--color-text-muted);
 }
 
 .menu-lock-badge {
@@ -864,11 +872,10 @@ a {
   padding-left: 10px;
   margin-left: auto;
   flex: 0 0 auto;
-  border-left: 1px solid rgba(93, 64, 55, 0.12);
+  border-left: 1px solid var(--color-border);
   position: relative;
   z-index: 3;
-  background:
-    linear-gradient(180deg, rgba(244, 230, 213, 0.98) 0%, rgba(236, 216, 194, 0.99) 100%);
+  background: #f2f8f0;
 }
 
 .account-menu {
@@ -880,8 +887,8 @@ a {
   padding: 0 8px;
   gap: 5px;
   border-radius: var(--radius-md);
-  border: 1px solid rgba(93, 64, 55, 0.15);
-  background: rgba(255, 252, 247, 0.82);
+  border: 1px solid var(--color-border);
+  background: #ffffff;
   color: var(--color-text-secondary);
   box-shadow: none;
   cursor: pointer;
@@ -889,8 +896,8 @@ a {
 
 .account-menu__trigger:hover {
   transform: none;
-  border-color: rgba(248, 162, 43, 0.32);
-  background: rgba(255, 250, 242, 0.92);
+  border-color: rgba(61, 139, 87, 0.34);
+  background: var(--color-primary-soft);
   box-shadow: none;
 }
 
@@ -905,7 +912,7 @@ a {
 
 .account-menu__caret {
   font-size: 0.64rem;
-  color: rgba(95, 75, 57, 0.72);
+  color: var(--color-text-muted);
 }
 
 .account-menu__content {
@@ -915,9 +922,9 @@ a {
   min-width: 150px;
   padding: 6px;
   border-radius: var(--radius-md);
-  border: 1px solid rgba(93, 64, 55, 0.16);
-  background: rgba(255, 252, 247, 0.99);
-  box-shadow: 0 12px 24px rgba(93, 64, 55, 0.16);
+  border: 1px solid var(--color-border);
+  background: #ffffff;
+  box-shadow: 0 12px 24px rgba(21, 37, 30, 0.12);
   z-index: 1200;
 }
 
@@ -937,7 +944,7 @@ a {
 
 .account-menu__item:hover {
   transform: none;
-  background: rgba(248, 162, 43, 0.14);
+  background: var(--color-primary-soft);
   color: var(--color-text-primary);
   box-shadow: none;
 }
@@ -951,7 +958,7 @@ a {
   height: 38px;
   border-radius: var(--radius-md);
   background-color: rgba(120, 195, 138, 0.12);
-  border: 1px solid rgba(93, 64, 55, 0.1);
+  border: 1px solid var(--color-border);
   box-shadow: none;
   min-height: 0;
   padding: 0;
@@ -962,14 +969,14 @@ a {
 .submenu1 {
   position: absolute;
   display: block;
-  border: 1px solid rgba(93, 64, 55, 0.12);
-  background: rgba(255, 252, 247, 0.99);
+  border: 1px solid var(--color-border);
+  background: #ffffff;
   left: 0;
   top: calc(100% + 10px);
   min-width: 240px;
   padding: 10px;
-  border-radius: var(--radius-lg);
-  box-shadow: 0 18px 30px rgba(93, 64, 55, 0.14);
+  border-radius: 4px;
+  box-shadow: 0 18px 30px rgba(21, 37, 30, 0.12);
   max-height: 0;
   overflow: visible;
   opacity: 0;
@@ -1003,7 +1010,7 @@ a {
   line-height: 1.1em;
   color: var(--color-text-secondary);
   position: relative;
-  border-radius: 14px;
+  border-radius: 3px;
 }
 
 .submenu-label-row {
@@ -1031,7 +1038,7 @@ a {
 
 .submenu1 > li:hover {
   color: var(--color-text-primary);
-  background-color: rgba(248, 162, 43, 0.12);
+  background-color: var(--color-primary-soft);
 }
 
 .menu-icon,
@@ -1057,14 +1064,14 @@ a {
 .submenu2 {
   position: absolute;
   display: block;
-  background: rgba(255, 252, 247, 0.98);
+  background: #ffffff;
   left: calc(100% + 8px);
   top: 0;
   min-width: 230px;
   padding: 8px;
-  border-radius: var(--radius-lg);
-  border: 1px solid rgba(71, 52, 35, 0.12);
-  box-shadow: 0 14px 24px rgba(93, 64, 55, 0.12);
+  border-radius: 4px;
+  border: 1px solid var(--color-border);
+  box-shadow: 0 14px 24px rgba(21, 37, 30, 0.12);
   max-height: 0;
   overflow: hidden;
   opacity: 0;
@@ -1101,14 +1108,14 @@ a {
 
 .submenu1__item--expanded {
   color: var(--color-text-primary);
-  background-color: rgba(248, 162, 43, 0.08);
+  background-color: rgba(61, 139, 87, 0.08);
 }
 
 .submenu2 > li {
   padding: 0.75em 0.9em;
   line-height: 1em;
   color: var(--color-text-secondary);
-  border-radius: 14px;
+  border-radius: 3px;
 }
 
 .submenu2 > li:hover {
@@ -1119,7 +1126,7 @@ a {
 .submenu1 > li:focus-visible,
 .submenu2 > li:focus-visible {
   color: var(--color-text-primary);
-  background-color: rgba(248, 162, 43, 0.12);
+  background-color: var(--color-primary-soft);
 }
 
 .subsubmenu {
@@ -1138,7 +1145,7 @@ a {
     padding: 0;
     align-items: stretch;
     gap: 0;
-    box-shadow: 0 8px 18px rgba(71, 52, 35, 0.12);
+    box-shadow: 0 8px 18px rgba(21, 37, 30, 0.1);
   }
 
   .mobile-nav-bar {
@@ -1153,9 +1160,9 @@ a {
   .mobile-nav-toggle {
     min-height: 38px;
     padding: 0 12px;
-    border-radius: 999px;
-    background: rgba(255, 250, 242, 0.94);
-    border: 1px solid rgba(248, 162, 43, 0.32);
+    border-radius: 3px;
+    background: #ffffff;
+    border: 1px solid rgba(61, 139, 87, 0.32);
     color: var(--color-text-primary);
     box-shadow: none;
     font-size: 0.84rem;
@@ -1232,7 +1239,7 @@ a {
     overflow-y: auto;
     overscroll-behavior: contain;
     padding: 6px 10px 10px;
-    border-top: 1px solid rgba(93, 64, 55, 0.1);
+    border-top: 1px solid var(--color-border);
   }
 
   .nav-primary > ul {
@@ -1247,8 +1254,8 @@ a {
     padding: 8px 10px 10px;
     margin-left: 0;
     border-left: 0;
-    border-top: 1px solid rgba(93, 64, 55, 0.1);
-    background: rgba(246, 236, 220, 0.99);
+    border-top: 1px solid var(--color-border);
+    background: #f2f8f0;
   }
 
   .mainmenuitem {
@@ -1256,11 +1263,17 @@ a {
     width: 100%;
     justify-content: flex-start;
     padding: 0 14px;
-    background: rgba(255, 252, 247, 0.68);
+    background: rgba(255, 255, 255, 0.72);
   }
 
   .mainmenuitem--active {
-    background: rgba(255, 250, 242, 0.98);
+    background: #ffffff;
+  }
+
+  .mainmenuitem--active::after {
+    right: 14px;
+    bottom: 3px;
+    left: 14px;
   }
 
   .submenu1,
diff --git a/frontend/src/components/AppSectionBar.vue b/frontend/src/components/AppSectionBar.vue
index 67d4d44..f5ecdc7 100755
--- a/frontend/src/components/AppSectionBar.vue
+++ b/frontend/src/components/AppSectionBar.vue
@@ -174,9 +174,10 @@ export default {
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  padding: 16px 18px;
+  padding: 14px 18px;
   margin-bottom: 16px;
-  background: linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(248, 240, 231, 0.94));
+  background: var(--color-surface);
+  border-left: 3px solid var(--color-secondary);
 }
 
 .app-section-bar__copy {
@@ -189,9 +190,9 @@ export default {
 .app-section-bar__eyebrow {
   display: inline-flex;
   padding: 4px 10px;
-  border-radius: var(--radius-pill);
+  border-radius: var(--radius-sm);
   background: var(--color-secondary-soft);
-  color: var(--color-text-secondary);
+  color: #28643d;
   font-size: 0.76rem;
   font-weight: 700;
   letter-spacing: 0.08em;
diff --git a/frontend/src/views/home/LoggedInView.vue b/frontend/src/views/home/LoggedInView.vue
index 2e10af1..cf8954d 100755
--- a/frontend/src/views/home/LoggedInView.vue
+++ b/frontend/src/views/home/LoggedInView.vue
@@ -387,9 +387,8 @@ export default {
   gap: 20px;
   padding: 26px;
   margin-bottom: 18px;
-  background:
-    radial-gradient(circle at top right, rgba(248, 162, 43, 0.18), transparent 28%),
-    linear-gradient(180deg, rgba(255, 251, 246, 0.96) 0%, rgba(250, 243, 233, 0.98) 100%);
+  background: var(--color-surface);
+  border-left: 3px solid var(--color-secondary);
 }
 
 .dashboard-hero__copy {
@@ -400,9 +399,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: 2px;
+  background: var(--color-secondary-soft);
+  color: #28643d;
   font-size: 0.75rem;
   font-weight: 700;
   text-transform: uppercase;
@@ -512,8 +511,7 @@ export default {
   padding: 20px;
   border-radius: var(--radius-lg);
   border: 1px solid var(--color-border);
-  background:
-    linear-gradient(180deg, rgba(255, 252, 247, 0.94) 0%, rgba(248, 241, 231, 0.96) 100%);
+  background: var(--color-surface);
   box-shadow: var(--shadow-soft);
 }
 
@@ -556,7 +554,7 @@ export default {
 }
 
 .dashboard-grid-cell.drop-target {
-  outline: 2px dashed rgba(248, 162, 43, 0.82);
+  outline: 2px dashed rgba(61, 139, 87, 0.72);
   outline-offset: 4px;
   border-radius: var(--radius-md);
 }
diff --git a/frontend/src/views/home/NoLoginView.vue b/frontend/src/views/home/NoLoginView.vue
index 85c4184..9864e32 100755
--- a/frontend/src/views/home/NoLoginView.vue
+++ b/frontend/src/views/home/NoLoginView.vue
@@ -261,10 +261,10 @@ export default {
     flex: 0 0 clamp(180px, 22%, 280px);
     justify-content: center;
     align-items: stretch;
-    background: linear-gradient(180deg, #fff5e8 0%, #fce7ca 100%);
-    border: 1px solid rgba(248, 162, 43, 0.16);
+    background: #eaf0eb;
+    border: 1px solid var(--color-border);
     border-radius: var(--radius-lg);
-    box-shadow: 0 10px 24px rgba(93, 64, 55, 0.08);
+    box-shadow: 0 10px 24px rgba(21, 37, 30, 0.06);
     overflow: hidden;
     align-self: center;
     height: clamp(320px, 68vh, 560px);
@@ -287,9 +287,8 @@ export default {
     height: calc(40% - 0.5rem);
     max-height: calc(40% - 0.5rem);
     min-height: 0;
-    background:
-        linear-gradient(180deg, rgba(255, 251, 246, 0.96) 0%, rgba(248, 240, 231, 0.96) 100%);
-    color: #5D4037;
+    background: var(--color-surface);
+    color: var(--color-text-primary);
     display: flex;
     flex-direction: column;
     overflow: auto;
@@ -321,9 +320,9 @@ export default {
     display: inline-block;
     margin-bottom: 0.7rem;
     padding: 0.3rem 0.65rem;
-    border-radius: 999px;
-    background: rgba(248, 162, 43, 0.12);
-    color: #8a5411;
+    border-radius: 2px;
+    background: var(--color-secondary-soft);
+    color: #28643d;
     font-size: 0.74rem;
     font-weight: 700;
     letter-spacing: 0.06em;
@@ -340,12 +339,12 @@ export default {
     width: 100%;
 }
 
-    .story-highlight {
+.story-highlight {
     padding: 1rem 1.1rem;
     margin: 0.8rem 0 1rem;
     border-radius: var(--radius-lg);
-    background: rgba(248, 162, 43, 0.08);
-    border: 1px solid rgba(248, 162, 43, 0.12);
+    background: var(--color-primary-soft);
+    border: 1px solid rgba(61, 139, 87, 0.18);
 }
 
 /* Collapsed story panel to save vertical space while keeping content in DOM for SEO */
@@ -358,7 +357,7 @@ export default {
     margin-top: 0.6rem;
     background: transparent;
     border: none;
-    color: #8a5411;
+    color: var(--color-primary);
     font-weight: 700;
     cursor: pointer;
     padding: 0.2rem 0.4rem;
@@ -423,8 +422,8 @@ export default {
 .oauth-section {
     padding: 0.9rem 1rem;
     border-radius: var(--radius-lg);
-    background: linear-gradient(180deg, rgba(255, 248, 238, 0.95), rgba(255, 243, 229, 0.95));
-    border: 1px solid rgba(248, 162, 43, 0.14);
+    background: var(--color-bg-elevated);
+    border: 1px solid var(--color-border);
     display: grid;
     gap: 0.8rem;
 }
@@ -448,13 +447,13 @@ export default {
 
 .oauth-provider-button {
     padding: 0.72rem 0.9rem;
-    border-radius: 14px;
-    border: 1px solid rgba(93, 64, 55, 0.12);
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 242, 236, 0.94));
-    color: #4b342e;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--color-border);
+    background: #ffffff;
+    color: var(--color-text-primary);
     font-weight: 700;
     text-align: left;
-    box-shadow: 0 6px 16px rgba(93, 64, 55, 0.06);
+    box-shadow: 0 6px 16px rgba(21, 37, 30, 0.04);
 }
 
 .oauth-provider-button:hover:not(:disabled) {
@@ -475,7 +474,7 @@ export default {
 }
 
 .oauth-provider-button--keycloak {
-    border-left: 4px solid #d67f2f;
+    border-left: 4px solid var(--color-primary);
 }
 
 .oauth-provider-button--ory {
@@ -541,7 +540,7 @@ export default {
     margin: 0;
     padding: 0;
     flex: 0 0 16px;
-    accent-color: var(--color-primary-orange);
+    accent-color: var(--color-primary);
     box-shadow: none;
 }
 
@@ -549,9 +548,9 @@ export default {
     max-width: 1000px;
     margin: 24px auto 0 auto;
     padding: 0 16px 40px 16px;
-    color: #5D4037;
-    background-color: #FFF4F0;
-    border: 1px solid rgba(0, 0, 0, 0.06);
+    color: var(--color-text-primary);
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-border);
     border-radius: 4px;
 }
 
@@ -563,7 +562,7 @@ export default {
 .seo-content h2 {
     font-size: 20px;
     margin: 18px 0 6px 0;
-    color: #444;
+    color: var(--color-text-primary);
 }
 
 .seo-content p {
@@ -580,8 +579,8 @@ export default {
     max-height: 200px;
     overflow: auto;
     padding-right: 8px;
-    background-color: #fdf1db;
-    border: 1px solid rgba(0, 0, 0, 0.05);
+    background-color: var(--color-bg-muted);
+    border: 1px solid var(--color-border);
     border-radius: 4px;
     margin: 12px 0;
 }