feat(03-03): add pastel-tinted loading skeletons to DashboardPage

- Import palette from @/lib/palette
- Replace generic skeleton block with tinted versions using palette.*.light colors
- Grid layout mirrors dashboard structure: saving overview, bill/variable_expense row, debt/investment row

frontend/src/pages/DashboardPage.tsx

@@ -14,6 +14,7 @@ import { EmptyState } from '@/components/EmptyState'
 import { useBudgets } from '@/hooks/useBudgets'
 import { budgetItems as budgetItemsApi } from '@/lib/api'
 import { FolderOpen } from 'lucide-react'
+import { palette } from '@/lib/palette'
 
 export function DashboardPage() {
   const { t } = useTranslation()
@@ -41,8 +42,15 @@ export function DashboardPage() {
     return (
       <div className="flex flex-col gap-4 p-6">
         <Skeleton className="h-10 w-64" />
-        <Skeleton className="h-48 w-full" />
-        <Skeleton className="h-64 w-full" />
+        <Skeleton className="h-48 w-full rounded-lg" style={{ backgroundColor: palette.saving.light }} />
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+          <Skeleton className="h-40 w-full rounded-lg" style={{ backgroundColor: palette.bill.light }} />
+          <Skeleton className="h-40 w-full rounded-lg" style={{ backgroundColor: palette.variable_expense.light }} />
+        </div>
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+          <Skeleton className="h-40 w-full rounded-lg" style={{ backgroundColor: palette.debt.light }} />
+          <Skeleton className="h-40 w-full rounded-lg" style={{ backgroundColor: palette.investment.light }} />
+        </div>
       </div>
     )
   }