feat(v1.4.0): design system semântico, correções de revalidação e melhorias de UX

- Adicionar tokens semânticos de estado (success, warning, info) no globals.css
- Migrar ~60+ componentes de cores hardcoded do Tailwind para tokens semânticos
- Unificar 3 arrays duplicados de cores de categorias em importação única
- Corrigir widgets de boleto/fatura que não atualizavam após pagamento
  (actions de fatura e antecipação não invalidavam cache do dashboard)
- Corrigir scroll em listas Popover+Command (modal prop)
- Adicionar link "detalhes" no card de orçamento para página da categoria
- Adicionar indicadores de tendência coloridos nos cards de métricas
- Estender cores de chart de 6 para 10
- Normalizar dark mode e remover tokens não utilizados

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

components/categorias/category-detail-header.tsx

@@ -1,4 +1,4 @@
-import { RiArrowDownLine, RiArrowUpLine } from "@remixicon/react";
+import { RiArrowDownSFill, RiArrowUpSFill } from "@remixicon/react";
 import type { CategoryType } from "@/lib/categorias/constants";
 import { currencyFormatter } from "@/lib/lancamentos/formatting-helpers";
 import { cn } from "@/lib/utils/ui";
@@ -40,22 +40,22 @@ export function CategoryDetailHeader({
 	const variationColor =
 		category.type === "receita"
 			? isIncrease
-				? "text-emerald-600"
+				? "text-success"
 				: isDecrease
-					? "text-rose-600"
+					? "text-destructive"
 					: "text-muted-foreground"
 			: isIncrease
-				? "text-rose-600"
+				? "text-destructive"
 				: isDecrease
-					? "text-emerald-600"
+					? "text-success"
 					: "text-muted-foreground";
 
 	const variationIcon =
 		isIncrease || isDecrease ? (
 			isIncrease ? (
-				<RiArrowUpLine className="size-4" aria-hidden />
+				<RiArrowUpSFill className="size-4" aria-hidden />
 			) : (
-				<RiArrowDownLine className="size-4" aria-hidden />
+				<RiArrowDownSFill className="size-4" aria-hidden />
 			)
 		) : null;
 

components/categorias/category-select-items.tsx

@@ -7,13 +7,7 @@ export function TypeSelectContent({ label }: { label: string }) {
 
 	return (
 		<span className="flex items-center gap-2">
-			<DotIcon
-				color={
-					isReceita
-						? "bg-emerald-600 dark:bg-emerald-300"
-						: "bg-rose-600 dark:bg-rose-300"
-				}
-			/>
+			<DotIcon color={isReceita ? "bg-success" : "bg-destructive"} />
 			<span>{label}</span>
 		</span>
 	);