@growth-labs/cms 0.5.25 → 0.5.27

package/src/ui/screens/EditorScreen.tsx

@@ -58,12 +58,20 @@ const CONTENT_TYPE_LABELS: Record<ContentType, string> = {
 
 const STATUS_PILL_COLORS: Record<ContentStatus, string> = {
 	draft: 'var(--ink-faint)',
-	review: '#a78bfa',
-	scheduled: '#60a5fa',
-	published: '#34d399',
+	review: 'var(--amber)',
+	scheduled: 'var(--accent)',
+	published: 'var(--green)',
 	archived: 'var(--ink-faint)',
 }
 
+export function editorStatusColor(status: ContentStatus): string {
+	return STATUS_PILL_COLORS[status]
+}
+
+export function editorStatusBackground(status: ContentStatus): string {
+	return `color-mix(in srgb, ${editorStatusColor(status)} 14%, transparent)`
+}
+
 // ---------------------------------------------------------------------------
 // EditorScreen
 // ---------------------------------------------------------------------------
@@ -503,8 +511,8 @@ function statusPill(status: ContentStatus): React.CSSProperties {
 		fontWeight: 600,
 		letterSpacing: '0.06em',
 		textTransform: 'uppercase',
-		background: `${STATUS_PILL_COLORS[status]}22`,
-		color: STATUS_PILL_COLORS[status],
+		background: editorStatusBackground(status),
+		color: editorStatusColor(status),
 		flexShrink: 0,
 	}
 }
@@ -526,10 +534,10 @@ const headerBar: React.CSSProperties = {
 	display: 'flex',
 	alignItems: 'center',
 	justifyContent: 'space-between',
-	height: 48,
-	padding: '0 16px',
+	height: 58,
+	padding: '0 20px',
 	borderBottom: '1px solid var(--border)',
-	background: 'var(--panel)',
+	background: 'var(--surface-raised-nav)',
 	flexShrink: 0,
 	gap: 12,
 }
