Replace remaining hardcoded hex colors with color tokens (CR-27)

Map leftover component hex values onto the existing color scale, and leave third-party share brands and the Avatar white-alpha border documented as intentional exceptions.

app/components/modals/Login/LoginForm.tsx

@@ -149,13 +149,7 @@ export default function LoginForm({
   return (
     <div className="flex flex-col gap-6 pt-2">
       <div className="flex flex-col gap-3">
-        <div
-          className={`relative flex h-12 w-12 shrink-0 items-center justify-center rounded-full ${
-            isSaveProgress
-              ? "bg-[#fefcc9]"
-              : "bg-[var(--color-surface-inverse-brand-primary)]"
-          }`}
-        >
+        <div className="relative flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-[var(--color-surface-inverse-brand-primary)]">
           <MailIconInline />
         </div>
         <ContentLockup

app/components/modals/Share/Share.view.tsx

@@ -106,6 +106,7 @@ export const ShareView = memo(function ShareView({
       </div>
 
       <div className="scrollbar-design flex min-h-0 flex-1 flex-col overflow-x-clip overflow-y-auto px-[24px] pb-6 pt-0">
+        {/* Channel circle hexes are third-party brand colors (copy/link, Signal, Slack, Discord), not DS tokens. */}
         <div className="flex flex-wrap gap-4">
           <ShareChannelTile
             label={copyLinkLabel}