Ge ALVA-ytan sin egen typografi enligt ALVA-SPEC-001

ALVA satte inget eget snitt och ärvde därför värdapplikationens
`Crimson Text` — en antikva. Specens paragraf 6 föreskriver DIN 2014,
med FF DIN och IBM Plex Sans som tillåtna alternativ.

Skillnaden är inte kosmetisk. Bokstavsformen är det första som säger
vilken tradition ett verktyg tillhör, och dokumentet beskrev ett tyskt
industrisystem medan skärmen visade en bokstavsform ur en helt annan.
På en telefon, där ingenting annat konkurrerar om intrycket, var det i
praktiken allt man såg.

Fallkedjan är därför inte godtycklig: en organisation som licensierat DIN
får DIN, övriga faller ned genom grotesker som delar dess karaktär, och
aldrig till en antikva. Beteckningar och mätvärden sätts med fast
teckenbredd och tabellsiffror — en beteckning jämförs oftare än den läses.

Reglerna gäller bara ALVA-ytan; butiken lämnas som den är. Fyra tester
låser snittet, kaskaden och siffrorna, inklusive att fallkedjan aldrig
slutar i en antikva.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012EQg3rJsrQ1ZNTvkzmQAtt

felsokning/app/src/index.css

@@ -156,6 +156,57 @@
   }
 }
 
+/* ---- ALVA-ytan (ALVA-SPEC-001 · paragraf 6) --------------------------
+ *
+ * Värdapplikationen sätter en antikva på body. ALVA ärvde den, vilket är
+ * fel tradition för ett system som beskriver sig som ett tyskt
+ * industriverktyg. Reglerna nedan gäller bara ALVA-ytan; butiken lämnas
+ * som den är.
+ *
+ * Snittet deklareras i src/alva/system.ts och speglas här därför att
+ * kaskaden måste nå även de element komponenterna inte själva sätter
+ * stil på — rubriker fångas annars av värdapplikationens h1–h6-regel.
+ */
+.alva-yta,
+.alva-yta h1,
+.alva-yta h2,
+.alva-yta h3,
+.alva-yta h4,
+.alva-yta h5,
+.alva-yta h6,
+.alva-yta button,
+.alva-yta input,
+.alva-yta select,
+.alva-yta textarea {
+  font-family:
+    "DIN 2014",
+    "FF DIN",
+    "IBM Plex Sans",
+    "Inter",
+    "Helvetica Neue",
+    Helvetica,
+    Arial,
+    system-ui,
+    sans-serif;
+}
+
+/* Siffror står i kolumn. En beteckning jämförs oftare än den läses. */
+.alva-yta {
+  font-variant-numeric: tabular-nums;
+}
+
+.alva-yta .font-mono {
+  font-family:
+    ui-monospace,
+    "IBM Plex Mono",
+    "SF Mono",
+    "Cascadia Mono",
+    Menlo,
+    Consolas,
+    "Liberation Mono",
+    monospace;
+}
+
 @layer utilities {
   .animate-fade-up {
     animation: fadeUp 0.8s ease-out forwards;