diff --git a/blog-cloudflare/.agents/skills/creating-plugins/references/admin-ui.md b/blog-cloudflare/.agents/skills/creating-plugins/references/admin-ui.md
index e2289e1..9e26b8d 100644
--- a/blog-cloudflare/.agents/skills/creating-plugins/references/admin-ui.md
+++ b/blog-cloudflare/.agents/skills/creating-plugins/references/admin-ui.md
@@ -12,7 +12,7 @@ import { SettingsPage } from "./components/SettingsPage";
 import { ReportsPage } from "./components/ReportsPage";
 import { StatusWidget } from "./components/StatusWidget";
 
-// Pages keyed by path (must match admin.pages paths)
+// Pages keyed by path (trailing slash optional, so /settings and /settings/ both resolve)
 export const pages = {
 	"/settings": SettingsPage,
 	"/reports": ReportsPage,
diff --git a/blog-cloudflare/.agents/skills/creating-plugins/references/api-routes.md b/blog-cloudflare/.agents/skills/creating-plugins/references/api-routes.md
index c4d2419..8ecf112 100644
--- a/blog-cloudflare/.agents/skills/creating-plugins/references/api-routes.md
+++ b/blog-cloudflare/.agents/skills/creating-plugins/references/api-routes.md
@@ -175,7 +175,9 @@ routes: {
 	},
 	"settings/save": {
 		handler: async (ctx) => {
-			const input = await ctx.request.json();
+			// EmDash parses the request body once and exposes it as ctx.input.
+			// Don't call ctx.request.json() — the body stream is already consumed.
+			const input = ctx.input as Record<string, unknown>;
 			for (const [key, value] of Object.entries(input)) {
 				if (value !== undefined) await ctx.kv.set(`settings:${key}`, value);
 			}
diff --git a/blog-cloudflare/.agents/skills/creating-plugins/references/block-kit.md b/blog-cloudflare/.agents/skills/creating-plugins/references/block-kit.md
index 397505b..5354e91 100644
--- a/blog-cloudflare/.agents/skills/creating-plugins/references/block-kit.md
+++ b/blog-cloudflare/.agents/skills/creating-plugins/references/block-kit.md
@@ -16,10 +16,16 @@ Block Kit elements are also used for [Portable Text block editing fields](./port
 6. Plugin returns new blocks
 
 ```typescript
+import type { BlockInteraction } from "@emdash-cms/blocks";
+
 routes: {
 	admin: {
 		handler: async (ctx) => {
-			const interaction = await ctx.request.json();
+			// EmDash parses the request body once and exposes it as ctx.input;
+			// read it directly rather than ctx.request.json() (the body is consumed).
+			// BlockInteraction is the discriminated union of page_load,
+			// block_action, and form_submit payloads.
+			const interaction = ctx.input as BlockInteraction;
 
 			if (interaction.type === "page_load") {
 				return {
diff --git a/blog-cloudflare/AGENTS.md b/blog-cloudflare/AGENTS.md
index 912334c..3a15e60 100644
--- a/blog-cloudflare/AGENTS.md
+++ b/blog-cloudflare/AGENTS.md
@@ -70,23 +70,26 @@ Site settings have `title` and `tagline` -- both render in the header / footer.
 
 ## Visual character
 
-Single typeface: **Inter** on `--font-sans`, used for everything including headings (with tighter letter-spacing on h1/h2). **JetBrains Mono** on `--font-mono` for inline code and code blocks. Body and headings share the same family; weight and size carry the hierarchy.
+Single typeface: **Inter** on `--font-body`, used for everything including headings (`--font-heading` defaults to the body face; tighter letter-spacing on h1/h2). **JetBrains Mono** on `--font-mono` for inline code and code blocks. Body and headings share the same family; weight and size carry the hierarchy (`--font-weight-heading` 600, `--font-weight-display` 700 for h1/page titles).
 
-The accent is `#0066cc` -- used for links, the post-card title hover, and the search input focus ring. There's also a secondary text colour (`--color-text-secondary`) and a `--color-muted` for meta info. Don't add a second accent.
+The brand colour is `#0066cc` (`--color-brand`) -- used for links, the post-card title hover, and the search input focus ring. There's also a secondary text colour (`--color-text-secondary`) and a `--color-muted` for meta info. Don't add a second accent.
 
 The article layout is the standout feature: a three-column reading view with a left meta column (author bylines, date), centred 680px body column, and a right gutter for search, table of contents, and categories. Don't flatten that into one column on desktop -- the layout signals "this is something to read".
 
 ## Customisation
 
-`src/styles/theme.css` is the only file to edit for visual changes. Every CSS variable from `Base.astro` is listed there as a commented default -- uncomment and change to override. The dark mode palette is defined inside `Base.astro` itself; light-mode overrides in `theme.css` won't affect dark mode. To customise dark mode, add `@media (prefers-color-scheme: dark)` and `:root.dark` rules in `theme.css`.
+Design tokens live in `src/styles/tokens.css` with their default values. To restyle the site, override tokens in `src/styles/theme.css` -- declarations there are unlayered, so they always beat the `@layer base` defaults. Don't edit `tokens.css` or `Base.astro` for visual changes.
 
-Fonts are configured in `astro.config.mjs` under `fonts:`. To swap the body face, change the `name:` for the entry bound to `cssVariable: "--font-sans"`. Good alternatives: Geist, IBM Plex Sans, Söhne (if you have a licence), Public Sans. If you want a serif-bodied blog, swap to a humanist serif like Source Serif, Crimson Pro, or Lora -- but then also raise `--font-size-base` to `1.0625rem` for readability.
+Colours are defined with `light-dark(<light>, <dark>)`, so each token carries both modes. Overriding with a plain colour changes light and dark at once; use `light-dark()` in the override to keep them distinct. There is no separate dark palette to maintain.
 
-CSS variables worth knowing:
+Webfonts are configured in `astro.config.mjs` under `fonts:`. To swap the body face, change the `name:` for the entry bound to `cssVariable: "--font-body"`. Good alternatives: Geist, IBM Plex Sans, Söhne (if you have a licence), Public Sans. If you want a serif-bodied blog, swap to a humanist serif like Source Serif, Crimson Pro, or Lora -- but then also raise `--font-size-base` to `1.0625rem` for readability. To give headings their own face (or use a system font) without touching the font pipeline, override `--font-heading` or `--font-body` in `theme.css`.
 
-- `--color-accent`, `--color-accent-hover`, `--color-on-accent`, `--color-accent-ring`
+CSS variables worth knowing (see `tokens.css` for the full list):
+
+- `--color-brand`, `--color-brand-hover`, `--color-on-brand`, `--color-brand-ring`
 - `--color-bg`, `--color-bg-subtle`, `--color-surface`, `--color-text`, `--color-text-secondary`, `--color-muted`, `--color-border`, `--color-border-subtle`
-- `--font-sans`, `--font-mono`
+- `--font-body`, `--font-heading`, `--font-mono`
+- `--font-weight-heading` (600) / `--font-weight-display` (700) -- heading weights; lower them if you switch to a serif
 - `--tracking-tight` / `--tracking-snug` / `--tracking-wide` / `--tracking-wider` -- letter-spacing tokens used across headings and meta labels
 - `--content-width` (680px) -- article body column
 - `--wide-width` (1200px) -- max container
diff --git a/blog-cloudflare/astro.config.mjs b/blog-cloudflare/astro.config.mjs
index 1b87b1d..67dc302 100644
--- a/blog-cloudflare/astro.config.mjs
+++ b/blog-cloudflare/astro.config.mjs
@@ -28,7 +28,7 @@ export default defineConfig({
 		{
 			provider: fontProviders.google(),
 			name: "Inter",
-			cssVariable: "--font-sans",
+			cssVariable: "--font-body",
 			weights: [400, 500, 600, 700],
 			fallbacks: ["sans-serif"],
 		},
diff --git a/blog-cloudflare/package.json b/blog-cloudflare/package.json
index 55b89dd..7932c9b 100644
--- a/blog-cloudflare/package.json
+++ b/blog-cloudflare/package.json
@@ -16,11 +16,11 @@
   "dependencies": {
     "@astrojs/cloudflare": "^14.0.0",
     "@astrojs/react": "^6.0.0",
-    "@emdash-cms/cloudflare": "^0.27.0",
+    "@emdash-cms/cloudflare": "^0.28.1",
     "@emdash-cms/plugin-forms": "^0.2.4",
     "@emdash-cms/plugin-webhook-notifier": "^0.2.0",
     "astro": "^7.0.0",
-    "emdash": "^0.27.0",
+    "emdash": "^0.28.1",
     "react": "19.2.4",
     "react-dom": "19.2.4"
   },
diff --git a/blog-cloudflare/src/components/PostCard.astro b/blog-cloudflare/src/components/PostCard.astro
index 09d1d9d..80fa416 100644
--- a/blog-cloudflare/src/components/PostCard.astro
+++ b/blog-cloudflare/src/components/PostCard.astro
@@ -173,7 +173,7 @@ const formattedDate = date
 
 	.card-title {
 		font-size: var(--font-size-xl);
-		font-weight: 600;
+		font-weight: var(--font-weight-heading);
 		line-height: var(--leading-snug);
 		letter-spacing: var(--tracking-snug);
 		margin-bottom: var(--spacing-2);
@@ -181,7 +181,7 @@ const formattedDate = date
 	}
 
 	.card-link:hover .card-title {
-		color: var(--color-accent);
+		color: var(--color-brand);
 	}
 
 	.card-excerpt {
@@ -256,7 +256,7 @@ const formattedDate = date
 	}
 
 	.byline-more:focus-visible {
-		outline: 2px solid var(--color-accent);
+		outline: 2px solid var(--color-brand);
 	}
 
 	.byline-more[data-tooltip]:hover::after,
diff --git a/blog-cloudflare/src/layouts/Base.astro b/blog-cloudflare/src/layouts/Base.astro
index 67c46e3..30520cd 100644
--- a/blog-cloudflare/src/layouts/Base.astro
+++ b/blog-cloudflare/src/layouts/Base.astro
@@ -10,6 +10,7 @@ import { createPublicPageContext } from "emdash/page";
 import LiveSearch from "emdash/ui/search";
 import { Font } from "astro:assets";
 import { resolveBlogSiteIdentity } from "../utils/site-identity";
+import "../styles/tokens.css";
 import "../styles/theme.css";
 
 interface Props {
@@ -81,20 +82,19 @@ const isLoggedIn = !!Astro.locals.user;
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<Font cssVariable="--font-sans" preload />
+		<Font cssVariable="--font-body" preload />
 		<Font cssVariable="--font-mono" />
 		<title>{fullTitle}</title>
 		<EmDashHead page={pageCtx} />
 		<script is:inline>
-			// Apply theme immediately to prevent flash
+			// Apply an explicit theme choice immediately to prevent flash.
+			// With no cookie, color-scheme: light dark follows the OS.
 			(function () {
 				var c = document.cookie;
 				var i = c.indexOf("theme=");
 				var theme = i >= 0 ? c.slice(i + 6).split(";")[0] : null;
 				if (theme === "dark" || theme === "light") {
 					document.documentElement.classList.add(theme);
-				} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-					document.documentElement.classList.add("dark");
 				}
 			})();
 		</script>
@@ -304,9 +304,6 @@ const isLoggedIn = !!Astro.locals.user;
 				if (theme === "system") {
 					setCookie("theme", "");
 					root.classList.remove("light", "dark");
-					if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-						root.classList.add("dark");
-					}
 				} else {
 					setCookie("theme", theme);
 					root.classList.remove("light", "dark");
@@ -335,15 +332,6 @@ const isLoggedIn = !!Astro.locals.user;
 					setTheme(btn.dataset.theme || "system");
 				});
 			});
-
-			// Listen for system preference changes
-			window
-				.matchMedia("(prefers-color-scheme: dark)")
-				.addEventListener("change", (e) => {
-					if (getStoredTheme() === "system") {
-						root.classList.toggle("dark", e.matches);
-					}
-				});
 		</script>
 
 		<style is:global>
@@ -383,142 +371,22 @@ const isLoggedIn = !!Astro.locals.user;
 					padding: 0;
 				}
 
-				:root {
-					/* Colors - Light mode (default) */
-					--color-bg: #ffffff;
-					--color-bg-subtle: #fafafa;
-					--color-text: #1a1a1a;
-					--color-text-secondary: #525252;
-					--color-muted: #8b8b8b;
-					--color-border: #e5e5e5;
-					--color-border-subtle: #f0f0f0;
-					--color-surface: #f7f7f7;
-					--color-accent: #0066cc;
-					--color-accent-hover: #0052a3;
-					--color-on-accent: white;
-					--color-accent-ring: color-mix(
-						in srgb,
-						var(--color-accent) 25%,
-						transparent
-					);
-
-					/* EmDash search theming */
-					--emdash-search-bg: var(--color-bg);
-					--emdash-search-text: var(--color-text);
-					--emdash-search-muted: var(--color-muted);
-					--emdash-search-border: var(--color-border);
-					--emdash-search-hover: var(--color-surface);
-					--emdash-search-highlight: var(--color-text);
-
-					/* Type scale - more refined */
-					--font-size-xs: 0.8125rem;
-					--font-size-sm: 0.875rem;
-					--font-size-base: 1rem;
-					--font-size-lg: 1.125rem;
-					--font-size-xl: 1.25rem;
-					--font-size-2xl: 1.5rem;
-					--font-size-3xl: 2rem;
-					--font-size-4xl: 2.5rem;
-					--font-size-5xl: 3.5rem;
-
-					/* Line heights */
-					--leading-tight: 1.15;
-					--leading-snug: 1.3;
-					--leading-normal: 1.5;
-					--leading-relaxed: 1.7;
-
-					/* Spacing - more generous */
-					--spacing-1: 0.25rem;
-					--spacing-2: 0.5rem;
-					--spacing-3: 0.75rem;
-					--spacing-4: 1rem;
-					--spacing-5: 1.25rem;
-					--spacing-6: 1.5rem;
-					--spacing-8: 2rem;
-					--spacing-10: 2.5rem;
-					--spacing-12: 3rem;
-					--spacing-16: 4rem;
-					--spacing-20: 5rem;
-					--spacing-24: 6rem;
-
-					/* Legacy spacing aliases */
-					--spacing-xs: var(--spacing-1);
-					--spacing-sm: var(--spacing-2);
-					--spacing-md: var(--spacing-4);
-					--spacing-lg: var(--spacing-6);
-					--spacing-xl: var(--spacing-8);
-					--spacing-2xl: var(--spacing-12);
-					--spacing-3xl: var(--spacing-16);
-
-					/* Layout - wider for three-column */
-					--content-width: 680px;
-					--wide-width: 1200px;
-					--max-width: var(--content-width);
-					--gutter-width: 200px;
-					--radius: 4px;
-					--radius-lg: 8px;
-
-					/* Transitions */
-					--transition-fast: 120ms ease;
-					--transition-base: 180ms ease;
-
-					/* Nav */
-					--nav-height: 64px;
-
-					/* Search */
-					--search-input-width: 180px;
-
-					/* Article layout */
-					--meta-col-width: 180px;
-
-					/* Avatar sizes */
-					--avatar-size-xs: 18px;
-					--avatar-size-sm: 20px;
-					--avatar-size-md: 24px;
-					--avatar-size-lg: 32px;
-
-					/* Letter spacing */
-					--tracking-tight: -0.03em;
-					--tracking-snug: -0.02em;
-					--tracking-wide: 0.06em;
-					--tracking-wider: 0.08em;
-
-					/* Tag pill */
-					--tag-padding-y: 2px;
-
-					/* Shadows */
-					--shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.12);
-					--shadow-btn-active: 0 1px 2px rgba(0, 0, 0, 0.05);
-				}
-
-				/* Dark mode via system preference (when no explicit class) */
-				@media (prefers-color-scheme: dark) {
-					:root:not(.light) {
-						--color-bg: #0d0d0d;
-						--color-bg-subtle: #141414;
-						--color-text: #ededed;
-						--color-text-secondary: #a0a0a0;
-						--color-muted: #6b6b6b;
-						--color-border: #2a2a2a;
-						--color-border-subtle: #1f1f1f;
-						--color-surface: #181818;
-						--color-accent: #4d9fff;
-						--color-accent-hover: #6eb0ff;
+				/*
+				 * Design tokens live in src/styles/tokens.css. Colors are
+				 * defined with light-dark(); these rules pin the scheme when
+				 * the footer switcher sets an explicit choice. With no class,
+				 * color-scheme: light dark follows the OS preference. The
+				 * @supports guard keeps the toggle from forcing dark UA form
+				 * controls on browsers stuck on the plain-light fallback.
+				 */
+				@supports (color: light-dark(#000, #fff)) {
+					:root.light {
+						color-scheme: light;
 					}
-				}
 
-				/* Explicit dark mode */
-				:root.dark {
-					--color-bg: #0d0d0d;
-					--color-bg-subtle: #141414;
-					--color-text: #ededed;
-					--color-text-secondary: #a0a0a0;
-					--color-muted: #6b6b6b;
-					--color-border: #2a2a2a;
-					--color-border-subtle: #1f1f1f;
-					--color-surface: #181818;
-					--color-accent: #4d9fff;
-					--color-accent-hover: #6eb0ff;
+					:root.dark {
+						color-scheme: dark;
+					}
 				}
 
 				html {
@@ -526,7 +394,7 @@ const isLoggedIn = !!Astro.locals.user;
 				}
 
 				body {
-					font-family: var(--font-sans);
+					font-family: var(--font-body);
 					font-size: var(--font-size-base);
 					line-height: var(--leading-relaxed);
 					color: var(--color-text);
@@ -537,13 +405,13 @@ const isLoggedIn = !!Astro.locals.user;
 				}
 
 				a:where(:not([class*="emdash"]):not([class*="ec-"])) {
-					color: var(--color-accent);
+					color: var(--color-brand);
 					text-decoration: none;
 					transition: color var(--transition-fast);
 				}
 
 				a:where(:not([class*="emdash"]):not([class*="ec-"])):hover {
-					color: var(--color-accent-hover);
+					color: var(--color-brand-hover);
 				}
 
 				img {
@@ -558,20 +426,20 @@ const isLoggedIn = !!Astro.locals.user;
 				h4,
 				h5,
 				h6 {
-					font-family: var(--font-sans);
+					font-family: var(--font-heading);
 					line-height: var(--leading-tight);
-					font-weight: 600;
+					font-weight: var(--font-weight-heading);
 					letter-spacing: var(--tracking-snug);
 				}
 
 				h1 {
-					font-weight: 700;
+					font-weight: var(--font-weight-display);
 					letter-spacing: var(--tracking-tight);
 				}
 
 				::selection {
-					background: var(--color-accent);
-					color: white;
+					background: var(--color-brand);
+					color: var(--color-on-brand);
 				}
 			}
 		</style>
@@ -606,7 +474,7 @@ const isLoggedIn = !!Astro.locals.user;
 			}
 
 			.site-title:hover {
-				color: var(--color-accent);
+				color: var(--color-brand);
 			}
 
 			.site-logo-img {
@@ -636,7 +504,7 @@ const isLoggedIn = !!Astro.locals.user;
 			}
 
 			.nav-links a:hover {
-				color: var(--color-accent);
+				color: var(--color-brand);
 			}
 
 			.nav-admin {
@@ -654,13 +522,13 @@ const isLoggedIn = !!Astro.locals.user;
 			.site-search {
 				position: relative;
 				width: var(--search-input-width);
-				--emdash-search-border-focus: var(--color-accent);
+				--emdash-search-border-focus: var(--color-brand);
 			}
 
 			:global(.site-search-input) {
 				width: var(--search-input-width);
 				padding: var(--spacing-2) var(--spacing-3);
-				font-family: var(--font-sans);
+				font-family: var(--font-body);
 				font-size: var(--font-size-sm);
 				border: 1px solid var(--color-border);
 				border-radius: var(--radius);
@@ -678,8 +546,8 @@ const isLoggedIn = !!Astro.locals.user;
 			:global(.site-search-input):focus,
 			:global(.site-search-input):focus-visible {
 				outline: none;
-				border-color: var(--color-accent) !important;
-				box-shadow: 0 0 0 3px var(--color-accent-ring);
+				border-color: var(--color-brand) !important;
+				box-shadow: 0 0 0 3px var(--color-brand-ring);
 			}
 
 			:global(.site-search-results) {
@@ -691,7 +559,7 @@ const isLoggedIn = !!Astro.locals.user;
 				background: var(--color-bg);
 				border: 1px solid var(--color-border);
 				border-radius: var(--radius-lg);
-				box-shadow: var(--shadow-dropdown);
+				box-shadow: var(--shadow-lg);
 				max-height: 400px;
 				overflow-y: auto;
 				z-index: 1000;
@@ -902,7 +770,7 @@ const isLoggedIn = !!Astro.locals.user;
 			.theme-btn.active {
 				background: var(--color-bg);
 				color: var(--color-text);
-				box-shadow: var(--shadow-btn-active);
+				box-shadow: var(--shadow-sm);
 			}
 
 			.theme-btn svg {
diff --git a/blog-cloudflare/src/pages/category/[slug].astro b/blog-cloudflare/src/pages/category/[slug].astro
index f0bbf70..64bd0aa 100644
--- a/blog-cloudflare/src/pages/category/[slug].astro
+++ b/blog-cloudflare/src/pages/category/[slug].astro
@@ -87,7 +87,7 @@ const filteredPosts = posts.map((post) => ({
 		display: block;
 		font-size: var(--font-size-xs);
 		font-weight: 500;
-		color: var(--color-accent);
+		color: var(--color-brand);
 		text-transform: uppercase;
 		letter-spacing: var(--tracking-wider);
 		margin-bottom: var(--spacing-2);
@@ -95,7 +95,7 @@ const filteredPosts = posts.map((post) => ({
 
 	.archive-title {
 		font-size: var(--font-size-4xl);
-		font-weight: 700;
+		font-weight: var(--font-weight-display);
 		letter-spacing: var(--tracking-tight);
 		margin-bottom: var(--spacing-2);
 	}
diff --git a/blog-cloudflare/src/pages/index.astro b/blog-cloudflare/src/pages/index.astro
index da6b71c..f49ef41 100644
--- a/blog-cloudflare/src/pages/index.astro
+++ b/blog-cloudflare/src/pages/index.astro
@@ -302,7 +302,7 @@ function formatDate(date: Date | null | undefined) {
 
 	.featured-title {
 		font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl));
-		font-weight: 700;
+		font-weight: var(--font-weight-display);
 		line-height: var(--leading-tight);
 		letter-spacing: var(--tracking-tight);
 		transition: color var(--transition-fast);
@@ -310,7 +310,7 @@ function formatDate(date: Date | null | undefined) {
 
 	.featured-title-link:hover .featured-title,
 	.featured-grid:has(.featured-image-link:hover) .featured-title {
-		color: var(--color-accent);
+		color: var(--color-brand);
 	}
 
 	.featured-excerpt {
@@ -364,13 +364,13 @@ function formatDate(date: Date | null | undefined) {
 
 	.section-link {
 		font-size: var(--font-size-sm);
-		color: var(--color-accent);
+		color: var(--color-brand);
 		text-decoration: none;
 		transition: color var(--transition-fast);
 	}
 
 	.section-link:hover {
-		color: var(--color-accent-hover);
+		color: var(--color-brand-hover);
 	}
 
 	/* Posts Grid */
@@ -397,7 +397,7 @@ function formatDate(date: Date | null | undefined) {
 
 	.empty-state h2 {
 		font-size: var(--font-size-2xl);
-		font-weight: 600;
+		font-weight: var(--font-weight-heading);
 	}
 
 	.empty-state p {
@@ -408,8 +408,8 @@ function formatDate(date: Date | null | undefined) {
 		display: inline-block;
 		margin-top: var(--spacing-4);
 		padding: var(--spacing-3) var(--spacing-6);
-		background: var(--color-accent);
-		color: var(--color-on-accent);
+		background: var(--color-brand);
+		color: var(--color-on-brand);
 		text-decoration: none;
 		border-radius: var(--radius);
 		font-size: var(--font-size-sm);
@@ -418,7 +418,7 @@ function formatDate(date: Date | null | undefined) {
 	}
 
 	.btn:hover {
-		background: var(--color-accent-hover);
+		background: var(--color-brand-hover);
 	}
 
 	/* Responsive */
diff --git a/blog-cloudflare/src/pages/pages/[slug].astro b/blog-cloudflare/src/pages/pages/[slug].astro
index 3c15fea..db1753c 100644
--- a/blog-cloudflare/src/pages/pages/[slug].astro
+++ b/blog-cloudflare/src/pages/pages/[slug].astro
@@ -46,7 +46,7 @@ if (Astro.cache?.enabled) Astro.cache.set(cacheHint);
 
 	.page-title {
 		font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl));
-		font-weight: 700;
+		font-weight: var(--font-weight-display);
 		line-height: var(--leading-tight);
 	}
 
diff --git a/blog-cloudflare/src/pages/posts/[slug].astro b/blog-cloudflare/src/pages/posts/[slug].astro
index 0cc892f..0d45757 100644
--- a/blog-cloudflare/src/pages/posts/[slug].astro
+++ b/blog-cloudflare/src/pages/posts/[slug].astro
@@ -495,7 +495,7 @@ const publishDate =
 
 	.article-title {
 		font-size: clamp(2rem, 5vw, var(--font-size-5xl));
-		font-weight: 700;
+		font-weight: var(--font-weight-display);
 		line-height: var(--leading-tight);
 		letter-spacing: var(--tracking-tight);
 		margin-bottom: var(--spacing-4);
@@ -588,7 +588,7 @@ const publishDate =
 	}
 
 	.article-content :global(a) {
-		color: var(--color-accent);
+		color: var(--color-brand);
 		text-decoration: underline;
 		text-underline-offset: 3px;
 		text-decoration-thickness: 1px;
@@ -687,7 +687,7 @@ const publishDate =
 	.sidebar-widgets :global(.widget-search__input) {
 		width: 100%;
 		padding: var(--spacing-2) var(--spacing-3);
-		font-family: var(--font-sans);
+		font-family: var(--font-body);
 		font-size: var(--font-size-sm);
 		border: 1px solid var(--color-border);
 		border-radius: var(--radius);
@@ -705,8 +705,8 @@ const publishDate =
 	.sidebar-widgets :global(.widget-search__input):focus,
 	.sidebar-widgets :global(.widget-search__input):focus-visible {
 		outline: none;
-		border-color: var(--color-accent);
-		box-shadow: 0 0 0 3px var(--color-accent-ring);
+		border-color: var(--color-brand);
+		box-shadow: 0 0 0 3px var(--color-brand-ring);
 	}
 
 	.sidebar-widgets :global(.widget-search__button) {
@@ -863,7 +863,7 @@ const publishDate =
 
 	.article-comments :global(.ec-comments-heading) {
 		font-size: var(--font-size-2xl);
-		font-weight: 600;
+		font-weight: var(--font-weight-heading);
 		margin-bottom: var(--spacing-8);
 	}
 
@@ -893,8 +893,8 @@ const publishDate =
 	}
 
 	.article-comments :global(.ec-comment-form-submit) {
-		background: var(--color-accent) !important;
-		color: var(--color-on-accent) !important;
+		background: var(--color-brand) !important;
+		color: var(--color-on-brand) !important;
 	}
 
 	/* More posts section */
@@ -912,7 +912,7 @@ const publishDate =
 
 	.more-title {
 		font-size: var(--font-size-2xl);
-		font-weight: 600;
+		font-weight: var(--font-weight-heading);
 		margin-bottom: var(--spacing-10);
 	}
 
diff --git a/blog-cloudflare/src/pages/posts/index.astro b/blog-cloudflare/src/pages/posts/index.astro
index 6c8c3b7..537ebb8 100644
--- a/blog-cloudflare/src/pages/posts/index.astro
+++ b/blog-cloudflare/src/pages/posts/index.astro
@@ -121,7 +121,7 @@ const formatDate = (date: Date) =>
 
 	.page-title {
 		font-size: var(--font-size-4xl);
-		font-weight: 700;
+		font-weight: var(--font-weight-display);
 		letter-spacing: var(--tracking-tight);
 		margin-bottom: var(--spacing-2);
 	}
@@ -214,7 +214,7 @@ const formatDate = (date: Date) =>
 
 	.post-title {
 		font-size: var(--font-size-2xl);
-		font-weight: 600;
+		font-weight: var(--font-weight-heading);
 		line-height: var(--leading-snug);
 		letter-spacing: var(--tracking-snug);
 		margin-bottom: var(--spacing-2);
@@ -222,7 +222,7 @@ const formatDate = (date: Date) =>
 	}
 
 	.post-link:hover .post-title {
-		color: var(--color-accent);
+		color: var(--color-brand);
 	}
 
 	.post-excerpt {
diff --git a/blog-cloudflare/src/pages/search.astro b/blog-cloudflare/src/pages/search.astro
index 98e8a4e..28a3656 100644
--- a/blog-cloudflare/src/pages/search.astro
+++ b/blog-cloudflare/src/pages/search.astro
@@ -100,14 +100,14 @@ const { items: results } = query
 
 	.search-input:focus {
 		outline: none;
-		border-color: var(--color-accent);
+		border-color: var(--color-brand);
 	}
 
 	.search-button {
 		padding: var(--spacing-2) var(--spacing-6);
 		font-size: var(--font-size-base);
-		background: var(--color-accent);
-		color: var(--color-on-accent);
+		background: var(--color-brand);
+		color: var(--color-on-brand);
 		border: none;
 		border-radius: var(--radius);
 		cursor: pointer;
@@ -156,14 +156,14 @@ const { items: results } = query
 
 	.result-title {
 		font-size: var(--font-size-xl);
-		font-weight: 600;
+		font-weight: var(--font-weight-heading);
 		line-height: var(--leading-snug);
 		margin-bottom: var(--spacing-2);
 		transition: color var(--transition-fast);
 	}
 
 	.result-link:hover .result-title {
-		color: var(--color-accent);
+		color: var(--color-brand);
 	}
 
 	.result-snippet {
@@ -174,7 +174,7 @@ const { items: results } = query
 
 	/* FTS returns <mark> wrapping the matched terms */
 	.result-snippet :global(mark) {
-		background: var(--color-accent-ring, rgba(99, 102, 241, 0.2));
+		background: var(--color-brand-ring);
 		color: inherit;
 		padding: 0 0.1em;
 		border-radius: 2px;
diff --git a/blog-cloudflare/src/pages/tag/[slug].astro b/blog-cloudflare/src/pages/tag/[slug].astro
index 85dd186..35d43b3 100644
--- a/blog-cloudflare/src/pages/tag/[slug].astro
+++ b/blog-cloudflare/src/pages/tag/[slug].astro
@@ -89,7 +89,7 @@ const filteredPosts = posts.map((post) => ({
 		display: block;
 		font-size: var(--font-size-xs);
 		font-weight: 500;
-		color: var(--color-accent);
+		color: var(--color-brand);
 		text-transform: uppercase;
 		letter-spacing: var(--tracking-wider);
 		margin-bottom: var(--spacing-2);
@@ -97,7 +97,7 @@ const filteredPosts = posts.map((post) => ({
 
 	.archive-title {
 		font-size: var(--font-size-4xl);
-		font-weight: 700;
+		font-weight: var(--font-weight-display);
 		letter-spacing: var(--tracking-tight);
 		margin-bottom: var(--spacing-2);
 	}
diff --git a/blog-cloudflare/src/styles/theme.css b/blog-cloudflare/src/styles/theme.css
index 2f7249b..0ed080e 100644
--- a/blog-cloudflare/src/styles/theme.css
+++ b/blog-cloudflare/src/styles/theme.css
@@ -1,108 +1,28 @@
 /*
-  theme.css -- override any :root variable here to retheme the blog.
+  theme.css -- your theme overrides. This is the file to edit to
+  retheme the site.
 
-  This is the only file you need to edit to customize the site's visual
-  appearance. All defaults are listed below as comments. Uncomment and
-  change any value to override it.
+  Every design token lives in src/styles/tokens.css (colors, type
+  scale, spacing, layout, shadows) with its default value. Override any
+  of them here: declarations in this file are unlayered, so they always
+  beat the @layer base defaults in tokens.css.
 
-  Base.astro puts its defaults inside @layer base, so declarations here
-  (which are unlayered) always take priority -- no specificity tricks needed.
+  Colors are defined with light-dark(). Overriding with a plain color
+  changes light and dark mode at once; use light-dark(<light>, <dark>)
+  to set different values per mode.
 
-  Note: this template defines explicit dark mode colors in Base.astro.
-  Overriding light-mode --color-* variables here won't affect dark mode.
-  To customize dark mode, also override --color-* variables inside a
-  @media (prefers-color-scheme: dark) block and/or in the :root.dark rule.
-*/
-
-:root {
-	/* --- Colors ---
-	--color-bg: #ffffff;
-	--color-bg-subtle: #fafafa;
-	--color-text: #1a1a1a;
-	--color-text-secondary: #525252;
-	--color-muted: #8b8b8b;
-	--color-border: #e5e5e5;
-	--color-border-subtle: #f0f0f0;
-	--color-surface: #f7f7f7;
-	--color-accent: #0066cc;
-	--color-accent-hover: #0052a3;
-	--color-on-accent: white;
-	--color-accent-ring: color-mix(in srgb, var(--color-accent) 25%, transparent);
-	*/
-
-	/* --- Type scale ---
-	--font-size-xs: 0.8125rem;
-	--font-size-sm: 0.875rem;
-	--font-size-base: 1rem;
-	--font-size-lg: 1.125rem;
-	--font-size-xl: 1.25rem;
-	--font-size-2xl: 1.5rem;
-	--font-size-3xl: 2rem;
-	--font-size-4xl: 2.5rem;
-	--font-size-5xl: 3.5rem;
-	*/
-
-	/* --- Line heights ---
-	--leading-tight: 1.15;
-	--leading-snug: 1.3;
-	--leading-normal: 1.5;
-	--leading-relaxed: 1.7;
-	*/
-
-	/* --- Letter spacing ---
-	--tracking-tight: -0.03em;    used on h1 and large titles
-	--tracking-snug: -0.02em;     used on h2–h6, site/card titles
-	--tracking-wide: 0.06em;      used on meta labels, TOC/widget titles
-	--tracking-wider: 0.08em;     used on footer headings, section labels
-	*/
+  Webfonts are loaded in astro.config.mjs (--font-body, --font-mono).
+  Swap the loaded font there; use overrides here for system fonts or a
+  separate heading face.
 
-	/* --- Spacing ---
-	--spacing-1: 0.25rem;
-	--spacing-2: 0.5rem;
-	--spacing-3: 0.75rem;
-	--spacing-4: 1rem;
-	--spacing-5: 1.25rem;
-	--spacing-6: 1.5rem;
-	--spacing-8: 2rem;
-	--spacing-10: 2.5rem;
-	--spacing-12: 3rem;
-	--spacing-16: 4rem;
-	--spacing-20: 5rem;
-	--spacing-24: 6rem;
-	*/
+  Example:
 
-	/* --- Layout ---
-	--content-width: 680px;       article/page body column width
-	--wide-width: 1200px;         max container width (home, archives)
-	--gutter-width: 200px;        right sidebar column (TOC) on article pages
-	--meta-col-width: 180px;      left meta column on article pages
-	--nav-height: 64px;           sticky header height
-	--search-input-width: 180px;  nav search box width
-	*/
-
-	/* --- Borders & radius ---
-	--radius: 4px;
-	--radius-lg: 8px;
-	*/
-
-	/* --- Transitions ---
-	--transition-fast: 120ms ease;
-	--transition-base: 180ms ease;
-	*/
-
-	/* --- Avatars ---
-	--avatar-size-xs: 18px;    card byline avatars
-	--avatar-size-sm: 20px;    post list byline avatars
-	--avatar-size-md: 24px;    featured post byline avatars
-	--avatar-size-lg: 32px;    single post byline avatars
-	*/
-
-	/* --- Shadows ---
-	--shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.12);
-	--shadow-btn-active: 0 1px 2px rgba(0, 0, 0, 0.05);
-	*/
+  :root {
+    --color-brand: light-dark(#0f766e, #2dd4bf);
+    --font-heading: "Iowan Old Style", Georgia, serif;
+    --radius: 8px;
+  }
+*/
 
-	/* --- Misc ---
-	--tag-padding-y: 2px;    vertical padding on tag pills
-	*/
+:root {
 }
diff --git a/blog-cloudflare/src/styles/tokens.css b/blog-cloudflare/src/styles/tokens.css
new file mode 100644
index 0000000..baf58e8
--- /dev/null
+++ b/blog-cloudflare/src/styles/tokens.css
@@ -0,0 +1,146 @@
+/*
+  tokens.css -- the design tokens for this template. These are the
+  defaults; to customize the site, override any variable in
+  src/styles/theme.css rather than editing this file. Declarations in
+  theme.css are unlayered, so they always beat these @layer base
+  defaults -- no specificity tricks needed.
+
+  Colors use light-dark(): the first value applies in light mode, the
+  second in dark mode. Overriding a color with a plain value changes
+  both modes at once; use light-dark(<light>, <dark>) in an override to
+  keep them distinct.
+
+  --font-body is defined by the font pipeline in astro.config.mjs, not
+  here. To swap the loaded webfont, edit the fonts entry there. To use a
+  system font, or a different face for headings only, override
+  --font-body / --font-heading in theme.css.
+*/
+
+@layer base {
+	:root {
+		color-scheme: light dark;
+
+		/* Colors */
+		--color-bg: light-dark(#ffffff, #0d0d0d);
+		--color-bg-subtle: light-dark(#fafafa, #141414);
+		--color-text: light-dark(#1a1a1a, #ededed);
+		--color-text-secondary: light-dark(#525252, #a0a0a0);
+		--color-muted: light-dark(#8b8b8b, #6b6b6b);
+		--color-border: light-dark(#e5e5e5, #2a2a2a);
+		--color-border-subtle: light-dark(#f0f0f0, #1f1f1f);
+		--color-surface: light-dark(#f7f7f7, #181818);
+		--color-brand: light-dark(#0066cc, #4d9fff);
+		--color-brand-hover: light-dark(#0052a3, #6eb0ff);
+		--color-on-brand: white;
+		--color-brand-ring: color-mix(in srgb, var(--color-brand) 25%, transparent);
+
+		/* EmDash search theming */
+		--emdash-search-bg: var(--color-bg);
+		--emdash-search-text: var(--color-text);
+		--emdash-search-muted: var(--color-muted);
+		--emdash-search-border: var(--color-border);
+		--emdash-search-hover: var(--color-surface);
+		--emdash-search-highlight: var(--color-text);
+
+		/* Typography */
+		--font-heading: var(--font-body);
+		--font-weight-heading: 600; /* h2-h6, card and list titles */
+		--font-weight-display: 700; /* h1 and large page titles */
+
+		/* Type scale */
+		--font-size-xs: 0.8125rem;
+		--font-size-sm: 0.875rem;
+		--font-size-base: 1rem;
+		--font-size-lg: 1.125rem;
+		--font-size-xl: 1.25rem;
+		--font-size-2xl: 1.5rem;
+		--font-size-3xl: 2rem;
+		--font-size-4xl: 2.5rem;
+		--font-size-5xl: 3.5rem;
+
+		/* Line heights */
+		--leading-tight: 1.15;
+		--leading-snug: 1.3;
+		--leading-normal: 1.5;
+		--leading-relaxed: 1.7;
+
+		/* Letter spacing */
+		--tracking-tight: -0.03em; /* h1 and large titles */
+		--tracking-snug: -0.02em; /* h2-h6, site/card titles */
+		--tracking-wide: 0.06em; /* meta labels, TOC/widget titles */
+		--tracking-wider: 0.08em; /* footer headings, section labels */
+
+		/* Spacing */
+		--spacing-1: 0.25rem;
+		--spacing-2: 0.5rem;
+		--spacing-3: 0.75rem;
+		--spacing-4: 1rem;
+		--spacing-5: 1.25rem;
+		--spacing-6: 1.5rem;
+		--spacing-8: 2rem;
+		--spacing-10: 2.5rem;
+		--spacing-12: 3rem;
+		--spacing-16: 4rem;
+		--spacing-20: 5rem;
+		--spacing-24: 6rem;
+
+		/* Legacy spacing aliases */
+		--spacing-xs: var(--spacing-1);
+		--spacing-sm: var(--spacing-2);
+		--spacing-md: var(--spacing-4);
+		--spacing-lg: var(--spacing-6);
+		--spacing-xl: var(--spacing-8);
+		--spacing-2xl: var(--spacing-12);
+		--spacing-3xl: var(--spacing-16);
+
+		/* Layout */
+		--content-width: 680px; /* article/page body column */
+		--wide-width: 1200px; /* max container (home, archives) */
+		--max-width: var(--content-width);
+		--gutter-width: 200px; /* right sidebar column (TOC) on article pages */
+		--meta-col-width: 180px; /* left meta column on article pages */
+		--nav-height: 64px; /* sticky header height */
+		--search-input-width: 180px; /* nav search box width */
+
+		/* Borders & radius */
+		--radius: 4px;
+		--radius-lg: 8px;
+
+		/* Transitions */
+		--transition-fast: 120ms ease;
+		--transition-base: 180ms ease;
+
+		/* Avatars */
+		--avatar-size-xs: 18px; /* card byline avatars */
+		--avatar-size-sm: 20px; /* post list byline avatars */
+		--avatar-size-md: 24px; /* featured post byline avatars */
+		--avatar-size-lg: 32px; /* single post byline avatars */
+
+		/* Shadows */
+		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+		--shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
+
+		/* Misc */
+		--tag-padding-y: 2px; /* vertical padding on tag pills */
+	}
+
+	/*
+	 * Light-mode values for browsers without light-dark() (Safari < 17.5,
+	 * Chrome < 123). Must mirror the light values above.
+	 */
+	@supports not (color: light-dark(#000, #fff)) {
+		:root {
+			color-scheme: light;
+			--color-bg: #ffffff;
+			--color-bg-subtle: #fafafa;
+			--color-text: #1a1a1a;
+			--color-text-secondary: #525252;
+			--color-muted: #8b8b8b;
+			--color-border: #e5e5e5;
+			--color-border-subtle: #f0f0f0;
+			--color-surface: #f7f7f7;
+			--color-brand: #0066cc;
+			--color-brand-hover: #0052a3;
+		}
+	}
+}
diff --git a/blog/.agents/skills/creating-plugins/references/admin-ui.md b/blog/.agents/skills/creating-plugins/references/admin-ui.md
index e2289e1..9e26b8d 100644
--- a/blog/.agents/skills/creating-plugins/references/admin-ui.md
+++ b/blog/.agents/skills/creating-plugins/references/admin-ui.md
@@ -12,7 +12,7 @@ import { SettingsPage } from "./components/SettingsPage";
 import { ReportsPage } from "./components/ReportsPage";
 import { StatusWidget } from "./components/StatusWidget";
 
-// Pages keyed by path (must match admin.pages paths)
+// Pages keyed by path (trailing slash optional, so /settings and /settings/ both resolve)
 export const pages = {
 	"/settings": SettingsPage,
 	"/reports": ReportsPage,
diff --git a/blog/.agents/skills/creating-plugins/references/api-routes.md b/blog/.agents/skills/creating-plugins/references/api-routes.md
index c4d2419..8ecf112 100644
--- a/blog/.agents/skills/creating-plugins/references/api-routes.md
+++ b/blog/.agents/skills/creating-plugins/references/api-routes.md
@@ -175,7 +175,9 @@ routes: {
 	},
 	"settings/save": {
 		handler: async (ctx) => {
-			const input = await ctx.request.json();
+			// EmDash parses the request body once and exposes it as ctx.input.
+			// Don't call ctx.request.json() — the body stream is already consumed.
+			const input = ctx.input as Record<string, unknown>;
 			for (const [key, value] of Object.entries(input)) {
 				if (value !== undefined) await ctx.kv.set(`settings:${key}`, value);
 			}
diff --git a/blog/.agents/skills/creating-plugins/references/block-kit.md b/blog/.agents/skills/creating-plugins/references/block-kit.md
index 397505b..5354e91 100644
--- a/blog/.agents/skills/creating-plugins/references/block-kit.md
+++ b/blog/.agents/skills/creating-plugins/references/block-kit.md
@@ -16,10 +16,16 @@ Block Kit elements are also used for [Portable Text block editing fields](./port
 6. Plugin returns new blocks
 
 ```typescript
+import type { BlockInteraction } from "@emdash-cms/blocks";
+
 routes: {
 	admin: {
 		handler: async (ctx) => {
-			const interaction = await ctx.request.json();
+			// EmDash parses the request body once and exposes it as ctx.input;
+			// read it directly rather than ctx.request.json() (the body is consumed).
+			// BlockInteraction is the discriminated union of page_load,
+			// block_action, and form_submit payloads.
+			const interaction = ctx.input as BlockInteraction;
 
 			if (interaction.type === "page_load") {
 				return {
diff --git a/blog/AGENTS.md b/blog/AGENTS.md
index 912334c..3a15e60 100644
--- a/blog/AGENTS.md
+++ b/blog/AGENTS.md
@@ -70,23 +70,26 @@ Site settings have `title` and `tagline` -- both render in the header / footer.
 
 ## Visual character
 
-Single typeface: **Inter** on `--font-sans`, used for everything including headings (with tighter letter-spacing on h1/h2). **JetBrains Mono** on `--font-mono` for inline code and code blocks. Body and headings share the same family; weight and size carry the hierarchy.
+Single typeface: **Inter** on `--font-body`, used for everything including headings (`--font-heading` defaults to the body face; tighter letter-spacing on h1/h2). **JetBrains Mono** on `--font-mono` for inline code and code blocks. Body and headings share the same family; weight and size carry the hierarchy (`--font-weight-heading` 600, `--font-weight-display` 700 for h1/page titles).
 
-The accent is `#0066cc` -- used for links, the post-card title hover, and the search input focus ring. There's also a secondary text colour (`--color-text-secondary`) and a `--color-muted` for meta info. Don't add a second accent.
+The brand colour is `#0066cc` (`--color-brand`) -- used for links, the post-card title hover, and the search input focus ring. There's also a secondary text colour (`--color-text-secondary`) and a `--color-muted` for meta info. Don't add a second accent.
 
 The article layout is the standout feature: a three-column reading view with a left meta column (author bylines, date), centred 680px body column, and a right gutter for search, table of contents, and categories. Don't flatten that into one column on desktop -- the layout signals "this is something to read".
 
 ## Customisation
 
-`src/styles/theme.css` is the only file to edit for visual changes. Every CSS variable from `Base.astro` is listed there as a commented default -- uncomment and change to override. The dark mode palette is defined inside `Base.astro` itself; light-mode overrides in `theme.css` won't affect dark mode. To customise dark mode, add `@media (prefers-color-scheme: dark)` and `:root.dark` rules in `theme.css`.
+Design tokens live in `src/styles/tokens.css` with their default values. To restyle the site, override tokens in `src/styles/theme.css` -- declarations there are unlayered, so they always beat the `@layer base` defaults. Don't edit `tokens.css` or `Base.astro` for visual changes.
 
-Fonts are configured in `astro.config.mjs` under `fonts:`. To swap the body face, change the `name:` for the entry bound to `cssVariable: "--font-sans"`. Good alternatives: Geist, IBM Plex Sans, Söhne (if you have a licence), Public Sans. If you want a serif-bodied blog, swap to a humanist serif like Source Serif, Crimson Pro, or Lora -- but then also raise `--font-size-base` to `1.0625rem` for readability.
+Colours are defined with `light-dark(<light>, <dark>)`, so each token carries both modes. Overriding with a plain colour changes light and dark at once; use `light-dark()` in the override to keep them distinct. There is no separate dark palette to maintain.
 
-CSS variables worth knowing:
+Webfonts are configured in `astro.config.mjs` under `fonts:`. To swap the body face, change the `name:` for the entry bound to `cssVariable: "--font-body"`. Good alternatives: Geist, IBM Plex Sans, Söhne (if you have a licence), Public Sans. If you want a serif-bodied blog, swap to a humanist serif like Source Serif, Crimson Pro, or Lora -- but then also raise `--font-size-base` to `1.0625rem` for readability. To give headings their own face (or use a system font) without touching the font pipeline, override `--font-heading` or `--font-body` in `theme.css`.
 
-- `--color-accent`, `--color-accent-hover`, `--color-on-accent`, `--color-accent-ring`
+CSS variables worth knowing (see `tokens.css` for the full list):
+
+- `--color-brand`, `--color-brand-hover`, `--color-on-brand`, `--color-brand-ring`
 - `--color-bg`, `--color-bg-subtle`, `--color-surface`, `--color-text`, `--color-text-secondary`, `--color-muted`, `--color-border`, `--color-border-subtle`
-- `--font-sans`, `--font-mono`
+- `--font-body`, `--font-heading`, `--font-mono`
+- `--font-weight-heading` (600) / `--font-weight-display` (700) -- heading weights; lower them if you switch to a serif
 - `--tracking-tight` / `--tracking-snug` / `--tracking-wide` / `--tracking-wider` -- letter-spacing tokens used across headings and meta labels
 - `--content-width` (680px) -- article body column
 - `--wide-width` (1200px) -- max container
diff --git a/blog/astro.config.mjs b/blog/astro.config.mjs
index 726b23c..19e1d9a 100644
--- a/blog/astro.config.mjs
+++ b/blog/astro.config.mjs
@@ -29,7 +29,7 @@ export default defineConfig({
 		{
 			provider: fontProviders.google(),
 			name: "Inter",
-			cssVariable: "--font-sans",
+			cssVariable: "--font-body",
 			weights: [400, 500, 600, 700],
 			fallbacks: ["sans-serif"],
 		},
diff --git a/blog/emdash-env.d.ts b/blog/emdash-env.d.ts
index e1a5a89..4c380e8 100644
--- a/blog/emdash-env.d.ts
+++ b/blog/emdash-env.d.ts
@@ -23,7 +23,7 @@ export interface Post {
   slug: string | null;
   status: string;
   title: string;
-  featured_image?: { id: string; src?: string; alt?: string; width?: number; height?: number };
+  featured_image?: { id: string; src?: string; alt?: string; width?: number; height?: number; provider?: string; previewUrl?: string; meta?: Record<string, unknown> };
   content?: PortableTextBlock[];
   excerpt?: string;
   createdAt: Date;
diff --git a/blog/package.json b/blog/package.json
index fda679f..ca22f24 100644
--- a/blog/package.json
+++ b/blog/package.json
@@ -19,7 +19,7 @@
     "@emdash-cms/plugin-audit-log": "^0.2.0",
     "astro": "^7.0.0",
     "better-sqlite3": "^12.8.0",
-    "emdash": "^0.27.0",
+    "emdash": "^0.28.1",
     "react": "19.2.4",
     "react-dom": "19.2.4"
   },
diff --git a/blog/src/components/PostCard.astro b/blog/src/components/PostCard.astro
index 09d1d9d..80fa416 100644
--- a/blog/src/components/PostCard.astro
+++ b/blog/src/components/PostCard.astro
@@ -173,7 +173,7 @@ const formattedDate = date
 
 	.card-title {
 		font-size: var(--font-size-xl);
-		font-weight: 600;
+		font-weight: var(--font-weight-heading);
 		line-height: var(--leading-snug);
 		letter-spacing: var(--tracking-snug);
 		margin-bottom: var(--spacing-2);
@@ -181,7 +181,7 @@ const formattedDate = date
 	}
 
 	.card-link:hover .card-title {
-		color: var(--color-accent);
+		color: var(--color-brand);
 	}
 
 	.card-excerpt {
@@ -256,7 +256,7 @@ const formattedDate = date
 	}
 
 	.byline-more:focus-visible {
-		outline: 2px solid var(--color-accent);
+		outline: 2px solid var(--color-brand);
 	}
 
 	.byline-more[data-tooltip]:hover::after,
diff --git a/blog/src/layouts/Base.astro b/blog/src/layouts/Base.astro
index 67c46e3..30520cd 100644
--- a/blog/src/layouts/Base.astro
+++ b/blog/src/layouts/Base.astro
@@ -10,6 +10,7 @@ import { createPublicPageContext } from "emdash/page";
 import LiveSearch from "emdash/ui/search";
 import { Font } from "astro:assets";
 import { resolveBlogSiteIdentity } from "../utils/site-identity";
+import "../styles/tokens.css";
 import "../styles/theme.css";
 
 interface Props {
@@ -81,20 +82,19 @@ const isLoggedIn = !!Astro.locals.user;
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<Font cssVariable="--font-sans" preload />
+		<Font cssVariable="--font-body" preload />
 		<Font cssVariable="--font-mono" />
 		<title>{fullTitle}</title>
 		<EmDashHead page={pageCtx} />
 		<script is:inline>
-			// Apply theme immediately to prevent flash
+			// Apply an explicit theme choice immediately to prevent flash.
+			// With no cookie, color-scheme: light dark follows the OS.
 			(function () {
 				var c = document.cookie;
 				var i = c.indexOf("theme=");
 				var theme = i >= 0 ? c.slice(i + 6).split(";")[0] : null;
 				if (theme === "dark" || theme === "light") {
 					document.documentElement.classList.add(theme);
-				} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-					document.documentElement.classList.add("dark");
 				}
 			})();
 		</script>
@@ -304,9 +304,6 @@ const isLoggedIn = !!Astro.locals.user;
 				if (theme === "system") {
 					setCookie("theme", "");
 					root.classList.remove("light", "dark");
-					if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-						root.classList.add("dark");
-					}
 				} else {
 					setCookie("theme", theme);
 					root.classList.remove("light", "dark");
@@ -335,15 +332,6 @@ const isLoggedIn = !!Astro.locals.user;
 					setTheme(btn.dataset.theme || "system");
 				});
 			});
-
-			// Listen for system preference changes
-			window
-				.matchMedia("(prefers-color-scheme: dark)")
-				.addEventListener("change", (e) => {
-					if (getStoredTheme() === "system") {
-						root.classList.toggle("dark", e.matches);
-					}
-				});
 		</script>
 
 		<style is:global>
@@ -383,142 +371,22 @@ const isLoggedIn = !!Astro.locals.user;
 					padding: 0;
 				}
 
-				:root {
-					/* Colors - Light mode (default) */
-					--color-bg: #ffffff;
-					--color-bg-subtle: #fafafa;
-					--color-text: #1a1a1a;
-					--color-text-secondary: #525252;
-					--color-muted: #8b8b8b;
-					--color-border: #e5e5e5;
-					--color-border-subtle: #f0f0f0;
-					--color-surface: #f7f7f7;
-					--color-accent: #0066cc;
-					--color-accent-hover: #0052a3;
-					--color-on-accent: white;
-					--color-accent-ring: color-mix(
-						in srgb,
-						var(--color-accent) 25%,
-						transparent
-					);
-
-					/* EmDash search theming */
-					--emdash-search-bg: var(--color-bg);
-					--emdash-search-text: var(--color-text);
-					--emdash-search-muted: var(--color-muted);
-					--emdash-search-border: var(--color-border);
-					--emdash-search-hover: var(--color-surface);
-					--emdash-search-highlight: var(--color-text);
-
-					/* Type scale - more refined */
-					--font-size-xs: 0.8125rem;
-					--font-size-sm: 0.875rem;
-					--font-size-base: 1rem;
-					--font-size-lg: 1.125rem;
-					--font-size-xl: 1.25rem;
-					--font-size-2xl: 1.5rem;
-					--font-size-3xl: 2rem;
-					--font-size-4xl: 2.5rem;
-					--font-size-5xl: 3.5rem;
-
-					/* Line heights */
-					--leading-tight: 1.15;
-					--leading-snug: 1.3;
-					--leading-normal: 1.5;
-					--leading-relaxed: 1.7;
-
-					/* Spacing - more generous */
-					--spacing-1: 0.25rem;
-					--spacing-2: 0.5rem;
-					--spacing-3: 0.75rem;
-					--spacing-4: 1rem;
-					--spacing-5: 1.25rem;
-					--spacing-6: 1.5rem;
-					--spacing-8: 2rem;
-					--spacing-10: 2.5rem;
-					--spacing-12: 3rem;
-					--spacing-16: 4rem;
-					--spacing-20: 5rem;
-					--spacing-24: 6rem;
-
-					/* Legacy spacing aliases */
-					--spacing-xs: var(--spacing-1);
-					--spacing-sm: var(--spacing-2);
-					--spacing-md: var(--spacing-4);
-					--spacing-lg: var(--spacing-6);
-					--spacing-xl: var(--spacing-8);
-					--spacing-2xl: var(--spacing-12);
-					--spacing-3xl: var(--spacing-16);
-
-					/* Layout - wider for three-column */
-					--content-width: 680px;
-					--wide-width: 1200px;
-					--max-width: var(--content-width);
-					--gutter-width: 200px;
-					--radius: 4px;
-					--radius-lg: 8px;
-
-					/* Transitions */
-					--transition-fast: 120ms ease;
-					--transition-base: 180ms ease;
-
-					/* Nav */
-					--nav-height: 64px;
-
-					/* Search */
-					--search-input-width: 180px;
-
-					/* Article layout */
-					--meta-col-width: 180px;
-
-					/* Avatar sizes */
-					--avatar-size-xs: 18px;
-					--avatar-size-sm: 20px;
-					--avatar-size-md: 24px;
-					--avatar-size-lg: 32px;
-
-					/* Letter spacing */
-					--tracking-tight: -0.03em;
-					--tracking-snug: -0.02em;
-					--tracking-wide: 0.06em;
-					--tracking-wider: 0.08em;
-
-					/* Tag pill */
-					--tag-padding-y: 2px;
-
-					/* Shadows */
-					--shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.12);
-					--shadow-btn-active: 0 1px 2px rgba(0, 0, 0, 0.05);
-				}
-
-				/* Dark mode via system preference (when no explicit class) */
-				@media (prefers-color-scheme: dark) {
-					:root:not(.light) {
-						--color-bg: #0d0d0d;
-						--color-bg-subtle: #141414;
-						--color-text: #ededed;
-						--color-text-secondary: #a0a0a0;
-						--color-muted: #6b6b6b;
-						--color-border: #2a2a2a;
-						--color-border-subtle: #1f1f1f;
-						--color-surface: #181818;
-						--color-accent: #4d9fff;
-						--color-accent-hover: #6eb0ff;
+				/*
+				 * Design tokens live in src/styles/tokens.css. Colors are
+				 * defined with light-dark(); these rules pin the scheme when
+				 * the footer switcher sets an explicit choice. With no class,
+				 * color-scheme: light dark follows the OS preference. The
+				 * @supports guard keeps the toggle from forcing dark UA form
+				 * controls on browsers stuck on the plain-light fallback.
+				 */
+				@supports (color: light-dark(#000, #fff)) {
+					:root.light {
+						color-scheme: light;
 					}
-				}
 
-				/* Explicit dark mode */
-				:root.dark {
-					--color-bg: #0d0d0d;
-					--color-bg-subtle: #141414;
-					--color-text: #ededed;
-					--color-text-secondary: #a0a0a0;
-					--color-muted: #6b6b6b;
-					--color-border: #2a2a2a;
-					--color-border-subtle: #1f1f1f;
-					--color-surface: #181818;
-					--color-accent: #4d9fff;
-					--color-accent-hover: #6eb0ff;
+					:root.dark {
+						color-scheme: dark;
+					}
 				}
 
 				html {
@@ -526,7 +394,7 @@ const isLoggedIn = !!Astro.locals.user;
 				}
 
 				body {
-					font-family: var(--font-sans);
+					font-family: var(--font-body);
 					font-size: var(--font-size-base);
 					line-height: var(--leading-relaxed);
 					color: var(--color-text);
@@ -537,13 +405,13 @@ const isLoggedIn = !!Astro.locals.user;
 				}
 
 				a:where(:not([class*="emdash"]):not([class*="ec-"])) {
-					color: var(--color-accent);
+					color: var(--color-brand);
 					text-decoration: none;
 					transition: color var(--transition-fast);
 				}
 
 				a:where(:not([class*="emdash"]):not([class*="ec-"])):hover {
-					color: var(--color-accent-hover);
+					color: var(--color-brand-hover);
 				}
 
 				img {
@@ -558,20 +426,20 @@ const isLoggedIn = !!Astro.locals.user;
 				h4,
 				h5,
 				h6 {
-					font-family: var(--font-sans);
+					font-family: var(--font-heading);
 					line-height: var(--leading-tight);
-					font-weight: 600;
+					font-weight: var(--font-weight-heading);
 					letter-spacing: var(--tracking-snug);
 				}
 
 				h1 {
-					font-weight: 700;
+					font-weight: var(--font-weight-display);
 					letter-spacing: var(--tracking-tight);
 				}
 
 				::selection {
-					background: var(--color-accent);
-					color: white;
+					background: var(--color-brand);
+					color: var(--color-on-brand);
 				}
 			}
 		</style>
@@ -606,7 +474,7 @@ const isLoggedIn = !!Astro.locals.user;
 			}
 
 			.site-title:hover {
-				color: var(--color-accent);
+				color: var(--color-brand);
 			}
 
 			.site-logo-img {
@@ -636,7 +504,7 @@ const isLoggedIn = !!Astro.locals.user;
 			}
 
 			.nav-links a:hover {
-				color: var(--color-accent);
+				color: var(--color-brand);
 			}
 
 			.nav-admin {
@@ -654,13 +522,13 @@ const isLoggedIn = !!Astro.locals.user;
 			.site-search {
 				position: relative;
 				width: var(--search-input-width);
-				--emdash-search-border-focus: var(--color-accent);
+				--emdash-search-border-focus: var(--color-brand);
 			}
 
 			:global(.site-search-input) {
 				width: var(--search-input-width);
 				padding: var(--spacing-2) var(--spacing-3);
-				font-family: var(--font-sans);
+				font-family: var(--font-body);
 				font-size: var(--font-size-sm);
 				border: 1px solid var(--color-border);
 				border-radius: var(--radius);
@@ -678,8 +546,8 @@ const isLoggedIn = !!Astro.locals.user;
 			:global(.site-search-input):focus,
 			:global(.site-search-input):focus-visible {
 				outline: none;
-				border-color: var(--color-accent) !important;
-				box-shadow: 0 0 0 3px var(--color-accent-ring);
+				border-color: var(--color-brand) !important;
+				box-shadow: 0 0 0 3px var(--color-brand-ring);
 			}
 
 			:global(.site-search-results) {
@@ -691,7 +559,7 @@ const isLoggedIn = !!Astro.locals.user;
 				background: var(--color-bg);
 				border: 1px solid var(--color-border);
 				border-radius: var(--radius-lg);
-				box-shadow: var(--shadow-dropdown);
+				box-shadow: var(--shadow-lg);
 				max-height: 400px;
 				overflow-y: auto;
 				z-index: 1000;
@@ -902,7 +770,7 @@ const isLoggedIn = !!Astro.locals.user;
 			.theme-btn.active {
 				background: var(--color-bg);
 				color: var(--color-text);
-				box-shadow: var(--shadow-btn-active);
+				box-shadow: var(--shadow-sm);
 			}
 
 			.theme-btn svg {
diff --git a/blog/src/pages/category/[slug].astro b/blog/src/pages/category/[slug].astro
index f0bbf70..64bd0aa 100644
--- a/blog/src/pages/category/[slug].astro
+++ b/blog/src/pages/category/[slug].astro
@@ -87,7 +87,7 @@ const filteredPosts = posts.map((post) => ({
 		display: block;
 		font-size: var(--font-size-xs);
 		font-weight: 500;
-		color: var(--color-accent);
+		color: var(--color-brand);
 		text-transform: uppercase;
 		letter-spacing: var(--tracking-wider);
 		margin-bottom: var(--spacing-2);
@@ -95,7 +95,7 @@ const filteredPosts = posts.map((post) => ({
 
 	.archive-title {
 		font-size: var(--font-size-4xl);
-		font-weight: 700;
+		font-weight: var(--font-weight-display);
 		letter-spacing: var(--tracking-tight);
 		margin-bottom: var(--spacing-2);
 	}
diff --git a/blog/src/pages/index.astro b/blog/src/pages/index.astro
index da6b71c..f49ef41 100644
--- a/blog/src/pages/index.astro
+++ b/blog/src/pages/index.astro
@@ -302,7 +302,7 @@ function formatDate(date: Date | null | undefined) {
 
 	.featured-title {
 		font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl));
-		font-weight: 700;
+		font-weight: var(--font-weight-display);
 		line-height: var(--leading-tight);
 		letter-spacing: var(--tracking-tight);
 		transition: color var(--transition-fast);
@@ -310,7 +310,7 @@ function formatDate(date: Date | null | undefined) {
 
 	.featured-title-link:hover .featured-title,
 	.featured-grid:has(.featured-image-link:hover) .featured-title {
-		color: var(--color-accent);
+		color: var(--color-brand);
 	}
 
 	.featured-excerpt {
@@ -364,13 +364,13 @@ function formatDate(date: Date | null | undefined) {
 
 	.section-link {
 		font-size: var(--font-size-sm);
-		color: var(--color-accent);
+		color: var(--color-brand);
 		text-decoration: none;
 		transition: color var(--transition-fast);
 	}
 
 	.section-link:hover {
-		color: var(--color-accent-hover);
+		color: var(--color-brand-hover);
 	}
 
 	/* Posts Grid */
@@ -397,7 +397,7 @@ function formatDate(date: Date | null | undefined) {
 
 	.empty-state h2 {
 		font-size: var(--font-size-2xl);
-		font-weight: 600;
+		font-weight: var(--font-weight-heading);
 	}
 
 	.empty-state p {
@@ -408,8 +408,8 @@ function formatDate(date: Date | null | undefined) {
 		display: inline-block;
 		margin-top: var(--spacing-4);
 		padding: var(--spacing-3) var(--spacing-6);
-		background: var(--color-accent);
-		color: var(--color-on-accent);
+		background: var(--color-brand);
+		color: var(--color-on-brand);
 		text-decoration: none;
 		border-radius: var(--radius);
 		font-size: var(--font-size-sm);
@@ -418,7 +418,7 @@ function formatDate(date: Date | null | undefined) {
 	}
 
 	.btn:hover {
-		background: var(--color-accent-hover);
+		background: var(--color-brand-hover);
 	}
 
 	/* Responsive */
diff --git a/blog/src/pages/pages/[slug].astro b/blog/src/pages/pages/[slug].astro
index 3c15fea..db1753c 100644
--- a/blog/src/pages/pages/[slug].astro
+++ b/blog/src/pages/pages/[slug].astro
@@ -46,7 +46,7 @@ if (Astro.cache?.enabled) Astro.cache.set(cacheHint);
 
 	.page-title {
 		font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl));
-		font-weight: 700;
+		font-weight: var(--font-weight-display);
 		line-height: var(--leading-tight);
 	}
 
diff --git a/blog/src/pages/posts/[slug].astro b/blog/src/pages/posts/[slug].astro
index 0cc892f..0d45757 100644
--- a/blog/src/pages/posts/[slug].astro
+++ b/blog/src/pages/posts/[slug].astro
@@ -495,7 +495,7 @@ const publishDate =
 
 	.article-title {
 		font-size: clamp(2rem, 5vw, var(--font-size-5xl));
-		font-weight: 700;
+		font-weight: var(--font-weight-display);
 		line-height: var(--leading-tight);
 		letter-spacing: var(--tracking-tight);
 		margin-bottom: var(--spacing-4);
@@ -588,7 +588,7 @@ const publishDate =
 	}
 
 	.article-content :global(a) {
-		color: var(--color-accent);
+		color: var(--color-brand);
 		text-decoration: underline;
 		text-underline-offset: 3px;
 		text-decoration-thickness: 1px;
@@ -687,7 +687,7 @@ const publishDate =
 	.sidebar-widgets :global(.widget-search__input) {
 		width: 100%;
 		padding: var(--spacing-2) var(--spacing-3);
-		font-family: var(--font-sans);
+		font-family: var(--font-body);
 		font-size: var(--font-size-sm);
 		border: 1px solid var(--color-border);
 		border-radius: var(--radius);
@@ -705,8 +705,8 @@ const publishDate =
 	.sidebar-widgets :global(.widget-search__input):focus,
 	.sidebar-widgets :global(.widget-search__input):focus-visible {
 		outline: none;
-		border-color: var(--color-accent);
-		box-shadow: 0 0 0 3px var(--color-accent-ring);
+		border-color: var(--color-brand);
+		box-shadow: 0 0 0 3px var(--color-brand-ring);
 	}
 
 	.sidebar-widgets :global(.widget-search__button) {
@@ -863,7 +863,7 @@ const publishDate =
 
 	.article-comments :global(.ec-comments-heading) {
 		font-size: var(--font-size-2xl);
-		font-weight: 600;
+		font-weight: var(--font-weight-heading);
 		margin-bottom: var(--spacing-8);
 	}
 
@@ -893,8 +893,8 @@ const publishDate =
 	}
 
 	.article-comments :global(.ec-comment-form-submit) {
-		background: var(--color-accent) !important;
-		color: var(--color-on-accent) !important;
+		background: var(--color-brand) !important;
+		color: var(--color-on-brand) !important;
 	}
 
 	/* More posts section */
@@ -912,7 +912,7 @@ const publishDate =
 
 	.more-title {
 		font-size: var(--font-size-2xl);
-		font-weight: 600;
+		font-weight: var(--font-weight-heading);
 		margin-bottom: var(--spacing-10);
 	}
 
diff --git a/blog/src/pages/posts/index.astro b/blog/src/pages/posts/index.astro
index 6c8c3b7..537ebb8 100644
--- a/blog/src/pages/posts/index.astro
+++ b/blog/src/pages/posts/index.astro
@@ -121,7 +121,7 @@ const formatDate = (date: Date) =>
 
 	.page-title {
 		font-size: var(--font-size-4xl);
-		font-weight: 700;
+		font-weight: var(--font-weight-display);
 		letter-spacing: var(--tracking-tight);
 		margin-bottom: var(--spacing-2);
 	}
@@ -214,7 +214,7 @@ const formatDate = (date: Date) =>
 
 	.post-title {
 		font-size: var(--font-size-2xl);
-		font-weight: 600;
+		font-weight: var(--font-weight-heading);
 		line-height: var(--leading-snug);
 		letter-spacing: var(--tracking-snug);
 		margin-bottom: var(--spacing-2);
@@ -222,7 +222,7 @@ const formatDate = (date: Date) =>
 	}
 
 	.post-link:hover .post-title {
-		color: var(--color-accent);
+		color: var(--color-brand);
 	}
 
 	.post-excerpt {
diff --git a/blog/src/pages/search.astro b/blog/src/pages/search.astro
index 98e8a4e..28a3656 100644
--- a/blog/src/pages/search.astro
+++ b/blog/src/pages/search.astro
@@ -100,14 +100,14 @@ const { items: results } = query
 
 	.search-input:focus {
 		outline: none;
-		border-color: var(--color-accent);
+		border-color: var(--color-brand);
 	}
 
 	.search-button {
 		padding: var(--spacing-2) var(--spacing-6);
 		font-size: var(--font-size-base);
-		background: var(--color-accent);
-		color: var(--color-on-accent);
+		background: var(--color-brand);
+		color: var(--color-on-brand);
 		border: none;
 		border-radius: var(--radius);
 		cursor: pointer;
@@ -156,14 +156,14 @@ const { items: results } = query
 
 	.result-title {
 		font-size: var(--font-size-xl);
-		font-weight: 600;
+		font-weight: var(--font-weight-heading);
 		line-height: var(--leading-snug);
 		margin-bottom: var(--spacing-2);
 		transition: color var(--transition-fast);
 	}
 
 	.result-link:hover .result-title {
-		color: var(--color-accent);
+		color: var(--color-brand);
 	}
 
 	.result-snippet {
@@ -174,7 +174,7 @@ const { items: results } = query
 
 	/* FTS returns <mark> wrapping the matched terms */
 	.result-snippet :global(mark) {
-		background: var(--color-accent-ring, rgba(99, 102, 241, 0.2));
+		background: var(--color-brand-ring);
 		color: inherit;
 		padding: 0 0.1em;
 		border-radius: 2px;
diff --git a/blog/src/pages/tag/[slug].astro b/blog/src/pages/tag/[slug].astro
index 85dd186..35d43b3 100644
--- a/blog/src/pages/tag/[slug].astro
+++ b/blog/src/pages/tag/[slug].astro
@@ -89,7 +89,7 @@ const filteredPosts = posts.map((post) => ({
 		display: block;
 		font-size: var(--font-size-xs);
 		font-weight: 500;
-		color: var(--color-accent);
+		color: var(--color-brand);
 		text-transform: uppercase;
 		letter-spacing: var(--tracking-wider);
 		margin-bottom: var(--spacing-2);
@@ -97,7 +97,7 @@ const filteredPosts = posts.map((post) => ({
 
 	.archive-title {
 		font-size: var(--font-size-4xl);
-		font-weight: 700;
+		font-weight: var(--font-weight-display);
 		letter-spacing: var(--tracking-tight);
 		margin-bottom: var(--spacing-2);
 	}
diff --git a/blog/src/styles/theme.css b/blog/src/styles/theme.css
index 2f7249b..0ed080e 100644
--- a/blog/src/styles/theme.css
+++ b/blog/src/styles/theme.css
@@ -1,108 +1,28 @@
 /*
-  theme.css -- override any :root variable here to retheme the blog.
+  theme.css -- your theme overrides. This is the file to edit to
+  retheme the site.
 
-  This is the only file you need to edit to customize the site's visual
-  appearance. All defaults are listed below as comments. Uncomment and
-  change any value to override it.
+  Every design token lives in src/styles/tokens.css (colors, type
+  scale, spacing, layout, shadows) with its default value. Override any
+  of them here: declarations in this file are unlayered, so they always
+  beat the @layer base defaults in tokens.css.
 
-  Base.astro puts its defaults inside @layer base, so declarations here
-  (which are unlayered) always take priority -- no specificity tricks needed.
+  Colors are defined with light-dark(). Overriding with a plain color
+  changes light and dark mode at once; use light-dark(<light>, <dark>)
+  to set different values per mode.
 
-  Note: this template defines explicit dark mode colors in Base.astro.
-  Overriding light-mode --color-* variables here won't affect dark mode.
-  To customize dark mode, also override --color-* variables inside a
-  @media (prefers-color-scheme: dark) block and/or in the :root.dark rule.
-*/
-
-:root {
-	/* --- Colors ---
-	--color-bg: #ffffff;
-	--color-bg-subtle: #fafafa;
-	--color-text: #1a1a1a;
-	--color-text-secondary: #525252;
-	--color-muted: #8b8b8b;
-	--color-border: #e5e5e5;
-	--color-border-subtle: #f0f0f0;
-	--color-surface: #f7f7f7;
-	--color-accent: #0066cc;
-	--color-accent-hover: #0052a3;
-	--color-on-accent: white;
-	--color-accent-ring: color-mix(in srgb, var(--color-accent) 25%, transparent);
-	*/
-
-	/* --- Type scale ---
-	--font-size-xs: 0.8125rem;
-	--font-size-sm: 0.875rem;
-	--font-size-base: 1rem;
-	--font-size-lg: 1.125rem;
-	--font-size-xl: 1.25rem;
-	--font-size-2xl: 1.5rem;
-	--font-size-3xl: 2rem;
-	--font-size-4xl: 2.5rem;
-	--font-size-5xl: 3.5rem;
-	*/
-
-	/* --- Line heights ---
-	--leading-tight: 1.15;
-	--leading-snug: 1.3;
-	--leading-normal: 1.5;
-	--leading-relaxed: 1.7;
-	*/
-
-	/* --- Letter spacing ---
-	--tracking-tight: -0.03em;    used on h1 and large titles
-	--tracking-snug: -0.02em;     used on h2–h6, site/card titles
-	--tracking-wide: 0.06em;      used on meta labels, TOC/widget titles
-	--tracking-wider: 0.08em;     used on footer headings, section labels
-	*/
+  Webfonts are loaded in astro.config.mjs (--font-body, --font-mono).
+  Swap the loaded font there; use overrides here for system fonts or a
+  separate heading face.
 
-	/* --- Spacing ---
-	--spacing-1: 0.25rem;
-	--spacing-2: 0.5rem;
-	--spacing-3: 0.75rem;
-	--spacing-4: 1rem;
-	--spacing-5: 1.25rem;
-	--spacing-6: 1.5rem;
-	--spacing-8: 2rem;
-	--spacing-10: 2.5rem;
-	--spacing-12: 3rem;
-	--spacing-16: 4rem;
-	--spacing-20: 5rem;
-	--spacing-24: 6rem;
-	*/
+  Example:
 
-	/* --- Layout ---
-	--content-width: 680px;       article/page body column width
-	--wide-width: 1200px;         max container width (home, archives)
-	--gutter-width: 200px;        right sidebar column (TOC) on article pages
-	--meta-col-width: 180px;      left meta column on article pages
-	--nav-height: 64px;           sticky header height
-	--search-input-width: 180px;  nav search box width
-	*/
-
-	/* --- Borders & radius ---
-	--radius: 4px;
-	--radius-lg: 8px;
-	*/
-
-	/* --- Transitions ---
-	--transition-fast: 120ms ease;
-	--transition-base: 180ms ease;
-	*/
-
-	/* --- Avatars ---
-	--avatar-size-xs: 18px;    card byline avatars
-	--avatar-size-sm: 20px;    post list byline avatars
-	--avatar-size-md: 24px;    featured post byline avatars
-	--avatar-size-lg: 32px;    single post byline avatars
-	*/
-
-	/* --- Shadows ---
-	--shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.12);
-	--shadow-btn-active: 0 1px 2px rgba(0, 0, 0, 0.05);
-	*/
+  :root {
+    --color-brand: light-dark(#0f766e, #2dd4bf);
+    --font-heading: "Iowan Old Style", Georgia, serif;
+    --radius: 8px;
+  }
+*/
 
-	/* --- Misc ---
-	--tag-padding-y: 2px;    vertical padding on tag pills
-	*/
+:root {
 }
diff --git a/blog/src/styles/tokens.css b/blog/src/styles/tokens.css
new file mode 100644
index 0000000..baf58e8
--- /dev/null
+++ b/blog/src/styles/tokens.css
@@ -0,0 +1,146 @@
+/*
+  tokens.css -- the design tokens for this template. These are the
+  defaults; to customize the site, override any variable in
+  src/styles/theme.css rather than editing this file. Declarations in
+  theme.css are unlayered, so they always beat these @layer base
+  defaults -- no specificity tricks needed.
+
+  Colors use light-dark(): the first value applies in light mode, the
+  second in dark mode. Overriding a color with a plain value changes
+  both modes at once; use light-dark(<light>, <dark>) in an override to
+  keep them distinct.
+
+  --font-body is defined by the font pipeline in astro.config.mjs, not
+  here. To swap the loaded webfont, edit the fonts entry there. To use a
+  system font, or a different face for headings only, override
+  --font-body / --font-heading in theme.css.
+*/
+
+@layer base {
+	:root {
+		color-scheme: light dark;
+
+		/* Colors */
+		--color-bg: light-dark(#ffffff, #0d0d0d);
+		--color-bg-subtle: light-dark(#fafafa, #141414);
+		--color-text: light-dark(#1a1a1a, #ededed);
+		--color-text-secondary: light-dark(#525252, #a0a0a0);
+		--color-muted: light-dark(#8b8b8b, #6b6b6b);
+		--color-border: light-dark(#e5e5e5, #2a2a2a);
+		--color-border-subtle: light-dark(#f0f0f0, #1f1f1f);
+		--color-surface: light-dark(#f7f7f7, #181818);
+		--color-brand: light-dark(#0066cc, #4d9fff);
+		--color-brand-hover: light-dark(#0052a3, #6eb0ff);
+		--color-on-brand: white;
+		--color-brand-ring: color-mix(in srgb, var(--color-brand) 25%, transparent);
+
+		/* EmDash search theming */
+		--emdash-search-bg: var(--color-bg);
+		--emdash-search-text: var(--color-text);
+		--emdash-search-muted: var(--color-muted);
+		--emdash-search-border: var(--color-border);
+		--emdash-search-hover: var(--color-surface);
+		--emdash-search-highlight: var(--color-text);
+
+		/* Typography */
+		--font-heading: var(--font-body);
+		--font-weight-heading: 600; /* h2-h6, card and list titles */
+		--font-weight-display: 700; /* h1 and large page titles */
+
+		/* Type scale */
+		--font-size-xs: 0.8125rem;
+		--font-size-sm: 0.875rem;
+		--font-size-base: 1rem;
+		--font-size-lg: 1.125rem;
+		--font-size-xl: 1.25rem;
+		--font-size-2xl: 1.5rem;
+		--font-size-3xl: 2rem;
+		--font-size-4xl: 2.5rem;
+		--font-size-5xl: 3.5rem;
+
+		/* Line heights */
+		--leading-tight: 1.15;
+		--leading-snug: 1.3;
+		--leading-normal: 1.5;
+		--leading-relaxed: 1.7;
+
+		/* Letter spacing */
+		--tracking-tight: -0.03em; /* h1 and large titles */
+		--tracking-snug: -0.02em; /* h2-h6, site/card titles */
+		--tracking-wide: 0.06em; /* meta labels, TOC/widget titles */
+		--tracking-wider: 0.08em; /* footer headings, section labels */
+
+		/* Spacing */
+		--spacing-1: 0.25rem;
+		--spacing-2: 0.5rem;
+		--spacing-3: 0.75rem;
+		--spacing-4: 1rem;
+		--spacing-5: 1.25rem;
+		--spacing-6: 1.5rem;
+		--spacing-8: 2rem;
+		--spacing-10: 2.5rem;
+		--spacing-12: 3rem;
+		--spacing-16: 4rem;
+		--spacing-20: 5rem;
+		--spacing-24: 6rem;
+
+		/* Legacy spacing aliases */
+		--spacing-xs: var(--spacing-1);
+		--spacing-sm: var(--spacing-2);
+		--spacing-md: var(--spacing-4);
+		--spacing-lg: var(--spacing-6);
+		--spacing-xl: var(--spacing-8);
+		--spacing-2xl: var(--spacing-12);
+		--spacing-3xl: var(--spacing-16);
+
+		/* Layout */
+		--content-width: 680px; /* article/page body column */
+		--wide-width: 1200px; /* max container (home, archives) */
+		--max-width: var(--content-width);
+		--gutter-width: 200px; /* right sidebar column (TOC) on article pages */
+		--meta-col-width: 180px; /* left meta column on article pages */
+		--nav-height: 64px; /* sticky header height */
+		--search-input-width: 180px; /* nav search box width */
+
+		/* Borders & radius */
+		--radius: 4px;
+		--radius-lg: 8px;
+
+		/* Transitions */
+		--transition-fast: 120ms ease;
+		--transition-base: 180ms ease;
+
+		/* Avatars */
+		--avatar-size-xs: 18px; /* card byline avatars */
+		--avatar-size-sm: 20px; /* post list byline avatars */
+		--avatar-size-md: 24px; /* featured post byline avatars */
+		--avatar-size-lg: 32px; /* single post byline avatars */
+
+		/* Shadows */
+		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+		--shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
+
+		/* Misc */
+		--tag-padding-y: 2px; /* vertical padding on tag pills */
+	}
+
+	/*
+	 * Light-mode values for browsers without light-dark() (Safari < 17.5,
+	 * Chrome < 123). Must mirror the light values above.
+	 */
+	@supports not (color: light-dark(#000, #fff)) {
+		:root {
+			color-scheme: light;
+			--color-bg: #ffffff;
+			--color-bg-subtle: #fafafa;
+			--color-text: #1a1a1a;
+			--color-text-secondary: #525252;
+			--color-muted: #8b8b8b;
+			--color-border: #e5e5e5;
+			--color-border-subtle: #f0f0f0;
+			--color-surface: #f7f7f7;
+			--color-brand: #0066cc;
+			--color-brand-hover: #0052a3;
+		}
+	}
+}
diff --git a/marketing-cloudflare/.agents/skills/creating-plugins/references/admin-ui.md b/marketing-cloudflare/.agents/skills/creating-plugins/references/admin-ui.md
index e2289e1..9e26b8d 100644
--- a/marketing-cloudflare/.agents/skills/creating-plugins/references/admin-ui.md
+++ b/marketing-cloudflare/.agents/skills/creating-plugins/references/admin-ui.md
@@ -12,7 +12,7 @@ import { SettingsPage } from "./components/SettingsPage";
 import { ReportsPage } from "./components/ReportsPage";
 import { StatusWidget } from "./components/StatusWidget";
 
-// Pages keyed by path (must match admin.pages paths)
+// Pages keyed by path (trailing slash optional, so /settings and /settings/ both resolve)
 export const pages = {
 	"/settings": SettingsPage,
 	"/reports": ReportsPage,
diff --git a/marketing-cloudflare/.agents/skills/creating-plugins/references/api-routes.md b/marketing-cloudflare/.agents/skills/creating-plugins/references/api-routes.md
index c4d2419..8ecf112 100644
--- a/marketing-cloudflare/.agents/skills/creating-plugins/references/api-routes.md
+++ b/marketing-cloudflare/.agents/skills/creating-plugins/references/api-routes.md
@@ -175,7 +175,9 @@ routes: {
 	},
 	"settings/save": {
 		handler: async (ctx) => {
-			const input = await ctx.request.json();
+			// EmDash parses the request body once and exposes it as ctx.input.
+			// Don't call ctx.request.json() — the body stream is already consumed.
+			const input = ctx.input as Record<string, unknown>;
 			for (const [key, value] of Object.entries(input)) {
 				if (value !== undefined) await ctx.kv.set(`settings:${key}`, value);
 			}
diff --git a/marketing-cloudflare/.agents/skills/creating-plugins/references/block-kit.md b/marketing-cloudflare/.agents/skills/creating-plugins/references/block-kit.md
index 397505b..5354e91 100644
--- a/marketing-cloudflare/.agents/skills/creating-plugins/references/block-kit.md
+++ b/marketing-cloudflare/.agents/skills/creating-plugins/references/block-kit.md
@@ -16,10 +16,16 @@ Block Kit elements are also used for [Portable Text block editing fields](./port
 6. Plugin returns new blocks
 
 ```typescript
+import type { BlockInteraction } from "@emdash-cms/blocks";
+
 routes: {
 	admin: {
 		handler: async (ctx) => {
-			const interaction = await ctx.request.json();
+			// EmDash parses the request body once and exposes it as ctx.input;
+			// read it directly rather than ctx.request.json() (the body is consumed).
+			// BlockInteraction is the discriminated union of page_load,
+			// block_action, and form_submit payloads.
+			const interaction = ctx.input as BlockInteraction;
 
 			if (interaction.type === "page_load") {
 				return {
diff --git a/marketing-cloudflare/AGENTS.md b/marketing-cloudflare/AGENTS.md
index cd7d0ec..6bea048 100644
--- a/marketing-cloudflare/AGENTS.md
+++ b/marketing-cloudflare/AGENTS.md
@@ -88,37 +88,43 @@ Constraints worth remembering:
 
 ## Visual character
 
-Typography is **Inter** on `--font-sans` with weights up to 800 for headline emphasis. There is no mono font, no serif. Headline tracking is tight.
+Typography is **Inter** on `--font-body` with weights up to 800 for headline emphasis (`--font-weight-display: 800` on hero and section headlines, `--font-weight-heading: 700` on other headings). There is no mono font, no serif. Headline tracking is tight (`--tracking-tight`).
 
 Colour is the loudest of any template here. The default palette is:
 
-- `--color-primary: #6366f1` (indigo) -- main brand colour, used in buttons and links
-- `--color-accent: #f472b6` (pink) -- paired with primary in gradients (CTA buttons, icon backgrounds)
-- `--color-success`, `--color-warning` -- semantic colours for inline icons (pricing checkmarks)
+- `--color-brand: #6366f1` (indigo) -- main brand colour, used in buttons and links, with `--color-brand-strong` / `--color-brand-soft` shades
+- `--color-accent: #f472b6` (pink) -- the gradient partner to brand
+- `--color-success`, `--color-warning`, `--color-danger` -- semantic colours (pricing checkmarks, form errors)
 
-Gradients are part of the look (`--color-primary` -> `--color-accent` on the "Get Started" button, on contact-method icons, on the "Most popular" pricing badge). Don't strip them entirely -- the template will look generic without them. Do swap them for a different pair if the brand calls for it.
+Gradients are part of the look and are tokens themselves: `--gradient-brand` (logo, icon tiles, pricing badge, CTA hover), `--gradient-brand-strong` (CTA resting state), `--gradient-brand-soft` (hero image glow), and `--gradient-headline` (hero headline text fill). They follow the brand/accent colours automatically, so a rebrand usually only needs new `--color-brand-*` / `--color-accent-*` values. Don't strip the gradients entirely -- the template will look generic without them -- but a flat brand can set the `--gradient-*` tokens to solid colours.
+
+Shared utility classes keep the blocks consistent: `.section-header` / `.section-headline` / `.section-subheadline` for centred block intros, and `.icon-tile` for the 48px gradient icon squares. Use them in new blocks rather than restyling per block.
 
 Roundness is generous: `--radius` is 10px, `--radius-lg` 16px, plus a `--radius-full` for pills. Shadows are layered (`--shadow-sm` through `--shadow-xl`).
 
 ## Customisation
 
-`src/styles/theme.css` is the only file to edit for visual changes. Every CSS variable from `Base.astro` is listed there as a commented default. The dark mode palette is defined inside `Base.astro`; light-mode overrides in `theme.css` won't affect dark mode. To customise dark mode, add `@media (prefers-color-scheme: dark)` and `:root.dark` rules in `theme.css`.
+Design tokens live in `src/styles/tokens.css` with their default values. To restyle the site, override tokens in `src/styles/theme.css` -- declarations there are unlayered, so they always beat the `@layer base` defaults. Don't edit `tokens.css` or `Base.astro` for visual changes.
+
+Colours are defined with `light-dark(<light>, <dark>)`, so each token carries both modes. Overriding with a plain colour changes light and dark at once; use `light-dark()` in the override to keep them distinct. There is no separate dark palette to maintain.
 
-Fonts are configured in `astro.config.mjs` under `fonts:`. To swap the typeface, change the `name:` for the entry bound to `cssVariable: "--font-sans"`. Inter has 5 weights loaded (400-800) for hero impact -- if you swap, ensure the replacement has comparable weight range. Geist, Plus Jakarta Sans, Manrope, and DM Sans all work well as replacements.
+Webfonts are configured in `astro.config.mjs` under `fonts:`. To swap the typeface, change the `name:` for the entry bound to `cssVariable: "--font-body"`. Inter has 5 weights loaded (400-800) for hero impact -- if you swap, ensure the replacement has comparable weight range. Geist, Plus Jakarta Sans, Manrope, and DM Sans all work well as replacements. For a system font, or a separate heading face, override `--font-body` / `--font-heading` in `theme.css`. A softer voice (editorial, luxury) usually also wants `--font-weight-display: 700` or lower.
 
-CSS variables worth knowing:
+CSS variables worth knowing (see `tokens.css` for the full list):
 
-- `--color-primary`, `--color-primary-dark`, `--color-primary-light`
-- `--color-accent`, `--color-accent-light`
+- `--color-brand`, `--color-brand-strong`, `--color-brand-soft`, `--color-on-brand`, `--color-brand-ring`
+- `--color-accent`, `--color-accent-soft`
+- `--gradient-brand`, `--gradient-brand-strong`, `--gradient-brand-soft`, `--gradient-headline`
 - `--color-bg`, `--color-surface`, `--color-text`, `--color-muted`, `--color-border`
-- `--font-sans`
+- `--color-success`, `--color-warning`, `--color-danger`
+- `--font-body`, `--font-heading`, `--font-weight-heading` (700), `--font-weight-display` (800)
 - `--font-size-{xs,sm,base,lg,xl,2xl,3xl,4xl,5xl,6xl}` -- type scale up to 4.5rem for the largest hero
 - `--radius-sm` (6px), `--radius` (10px), `--radius-lg` (16px), `--radius-full`
 - `--shadow-sm`, `--shadow`, `--shadow-lg`, `--shadow-xl`
 
 To re-brand, the highest-leverage moves are:
 
-1. Change `--color-primary` and `--color-accent` to the brand pair.
+1. Change `--color-brand` (and its `-strong` / `-soft` shades) and `--color-accent` to the brand pair -- the gradients follow.
 2. Update the site title (logo wordmark) and tagline.
 3. Replace the hero illustration URL.
 4. Edit hero `headline` and `subheadline` blocks to specific, concrete copy.
diff --git a/marketing-cloudflare/astro.config.mjs b/marketing-cloudflare/astro.config.mjs
index b42d55c..37bc5cd 100644
--- a/marketing-cloudflare/astro.config.mjs
+++ b/marketing-cloudflare/astro.config.mjs
@@ -68,7 +68,7 @@ export default defineConfig({
 		{
 			provider: fontProviders.google(),
 			name: "Inter",
-			cssVariable: "--font-sans",
+			cssVariable: "--font-body",
 			weights: [400, 500, 600, 700, 800],
 			fallbacks: ["sans-serif"],
 		},
diff --git a/marketing-cloudflare/package.json b/marketing-cloudflare/package.json
index 979cb30..8160293 100644
--- a/marketing-cloudflare/package.json
+++ b/marketing-cloudflare/package.json
@@ -16,11 +16,11 @@
   "dependencies": {
     "@astrojs/cloudflare": "^14.0.0",
     "@astrojs/react": "^6.0.0",
-    "@emdash-cms/cloudflare": "^0.27.0",
+    "@emdash-cms/cloudflare": "^0.28.1",
     "@iconify-json/ph": "^1.2.2",
     "astro": "^7.0.0",
     "astro-iconset": "^0.0.4",
-    "emdash": "^0.27.0",
+    "emdash": "^0.28.1",
     "react": "19.2.4",
     "react-dom": "19.2.4"
   },
diff --git a/marketing-cloudflare/src/components/blocks/FAQ.astro b/marketing-cloudflare/src/components/blocks/FAQ.astro
index d313455..d4b3603 100644
--- a/marketing-cloudflare/src/components/blocks/FAQ.astro
+++ b/marketing-cloudflare/src/components/blocks/FAQ.astro
@@ -17,8 +17,8 @@ const { _key, headline, items } = node;
 <section class="faq section" id={_key}>
 	<div class="container">
 		{headline && (
-			<header class="faq-header">
-				<h2 class="faq-headline">{headline}</h2>
+			<header class="section-header">
+				<h2 class="section-headline">{headline}</h2>
 			</header>
 		)}
 		<div class="faq-list">
@@ -40,16 +40,6 @@ const { _key, headline, items } = node;
 </section>
 
 <style>
-	.faq-header {
-		text-align: center;
-		margin-bottom: var(--spacing-4xl);
-	}
-
-	.faq-headline {
-		font-size: var(--font-size-3xl);
-		font-weight: 800;
-	}
-
 	.faq-list {
 		max-width: var(--max-width);
 		margin: 0 auto;
@@ -71,7 +61,7 @@ const { _key, headline, items } = node;
 	}
 
 	.faq-item[open] {
-		border-color: var(--color-primary-light);
+		border-color: var(--color-brand-soft);
 	}
 
 	.faq-question {
@@ -109,6 +99,6 @@ const { _key, headline, items } = node;
 	.faq-answer p {
 		font-size: var(--font-size-sm);
 		color: var(--color-muted);
-		line-height: 1.7;
+		line-height: var(--leading-relaxed);
 	}
 </style>
diff --git a/marketing-cloudflare/src/components/blocks/Features.astro b/marketing-cloudflare/src/components/blocks/Features.astro
index 71a5133..33cbb10 100644
--- a/marketing-cloudflare/src/components/blocks/Features.astro
+++ b/marketing-cloudflare/src/components/blocks/Features.astro
@@ -36,15 +36,15 @@ const iconMap: Record<string, string> = {
 <section class="features section" id={_key}>
 	<div class="container">
 		{(headline || subheadline) && (
-			<header class="features-header">
-				{headline && <h2 class="features-headline">{headline}</h2>}
-				{subheadline && <p class="features-subheadline">{subheadline}</p>}
+			<header class="section-header">
+				{headline && <h2 class="section-headline">{headline}</h2>}
+				{subheadline && <p class="section-subheadline">{subheadline}</p>}
 			</header>
 		)}
 		<div class="features-grid">
 			{features.map((feature) => (
 				<div class="feature-card">
-					<div class="feature-icon">
+					<div class="icon-tile feature-icon">
 						<Icon name={iconMap[feature.icon] || "ph:sparkle"} aria-hidden="true" />
 					</div>
 					<h3 class="feature-title">{feature.title}</h3>
@@ -56,23 +56,6 @@ const iconMap: Record<string, string> = {
 </section>
 
 <style>
-	.features-header {
-		text-align: center;
-		max-width: var(--max-width);
-		margin: 0 auto var(--spacing-4xl);
-	}
-
-	.features-headline {
-		font-size: var(--font-size-3xl);
-		font-weight: 800;
-		margin-bottom: var(--spacing-md);
-	}
-
-	.features-subheadline {
-		font-size: var(--font-size-lg);
-		color: var(--color-muted);
-	}
-
 	.features-grid {
 		display: grid;
 		grid-template-columns: repeat(3, 1fr);
@@ -93,32 +76,23 @@ const iconMap: Record<string, string> = {
 	.feature-card:hover {
 		transform: translateY(-4px);
 		box-shadow: var(--shadow-lg);
-		border-color: var(--color-primary-light);
+		border-color: var(--color-brand-soft);
 	}
 
 	.feature-icon {
-		width: 48px;
-		height: 48px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 1.5rem;
-		color: white;
-		background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
-		border-radius: var(--radius);
 		margin-bottom: var(--spacing-lg);
 	}
 
 	.feature-title {
 		font-size: var(--font-size-lg);
-		font-weight: 700;
+		font-weight: var(--font-weight-heading);
 		margin-bottom: var(--spacing-sm);
 	}
 
 	.feature-description {
 		font-size: var(--font-size-sm);
 		color: var(--color-muted);
-		line-height: 1.6;
+		line-height: var(--leading-normal);
 	}
 
 	@media (max-width: 900px) {
diff --git a/marketing-cloudflare/src/components/blocks/Hero.astro b/marketing-cloudflare/src/components/blocks/Hero.astro
index f48287c..6a81272 100644
--- a/marketing-cloudflare/src/components/blocks/Hero.astro
+++ b/marketing-cloudflare/src/components/blocks/Hero.astro
@@ -93,10 +93,10 @@ const secondaryCta =
 
 	.hero-headline {
 		font-size: var(--font-size-5xl);
-		font-weight: 800;
-		line-height: 1.1;
-		letter-spacing: -0.03em;
-		background: linear-gradient(135deg, var(--color-text) 0%, var(--color-muted) 100%);
+		font-weight: var(--font-weight-display);
+		line-height: var(--leading-tight);
+		letter-spacing: var(--tracking-tight);
+		background: var(--gradient-headline);
 		-webkit-background-clip: text;
 		-webkit-text-fill-color: transparent;
 		background-clip: text;
@@ -104,7 +104,7 @@ const secondaryCta =
 
 	.hero-subheadline {
 		font-size: var(--font-size-xl);
-		line-height: 1.6;
+		line-height: var(--leading-normal);
 		color: var(--color-muted);
 	}
 
@@ -129,7 +129,7 @@ const secondaryCta =
 		content: "";
 		position: absolute;
 		inset: -10px;
-		background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-accent-light) 100%);
+		background: var(--gradient-brand-soft);
 		border-radius: var(--radius-lg);
 		z-index: -1;
 		opacity: 0.3;
diff --git a/marketing-cloudflare/src/components/blocks/Pricing.astro b/marketing-cloudflare/src/components/blocks/Pricing.astro
index f9a576d..894f989 100644
--- a/marketing-cloudflare/src/components/blocks/Pricing.astro
+++ b/marketing-cloudflare/src/components/blocks/Pricing.astro
@@ -40,8 +40,8 @@ const plans = rawPlans.map((plan) => ({
 <section class="pricing section">
 	<div class="container">
 		{headline && (
-			<header class="pricing-header">
-				<h2 class="pricing-headline">{headline}</h2>
+			<header class="section-header pricing-header">
+				<h2 class="section-headline">{headline}</h2>
 			</header>
 		)}
 		<div class="pricing-grid">
@@ -82,15 +82,9 @@ const plans = rawPlans.map((plan) => ({
 
 <style>
 	.pricing-header {
-		text-align: center;
 		margin-bottom: var(--spacing-2xl);
 	}
 
-	.pricing-headline {
-		font-size: var(--font-size-3xl);
-		font-weight: 800;
-	}
-
 	.pricing-grid {
 		display: grid;
 		grid-template-columns: repeat(3, 1fr);
@@ -111,7 +105,7 @@ const plans = rawPlans.map((plan) => ({
 
 	.pricing-highlighted {
 		background: var(--color-bg);
-		border-color: var(--color-primary);
+		border-color: var(--color-brand);
 		box-shadow: var(--shadow-xl);
 		transform: scale(1.02);
 	}
@@ -124,8 +118,8 @@ const plans = rawPlans.map((plan) => ({
 		padding: var(--spacing-xs) var(--spacing-md);
 		font-size: var(--font-size-xs);
 		font-weight: 600;
-		color: white;
-		background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
+		color: var(--color-on-brand);
+		background: var(--gradient-brand);
 		border-radius: var(--radius-full);
 	}
 
@@ -137,7 +131,7 @@ const plans = rawPlans.map((plan) => ({
 
 	.pricing-name {
 		font-size: var(--font-size-lg);
-		font-weight: 700;
+		font-weight: var(--font-weight-heading);
 		margin-bottom: var(--spacing-sm);
 	}
 
@@ -151,8 +145,8 @@ const plans = rawPlans.map((plan) => ({
 
 	.pricing-amount {
 		font-size: var(--font-size-4xl);
-		font-weight: 800;
-		letter-spacing: -0.03em;
+		font-weight: var(--font-weight-display);
+		letter-spacing: var(--tracking-tight);
 	}
 
 	.pricing-period {
diff --git a/marketing-cloudflare/src/components/blocks/Testimonials.astro b/marketing-cloudflare/src/components/blocks/Testimonials.astro
index c71ff20..2b85eb2 100644
--- a/marketing-cloudflare/src/components/blocks/Testimonials.astro
+++ b/marketing-cloudflare/src/components/blocks/Testimonials.astro
@@ -19,8 +19,8 @@ const { headline, testimonials } = node;
 <section class="testimonials section">
 	<div class="container">
 		{headline && (
-			<header class="testimonials-header">
-				<h2 class="testimonials-headline">{headline}</h2>
+			<header class="section-header">
+				<h2 class="section-headline">{headline}</h2>
 			</header>
 		)}
 		<div class="testimonials-grid">
@@ -60,16 +60,6 @@ const { headline, testimonials } = node;
 		background: var(--color-surface);
 	}
 
-	.testimonials-header {
-		text-align: center;
-		margin-bottom: var(--spacing-4xl);
-	}
-
-	.testimonials-headline {
-		font-size: var(--font-size-3xl);
-		font-weight: 800;
-	}
-
 	.testimonials-grid {
 		display: grid;
 		grid-template-columns: repeat(3, 1fr);
@@ -88,7 +78,7 @@ const { headline, testimonials } = node;
 
 	.testimonial-quote {
 		font-size: var(--font-size-lg);
-		line-height: 1.6;
+		line-height: var(--leading-normal);
 		color: var(--color-text);
 		flex: 1;
 	}
diff --git a/marketing-cloudflare/src/layouts/Base.astro b/marketing-cloudflare/src/layouts/Base.astro
index 428ee80..e0567ce 100644
--- a/marketing-cloudflare/src/layouts/Base.astro
+++ b/marketing-cloudflare/src/layouts/Base.astro
@@ -3,6 +3,7 @@ import { getMenu, getSiteSettings } from "emdash";
 import { EmDashHead } from "emdash/ui";
 import { createPublicPageContext } from "emdash/page";
 import { Font } from "astro:assets";
+import "../styles/tokens.css";
 import "../styles/theme.css";
 
 interface Props {
@@ -54,17 +55,16 @@ const pageCtx = createPublicPageContext({
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>{fullTitle}</title>
 		<EmDashHead page={pageCtx} />
-		<Font cssVariable="--font-sans" preload />
+		<Font cssVariable="--font-body" preload />
 		<script is:inline>
-			// Apply theme immediately to prevent flash
+			// Apply an explicit theme choice immediately to prevent flash.
+			// With no cookie, color-scheme: light dark follows the OS.
 			(function () {
 				var c = document.cookie;
 				var i = c.indexOf("theme=");
 				var theme = i >= 0 ? c.slice(i + 6).split(";")[0] : null;
 				if (theme === "dark" || theme === "light") {
 					document.documentElement.classList.add(theme);
-				} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-					document.documentElement.classList.add("dark");
 				}
 			})();
 		</script>
@@ -89,7 +89,7 @@ const pageCtx = createPublicPageContext({
 				</div>
 				<div class="nav-actions">
 					<a href="/_emdash/admin" class="nav-admin">Admin</a>
-					<a href="/signup" class="nav-cta">Get Started</a>
+					<a href="/signup" class="btn btn-primary nav-cta">Get Started</a>
 				</div>
 			</nav>
 		</header>
@@ -172,9 +172,6 @@ const pageCtx = createPublicPageContext({
 				if (theme === "system") {
 					document.cookie = `theme=; path=/; max-age=0; SameSite=Lax${secure}`;
 					root.classList.remove("light", "dark");
-					if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-						root.classList.add("dark");
-					}
 				} else {
 					document.cookie = `theme=${theme}; path=/; max-age=31536000; SameSite=Lax${secure}`;
 					root.classList.remove("light", "dark");
@@ -203,15 +200,6 @@ const pageCtx = createPublicPageContext({
 					setTheme(btn.dataset.theme || "system");
 				});
 			});
-
-			// Listen for system preference changes
-			window
-				.matchMedia("(prefers-color-scheme: dark)")
-				.addEventListener("change", (e) => {
-					if (getStoredTheme() === "system") {
-						root.classList.toggle("dark", e.matches);
-					}
-				});
 		</script>
 
 		<style is:global>
@@ -231,96 +219,22 @@ const pageCtx = createPublicPageContext({
 					padding: 0;
 				}
 
-				:root {
-					/* Colors - Playful/Bold palette */
-					--color-bg: #ffffff;
-					--color-text: #0f172a;
-					--color-muted: #64748b;
-					--color-border: #e2e8f0;
-					--color-surface: #f8fafc;
-					--color-primary: #6366f1;
-					--color-primary-dark: #4f46e5;
-					--color-primary-light: #818cf8;
-					--color-accent: #f472b6;
-					--color-accent-light: #f9a8d4;
-					--color-success: #22c55e;
-					--color-warning: #f59e0b;
-
-					/* Typography */
-					--font-mono: ui-monospace, "SF Mono", monospace;
-
-					--font-size-xs: 0.75rem;
-					--font-size-sm: 0.875rem;
-					--font-size-base: 1rem;
-					--font-size-lg: 1.125rem;
-					--font-size-xl: 1.25rem;
-					--font-size-2xl: 1.5rem;
-					--font-size-3xl: 2rem;
-					--font-size-4xl: 2.5rem;
-					--font-size-5xl: 3.5rem;
-					--font-size-6xl: 4.5rem;
-
-					/* Spacing */
-					--spacing-xs: 0.25rem;
-					--spacing-sm: 0.5rem;
-					--spacing-md: 1rem;
-					--spacing-lg: 1.5rem;
-					--spacing-xl: 2rem;
-					--spacing-2xl: 3rem;
-					--spacing-3xl: 4rem;
-					--spacing-4xl: 6rem;
-					--spacing-5xl: 8rem;
-
-					/* Layout */
-					--max-width: 720px;
-					--wide-width: 1200px;
-					--radius-sm: 6px;
-					--radius: 10px;
-					--radius-lg: 16px;
-					--radius-full: 9999px;
-
-					/* Transitions */
-					--transition-fast: 150ms ease;
-					--transition-base: 200ms ease;
-					--transition-slow: 300ms ease;
-
-					/* Shadows */
-					--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-					--shadow:
-						0 4px 6px -1px rgba(0, 0, 0, 0.1),
-						0 2px 4px -2px rgba(0, 0, 0, 0.1);
-					--shadow-lg:
-						0 10px 15px -3px rgba(0, 0, 0, 0.1),
-						0 4px 6px -4px rgba(0, 0, 0, 0.1);
-					--shadow-xl:
-						0 20px 25px -5px rgba(0, 0, 0, 0.1),
-						0 8px 10px -6px rgba(0, 0, 0, 0.1);
-				}
-
-				/* Dark mode via system preference (when no explicit class) */
-				@media (prefers-color-scheme: dark) {
-					:root:not(.light) {
-						--color-bg: #0f172a;
-						--color-text: #f1f5f9;
-						--color-muted: #94a3b8;
-						--color-border: #334155;
-						--color-surface: #1e293b;
-						--color-primary: #818cf8;
-						--color-primary-dark: #6366f1;
-						--color-primary-light: #a5b4fc;
+				/*
+				 * Design tokens live in src/styles/tokens.css. Colors are
+				 * defined with light-dark(); these rules pin the scheme when
+				 * the footer switcher sets an explicit choice. With no class,
+				 * color-scheme: light dark follows the OS preference. The
+				 * @supports guard keeps the toggle from forcing dark UA form
+				 * controls on browsers stuck on the plain-light fallback.
+				 */
+				@supports (color: light-dark(#000, #fff)) {
+					:root.light {
+						color-scheme: light;
 					}
-				}
 
-				/* Explicit dark mode */
-				:root.dark {
-					--color-bg: #0f172a;
-					--color-text: #f1f5f9;
-					--color-muted: #94a3b8;
-					--color-border: #334155;
-					--color-surface: #1e293b;
-					--color-primary: #818cf8;
-					--color-primary-dark: #6366f1;
-					--color-primary-light: #a5b4fc;
+					:root.dark {
+						color-scheme: dark;
+					}
 				}
 
 				html {
@@ -328,20 +242,30 @@ const pageCtx = createPublicPageContext({
 				}
 
 				body {
-					font-family: var(--font-sans);
+					font-family: var(--font-body);
 					font-size: var(--font-size-base);
-					line-height: 1.6;
+					line-height: var(--leading-normal);
 					color: var(--color-text);
 					background: var(--color-bg);
 					-webkit-font-smoothing: antialiased;
 					min-height: 100vh;
 				}
 
-				a {
+				a:where(:not([class*="emdash"]):not([class*="ec-"])) {
 					color: currentColor;
 					text-decoration: none;
 				}
 
+				/* Inline links in authored content (Portable Text renders bare
+				   <a> tags) need a visible style; component links restyle
+				   themselves via classes. */
+				p a:not([class]),
+				li a:not([class]) {
+					color: var(--color-brand);
+					text-decoration: underline;
+					text-underline-offset: 2px;
+				}
+
 				img {
 					max-width: 100%;
 					height: auto;
@@ -354,9 +278,10 @@ const pageCtx = createPublicPageContext({
 				h4,
 				h5,
 				h6 {
-					font-weight: 700;
-					line-height: 1.2;
-					letter-spacing: -0.02em;
+					font-family: var(--font-heading);
+					font-weight: var(--font-weight-heading);
+					line-height: var(--leading-snug);
+					letter-spacing: var(--tracking-snug);
 				}
 
 				h1 {
@@ -383,6 +308,36 @@ const pageCtx = createPublicPageContext({
 					padding: var(--spacing-5xl) 0;
 				}
 
+				.section-header {
+					text-align: center;
+					max-width: var(--max-width);
+					margin: 0 auto var(--spacing-4xl);
+				}
+
+				.section-headline {
+					font-size: var(--font-size-3xl);
+					font-weight: var(--font-weight-display);
+				}
+
+				.section-subheadline {
+					margin-top: var(--spacing-md);
+					font-size: var(--font-size-lg);
+					color: var(--color-muted);
+				}
+
+				.icon-tile {
+					width: 48px;
+					height: 48px;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					flex-shrink: 0;
+					font-size: 1.5rem;
+					color: var(--color-on-brand);
+					background: var(--gradient-brand);
+					border-radius: var(--radius);
+				}
+
 				.btn {
 					display: inline-flex;
 					align-items: center;
@@ -409,24 +364,17 @@ const pageCtx = createPublicPageContext({
 				}
 
 				.btn-primary {
-					color: white;
-					background: linear-gradient(
-						135deg,
-						var(--color-primary-dark),
-						var(--color-accent)
-					);
+					color: var(--color-on-brand);
+					background: var(--gradient-brand-strong);
 					border: none;
 					transition:
 						background 0.3s ease,
-						box-shadow 0.3s ease;
+						box-shadow 0.3s ease,
+						transform var(--transition-fast);
 				}
 
 				.btn-primary:hover {
-					background: linear-gradient(
-						135deg,
-						var(--color-primary),
-						var(--color-accent)
-					);
+					background: var(--gradient-brand);
 					box-shadow: var(--shadow-lg);
 				}
 
@@ -469,13 +417,9 @@ const pageCtx = createPublicPageContext({
 
 			.site-logo {
 				font-size: var(--font-size-xl);
-				font-weight: 800;
-				letter-spacing: -0.03em;
-				background: linear-gradient(
-					135deg,
-					var(--color-primary),
-					var(--color-accent)
-				);
+				font-weight: var(--font-weight-display);
+				letter-spacing: var(--tracking-tight);
+				background: var(--gradient-brand);
 				-webkit-background-clip: text;
 				-webkit-text-fill-color: transparent;
 				background-clip: text;
@@ -518,29 +462,10 @@ const pageCtx = createPublicPageContext({
 				opacity: 0.5;
 			}
 
+			/* Compact variant of .btn.btn-primary for the header */
 			.nav-cta {
 				padding: var(--spacing-sm) var(--spacing-md);
-				font-size: var(--font-size-sm);
-				font-weight: 600;
-				color: white;
-				background: linear-gradient(
-					135deg,
-					var(--color-primary-dark),
-					var(--color-accent)
-				);
 				border-radius: var(--radius-sm);
-				transition:
-					background 0.3s ease,
-					transform var(--transition-fast);
-			}
-
-			.nav-cta:hover {
-				background: linear-gradient(
-					135deg,
-					var(--color-primary),
-					var(--color-accent)
-				);
-				transform: translateY(-1px);
 			}
 
 			main {
@@ -563,8 +488,8 @@ const pageCtx = createPublicPageContext({
 
 			.footer-logo {
 				font-size: var(--font-size-xl);
-				font-weight: 800;
-				letter-spacing: -0.03em;
+				font-weight: var(--font-weight-display);
+				letter-spacing: var(--tracking-tight);
 			}
 
 			.footer-logo-img {
@@ -627,7 +552,7 @@ const pageCtx = createPublicPageContext({
 				background: transparent;
 				border: 1px solid var(--color-border);
 				color: var(--color-muted);
-				font-family: var(--font-sans);
+				font-family: var(--font-body);
 				font-size: var(--font-size-sm);
 				padding: var(--spacing-xs) var(--spacing-sm);
 				border-radius: var(--radius-sm);
@@ -643,7 +568,7 @@ const pageCtx = createPublicPageContext({
 			.theme-btn.active {
 				background: var(--color-bg);
 				color: var(--color-text);
-				border-color: var(--color-primary);
+				border-color: var(--color-brand);
 			}
 
 			@media (max-width: 768px) {
diff --git a/marketing-cloudflare/src/pages/404.astro b/marketing-cloudflare/src/pages/404.astro
index 4422f73..eb86e71 100644
--- a/marketing-cloudflare/src/pages/404.astro
+++ b/marketing-cloudflare/src/pages/404.astro
@@ -24,10 +24,10 @@ import Base from "../layouts/Base.astro";
 
 	.not-found-code {
 		font-size: 10rem;
-		font-weight: 800;
+		font-weight: var(--font-weight-display);
 		line-height: 1;
 		letter-spacing: -0.05em;
-		background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
+		background: var(--gradient-brand);
 		-webkit-background-clip: text;
 		-webkit-text-fill-color: transparent;
 		background-clip: text;
diff --git a/marketing-cloudflare/src/pages/contact.astro b/marketing-cloudflare/src/pages/contact.astro
index e94bf01..c168bd4 100644
--- a/marketing-cloudflare/src/pages/contact.astro
+++ b/marketing-cloudflare/src/pages/contact.astro
@@ -71,7 +71,7 @@ const pageContent = page?.data.content;
 
 					<div class="contact-methods">
 						<div class="contact-method">
-							<div class="contact-icon">
+							<div class="icon-tile contact-icon">
 								<Icon name="ph:envelope" aria-hidden="true" />
 							</div>
 							<div class="contact-method-content">
@@ -80,7 +80,7 @@ const pageContent = page?.data.content;
 							</div>
 						</div>
 						<div class="contact-method">
-							<div class="contact-icon">
+							<div class="icon-tile contact-icon">
 								<Icon name="ph:lifebuoy" aria-hidden="true" />
 							</div>
 							<div class="contact-method-content">
@@ -89,7 +89,7 @@ const pageContent = page?.data.content;
 							</div>
 						</div>
 						<div class="contact-method">
-							<div class="contact-icon">
+							<div class="icon-tile contact-icon">
 								<Icon name="ph:currency-dollar" aria-hidden="true" />
 							</div>
 							<div class="contact-method-content">
@@ -213,20 +213,7 @@ const pageContent = page?.data.content;
 	}
 
 	.contact-icon {
-		width: 48px;
-		height: 48px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
 		font-size: 1.25rem;
-		color: white;
-		background: linear-gradient(
-			135deg,
-			var(--color-primary),
-			var(--color-accent)
-		);
-		border-radius: var(--radius);
-		flex-shrink: 0;
 	}
 
 	.contact-method-content h4 {
@@ -236,7 +223,7 @@ const pageContent = page?.data.content;
 	}
 
 	.contact-method-content a {
-		color: var(--color-primary);
+		color: var(--color-brand);
 		font-size: var(--font-size-lg);
 	}
 
@@ -291,8 +278,8 @@ const pageContent = page?.data.content;
 	.form-field input:focus,
 	.form-field textarea:focus {
 		outline: none;
-		border-color: var(--color-primary);
-		box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+		border-color: var(--color-brand);
+		box-shadow: 0 0 0 3px var(--color-brand-ring);
 	}
 
 	.form-field input::placeholder,
@@ -307,19 +294,13 @@ const pageContent = page?.data.content;
 
 	.form-error {
 		padding: var(--spacing-md);
-		background: rgba(239, 68, 68, 0.1);
-		border: 1px solid rgba(239, 68, 68, 0.3);
+		background: color-mix(in srgb, var(--color-danger) 10%, transparent);
+		border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
 		border-radius: var(--radius-sm);
-		color: #dc2626;
+		color: var(--color-danger);
 		font-size: var(--font-size-sm);
 	}
 
-	@media (prefers-color-scheme: dark) {
-		.form-error {
-			color: #f87171;
-		}
-	}
-
 	.form-success {
 		text-align: center;
 		padding: var(--spacing-2xl);
@@ -332,7 +313,7 @@ const pageContent = page?.data.content;
 		align-items: center;
 		justify-content: center;
 		font-size: 2rem;
-		color: white;
+		color: var(--color-on-brand);
 		background: var(--color-success);
 		border-radius: var(--radius-full);
 		margin: 0 auto var(--spacing-lg);
diff --git a/marketing-cloudflare/src/styles/theme.css b/marketing-cloudflare/src/styles/theme.css
index 59580ec..1ad0a6d 100644
--- a/marketing-cloudflare/src/styles/theme.css
+++ b/marketing-cloudflare/src/styles/theme.css
@@ -1,80 +1,32 @@
 /*
-  theme.css -- override any :root variable here to retheme the site.
+  theme.css -- your theme overrides. This is the file to edit to
+  retheme the site.
 
-  This is the only file you need to edit to customize the site's visual
-  appearance. All defaults are listed below as comments. Uncomment and
-  change any value to override it.
+  Every design token lives in src/styles/tokens.css (colors, gradients,
+  type scale, spacing, layout, shadows) with its default value. Override
+  any of them here: declarations in this file are unlayered, so they
+  always beat the @layer base defaults in tokens.css.
 
-  Base.astro puts its defaults inside @layer base, so declarations here
-  (which are unlayered) always take priority -- no specificity tricks needed.
+  Colors are defined with light-dark(). Overriding with a plain color
+  changes light and dark mode at once; use light-dark(<light>, <dark>)
+  to set different values per mode.
 
-  Note: this template defines explicit dark mode colors in Base.astro.
-  Overriding light-mode --color-* variables here won't affect dark mode.
-  To customize dark mode, also override --color-* variables inside a
-  @media (prefers-color-scheme: dark) block and/or in the :root.dark rule.
-*/
-
-:root {
-	/* --- Colors ---
-	--color-bg: #ffffff;
-	--color-text: #0f172a;
-	--color-muted: #64748b;
-	--color-border: #e2e8f0;
-	--color-surface: #f8fafc;
-	--color-primary: #6366f1;
-	--color-primary-dark: #4f46e5;
-	--color-primary-light: #818cf8;
-	--color-accent: #f472b6;
-	--color-accent-light: #f9a8d4;
-	--color-success: #22c55e;
-	--color-warning: #f59e0b;
-	*/
+  Rebranding usually only needs --color-brand-* and --color-accent-* --
+  the gradient tokens follow automatically. For a flat, gradient-free
+  brand, set the --gradient-* tokens to solid colors.
 
-	/* --- Typography ---
-	--font-mono: ui-monospace, "SF Mono", monospace;
-	--font-size-xs: 0.75rem;
-	--font-size-sm: 0.875rem;
-	--font-size-base: 1rem;
-	--font-size-lg: 1.125rem;
-	--font-size-xl: 1.25rem;
-	--font-size-2xl: 1.5rem;
-	--font-size-3xl: 2rem;
-	--font-size-4xl: 2.5rem;
-	--font-size-5xl: 3.5rem;
-	--font-size-6xl: 4.5rem;
-	*/
+  Webfonts are loaded in astro.config.mjs (--font-body). Swap the loaded
+  font there; use overrides here for system fonts or a separate heading
+  face.
 
-	/* --- Spacing ---
-	--spacing-xs: 0.25rem;
-	--spacing-sm: 0.5rem;
-	--spacing-md: 1rem;
-	--spacing-lg: 1.5rem;
-	--spacing-xl: 2rem;
-	--spacing-2xl: 3rem;
-	--spacing-3xl: 4rem;
-	--spacing-4xl: 6rem;
-	--spacing-5xl: 8rem;
-	*/
+  Example:
 
-	/* --- Layout ---
-	--max-width: 720px;
-	--wide-width: 1200px;
-	--radius-sm: 6px;
-	--radius: 10px;
-	--radius-lg: 16px;
-	--radius-full: 9999px;
-	*/
-
-	/* --- Transitions ---
-	--transition-fast: 150ms ease;
-	--transition-base: 200ms ease;
-	--transition-slow: 300ms ease;
-	*/
+  :root {
+    --color-brand: light-dark(#0d9488, #2dd4bf);
+    --color-accent: #f59e0b;
+    --font-weight-display: 700;
+  }
+*/
 
-	/* --- Shadows ---
-	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-	--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-	*/
+:root {
 }
diff --git a/marketing-cloudflare/src/styles/tokens.css b/marketing-cloudflare/src/styles/tokens.css
new file mode 100644
index 0000000..0fcac52
--- /dev/null
+++ b/marketing-cloudflare/src/styles/tokens.css
@@ -0,0 +1,139 @@
+/*
+  tokens.css -- the design tokens for this template. These are the
+  defaults; to customize the site, override any variable in
+  src/styles/theme.css rather than editing this file. Declarations in
+  theme.css are unlayered, so they always beat these @layer base
+  defaults -- no specificity tricks needed.
+
+  Colors use light-dark(): the first value applies in light mode, the
+  second in dark mode. Overriding a color with a plain value changes
+  both modes at once; use light-dark(<light>, <dark>) in an override to
+  keep them distinct.
+
+  The signature gradients are tokens too. Rebranding usually only needs
+  new --color-brand-* / --color-accent-* values -- the gradients follow.
+  For a flat, gradient-free brand, set the --gradient-* tokens to solid
+  colors.
+
+  --font-body is defined by the font pipeline in astro.config.mjs, not
+  here. To swap the loaded webfont, edit the fonts entry there. To use a
+  system font, or a different face for headings only, override
+  --font-body / --font-heading in theme.css.
+*/
+
+@layer base {
+	:root {
+		color-scheme: light dark;
+
+		/* Colors */
+		--color-bg: light-dark(#ffffff, #0f172a);
+		--color-text: light-dark(#0f172a, #f1f5f9);
+		--color-muted: light-dark(#64748b, #94a3b8);
+		--color-border: light-dark(#e2e8f0, #334155);
+		--color-surface: light-dark(#f8fafc, #1e293b);
+		--color-brand: light-dark(#6366f1, #818cf8);
+		--color-brand-strong: light-dark(#4f46e5, #6366f1);
+		--color-brand-soft: light-dark(#818cf8, #a5b4fc);
+		--color-accent: #f472b6; /* gradient partner to --color-brand */
+		--color-accent-soft: #f9a8d4;
+		--color-on-brand: white; /* text/icons on brand and gradient surfaces */
+		--color-brand-ring: color-mix(in srgb, var(--color-brand) 10%, transparent);
+		--color-success: #22c55e;
+		--color-warning: #f59e0b;
+		--color-danger: light-dark(#dc2626, #f87171);
+
+		/* Gradients */
+		--gradient-brand: linear-gradient(135deg, var(--color-brand), var(--color-accent));
+		--gradient-brand-strong: linear-gradient(
+			135deg,
+			var(--color-brand-strong),
+			var(--color-accent)
+		); /* CTA resting state; hovers to --gradient-brand */
+		--gradient-brand-soft: linear-gradient(
+			135deg,
+			var(--color-brand-soft),
+			var(--color-accent-soft)
+		); /* hero image glow */
+		--gradient-headline: linear-gradient(
+			135deg,
+			var(--color-text),
+			var(--color-muted)
+		); /* hero headline text fill */
+
+		/* Typography */
+		--font-heading: var(--font-body);
+		--font-weight-heading: 700; /* h2-h6, card titles */
+		--font-weight-display: 800; /* hero and section headlines, logo */
+
+		/* Type scale */
+		--font-size-xs: 0.75rem;
+		--font-size-sm: 0.875rem;
+		--font-size-base: 1rem;
+		--font-size-lg: 1.125rem;
+		--font-size-xl: 1.25rem;
+		--font-size-2xl: 1.5rem;
+		--font-size-3xl: 2rem;
+		--font-size-4xl: 2.5rem;
+		--font-size-5xl: 3.5rem;
+		--font-size-6xl: 4.5rem;
+
+		/* Line heights */
+		--leading-tight: 1.1; /* hero headline */
+		--leading-snug: 1.2; /* headings */
+		--leading-normal: 1.6; /* body copy */
+		--leading-relaxed: 1.7; /* FAQ answers, long-form */
+
+		/* Letter spacing */
+		--tracking-tight: -0.03em; /* hero headline, logo, prices */
+		--tracking-snug: -0.02em; /* headings */
+
+		/* Spacing */
+		--spacing-xs: 0.25rem;
+		--spacing-sm: 0.5rem;
+		--spacing-md: 1rem;
+		--spacing-lg: 1.5rem;
+		--spacing-xl: 2rem;
+		--spacing-2xl: 3rem;
+		--spacing-3xl: 4rem;
+		--spacing-4xl: 6rem;
+		--spacing-5xl: 8rem;
+
+		/* Layout */
+		--max-width: 720px;
+		--wide-width: 1200px;
+		--radius-sm: 6px;
+		--radius: 10px;
+		--radius-lg: 16px;
+		--radius-full: 9999px;
+
+		/* Transitions */
+		--transition-fast: 150ms ease;
+		--transition-base: 200ms ease;
+		--transition-slow: 300ms ease;
+
+		/* Shadows */
+		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+		--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+		--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+		--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+	}
+
+	/*
+	 * Light-mode values for browsers without light-dark() (Safari < 17.5,
+	 * Chrome < 123). Must mirror the light values above.
+	 */
+	@supports not (color: light-dark(#000, #fff)) {
+		:root {
+			color-scheme: light;
+			--color-bg: #ffffff;
+			--color-text: #0f172a;
+			--color-muted: #64748b;
+			--color-border: #e2e8f0;
+			--color-surface: #f8fafc;
+			--color-brand: #6366f1;
+			--color-brand-strong: #4f46e5;
+			--color-brand-soft: #818cf8;
+			--color-danger: #dc2626;
+		}
+	}
+}
diff --git a/marketing/.agents/skills/creating-plugins/references/admin-ui.md b/marketing/.agents/skills/creating-plugins/references/admin-ui.md
index e2289e1..9e26b8d 100644
--- a/marketing/.agents/skills/creating-plugins/references/admin-ui.md
+++ b/marketing/.agents/skills/creating-plugins/references/admin-ui.md
@@ -12,7 +12,7 @@ import { SettingsPage } from "./components/SettingsPage";
 import { ReportsPage } from "./components/ReportsPage";
 import { StatusWidget } from "./components/StatusWidget";
 
-// Pages keyed by path (must match admin.pages paths)
+// Pages keyed by path (trailing slash optional, so /settings and /settings/ both resolve)
 export const pages = {
 	"/settings": SettingsPage,
 	"/reports": ReportsPage,
diff --git a/marketing/.agents/skills/creating-plugins/references/api-routes.md b/marketing/.agents/skills/creating-plugins/references/api-routes.md
index c4d2419..8ecf112 100644
--- a/marketing/.agents/skills/creating-plugins/references/api-routes.md
+++ b/marketing/.agents/skills/creating-plugins/references/api-routes.md
@@ -175,7 +175,9 @@ routes: {
 	},
 	"settings/save": {
 		handler: async (ctx) => {
-			const input = await ctx.request.json();
+			// EmDash parses the request body once and exposes it as ctx.input.
+			// Don't call ctx.request.json() — the body stream is already consumed.
+			const input = ctx.input as Record<string, unknown>;
 			for (const [key, value] of Object.entries(input)) {
 				if (value !== undefined) await ctx.kv.set(`settings:${key}`, value);
 			}
diff --git a/marketing/.agents/skills/creating-plugins/references/block-kit.md b/marketing/.agents/skills/creating-plugins/references/block-kit.md
index 397505b..5354e91 100644
--- a/marketing/.agents/skills/creating-plugins/references/block-kit.md
+++ b/marketing/.agents/skills/creating-plugins/references/block-kit.md
@@ -16,10 +16,16 @@ Block Kit elements are also used for [Portable Text block editing fields](./port
 6. Plugin returns new blocks
 
 ```typescript
+import type { BlockInteraction } from "@emdash-cms/blocks";
+
 routes: {
 	admin: {
 		handler: async (ctx) => {
-			const interaction = await ctx.request.json();
+			// EmDash parses the request body once and exposes it as ctx.input;
+			// read it directly rather than ctx.request.json() (the body is consumed).
+			// BlockInteraction is the discriminated union of page_load,
+			// block_action, and form_submit payloads.
+			const interaction = ctx.input as BlockInteraction;
 
 			if (interaction.type === "page_load") {
 				return {
diff --git a/marketing/AGENTS.md b/marketing/AGENTS.md
index cd7d0ec..6bea048 100644
--- a/marketing/AGENTS.md
+++ b/marketing/AGENTS.md
@@ -88,37 +88,43 @@ Constraints worth remembering:
 
 ## Visual character
 
-Typography is **Inter** on `--font-sans` with weights up to 800 for headline emphasis. There is no mono font, no serif. Headline tracking is tight.
+Typography is **Inter** on `--font-body` with weights up to 800 for headline emphasis (`--font-weight-display: 800` on hero and section headlines, `--font-weight-heading: 700` on other headings). There is no mono font, no serif. Headline tracking is tight (`--tracking-tight`).
 
 Colour is the loudest of any template here. The default palette is:
 
-- `--color-primary: #6366f1` (indigo) -- main brand colour, used in buttons and links
-- `--color-accent: #f472b6` (pink) -- paired with primary in gradients (CTA buttons, icon backgrounds)
-- `--color-success`, `--color-warning` -- semantic colours for inline icons (pricing checkmarks)
+- `--color-brand: #6366f1` (indigo) -- main brand colour, used in buttons and links, with `--color-brand-strong` / `--color-brand-soft` shades
+- `--color-accent: #f472b6` (pink) -- the gradient partner to brand
+- `--color-success`, `--color-warning`, `--color-danger` -- semantic colours (pricing checkmarks, form errors)
 
-Gradients are part of the look (`--color-primary` -> `--color-accent` on the "Get Started" button, on contact-method icons, on the "Most popular" pricing badge). Don't strip them entirely -- the template will look generic without them. Do swap them for a different pair if the brand calls for it.
+Gradients are part of the look and are tokens themselves: `--gradient-brand` (logo, icon tiles, pricing badge, CTA hover), `--gradient-brand-strong` (CTA resting state), `--gradient-brand-soft` (hero image glow), and `--gradient-headline` (hero headline text fill). They follow the brand/accent colours automatically, so a rebrand usually only needs new `--color-brand-*` / `--color-accent-*` values. Don't strip the gradients entirely -- the template will look generic without them -- but a flat brand can set the `--gradient-*` tokens to solid colours.
+
+Shared utility classes keep the blocks consistent: `.section-header` / `.section-headline` / `.section-subheadline` for centred block intros, and `.icon-tile` for the 48px gradient icon squares. Use them in new blocks rather than restyling per block.
 
 Roundness is generous: `--radius` is 10px, `--radius-lg` 16px, plus a `--radius-full` for pills. Shadows are layered (`--shadow-sm` through `--shadow-xl`).
 
 ## Customisation
 
-`src/styles/theme.css` is the only file to edit for visual changes. Every CSS variable from `Base.astro` is listed there as a commented default. The dark mode palette is defined inside `Base.astro`; light-mode overrides in `theme.css` won't affect dark mode. To customise dark mode, add `@media (prefers-color-scheme: dark)` and `:root.dark` rules in `theme.css`.
+Design tokens live in `src/styles/tokens.css` with their default values. To restyle the site, override tokens in `src/styles/theme.css` -- declarations there are unlayered, so they always beat the `@layer base` defaults. Don't edit `tokens.css` or `Base.astro` for visual changes.
+
+Colours are defined with `light-dark(<light>, <dark>)`, so each token carries both modes. Overriding with a plain colour changes light and dark at once; use `light-dark()` in the override to keep them distinct. There is no separate dark palette to maintain.
 
-Fonts are configured in `astro.config.mjs` under `fonts:`. To swap the typeface, change the `name:` for the entry bound to `cssVariable: "--font-sans"`. Inter has 5 weights loaded (400-800) for hero impact -- if you swap, ensure the replacement has comparable weight range. Geist, Plus Jakarta Sans, Manrope, and DM Sans all work well as replacements.
+Webfonts are configured in `astro.config.mjs` under `fonts:`. To swap the typeface, change the `name:` for the entry bound to `cssVariable: "--font-body"`. Inter has 5 weights loaded (400-800) for hero impact -- if you swap, ensure the replacement has comparable weight range. Geist, Plus Jakarta Sans, Manrope, and DM Sans all work well as replacements. For a system font, or a separate heading face, override `--font-body` / `--font-heading` in `theme.css`. A softer voice (editorial, luxury) usually also wants `--font-weight-display: 700` or lower.
 
-CSS variables worth knowing:
+CSS variables worth knowing (see `tokens.css` for the full list):
 
-- `--color-primary`, `--color-primary-dark`, `--color-primary-light`
-- `--color-accent`, `--color-accent-light`
+- `--color-brand`, `--color-brand-strong`, `--color-brand-soft`, `--color-on-brand`, `--color-brand-ring`
+- `--color-accent`, `--color-accent-soft`
+- `--gradient-brand`, `--gradient-brand-strong`, `--gradient-brand-soft`, `--gradient-headline`
 - `--color-bg`, `--color-surface`, `--color-text`, `--color-muted`, `--color-border`
-- `--font-sans`
+- `--color-success`, `--color-warning`, `--color-danger`
+- `--font-body`, `--font-heading`, `--font-weight-heading` (700), `--font-weight-display` (800)
 - `--font-size-{xs,sm,base,lg,xl,2xl,3xl,4xl,5xl,6xl}` -- type scale up to 4.5rem for the largest hero
 - `--radius-sm` (6px), `--radius` (10px), `--radius-lg` (16px), `--radius-full`
 - `--shadow-sm`, `--shadow`, `--shadow-lg`, `--shadow-xl`
 
 To re-brand, the highest-leverage moves are:
 
-1. Change `--color-primary` and `--color-accent` to the brand pair.
+1. Change `--color-brand` (and its `-strong` / `-soft` shades) and `--color-accent` to the brand pair -- the gradients follow.
 2. Update the site title (logo wordmark) and tagline.
 3. Replace the hero illustration URL.
 4. Edit hero `headline` and `subheadline` blocks to specific, concrete copy.
diff --git a/marketing/astro.config.mjs b/marketing/astro.config.mjs
index 88cfa57..e0013aa 100644
--- a/marketing/astro.config.mjs
+++ b/marketing/astro.config.mjs
@@ -62,7 +62,7 @@ export default defineConfig({
 		{
 			provider: fontProviders.google(),
 			name: "Inter",
-			cssVariable: "--font-sans",
+			cssVariable: "--font-body",
 			weights: [400, 500, 600, 700, 800],
 			fallbacks: ["sans-serif"],
 		},
diff --git a/marketing/package.json b/marketing/package.json
index 73f94b4..a91cf6b 100644
--- a/marketing/package.json
+++ b/marketing/package.json
@@ -20,7 +20,7 @@
     "astro": "^7.0.0",
     "astro-iconset": "^0.0.4",
     "better-sqlite3": "^12.8.0",
-    "emdash": "^0.27.0",
+    "emdash": "^0.28.1",
     "react": "19.2.4",
     "react-dom": "19.2.4"
   },
diff --git a/marketing/src/components/blocks/FAQ.astro b/marketing/src/components/blocks/FAQ.astro
index d313455..d4b3603 100644
--- a/marketing/src/components/blocks/FAQ.astro
+++ b/marketing/src/components/blocks/FAQ.astro
@@ -17,8 +17,8 @@ const { _key, headline, items } = node;
 <section class="faq section" id={_key}>
 	<div class="container">
 		{headline && (
-			<header class="faq-header">
-				<h2 class="faq-headline">{headline}</h2>
+			<header class="section-header">
+				<h2 class="section-headline">{headline}</h2>
 			</header>
 		)}
 		<div class="faq-list">
@@ -40,16 +40,6 @@ const { _key, headline, items } = node;
 </section>
 
 <style>
-	.faq-header {
-		text-align: center;
-		margin-bottom: var(--spacing-4xl);
-	}
-
-	.faq-headline {
-		font-size: var(--font-size-3xl);
-		font-weight: 800;
-	}
-
 	.faq-list {
 		max-width: var(--max-width);
 		margin: 0 auto;
@@ -71,7 +61,7 @@ const { _key, headline, items } = node;
 	}
 
 	.faq-item[open] {
-		border-color: var(--color-primary-light);
+		border-color: var(--color-brand-soft);
 	}
 
 	.faq-question {
@@ -109,6 +99,6 @@ const { _key, headline, items } = node;
 	.faq-answer p {
 		font-size: var(--font-size-sm);
 		color: var(--color-muted);
-		line-height: 1.7;
+		line-height: var(--leading-relaxed);
 	}
 </style>
diff --git a/marketing/src/components/blocks/Features.astro b/marketing/src/components/blocks/Features.astro
index 71a5133..33cbb10 100644
--- a/marketing/src/components/blocks/Features.astro
+++ b/marketing/src/components/blocks/Features.astro
@@ -36,15 +36,15 @@ const iconMap: Record<string, string> = {
 <section class="features section" id={_key}>
 	<div class="container">
 		{(headline || subheadline) && (
-			<header class="features-header">
-				{headline && <h2 class="features-headline">{headline}</h2>}
-				{subheadline && <p class="features-subheadline">{subheadline}</p>}
+			<header class="section-header">
+				{headline && <h2 class="section-headline">{headline}</h2>}
+				{subheadline && <p class="section-subheadline">{subheadline}</p>}
 			</header>
 		)}
 		<div class="features-grid">
 			{features.map((feature) => (
 				<div class="feature-card">
-					<div class="feature-icon">
+					<div class="icon-tile feature-icon">
 						<Icon name={iconMap[feature.icon] || "ph:sparkle"} aria-hidden="true" />
 					</div>
 					<h3 class="feature-title">{feature.title}</h3>
@@ -56,23 +56,6 @@ const iconMap: Record<string, string> = {
 </section>
 
 <style>
-	.features-header {
-		text-align: center;
-		max-width: var(--max-width);
-		margin: 0 auto var(--spacing-4xl);
-	}
-
-	.features-headline {
-		font-size: var(--font-size-3xl);
-		font-weight: 800;
-		margin-bottom: var(--spacing-md);
-	}
-
-	.features-subheadline {
-		font-size: var(--font-size-lg);
-		color: var(--color-muted);
-	}
-
 	.features-grid {
 		display: grid;
 		grid-template-columns: repeat(3, 1fr);
@@ -93,32 +76,23 @@ const iconMap: Record<string, string> = {
 	.feature-card:hover {
 		transform: translateY(-4px);
 		box-shadow: var(--shadow-lg);
-		border-color: var(--color-primary-light);
+		border-color: var(--color-brand-soft);
 	}
 
 	.feature-icon {
-		width: 48px;
-		height: 48px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 1.5rem;
-		color: white;
-		background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
-		border-radius: var(--radius);
 		margin-bottom: var(--spacing-lg);
 	}
 
 	.feature-title {
 		font-size: var(--font-size-lg);
-		font-weight: 700;
+		font-weight: var(--font-weight-heading);
 		margin-bottom: var(--spacing-sm);
 	}
 
 	.feature-description {
 		font-size: var(--font-size-sm);
 		color: var(--color-muted);
-		line-height: 1.6;
+		line-height: var(--leading-normal);
 	}
 
 	@media (max-width: 900px) {
diff --git a/marketing/src/components/blocks/Hero.astro b/marketing/src/components/blocks/Hero.astro
index f48287c..6a81272 100644
--- a/marketing/src/components/blocks/Hero.astro
+++ b/marketing/src/components/blocks/Hero.astro
@@ -93,10 +93,10 @@ const secondaryCta =
 
 	.hero-headline {
 		font-size: var(--font-size-5xl);
-		font-weight: 800;
-		line-height: 1.1;
-		letter-spacing: -0.03em;
-		background: linear-gradient(135deg, var(--color-text) 0%, var(--color-muted) 100%);
+		font-weight: var(--font-weight-display);
+		line-height: var(--leading-tight);
+		letter-spacing: var(--tracking-tight);
+		background: var(--gradient-headline);
 		-webkit-background-clip: text;
 		-webkit-text-fill-color: transparent;
 		background-clip: text;
@@ -104,7 +104,7 @@ const secondaryCta =
 
 	.hero-subheadline {
 		font-size: var(--font-size-xl);
-		line-height: 1.6;
+		line-height: var(--leading-normal);
 		color: var(--color-muted);
 	}
 
@@ -129,7 +129,7 @@ const secondaryCta =
 		content: "";
 		position: absolute;
 		inset: -10px;
-		background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-accent-light) 100%);
+		background: var(--gradient-brand-soft);
 		border-radius: var(--radius-lg);
 		z-index: -1;
 		opacity: 0.3;
diff --git a/marketing/src/components/blocks/Pricing.astro b/marketing/src/components/blocks/Pricing.astro
index f9a576d..894f989 100644
--- a/marketing/src/components/blocks/Pricing.astro
+++ b/marketing/src/components/blocks/Pricing.astro
@@ -40,8 +40,8 @@ const plans = rawPlans.map((plan) => ({
 <section class="pricing section">
 	<div class="container">
 		{headline && (
-			<header class="pricing-header">
-				<h2 class="pricing-headline">{headline}</h2>
+			<header class="section-header pricing-header">
+				<h2 class="section-headline">{headline}</h2>
 			</header>
 		)}
 		<div class="pricing-grid">
@@ -82,15 +82,9 @@ const plans = rawPlans.map((plan) => ({
 
 <style>
 	.pricing-header {
-		text-align: center;
 		margin-bottom: var(--spacing-2xl);
 	}
 
-	.pricing-headline {
-		font-size: var(--font-size-3xl);
-		font-weight: 800;
-	}
-
 	.pricing-grid {
 		display: grid;
 		grid-template-columns: repeat(3, 1fr);
@@ -111,7 +105,7 @@ const plans = rawPlans.map((plan) => ({
 
 	.pricing-highlighted {
 		background: var(--color-bg);
-		border-color: var(--color-primary);
+		border-color: var(--color-brand);
 		box-shadow: var(--shadow-xl);
 		transform: scale(1.02);
 	}
@@ -124,8 +118,8 @@ const plans = rawPlans.map((plan) => ({
 		padding: var(--spacing-xs) var(--spacing-md);
 		font-size: var(--font-size-xs);
 		font-weight: 600;
-		color: white;
-		background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
+		color: var(--color-on-brand);
+		background: var(--gradient-brand);
 		border-radius: var(--radius-full);
 	}
 
@@ -137,7 +131,7 @@ const plans = rawPlans.map((plan) => ({
 
 	.pricing-name {
 		font-size: var(--font-size-lg);
-		font-weight: 700;
+		font-weight: var(--font-weight-heading);
 		margin-bottom: var(--spacing-sm);
 	}
 
@@ -151,8 +145,8 @@ const plans = rawPlans.map((plan) => ({
 
 	.pricing-amount {
 		font-size: var(--font-size-4xl);
-		font-weight: 800;
-		letter-spacing: -0.03em;
+		font-weight: var(--font-weight-display);
+		letter-spacing: var(--tracking-tight);
 	}
 
 	.pricing-period {
diff --git a/marketing/src/components/blocks/Testimonials.astro b/marketing/src/components/blocks/Testimonials.astro
index c71ff20..2b85eb2 100644
--- a/marketing/src/components/blocks/Testimonials.astro
+++ b/marketing/src/components/blocks/Testimonials.astro
@@ -19,8 +19,8 @@ const { headline, testimonials } = node;
 <section class="testimonials section">
 	<div class="container">
 		{headline && (
-			<header class="testimonials-header">
-				<h2 class="testimonials-headline">{headline}</h2>
+			<header class="section-header">
+				<h2 class="section-headline">{headline}</h2>
 			</header>
 		)}
 		<div class="testimonials-grid">
@@ -60,16 +60,6 @@ const { headline, testimonials } = node;
 		background: var(--color-surface);
 	}
 
-	.testimonials-header {
-		text-align: center;
-		margin-bottom: var(--spacing-4xl);
-	}
-
-	.testimonials-headline {
-		font-size: var(--font-size-3xl);
-		font-weight: 800;
-	}
-
 	.testimonials-grid {
 		display: grid;
 		grid-template-columns: repeat(3, 1fr);
@@ -88,7 +78,7 @@ const { headline, testimonials } = node;
 
 	.testimonial-quote {
 		font-size: var(--font-size-lg);
-		line-height: 1.6;
+		line-height: var(--leading-normal);
 		color: var(--color-text);
 		flex: 1;
 	}
diff --git a/marketing/src/layouts/Base.astro b/marketing/src/layouts/Base.astro
index 428ee80..e0567ce 100644
--- a/marketing/src/layouts/Base.astro
+++ b/marketing/src/layouts/Base.astro
@@ -3,6 +3,7 @@ import { getMenu, getSiteSettings } from "emdash";
 import { EmDashHead } from "emdash/ui";
 import { createPublicPageContext } from "emdash/page";
 import { Font } from "astro:assets";
+import "../styles/tokens.css";
 import "../styles/theme.css";
 
 interface Props {
@@ -54,17 +55,16 @@ const pageCtx = createPublicPageContext({
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>{fullTitle}</title>
 		<EmDashHead page={pageCtx} />
-		<Font cssVariable="--font-sans" preload />
+		<Font cssVariable="--font-body" preload />
 		<script is:inline>
-			// Apply theme immediately to prevent flash
+			// Apply an explicit theme choice immediately to prevent flash.
+			// With no cookie, color-scheme: light dark follows the OS.
 			(function () {
 				var c = document.cookie;
 				var i = c.indexOf("theme=");
 				var theme = i >= 0 ? c.slice(i + 6).split(";")[0] : null;
 				if (theme === "dark" || theme === "light") {
 					document.documentElement.classList.add(theme);
-				} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-					document.documentElement.classList.add("dark");
 				}
 			})();
 		</script>
@@ -89,7 +89,7 @@ const pageCtx = createPublicPageContext({
 				</div>
 				<div class="nav-actions">
 					<a href="/_emdash/admin" class="nav-admin">Admin</a>
-					<a href="/signup" class="nav-cta">Get Started</a>
+					<a href="/signup" class="btn btn-primary nav-cta">Get Started</a>
 				</div>
 			</nav>
 		</header>
@@ -172,9 +172,6 @@ const pageCtx = createPublicPageContext({
 				if (theme === "system") {
 					document.cookie = `theme=; path=/; max-age=0; SameSite=Lax${secure}`;
 					root.classList.remove("light", "dark");
-					if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-						root.classList.add("dark");
-					}
 				} else {
 					document.cookie = `theme=${theme}; path=/; max-age=31536000; SameSite=Lax${secure}`;
 					root.classList.remove("light", "dark");
@@ -203,15 +200,6 @@ const pageCtx = createPublicPageContext({
 					setTheme(btn.dataset.theme || "system");
 				});
 			});
-
-			// Listen for system preference changes
-			window
-				.matchMedia("(prefers-color-scheme: dark)")
-				.addEventListener("change", (e) => {
-					if (getStoredTheme() === "system") {
-						root.classList.toggle("dark", e.matches);
-					}
-				});
 		</script>
 
 		<style is:global>
@@ -231,96 +219,22 @@ const pageCtx = createPublicPageContext({
 					padding: 0;
 				}
 
-				:root {
-					/* Colors - Playful/Bold palette */
-					--color-bg: #ffffff;
-					--color-text: #0f172a;
-					--color-muted: #64748b;
-					--color-border: #e2e8f0;
-					--color-surface: #f8fafc;
-					--color-primary: #6366f1;
-					--color-primary-dark: #4f46e5;
-					--color-primary-light: #818cf8;
-					--color-accent: #f472b6;
-					--color-accent-light: #f9a8d4;
-					--color-success: #22c55e;
-					--color-warning: #f59e0b;
-
-					/* Typography */
-					--font-mono: ui-monospace, "SF Mono", monospace;
-
-					--font-size-xs: 0.75rem;
-					--font-size-sm: 0.875rem;
-					--font-size-base: 1rem;
-					--font-size-lg: 1.125rem;
-					--font-size-xl: 1.25rem;
-					--font-size-2xl: 1.5rem;
-					--font-size-3xl: 2rem;
-					--font-size-4xl: 2.5rem;
-					--font-size-5xl: 3.5rem;
-					--font-size-6xl: 4.5rem;
-
-					/* Spacing */
-					--spacing-xs: 0.25rem;
-					--spacing-sm: 0.5rem;
-					--spacing-md: 1rem;
-					--spacing-lg: 1.5rem;
-					--spacing-xl: 2rem;
-					--spacing-2xl: 3rem;
-					--spacing-3xl: 4rem;
-					--spacing-4xl: 6rem;
-					--spacing-5xl: 8rem;
-
-					/* Layout */
-					--max-width: 720px;
-					--wide-width: 1200px;
-					--radius-sm: 6px;
-					--radius: 10px;
-					--radius-lg: 16px;
-					--radius-full: 9999px;
-
-					/* Transitions */
-					--transition-fast: 150ms ease;
-					--transition-base: 200ms ease;
-					--transition-slow: 300ms ease;
-
-					/* Shadows */
-					--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-					--shadow:
-						0 4px 6px -1px rgba(0, 0, 0, 0.1),
-						0 2px 4px -2px rgba(0, 0, 0, 0.1);
-					--shadow-lg:
-						0 10px 15px -3px rgba(0, 0, 0, 0.1),
-						0 4px 6px -4px rgba(0, 0, 0, 0.1);
-					--shadow-xl:
-						0 20px 25px -5px rgba(0, 0, 0, 0.1),
-						0 8px 10px -6px rgba(0, 0, 0, 0.1);
-				}
-
-				/* Dark mode via system preference (when no explicit class) */
-				@media (prefers-color-scheme: dark) {
-					:root:not(.light) {
-						--color-bg: #0f172a;
-						--color-text: #f1f5f9;
-						--color-muted: #94a3b8;
-						--color-border: #334155;
-						--color-surface: #1e293b;
-						--color-primary: #818cf8;
-						--color-primary-dark: #6366f1;
-						--color-primary-light: #a5b4fc;
+				/*
+				 * Design tokens live in src/styles/tokens.css. Colors are
+				 * defined with light-dark(); these rules pin the scheme when
+				 * the footer switcher sets an explicit choice. With no class,
+				 * color-scheme: light dark follows the OS preference. The
+				 * @supports guard keeps the toggle from forcing dark UA form
+				 * controls on browsers stuck on the plain-light fallback.
+				 */
+				@supports (color: light-dark(#000, #fff)) {
+					:root.light {
+						color-scheme: light;
 					}
-				}
 
-				/* Explicit dark mode */
-				:root.dark {
-					--color-bg: #0f172a;
-					--color-text: #f1f5f9;
-					--color-muted: #94a3b8;
-					--color-border: #334155;
-					--color-surface: #1e293b;
-					--color-primary: #818cf8;
-					--color-primary-dark: #6366f1;
-					--color-primary-light: #a5b4fc;
+					:root.dark {
+						color-scheme: dark;
+					}
 				}
 
 				html {
@@ -328,20 +242,30 @@ const pageCtx = createPublicPageContext({
 				}
 
 				body {
-					font-family: var(--font-sans);
+					font-family: var(--font-body);
 					font-size: var(--font-size-base);
-					line-height: 1.6;
+					line-height: var(--leading-normal);
 					color: var(--color-text);
 					background: var(--color-bg);
 					-webkit-font-smoothing: antialiased;
 					min-height: 100vh;
 				}
 
-				a {
+				a:where(:not([class*="emdash"]):not([class*="ec-"])) {
 					color: currentColor;
 					text-decoration: none;
 				}
 
+				/* Inline links in authored content (Portable Text renders bare
+				   <a> tags) need a visible style; component links restyle
+				   themselves via classes. */
+				p a:not([class]),
+				li a:not([class]) {
+					color: var(--color-brand);
+					text-decoration: underline;
+					text-underline-offset: 2px;
+				}
+
 				img {
 					max-width: 100%;
 					height: auto;
@@ -354,9 +278,10 @@ const pageCtx = createPublicPageContext({
 				h4,
 				h5,
 				h6 {
-					font-weight: 700;
-					line-height: 1.2;
-					letter-spacing: -0.02em;
+					font-family: var(--font-heading);
+					font-weight: var(--font-weight-heading);
+					line-height: var(--leading-snug);
+					letter-spacing: var(--tracking-snug);
 				}
 
 				h1 {
@@ -383,6 +308,36 @@ const pageCtx = createPublicPageContext({
 					padding: var(--spacing-5xl) 0;
 				}
 
+				.section-header {
+					text-align: center;
+					max-width: var(--max-width);
+					margin: 0 auto var(--spacing-4xl);
+				}
+
+				.section-headline {
+					font-size: var(--font-size-3xl);
+					font-weight: var(--font-weight-display);
+				}
+
+				.section-subheadline {
+					margin-top: var(--spacing-md);
+					font-size: var(--font-size-lg);
+					color: var(--color-muted);
+				}
+
+				.icon-tile {
+					width: 48px;
+					height: 48px;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					flex-shrink: 0;
+					font-size: 1.5rem;
+					color: var(--color-on-brand);
+					background: var(--gradient-brand);
+					border-radius: var(--radius);
+				}
+
 				.btn {
 					display: inline-flex;
 					align-items: center;
@@ -409,24 +364,17 @@ const pageCtx = createPublicPageContext({
 				}
 
 				.btn-primary {
-					color: white;
-					background: linear-gradient(
-						135deg,
-						var(--color-primary-dark),
-						var(--color-accent)
-					);
+					color: var(--color-on-brand);
+					background: var(--gradient-brand-strong);
 					border: none;
 					transition:
 						background 0.3s ease,
-						box-shadow 0.3s ease;
+						box-shadow 0.3s ease,
+						transform var(--transition-fast);
 				}
 
 				.btn-primary:hover {
-					background: linear-gradient(
-						135deg,
-						var(--color-primary),
-						var(--color-accent)
-					);
+					background: var(--gradient-brand);
 					box-shadow: var(--shadow-lg);
 				}
 
@@ -469,13 +417,9 @@ const pageCtx = createPublicPageContext({
 
 			.site-logo {
 				font-size: var(--font-size-xl);
-				font-weight: 800;
-				letter-spacing: -0.03em;
-				background: linear-gradient(
-					135deg,
-					var(--color-primary),
-					var(--color-accent)
-				);
+				font-weight: var(--font-weight-display);
+				letter-spacing: var(--tracking-tight);
+				background: var(--gradient-brand);
 				-webkit-background-clip: text;
 				-webkit-text-fill-color: transparent;
 				background-clip: text;
@@ -518,29 +462,10 @@ const pageCtx = createPublicPageContext({
 				opacity: 0.5;
 			}
 
+			/* Compact variant of .btn.btn-primary for the header */
 			.nav-cta {
 				padding: var(--spacing-sm) var(--spacing-md);
-				font-size: var(--font-size-sm);
-				font-weight: 600;
-				color: white;
-				background: linear-gradient(
-					135deg,
-					var(--color-primary-dark),
-					var(--color-accent)
-				);
 				border-radius: var(--radius-sm);
-				transition:
-					background 0.3s ease,
-					transform var(--transition-fast);
-			}
-
-			.nav-cta:hover {
-				background: linear-gradient(
-					135deg,
-					var(--color-primary),
-					var(--color-accent)
-				);
-				transform: translateY(-1px);
 			}
 
 			main {
@@ -563,8 +488,8 @@ const pageCtx = createPublicPageContext({
 
 			.footer-logo {
 				font-size: var(--font-size-xl);
-				font-weight: 800;
-				letter-spacing: -0.03em;
+				font-weight: var(--font-weight-display);
+				letter-spacing: var(--tracking-tight);
 			}
 
 			.footer-logo-img {
@@ -627,7 +552,7 @@ const pageCtx = createPublicPageContext({
 				background: transparent;
 				border: 1px solid var(--color-border);
 				color: var(--color-muted);
-				font-family: var(--font-sans);
+				font-family: var(--font-body);
 				font-size: var(--font-size-sm);
 				padding: var(--spacing-xs) var(--spacing-sm);
 				border-radius: var(--radius-sm);
@@ -643,7 +568,7 @@ const pageCtx = createPublicPageContext({
 			.theme-btn.active {
 				background: var(--color-bg);
 				color: var(--color-text);
-				border-color: var(--color-primary);
+				border-color: var(--color-brand);
 			}
 
 			@media (max-width: 768px) {
diff --git a/marketing/src/pages/404.astro b/marketing/src/pages/404.astro
index 4422f73..eb86e71 100644
--- a/marketing/src/pages/404.astro
+++ b/marketing/src/pages/404.astro
@@ -24,10 +24,10 @@ import Base from "../layouts/Base.astro";
 
 	.not-found-code {
 		font-size: 10rem;
-		font-weight: 800;
+		font-weight: var(--font-weight-display);
 		line-height: 1;
 		letter-spacing: -0.05em;
-		background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
+		background: var(--gradient-brand);
 		-webkit-background-clip: text;
 		-webkit-text-fill-color: transparent;
 		background-clip: text;
diff --git a/marketing/src/pages/contact.astro b/marketing/src/pages/contact.astro
index e94bf01..c168bd4 100644
--- a/marketing/src/pages/contact.astro
+++ b/marketing/src/pages/contact.astro
@@ -71,7 +71,7 @@ const pageContent = page?.data.content;
 
 					<div class="contact-methods">
 						<div class="contact-method">
-							<div class="contact-icon">
+							<div class="icon-tile contact-icon">
 								<Icon name="ph:envelope" aria-hidden="true" />
 							</div>
 							<div class="contact-method-content">
@@ -80,7 +80,7 @@ const pageContent = page?.data.content;
 							</div>
 						</div>
 						<div class="contact-method">
-							<div class="contact-icon">
+							<div class="icon-tile contact-icon">
 								<Icon name="ph:lifebuoy" aria-hidden="true" />
 							</div>
 							<div class="contact-method-content">
@@ -89,7 +89,7 @@ const pageContent = page?.data.content;
 							</div>
 						</div>
 						<div class="contact-method">
-							<div class="contact-icon">
+							<div class="icon-tile contact-icon">
 								<Icon name="ph:currency-dollar" aria-hidden="true" />
 							</div>
 							<div class="contact-method-content">
@@ -213,20 +213,7 @@ const pageContent = page?.data.content;
 	}
 
 	.contact-icon {
-		width: 48px;
-		height: 48px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
 		font-size: 1.25rem;
-		color: white;
-		background: linear-gradient(
-			135deg,
-			var(--color-primary),
-			var(--color-accent)
-		);
-		border-radius: var(--radius);
-		flex-shrink: 0;
 	}
 
 	.contact-method-content h4 {
@@ -236,7 +223,7 @@ const pageContent = page?.data.content;
 	}
 
 	.contact-method-content a {
-		color: var(--color-primary);
+		color: var(--color-brand);
 		font-size: var(--font-size-lg);
 	}
 
@@ -291,8 +278,8 @@ const pageContent = page?.data.content;
 	.form-field input:focus,
 	.form-field textarea:focus {
 		outline: none;
-		border-color: var(--color-primary);
-		box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+		border-color: var(--color-brand);
+		box-shadow: 0 0 0 3px var(--color-brand-ring);
 	}
 
 	.form-field input::placeholder,
@@ -307,19 +294,13 @@ const pageContent = page?.data.content;
 
 	.form-error {
 		padding: var(--spacing-md);
-		background: rgba(239, 68, 68, 0.1);
-		border: 1px solid rgba(239, 68, 68, 0.3);
+		background: color-mix(in srgb, var(--color-danger) 10%, transparent);
+		border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
 		border-radius: var(--radius-sm);
-		color: #dc2626;
+		color: var(--color-danger);
 		font-size: var(--font-size-sm);
 	}
 
-	@media (prefers-color-scheme: dark) {
-		.form-error {
-			color: #f87171;
-		}
-	}
-
 	.form-success {
 		text-align: center;
 		padding: var(--spacing-2xl);
@@ -332,7 +313,7 @@ const pageContent = page?.data.content;
 		align-items: center;
 		justify-content: center;
 		font-size: 2rem;
-		color: white;
+		color: var(--color-on-brand);
 		background: var(--color-success);
 		border-radius: var(--radius-full);
 		margin: 0 auto var(--spacing-lg);
diff --git a/marketing/src/styles/theme.css b/marketing/src/styles/theme.css
index 59580ec..1ad0a6d 100644
--- a/marketing/src/styles/theme.css
+++ b/marketing/src/styles/theme.css
@@ -1,80 +1,32 @@
 /*
-  theme.css -- override any :root variable here to retheme the site.
+  theme.css -- your theme overrides. This is the file to edit to
+  retheme the site.
 
-  This is the only file you need to edit to customize the site's visual
-  appearance. All defaults are listed below as comments. Uncomment and
-  change any value to override it.
+  Every design token lives in src/styles/tokens.css (colors, gradients,
+  type scale, spacing, layout, shadows) with its default value. Override
+  any of them here: declarations in this file are unlayered, so they
+  always beat the @layer base defaults in tokens.css.
 
-  Base.astro puts its defaults inside @layer base, so declarations here
-  (which are unlayered) always take priority -- no specificity tricks needed.
+  Colors are defined with light-dark(). Overriding with a plain color
+  changes light and dark mode at once; use light-dark(<light>, <dark>)
+  to set different values per mode.
 
-  Note: this template defines explicit dark mode colors in Base.astro.
-  Overriding light-mode --color-* variables here won't affect dark mode.
-  To customize dark mode, also override --color-* variables inside a
-  @media (prefers-color-scheme: dark) block and/or in the :root.dark rule.
-*/
-
-:root {
-	/* --- Colors ---
-	--color-bg: #ffffff;
-	--color-text: #0f172a;
-	--color-muted: #64748b;
-	--color-border: #e2e8f0;
-	--color-surface: #f8fafc;
-	--color-primary: #6366f1;
-	--color-primary-dark: #4f46e5;
-	--color-primary-light: #818cf8;
-	--color-accent: #f472b6;
-	--color-accent-light: #f9a8d4;
-	--color-success: #22c55e;
-	--color-warning: #f59e0b;
-	*/
+  Rebranding usually only needs --color-brand-* and --color-accent-* --
+  the gradient tokens follow automatically. For a flat, gradient-free
+  brand, set the --gradient-* tokens to solid colors.
 
-	/* --- Typography ---
-	--font-mono: ui-monospace, "SF Mono", monospace;
-	--font-size-xs: 0.75rem;
-	--font-size-sm: 0.875rem;
-	--font-size-base: 1rem;
-	--font-size-lg: 1.125rem;
-	--font-size-xl: 1.25rem;
-	--font-size-2xl: 1.5rem;
-	--font-size-3xl: 2rem;
-	--font-size-4xl: 2.5rem;
-	--font-size-5xl: 3.5rem;
-	--font-size-6xl: 4.5rem;
-	*/
+  Webfonts are loaded in astro.config.mjs (--font-body). Swap the loaded
+  font there; use overrides here for system fonts or a separate heading
+  face.
 
-	/* --- Spacing ---
-	--spacing-xs: 0.25rem;
-	--spacing-sm: 0.5rem;
-	--spacing-md: 1rem;
-	--spacing-lg: 1.5rem;
-	--spacing-xl: 2rem;
-	--spacing-2xl: 3rem;
-	--spacing-3xl: 4rem;
-	--spacing-4xl: 6rem;
-	--spacing-5xl: 8rem;
-	*/
+  Example:
 
-	/* --- Layout ---
-	--max-width: 720px;
-	--wide-width: 1200px;
-	--radius-sm: 6px;
-	--radius: 10px;
-	--radius-lg: 16px;
-	--radius-full: 9999px;
-	*/
-
-	/* --- Transitions ---
-	--transition-fast: 150ms ease;
-	--transition-base: 200ms ease;
-	--transition-slow: 300ms ease;
-	*/
+  :root {
+    --color-brand: light-dark(#0d9488, #2dd4bf);
+    --color-accent: #f59e0b;
+    --font-weight-display: 700;
+  }
+*/
 
-	/* --- Shadows ---
-	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-	--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-	*/
+:root {
 }
diff --git a/marketing/src/styles/tokens.css b/marketing/src/styles/tokens.css
new file mode 100644
index 0000000..0fcac52
--- /dev/null
+++ b/marketing/src/styles/tokens.css
@@ -0,0 +1,139 @@
+/*
+  tokens.css -- the design tokens for this template. These are the
+  defaults; to customize the site, override any variable in
+  src/styles/theme.css rather than editing this file. Declarations in
+  theme.css are unlayered, so they always beat these @layer base
+  defaults -- no specificity tricks needed.
+
+  Colors use light-dark(): the first value applies in light mode, the
+  second in dark mode. Overriding a color with a plain value changes
+  both modes at once; use light-dark(<light>, <dark>) in an override to
+  keep them distinct.
+
+  The signature gradients are tokens too. Rebranding usually only needs
+  new --color-brand-* / --color-accent-* values -- the gradients follow.
+  For a flat, gradient-free brand, set the --gradient-* tokens to solid
+  colors.
+
+  --font-body is defined by the font pipeline in astro.config.mjs, not
+  here. To swap the loaded webfont, edit the fonts entry there. To use a
+  system font, or a different face for headings only, override
+  --font-body / --font-heading in theme.css.
+*/
+
+@layer base {
+	:root {
+		color-scheme: light dark;
+
+		/* Colors */
+		--color-bg: light-dark(#ffffff, #0f172a);
+		--color-text: light-dark(#0f172a, #f1f5f9);
+		--color-muted: light-dark(#64748b, #94a3b8);
+		--color-border: light-dark(#e2e8f0, #334155);
+		--color-surface: light-dark(#f8fafc, #1e293b);
+		--color-brand: light-dark(#6366f1, #818cf8);
+		--color-brand-strong: light-dark(#4f46e5, #6366f1);
+		--color-brand-soft: light-dark(#818cf8, #a5b4fc);
+		--color-accent: #f472b6; /* gradient partner to --color-brand */
+		--color-accent-soft: #f9a8d4;
+		--color-on-brand: white; /* text/icons on brand and gradient surfaces */
+		--color-brand-ring: color-mix(in srgb, var(--color-brand) 10%, transparent);
+		--color-success: #22c55e;
+		--color-warning: #f59e0b;
+		--color-danger: light-dark(#dc2626, #f87171);
+
+		/* Gradients */
+		--gradient-brand: linear-gradient(135deg, var(--color-brand), var(--color-accent));
+		--gradient-brand-strong: linear-gradient(
+			135deg,
+			var(--color-brand-strong),
+			var(--color-accent)
+		); /* CTA resting state; hovers to --gradient-brand */
+		--gradient-brand-soft: linear-gradient(
+			135deg,
+			var(--color-brand-soft),
+			var(--color-accent-soft)
+		); /* hero image glow */
+		--gradient-headline: linear-gradient(
+			135deg,
+			var(--color-text),
+			var(--color-muted)
+		); /* hero headline text fill */
+
+		/* Typography */
+		--font-heading: var(--font-body);
+		--font-weight-heading: 700; /* h2-h6, card titles */
+		--font-weight-display: 800; /* hero and section headlines, logo */
+
+		/* Type scale */
+		--font-size-xs: 0.75rem;
+		--font-size-sm: 0.875rem;
+		--font-size-base: 1rem;
+		--font-size-lg: 1.125rem;
+		--font-size-xl: 1.25rem;
+		--font-size-2xl: 1.5rem;
+		--font-size-3xl: 2rem;
+		--font-size-4xl: 2.5rem;
+		--font-size-5xl: 3.5rem;
+		--font-size-6xl: 4.5rem;
+
+		/* Line heights */
+		--leading-tight: 1.1; /* hero headline */
+		--leading-snug: 1.2; /* headings */
+		--leading-normal: 1.6; /* body copy */
+		--leading-relaxed: 1.7; /* FAQ answers, long-form */
+
+		/* Letter spacing */
+		--tracking-tight: -0.03em; /* hero headline, logo, prices */
+		--tracking-snug: -0.02em; /* headings */
+
+		/* Spacing */
+		--spacing-xs: 0.25rem;
+		--spacing-sm: 0.5rem;
+		--spacing-md: 1rem;
+		--spacing-lg: 1.5rem;
+		--spacing-xl: 2rem;
+		--spacing-2xl: 3rem;
+		--spacing-3xl: 4rem;
+		--spacing-4xl: 6rem;
+		--spacing-5xl: 8rem;
+
+		/* Layout */
+		--max-width: 720px;
+		--wide-width: 1200px;
+		--radius-sm: 6px;
+		--radius: 10px;
+		--radius-lg: 16px;
+		--radius-full: 9999px;
+
+		/* Transitions */
+		--transition-fast: 150ms ease;
+		--transition-base: 200ms ease;
+		--transition-slow: 300ms ease;
+
+		/* Shadows */
+		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+		--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+		--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+		--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+	}
+
+	/*
+	 * Light-mode values for browsers without light-dark() (Safari < 17.5,
+	 * Chrome < 123). Must mirror the light values above.
+	 */
+	@supports not (color: light-dark(#000, #fff)) {
+		:root {
+			color-scheme: light;
+			--color-bg: #ffffff;
+			--color-text: #0f172a;
+			--color-muted: #64748b;
+			--color-border: #e2e8f0;
+			--color-surface: #f8fafc;
+			--color-brand: #6366f1;
+			--color-brand-strong: #4f46e5;
+			--color-brand-soft: #818cf8;
+			--color-danger: #dc2626;
+		}
+	}
+}
diff --git a/portfolio-cloudflare/.agents/skills/creating-plugins/references/admin-ui.md b/portfolio-cloudflare/.agents/skills/creating-plugins/references/admin-ui.md
index e2289e1..9e26b8d 100644
--- a/portfolio-cloudflare/.agents/skills/creating-plugins/references/admin-ui.md
+++ b/portfolio-cloudflare/.agents/skills/creating-plugins/references/admin-ui.md
@@ -12,7 +12,7 @@ import { SettingsPage } from "./components/SettingsPage";
 import { ReportsPage } from "./components/ReportsPage";
 import { StatusWidget } from "./components/StatusWidget";
 
-// Pages keyed by path (must match admin.pages paths)
+// Pages keyed by path (trailing slash optional, so /settings and /settings/ both resolve)
 export const pages = {
 	"/settings": SettingsPage,
 	"/reports": ReportsPage,
diff --git a/portfolio-cloudflare/.agents/skills/creating-plugins/references/api-routes.md b/portfolio-cloudflare/.agents/skills/creating-plugins/references/api-routes.md
index c4d2419..8ecf112 100644
--- a/portfolio-cloudflare/.agents/skills/creating-plugins/references/api-routes.md
+++ b/portfolio-cloudflare/.agents/skills/creating-plugins/references/api-routes.md
@@ -175,7 +175,9 @@ routes: {
 	},
 	"settings/save": {
 		handler: async (ctx) => {
-			const input = await ctx.request.json();
+			// EmDash parses the request body once and exposes it as ctx.input.
+			// Don't call ctx.request.json() — the body stream is already consumed.
+			const input = ctx.input as Record<string, unknown>;
 			for (const [key, value] of Object.entries(input)) {
 				if (value !== undefined) await ctx.kv.set(`settings:${key}`, value);
 			}
diff --git a/portfolio-cloudflare/.agents/skills/creating-plugins/references/block-kit.md b/portfolio-cloudflare/.agents/skills/creating-plugins/references/block-kit.md
index 397505b..5354e91 100644
--- a/portfolio-cloudflare/.agents/skills/creating-plugins/references/block-kit.md
+++ b/portfolio-cloudflare/.agents/skills/creating-plugins/references/block-kit.md
@@ -16,10 +16,16 @@ Block Kit elements are also used for [Portable Text block editing fields](./port
 6. Plugin returns new blocks
 
 ```typescript
+import type { BlockInteraction } from "@emdash-cms/blocks";
+
 routes: {
 	admin: {
 		handler: async (ctx) => {
-			const interaction = await ctx.request.json();
+			// EmDash parses the request body once and exposes it as ctx.input;
+			// read it directly rather than ctx.request.json() (the body is consumed).
+			// BlockInteraction is the discriminated union of page_load,
+			// block_action, and form_submit payloads.
+			const interaction = ctx.input as BlockInteraction;
 
 			if (interaction.type === "page_load") {
 				return {
diff --git a/portfolio-cloudflare/AGENTS.md b/portfolio-cloudflare/AGENTS.md
index dca9d70..51f960f 100644
--- a/portfolio-cloudflare/AGENTS.md
+++ b/portfolio-cloudflare/AGENTS.md
@@ -71,30 +71,34 @@ The `gallery` field on `projects` is a JSON field, not an EmDash image field. It
 
 ## Visual character
 
-Typography is the design. The display face is **Playfair Display** (serif) on the `--font-serif` CSS variable; the body face is the system sans stack on `--font-sans`. The serif is used for the site title, hero titles, project titles, page titles, and contact column labels. Everything else is the sans.
+Typography is the design. The display face is **Playfair Display** (serif) on the `--font-heading` CSS variable; the body face is the system sans stack on `--font-body`. The serif is used for the site title, hero titles, project titles, page titles, and contact column labels. Everything else is the sans. Serif weight is calm on purpose (`--font-weight-heading` and `--font-weight-display` both default to 500).
 
-The accent colour is barely visible by design -- the only saturated colour on the page should be inside images. The default `--color-accent` (`#7c3aed`) is used sparingly for link hover and focus states.
+The brand colour is barely visible by design -- the only saturated colour on the page should be inside images. The default `--color-brand` (`#7c3aed`) is used sparingly for link hover and focus states.
 
 Whitespace is generous. Sections breathe. Don't fight that.
 
 ## Customisation
 
-`src/styles/theme.css` is the only file to edit for visual changes. Every CSS variable from `Base.astro` is listed there as a commented default -- uncomment and change to override. The dark mode palette is defined inside `Base.astro` itself; light-mode overrides in `theme.css` won't affect dark mode. To customise dark mode, add `@media (prefers-color-scheme: dark)` and `:root.dark` rules in `theme.css`.
+Design tokens live in `src/styles/tokens.css` with their default values. To restyle the site, override tokens in `src/styles/theme.css` -- declarations there are unlayered, so they always beat the `@layer base` defaults. Don't edit `tokens.css` or `Base.astro` for visual changes.
 
-Fonts are configured in `astro.config.mjs` under `fonts:` (the Astro Fonts API). To change the display face, swap the `name:` for any Google Fonts serif and keep `cssVariable: "--font-serif"`. Good pairings: Cormorant Garamond, Fraunces, EB Garamond, DM Serif Display. Avoid changing the body font unless you have a reason -- system sans is deliberately quiet here.
+Colours are defined with `light-dark(<light>, <dark>)`, so each token carries both modes. Overriding with a plain colour changes light and dark at once; use `light-dark()` in the override to keep them distinct. There is no separate dark palette to maintain.
 
-CSS variables worth knowing:
+The display face is configured in `astro.config.mjs` under `fonts:` (the Astro Fonts API). To change it, swap the `name:` for any Google Fonts serif and keep `cssVariable: "--font-heading"`. Good pairings: Cormorant Garamond, Fraunces, EB Garamond, DM Serif Display. The body face (`--font-body`) is a plain token in `tokens.css` -- system sans, deliberately quiet; override it in `theme.css` only if you have a reason.
 
-- `--color-accent` / `--color-accent-muted` -- the single accent, used very sparingly
+CSS variables worth knowing (see `tokens.css` for the full list):
+
+- `--color-brand`, `--color-on-brand`, `--color-brand-ring` -- the single accent, used very sparingly
 - `--color-bg`, `--color-surface`, `--color-text`, `--color-muted`, `--color-border` -- neutral palette
-- `--font-serif`, `--font-sans` -- bound to the Fonts API entries in `astro.config.mjs`
+- `--color-danger` -- form errors
+- `--font-heading` (Fonts API entry in `astro.config.mjs`), `--font-body` (token)
+- `--font-weight-heading` / `--font-weight-display` (both 500) -- raise for a heavier serif voice
 - `--font-size-4xl` -- the size of the homepage title and project titles
 - `--max-width` (720px), `--wide-width` (1200px) -- column widths
 
 ## What not to do
 
 - Don't introduce gradients, drop shadows on cards, or coloured section backgrounds. The template's voice is calm and editorial; those break it.
-- Don't change `--font-sans` to a display font. Two display faces fight each other.
+- Don't change `--font-body` to a display font. Two display faces fight each other.
 - Don't add more than one accent colour.
 - Don't write generic copy like "Welcome to my portfolio" or "Crafting beautiful experiences". The work should speak; the words should be specific (a client name, a discipline, a year).
 - Don't pack the home page with every project. The "Selected Work" framing is intentional -- 3-6 is plenty.
diff --git a/portfolio-cloudflare/astro.config.mjs b/portfolio-cloudflare/astro.config.mjs
index 11b0957..03ffc1e 100644
--- a/portfolio-cloudflare/astro.config.mjs
+++ b/portfolio-cloudflare/astro.config.mjs
@@ -22,7 +22,7 @@ export default defineConfig({
 		{
 			provider: fontProviders.google(),
 			name: "Playfair Display",
-			cssVariable: "--font-serif",
+			cssVariable: "--font-heading",
 			weights: [400, 500, 600, 700],
 			fallbacks: ["serif"],
 		},
diff --git a/portfolio-cloudflare/package.json b/portfolio-cloudflare/package.json
index 3f477e0..f0f3e6d 100644
--- a/portfolio-cloudflare/package.json
+++ b/portfolio-cloudflare/package.json
@@ -16,9 +16,9 @@
   "dependencies": {
     "@astrojs/cloudflare": "^14.0.0",
     "@astrojs/react": "^6.0.0",
-    "@emdash-cms/cloudflare": "^0.27.0",
+    "@emdash-cms/cloudflare": "^0.28.1",
     "astro": "^7.0.0",
-    "emdash": "^0.27.0",
+    "emdash": "^0.28.1",
     "react": "19.2.4",
     "react-dom": "19.2.4"
   },
diff --git a/portfolio-cloudflare/src/components/ProjectCard.astro b/portfolio-cloudflare/src/components/ProjectCard.astro
index 865d440..8f63203 100644
--- a/portfolio-cloudflare/src/components/ProjectCard.astro
+++ b/portfolio-cloudflare/src/components/ProjectCard.astro
@@ -56,7 +56,7 @@ const allTags = [...(categories || []), ...(tags || [])];
 	.card-link {
 		display: flex;
 		flex-direction: column;
-		gap: var(--spacing-lg, 1.5rem);
+		gap: var(--spacing-lg);
 		text-decoration: none;
 		color: inherit;
 	}
@@ -64,7 +64,7 @@ const allTags = [...(categories || []), ...(tags || [])];
 	.card-image {
 		position: relative;
 		overflow: hidden;
-		border-radius: var(--radius, 4px);
+		border-radius: var(--radius);
 	}
 
 	.card-image img {
@@ -72,7 +72,7 @@ const allTags = [...(categories || []), ...(tags || [])];
 		height: auto;
 		aspect-ratio: 4 / 3;
 		object-fit: cover;
-		transition: transform var(--transition-slow, 300ms ease);
+		transition: transform var(--transition-slow);
 	}
 
 	.card-overlay {
@@ -82,21 +82,22 @@ const allTags = [...(categories || []), ...(tags || [])];
 		align-items: center;
 		justify-content: center;
 		background: rgba(0, 0, 0, 0);
-		transition: background var(--transition-base, 200ms ease);
+		transition: background var(--transition-base);
 	}
 
+	/* Over-image chip: white regardless of theme */
 	.card-view {
-		font-family: var(--font-serif, Georgia, serif);
-		font-size: var(--font-size-sm, 0.875rem);
+		font-family: var(--font-heading);
+		font-size: var(--font-size-sm);
 		color: white;
-		padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
+		padding: var(--spacing-sm) var(--spacing-md);
 		border: 1px solid white;
-		border-radius: var(--radius, 4px);
+		border-radius: var(--radius);
 		opacity: 0;
 		transform: translateY(10px);
 		transition:
-			opacity var(--transition-base, 200ms ease),
-			transform var(--transition-base, 200ms ease);
+			opacity var(--transition-base),
+			transform var(--transition-base);
 	}
 
 	.project-card:hover .card-image img {
@@ -115,33 +116,33 @@ const allTags = [...(categories || []), ...(tags || [])];
 	.card-content {
 		display: flex;
 		flex-direction: column;
-		gap: var(--spacing-xs, 0.25rem);
+		gap: var(--spacing-xs);
 	}
 
 	.card-title {
-		font-family: var(--font-serif, Georgia, serif);
-		font-size: var(--font-size-xl, 1.5rem);
-		font-weight: 500;
-		transition: color var(--transition-fast, 150ms ease);
+		font-family: var(--font-heading);
+		font-size: var(--font-size-xl);
+		font-weight: var(--font-weight-heading);
+		transition: color var(--transition-fast);
 	}
 
 	.project-card:hover .card-title {
-		color: var(--color-accent, #7c3aed);
+		color: var(--color-brand);
 	}
 
 	.card-meta {
-		font-size: var(--font-size-sm, 0.875rem);
-		color: var(--color-muted, #6b7280);
+		font-size: var(--font-size-sm);
+		color: var(--color-muted);
 	}
 
 	.card-separator {
-		margin: 0 var(--spacing-xs, 0.25rem);
+		margin: 0 var(--spacing-xs);
 	}
 
 	.card-summary {
-		font-size: var(--font-size-sm, 0.875rem);
-		color: var(--color-muted, #6b7280);
-		line-height: 1.6;
+		font-size: var(--font-size-sm);
+		color: var(--color-muted);
+		line-height: var(--leading-normal);
 		display: -webkit-box;
 		-webkit-line-clamp: 2;
 		-webkit-box-orient: vertical;
@@ -151,17 +152,17 @@ const allTags = [...(categories || []), ...(tags || [])];
 	.card-categories {
 		display: flex;
 		flex-wrap: wrap;
-		gap: var(--spacing-sm, 0.5rem);
-		margin-top: var(--spacing-sm, 0.5rem);
+		gap: var(--spacing-sm);
+		margin-top: var(--spacing-sm);
 	}
 
 	.card-category {
-		font-size: 0.75rem;
+		font-size: var(--font-size-xs);
 		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		color: var(--color-muted, #6b7280);
-		padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
-		border: 1px solid var(--color-border, #e5e7eb);
-		border-radius: var(--radius, 4px);
+		letter-spacing: var(--tracking-wide);
+		color: var(--color-muted);
+		padding: var(--spacing-xs) var(--spacing-sm);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius);
 	}
 </style>
diff --git a/portfolio-cloudflare/src/layouts/Base.astro b/portfolio-cloudflare/src/layouts/Base.astro
index 81d7c27..f8fd378 100644
--- a/portfolio-cloudflare/src/layouts/Base.astro
+++ b/portfolio-cloudflare/src/layouts/Base.astro
@@ -3,6 +3,7 @@ import { getMenu, getSiteSettings } from "emdash";
 import { EmDashHead } from "emdash/ui";
 import { createPublicPageContext } from "emdash/page";
 import { Font } from "astro:assets";
+import "../styles/tokens.css";
 import "../styles/theme.css";
 
 interface Props {
@@ -43,7 +44,7 @@ const pageCtx = createPublicPageContext({
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>{fullTitle}</title>
 		<EmDashHead page={pageCtx} />
-		<Font cssVariable="--font-serif" preload />
+		<Font cssVariable="--font-heading" preload />
 		<link
 			rel="alternate"
 			type="application/rss+xml"
@@ -51,15 +52,14 @@ const pageCtx = createPublicPageContext({
 			href="/rss.xml"
 		/>
 		<script is:inline>
-			// Apply theme immediately to prevent flash
+			// Apply an explicit theme choice immediately to prevent flash.
+			// With no cookie, color-scheme: light dark follows the OS.
 			(function () {
 				var c = document.cookie;
 				var i = c.indexOf("theme=");
 				var theme = i >= 0 ? c.slice(i + 6).split(";")[0] : null;
 				if (theme === "dark" || theme === "light") {
 					document.documentElement.classList.add(theme);
-				} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-					document.documentElement.classList.add("dark");
 				}
 			})();
 		</script>
@@ -143,9 +143,6 @@ const pageCtx = createPublicPageContext({
 				if (theme === "system") {
 					document.cookie = `theme=; path=/; max-age=0; SameSite=Lax${secure}`;
 					root.classList.remove("light", "dark");
-					if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-						root.classList.add("dark");
-					}
 				} else {
 					document.cookie = `theme=${theme}; path=/; max-age=31536000; SameSite=Lax${secure}`;
 					root.classList.remove("light", "dark");
@@ -174,15 +171,6 @@ const pageCtx = createPublicPageContext({
 					setTheme(btn.dataset.theme || "system");
 				});
 			});
-
-			// Listen for system preference changes
-			window
-				.matchMedia("(prefers-color-scheme: dark)")
-				.addEventListener("change", (e) => {
-					if (getStoredTheme() === "system") {
-						root.classList.toggle("dark", e.matches);
-					}
-				});
 		</script>
 
 		<style is:global>
@@ -202,71 +190,22 @@ const pageCtx = createPublicPageContext({
 					padding: 0;
 				}
 
-				:root {
-					/* Colors - Elegant/Minimal palette */
-					--color-bg: #fafafa;
-					--color-text: #1a1a1a;
-					--color-muted: #6b7280;
-					--color-border: #e5e7eb;
-					--color-surface: #ffffff;
-					--color-accent: #7c3aed;
-					--color-accent-muted: #a78bfa;
-
-					/* Typography */
-					--font-sans: system-ui, -apple-system, sans-serif;
-					--font-mono: ui-monospace, monospace;
-
-					--font-size-sm: 0.875rem;
-					--font-size-base: 1.0625rem;
-					--font-size-lg: 1.25rem;
-					--font-size-xl: 1.5rem;
-					--font-size-2xl: 2rem;
-					--font-size-3xl: 2.75rem;
-					--font-size-4xl: 3.5rem;
-
-					/* Spacing */
-					--spacing-xs: 0.25rem;
-					--spacing-sm: 0.5rem;
-					--spacing-md: 1rem;
-					--spacing-lg: 1.5rem;
-					--spacing-xl: 2rem;
-					--spacing-2xl: 3rem;
-					--spacing-3xl: 4rem;
-					--spacing-4xl: 6rem;
-
-					/* Layout */
-					--max-width: 720px;
-					--wide-width: 1200px;
-					--radius: 4px;
-
-					/* Transitions */
-					--transition-fast: 150ms ease;
-					--transition-base: 200ms ease;
-					--transition-slow: 300ms ease;
-				}
-
-				/* Dark mode via system preference (when no explicit class) */
-				@media (prefers-color-scheme: dark) {
-					:root:not(.light) {
-						--color-bg: #0a0a0a;
-						--color-text: #f5f5f5;
-						--color-muted: #a1a1aa;
-						--color-border: #27272a;
-						--color-surface: #18181b;
-						--color-accent: #a78bfa;
-						--color-accent-muted: #7c3aed;
+				/*
+				 * Design tokens live in src/styles/tokens.css. Colors are
+				 * defined with light-dark(); these rules pin the scheme when
+				 * the footer switcher sets an explicit choice. With no class,
+				 * color-scheme: light dark follows the OS preference. The
+				 * @supports guard keeps the toggle from forcing dark UA form
+				 * controls on browsers stuck on the plain-light fallback.
+				 */
+				@supports (color: light-dark(#000, #fff)) {
+					:root.light {
+						color-scheme: light;
 					}
-				}
 
-				/* Explicit dark mode */
-				:root.dark {
-					--color-bg: #0a0a0a;
-					--color-text: #f5f5f5;
-					--color-muted: #a1a1aa;
-					--color-border: #27272a;
-					--color-surface: #18181b;
-					--color-accent: #a78bfa;
-					--color-accent-muted: #7c3aed;
+					:root.dark {
+						color-scheme: dark;
+					}
 				}
 
 				html {
@@ -274,9 +213,9 @@ const pageCtx = createPublicPageContext({
 				}
 
 				body {
-					font-family: var(--font-sans);
+					font-family: var(--font-body);
 					font-size: var(--font-size-base);
-					line-height: 1.6;
+					line-height: var(--leading-normal);
 					color: var(--color-text);
 					background: var(--color-bg);
 					-webkit-font-smoothing: antialiased;
@@ -297,9 +236,9 @@ const pageCtx = createPublicPageContext({
 				h2,
 				h3,
 				h4 {
-					font-family: var(--font-serif);
-					font-weight: 500;
-					line-height: 1.2;
+					font-family: var(--font-heading);
+					font-weight: var(--font-weight-heading);
+					line-height: var(--leading-snug);
 				}
 
 				h1 {
@@ -330,11 +269,11 @@ const pageCtx = createPublicPageContext({
 			}
 
 			.site-title {
-				font-family: var(--font-serif);
+				font-family: var(--font-heading);
 				font-size: var(--font-size-lg);
 				font-weight: 600;
 				text-decoration: none;
-				letter-spacing: -0.02em;
+				letter-spacing: var(--tracking-tight);
 			}
 
 			.site-logo-img {
@@ -386,7 +325,7 @@ const pageCtx = createPublicPageContext({
 			}
 
 			.footer-logo {
-				font-family: var(--font-serif);
+				font-family: var(--font-heading);
 				font-size: var(--font-size-lg);
 				font-weight: 600;
 			}
@@ -397,7 +336,7 @@ const pageCtx = createPublicPageContext({
 			}
 
 			.footer-tagline {
-				font-family: var(--font-serif);
+				font-family: var(--font-heading);
 				font-style: italic;
 				font-size: var(--font-size-sm);
 				color: var(--color-muted);
@@ -420,7 +359,7 @@ const pageCtx = createPublicPageContext({
 				background: transparent;
 				border: 1px solid var(--color-border);
 				color: var(--color-muted);
-				font-family: var(--font-sans);
+				font-family: var(--font-body);
 				font-size: var(--font-size-sm);
 				padding: var(--spacing-xs) var(--spacing-sm);
 				border-radius: var(--radius);
@@ -436,7 +375,7 @@ const pageCtx = createPublicPageContext({
 			.theme-btn.active {
 				background: var(--color-surface);
 				color: var(--color-text);
-				border-color: var(--color-accent);
+				border-color: var(--color-brand);
 			}
 
 			.footer-powered {
diff --git a/portfolio-cloudflare/src/pages/404.astro b/portfolio-cloudflare/src/pages/404.astro
index b1d4b13..6ba3296 100644
--- a/portfolio-cloudflare/src/pages/404.astro
+++ b/portfolio-cloudflare/src/pages/404.astro
@@ -24,18 +24,18 @@ import Base from "../layouts/Base.astro";
 
 	.not-found-code {
 		display: block;
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-size: 8rem;
-		font-weight: 500;
+		font-weight: var(--font-weight-display);
 		line-height: 1;
 		color: var(--color-border);
 		margin-bottom: var(--spacing-lg);
 	}
 
 	.not-found h1 {
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-size: var(--font-size-2xl);
-		font-weight: 500;
+		font-weight: var(--font-weight-heading);
 		margin-bottom: var(--spacing-sm);
 	}
 
@@ -63,8 +63,8 @@ import Base from "../layouts/Base.astro";
 	}
 
 	.link-primary:hover {
-		background: var(--color-accent);
-		color: white;
+		background: var(--color-brand);
+		color: var(--color-on-brand);
 		transform: translateY(-1px);
 	}
 
diff --git a/portfolio-cloudflare/src/pages/about.astro b/portfolio-cloudflare/src/pages/about.astro
index e7b490c..3500b27 100644
--- a/portfolio-cloudflare/src/pages/about.astro
+++ b/portfolio-cloudflare/src/pages/about.astro
@@ -66,15 +66,15 @@ if (Astro.cache?.enabled) Astro.cache.set(cacheHint);
 	}
 
 	.about-title {
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-size: var(--font-size-4xl);
-		font-weight: 500;
-		line-height: 1.1;
+		font-weight: var(--font-weight-display);
+		line-height: var(--leading-tight);
 	}
 
 	.about-content {
 		font-size: var(--font-size-base);
-		line-height: 1.7;
+		line-height: var(--leading-relaxed);
 	}
 
 	.about-content :global(p) {
@@ -82,17 +82,17 @@ if (Astro.cache?.enabled) Astro.cache.set(cacheHint);
 	}
 
 	.about-content :global(h2) {
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-size: var(--font-size-2xl);
-		font-weight: 500;
+		font-weight: var(--font-weight-heading);
 		margin-top: 2.5em;
 		margin-bottom: 0.75em;
 	}
 
 	.about-content :global(h3) {
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-size: var(--font-size-xl);
-		font-weight: 500;
+		font-weight: var(--font-weight-heading);
 		margin-top: 2em;
 		margin-bottom: 0.5em;
 	}
@@ -108,9 +108,9 @@ if (Astro.cache?.enabled) Astro.cache.set(cacheHint);
 	}
 
 	.sidebar-section h3 {
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-size: var(--font-size-lg);
-		font-weight: 500;
+		font-weight: var(--font-weight-heading);
 		margin-bottom: var(--spacing-md);
 	}
 
@@ -137,7 +137,7 @@ if (Astro.cache?.enabled) Astro.cache.set(cacheHint);
 	}
 
 	.sidebar-section a:hover {
-		color: var(--color-accent);
+		color: var(--color-brand);
 	}
 
 	@media (max-width: 768px) {
diff --git a/portfolio-cloudflare/src/pages/contact.astro b/portfolio-cloudflare/src/pages/contact.astro
index a466359..ac7bf9e 100644
--- a/portfolio-cloudflare/src/pages/contact.astro
+++ b/portfolio-cloudflare/src/pages/contact.astro
@@ -142,17 +142,17 @@ if (Astro.request.method === "POST") {
 	}
 
 	.contact-title {
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-size: var(--font-size-4xl);
-		font-weight: 500;
-		line-height: 1.1;
+		font-weight: var(--font-weight-display);
+		line-height: var(--leading-tight);
 		margin-bottom: var(--spacing-lg);
 	}
 
 	.contact-intro {
 		font-size: var(--font-size-lg);
 		color: var(--color-muted);
-		line-height: 1.6;
+		line-height: var(--leading-normal);
 	}
 
 	.contact-grid {
@@ -195,8 +195,8 @@ if (Astro.request.method === "POST") {
 	.form-field input:focus,
 	.form-field textarea:focus {
 		outline: none;
-		border-color: var(--color-accent);
-		box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
+		border-color: var(--color-brand);
+		box-shadow: 0 0 0 3px var(--color-brand-ring);
 	}
 
 	.form-field input::placeholder,
@@ -226,8 +226,8 @@ if (Astro.request.method === "POST") {
 	}
 
 	.form-submit:hover {
-		background: var(--color-accent);
-		color: white;
+		background: var(--color-brand);
+		color: var(--color-on-brand);
 		transform: translateY(-1px);
 	}
 
@@ -237,21 +237,13 @@ if (Astro.request.method === "POST") {
 
 	.form-error {
 		padding: var(--spacing-md);
-		background: #fef2f2;
-		border: 1px solid #fecaca;
+		background: color-mix(in srgb, var(--color-danger) 10%, transparent);
+		border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
 		border-radius: var(--radius);
-		color: #dc2626;
+		color: var(--color-danger);
 		font-size: var(--font-size-sm);
 	}
 
-	@media (prefers-color-scheme: dark) {
-		.form-error {
-			background: rgba(239, 68, 68, 0.1);
-			border-color: rgba(239, 68, 68, 0.3);
-			color: #f87171;
-		}
-	}
-
 	.form-success {
 		padding: var(--spacing-2xl);
 		background: var(--color-surface);
@@ -261,9 +253,9 @@ if (Astro.request.method === "POST") {
 	}
 
 	.form-success h2 {
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-size: var(--font-size-xl);
-		font-weight: 500;
+		font-weight: var(--font-weight-heading);
 		margin-bottom: var(--spacing-sm);
 	}
 
@@ -274,7 +266,7 @@ if (Astro.request.method === "POST") {
 
 	.form-reset {
 		font-size: var(--font-size-sm);
-		color: var(--color-accent);
+		color: var(--color-brand);
 		text-decoration: none;
 	}
 
@@ -293,9 +285,9 @@ if (Astro.request.method === "POST") {
 	}
 
 	.info-section h3 {
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-size: var(--font-size-lg);
-		font-weight: 500;
+		font-weight: var(--font-weight-heading);
 		margin-bottom: var(--spacing-sm);
 	}
 
diff --git a/portfolio-cloudflare/src/pages/index.astro b/portfolio-cloudflare/src/pages/index.astro
index cf6a135..6b9e703 100644
--- a/portfolio-cloudflare/src/pages/index.astro
+++ b/portfolio-cloudflare/src/pages/index.astro
@@ -67,15 +67,15 @@ if (Astro.cache?.enabled) Astro.cache.set(cacheHint);
 
 	.hero-title {
 		font-size: var(--font-size-4xl);
-		font-weight: 500;
+		font-weight: var(--font-weight-display);
 		margin-bottom: var(--spacing-md);
-		letter-spacing: -0.02em;
+		letter-spacing: var(--tracking-tight);
 	}
 
 	.hero-tagline {
 		font-size: var(--font-size-xl);
 		color: var(--color-muted);
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-style: italic;
 	}
 
@@ -96,7 +96,7 @@ if (Astro.cache?.enabled) Astro.cache.set(cacheHint);
 
 	.section-title {
 		font-size: var(--font-size-lg);
-		font-weight: 500;
+		font-weight: var(--font-weight-heading);
 	}
 
 	.section-link {
diff --git a/portfolio-cloudflare/src/pages/work/[slug].astro b/portfolio-cloudflare/src/pages/work/[slug].astro
index 8ca1042..4036075 100644
--- a/portfolio-cloudflare/src/pages/work/[slug].astro
+++ b/portfolio-cloudflare/src/pages/work/[slug].astro
@@ -156,7 +156,7 @@ function getImageSrc(img: unknown): string | undefined {
 		color: var(--color-muted);
 		margin-bottom: var(--spacing-sm);
 		text-transform: uppercase;
-		letter-spacing: 0.05em;
+		letter-spacing: var(--tracking-wide);
 	}
 
 	.meta-separator {
@@ -164,24 +164,24 @@ function getImageSrc(img: unknown): string | undefined {
 	}
 
 	.project-title {
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-size: var(--font-size-4xl);
-		font-weight: 500;
-		line-height: 1.1;
+		font-weight: var(--font-weight-display);
+		line-height: var(--leading-tight);
 		margin-bottom: var(--spacing-lg);
 	}
 
 	.project-summary {
 		font-size: var(--font-size-lg);
 		color: var(--color-muted);
-		line-height: 1.6;
+		line-height: var(--leading-normal);
 		margin-bottom: var(--spacing-lg);
 	}
 
 	.project-link {
 		display: inline-block;
 		font-size: var(--font-size-sm);
-		color: var(--color-accent);
+		color: var(--color-brand);
 		text-decoration: none;
 		transition: color var(--transition-fast);
 	}
@@ -202,7 +202,7 @@ function getImageSrc(img: unknown): string | undefined {
 
 	.project-content {
 		font-size: var(--font-size-base);
-		line-height: 1.7;
+		line-height: var(--leading-relaxed);
 	}
 
 	.project-content :global(p) {
@@ -210,17 +210,17 @@ function getImageSrc(img: unknown): string | undefined {
 	}
 
 	.project-content :global(h2) {
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-size: var(--font-size-2xl);
-		font-weight: 500;
+		font-weight: var(--font-weight-heading);
 		margin-top: 2.5em;
 		margin-bottom: 0.75em;
 	}
 
 	.project-content :global(h3) {
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-size: var(--font-size-xl);
-		font-weight: 500;
+		font-weight: var(--font-weight-heading);
 		margin-top: 2em;
 		margin-bottom: 0.5em;
 	}
@@ -228,9 +228,9 @@ function getImageSrc(img: unknown): string | undefined {
 	.project-content :global(blockquote) {
 		margin: 2em 0;
 		padding-left: var(--spacing-xl);
-		border-left: 2px solid var(--color-accent);
+		border-left: 2px solid var(--color-brand);
 		color: var(--color-muted);
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-style: italic;
 		font-size: var(--font-size-lg);
 	}
@@ -276,9 +276,9 @@ function getImageSrc(img: unknown): string | undefined {
 	}
 
 	.more-title {
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-size: var(--font-size-2xl);
-		font-weight: 500;
+		font-weight: var(--font-weight-heading);
 		margin-bottom: var(--spacing-2xl);
 	}
 
diff --git a/portfolio-cloudflare/src/styles/theme.css b/portfolio-cloudflare/src/styles/theme.css
index 5ac14a1..3fb3f21 100644
--- a/portfolio-cloudflare/src/styles/theme.css
+++ b/portfolio-cloudflare/src/styles/theme.css
@@ -1,62 +1,28 @@
 /*
-  theme.css -- override any :root variable here to retheme the site.
+  theme.css -- your theme overrides. This is the file to edit to
+  retheme the site.
 
-  This is the only file you need to edit to customize the site's visual
-  appearance. All defaults are listed below as comments. Uncomment and
-  change any value to override it.
+  Every design token lives in src/styles/tokens.css (colors, type
+  scale, spacing, layout) with its default value. Override any of them
+  here: declarations in this file are unlayered, so they always beat
+  the @layer base defaults in tokens.css.
 
-  Base.astro puts its defaults inside @layer base, so declarations here
-  (which are unlayered) always take priority -- no specificity tricks needed.
+  Colors are defined with light-dark(). Overriding with a plain color
+  changes light and dark mode at once; use light-dark(<light>, <dark>)
+  to set different values per mode.
 
-  Note: this template defines explicit dark mode colors in Base.astro.
-  Overriding light-mode --color-* variables here won't affect dark mode.
-  To customize dark mode, also override --color-* variables inside a
-  @media (prefers-color-scheme: dark) block and/or in the :root.dark rule.
-*/
-
-:root {
-	/* --- Colors ---
-	--color-bg: #fafafa;
-	--color-text: #1a1a1a;
-	--color-muted: #6b7280;
-	--color-border: #e5e7eb;
-	--color-surface: #ffffff;
-	--color-accent: #7c3aed;
-	--color-accent-muted: #a78bfa;
-	*/
+  The serif display face (--font-heading) is loaded in astro.config.mjs.
+  Swap the loaded font there; use overrides here for system fonts or to
+  change the quiet system-sans body face (--font-body).
 
-	/* --- Typography ---
-	--font-sans: system-ui, -apple-system, sans-serif;
-	--font-mono: ui-monospace, monospace;
-	--font-size-sm: 0.875rem;
-	--font-size-base: 1.0625rem;
-	--font-size-lg: 1.25rem;
-	--font-size-xl: 1.5rem;
-	--font-size-2xl: 2rem;
-	--font-size-3xl: 2.75rem;
-	--font-size-4xl: 3.5rem;
-	*/
+  Example:
 
-	/* --- Spacing ---
-	--spacing-xs: 0.25rem;
-	--spacing-sm: 0.5rem;
-	--spacing-md: 1rem;
-	--spacing-lg: 1.5rem;
-	--spacing-xl: 2rem;
-	--spacing-2xl: 3rem;
-	--spacing-3xl: 4rem;
-	--spacing-4xl: 6rem;
-	*/
-
-	/* --- Layout ---
-	--max-width: 720px;
-	--wide-width: 1200px;
-	--radius: 4px;
-	*/
+  :root {
+    --color-brand: light-dark(#0f766e, #2dd4bf);
+    --font-body: "Avenir Next", system-ui, sans-serif;
+    --font-size-4xl: 4rem;
+  }
+*/
 
-	/* --- Transitions ---
-	--transition-fast: 150ms ease;
-	--transition-base: 200ms ease;
-	--transition-slow: 300ms ease;
-	*/
+:root {
 }
diff --git a/portfolio-cloudflare/src/styles/tokens.css b/portfolio-cloudflare/src/styles/tokens.css
new file mode 100644
index 0000000..34d0d43
--- /dev/null
+++ b/portfolio-cloudflare/src/styles/tokens.css
@@ -0,0 +1,96 @@
+/*
+  tokens.css -- the design tokens for this template. These are the
+  defaults; to customize the site, override any variable in
+  src/styles/theme.css rather than editing this file. Declarations in
+  theme.css are unlayered, so they always beat these @layer base
+  defaults -- no specificity tricks needed.
+
+  Colors use light-dark(): the first value applies in light mode, the
+  second in dark mode. Overriding a color with a plain value changes
+  both modes at once; use light-dark(<light>, <dark>) in an override to
+  keep them distinct.
+
+  --font-heading (the serif display face) is defined by the font
+  pipeline in astro.config.mjs, not here. To swap it, edit the fonts
+  entry there. --font-body is the deliberately quiet system sans stack
+  below.
+*/
+
+@layer base {
+	:root {
+		color-scheme: light dark;
+
+		/* Colors */
+		--color-bg: light-dark(#fafafa, #0a0a0a);
+		--color-text: light-dark(#1a1a1a, #f5f5f5);
+		--color-muted: light-dark(#6b7280, #a1a1aa);
+		--color-border: light-dark(#e5e7eb, #27272a);
+		--color-surface: light-dark(#ffffff, #18181b);
+		--color-brand: light-dark(#7c3aed, #a78bfa); /* the single accent, used sparingly */
+		--color-on-brand: white; /* text on brand-colored surfaces */
+		--color-brand-ring: color-mix(in srgb, var(--color-brand) 10%, transparent);
+		--color-danger: light-dark(#dc2626, #f87171);
+
+		/* Typography */
+		--font-body: system-ui, -apple-system, sans-serif;
+		--font-weight-heading: 500; /* serif headings and titles */
+		--font-weight-display: 500; /* hero and page titles */
+
+		/* Type scale */
+		--font-size-xs: 0.75rem;
+		--font-size-sm: 0.875rem;
+		--font-size-base: 1.0625rem;
+		--font-size-lg: 1.25rem;
+		--font-size-xl: 1.5rem;
+		--font-size-2xl: 2rem;
+		--font-size-3xl: 2.75rem;
+		--font-size-4xl: 3.5rem;
+
+		/* Line heights */
+		--leading-tight: 1.1; /* hero and project titles */
+		--leading-snug: 1.2; /* headings */
+		--leading-normal: 1.6; /* body copy */
+		--leading-relaxed: 1.7; /* long-form content */
+
+		/* Letter spacing */
+		--tracking-tight: -0.02em; /* site title, hero title */
+		--tracking-wide: 0.05em; /* uppercase meta lines, tag chips */
+
+		/* Spacing */
+		--spacing-xs: 0.25rem;
+		--spacing-sm: 0.5rem;
+		--spacing-md: 1rem;
+		--spacing-lg: 1.5rem;
+		--spacing-xl: 2rem;
+		--spacing-2xl: 3rem;
+		--spacing-3xl: 4rem;
+		--spacing-4xl: 6rem;
+
+		/* Layout */
+		--max-width: 720px;
+		--wide-width: 1200px;
+		--radius: 4px;
+
+		/* Transitions */
+		--transition-fast: 150ms ease;
+		--transition-base: 200ms ease;
+		--transition-slow: 300ms ease;
+	}
+
+	/*
+	 * Light-mode values for browsers without light-dark() (Safari < 17.5,
+	 * Chrome < 123). Must mirror the light values above.
+	 */
+	@supports not (color: light-dark(#000, #fff)) {
+		:root {
+			color-scheme: light;
+			--color-bg: #fafafa;
+			--color-text: #1a1a1a;
+			--color-muted: #6b7280;
+			--color-border: #e5e7eb;
+			--color-surface: #ffffff;
+			--color-brand: #7c3aed;
+			--color-danger: #dc2626;
+		}
+	}
+}
diff --git a/portfolio/.agents/skills/creating-plugins/references/admin-ui.md b/portfolio/.agents/skills/creating-plugins/references/admin-ui.md
index e2289e1..9e26b8d 100644
--- a/portfolio/.agents/skills/creating-plugins/references/admin-ui.md
+++ b/portfolio/.agents/skills/creating-plugins/references/admin-ui.md
@@ -12,7 +12,7 @@ import { SettingsPage } from "./components/SettingsPage";
 import { ReportsPage } from "./components/ReportsPage";
 import { StatusWidget } from "./components/StatusWidget";
 
-// Pages keyed by path (must match admin.pages paths)
+// Pages keyed by path (trailing slash optional, so /settings and /settings/ both resolve)
 export const pages = {
 	"/settings": SettingsPage,
 	"/reports": ReportsPage,
diff --git a/portfolio/.agents/skills/creating-plugins/references/api-routes.md b/portfolio/.agents/skills/creating-plugins/references/api-routes.md
index c4d2419..8ecf112 100644
--- a/portfolio/.agents/skills/creating-plugins/references/api-routes.md
+++ b/portfolio/.agents/skills/creating-plugins/references/api-routes.md
@@ -175,7 +175,9 @@ routes: {
 	},
 	"settings/save": {
 		handler: async (ctx) => {
-			const input = await ctx.request.json();
+			// EmDash parses the request body once and exposes it as ctx.input.
+			// Don't call ctx.request.json() — the body stream is already consumed.
+			const input = ctx.input as Record<string, unknown>;
 			for (const [key, value] of Object.entries(input)) {
 				if (value !== undefined) await ctx.kv.set(`settings:${key}`, value);
 			}
diff --git a/portfolio/.agents/skills/creating-plugins/references/block-kit.md b/portfolio/.agents/skills/creating-plugins/references/block-kit.md
index 397505b..5354e91 100644
--- a/portfolio/.agents/skills/creating-plugins/references/block-kit.md
+++ b/portfolio/.agents/skills/creating-plugins/references/block-kit.md
@@ -16,10 +16,16 @@ Block Kit elements are also used for [Portable Text block editing fields](./port
 6. Plugin returns new blocks
 
 ```typescript
+import type { BlockInteraction } from "@emdash-cms/blocks";
+
 routes: {
 	admin: {
 		handler: async (ctx) => {
-			const interaction = await ctx.request.json();
+			// EmDash parses the request body once and exposes it as ctx.input;
+			// read it directly rather than ctx.request.json() (the body is consumed).
+			// BlockInteraction is the discriminated union of page_load,
+			// block_action, and form_submit payloads.
+			const interaction = ctx.input as BlockInteraction;
 
 			if (interaction.type === "page_load") {
 				return {
diff --git a/portfolio/AGENTS.md b/portfolio/AGENTS.md
index dca9d70..51f960f 100644
--- a/portfolio/AGENTS.md
+++ b/portfolio/AGENTS.md
@@ -71,30 +71,34 @@ The `gallery` field on `projects` is a JSON field, not an EmDash image field. It
 
 ## Visual character
 
-Typography is the design. The display face is **Playfair Display** (serif) on the `--font-serif` CSS variable; the body face is the system sans stack on `--font-sans`. The serif is used for the site title, hero titles, project titles, page titles, and contact column labels. Everything else is the sans.
+Typography is the design. The display face is **Playfair Display** (serif) on the `--font-heading` CSS variable; the body face is the system sans stack on `--font-body`. The serif is used for the site title, hero titles, project titles, page titles, and contact column labels. Everything else is the sans. Serif weight is calm on purpose (`--font-weight-heading` and `--font-weight-display` both default to 500).
 
-The accent colour is barely visible by design -- the only saturated colour on the page should be inside images. The default `--color-accent` (`#7c3aed`) is used sparingly for link hover and focus states.
+The brand colour is barely visible by design -- the only saturated colour on the page should be inside images. The default `--color-brand` (`#7c3aed`) is used sparingly for link hover and focus states.
 
 Whitespace is generous. Sections breathe. Don't fight that.
 
 ## Customisation
 
-`src/styles/theme.css` is the only file to edit for visual changes. Every CSS variable from `Base.astro` is listed there as a commented default -- uncomment and change to override. The dark mode palette is defined inside `Base.astro` itself; light-mode overrides in `theme.css` won't affect dark mode. To customise dark mode, add `@media (prefers-color-scheme: dark)` and `:root.dark` rules in `theme.css`.
+Design tokens live in `src/styles/tokens.css` with their default values. To restyle the site, override tokens in `src/styles/theme.css` -- declarations there are unlayered, so they always beat the `@layer base` defaults. Don't edit `tokens.css` or `Base.astro` for visual changes.
 
-Fonts are configured in `astro.config.mjs` under `fonts:` (the Astro Fonts API). To change the display face, swap the `name:` for any Google Fonts serif and keep `cssVariable: "--font-serif"`. Good pairings: Cormorant Garamond, Fraunces, EB Garamond, DM Serif Display. Avoid changing the body font unless you have a reason -- system sans is deliberately quiet here.
+Colours are defined with `light-dark(<light>, <dark>)`, so each token carries both modes. Overriding with a plain colour changes light and dark at once; use `light-dark()` in the override to keep them distinct. There is no separate dark palette to maintain.
 
-CSS variables worth knowing:
+The display face is configured in `astro.config.mjs` under `fonts:` (the Astro Fonts API). To change it, swap the `name:` for any Google Fonts serif and keep `cssVariable: "--font-heading"`. Good pairings: Cormorant Garamond, Fraunces, EB Garamond, DM Serif Display. The body face (`--font-body`) is a plain token in `tokens.css` -- system sans, deliberately quiet; override it in `theme.css` only if you have a reason.
 
-- `--color-accent` / `--color-accent-muted` -- the single accent, used very sparingly
+CSS variables worth knowing (see `tokens.css` for the full list):
+
+- `--color-brand`, `--color-on-brand`, `--color-brand-ring` -- the single accent, used very sparingly
 - `--color-bg`, `--color-surface`, `--color-text`, `--color-muted`, `--color-border` -- neutral palette
-- `--font-serif`, `--font-sans` -- bound to the Fonts API entries in `astro.config.mjs`
+- `--color-danger` -- form errors
+- `--font-heading` (Fonts API entry in `astro.config.mjs`), `--font-body` (token)
+- `--font-weight-heading` / `--font-weight-display` (both 500) -- raise for a heavier serif voice
 - `--font-size-4xl` -- the size of the homepage title and project titles
 - `--max-width` (720px), `--wide-width` (1200px) -- column widths
 
 ## What not to do
 
 - Don't introduce gradients, drop shadows on cards, or coloured section backgrounds. The template's voice is calm and editorial; those break it.
-- Don't change `--font-sans` to a display font. Two display faces fight each other.
+- Don't change `--font-body` to a display font. Two display faces fight each other.
 - Don't add more than one accent colour.
 - Don't write generic copy like "Welcome to my portfolio" or "Crafting beautiful experiences". The work should speak; the words should be specific (a client name, a discipline, a year).
 - Don't pack the home page with every project. The "Selected Work" framing is intentional -- 3-6 is plenty.
diff --git a/portfolio/astro.config.mjs b/portfolio/astro.config.mjs
index f135183..59f947f 100644
--- a/portfolio/astro.config.mjs
+++ b/portfolio/astro.config.mjs
@@ -27,7 +27,7 @@ export default defineConfig({
 		{
 			provider: fontProviders.google(),
 			name: "Playfair Display",
-			cssVariable: "--font-serif",
+			cssVariable: "--font-heading",
 			weights: [400, 500, 600, 700],
 			fallbacks: ["serif"],
 		},
diff --git a/portfolio/package.json b/portfolio/package.json
index 22d742c..b52abb3 100644
--- a/portfolio/package.json
+++ b/portfolio/package.json
@@ -18,7 +18,7 @@
     "@astrojs/react": "^6.0.0",
     "astro": "^7.0.0",
     "better-sqlite3": "^12.8.0",
-    "emdash": "^0.27.0",
+    "emdash": "^0.28.1",
     "react": "19.2.4",
     "react-dom": "19.2.4"
   },
diff --git a/portfolio/src/components/ProjectCard.astro b/portfolio/src/components/ProjectCard.astro
index 865d440..8f63203 100644
--- a/portfolio/src/components/ProjectCard.astro
+++ b/portfolio/src/components/ProjectCard.astro
@@ -56,7 +56,7 @@ const allTags = [...(categories || []), ...(tags || [])];
 	.card-link {
 		display: flex;
 		flex-direction: column;
-		gap: var(--spacing-lg, 1.5rem);
+		gap: var(--spacing-lg);
 		text-decoration: none;
 		color: inherit;
 	}
@@ -64,7 +64,7 @@ const allTags = [...(categories || []), ...(tags || [])];
 	.card-image {
 		position: relative;
 		overflow: hidden;
-		border-radius: var(--radius, 4px);
+		border-radius: var(--radius);
 	}
 
 	.card-image img {
@@ -72,7 +72,7 @@ const allTags = [...(categories || []), ...(tags || [])];
 		height: auto;
 		aspect-ratio: 4 / 3;
 		object-fit: cover;
-		transition: transform var(--transition-slow, 300ms ease);
+		transition: transform var(--transition-slow);
 	}
 
 	.card-overlay {
@@ -82,21 +82,22 @@ const allTags = [...(categories || []), ...(tags || [])];
 		align-items: center;
 		justify-content: center;
 		background: rgba(0, 0, 0, 0);
-		transition: background var(--transition-base, 200ms ease);
+		transition: background var(--transition-base);
 	}
 
+	/* Over-image chip: white regardless of theme */
 	.card-view {
-		font-family: var(--font-serif, Georgia, serif);
-		font-size: var(--font-size-sm, 0.875rem);
+		font-family: var(--font-heading);
+		font-size: var(--font-size-sm);
 		color: white;
-		padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
+		padding: var(--spacing-sm) var(--spacing-md);
 		border: 1px solid white;
-		border-radius: var(--radius, 4px);
+		border-radius: var(--radius);
 		opacity: 0;
 		transform: translateY(10px);
 		transition:
-			opacity var(--transition-base, 200ms ease),
-			transform var(--transition-base, 200ms ease);
+			opacity var(--transition-base),
+			transform var(--transition-base);
 	}
 
 	.project-card:hover .card-image img {
@@ -115,33 +116,33 @@ const allTags = [...(categories || []), ...(tags || [])];
 	.card-content {
 		display: flex;
 		flex-direction: column;
-		gap: var(--spacing-xs, 0.25rem);
+		gap: var(--spacing-xs);
 	}
 
 	.card-title {
-		font-family: var(--font-serif, Georgia, serif);
-		font-size: var(--font-size-xl, 1.5rem);
-		font-weight: 500;
-		transition: color var(--transition-fast, 150ms ease);
+		font-family: var(--font-heading);
+		font-size: var(--font-size-xl);
+		font-weight: var(--font-weight-heading);
+		transition: color var(--transition-fast);
 	}
 
 	.project-card:hover .card-title {
-		color: var(--color-accent, #7c3aed);
+		color: var(--color-brand);
 	}
 
 	.card-meta {
-		font-size: var(--font-size-sm, 0.875rem);
-		color: var(--color-muted, #6b7280);
+		font-size: var(--font-size-sm);
+		color: var(--color-muted);
 	}
 
 	.card-separator {
-		margin: 0 var(--spacing-xs, 0.25rem);
+		margin: 0 var(--spacing-xs);
 	}
 
 	.card-summary {
-		font-size: var(--font-size-sm, 0.875rem);
-		color: var(--color-muted, #6b7280);
-		line-height: 1.6;
+		font-size: var(--font-size-sm);
+		color: var(--color-muted);
+		line-height: var(--leading-normal);
 		display: -webkit-box;
 		-webkit-line-clamp: 2;
 		-webkit-box-orient: vertical;
@@ -151,17 +152,17 @@ const allTags = [...(categories || []), ...(tags || [])];
 	.card-categories {
 		display: flex;
 		flex-wrap: wrap;
-		gap: var(--spacing-sm, 0.5rem);
-		margin-top: var(--spacing-sm, 0.5rem);
+		gap: var(--spacing-sm);
+		margin-top: var(--spacing-sm);
 	}
 
 	.card-category {
-		font-size: 0.75rem;
+		font-size: var(--font-size-xs);
 		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		color: var(--color-muted, #6b7280);
-		padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
-		border: 1px solid var(--color-border, #e5e7eb);
-		border-radius: var(--radius, 4px);
+		letter-spacing: var(--tracking-wide);
+		color: var(--color-muted);
+		padding: var(--spacing-xs) var(--spacing-sm);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius);
 	}
 </style>
diff --git a/portfolio/src/layouts/Base.astro b/portfolio/src/layouts/Base.astro
index 81d7c27..f8fd378 100644
--- a/portfolio/src/layouts/Base.astro
+++ b/portfolio/src/layouts/Base.astro
@@ -3,6 +3,7 @@ import { getMenu, getSiteSettings } from "emdash";
 import { EmDashHead } from "emdash/ui";
 import { createPublicPageContext } from "emdash/page";
 import { Font } from "astro:assets";
+import "../styles/tokens.css";
 import "../styles/theme.css";
 
 interface Props {
@@ -43,7 +44,7 @@ const pageCtx = createPublicPageContext({
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>{fullTitle}</title>
 		<EmDashHead page={pageCtx} />
-		<Font cssVariable="--font-serif" preload />
+		<Font cssVariable="--font-heading" preload />
 		<link
 			rel="alternate"
 			type="application/rss+xml"
@@ -51,15 +52,14 @@ const pageCtx = createPublicPageContext({
 			href="/rss.xml"
 		/>
 		<script is:inline>
-			// Apply theme immediately to prevent flash
+			// Apply an explicit theme choice immediately to prevent flash.
+			// With no cookie, color-scheme: light dark follows the OS.
 			(function () {
 				var c = document.cookie;
 				var i = c.indexOf("theme=");
 				var theme = i >= 0 ? c.slice(i + 6).split(";")[0] : null;
 				if (theme === "dark" || theme === "light") {
 					document.documentElement.classList.add(theme);
-				} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-					document.documentElement.classList.add("dark");
 				}
 			})();
 		</script>
@@ -143,9 +143,6 @@ const pageCtx = createPublicPageContext({
 				if (theme === "system") {
 					document.cookie = `theme=; path=/; max-age=0; SameSite=Lax${secure}`;
 					root.classList.remove("light", "dark");
-					if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-						root.classList.add("dark");
-					}
 				} else {
 					document.cookie = `theme=${theme}; path=/; max-age=31536000; SameSite=Lax${secure}`;
 					root.classList.remove("light", "dark");
@@ -174,15 +171,6 @@ const pageCtx = createPublicPageContext({
 					setTheme(btn.dataset.theme || "system");
 				});
 			});
-
-			// Listen for system preference changes
-			window
-				.matchMedia("(prefers-color-scheme: dark)")
-				.addEventListener("change", (e) => {
-					if (getStoredTheme() === "system") {
-						root.classList.toggle("dark", e.matches);
-					}
-				});
 		</script>
 
 		<style is:global>
@@ -202,71 +190,22 @@ const pageCtx = createPublicPageContext({
 					padding: 0;
 				}
 
-				:root {
-					/* Colors - Elegant/Minimal palette */
-					--color-bg: #fafafa;
-					--color-text: #1a1a1a;
-					--color-muted: #6b7280;
-					--color-border: #e5e7eb;
-					--color-surface: #ffffff;
-					--color-accent: #7c3aed;
-					--color-accent-muted: #a78bfa;
-
-					/* Typography */
-					--font-sans: system-ui, -apple-system, sans-serif;
-					--font-mono: ui-monospace, monospace;
-
-					--font-size-sm: 0.875rem;
-					--font-size-base: 1.0625rem;
-					--font-size-lg: 1.25rem;
-					--font-size-xl: 1.5rem;
-					--font-size-2xl: 2rem;
-					--font-size-3xl: 2.75rem;
-					--font-size-4xl: 3.5rem;
-
-					/* Spacing */
-					--spacing-xs: 0.25rem;
-					--spacing-sm: 0.5rem;
-					--spacing-md: 1rem;
-					--spacing-lg: 1.5rem;
-					--spacing-xl: 2rem;
-					--spacing-2xl: 3rem;
-					--spacing-3xl: 4rem;
-					--spacing-4xl: 6rem;
-
-					/* Layout */
-					--max-width: 720px;
-					--wide-width: 1200px;
-					--radius: 4px;
-
-					/* Transitions */
-					--transition-fast: 150ms ease;
-					--transition-base: 200ms ease;
-					--transition-slow: 300ms ease;
-				}
-
-				/* Dark mode via system preference (when no explicit class) */
-				@media (prefers-color-scheme: dark) {
-					:root:not(.light) {
-						--color-bg: #0a0a0a;
-						--color-text: #f5f5f5;
-						--color-muted: #a1a1aa;
-						--color-border: #27272a;
-						--color-surface: #18181b;
-						--color-accent: #a78bfa;
-						--color-accent-muted: #7c3aed;
+				/*
+				 * Design tokens live in src/styles/tokens.css. Colors are
+				 * defined with light-dark(); these rules pin the scheme when
+				 * the footer switcher sets an explicit choice. With no class,
+				 * color-scheme: light dark follows the OS preference. The
+				 * @supports guard keeps the toggle from forcing dark UA form
+				 * controls on browsers stuck on the plain-light fallback.
+				 */
+				@supports (color: light-dark(#000, #fff)) {
+					:root.light {
+						color-scheme: light;
 					}
-				}
 
-				/* Explicit dark mode */
-				:root.dark {
-					--color-bg: #0a0a0a;
-					--color-text: #f5f5f5;
-					--color-muted: #a1a1aa;
-					--color-border: #27272a;
-					--color-surface: #18181b;
-					--color-accent: #a78bfa;
-					--color-accent-muted: #7c3aed;
+					:root.dark {
+						color-scheme: dark;
+					}
 				}
 
 				html {
@@ -274,9 +213,9 @@ const pageCtx = createPublicPageContext({
 				}
 
 				body {
-					font-family: var(--font-sans);
+					font-family: var(--font-body);
 					font-size: var(--font-size-base);
-					line-height: 1.6;
+					line-height: var(--leading-normal);
 					color: var(--color-text);
 					background: var(--color-bg);
 					-webkit-font-smoothing: antialiased;
@@ -297,9 +236,9 @@ const pageCtx = createPublicPageContext({
 				h2,
 				h3,
 				h4 {
-					font-family: var(--font-serif);
-					font-weight: 500;
-					line-height: 1.2;
+					font-family: var(--font-heading);
+					font-weight: var(--font-weight-heading);
+					line-height: var(--leading-snug);
 				}
 
 				h1 {
@@ -330,11 +269,11 @@ const pageCtx = createPublicPageContext({
 			}
 
 			.site-title {
-				font-family: var(--font-serif);
+				font-family: var(--font-heading);
 				font-size: var(--font-size-lg);
 				font-weight: 600;
 				text-decoration: none;
-				letter-spacing: -0.02em;
+				letter-spacing: var(--tracking-tight);
 			}
 
 			.site-logo-img {
@@ -386,7 +325,7 @@ const pageCtx = createPublicPageContext({
 			}
 
 			.footer-logo {
-				font-family: var(--font-serif);
+				font-family: var(--font-heading);
 				font-size: var(--font-size-lg);
 				font-weight: 600;
 			}
@@ -397,7 +336,7 @@ const pageCtx = createPublicPageContext({
 			}
 
 			.footer-tagline {
-				font-family: var(--font-serif);
+				font-family: var(--font-heading);
 				font-style: italic;
 				font-size: var(--font-size-sm);
 				color: var(--color-muted);
@@ -420,7 +359,7 @@ const pageCtx = createPublicPageContext({
 				background: transparent;
 				border: 1px solid var(--color-border);
 				color: var(--color-muted);
-				font-family: var(--font-sans);
+				font-family: var(--font-body);
 				font-size: var(--font-size-sm);
 				padding: var(--spacing-xs) var(--spacing-sm);
 				border-radius: var(--radius);
@@ -436,7 +375,7 @@ const pageCtx = createPublicPageContext({
 			.theme-btn.active {
 				background: var(--color-surface);
 				color: var(--color-text);
-				border-color: var(--color-accent);
+				border-color: var(--color-brand);
 			}
 
 			.footer-powered {
diff --git a/portfolio/src/pages/404.astro b/portfolio/src/pages/404.astro
index b1d4b13..6ba3296 100644
--- a/portfolio/src/pages/404.astro
+++ b/portfolio/src/pages/404.astro
@@ -24,18 +24,18 @@ import Base from "../layouts/Base.astro";
 
 	.not-found-code {
 		display: block;
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-size: 8rem;
-		font-weight: 500;
+		font-weight: var(--font-weight-display);
 		line-height: 1;
 		color: var(--color-border);
 		margin-bottom: var(--spacing-lg);
 	}
 
 	.not-found h1 {
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-size: var(--font-size-2xl);
-		font-weight: 500;
+		font-weight: var(--font-weight-heading);
 		margin-bottom: var(--spacing-sm);
 	}
 
@@ -63,8 +63,8 @@ import Base from "../layouts/Base.astro";
 	}
 
 	.link-primary:hover {
-		background: var(--color-accent);
-		color: white;
+		background: var(--color-brand);
+		color: var(--color-on-brand);
 		transform: translateY(-1px);
 	}
 
diff --git a/portfolio/src/pages/about.astro b/portfolio/src/pages/about.astro
index e7b490c..3500b27 100644
--- a/portfolio/src/pages/about.astro
+++ b/portfolio/src/pages/about.astro
@@ -66,15 +66,15 @@ if (Astro.cache?.enabled) Astro.cache.set(cacheHint);
 	}
 
 	.about-title {
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-size: var(--font-size-4xl);
-		font-weight: 500;
-		line-height: 1.1;
+		font-weight: var(--font-weight-display);
+		line-height: var(--leading-tight);
 	}
 
 	.about-content {
 		font-size: var(--font-size-base);
-		line-height: 1.7;
+		line-height: var(--leading-relaxed);
 	}
 
 	.about-content :global(p) {
@@ -82,17 +82,17 @@ if (Astro.cache?.enabled) Astro.cache.set(cacheHint);
 	}
 
 	.about-content :global(h2) {
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-size: var(--font-size-2xl);
-		font-weight: 500;
+		font-weight: var(--font-weight-heading);
 		margin-top: 2.5em;
 		margin-bottom: 0.75em;
 	}
 
 	.about-content :global(h3) {
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-size: var(--font-size-xl);
-		font-weight: 500;
+		font-weight: var(--font-weight-heading);
 		margin-top: 2em;
 		margin-bottom: 0.5em;
 	}
@@ -108,9 +108,9 @@ if (Astro.cache?.enabled) Astro.cache.set(cacheHint);
 	}
 
 	.sidebar-section h3 {
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-size: var(--font-size-lg);
-		font-weight: 500;
+		font-weight: var(--font-weight-heading);
 		margin-bottom: var(--spacing-md);
 	}
 
@@ -137,7 +137,7 @@ if (Astro.cache?.enabled) Astro.cache.set(cacheHint);
 	}
 
 	.sidebar-section a:hover {
-		color: var(--color-accent);
+		color: var(--color-brand);
 	}
 
 	@media (max-width: 768px) {
diff --git a/portfolio/src/pages/contact.astro b/portfolio/src/pages/contact.astro
index a466359..ac7bf9e 100644
--- a/portfolio/src/pages/contact.astro
+++ b/portfolio/src/pages/contact.astro
@@ -142,17 +142,17 @@ if (Astro.request.method === "POST") {
 	}
 
 	.contact-title {
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-size: var(--font-size-4xl);
-		font-weight: 500;
-		line-height: 1.1;
+		font-weight: var(--font-weight-display);
+		line-height: var(--leading-tight);
 		margin-bottom: var(--spacing-lg);
 	}
 
 	.contact-intro {
 		font-size: var(--font-size-lg);
 		color: var(--color-muted);
-		line-height: 1.6;
+		line-height: var(--leading-normal);
 	}
 
 	.contact-grid {
@@ -195,8 +195,8 @@ if (Astro.request.method === "POST") {
 	.form-field input:focus,
 	.form-field textarea:focus {
 		outline: none;
-		border-color: var(--color-accent);
-		box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
+		border-color: var(--color-brand);
+		box-shadow: 0 0 0 3px var(--color-brand-ring);
 	}
 
 	.form-field input::placeholder,
@@ -226,8 +226,8 @@ if (Astro.request.method === "POST") {
 	}
 
 	.form-submit:hover {
-		background: var(--color-accent);
-		color: white;
+		background: var(--color-brand);
+		color: var(--color-on-brand);
 		transform: translateY(-1px);
 	}
 
@@ -237,21 +237,13 @@ if (Astro.request.method === "POST") {
 
 	.form-error {
 		padding: var(--spacing-md);
-		background: #fef2f2;
-		border: 1px solid #fecaca;
+		background: color-mix(in srgb, var(--color-danger) 10%, transparent);
+		border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
 		border-radius: var(--radius);
-		color: #dc2626;
+		color: var(--color-danger);
 		font-size: var(--font-size-sm);
 	}
 
-	@media (prefers-color-scheme: dark) {
-		.form-error {
-			background: rgba(239, 68, 68, 0.1);
-			border-color: rgba(239, 68, 68, 0.3);
-			color: #f87171;
-		}
-	}
-
 	.form-success {
 		padding: var(--spacing-2xl);
 		background: var(--color-surface);
@@ -261,9 +253,9 @@ if (Astro.request.method === "POST") {
 	}
 
 	.form-success h2 {
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-size: var(--font-size-xl);
-		font-weight: 500;
+		font-weight: var(--font-weight-heading);
 		margin-bottom: var(--spacing-sm);
 	}
 
@@ -274,7 +266,7 @@ if (Astro.request.method === "POST") {
 
 	.form-reset {
 		font-size: var(--font-size-sm);
-		color: var(--color-accent);
+		color: var(--color-brand);
 		text-decoration: none;
 	}
 
@@ -293,9 +285,9 @@ if (Astro.request.method === "POST") {
 	}
 
 	.info-section h3 {
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-size: var(--font-size-lg);
-		font-weight: 500;
+		font-weight: var(--font-weight-heading);
 		margin-bottom: var(--spacing-sm);
 	}
 
diff --git a/portfolio/src/pages/index.astro b/portfolio/src/pages/index.astro
index cf6a135..6b9e703 100644
--- a/portfolio/src/pages/index.astro
+++ b/portfolio/src/pages/index.astro
@@ -67,15 +67,15 @@ if (Astro.cache?.enabled) Astro.cache.set(cacheHint);
 
 	.hero-title {
 		font-size: var(--font-size-4xl);
-		font-weight: 500;
+		font-weight: var(--font-weight-display);
 		margin-bottom: var(--spacing-md);
-		letter-spacing: -0.02em;
+		letter-spacing: var(--tracking-tight);
 	}
 
 	.hero-tagline {
 		font-size: var(--font-size-xl);
 		color: var(--color-muted);
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-style: italic;
 	}
 
@@ -96,7 +96,7 @@ if (Astro.cache?.enabled) Astro.cache.set(cacheHint);
 
 	.section-title {
 		font-size: var(--font-size-lg);
-		font-weight: 500;
+		font-weight: var(--font-weight-heading);
 	}
 
 	.section-link {
diff --git a/portfolio/src/pages/work/[slug].astro b/portfolio/src/pages/work/[slug].astro
index 8ca1042..4036075 100644
--- a/portfolio/src/pages/work/[slug].astro
+++ b/portfolio/src/pages/work/[slug].astro
@@ -156,7 +156,7 @@ function getImageSrc(img: unknown): string | undefined {
 		color: var(--color-muted);
 		margin-bottom: var(--spacing-sm);
 		text-transform: uppercase;
-		letter-spacing: 0.05em;
+		letter-spacing: var(--tracking-wide);
 	}
 
 	.meta-separator {
@@ -164,24 +164,24 @@ function getImageSrc(img: unknown): string | undefined {
 	}
 
 	.project-title {
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-size: var(--font-size-4xl);
-		font-weight: 500;
-		line-height: 1.1;
+		font-weight: var(--font-weight-display);
+		line-height: var(--leading-tight);
 		margin-bottom: var(--spacing-lg);
 	}
 
 	.project-summary {
 		font-size: var(--font-size-lg);
 		color: var(--color-muted);
-		line-height: 1.6;
+		line-height: var(--leading-normal);
 		margin-bottom: var(--spacing-lg);
 	}
 
 	.project-link {
 		display: inline-block;
 		font-size: var(--font-size-sm);
-		color: var(--color-accent);
+		color: var(--color-brand);
 		text-decoration: none;
 		transition: color var(--transition-fast);
 	}
@@ -202,7 +202,7 @@ function getImageSrc(img: unknown): string | undefined {
 
 	.project-content {
 		font-size: var(--font-size-base);
-		line-height: 1.7;
+		line-height: var(--leading-relaxed);
 	}
 
 	.project-content :global(p) {
@@ -210,17 +210,17 @@ function getImageSrc(img: unknown): string | undefined {
 	}
 
 	.project-content :global(h2) {
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-size: var(--font-size-2xl);
-		font-weight: 500;
+		font-weight: var(--font-weight-heading);
 		margin-top: 2.5em;
 		margin-bottom: 0.75em;
 	}
 
 	.project-content :global(h3) {
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-size: var(--font-size-xl);
-		font-weight: 500;
+		font-weight: var(--font-weight-heading);
 		margin-top: 2em;
 		margin-bottom: 0.5em;
 	}
@@ -228,9 +228,9 @@ function getImageSrc(img: unknown): string | undefined {
 	.project-content :global(blockquote) {
 		margin: 2em 0;
 		padding-left: var(--spacing-xl);
-		border-left: 2px solid var(--color-accent);
+		border-left: 2px solid var(--color-brand);
 		color: var(--color-muted);
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-style: italic;
 		font-size: var(--font-size-lg);
 	}
@@ -276,9 +276,9 @@ function getImageSrc(img: unknown): string | undefined {
 	}
 
 	.more-title {
-		font-family: var(--font-serif);
+		font-family: var(--font-heading);
 		font-size: var(--font-size-2xl);
-		font-weight: 500;
+		font-weight: var(--font-weight-heading);
 		margin-bottom: var(--spacing-2xl);
 	}
 
diff --git a/portfolio/src/styles/theme.css b/portfolio/src/styles/theme.css
index 5ac14a1..3fb3f21 100644
--- a/portfolio/src/styles/theme.css
+++ b/portfolio/src/styles/theme.css
@@ -1,62 +1,28 @@
 /*
-  theme.css -- override any :root variable here to retheme the site.
+  theme.css -- your theme overrides. This is the file to edit to
+  retheme the site.
 
-  This is the only file you need to edit to customize the site's visual
-  appearance. All defaults are listed below as comments. Uncomment and
-  change any value to override it.
+  Every design token lives in src/styles/tokens.css (colors, type
+  scale, spacing, layout) with its default value. Override any of them
+  here: declarations in this file are unlayered, so they always beat
+  the @layer base defaults in tokens.css.
 
-  Base.astro puts its defaults inside @layer base, so declarations here
-  (which are unlayered) always take priority -- no specificity tricks needed.
+  Colors are defined with light-dark(). Overriding with a plain color
+  changes light and dark mode at once; use light-dark(<light>, <dark>)
+  to set different values per mode.
 
-  Note: this template defines explicit dark mode colors in Base.astro.
-  Overriding light-mode --color-* variables here won't affect dark mode.
-  To customize dark mode, also override --color-* variables inside a
-  @media (prefers-color-scheme: dark) block and/or in the :root.dark rule.
-*/
-
-:root {
-	/* --- Colors ---
-	--color-bg: #fafafa;
-	--color-text: #1a1a1a;
-	--color-muted: #6b7280;
-	--color-border: #e5e7eb;
-	--color-surface: #ffffff;
-	--color-accent: #7c3aed;
-	--color-accent-muted: #a78bfa;
-	*/
+  The serif display face (--font-heading) is loaded in astro.config.mjs.
+  Swap the loaded font there; use overrides here for system fonts or to
+  change the quiet system-sans body face (--font-body).
 
-	/* --- Typography ---
-	--font-sans: system-ui, -apple-system, sans-serif;
-	--font-mono: ui-monospace, monospace;
-	--font-size-sm: 0.875rem;
-	--font-size-base: 1.0625rem;
-	--font-size-lg: 1.25rem;
-	--font-size-xl: 1.5rem;
-	--font-size-2xl: 2rem;
-	--font-size-3xl: 2.75rem;
-	--font-size-4xl: 3.5rem;
-	*/
+  Example:
 
-	/* --- Spacing ---
-	--spacing-xs: 0.25rem;
-	--spacing-sm: 0.5rem;
-	--spacing-md: 1rem;
-	--spacing-lg: 1.5rem;
-	--spacing-xl: 2rem;
-	--spacing-2xl: 3rem;
-	--spacing-3xl: 4rem;
-	--spacing-4xl: 6rem;
-	*/
-
-	/* --- Layout ---
-	--max-width: 720px;
-	--wide-width: 1200px;
-	--radius: 4px;
-	*/
+  :root {
+    --color-brand: light-dark(#0f766e, #2dd4bf);
+    --font-body: "Avenir Next", system-ui, sans-serif;
+    --font-size-4xl: 4rem;
+  }
+*/
 
-	/* --- Transitions ---
-	--transition-fast: 150ms ease;
-	--transition-base: 200ms ease;
-	--transition-slow: 300ms ease;
-	*/
+:root {
 }
diff --git a/portfolio/src/styles/tokens.css b/portfolio/src/styles/tokens.css
new file mode 100644
index 0000000..34d0d43
--- /dev/null
+++ b/portfolio/src/styles/tokens.css
@@ -0,0 +1,96 @@
+/*
+  tokens.css -- the design tokens for this template. These are the
+  defaults; to customize the site, override any variable in
+  src/styles/theme.css rather than editing this file. Declarations in
+  theme.css are unlayered, so they always beat these @layer base
+  defaults -- no specificity tricks needed.
+
+  Colors use light-dark(): the first value applies in light mode, the
+  second in dark mode. Overriding a color with a plain value changes
+  both modes at once; use light-dark(<light>, <dark>) in an override to
+  keep them distinct.
+
+  --font-heading (the serif display face) is defined by the font
+  pipeline in astro.config.mjs, not here. To swap it, edit the fonts
+  entry there. --font-body is the deliberately quiet system sans stack
+  below.
+*/
+
+@layer base {
+	:root {
+		color-scheme: light dark;
+
+		/* Colors */
+		--color-bg: light-dark(#fafafa, #0a0a0a);
+		--color-text: light-dark(#1a1a1a, #f5f5f5);
+		--color-muted: light-dark(#6b7280, #a1a1aa);
+		--color-border: light-dark(#e5e7eb, #27272a);
+		--color-surface: light-dark(#ffffff, #18181b);
+		--color-brand: light-dark(#7c3aed, #a78bfa); /* the single accent, used sparingly */
+		--color-on-brand: white; /* text on brand-colored surfaces */
+		--color-brand-ring: color-mix(in srgb, var(--color-brand) 10%, transparent);
+		--color-danger: light-dark(#dc2626, #f87171);
+
+		/* Typography */
+		--font-body: system-ui, -apple-system, sans-serif;
+		--font-weight-heading: 500; /* serif headings and titles */
+		--font-weight-display: 500; /* hero and page titles */
+
+		/* Type scale */
+		--font-size-xs: 0.75rem;
+		--font-size-sm: 0.875rem;
+		--font-size-base: 1.0625rem;
+		--font-size-lg: 1.25rem;
+		--font-size-xl: 1.5rem;
+		--font-size-2xl: 2rem;
+		--font-size-3xl: 2.75rem;
+		--font-size-4xl: 3.5rem;
+
+		/* Line heights */
+		--leading-tight: 1.1; /* hero and project titles */
+		--leading-snug: 1.2; /* headings */
+		--leading-normal: 1.6; /* body copy */
+		--leading-relaxed: 1.7; /* long-form content */
+
+		/* Letter spacing */
+		--tracking-tight: -0.02em; /* site title, hero title */
+		--tracking-wide: 0.05em; /* uppercase meta lines, tag chips */
+
+		/* Spacing */
+		--spacing-xs: 0.25rem;
+		--spacing-sm: 0.5rem;
+		--spacing-md: 1rem;
+		--spacing-lg: 1.5rem;
+		--spacing-xl: 2rem;
+		--spacing-2xl: 3rem;
+		--spacing-3xl: 4rem;
+		--spacing-4xl: 6rem;
+
+		/* Layout */
+		--max-width: 720px;
+		--wide-width: 1200px;
+		--radius: 4px;
+
+		/* Transitions */
+		--transition-fast: 150ms ease;
+		--transition-base: 200ms ease;
+		--transition-slow: 300ms ease;
+	}
+
+	/*
+	 * Light-mode values for browsers without light-dark() (Safari < 17.5,
+	 * Chrome < 123). Must mirror the light values above.
+	 */
+	@supports not (color: light-dark(#000, #fff)) {
+		:root {
+			color-scheme: light;
+			--color-bg: #fafafa;
+			--color-text: #1a1a1a;
+			--color-muted: #6b7280;
+			--color-border: #e5e7eb;
+			--color-surface: #ffffff;
+			--color-brand: #7c3aed;
+			--color-danger: #dc2626;
+		}
+	}
+}
diff --git a/starter-cloudflare/.agents/skills/creating-plugins/references/admin-ui.md b/starter-cloudflare/.agents/skills/creating-plugins/references/admin-ui.md
index e2289e1..9e26b8d 100644
--- a/starter-cloudflare/.agents/skills/creating-plugins/references/admin-ui.md
+++ b/starter-cloudflare/.agents/skills/creating-plugins/references/admin-ui.md
@@ -12,7 +12,7 @@ import { SettingsPage } from "./components/SettingsPage";
 import { ReportsPage } from "./components/ReportsPage";
 import { StatusWidget } from "./components/StatusWidget";
 
-// Pages keyed by path (must match admin.pages paths)
+// Pages keyed by path (trailing slash optional, so /settings and /settings/ both resolve)
 export const pages = {
 	"/settings": SettingsPage,
 	"/reports": ReportsPage,
diff --git a/starter-cloudflare/.agents/skills/creating-plugins/references/api-routes.md b/starter-cloudflare/.agents/skills/creating-plugins/references/api-routes.md
index c4d2419..8ecf112 100644
--- a/starter-cloudflare/.agents/skills/creating-plugins/references/api-routes.md
+++ b/starter-cloudflare/.agents/skills/creating-plugins/references/api-routes.md
@@ -175,7 +175,9 @@ routes: {
 	},
 	"settings/save": {
 		handler: async (ctx) => {
-			const input = await ctx.request.json();
+			// EmDash parses the request body once and exposes it as ctx.input.
+			// Don't call ctx.request.json() — the body stream is already consumed.
+			const input = ctx.input as Record<string, unknown>;
 			for (const [key, value] of Object.entries(input)) {
 				if (value !== undefined) await ctx.kv.set(`settings:${key}`, value);
 			}
diff --git a/starter-cloudflare/.agents/skills/creating-plugins/references/block-kit.md b/starter-cloudflare/.agents/skills/creating-plugins/references/block-kit.md
index 397505b..5354e91 100644
--- a/starter-cloudflare/.agents/skills/creating-plugins/references/block-kit.md
+++ b/starter-cloudflare/.agents/skills/creating-plugins/references/block-kit.md
@@ -16,10 +16,16 @@ Block Kit elements are also used for [Portable Text block editing fields](./port
 6. Plugin returns new blocks
 
 ```typescript
+import type { BlockInteraction } from "@emdash-cms/blocks";
+
 routes: {
 	admin: {
 		handler: async (ctx) => {
-			const interaction = await ctx.request.json();
+			// EmDash parses the request body once and exposes it as ctx.input;
+			// read it directly rather than ctx.request.json() (the body is consumed).
+			// BlockInteraction is the discriminated union of page_load,
+			// block_action, and form_submit payloads.
+			const interaction = ctx.input as BlockInteraction;
 
 			if (interaction.type === "page_load") {
 				return {
diff --git a/starter-cloudflare/package.json b/starter-cloudflare/package.json
index 4610beb..0d8a9e2 100644
--- a/starter-cloudflare/package.json
+++ b/starter-cloudflare/package.json
@@ -16,9 +16,9 @@
   "dependencies": {
     "@astrojs/cloudflare": "^14.0.0",
     "@astrojs/react": "^6.0.0",
-    "@emdash-cms/cloudflare": "^0.27.0",
+    "@emdash-cms/cloudflare": "^0.28.1",
     "astro": "^7.0.0",
-    "emdash": "^0.27.0",
+    "emdash": "^0.28.1",
     "react": "19.2.4",
     "react-dom": "19.2.4"
   },
diff --git a/starter/.agents/skills/creating-plugins/references/admin-ui.md b/starter/.agents/skills/creating-plugins/references/admin-ui.md
index e2289e1..9e26b8d 100644
--- a/starter/.agents/skills/creating-plugins/references/admin-ui.md
+++ b/starter/.agents/skills/creating-plugins/references/admin-ui.md
@@ -12,7 +12,7 @@ import { SettingsPage } from "./components/SettingsPage";
 import { ReportsPage } from "./components/ReportsPage";
 import { StatusWidget } from "./components/StatusWidget";
 
-// Pages keyed by path (must match admin.pages paths)
+// Pages keyed by path (trailing slash optional, so /settings and /settings/ both resolve)
 export const pages = {
 	"/settings": SettingsPage,
 	"/reports": ReportsPage,
diff --git a/starter/.agents/skills/creating-plugins/references/api-routes.md b/starter/.agents/skills/creating-plugins/references/api-routes.md
index c4d2419..8ecf112 100644
--- a/starter/.agents/skills/creating-plugins/references/api-routes.md
+++ b/starter/.agents/skills/creating-plugins/references/api-routes.md
@@ -175,7 +175,9 @@ routes: {
 	},
 	"settings/save": {
 		handler: async (ctx) => {
-			const input = await ctx.request.json();
+			// EmDash parses the request body once and exposes it as ctx.input.
+			// Don't call ctx.request.json() — the body stream is already consumed.
+			const input = ctx.input as Record<string, unknown>;
 			for (const [key, value] of Object.entries(input)) {
 				if (value !== undefined) await ctx.kv.set(`settings:${key}`, value);
 			}
diff --git a/starter/.agents/skills/creating-plugins/references/block-kit.md b/starter/.agents/skills/creating-plugins/references/block-kit.md
index 397505b..5354e91 100644
--- a/starter/.agents/skills/creating-plugins/references/block-kit.md
+++ b/starter/.agents/skills/creating-plugins/references/block-kit.md
@@ -16,10 +16,16 @@ Block Kit elements are also used for [Portable Text block editing fields](./port
 6. Plugin returns new blocks
 
 ```typescript
+import type { BlockInteraction } from "@emdash-cms/blocks";
+
 routes: {
 	admin: {
 		handler: async (ctx) => {
-			const interaction = await ctx.request.json();
+			// EmDash parses the request body once and exposes it as ctx.input;
+			// read it directly rather than ctx.request.json() (the body is consumed).
+			// BlockInteraction is the discriminated union of page_load,
+			// block_action, and form_submit payloads.
+			const interaction = ctx.input as BlockInteraction;
 
 			if (interaction.type === "page_load") {
 				return {
diff --git a/starter/package.json b/starter/package.json
index e13dd3b..5262061 100644
--- a/starter/package.json
+++ b/starter/package.json
@@ -18,7 +18,7 @@
     "@astrojs/react": "^6.0.0",
     "astro": "^7.0.0",
     "better-sqlite3": "^12.8.0",
-    "emdash": "^0.27.0",
+    "emdash": "^0.28.1",
     "react": "19.2.4",
     "react-dom": "19.2.4"
   },