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/calendario/calendar-legend.tsx

@@ -12,7 +12,7 @@ const LEGEND_ITEMS: Array<{
 	{ type: "lancamento", label: "Lançamentos" },
 	{ type: "boleto", label: "Boleto com vencimento" },
 	{ type: "cartao", label: "Vencimento de cartão" },
-	{ label: "Pagamento fatura", dotColor: "bg-green-600" },
+	{ label: "Pagamento fatura", dotColor: "bg-success" },
 ];
 
 export function CalendarLegend() {

components/calendario/day-cell.tsx

@@ -18,13 +18,13 @@ export const EVENT_TYPE_STYLES: Record<
 > = {
 	lancamento: {
 		wrapper:
-			"bg-orange-100 text-orange-600 dark:bg-orange-900/10 dark:text-orange-50 border-l-4 border-orange-500",
-		dot: "bg-orange-600",
+			"bg-warning/10 text-warning dark:bg-warning/5 dark:text-warning border-l-4 border-warning",
+		dot: "bg-warning",
 	},
 	boleto: {
 		wrapper:
-			"bg-blue-100 text-blue-600 dark:bg-blue-900/10 dark:text-blue-50 border-l-4 border-blue-500",
-		dot: "bg-blue-600",
+			"bg-info/10 text-info dark:bg-info/5 dark:text-info border-l-4 border-info",
+		dot: "bg-info",
 	},
 	cartao: {
 		wrapper:
@@ -87,8 +87,8 @@ const getEventStyle = (event: CalendarEvent) => {
 	if (isPagamentoFatura(event)) {
 		return {
 			wrapper:
-				"bg-green-100 text-green-600 dark:bg-green-900/10 dark:text-green-50 border-l-4 border-green-500",
-			dot: "bg-green-600",
+				"bg-success/10 text-success dark:bg-success/5 dark:text-success border-l-4 border-success",
+			dot: "bg-success",
 		};
 	}
 	return eventStyles[event.type];

components/calendario/event-modal.tsx

@@ -35,7 +35,7 @@ const EventCard = ({
 	isPagamentoFatura?: boolean;
 }) => {
 	const style = isPagamentoFatura
-		? { dot: "bg-green-600" }
+		? { dot: "bg-success" }
 		: EVENT_TYPE_STYLES[type];
 	return (
 		<Card className="flex flex-row gap-2 p-3 mb-1">
@@ -61,7 +61,7 @@ const renderLancamento = (
 				<div className="flex flex-col gap-1">
 					<span
 						className={`text-sm font-semibold leading-tight ${
-							isPagamentoFatura && "text-green-600 dark:text-green-400"
+							isPagamentoFatura && "text-success"
 						}`}
 					>
 						{event.lancamento.name}
@@ -76,9 +76,7 @@ const renderLancamento = (
 				<span
 					className={cn(
 						"text-sm font-semibold whitespace-nowrap",
-						isReceita
-							? "text-green-600 dark:text-green-400"
-							: "text-foreground",
+						isReceita ? "text-success" : "text-foreground",
 					)}
 				>
 					<MoneyValues