ligth theme design fix

src/shared/utils/accent.ts

@@ -0,0 +1,37 @@
+/**
+ * The two-accent brand system, expressed as class names.
+ *
+ * There are exactly two non-semantic hues in this product — warm (Loyaly
+ * yellow) and cool (purple) — and their values live in globals.css as
+ * `--color-brand-*`. This file is the only place that turns one into markup,
+ * so "which utility do I use for a warm icon?" has a single answer and a
+ * feature file never writes `text-brand-warm-ink` by hand.
+ *
+ * Assignment is a property of the DATA, not of the position in a grid. Each
+ * activity carries its own accent from the API, so the same activity is the
+ * same colour on the dashboard, on the activity page and inside a campaign
+ * row — and a grid that gains a row does not repaint itself.
+ *
+ * `ink` is the readable slot (icons, text); `soft` is a tint for an icon chip
+ * only. Nothing here paints a card background: the cards stay white.
+ */
+
+export type BrandAccent = 'warm' | 'cool';
+
+export const ACCENT: Record<
+  BrandAccent,
+  {ink: string; soft: string; solid: string; chip: string}
+> = {
+  warm: {
+    ink: 'text-brand-warm-ink',
+    soft: 'bg-brand-warm-soft',
+    solid: 'bg-brand-warm',
+    chip: 'bg-brand-warm-soft text-brand-warm-ink',
+  },
+  cool: {
+    ink: 'text-brand-cool-ink',
+    soft: 'bg-brand-cool-soft',
+    solid: 'bg-brand-cool',
+    chip: 'bg-brand-cool-soft text-brand-cool-ink',
+  },
+};