feat: centralize frontend branding

frontend/src/layouts/main/AppSidebar.vue

@@ -8,6 +8,8 @@
     import { getNotificationRoute } from '@/features/notifications/notificationRoutes.js';
     import { useContentItemsStore } from '@/features/content/stores/contentItemsStore.js';
     import { useCampaignsStore } from '@/features/campaigns/stores/campaignsStore.js';
+    import { branding } from '@/branding/branding.js';
+    import BrandMark from '@/components/branding/BrandMark.vue';
     import SidebarUserMenu from './SidebarUserMenu.vue';
     import {
         mdiBellOutline,
@@ -253,14 +255,14 @@
                 :class="{ 'brand-link-collapsed': !isExpanded }"
                 to="/"
             >
-                <span class="brand-mark">S</span>
+                <BrandMark class="brand-mark" />
                 <div
                     v-if="isExpanded"
                     class="brand-copy"
                 >
                     <div class="brand-heading">
                         <span class="brand-name-wrap">
-                            <span class="brand-name">Socialize</span>
+                            <span class="brand-name">{{ branding.productName }}</span>
                             <span
                                 class="brand-stage-badge"
                                 :aria-label="t('nav.brandStageLabel')"
@@ -664,9 +666,7 @@
     }
 
     .brand-mark {
-        @apply flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-[1.1rem] text-xl font-black;
-        background: var(--socialize-brand-gradient);
-        color: #fffaf2;
+        @apply h-11 w-11 flex-shrink-0 rounded-[1.1rem];
     }
 
     .brand-name-wrap {
@@ -675,7 +675,7 @@
 
     .brand-name {
         @apply min-w-0 text-lg font-black uppercase tracking-[0.18em];
-        color: #172033;
+        color: var(--h-primary);
         line-height: 2.75rem;
     }