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/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);
 }