@@ -661,7 +669,7 @@ const formArea: React.CSSProperties = {
 }
 
 const inspectorSlot: React.CSSProperties = {
-	flex: '0 0 340px',
+	flex: '0 0 296px',
 	borderLeft: '1px solid var(--border)',
 	display: 'flex',
 	flexDirection: 'column',

package/src/ui/screens/LibraryScreen.tsx

@@ -753,7 +753,10 @@ function ListRow({
 						>
 							{row.title || '(Untitled)'}
 							{row.featured && (
-								<span title="Premium" style={{ color: 'var(--gold)', flex: 'none' }}>
+								<span
+									title="Premium"
+									style={{ color: 'var(--accent-primary-strong)', flex: 'none' }}
+								>
 									<Icon name="star" size={13} />
 								</span>
 							)}
@@ -1064,7 +1067,7 @@ function BoardCard({
 					{row.updatedAt ? formatDate(row.updatedAt) : (row.authorName ?? '—')}
 				</span>
 				{row.featured && (
-					<span style={{ marginLeft: 'auto', color: 'var(--gold)' }}>
+					<span style={{ marginLeft: 'auto', color: 'var(--accent-primary-strong)' }}>
 						<Icon name="star" size={12} />
 					</span>
 				)}

package/src/ui/screens/SettingsScreen.tsx

@@ -375,7 +375,7 @@ function GeneralSettings({
 // Branding settings
 // ---------------------------------------------------------------------------
 
-const ACCENT_PRESETS = ['#0c4a6e', '#b23a2e', '#1f6b4a', '#5b4bc4', '#374151']
+const ACCENT_PRESETS = ['#2F6FBD', '#1FA3A8', '#2CA8E0', '#8075ED', '#F56A61']
 const TYPEFACE_OPTIONS = ['serif', 'Source Serif 4', 'Spectral', 'Newsreader', 'Inter']
 
 function BrandingSettings({

package/src/ui/screens/SubscriptionsScreen.tsx

@@ -1310,7 +1310,7 @@ function KpiCard({
 // PlanMixChart — stacked bar + legend rows (aside panel)
 // ---------------------------------------------------------------------------
 
-const PLAN_DOT_COLORS = ['#1f6b4a', '#0c4a6e', '#5b4bc4', '#8c6d14', '#475569']
+const PLAN_DOT_COLORS = ['#1FA3A8', '#2F6FBD', '#8075ED', '#F7A34B', '#4D4D4D']
 
 function PlanMixChart({
 	planMix,
@@ -1746,7 +1746,7 @@ function initialsFor(email: string): string {
 	return local.slice(0, 2).toUpperCase()
 }
 
-const AVATAR_COLORS = ['#0c4a6e', '#1f6b4a', '#5b4bc4', '#8c6d14', '#075985', '#475569']
+const AVATAR_COLORS = ['#2F6FBD', '#1FA3A8', '#8075ED', '#F7A34B', '#2CA8E0', '#4D4D4D']
 
 function avatarColor(seed: string): string {
 	let h = 0

package/src/ui/screens/analytics-data.ts

@@ -24,14 +24,28 @@ function providerStatus(value: unknown): ProviderStatus {
 	return value === 'live' || value === 'partial' || value === 'empty' ? value : 'empty'
 }
 
+function normalizeSources(value: unknown): Record<string, string> | undefined {
+	if (!value || typeof value !== 'object' || Array.isArray(value)) return undefined
+	const out: Record<string, string> = {}
+	for (const [key, label] of Object.entries(value as Record<string, unknown>)) {
+		if (typeof label === 'string' && label.length > 0) out[key] = label
+	}
+	return Object.keys(out).length > 0 ? out : undefined
+}
+
 function normalizeObjectResult(result: unknown): ProviderResult<Record<string, number | null>> {
 	if (!result || typeof result !== 'object') return { status: 'empty', data: {} }
-	const record = result as { status?: unknown; data?: unknown }
+	const record = result as { status?: unknown; data?: unknown; sources?: unknown }
 	const data =
 		record.data && typeof record.data === 'object' && !Array.isArray(record.data)
 			? (record.data as Record<string, number | null>)
 			: {}
-	return { status: providerStatus(record.status), data }
+	const sources = normalizeSources(record.sources)
+	return {
+		status: providerStatus(record.status),
+		data,
+		...(sources ? { sources } : {}),
+	}
 }
 
 function normalizeArrayResult<T>(result: unknown): ProviderResult<T[]> {

package/src/ui/styles/broadsheet.css

@@ -1,99 +1,54 @@
-/* ============================================================
-   BROADSHEET — publishing platform UI
-   Rooted in Fronts DNA: Source Serif 4 display, DM Sans UI,
-   DM Mono micro-labels, navy + gold. Its own product identity.
-   ============================================================ */
+/* Masthead CMS compatibility layer — Growth Labs visual contract.
+ * Keep the established class vocabulary; all visual decisions resolve through
+ * growth-labs-tokens.css, imported first by ui/client/mount.tsx. */
 
 :root {
-  /* Brand constants (shared across themes) */
-  --gold: #b8941b;
-  --gold-soft: #d4b88a;
-  --premium: #8c6d14;
-
-  /* Accent — overridden live by Tweaks (JS sets these). Default ink-blue. */
-  --accent: #0c4a6e;
-  --accent-strong: #075985;
-  --accent-fg: #ffffff;
-  --accent-tint: rgba(12, 74, 110, 0.08);
-  --accent-ring: rgba(12, 74, 110, 0.35);
-
-  /* Type */
-  --serif: "Source Serif 4", Georgia, serif;
-  --ui: "DM Sans", system-ui, sans-serif;
-  --mono: "DM Mono", ui-monospace, monospace;
-
-  /* Density scale (overridden by [data-density]) */
+  --accent: var(--accent-cta);
+  --accent-strong: var(--accent-cta-active);
+  --accent-fg: var(--gl-white);
+  --accent-tint: color-mix(in srgb, var(--accent-primary) 14%, transparent);
+  --accent-ring: var(--focus-ring);
+  --serif: var(--font-display);
+  --ui: var(--font-body);
+  --mono: var(--font-mono);
+
   --row-h: 44px;
   --pad: 16px;
   --gap: 16px;
-  --radius: 10px;
-  --radius-sm: 7px;
+  --radius: var(--radius-none);
+  --legacy-radius-sm: var(--radius-control);
+  --bg: var(--surface-page);
+  --panel: var(--surface-card);
+  --panel-2: var(--surface-muted);
+  --sidebar: var(--surface-nav);
+  --sidebar-deep: var(--surface-inverse);
+  --ink: var(--text-strong);
+  --ink-soft: var(--text-primary);
+  --ink-muted: var(--text-secondary);
+  --ink-faint: var(--text-muted);
+  --border: var(--border-default);
+  --border-soft: color-mix(in srgb, var(--border-default) 42%, transparent);
+  --hairline: var(--border-default);
+  --hover: var(--surface-muted);
+  --field: var(--surface-card);
+  --field-border: var(--border-default);
+  --shadow-sm: var(--shadow-faint);
+  --shadow-md: var(--shadow-card);
+  --shadow-lg: var(--shadow-raised);
+  --green: var(--accent-primary-strong);
+  --green-tint: color-mix(in srgb, var(--accent-primary) 16%, transparent);
+  --amber: color-mix(in srgb, var(--gl-orange) 72%, var(--text-strong));
+  --amber-tint: color-mix(in srgb, var(--gl-orange) 18%, transparent);
+  --red: var(--gl-coral);
+  --red-tint: color-mix(in srgb, var(--gl-coral) 14%, transparent);
+  --blue-tint: color-mix(in srgb, var(--accent-secondary) 16%, transparent);
+  --violet: var(--gl-violet);
+  --violet-tint: color-mix(in srgb, var(--gl-violet) 16%, transparent);
 }
 
 [data-density="compact"] { --row-h: 38px; --pad: 12px; --gap: 12px; }
 [data-density="comfy"]   { --row-h: 52px; --pad: 22px; --gap: 22px; }
 
-/* ---------- LIGHT (default) ---------- */
-:root,
-[data-theme="light"] {
-  --bg: #f7f5f1;
-  --panel: #ffffff;
-  --panel-2: #fbfaf7;
-  --sidebar: #ffffff;
-  --sidebar-deep: #11151b;
-  --ink: #1a2332;
-  --ink-soft: #4a5562;
-  --ink-muted: #79828f;
-  --ink-faint: #a7adb6;
-  --border: #e7e2d9;
-  --border-soft: #efebe3;
-  --hairline: #ddd7cc;
-  --hover: #f3f0ea;
-  --field: #ffffff;
-  --field-border: #d9d3c8;
-  --shadow-sm: 0 1px 2px rgba(26, 35, 50, 0.06);
-  --shadow-md: 0 8px 24px rgba(26, 35, 50, 0.10);
-  --shadow-lg: 0 20px 60px rgba(26, 35, 50, 0.18);
-  --green: #1d7a4d;
-  --green-tint: #e4f3ea;
-  --amber: #9a6a00;
-  --amber-tint: #f8eed5;
-  --red: #c0392b;
-  --red-tint: #f8e4e1;
-  --blue-tint: #e6eef5;
-  color-scheme: light;
-}
-
-/* ---------- DARK ---------- */
-[data-theme="dark"] {
-  --bg: #0c0f14;
-  --panel: #14181f;
-  --panel-2: #11151b;
-  --sidebar: #0b0e12;
-  --sidebar-deep: #07090c;
-  --ink: #e9ecf1;
-  --ink-soft: #aeb6c2;
-  --ink-muted: #79828f;
-  --ink-faint: #565f6c;
-  --border: #232a34;
-  --border-soft: #1b212a;
-  --hairline: #2a323d;
-  --hover: #1a202a;
-  --field: #11151b;
-  --field-border: #2c343f;
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
-  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
-  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.6);
-  --green: #4ec98a;
-  --green-tint: rgba(78, 201, 138, 0.14);
-  --amber: #e0b65a;
-  --amber-tint: rgba(224, 182, 90, 0.14);
-  --red: #ef6e62;
-  --red-tint: rgba(239, 110, 98, 0.14);
-  --blue-tint: rgba(76, 154, 232, 0.14);
-  color-scheme: dark;
-}
-
 * { box-sizing: border-box; }
 
 html, body {
@@ -111,12 +66,22 @@ html, body {
 button { font-family: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; background: none; border: 0; color: inherit; }
 input, textarea, select { font-family: inherit; }
 ::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }
+button:focus-visible,
+[role="button"]:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible,
+a:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+  box-shadow: var(--shadow-glow);
+}
 
 /* Scrollbars */
 *::-webkit-scrollbar { width: 11px; height: 11px; }
 *::-webkit-scrollbar-thumb {
   background: color-mix(in srgb, var(--ink) 18%, transparent);
-  border-radius: 8px;
+  border-radius: var(--radius-pill);
   border: 3px solid transparent;
   background-clip: padding-box;
 }
@@ -127,28 +92,27 @@ input, textarea, select { font-family: inherit; }
 .serif { font-family: var(--serif); }
 .mono { font-family: var(--mono); }
 .kicker {
-  font-family: var(--mono);
-  font-size: 11px;
-  font-weight: 500;
-  letter-spacing: 0.14em;
+  font-family: var(--font-body);
+  font-size: 10.5px;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: var(--tracking-eyebrow);
   text-transform: uppercase;
   color: var(--ink-muted);
 }
 .tnum { font-variant-numeric: tabular-nums; }
 
-/* The signature Broadsheet "masthead rule": a hairline above a heavier rule */
+/* Legacy class retained as a single Growth Labs semantic separator. */
 .masthead-rule {
   border: 0;
-  height: 3px;
-  border-top: 1px solid var(--hairline);
-  border-bottom: 2px solid var(--ink);
-  background: transparent;
+  height: 1px;
+  background: var(--border-soft);
 }
 
 /* ---------- App shell ---------- */
 .app {
   display: grid;
-  grid-template-columns: var(--sb-w, 248px) 1fr;
+  grid-template-columns: var(--sb-w, 224px) 1fr;
   height: 100%;
   overflow: hidden;
   transition: grid-template-columns 0.22s ease;
@@ -163,29 +127,29 @@ input, textarea, select { font-family: inherit; }
   flex-direction: column;
   min-height: 0;
   position: relative;
+  padding: 20px 14px;
+  gap: 20px;
 }
 .sb-brand {
   display: flex; align-items: center; gap: 11px;
-  padding: 18px 18px 14px;
+  padding: 2px 8px;
 }
 .sb-mark {
-  width: 30px; height: 30px; flex: none;
-  border-radius: 8px;
-  background: var(--ink);
-  color: #fff;
+  width: 22px; height: 22px; flex: none;
+  border-radius: var(--radius-control);
+  background: var(--gl-gradient);
+  color: var(--gl-white);
   display: grid; place-items: center;
 }
-[data-theme="dark"] .sb-mark { background: var(--accent); }
-.sb-wordmark { font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); }
-.sb-wordmark .dot { color: var(--accent); }
+.sb-wordmark { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
 
 .site-switch {
-  margin: 2px 12px 10px;
+  margin: 0 6px;
   display: flex; align-items: center; gap: 9px;
   padding: 8px 10px;
   border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--panel-2);
+  border-radius: var(--radius-control);
+  background: var(--panel);
   cursor: pointer;
   transition: border-color .15s, background .15s;
 }
@@ -194,27 +158,23 @@ input, textarea, select { font-family: inherit; }
 .site-name { font-size: 13px; font-weight: 600; color: var(--ink); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .site-meta { font-size: 11px; color: var(--ink-muted); }
 
-.nav-section { padding: 6px 12px; }
+.nav-section { padding: 0; }
 .nav-label {
-  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
+  font-family: var(--font-body); font-size: 10.5px; font-weight: 700; letter-spacing: var(--tracking-eyebrow);
   text-transform: uppercase; color: var(--ink-faint);
-  padding: 10px 10px 6px;
+  padding: 0 10px 8px;
 }
 .nav-item {
-  display: flex; align-items: center; gap: 11px;
-  padding: 8px 10px; border-radius: var(--radius-sm);
-  color: var(--ink-soft); font-size: 13.5px; font-weight: 500;
+  width: 100%; display: flex; align-items: center; gap: 10px;
+  padding: 8px 10px; border-radius: var(--radius-control);
+  color: var(--ink-soft); font-family: var(--font-display); font-size: 13.5px; font-weight: 500;
   cursor: pointer; user-select: none;
   transition: background .12s, color .12s;
   position: relative;
 }
 .nav-item:hover { background: var(--hover); color: var(--ink); }
-.nav-item.active { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
-[data-theme="dark"] .nav-item.active { color: var(--ink); }
-.nav-item.active::before {
-  content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
-  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--accent);
-}
+.nav-item.active { background: color-mix(in srgb, var(--accent-primary) 14%, transparent); color: var(--ink); font-weight: 600; }
+.nav-item.active .ni-icon { color: var(--accent-primary-strong); }
 .nav-item .ni-icon { flex: none; color: currentColor; opacity: .9; }
 .nav-item .ni-count {
   margin-left: auto; font-family: var(--mono); font-size: 11px;
@@ -230,13 +190,13 @@ input, textarea, select { font-family: inherit; }
 [data-collapsed="true"] .sb-wordmark { display: none; }
 [data-collapsed="true"] .site-switch { justify-content: center; padding: 8px; }
 
-.sb-foot { margin-top: auto; padding: 12px; border-top: 1px solid var(--border); }
-.sb-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; }
+.sb-foot { margin-top: auto; padding: 0; border-top: 1px solid var(--border-soft); }
+.sb-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--legacy-radius-sm); cursor: pointer; }
 .sb-user:hover { background: var(--hover); }
 .avatar {
-  width: 30px; height: 30px; border-radius: 50%; flex: none;
-  display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff;
-  font-family: var(--ui);
+  width: 28px; height: 28px; border-radius: var(--radius-circle); flex: none;
+  display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--text-on-inverse);
+  font-family: var(--font-display);
 }
 
 /* ---------- Main column ---------- */
@@ -244,70 +204,73 @@ input, textarea, select { font-family: inherit; }
 .topbar {
   height: 58px; flex: none;
   display: flex; align-items: center; gap: 14px;
-  padding: 0 22px;
+  padding: 0 20px;
   border-bottom: 1px solid var(--border);
-  background: color-mix(in srgb, var(--bg) 86%, transparent);
-  backdrop-filter: blur(8px);
+  background: var(--surface-raised-nav);
+  backdrop-filter: var(--blur-panel);
   position: sticky; top: 0; z-index: 20;
 }
 .icon-btn {
-  width: 34px; height: 34px; flex: none; border-radius: 8px;
+  width: 34px; height: 34px; flex: none; border-radius: var(--radius-control);
   border: 1px solid transparent; background: transparent; color: var(--ink-soft);
   display: grid; place-items: center; transition: background .12s, color .12s, border-color .12s;
 }
 .icon-btn:hover { background: var(--hover); color: var(--ink); }
+.notification-dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: var(--radius-circle); background: var(--gl-coral); border: 1.5px solid var(--surface-raised-nav); }
+.topbar-divider { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
 
 .search {
   flex: 1; max-width: 460px;
   display: flex; align-items: center; gap: 9px;
   height: 36px; padding: 0 12px;
-  background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px;
+  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-control);
   color: var(--ink-muted); font-size: 13px;
 }
 .search input { border: 0; background: transparent; outline: none; color: var(--ink); flex: 1; font-size: 13px; }
 .search .kbd {
   font-family: var(--mono); font-size: 10px; color: var(--ink-muted);
-  border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px;
+  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1px 6px;
 }
 
 .scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
-.page { padding: 26px 30px 60px; max-width: 1280px; margin: 0 auto; }
+.page { padding: 28px 32px 60px; max-width: 1280px; margin: 0 auto; }
 .page-wide { max-width: none; }
 
 .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
-.page-title { font-family: var(--serif); font-weight: 600; font-size: 30px; letter-spacing: -0.02em; color: var(--ink); margin: 0; line-height: 1.05; }
-.page-sub { color: var(--ink-muted); font-size: 13.5px; margin-top: 6px; }
+.page-title { font-family: var(--font-display); font-weight: 600; font-size: 27px; letter-spacing: -0.01em; color: var(--ink); margin: 0; line-height: 1.15; }
+.page-sub { color: var(--ink-muted); font-size: 13px; line-height: 1.4; margin-top: 4px; }
+.shell-state { padding: 40px; color: var(--ink-muted); }
+.shell-error-detail { margin-top: 16px; padding: 12px; font-size: 12px; color: var(--red); white-space: pre-wrap; word-break: break-word; background: var(--red-tint); border: 1px solid color-mix(in srgb, var(--red) 25%, transparent); border-radius: var(--radius-control); }
+.editor-document { width: min(780px, calc(100% - 80px)); margin: 30px auto 0; padding: 44px 90px; box-sizing: border-box; background: var(--surface-card); border: 1px solid var(--border-default); box-shadow: var(--shadow-card); }
 
 /* ---------- Buttons ---------- */
 .btn {
   display: inline-flex; align-items: center; gap: 8px; justify-content: center;
-  height: 36px; padding: 0 15px; border-radius: 9px;
-  font-size: 13px; font-weight: 600; border: 1px solid var(--field-border);
+  height: 36px; padding: 0 14px; border-radius: var(--radius-control);
+  font-family: var(--font-display); font-size: 13px; font-weight: 600; border: 1px solid var(--field-border);
   background: var(--panel); color: var(--ink); transition: all .13s ease;
   white-space: nowrap;
 }
 .btn:hover { background: var(--hover); border-color: var(--hairline); }
-.btn.sm { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
+.btn.sm { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: var(--radius-control); }
 .btn.lg { height: 42px; padding: 0 20px; font-size: 14px; }
 .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
-.btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
+.btn.primary:hover { background: var(--accent-cta-hover); border-color: var(--accent-cta-hover); }
 .btn.ghost { background: transparent; border-color: transparent; }
 .btn.ghost:hover { background: var(--hover); }
-.btn.gold { background: var(--gold); border-color: var(--gold); color: #1a1402; }
-.btn.gold:hover { filter: brightness(1.06); }
 .btn.danger { color: var(--red); border-color: transparent; background: transparent; }
 .btn.danger:hover { background: var(--red-tint); }
 
 /* ---------- Panels / cards ---------- */
-.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
+.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-none); box-shadow: var(--shadow-card); }
 .panel-pad { padding: var(--pad); }
-.card-title { font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--ink); letter-spacing: -0.01em; }
+.card-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--ink); }
 
 /* ---------- Status pills ---------- */
 .pill {
   display: inline-flex; align-items: center; gap: 6px;
   font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em;
-  text-transform: uppercase; padding: 3px 9px; border-radius: 20px;
+  text-transform: uppercase; padding: 3px 9px; border-radius: var(--radius-pill);
   border: 1px solid transparent; white-space: nowrap;
 }
 .pill .pdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
@@ -315,7 +278,7 @@ input, textarea, select { font-family: inherit; }
 .pill.draft { color: var(--ink-muted); background: var(--hover); }
 .pill.review { color: var(--amber); background: var(--amber-tint); }
 .pill.scheduled { color: var(--accent); background: var(--accent-tint); }
-.pill.processing { color: var(--amber); background: var(--amber-tint); }
+.pill.processing { color: var(--violet); background: var(--violet-tint); }
 
 .type-tag {
   display: inline-flex; align-items: center; gap: 6px;
@@ -325,8 +288,8 @@ input, textarea, select { font-family: inherit; }
 /* ---------- Tables ---------- */
 .tbl { width: 100%; border-collapse: collapse; }
 .tbl thead th {
-  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
-  color: var(--ink-muted); font-weight: 500; text-align: left;
+  font-family: var(--font-body); font-size: 10.5px; line-height: 1; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
+  color: var(--ink-muted); font-weight: 700; text-align: left;
   padding: 0 14px 11px; border-bottom: 1px solid var(--border);
 }
 .tbl tbody td { padding: 13px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
@@ -339,7 +302,7 @@ input, textarea, select { font-family: inherit; }
 .field-label .req { color: var(--red); }
 .input, .textarea, .selectbox {
   width: 100%; background: var(--field); border: 1px solid var(--field-border);
-  border-radius: var(--radius-sm); color: var(--ink); font-size: 14px;
+  border-radius: var(--legacy-radius-sm); color: var(--ink); font-size: 14px;
   padding: 10px 12px; outline: none; transition: border-color .14s, box-shadow .14s;
 }
 .input:focus, .textarea:focus, .selectbox:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
@@ -348,13 +311,13 @@ input, textarea, select { font-family: inherit; }
 .help { font-size: 12px; color: var(--ink-muted); margin-top: 6px; line-height: 1.5; }
 
 /* segmented control */
-.seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px; padding: 3px; gap: 2px; }
+.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 0; gap: 0; overflow: hidden; }
 .seg button {
   border: 0; background: transparent; color: var(--ink-muted); font-size: 12.5px; font-weight: 600;
-  padding: 6px 13px; border-radius: 6px; transition: all .12s; display: inline-flex; align-items: center; gap: 7px;
+  padding: 8px 13px; border-radius: 0; transition: all .12s; display: inline-flex; align-items: center; gap: 7px;
 }
-.seg button.on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-sm); }
-[data-theme="dark"] .seg button.on { background: var(--hover); }
+.seg button.on { background: var(--surface-inverse); color: var(--text-on-dark); box-shadow: none; }
+[data-theme="dark"] .seg button.on { background: var(--surface-inverse); color: var(--surface-page); }
 
 /* ---------- Misc ---------- */
 .divider { height: 1px; background: var(--border); border: 0; margin: var(--gap) 0; }
@@ -367,10 +330,22 @@ input, textarea, select { font-family: inherit; }
   .grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .grid-split, .grid-split-wide { grid-template-columns: 1fr; }
 }
+@media (max-width: 900px) {
+  .editor-document { width: calc(100% - 40px); padding: 32px; }
+}
+@media (max-width: 720px) {
+  .page { padding: 20px 16px 48px; }
+  .page-head { align-items: flex-start; flex-direction: column; }
+  .grid-stats { grid-template-columns: 1fr; }
+  .topbar { padding: 0 12px; gap: 8px; }
+  .topbar .search { max-width: none; }
+  .topbar .search input, .topbar .search .kbd { display: none; }
+  .editor-document { width: calc(100% - 24px); margin-top: 16px; padding: 20px; }
+}
 .tag-chip {
   display: inline-flex; align-items: center; gap: 6px;
   font-size: 12px; color: var(--ink-soft); background: var(--panel-2);
-  border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px;
+  border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px 10px;
 }
 .tag-chip .x { color: var(--ink-faint); }
 .tag-chip .x:hover { color: var(--red); }
@@ -406,16 +381,16 @@ input, textarea, select { font-family: inherit; }
 
 /* ── Typed editorial blocks (Phase 1) ──────────────────────────────────── */
 .ProseMirror div[data-callout] { border-left: 3px solid var(--accent); background: var(--panel-2); border-radius: 6px; padding: 10px 14px; margin: 1em 0; }
-.ProseMirror div[data-callout][data-tone="warning"], .ProseMirror div[data-callout][data-tone="caution"] { border-left-color: #b45309; }
-.ProseMirror div[data-callout][data-tone="tip"] { border-left-color: #15803d; }
-.ProseMirror div[data-callout][data-tone="important"] { border-left-color: #7c3aed; }
+.ProseMirror div[data-callout][data-tone="warning"], .ProseMirror div[data-callout][data-tone="caution"] { border-left-color: var(--gl-orange); }
+.ProseMirror div[data-callout][data-tone="tip"] { border-left-color: var(--accent-primary-strong); }
+.ProseMirror div[data-callout][data-tone="important"] { border-left-color: var(--gl-violet); }
 .ProseMirror figure[data-pull-quote] { border-left: 3px solid var(--ink-faint); margin: 1.5em 0; padding: 4px 18px; font-size: 1.15em; font-style: italic; color: var(--ink-soft); }
 .ProseMirror figure[data-pull-quote][data-attribution]::after { content: "— " attr(data-attribution); display: block; font-size: 0.8em; font-style: normal; color: var(--ink-faint); margin-top: 6px; }
 .ProseMirror div[data-generated-faq] { border: 1px dashed var(--border); border-radius: 6px; padding: 8px 12px; margin: 1em 0; color: var(--ink-faint); font-size: 0.85em; user-select: none; }
 .ProseMirror a[data-citation] { text-decoration: underline dotted; color: var(--accent); }
 
 /* ── Slash menu + drag handle ─────────────────────────────────────────── */
-.slash-menu { position: absolute; z-index: 90; min-width: 240px; max-height: 320px; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); padding: 4px; }
+.slash-menu { position: absolute; z-index: 90; min-width: 240px; max-height: 320px; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-control); box-shadow: var(--shadow-raised); padding: 4px; }
 .slash-menu-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 6px 10px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; text-align: left; }
 .slash-menu-item.is-selected, .slash-menu-item:hover { background: var(--hover); }
 .slash-menu-title { font-size: 13px; font-weight: 600; color: var(--ink); }