refactor(theme): normalize inline rgba values to infinite-night/* Tailwind tokens

Replace ~50 instances of text-[rgba(7,16,55,0.XX)] / border-[rgba(...)]
with text-infinite-night/55, /40, /20, /80 using Tailwind's opacity modifier
syntax. Also fix hub card "Import →" hover states: light:group-hover:bg-slate-300
(cool grey) → light:group-hover:bg-[#E5DFC9] (warm beige, matches palette).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: codex

frontend/src/components/Modals/Password/MultiUserAuth.jsx

@@ -41,7 +41,7 @@ const RecoveryForm = ({ onSubmit, setShowRecoveryForm }) => {
               {t("login.password-reset.title")}
             </h3>
           </div>
-          <p className="text-doctor/55 light:text-[rgba(7,16,55,0.55)] text-sm text-center">
+          <p className="text-doctor/55 light:text-infinite-night/55 text-sm text-center">
             {t("login.password-reset.description")}
           </p>
         </div>
@@ -55,7 +55,7 @@ const RecoveryForm = ({ onSubmit, setShowRecoveryForm }) => {
             <input
               name="username"
               type="text"
-              className="border-none bg-zinc-800 light:bg-divine-pleasure text-zinc-200 light:text-[rgba(7,16,55,0.55)] text-sm rounded-lg p-2.5 w-[300px] h-[34px] focus:outline-none focus:ring-1 focus:ring-sky-300"
+              className="border-none bg-zinc-800 light:bg-divine-pleasure text-zinc-200 light:text-infinite-night/55 text-sm rounded-lg p-2.5 w-[300px] h-[34px] focus:outline-none focus:ring-1 focus:ring-sky-300"
               value={username}
               onChange={(e) => setUsername(e.target.value)}
               required
@@ -71,7 +71,7 @@ const RecoveryForm = ({ onSubmit, setShowRecoveryForm }) => {
                 key={index}
                 type="text"
                 name={`recoveryCode${index + 1}`}
-                className="border-none bg-zinc-800 light:bg-divine-pleasure text-zinc-200 light:text-[rgba(7,16,55,0.55)] text-sm rounded-lg p-2.5 w-[300px] h-[34px] focus:outline-none focus:ring-1 focus:ring-sky-300"
+                className="border-none bg-zinc-800 light:bg-divine-pleasure text-zinc-200 light:text-infinite-night/55 text-sm rounded-lg p-2.5 w-[300px] h-[34px] focus:outline-none focus:ring-1 focus:ring-sky-300"
                 value={code}
                 onChange={(e) =>
                   handleRecoveryCodeChange(index, e.target.value)
@@ -92,7 +92,7 @@ const RecoveryForm = ({ onSubmit, setShowRecoveryForm }) => {
         </button>
         <button
           type="button"
-          className="text-zinc-200 light:text-[rgba(7,16,55,0.55)] hover:text-sky-300 light:hover:text-burnt-earth hover:underline text-sm flex gap-x-1"
+          className="text-zinc-200 light:text-infinite-night/55 hover:text-sky-300 light:hover:text-burnt-earth hover:underline text-sm flex gap-x-1"
           onClick={() => setShowRecoveryForm(false)}
         >
           {t("login.password-reset.back-to-login")}
@@ -123,7 +123,7 @@ const ResetPasswordForm = ({ onSubmit }) => {
               Reset Password
             </h3>
           </div>
-          <p className="text-doctor/55 light:text-[rgba(7,16,55,0.55)] text-sm text-center">
+          <p className="text-doctor/55 light:text-infinite-night/55 text-sm text-center">
             Enter your new password.
           </p>
         </div>
@@ -137,7 +137,7 @@ const ResetPasswordForm = ({ onSubmit }) => {
             <input
               type="password"
               name="newPassword"
-              className="border-none bg-zinc-800 light:bg-divine-pleasure text-zinc-200 light:text-[rgba(7,16,55,0.55)] text-sm rounded-lg p-2.5 w-[300px] h-[34px] focus:outline-none focus:ring-1 focus:ring-sky-300"
+              className="border-none bg-zinc-800 light:bg-divine-pleasure text-zinc-200 light:text-infinite-night/55 text-sm rounded-lg p-2.5 w-[300px] h-[34px] focus:outline-none focus:ring-1 focus:ring-sky-300"
               value={newPassword}
               onChange={(e) => setNewPassword(e.target.value)}
               required
@@ -150,7 +150,7 @@ const ResetPasswordForm = ({ onSubmit }) => {
             <input
               type="password"
               name="confirmPassword"
-              className="border-none bg-zinc-800 light:bg-divine-pleasure text-zinc-200 light:text-[rgba(7,16,55,0.55)] text-sm rounded-lg p-2.5 w-[300px] h-[34px] focus:outline-none focus:ring-1 focus:ring-sky-300"
+              className="border-none bg-zinc-800 light:bg-divine-pleasure text-zinc-200 light:text-infinite-night/55 text-sm rounded-lg p-2.5 w-[300px] h-[34px] focus:outline-none focus:ring-1 focus:ring-sky-300"
               value={confirmPassword}
               onChange={(e) => setConfirmPassword(e.target.value)}
               required
@@ -296,7 +296,7 @@ export default function MultiUserAuth() {
                 {t("login.multi-user.welcome")}
               </h3>
             </div>
-            <p className="text-doctor/55 light:text-[rgba(7,16,55,0.55)] text-sm text-center">
+            <p className="text-doctor/55 light:text-infinite-night/55 text-sm text-center">
               {t("login.sign-in", { appName: customAppName || "Lovora" })}
             </p>
           </div>
@@ -310,7 +310,7 @@ export default function MultiUserAuth() {
               <input
                 name="username"
                 type="text"
-                className="border-none bg-zinc-800 light:bg-divine-pleasure text-zinc-200 light:text-[rgba(7,16,55,0.55)] text-sm rounded-lg p-2.5 w-[300px] h-[34px] focus:outline-none focus:ring-1 focus:ring-sky-300"
+                className="border-none bg-zinc-800 light:bg-divine-pleasure text-zinc-200 light:text-infinite-night/55 text-sm rounded-lg p-2.5 w-[300px] h-[34px] focus:outline-none focus:ring-1 focus:ring-sky-300"
                 required={true}
                 autoComplete="off"
               />
@@ -322,7 +322,7 @@ export default function MultiUserAuth() {
               <input
                 name="password"
                 type="password"
-                className="border-none bg-zinc-800 light:bg-divine-pleasure text-zinc-200 light:text-[rgba(7,16,55,0.55)] text-sm rounded-lg p-2.5 w-[300px] h-[34px] focus:outline-none focus:ring-1 focus:ring-sky-300"
+                className="border-none bg-zinc-800 light:bg-divine-pleasure text-zinc-200 light:text-infinite-night/55 text-sm rounded-lg p-2.5 w-[300px] h-[34px] focus:outline-none focus:ring-1 focus:ring-sky-300"
                 required={true}
                 autoComplete="off"
               />
@@ -342,7 +342,7 @@ export default function MultiUserAuth() {
           </button>
           <button
             type="button"
-            className="text-zinc-200 light:text-[rgba(7,16,55,0.55)] hover:text-sky-300 light:hover:text-burnt-earth hover:underline text-sm flex gap-x-1"
+            className="text-zinc-200 light:text-infinite-night/55 hover:text-sky-300 light:hover:text-burnt-earth hover:underline text-sm flex gap-x-1"
             onClick={handleResetPassword}
           >
             {t("login.multi-user.forgot-pass")}?

frontend/src/components/Modals/Password/SingleUserAuth.jsx

@@ -80,7 +80,7 @@ export default function SingleUserAuth() {
                 {t("login.multi-user.welcome")}
               </h3>
             </div>
-            <p className="text-doctor/55 light:text-[rgba(7,16,55,0.55)] text-sm text-center">
+            <p className="text-doctor/55 light:text-infinite-night/55 text-sm text-center">
               {t("login.sign-in", { appName: customAppName || "Lovora" })}
             </p>
           </div>
@@ -94,7 +94,7 @@ export default function SingleUserAuth() {
               <input
                 name="password"
                 type="password"
-                className="border-none bg-zinc-800 light:bg-divine-pleasure text-zinc-200 light:text-[rgba(7,16,55,0.55)] text-sm rounded-lg p-2.5 w-[300px] h-[34px] focus:outline-none focus:ring-1 focus:ring-sky-300"
+                className="border-none bg-zinc-800 light:bg-divine-pleasure text-zinc-200 light:text-infinite-night/55 text-sm rounded-lg p-2.5 w-[300px] h-[34px] focus:outline-none focus:ring-1 focus:ring-sky-300"
                 required={true}
                 autoComplete="off"
               />

frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx

@@ -50,7 +50,7 @@ export default function ThreadItem({
         className={`${
           isActive
             ? "border-l-2 border-b-2 border-white light:border-infinite-night z-[2]"
-            : "border-l border-b border-zinc-500 light:border-[rgba(7,16,55,0.20)] z-[1]"
+            : "border-l border-b border-zinc-500 light:border-infinite-night/20 z-[1]"
         } h-[50%] absolute top-0 left-3 rounded-bl-lg`}
       ></div>
       {/* Downstroke border for next item */}
