fix(styling): use correct inverse text color tokens (#3125)

### 🎯 Goal

Fix broken text colors on inverse-themed surfaces (notifications,
gallery overlays, inverse badges). These components rendered with nearly
invisible text because they referenced undefined CSS variables.

### 🛠 Implementation details

The Figma-generated theme tokens renamed `--text-inverse` →
`--text-on-inverse` and `--badge-text-inverse` →
`--badge-text-on-inverse`, but three SCSS files still referenced the old
names. Since the old variables are undefined in the compiled CSS, the
`color` property fell back to the inherited value (`--text-primary`),
producing dark-on-dark (light mode) or light-on-light (dark mode) text.

**Files changed:**
- **`Notification.scss`** — notification toast text + commented-out
severity variants
- **`ModalGallery.scss`** — load-failed indicator color + "+N more"
overlay text
- **`Badge.scss`** — inverse badge variant text color

The correctly named tokens (`--text-on-inverse`,
`--badge-text-on-inverse`) are already defined in both `light.scss`
(#ffffff) and `dark.scss` (#000000).

### 🎨 UI Changes

Notification toasts, gallery overlays with "+N more" count, image
load-failed indicators, and inverse badges now have legible text on
their inverse backgrounds in both light and dark mode.

Author: oliverlaz

src/components/Attachment/styling/ModalGallery.scss

@@ -2,7 +2,7 @@
 
 .str-chat__message {
   --str-chat__modal-gallery-load-failed-indicator-background: var(--accent-error);
-  --str-chat__modal-gallery-load-failed-indicator-color: var(--text-inverse);
+  --str-chat__modal-gallery-load-failed-indicator-color: var(--text-on-inverse);
   --str-chat__modal-gallery-loading-background: var(--chat-bg);
   --str-chat__modal-gallery-loading-base: var(--skeleton-loading-base);
   --str-chat__modal-gallery-loading-highlight: var(--skeleton-loading-highlight);
@@ -64,7 +64,7 @@
         cursor: zoom-in;
         // CDN resize requires max-width to be present on this element
         max-width: $max-width;
-        color: var(--text-inverse);
+        color: var(--text-on-inverse);
         border: none;
         font-size: var(--typography-font-size-2xl);
         font-weight: var(--typography-font-weight-medium);

src/components/Badge/styling/Badge.scss

@@ -38,7 +38,7 @@
 
 .str-chat__badge--variant-inverse {
   background: var(--badge-bg-inverse);
-  color: var(--badge-text-inverse);
+  color: var(--badge-text-on-inverse);
   border-color: var(--badge-border);
 }
 

src/components/Notifications/styling/Notification.scss

@@ -13,7 +13,7 @@
     0 0 0 1px rgba(0, 0, 0, 0.05),
     0 4px 8px 0 rgba(0, 0, 0, 0.14),
     0 12px 24px 0 rgba(0, 0, 0, 0.1);
-  color: var(--str-chat__notification-color, var(--text-inverse));
+  color: var(--str-chat__notification-color, var(--text-on-inverse));
 
   .str-chat__notification-content {
     align-items: flex-start;
@@ -94,22 +94,22 @@
 //// Severity overrides: allow themes to keep colored variants; defaults match Figma (inverse).
 //.str-chat__notification--success {
 //  background: var(--str-chat-success-background, var(--background-core-inverse));
-//  color: var(--str-chat-success-color, var(--text-inverse));
+//  color: var(--str-chat-success-color, var(--text-on-inverse));
 //}
 //
 //.str-chat__notification--error {
 //  background: var(--str-chat-error-background, var(--background-core-inverse));
-//  color: var(--str-chat-error-color, var(--text-inverse));
+//  color: var(--str-chat-error-color, var(--text-on-inverse));
 //}
 //
 //.str-chat__notification--warning {
 //  background: var(--str-chat-warning-background, var(--background-core-inverse));
-//  color: var(--str-chat-warning-color, var(--text-inverse));
+//  color: var(--str-chat-warning-color, var(--text-on-inverse));
 //}
 //
 //.str-chat__notification--info {
 //  background: var(--str-chat-info-background, var(--background-core-inverse));
-//  color: var(--str-chat-info-color, var(--text-inverse));
+//  color: var(--str-chat-info-color, var(--text-on-inverse));
 //}
 
 // Loading state: spin the refresh icon