feat(theme): draw the app in the shard's chosen type families (M12 phase 3)

Phase 3 of M12 (docs/android/THEMING_AND_NAV.md §5.3) — the fonts third of the
admin's Appearance page, after phase 1's colors and phase 2's structure.

ShardTypeface.resolve(theme) maps the three font stacks onto three FontFamily
values and shardTypography(faces) draws the M5 type scale in them. Only the
family moves: every size, weight, line height and tracking is the M5 value, so
an unthemed instance reproduces the pre-M12 scale exactly. Resolution is pure,
so every assertion is a plain JVM test with no Compose rule.

Seven families are bundled beside the existing Cinzel (EB Garamond,
Merriweather, Playfair Display, IM Fell English, Inter, Work Sans,
Source Sans 3), taken verbatim from google/fonts the way M5 took Cinzel, each
with its SIL OFL licence under app/licenses/. Italics for the four families
client/index.html requests one for; the rest are skewed, as they were before.

Three things worth knowing:

1. The per-role font list is not the set of values a role can hold. The server
   validates admin-entered fonts against FONT_OPTIONS[role], but a preset's
   tokens are copied verbatim by resolveThemeTokens and never pass through it —
   `modern` publishes --display: 'Work Sans' and `fantasy` publishes
   --sans: 'EB Garamond', neither of which its own dropdown offers. The lookup
   is therefore one global map keyed by the lowercased first family name, and
   both preset cases are asserted by name so a per-role "tidy-up" fails loudly.
   Same trap phase 2 hit with --shadow-card, in a different token group.

2. The APK nearly tripled, and that was a decision, not a discovery. Measured
   unsigned release, R8 + resource shrink: 5,031,411 B (4.80 MiB) before,
   13,574,703 B (12.94 MiB) after — +8.15 MiB against a drafted estimate of
   1.5-2.5 MB. Merriweather alone is 6.08 MiB of that, because upstream ships
   it as a three-axis [opsz,wdth,wght] variable font that deflates only 31%.
   The org lead chose to bundle it verbatim with the cheaper options costed:
   Google's own static 400/700 builds would have held the app near 6.8 MiB,
   and dropping it near 6.2 MiB at the price of a serif option that silently
   does nothing on Android.

3. Typography implements equals — like phase 2's Shapes, unlike phase 1's
   ColorScheme, checked the same way in the material3 1.3.0 bytecode. AC-1's
   type half is one comparison against a verbatim copy of the pre-M12 scale
   held in the test.

No LocalShardTypeface: unlike the palette and the structure, MaterialTheme
carries the families completely, and the two composables that override
anything override the style rather than the family. Type.kt's `val Typography`
becoming a function is the whole migration — the three families were
referenced from that one file and nowhere else.

Tests: ShardTypefaceTest (15). 401 unit tests green (386 + 15), lintDebug and
assembleDebug clean. Not exercised on device — that is AC-5, in phase 8, where
IM Fell English's synthesised bold is the thing to look at.

Docs: RunicGateway/docs#TBD

Co-Authored-By: Claude <noreply@anthropic.com>

app/src/main/java/com/runicgateway/app/ui/theme/Font.kt