@@ -60,7 +60,7 @@ export default function ThreadItem({
           className={`${
             idx <= activeIdx && !isActive
               ? "border-l-2 border-white light:border-infinite-night z-[2]"
-              : "border-l border-zinc-500 light:border-[rgba(7,16,55,0.20)] z-[1]"
+              : "border-l border-zinc-500 light:border-infinite-night/20 z-[1]"
           } h-[100%] absolute top-0 left-3`}
         ></div>
       )}
@@ -77,7 +77,7 @@ export default function ThreadItem({
           <div className="w-full flex justify-between">
             <div className="w-full pl-2 py-1">
               <p
-                className={`text-left text-sm text-slate-400/50 light:text-[rgba(7,16,55,0.55)] italic`}
+                className={`text-left text-sm text-slate-400/50 light:text-infinite-night/55 italic`}
               >
                 deleted thread
               </p>

frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx

@@ -174,7 +174,7 @@ export default function ActiveWorkspaces() {
                                   className={`group/upload border-none rounded-md flex items-center justify-center ml-auto p-[2px] ${isActive ? "hover:bg-zinc-500 light:hover:bg-sky-800/30" : "hover:bg-zinc-500 light:hover:bg-slate-400"}`}
                                 >
                                   <UploadSimple
-                                    className={`h-[20px] w-[20px] ${isActive ? "text-doctor/55 hover:text-white light:text-[#071037]/80 light:group-hover/upload:text-infinite-night" : "text-doctor/55 hover:text-white light:text-[rgba(7,16,55,0.55)] light:group-hover/upload:text-infinite-night"}`}
+                                    className={`h-[20px] w-[20px] ${isActive ? "text-doctor/55 hover:text-white light:text-infinite-night/80 light:group-hover/upload:text-infinite-night" : "text-doctor/55 hover:text-white light:text-infinite-night/55 light:group-hover/upload:text-infinite-night"}`}
                                   />
                                 </button>
                                 <button
@@ -199,7 +199,7 @@ export default function ActiveWorkspaces() {
                                         ? "#46C8FF"
                                         : undefined
                                     }
-                                    className={`h-[20px] w-[20px] ${isActive ? "text-doctor/55 hover:text-white light:text-[#071037]/80 light:group-hover/gear:text-infinite-night" : "text-doctor/55 hover:text-white light:text-[rgba(7,16,55,0.55)] light:group-hover/gear:text-infinite-night"}`}
+                                    className={`h-[20px] w-[20px] ${isActive ? "text-doctor/55 hover:text-white light:text-infinite-night/80 light:group-hover/gear:text-infinite-night" : "text-doctor/55 hover:text-white light:text-infinite-night/55 light:group-hover/gear:text-infinite-night"}`}
                                   />
                                 </button>
                               </div>

frontend/src/components/Sidebar/SearchBox/index.jsx

@@ -204,7 +204,7 @@ function ShortWidthNewWorkspaceButton({ user, showNewWsModal }) {
         <Plus
           size={16}
           weight="bold"
-          className="text-black light:text-[rgba(7,16,55,0.55)]"
+          className="text-black light:text-infinite-night/55"
         />
       </button>
       <Tooltip

frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Citation/index.jsx

@@ -174,7 +174,7 @@ export function CitationDetailModal({
             )}
           </div>
           {references > 1 && (
-            <p className="text-xs text-doctor/55 light:text-[rgba(7,16,55,0.55)] mt-2">
+            <p className="text-xs text-doctor/55 light:text-infinite-night/55 mt-2">
               Referenced {references} times.
             </p>
           )}

frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/ActionMenu/index.jsx

@@ -40,7 +40,7 @@ function ActionMenu({ chatId, forkThread, isEditing, role }) {
     <div className="mt-2 -ml-0.5 relative" ref={menuRef}>
       <button
         onClick={toggleMenu}
-        className="border-none text-doctor/75 light:text-[rgba(7,16,55,0.55)] transition-colors duration-200"
+        className="border-none text-doctor/75 light:text-infinite-night/55 transition-colors duration-200"
         data-tooltip-id="action-menu"
         data-tooltip-content={t("chat_window.more_actions")}
         aria-label={t("chat_window.more_actions")}

frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx

@@ -53,7 +53,7 @@ export function EditMessageAction({ chatId = null, role, isEditing }) {
             ? t("chat_window.edit_prompt")
             : t("chat_window.edit_response")
         } `}
-        className="border-none text-doctor/75 light:text-[rgba(7,16,55,0.55)]"
+        className="border-none text-doctor/75 light:text-infinite-night/55"
         aria-label={`Edit ${role === "user" ? t("chat_window.edit_prompt") : t("chat_window.edit_response")}`}
       >
         <Pencil size={21} className="mb-1" />

frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/RenderMetrics/index.jsx

@@ -131,7 +131,7 @@ export default function RenderMetrics({ metrics = {} }) {
       }
       className={`border-none flex md:justify-end items-center gap-x-[8px] -ml-7 ${showMetricsAutomatically ? "opacity-100" : "opacity-0"} md:group-hover:opacity-100 transition-all duration-300`}
     >
-      <p className="cursor-pointer text-xs font-mono text-doctor/55 light:text-[rgba(7,16,55,0.55)]">
+      <p className="cursor-pointer text-xs font-mono text-doctor/55 light:text-infinite-night/55">
         {buildMetricsString(metrics)}
       </p>
     </button>

frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/asyncTts.jsx

@@ -65,7 +65,7 @@ export default function AsyncTTSMessage({ slug, chatId }) {
             ? t("pause_tts_speech_message")
             : t("chat_window.tts_speak_message")
         }
-        className="border-none text-doctor/75 light:text-[rgba(7,16,55,0.55)]"
+        className="border-none text-doctor/75 light:text-infinite-night/55"
         aria-label={speaking ? "Pause speech" : "Speak message"}
       >
         {speaking ? (