fix(web): replace invalid alpha-append tints with color-mix

packages/web/src/features/admin/DashboardPage.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useAuth } from '../../lib/AuthContext.js';
 import { getJson } from '../../lib/api-client.js';
+import { tint } from '../../lib/color.js';
 
 interface CountState {
   clients: number | null;
@@ -307,7 +308,7 @@ export function DashboardPage() {
             >
               <div style={{
                 width: '40px', height: '40px', borderRadius: '10px',
-                backgroundColor: `${s.tint}18`,
+                backgroundColor: tint(s.tint, 9),
                 color: s.tint,
                 display: 'grid', placeItems: 'center',
                 marginBottom: '1rem',

packages/web/src/features/evv/VisitReviewPage.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { getJson, postJson } from '../../lib/api-client.js';
 import { EmptyState, LoadingSkeleton, ErrorRetry } from '../../components/state/index.js';
+import { tint } from '../../lib/color.js';
 
 interface EvvVisit {
   id: string;
@@ -267,8 +268,8 @@ export function VisitReviewPage() {
                       onClick={() => setExpandedFraud(expanded ? null : visit.id)}
                       title={`Fraud score ${fraud.score}/100 — ${fraud.triggeredCount} signal${fraud.triggeredCount === 1 ? '' : 's'}. Click for details.`}
                       style={{
-                        cursor: 'pointer', border: `1px solid ${RISK_COLOR[fraud.riskLevel]}40`,
-                        background: `${RISK_COLOR[fraud.riskLevel]}14`, color: RISK_COLOR[fraud.riskLevel],
+                        cursor: 'pointer', border: `1px solid ${tint(RISK_COLOR[fraud.riskLevel], 25)}`,
+                        background: tint(RISK_COLOR[fraud.riskLevel], 8), color: RISK_COLOR[fraud.riskLevel],
                         borderRadius: '999px', padding: '0.18rem 0.6rem', fontSize: '0.72rem', fontWeight: 800,
                         display: 'inline-flex', alignItems: 'center', gap: '0.35rem',
                       }}

packages/web/src/features/learning/InsightsPanel.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState, type ReactElement, type ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 import { getJson } from '../../lib/api-client.js';
+import { tint } from '../../lib/color.js';
 
 type InsightSeverity = 'critical' | 'warning' | 'info';
 
@@ -234,7 +235,7 @@ function chipStyle(color: string): React.CSSProperties {
     fontSize: '0.8rem',
     borderRadius: '12px',
     textDecoration: 'none',
-    border: `1px solid ${color}33`,
+    border: `1px solid ${tint(color, 20)}`,
   };
 }
 

packages/web/src/features/staff/CaregiverActivityPage.tsx

@@ -3,6 +3,7 @@ import { Link, useParams } from 'react-router-dom';
 import { getJson } from '../../lib/api-client.js';
 import { EmptyState, ErrorRetry, LoadingSkeleton } from '../../components/state/index.js';
 import { Icon } from '../../components/index.js';
+import { tint } from '../../lib/color.js';
 
 // ── Types ───────────────────────────────────────────────────────────────────
 interface Profile {
@@ -84,7 +85,7 @@ function StatusBadge({ status, inProgress }: { status: VisitStatus; inProgress:
   return (
     <span style={{
       display: 'inline-block', padding: '0.15em 0.6em', borderRadius: 999, fontSize: '0.75rem',
-      fontWeight: 700, background: `${color}18`, color, textTransform: 'capitalize', whiteSpace: 'nowrap',
+      fontWeight: 700, background: tint(color, 9), color, textTransform: 'capitalize', whiteSpace: 'nowrap',
     }}>{label}</span>
   );
 }
@@ -184,7 +185,7 @@ export function CaregiverActivityPage() {
         <div style={{ marginTop: '0.75rem', display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
           {/* Profile header */}
           <div style={{ display: 'flex', gap: '1rem', alignItems: 'center', background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 14, padding: '1.1rem 1.25rem', flexWrap: 'wrap' }}>
-            <div style={{ width: 60, height: 60, borderRadius: '50%', background: `${TEAL}14`, color: TEAL, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: '1.4rem', flexShrink: 0 }}>{initials}</div>
+            <div style={{ width: 60, height: 60, borderRadius: '50%', background: tint(TEAL, 8), color: TEAL, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: '1.4rem', flexShrink: 0 }}>{initials}</div>
             <div style={{ flex: 1, minWidth: 200 }}>
               <div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', flexWrap: 'wrap' }}>
                 <h1 style={{ margin: 0, fontSize: '1.4rem' }}>{name}</h1>

packages/web/src/features/staff/MileageReviewPage.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { getJson, patchJson } from '../../lib/api-client.js';
 import { EmptyState, LoadingSkeleton, ErrorRetry } from '../../components/state/index.js';
+import { tint } from '../../lib/color.js';
 
 /**
  * Mileage review.
@@ -151,7 +152,7 @@ export function MileageReviewPage() {
                   </div>
                   <span style={{
                     padding: '0.15em 0.6em', borderRadius: 999, fontSize: '0.75rem', fontWeight: 600,
-                    background: `${STATUS_COLOR[entry.status]}18`, color: STATUS_COLOR[entry.status],
+                    background: tint(STATUS_COLOR[entry.status], 9), color: STATUS_COLOR[entry.status],
                   }}>
                     {STATUS_TABS.find((t) => t.key === entry.status)?.label ?? entry.status}
                   </span>

packages/web/src/features/staff/StaffPage.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { getJson, postJson, patchJson, deleteJson } from '../../lib/api-client.js';
 import { EmptyState, LoadingSkeleton, ErrorRetry } from '../../components/state/index.js';
+import { tint } from '../../lib/color.js';
 
 interface StaffMember {
   id: string;
@@ -104,7 +105,7 @@ function RoleBadge({ role }: { role: string }) {
     <span style={{
       display: 'inline-block', padding: '0.15em 0.55em', borderRadius: '999px',
       fontSize: '0.75rem', fontWeight: 600,
-      background: `${color}18`, color, textTransform: 'capitalize',
+      background: tint(color, 9), color, textTransform: 'capitalize',
     }}>{role}</span>
   );
 }

packages/web/src/features/staff/TimeOffReviewPage.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { getJson, patchJson } from '../../lib/api-client.js';
 import { EmptyState, LoadingSkeleton, ErrorRetry } from '../../components/state/index.js';
+import { tint } from '../../lib/color.js';
 
 /**
  * Time off review.
@@ -147,7 +148,7 @@ export function TimeOffReviewPage() {
                 </div>
                 <span style={{
                   padding: '0.15em 0.6em', borderRadius: 999, fontSize: '0.75rem', fontWeight: 600,
-                  background: `${STATUS_COLOR[req.status]}18`, color: STATUS_COLOR[req.status],
+                  background: tint(STATUS_COLOR[req.status], 9), color: STATUS_COLOR[req.status],
                 }}>
                   {TABS.find((t) => t.key === req.status)?.label ?? req.status}
                 </span>

packages/web/src/features/superadmin/SuperAdminPage.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { startRegistration, startAuthentication, browserSupportsWebAuthn } from '@simplewebauthn/browser';
 import { BrandLogo } from '../../components/brand/BrandLogo.js';
+import { tint } from '../../lib/color.js';
 
 /**
  * Hidden platform super-admin command center for Durga Ghimeray (Founder & CEO).
@@ -441,14 +442,14 @@ export function SuperAdminPage() {
         </header>
 
         {pending.length > 0 && (
-          <div style={{ background: C.amberSoft, border: `1px solid ${C.amber}33`, borderRadius: 10, padding: '0.75rem 1.05rem', marginBottom: '1.4rem', display: 'flex', alignItems: 'center', gap: '0.65rem', fontSize: '0.88rem' }}>
+          <div style={{ background: C.amberSoft, border: `1px solid ${tint(C.amber, 20)}`, borderRadius: 10, padding: '0.75rem 1.05rem', marginBottom: '1.4rem', display: 'flex', alignItems: 'center', gap: '0.65rem', fontSize: '0.88rem' }}>
             <span style={{ color: C.amber, display: 'flex' }}><Icon name="alert" size={17} /></span>
             <span style={{ color: C.ink, fontWeight: 600 }}>{pending.length} agenc{pending.length === 1 ? 'y' : 'ies'} awaiting your review</span>
-            <button type="button" onClick={() => setTab('agencies')} style={{ ...btn('ghost'), marginLeft: 'auto', borderColor: `${C.amber}55`, color: C.amber }}>Review</button>
+            <button type="button" onClick={() => setTab('agencies')} style={{ ...btn('ghost'), marginLeft: 'auto', borderColor: tint(C.amber, 33), color: C.amber }}>Review</button>
           </div>
         )}
 
-        {loadErr && <div role="alert" style={{ color: C.red, background: C.redSoft, border: `1px solid ${C.red}22`, borderRadius: 10, padding: '0.7rem 1rem', marginBottom: '1rem' }}>{loadErr}</div>}
+        {loadErr && <div role="alert" style={{ color: C.red, background: C.redSoft, border: `1px solid ${tint(C.red, 13)}`, borderRadius: 10, padding: '0.7rem 1rem', marginBottom: '1rem' }}>{loadErr}</div>}
 
         <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(208px, 1fr))', gap: '0.85rem', marginBottom: '1.6rem' }}>
           <Kpi label="Agencies" icon="agencies" value={String(stats?.agencies.total ?? '-')} sub={`${stats?.agencies.approved ?? 0} active · ${stats?.agencies.pending ?? 0} pending`} subTone={(stats?.agencies.pending ?? 0) > 0 ? C.amber : undefined} />

packages/web/src/lib/color.ts

@@ -0,0 +1,18 @@
+/**
+ * Translucent variants of a CSS color that may be a `var(--token)` reference
+ * rather than a literal hex.
+ *
+ * The obvious-looking `` `${color}18` `` , append a hex alpha byte , only works
+ * when `color` is a 6-digit hex literal. Every color in this app is a
+ * `var(--color-*)` token, so that idiom produced the literal string
+ * `"var(--color-accent)18"`: an invalid declaration the browser drops on the
+ * floor. The affected chips lost their background entirely and their
+ * brand-colored text landed on whatever surface was underneath, which on a
+ * `<button>` was the brand gradient , brand-on-brand, unreadable.
+ *
+ * `color-mix` composes correctly against a custom property, so it is the only
+ * safe way to tint a token. scripts/css-contract-scan.ts bans the old idiom.
+ */
+export function tint(color: string, percent: number): string {
+  return `color-mix(in srgb, ${color} ${percent}%, transparent)`;
+}