fix(processing-folders): badges get opaque backers

The origin and category badges tinted into transparency, and they sit on
top of thumbnails — whatever the page happened to render underneath bled
through and made them illegible. The tints now mix into the surface colour
instead, so every badge carries a solid, theme-aware backer.

frontend/editor/src/core/components/filesPage/FileCategoryBadge.tsx

@@ -45,8 +45,10 @@ export function FileCategoryBadge({ labels }: { labels?: string[] | null }) {
           padding: "0.1rem 0.4rem",
           borderRadius: "999px",
           lineHeight: 1.2,
+          // Mixed into the surface, not transparency — the badge sits on top
+          // of thumbnails, where a see-through backer is illegible.
           background:
-            "color-mix(in srgb, var(--c-text-subtle) 16%, transparent)",
+            "color-mix(in srgb, var(--c-text-subtle) 16%, var(--c-surface))",
         }}
       >
         {badges.slice(0, MAX_ICONS).map((badge) => (

frontend/editor/src/core/components/filesPage/FileOriginBadge.tsx

@@ -31,17 +31,20 @@ const styles = {
     letterSpacing: "0.04em",
     lineHeight: 1.2,
   },
+  // Tints are mixed into the surface colour, never transparency: these badges
+  // sit on top of thumbnails, where a see-through backer makes them illegible.
   local: {
-    background: "color-mix(in srgb, var(--c-text-subtle) 16%, transparent)",
+    background:
+      "color-mix(in srgb, var(--c-text-subtle) 16%, var(--c-surface))",
     color: "var(--c-text-muted)",
   },
   cloud: {
-    background: "color-mix(in srgb, var(--c-primary) 16%, transparent)",
+    background: "color-mix(in srgb, var(--c-primary) 16%, var(--c-surface))",
     color: "var(--c-accent-text)",
   },
   shared: {
     background:
-      "color-mix(in srgb, var(--mantine-color-orange-6) 16%, transparent)",
+      "color-mix(in srgb, var(--mantine-color-orange-6) 16%, var(--c-surface))",
     color: "var(--color-amber-dark)",
   },
 };