feat(tokens): load Sora in Storybook + fix editorial heading tags

Storybook now demonstrates the actual Sora editorial type instead of
silently falling back to Inter: the Editorial specimens render with
font-family var(--lp-font-family-sora) ("Sora, Inter, ..."), but no
Sora webfont was loaded in the preview, so they rendered in Inter.

- preview-head.html: load Sora from Google Fonts (OFL) for Storybook
  specimens only. The in-product @font-face/preload ships in Phase 2
  (gonfalon), so this stays scoped to the docs surface.
- typography.stories.tsx: map editorial-h1/h2/h3 to real h1/h2/h3 tags
  in getSemanticElement (previously fell through to a generic div);
  drop a stray per-token console.log.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: OneHunnid

.storybook/preview-head.html

@@ -1,6 +1,14 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link rel="preload" href="./static/assets/Audimat3000-Regulier.var-subset.woff2" as="font" crossorigin />
 <link rel="preload" href="./static/assets/Inter.var-subset.woff2" as="font" crossorigin />
 
+<!-- Sora (editorial type family) loaded from Google Fonts for Storybook specimens only.
+     The in-product @font-face/preload ships separately in Phase 2 (gonfalon). -->
+<link
+	href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap"
+	rel="stylesheet"
+/>
+
 <link href="./styles.css" rel="stylesheet" />
 <link href="./static/fonts.css" rel="stylesheet" />

packages/tokens/stories/typography.stories.tsx

@@ -81,7 +81,24 @@ const getSemanticElement = (token: string, font: string) => {
 	const category = parts[0]; // heading, body, etc.
 	const size = parts[1]; // 1, 2, etc.
 
-	console.log({ category, token });
+	// Editorial tokens are keyed as editorial-<variant>[-modifier] (e.g. editorial-h1-alt),
+	// so the heading level lives in parts[1]. Map it to the matching tag instead of falling
+	// through to the generic div below.
+	if (category === 'editorial') {
+		const variant = parts[1]; // display, h1, h2, h3
+		const match = /^h(\d+)$/.exec(variant);
+		if (match) {
+			const Tag = `h${match[1]}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+			return {
+				element: Tag,
+				render: (text: string) => <Tag style={{ font }}>{text}</Tag>,
+			};
+		}
+		return {
+			element: 'div',
+			render: (text: string) => <div style={{ font }}>{text}</div>,
+		};
+	}
 
 	switch (category) {
 		case 'display':