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/dashboard/expenses-by-category-widget-with-chart.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import {
-	RiArrowDownLine,
-	RiArrowUpLine,
+	RiArrowDownSFill,
+	RiArrowUpSFill,
 	RiExternalLinkLine,
 	RiListUnordered,
 	RiPieChart2Line,
@@ -220,14 +220,14 @@ export function ExpensesByCategoryWidgetWithChart({
 											<span
 												className={`flex items-center gap-0.5 text-xs ${
 													hasIncrease
-														? "text-red-600 dark:text-red-500"
+														? "text-destructive"
 														: hasDecrease
-															? "text-green-600 dark:text-green-500"
+															? "text-success"
 															: "text-muted-foreground"
 												}`}
 											>
-												{hasIncrease && <RiArrowUpLine className="size-3" />}
-												{hasDecrease && <RiArrowDownLine className="size-3" />}
+												{hasIncrease && <RiArrowUpSFill className="size-3" />}
+												{hasDecrease && <RiArrowDownSFill className="size-3" />}
 												{formatPercentage(category.percentageChange)}
 											</span>
 										)}
@@ -238,16 +238,12 @@ export function ExpensesByCategoryWidgetWithChart({
 									<div className="ml-11 flex items-center gap-1.5 text-xs">
 										<RiWallet3Line
 											className={`size-3 ${
-												budgetExceeded
-													? "text-red-600"
-													: "text-blue-600 dark:text-blue-400"
+												budgetExceeded ? "text-destructive" : "text-info"
 											}`}
 										/>
 										<span
 											className={
-												budgetExceeded
-													? "text-red-600"
-													: "text-blue-600 dark:text-blue-400"
+												budgetExceeded ? "text-destructive" : "text-info"
 											}
 										>
 											{budgetExceeded ? (