@@ -6,35 +6,117 @@ package com.runicgateway.app.ui.theme
 import androidx.compose.ui.text.ExperimentalTextApi
 import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.font.FontVariation
 import androidx.compose.ui.text.font.FontWeight
 import com.runicgateway.app.R
 
 /**
- * Type families for the M5 shard-website design pass (docs/android/PLAN.md §M5).
+ * Every type family the app can draw with — the eight the admin's Appearance page
+ * can select between (THEMING_AND_NAV.md §5.3) plus the two system stacks its
+ * "shipped default" options resolve to.
  *
- * - [Cinzel] — the engraved serif display face used for headings, screen titles,
- *   and the top-bar title. Shipped as a single weight-axis **variable** font
- *   (`res/font/cinzel_variable.ttf`, SIL OFL — see `app/licenses/Cinzel-OFL.txt`);
- *   the 500/600/700 instances the design uses are pinned via [FontVariation]
- *   (supported on API 26+, and our minSdk is 29).
- * - [AppSerif] — the parchment body face. Android's platform serif is Noto Serif,
- *   which reads as the design's Georgia body copy without bundling another binary.
- * - [AppSans] — the label/meta/button face (the design's "Helvetica Neue" runs).
+ * All eight webfonts are **bundled**, not downloadable: the Play Store font
+ * provider is the only downloadable-font source Compose ships with, so a
+ * de-Googled device would silently fall back and every text style would gain an
+ * async loading state. The binaries are taken verbatim from `google/fonts`, which
+ * is how [Cinzel] arrived in M5; each carries its SIL OFL licence under
+ * `app/licenses/`, **never** under `res/font/` (aapt rejects a `.txt` there).
+ *
+ * A family reaches a text style through [ShardTypeface], which is what maps a
+ * shard's `--display` / `--serif` / `--sans` stacks onto these. The three
+ * declared *shipped* roles are [Cinzel] for the engraved display/headline/title
+ * block, [AppSerif] for parchment body copy, and [AppSans] for the letter-spaced
+ * label/meta/button block.
+ *
+ * ## Weights
+ *
+ * The type scale asks for four: 400 (body), 500 and 700 (labels), 600 (display).
+ * Every family here must supply all four, because a family is **not** confined to
+ * the role its dropdown lives in — the `modern` preset puts Work Sans in the
+ * display slot and the `fantasy` preset puts EB Garamond in the sans slot, both
+ * bypassing the server's per-role option list (see [ShardTypeface]). The variable
+ * families pin the four instances through [FontVariation] (API 26+; minSdk is 29).
+ *
+ * Two families are exceptions, both upstream facts rather than choices:
+ * - **[IMFellEnglish] has a single weight.** Its one 400 face answers all four
+ *   requests and Android synthesises the bold. The website's dropdown labels it
+ *   "(no bold weight)" for the same reason.
+ * - **[Cinzel] is left at the 500/600/700 it shipped with in M5.** It is the only
+ *   family the server offers in the display role alone, so nothing can ask it for
+ *   400; adding an instance would have edited M5's type for no reachable case.
+ *
+ * ## Italics
+ *
+ * Four families carry a true italic — the same four `client/index.html` requests
+ * one for. The rest are upright-only and Compose skews them, which is what the
+ * app already did for every family before this milestone and what the website
+ * does for its own upright-only faces. The app draws italic in two places.
  */
 @OptIn(ExperimentalTextApi::class)
-private fun cinzel(weight: FontWeight) =
+private fun variable(resId: Int, weight: FontWeight, style: FontStyle = FontStyle.Normal) =
     Font(
-        R.font.cinzel_variable,
+        resId,
         weight = weight,
+        style = style,
         variationSettings = FontVariation.Settings(FontVariation.weight(weight.weight)),
     )
 
+// The four weights the type scale asks for, in the order Compose prefers to match.
+private val ScaleWeights = listOf(
+    FontWeight.Normal,   // 400 — body
+    FontWeight.Medium,   // 500 — labelMedium / labelSmall
+    FontWeight.SemiBold, // 600 — display / headline / title
+    FontWeight.Bold,     // 700 — labelLarge
+)
+
+/** A variable family pinned at the four scale weights, upright only. */
+private fun variableFamily(resId: Int) =
+    FontFamily(ScaleWeights.map { variable(resId, it) })
+
+/** A variable family pinned at the four scale weights, upright and italic. */
+private fun variableFamily(uprightResId: Int, italicResId: Int) =
+    FontFamily(
+        ScaleWeights.map { variable(uprightResId, it) } +
+            ScaleWeights.map { variable(italicResId, it, FontStyle.Italic) },
+    )
+
+private fun cinzel(weight: FontWeight) = variable(R.font.cinzel_variable, weight)
+
 val Cinzel = FontFamily(
     cinzel(FontWeight.Medium),   // 500
     cinzel(FontWeight.SemiBold), // 600
     cinzel(FontWeight.Bold),     // 700
 )
 
