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/e2e/tests/header-nav-hover.spec.ts

@@ -1,14 +1,14 @@
 /**
  * Regression for a specificity bug: `.header__nav-link:hover` (a class +
- * pseudo-class, specificity (0,2,0)) outranked `.header__nav-link--active`
- * (a single class, (0,1,0)), so hovering the *active* tab kept the active
- * rule's white (`--c-surface`) text but reverted the background to the
- * hover rule's `--c-bg` — near-white text on a near-white background.
+ * pseudo-class, specificity (0,2,0)) once outranked the single-class active
+ * rule, so hovering the *active* tab reverted its background to the ghost
+ * hover colour while keeping the active text colour — unreadable.
  * `.header__nav-link[aria-current='page']:hover` now wins on specificity
- * (attribute selector + pseudo-class, (0,2,0)) over the plain hover rule,
- * and repaints the background with `--c-accent-hover` so the surface-coloured
- * text stays readable. The active state is marked by `aria-current="page"`
- * (set automatically by react-router-dom when the route matches). See `header.css`.
+ * (attribute selector + pseudo-class, (0,2,0)) over the plain hover rule and
+ * keeps the active link on its accent tint (`--c-accent-weak`) with the
+ * darker accent text (`--c-accent-hover`). The active state is marked by
+ * `aria-current="page"` (set automatically by react-router-dom when the
+ * route matches). See `header.css`.
  */
 import { test, expect, type Page } from '@playwright/test'
 
@@ -37,12 +37,12 @@ test.describe('header nav — active tab stays readable on hover', () => {
     const activeLink = page.getByTestId('header-nav').getByRole('link', { name: 'Översikt' })
     await expect(activeLink).toHaveAttribute('aria-current', 'page')
 
+    const accentWeak = await resolveCssVar(page, '--c-accent-weak')
     const accentHover = await resolveCssVar(page, '--c-accent-hover')
-    const surface = await resolveCssVar(page, '--c-surface')
 
     await activeLink.hover()
 
-    await expect(activeLink).toHaveCSS('background-color', accentHover)
-    await expect(activeLink).toHaveCSS('color', surface)
+    await expect(activeLink).toHaveCSS('background-color', accentWeak)
+    await expect(activeLink).toHaveCSS('color', accentHover)
   })
 })