document classifier agent that runs as a policy and assigns a category and sub-category docType

frontend/shared/components/IconBadge.css

@@ -34,3 +34,6 @@
 .sui-iconbadge--red {
   --ib-base: var(--color-red);
 }
+.sui-iconbadge--orange {
+  --ib-base: var(--color-orange);
+}

frontend/shared/components/IconBadge.tsx

@@ -1,7 +1,13 @@
 import type { ReactNode } from "react";
 import "@shared/components/IconBadge.css";
 
-export type IconBadgeAccent = "blue" | "purple" | "green" | "amber" | "red";
+export type IconBadgeAccent =
+  | "blue"
+  | "purple"
+  | "green"
+  | "amber"
+  | "red"
+  | "orange";
 
 export interface IconBadgeProps {
   children: ReactNode;

frontend/shared/tokens/tokens.css

@@ -52,6 +52,10 @@
   --color-amber-light: #fef3c7;
   --color-amber-border: #fde68a;
   --color-amber-dark: #92400e;
+  --color-orange: #f97316;
+  --color-orange-light: #fff7ed;
+  --color-orange-border: #fed7aa;
+  --color-orange-dark: #9a3412;
 
   /* Category accents (theme-stable) */
   --color-cat-insurance: #0ea5e9;
@@ -195,6 +199,10 @@
      #fbbf24 — identical to the base — which left Mantine's amber hover a
      no-op in dark mode. */
   --color-amber-dark: #f59e0b;
+  --color-orange: #fb923c;
+  --color-orange-light: #2a1408;
+  --color-orange-border: #7c2d12;
+  --color-orange-dark: #fdba74;
 
   --color-bg: #090c14;
   --color-bg-alt: #0d1120;