+val EBGaramond = variableFamily(R.font.eb_garamond_variable, R.font.eb_garamond_italic)
+val Merriweather = variableFamily(R.font.merriweather_variable, R.font.merriweather_italic)
+val PlayfairDisplay =
+    variableFamily(R.font.playfair_display_variable, R.font.playfair_display_italic)
+val Inter = variableFamily(R.font.inter_variable)
+val WorkSans = variableFamily(R.font.work_sans_variable)
+val SourceSans3 = variableFamily(R.font.source_sans_3_variable)
+
+/**
+ * IM Fell English, whose upstream release is a single 400 face per style — there
+ * is no weight axis and no bold cut to pin. Declared once per style so a request
+ * at 500/600/700 lands on it rather than falling out of the family.
+ */
+val IMFellEnglish = FontFamily(
+    Font(R.font.im_fell_english_regular, weight = FontWeight.Normal),
+    Font(R.font.im_fell_english_italic, weight = FontWeight.Normal, style = FontStyle.Italic),
+)
+
+/**
+ * The platform serif (Noto Serif), which is what the website's
+ * `Georgia, "Times New Roman", serif` stack resolves to on Android — and the
+ * app's shipped body face since M5.
+ */
 val AppSerif = FontFamily.Serif
+
+/**
+ * The platform sans (Roboto), which the website's
+ * `"Helvetica Neue", Arial, sans-serif` stack resolves to on Android — and the
+ * app's shipped label face since M5.
+ */
 val AppSans = FontFamily.SansSerif

app/src/main/java/com/runicgateway/app/ui/theme/ShardTypeface.kt

@@ -0,0 +1,95 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+package com.runicgateway.app.ui.theme
+
+import androidx.compose.runtime.Immutable
+import androidx.compose.ui.text.font.FontFamily
+
+/**
+ * The shard's resolved type families — the `fonts` third of the admin's
+ * Appearance page (THEMING_AND_NAV.md §5.3), alongside [ShardPalette] and
+ * [ShardStructure].
+ *
+ * The three roles map onto the M5 type scale's three groups verbatim: `--display`
+ * carries the Cinzel display/headline/title block, `--serif` the body block, and
+ * `--sans` the label/meta/button block. Sizes, weights and tracking do not move —
+ * only the family, which is why [shardTypography] is a one-field substitution and
+ * an unthemed shard is a provable no-op (§2, AC-1).
+ *
+ * Resolution is pure, so the acceptance tests need no Compose rule.
+ */
+@Immutable
+data class ShardTypeface(
+    /** `--display`. */
+    val display: FontFamily = Cinzel,
+    /** `--serif`. */
+    val serif: FontFamily = AppSerif,
+    /** `--sans`. */
+    val sans: FontFamily = AppSans,
+) {
+    companion object {
+        /** The shipped app: the three M5 families. */
+        val Shipped = ShardTypeface()
+
+        /**
+         * Resolve a `theme` token map into three families, **field by field** (§2):
+         * an unreadable `--sans` must not cost the `--serif` beside it, exactly as
+         * in [ShardPalette.resolve] and [ShardStructure.resolve].
+         */
+        fun resolve(theme: Map<String, String>): ShardTypeface {
+            if (theme.isEmpty()) return Shipped
+            return ShardTypeface(
+                display = family(theme["--display"]) ?: Shipped.display,
+                serif = family(theme["--serif"]) ?: Shipped.serif,
+                sans = family(theme["--sans"]) ?: Shipped.sans,
+            )
+        }
+    }
+}
+
+/**
+ * Every family name the server can publish, keyed by the lowercased first family
+ * of the stack.
+ *
+ * **This map is deliberately global rather than per-role**, and that is not a
+ * simplification. The server validates an *admin-entered* font against
+ * `FONT_OPTIONS[role]`, but a preset's tokens are copied verbatim by
+ * `resolveThemeTokens` and never pass through that list — `modern` publishes
+ * `--display: 'Work Sans', Arial, sans-serif`, which the display dropdown does
+ * not offer, and `fantasy` publishes `--sans: 'EB Garamond', Georgia, serif`,
+ * which the sans dropdown does not either. A per-role lookup would have missed
+ * the display face of one preset and the label face of the other. It is the same
+ * trap phase 2 hit with `--shadow-card`, in a different token group.
+ *
+ * The two system entries are the "shipped default" options: neither pulls in a
+ * webfont on the web, and on Android both resolve to the platform family the app
+ * has drawn with since M5.
+ */
+private val FamiliesByFirstName: Map<String, FontFamily> = mapOf(
+    "cinzel" to Cinzel,
+    "eb garamond" to EBGaramond,
+    "merriweather" to Merriweather,
+    "playfair display" to PlayfairDisplay,
+    "im fell english" to IMFellEnglish,
+    "inter" to Inter,
+    "work sans" to WorkSans,
+    "source sans 3" to SourceSans3,
+    "georgia" to AppSerif,
+    "helvetica neue" to AppSans,
+)
+
+/**
+ * Resolve a CSS font stack to a family by **its first name**, which is how the
+ * value is constructed server-side and the only part of it that carries the
+ * admin's choice — everything after the first comma is the web's fallback chain,
+ * which Android has no use for.
+ *
+ * Returns `null` for a stack this app cannot draw, so the caller falls back to
+ * the role's shipped family rather than to some other role's.
+ */
+private fun family(stack: String?): FontFamily? {
+    val first = stack?.substringBefore(',')?.trim()?.trim('\'', '"')?.trim()
+    if (first.isNullOrEmpty()) return null
+    return FamiliesByFirstName[first.lowercase()]
+}

