Add semantic frontend design tokens

docs/tables_frontend_overhaul_implementation_plan.md

@@ -38,6 +38,7 @@ It is intentionally implementation-focused:
 | Date | Phase | Status | Notes |
 | --- | --- | --- | --- |
 | 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. |
 
 ### Lessons Learned
 
@@ -239,6 +240,23 @@ Create the implementation foundation so the visual overhaul does not start with
 
 ## Phase 1: Design System And Application Shell
 
+### Status
+
+`In progress`
+
+### Task Progress
+
+| 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.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. |
+| `P1.6` | Pending | Shell slots and nav utilities depend on the new shell. |
+| `P1.7` | Pending | Skip link and landmark work will land with the shell markup. |
+| `P1.8` | Pending | Tools-specific shell emphasis is final Phase 1 polish. |
+
 ### Goal
 
 Establish the shared shell, tokens, typography, and theme system that every destination will inherit.

src/RolemasterDb.App/wwwroot/app.css

@@ -1,23 +1,61 @@
 :root {
-    --paper: #f7f1e4;
+    --bg-canvas: #f4ecda;
-    --paper-strong: #fff9ee;
+    --bg-canvas-strong: #eadbc0;
-    --ink: #261a14;
+    --bg-elevated: #fff9ee;
-    --ink-soft: #5a4c41;
+    --bg-overlay: rgba(38, 26, 20, 0.44);
-    --accent: #8f5a2f;
+    --surface-1: rgba(255, 250, 240, 0.82);
-    --accent-strong: #b8793b;
+    --surface-2: rgba(255, 255, 255, 0.72);
-    --panel: rgba(255, 250, 240, 0.82);
+    --surface-3: rgba(255, 252, 244, 0.75);
-    --line: rgba(111, 87, 59, 0.18);
+    --surface-tooling: rgba(247, 239, 225, 0.65);
-    --shadow: 0 18px 40px rgba(41, 22, 11, 0.12);
+    --text-primary: #261a14;
+    --text-secondary: #5a4c41;
+    --text-tertiary: #7b6243;
+    --text-on-accent: #fff8ef;
+    --border-subtle: rgba(111, 87, 59, 0.12);
+    --border-default: rgba(111, 87, 59, 0.18);
+    --border-strong: rgba(111, 87, 59, 0.28);
+    --focus-ring: rgba(184, 121, 59, 0.35);
+    --focus-border: rgba(184, 121, 59, 0.45);
+    --shadow-1: 0 18px 40px rgba(41, 22, 11, 0.12);
+    --shadow-2: 0 28px 60px rgba(41, 22, 11, 0.24);
+    --accent-1: #f7ead8;
+    --accent-2: #e7c89e;
+    --accent-3: #c38a4d;
+    --accent-4: #b8793b;
+    --accent-5: #8f5a2f;
+    --success-1: #e8f1e3;
+    --success-2: #bad0ab;
+    --success-3: #668a53;
+    --warning-1: #fff2df;
+    --warning-2: #f0bf7f;
+    --warning-3: #b8793b;
+    --danger-1: #f7e2de;
+    --danger-2: #d9897d;
+    --danger-3: #8d2b1e;
+    --info-1: #e5eef4;
+    --info-2: #9fb8c8;
+    --info-3: #4f7086;
     --font-body: "Domine", Georgia, serif;
     --font-heading: "Source Sans 3", "Segoe UI", sans-serif;
+
+    /* Temporary compatibility aliases while existing page styles are migrated. */
+    --paper: var(--bg-canvas);
+    --paper-strong: var(--bg-elevated);
+    --ink: var(--text-primary);
+    --ink-soft: var(--text-secondary);
+    --accent: var(--accent-5);
+    --accent-strong: var(--accent-4);
+    --panel: var(--surface-1);
+    --line: var(--border-default);
+    --shadow: var(--shadow-1);
 }
 
 html, body {
     min-height: 100%;
     background:
         radial-gradient(circle at top, rgba(240, 223, 185, 0.55), transparent 28%),
-        linear-gradient(180deg, #eadbc0 0%, #f4ecda 38%, #e2d3b7 100%);
+        linear-gradient(180deg, var(--bg-canvas-strong) 0%, var(--bg-canvas) 38%, #e2d3b7 100%);
-    color: var(--ink);
+    color: var(--text-primary);
     font-family: var(--font-body);
     font-weight: 400;
 }
@@ -67,7 +105,7 @@ b {
 }
 
 a, .btn-link {
-    color: var(--accent);
+    color: var(--accent-5);
 }
 
 a:hover {
@@ -88,10 +126,10 @@ textarea {
 }
 
 .panel {
-    border: 1px solid var(--line);
+    border: 1px solid var(--border-default);
     border-radius: 24px;
-    background: var(--panel);
+    background: var(--surface-1);
-    box-shadow: var(--shadow);
+    box-shadow: var(--shadow-1);
 }
 
 .panel {
@@ -105,7 +143,7 @@ textarea {
 
 .panel-copy,
 .muted {
-    color: var(--ink-soft);
+    color: var(--text-secondary);
 }
 
 .lookup-form {
@@ -152,8 +190,8 @@ textarea {
 }
 
 .input-shell:focus {
-    outline: 2px solid rgba(184, 121, 59, 0.35);
+    outline: 2px solid var(--focus-ring);
-    border-color: rgba(184, 121, 59, 0.45);
+    border-color: var(--focus-border);
 }
 
 .action-row {
@@ -167,8 +205,8 @@ textarea {
     border: none;
     border-radius: 999px;
     padding: 0.8rem 1.15rem;
-    background: linear-gradient(135deg, var(--accent-strong), var(--accent));
+    background: linear-gradient(135deg, var(--accent-4), var(--accent-5));
-    color: #fff8ef;
+    color: var(--text-on-accent);
     letter-spacing: 0.04em;
     box-shadow: 0 10px 18px rgba(143, 90, 47, 0.2);
 }