From ac85934b53e2764ecad81290462b1b2e9ae83a37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=ABl=20Poyet?= <joel.poyet@novaloop.ch>
Date: Fri, 20 Feb 2026 11:17:03 +0100
Subject: [PATCH] feat(branding): apply HealthChat color scheme and font

---
 apps/web/res/themes/light/css/_light.pcss | 33 ++++++++++++-----------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/apps/web/res/themes/light/css/_light.pcss b/apps/web/res/themes/light/css/_light.pcss
index 3bd803c53e..c47ca70bba 100644
--- a/apps/web/res/themes/light/css/_light.pcss
+++ b/apps/web/res/themes/light/css/_light.pcss
@@ -11,6 +11,7 @@
    digits in flowed text to stand out.
    TODO: Consider putting all emoji fonts to the end rather than the front. */
 $font-family:
+    "Century Gothic", "Futura", "Trebuchet MS",
     "Inter", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif,
     "Noto Color Emoji";
 
@@ -59,20 +60,20 @@ $username-variant6-color: var(--cpd-color-text-decorative-6);
  * To use under very rare circumstances, always prefer the semantics defined
  * in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs
  */
-$accent-100: var(--cpd-color-green-100);
-$accent-200: var(--cpd-color-green-200);
-$accent-300: var(--cpd-color-green-300);
-$accent-400: var(--cpd-color-green-400);
-$accent-500: var(--cpd-color-green-500);
-$accent-600: var(--cpd-color-green-600);
-$accent-700: var(--cpd-color-green-700);
-$accent-800: var(--cpd-color-green-800);
-$accent-900: var(--cpd-color-green-900);
-$accent-1000: var(--cpd-color-green-1000);
-$accent-1100: var(--cpd-color-green-1100);
-$accent-1200: var(--cpd-color-green-1200);
-$accent-1300: var(--cpd-color-green-1300);
-$accent-1400: var(--cpd-color-green-1400);
+$accent-100: var(--cpd-color-blue-100);
+$accent-200: var(--cpd-color-blue-200);
+$accent-300: var(--cpd-color-blue-300);
+$accent-400: var(--cpd-color-blue-400);
+$accent-500: var(--cpd-color-blue-500);
+$accent-600: var(--cpd-color-blue-600);
+$accent-700: var(--cpd-color-blue-700);
+$accent-800: var(--cpd-color-blue-800);
+$accent-900: var(--cpd-color-blue-900);
+$accent-1000: var(--cpd-color-blue-1000);
+$accent-1100: var(--cpd-color-blue-1100);
+$accent-1200: var(--cpd-color-blue-1200);
+$accent-1300: var(--cpd-color-blue-1300);
+$accent-1400: var(--cpd-color-blue-1400);
 
 /* Reused Figma non-compound colors */
 /* ******************** */
@@ -110,7 +111,7 @@ $info-plinth-bg-color: #f7f7f7;
 $event-selected-color: var(--cpd-color-bg-subtle-secondary);
 $topleftmenu-color: #212121;
 $roomtopic-color: #9e9e9e;
-$spacePanel-bg-color: rgba(232, 232, 232, 0.77);
+$spacePanel-bg-color: #12325c;
 $panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1);
 $h3-color: #3d3b39;
 $event-highlight-bg-color: $yellow-background;
@@ -279,7 +280,7 @@ $voice-record-icon-color: $tertiary-content;
 
 /* Bubble tiles */
 /* ******************** */
-$eventbubble-self-bg: var(--cpd-color-green-300);
+$eventbubble-self-bg: var(--cpd-color-blue-300);
 $eventbubble-others-bg: var(--cpd-color-gray-300);
 $eventbubble-bg-hover: var(--cpd-color-bg-subtle-secondary);
 /* ******************** */