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/Settings.tsx

@@ -17,6 +17,7 @@ import { isApiError } from '@/services/errors'
 import { useTranslation, type Locale, type TranslationKey } from '@/i18n'
 import { Layout } from '@/components/layout/Layout'
 import { LoadingSpinner } from '@/components/common/LoadingSpinner'
+import { PageSkeleton } from '@/components/common/PageSkeleton'
 import { ChildBirthdayInput } from '@/components/inputs/ChildBirthdayInput'
 import { ParentProfileInput, type SalaryType, type EmploymentStatus } from '@/components/inputs/ParentProfileInput'
 import { VacationDaysInput } from '@/components/inputs/VacationDaysInput'
@@ -189,7 +190,11 @@ export function Settings(): ReactNode {
   )
 
   if (isLoading) {
-    return <LoadingSpinner message={t('settings.loading')} />
+    return (
+      <Layout>
+        <PageSkeleton rows={4} />
+      </Layout>
+    )
   }
 
   const handleLanguageChange = (value: string) => {