Lay the Almanacka design foundation: tokens, type, shell

New token system in global.css (near-white surfaces, one ink-blue
accent, no sub-12px type), self-hosted Schibsted Grotesk, rewritten
primitives (buttons, fields, modal shell, segmented, disclosure,
skeleton), a borderless 56px header with an SV | EN language toggle,
an Icon component replacing glyphs, page skeletons that keep the
layout during loading, and leave-type colours moved out of TS into
CSS variables. Feature blocks keep their structure for later phases.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

frontend/src/pages/Dashboard.tsx

@@ -21,6 +21,7 @@ import { isSelf, orderSelfFirst } from '@/utils/members'
 import { useTranslation } from '@/i18n'
 import { Layout } from '@/components/layout/Layout'
 import { LoadingSpinner } from '@/components/common/LoadingSpinner'
+import { PageSkeleton } from '@/components/common/PageSkeleton'
 import { OverviewMetrics } from '@/components/dashboard/OverviewMetrics'
 import { DaysBreakdown } from '@/components/dashboard/DaysBreakdown'
 import { Hero } from '@/components/dashboard/Hero'
@@ -91,7 +92,11 @@ export function Dashboard(): ReactNode {
   const isLoading = wsLoading || analyticsLoading || pdLoading
 
   if (isLoading) {
-    return <LoadingSpinner message={t('dashboard.loading')} />
+    return (
+      <Layout>
+        <PageSkeleton />
+      </Layout>
+    )
   }
 
   const handleFetchFK = async () => {