Update frontend typography system

docs/tables_frontend_overhaul_implementation_plan.md

@@ -39,6 +39,7 @@ It is intentionally implementation-focused:
 | --- | --- | --- | --- |
 | 2026-03-21 | Phase 0 | Completed | Created overhaul branch, audited the current frontend, and locked the route map, component boundaries, migration path, and shared-state ownership. |
 | 2026-03-21 | P1.1 | Completed | Replaced the legacy token root with semantic background, surface, text, border, focus, shadow, and semantic accent ramps while keeping compatibility aliases for incremental migration. |
+| 2026-03-21 | P1.2 | Completed | Switched the app to Fraunces, IBM Plex Sans, and IBM Plex Mono with distinct display, body, UI, and code font roles instead of one shared heading font. |
 
 ### Lessons Learned
 
@@ -47,6 +48,7 @@ It is intentionally implementation-focused:
 - Existing contracts in `LookupContracts.cs` already contain the identifiers needed for deep links and cross-surface navigation: table slug, group key, column key, roll band, and result id.
 - Diagnostics already behaves like a separate workflow and should be moved under `Tools` early, before the `Tables` page is rewritten further.
 - `localStorage` access is currently page-local and ad hoc. Theme, recents, pins, and table context need one shared storage boundary before more UI work starts.
+- The old typography setup coupled display and utility text under a single token. The new shell work needs separate display and UI font roles to avoid decorative type in controls.
 
 ## Target Outcomes
 
@@ -249,7 +251,7 @@ Create the implementation foundation so the visual overhaul does not start with
 | Task | Status | Notes |
 | --- | --- | --- |
 | `P1.1` | Completed | Semantic token layer landed in `wwwroot/app.css` with compatibility aliases to keep existing pages stable. |
-| `P1.2` | Pending | Typography update will change font loading and global font tokens. |
+| `P1.2` | Completed | Font loading now uses Fraunces, IBM Plex Sans, and IBM Plex Mono with explicit role-based tokens. |
 | `P1.3` | Pending | Theme modes will be introduced after typography is stable. |
 | `P1.4` | Pending | Theme persistence depends on the theme state service. |
 | `P1.5` | Pending | Shell replacement follows once tokens and theme plumbing exist. |

src/RolemasterDb.App/Components/App.razor

@@ -8,7 +8,7 @@
     <ResourcePreloader />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Domine:wght@400&family=Source%20Sans%203:wght@400;500&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap" />
     <link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
     <link rel="stylesheet" href="@Assets["app.css"]" />
     <link rel="stylesheet" href="@Assets["RolemasterDb.App.styles.css"]" />

src/RolemasterDb.App/wwwroot/app.css

@@ -35,8 +35,10 @@
     --info-1: #e5eef4;
     --info-2: #9fb8c8;
     --info-3: #4f7086;
-    --font-body: "Domine", Georgia, serif;
+    --font-display: "Fraunces", Georgia, serif;
-    --font-heading: "Source Sans 3", "Segoe UI", sans-serif;
+    --font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
+    --font-ui: "IBM Plex Sans", "Segoe UI", sans-serif;
+    --font-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
 
     /* Temporary compatibility aliases while existing page styles are migrated. */
     --paper: var(--bg-canvas);
@@ -79,12 +81,16 @@ h3,
 h4,
 h5,
 h6,
+.panel-title {
+    font-family: var(--font-display);
+    font-weight: 500;
+}
+
 label,
 button,
 summary,
 th,
 .eyebrow,
-.panel-title,
 .detail-label,
 .branch-condition,
 .critical-branch-condition,
@@ -95,8 +101,8 @@ th,
 .affix-badge,
 .table-list-title,
 .legend-label {
-    font-family: var(--font-heading);
+    font-family: var(--font-ui);
-    font-weight: 400;
+    font-weight: 500;
 }
 
 strong,
@@ -119,6 +125,12 @@ textarea {
     font: inherit;
 }
 
+code,
+pre,
+.code-block {
+    font-family: var(--font-mono);
+}
+
 .dashboard-grid {
     display: grid;
     gap: 1.25rem;
@@ -647,7 +659,7 @@ textarea {
 
 .table-select-trigger-title {
     color: var(--ink);
-    font-family: var(--font-heading);
+    font-family: var(--font-ui);
 }
 
 .table-select-trigger-chips,
@@ -733,7 +745,7 @@ textarea {
 
 .table-select-option-title {
     color: var(--ink);
-    font-family: var(--font-heading);
+    font-family: var(--font-ui);
     font-weight: 400;
     white-space: nowrap;
     overflow: hidden;
@@ -1290,7 +1302,7 @@ textarea {
     padding: 0.9rem 1rem;
     cursor: pointer;
     list-style: none;
-    font-family: var(--font-heading);
+    font-family: var(--font-ui);
     color: #5b4327;
 }