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/components/common/loading-spinner.css

@@ -1,4 +1,4 @@
-/* Loading Spinner */
+/* Loading Spinner — a thin ring with an accent arc, not a glyph. */
 .loading-spinner {
   display: flex;
   flex-direction: column;
@@ -10,14 +10,17 @@
 }
 
 .loading-spinner__icon {
-  font-size: var(--icon-lg);
-  color: var(--c-accent);
-  animation: spin 2s linear infinite;
   display: block;
+  width: var(--icon-lg);
+  height: var(--icon-lg);
+  border: 2px solid var(--c-border);
+  border-top-color: var(--c-accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
 }
 
 .loading-spinner__message {
-  font-size: var(--fs-base);
+  font-size: var(--fs-sm);
   color: var(--c-text-muted);
   margin: 0;
 }