Harden CMS security and theme contrast

src/components/top-header.tsx

@@ -9,8 +9,8 @@ function Currency({ icon, amount, label }: { icon: string; amount: number; label
   return (
     <div className="flex gap-x-3 sm:gap-x-2 items-center">
       <div className={`h-[25px] w-[25px] rounded-full outline-offset-[3px] ${icon}`} />
-      <div style={{ color: "var(--color-navbar-text, var(--color-text-muted))" }}>
-        <span className="font-semibold" style={{ color: "var(--color-navbar-text, var(--color-text))" }}>
+      <div style={{ color: "var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text-muted)))" }}>
+        <span className="font-semibold" style={{ color: "var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text)))" }}>
           {amount.toLocaleString()}
         </span>{" "}
         <span>{label}</span>
@@ -62,7 +62,7 @@ export async function TopHeader() {
             <details className="relative">
               <summary
                 className="list-none cursor-pointer font-semibold [&::-webkit-details-marker]:hidden"
-                style={{ color: "var(--color-navbar-text, var(--color-text))" }}
+                style={{ color: "var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text)))" }}
               >
                 Administration
               </summary>
@@ -101,7 +101,7 @@ export async function TopHeader() {
               />
               <span
                 className="-ml-2 font-semibold"
-                style={{ color: "var(--color-navbar-text, var(--color-text))" }}
+                style={{ color: "var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text)))" }}
               >
                 {session.user.name}
               </span>