app/src/main/java/com/runicgateway/app/ui/theme/Theme.kt

@@ -60,7 +60,10 @@ internal fun shardColorScheme(palette: ShardPalette): ColorScheme = darkColorSch
  * for the ten tokens with a Material role, and through [LocalShardPalette] for
  * the five without one. The radii split the same way — [MaterialTheme]'s shape
  * scale for everything Material draws, [LocalShardStructure] for the pill and
- * the card depth, which it cannot carry.
+ * the card depth, which it cannot carry. The type families need no split and so
+ * no composition local: every text style in the app comes from
+ * [MaterialTheme.typography], and the two that override anything override the
+ * style rather than the family.
  */
 @Composable
 fun RunicGatewayTheme(
@@ -75,6 +78,8 @@ fun RunicGatewayTheme(
     }
     val colorScheme = remember(palette) { shardColorScheme(palette) }
     val structure = remember(appearance) { ShardStructure.resolve(appearance.theme) }
+    val typeface = remember(appearance) { ShardTypeface.resolve(appearance.theme) }
+    val typography = remember(typeface) { shardTypography(typeface) }
 
     CompositionLocalProvider(
         LocalShardPalette provides palette,
@@ -82,7 +87,7 @@ fun RunicGatewayTheme(
     ) {
         MaterialTheme(
             colorScheme = colorScheme,
-            typography = Typography,
+            typography = typography,
             shapes = structure.shapes,
             content = content,
         )

app/src/main/java/com/runicgateway/app/ui/theme/Type.kt

@@ -9,73 +9,82 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.sp
 
 /**
- * The M5 type scale. Three families carry the design (see [ui/theme/Font.kt]):
- * [Cinzel] for the engraved display/headline/title roles, [AppSerif] (Noto Serif)
- * for parchment body copy, and [AppSans] for the letter-spaced label/meta/button
- * roles. Sizes and tracking mirror the "Runic Gateway Screens" mockup.
+ * The M5 type scale, drawn in whichever three families the shard resolved to
+ * (THEMING_AND_NAV.md §5.3).
+ *
+ * Only the family moves. Every size, weight, line height and tracking below is
+ * the M5 value from the "Runic Gateway Screens" mockup, so `ShardTypeface.Shipped`
+ * — an unthemed instance, a backend that predates the feature, a settings call
+ * that failed — reproduces the pre-M12 scale exactly. [androidx.compose.material3.Typography]
+ * implements `equals`, so AC-1 asserts that in one comparison.
+ *
+ * The three groups map onto the three roles verbatim: [ShardTypeface.display]
+ * carries the engraved display/headline/title block, [ShardTypeface.serif] the
+ * parchment body copy, and [ShardTypeface.sans] the letter-spaced
+ * label/meta/button roles.
  */
-val Typography = Typography(
-    // Display / headline / title — Cinzel engraved serif
+internal fun shardTypography(faces: ShardTypeface) = Typography(
+    // Display / headline / title — the engraved serif role
     displayLarge = TextStyle(
-        fontFamily = Cinzel, fontWeight = FontWeight.SemiBold,
+        fontFamily = faces.display, fontWeight = FontWeight.SemiBold,
         fontSize = 40.sp, lineHeight = 46.sp, letterSpacing = 0.4.sp,
     ),
     displayMedium = TextStyle(
-        fontFamily = Cinzel, fontWeight = FontWeight.SemiBold,
+        fontFamily = faces.display, fontWeight = FontWeight.SemiBold,
         fontSize = 32.sp, lineHeight = 40.sp, letterSpacing = 0.3.sp,
     ),
     displaySmall = TextStyle(
-        fontFamily = Cinzel, fontWeight = FontWeight.SemiBold,
+        fontFamily = faces.display, fontWeight = FontWeight.SemiBold,
         fontSize = 28.sp, lineHeight = 36.sp, letterSpacing = 0.2.sp,
     ),
     headlineLarge = TextStyle(
-        fontFamily = Cinzel, fontWeight = FontWeight.SemiBold,
+        fontFamily = faces.display, fontWeight = FontWeight.SemiBold,
         fontSize = 26.sp, lineHeight = 34.sp, letterSpacing = 0.2.sp,
     ),
     headlineMedium = TextStyle(
-        fontFamily = Cinzel, fontWeight = FontWeight.SemiBold,
+        fontFamily = faces.display, fontWeight = FontWeight.SemiBold,
         fontSize = 24.sp, lineHeight = 32.sp, letterSpacing = 0.2.sp,
     ),
     headlineSmall = TextStyle(
-        fontFamily = Cinzel, fontWeight = FontWeight.SemiBold,
+        fontFamily = faces.display, fontWeight = FontWeight.SemiBold,
         fontSize = 22.sp, lineHeight = 28.sp, letterSpacing = 0.2.sp,
     ),
     titleLarge = TextStyle(
-        fontFamily = Cinzel, fontWeight = FontWeight.SemiBold,
+        fontFamily = faces.display, fontWeight = FontWeight.SemiBold,
         fontSize = 20.sp, lineHeight = 26.sp, letterSpacing = 0.2.sp,
     ),
     titleMedium = TextStyle(
-        fontFamily = Cinzel, fontWeight = FontWeight.SemiBold,
+        fontFamily = faces.display, fontWeight = FontWeight.SemiBold,
         fontSize = 17.sp, lineHeight = 24.sp, letterSpacing = 0.15.sp,
     ),
     titleSmall = TextStyle(
-        fontFamily = Cinzel, fontWeight = FontWeight.SemiBold,
+        fontFamily = faces.display, fontWeight = FontWeight.SemiBold,
         fontSize = 15.sp, lineHeight = 22.sp, letterSpacing = 0.1.sp,
     ),
-    // Body — parchment serif
+    // Body — the parchment serif role
     bodyLarge = TextStyle(
-        fontFamily = AppSerif, fontWeight = FontWeight.Normal,
+        fontFamily = faces.serif, fontWeight = FontWeight.Normal,
         fontSize = 16.sp, lineHeight = 26.sp, letterSpacing = 0.15.sp,
     ),
     bodyMedium = TextStyle(
-        fontFamily = AppSerif, fontWeight = FontWeight.Normal,
+        fontFamily = faces.serif, fontWeight = FontWeight.Normal,
         fontSize = 15.sp, lineHeight = 24.sp, letterSpacing = 0.15.sp,
     ),
     bodySmall = TextStyle(
-        fontFamily = AppSerif, fontWeight = FontWeight.Normal,
+        fontFamily = faces.serif, fontWeight = FontWeight.Normal,
         fontSize = 13.sp, lineHeight = 20.sp, letterSpacing = 0.2.sp,
     ),
-    // Labels / meta / buttons — sans, letter-spaced
+    // Labels / meta / buttons — the sans role, letter-spaced
     labelLarge = TextStyle(
-        fontFamily = AppSans, fontWeight = FontWeight.Bold,
+        fontFamily = faces.sans, fontWeight = FontWeight.Bold,
         fontSize = 14.sp, lineHeight = 18.sp, letterSpacing = 0.45.sp,
     ),
     labelMedium = TextStyle(
-        fontFamily = AppSans, fontWeight = FontWeight.Medium,
+        fontFamily = faces.sans, fontWeight = FontWeight.Medium,
         fontSize = 12.sp, lineHeight = 16.sp, letterSpacing = 0.4.sp,
     ),
     labelSmall = TextStyle(
-        fontFamily = AppSans, fontWeight = FontWeight.Medium,
+        fontFamily = faces.sans, fontWeight = FontWeight.Medium,
         fontSize = 11.sp, lineHeight = 15.sp, letterSpacing = 0.5.sp,
     ),
 )