Add global page and surface CSS patterns

Introduce reusable global CSS modules and apply them across routes to centralize layout/surface patterns. Added GUI/src/styles/global/page-layouts.css and GUI/src/styles/global/surface-patterns.css and imported both in GUI/src/main.ts. Updated Layout.vue, Home.vue, 404NotFound.vue, Impressum.vue and authentication/Login.vue to use hoard-* utility classes (hoard-page, hoard-shell-grid, hoard-kicker, hoard-action-row, hoard-panel-gradient, etc.) and removed duplicated scoped styles. Also updated codexInfo.md to document the new CSS modules and provide usage guidance. This reduces per-page CSS duplication and standardizes gradients, spacing and page-shell behavior.

GUI/src/Layout.vue

@@ -205,7 +205,7 @@ watch(
       :elevation="display.mobile.value ? 6 : 0"
     >
       <div class="drawer-top">
-        <p class="drawer-kicker">Navigation</p>
+        <p class="drawer-kicker hoard-kicker hoard-kicker--xs">Navigation</p>
       </div>
 
       <v-list nav density="comfortable" class="px-1">
@@ -344,14 +344,6 @@ watch(
   border-bottom: 1px solid color-mix(in srgb, var(--color-border) 85%, white 15%);
 }
 
-.drawer-kicker {
-  color: var(--color-primary-700);
-  font-size: var(--font-size-xs);
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
 .drawer-title {
   margin: var(--space-2) 0 var(--space-1);
   color: var(--color-text);