Fix button inconsistencies and macOS layout shifts

This commit fixes layout shifts experienced in macOS Safari when
hovering over top menu items. Instead of making text bold — which was
causing layout shifts — the hover effect now changes the text color.
This ensures a consistent UI across different browsers and platforms.

Additionally, this commit fixes the styling of the privacy button
located in the bottom right corner. Previously styled as an `<a>`
element, it is now correctly represented as a `<button>`.

Furthermore, the commit enhances HTML conformity and accessibility by
correctly using `<button>` and `<a>` tags instead of relying on click
interactions on `<span>` elements.

This commit introduces `FlatButton` Vue component and a new
`flat-button` mixin. These centralize button usage and link styles,
aligning the hover/touch reactions of buttons across the application,
thereby creating a more consistent user interface.

src/presentation/assets/styles/_colors.scss

@@ -30,7 +30,6 @@ $color-on-surface           : #4d5156;
 // Background | Appears behind scrollable content.
 $color-background           : #e6ecf4;
 
-
 /*
     Application-specific colors:
     These are tailored to the specific needs of the application and derived from the above theme colors.
@@ -38,3 +37,4 @@ $color-background           : #e6ecf4;
     This approach maintains a cohesive look and feel and simplifies theme adjustments.
 */
 $color-scripts-bg: $color-primary-darker;
+$color-highlight: $color-primary;

src/presentation/assets/styles/_globals.scss

@@ -11,14 +11,10 @@
     box-sizing: border-box;
 }
 
-$globals-color-hover: $color-primary;
 a {
-    color:inherit;
-    text-decoration: underline;
+    color: inherit;
     cursor: pointer;
-    @include hover-or-touch {
-        color: $globals-color-hover;
-    }
+    @include flat-button($disabled: false);
 }
 
 body {

src/presentation/assets/styles/_mixins.scss

@@ -1,3 +1,5 @@
+@use "@/presentation/assets/styles/colors" as *;
+
 @mixin hover-or-touch($selector-suffix: '', $selector-prefix: '&') {
   @media (hover: hover) {
     /*
@@ -65,3 +67,47 @@
   padding: 0;
   list-style: none;
 }
+
+@mixin reset-button {
+  margin: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  font: unset;
+  border: unset;
+  background: unset;
+  align-items: unset;
+  text-align: unset;
+  text-shadow: unset;
+  text-rendering: unset;
+  color: inherit;
+  writing-mode: unset;
+  letter-spacing: unset;
+  word-spacing: unset;
+  line-height: unset;
+  text-transform: unset;
+  text-indent: unset;
+  appearance: unset;
+  cursor: unset;
+}
+
+@mixin flat-button($disabled: false) {
+  @include reset-button;
+
+  @if $disabled {
+    color: $color-primary-light;
+  } @else {
+    color: inherit;
+    @include clickable;
+    @include hover-or-touch {
+      text-decoration: underline;
+      color: $color-highlight;
+      /*
+        Using color change and underlining and as hover cues instead of bold text,
+        due to inconsistent bold rendering in macOS browsers:
+          - Safari: Renders bold, causes layout shift.
+          - Firefox: Renders bold correctly, no layout shift.
+          - Chromium-based browsers (including Electron app): Do not render bold, no layout shift.
+      */
+    }
+  }
+}