@dorsk/tsumikit 0.77.0 → 0.79.0

package/dist/components/layouts/ResizablePanel.svelte

@@ -401,8 +401,8 @@
 		min-width: 0;
 		min-height: 0;
 		width: var(--panel-current-width);
-		background: var(--bg-elevated);
-		border-right: 1px solid var(--border);
+		background: var(--surface-fill);
+		border-right: var(--edge-width) solid var(--surface-edge);
 		transition:
 			width var(--dur-base) var(--ease),
 			box-shadow var(--dur-base) var(--ease);
@@ -414,7 +414,7 @@
 		grid-column: 2;
 		grid-row: 1;
 		border-right: 0;
-		border-left: 1px solid var(--border);
+		border-left: var(--edge-width) solid var(--surface-edge);
 	}
 	.main {
 		min-width: 0;
@@ -449,7 +449,7 @@
 		font: inherit;
 		font-size: var(--icon-sm);
 		background: transparent;
-		border: 1px solid transparent;
+		border: var(--edge-width) solid transparent;
 		border-radius: var(--r-sm);
 		cursor: pointer;
 		transition:
@@ -475,7 +475,7 @@
 		.collapse-control:hover {
 			color: var(--text);
 			background: var(--bg-elevated-2);
-			border-color: var(--border);
+			border-color: var(--surface-edge);
 		}
 	}
 	.collapse-control:focus-visible,
@@ -547,7 +547,7 @@
 			left: 0;
 			z-index: 1;
 			width: min(var(--panel-current-width), 85cqw);
-			box-shadow: var(--shadow-md);
+			box-shadow: var(--raised-shadow);
 		}
 		.right .panel {
 			right: 0;
@@ -581,7 +581,7 @@
 		left: 0;
 		z-index: var(--z-drawer);
 		width: min(var(--panel-current-width), 100%);
-		box-shadow: var(--shadow-md);
+		box-shadow: var(--raised-shadow);
 		outline: none;
 		animation: panel-slide-left var(--dur-base) var(--ease);
 	}

package/dist/components/layouts/TabBar.svelte

@@ -144,8 +144,8 @@
 <style>
 	.tabbar {
 		min-width: 0;
-		background: var(--bg-elevated);
-		border-top: 1px solid var(--border);
+		background: var(--surface-fill);
+		border-top: var(--edge-width) solid var(--surface-edge);
 	}
 	.bar {
 		position: fixed;

package/dist/components/molecules/Accordion.svelte

@@ -124,7 +124,7 @@
 
 <style>
 	.accordion {
-		border: 1px solid var(--border);
+		border: var(--edge-width) solid var(--surface-edge);
 		border-radius: var(--r-lg);
 		overflow: hidden;
 	}
@@ -133,7 +133,7 @@
 		border-radius: 0;
 	}
 	.accordion > :global(.acc-item + .acc-item) {
-		border-top: 1px solid var(--border);
+		border-top: var(--edge-width) solid var(--surface-edge);
 	}
 	.acc-title {
 		min-width: 0;

package/dist/components/molecules/AttachmentList.svelte

@@ -317,7 +317,7 @@
 		right: -0.35em;
 		min-width: 1.4em;
 		padding: 0.1em 0.3em;
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--surface-edge-strong);
 		border-radius: var(--r-pill);
 		background: var(--bg);
 		color: var(--text);
@@ -326,7 +326,7 @@
 	.preview {
 		display: block;
 		padding: 0;
-		border: 1px solid var(--border);
+		border: var(--edge-width) solid var(--surface-edge);
 		border-radius: var(--r-md);
 		background: none;
 		cursor: pointer;

package/dist/components/molecules/Callout.svelte

@@ -90,19 +90,19 @@
 		gap: var(--sp-3);
 		padding: var(--sp-3);
 	}
-	:global(.callout-ok) {
+	:global(.card.callout-ok) {
 		--callout-tone: var(--ok);
 	}
-	:global(.callout-warn) {
+	:global(.card.callout-warn) {
 		--callout-tone: var(--warn);
 	}
-	:global(.callout-danger) {
+	:global(.card.callout-danger) {
 		--callout-tone: var(--danger);
 	}
-	:global(.callout-info) {
+	:global(.card.callout-info) {
 		--callout-tone: var(--info);
 	}
-	:global(.callout-accent) {
+	:global(.card.callout-accent) {
 		--callout-tone: var(--accent);
 	}
 

package/dist/components/molecules/CapBar.svelte

@@ -284,7 +284,7 @@
 		inset: 0 0 0 var(--cap);
 		border-radius: 0 var(--r-pill) var(--r-pill) 0;
 		background: var(--bg);
-		box-shadow: inset 0 0 0 1px var(--border);
+		box-shadow: inset 0 0 0 var(--edge-width) var(--track-edge);
 		pointer-events: none;
 	}
 	.fill-clip {
@@ -363,7 +363,7 @@
 		left: clamp(0%, var(--cap), 100%);
 		translate: calc(-1 * clamp(0%, var(--cap), 100%)) 0;
 		padding: var(--sp-px) var(--sp-1);
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--raised-edge);
 		border-radius: var(--r-sm);
 		background: var(--bg-elevated-2);
 		box-shadow: var(--shadow-sm);

package/dist/components/molecules/ChatBubble.svelte

@@ -180,5 +180,9 @@
 		-webkit-line-clamp: var(--clamp);
 		line-clamp: var(--clamp);
 		overflow: hidden;
+		padding: calc(var(--focus-ring-width) + var(--focus-ring-offset));
+		padding-block-end: 0;
+		margin: calc(-1 * (var(--focus-ring-width) + var(--focus-ring-offset)));
+		margin-block-end: 0;
 	}
 </style>

package/dist/components/molecules/CodeBlock.svelte

@@ -85,7 +85,7 @@
 <style>
 	.codeblock {
 		margin: 0;
-		border: 1px solid var(--border);
+		border: var(--edge-width) solid var(--surface-edge);
 		border-radius: var(--r-lg);
 		background: var(--bg);
 		overflow: hidden;
@@ -95,14 +95,21 @@
 		align-items: center;
 		gap: var(--sp-2);
 		padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3);
-		background: var(--bg-elevated-2);
-		border-bottom: 1px solid var(--border);
+		background: var(--surface-fill-2);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 		font-size: var(--fs-xs);
 		font-family: var(--font-mono);
 		color: var(--text-muted);
 	}
+	.cb-name {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
 	.cb-body {
 		display: flex;
+		align-items: flex-start;
 		overflow: auto;
 		-webkit-overflow-scrolling: touch;
 	}
@@ -113,8 +120,8 @@
 		padding: var(--sp-3) var(--sp-2);
 		text-align: right;
 		color: var(--text-faint);
-		background: var(--bg-elevated);
-		border-right: 1px solid var(--border);
+		background: var(--surface-fill);
+		border-right: var(--edge-width) solid var(--surface-edge);
 		user-select: none;
 		font-family: var(--font-mono);
 		font-size: var(--fs-sm);

package/dist/components/molecules/Combobox.svelte

@@ -281,11 +281,11 @@
 		max-height: var(--cb-max-height, min(16rem, 40vh));
 		overflow-y: auto;
 		padding: var(--sp-1);
-		background: var(--cb-bg, var(--bg-elevated));
+		background: var(--cb-bg, var(--raised-fill));
 		color: var(--text);
-		border: 1px solid var(--cb-border, var(--border-strong));
+		border: var(--edge-width) solid var(--cb-border, var(--raised-edge));
 		border-radius: var(--cb-radius, var(--r-md));
-		box-shadow: var(--shadow-md);
+		box-shadow: var(--raised-shadow);
 		transform-origin: var(--tsu-origin, top left);
 		opacity: 1;
 		scale: 1;

package/dist/components/molecules/Drawer.svelte

@@ -215,7 +215,7 @@
 			'foot';
 		width: 100%;
 		height: 100%;
-		background: var(--bg-elevated);
+		background: var(--overlay-fill);
 		will-change: translate;
 		padding-top: var(--safe-top);
 		padding-bottom: var(--safe-bottom);
@@ -242,7 +242,7 @@
 		align-items: center;
 		gap: var(--sp-2);
 		padding: var(--sp-4);
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 	}
 	.panel-icon {
 		display: inline-flex;
@@ -269,7 +269,7 @@
 		display: flex;
 		gap: var(--sp-1);
 		padding: var(--sp-2);
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 		overflow-x: auto;
 		scrollbar-width: thin;
 	}
@@ -290,7 +290,7 @@
 		justify-content: flex-end;
 		gap: var(--sp-2);
 		padding: var(--sp-4);
-		border-top: 1px solid var(--border);
+		border-top: var(--edge-width) solid var(--surface-edge);
 	}
 
 	@media (min-width: 48rem) {
@@ -298,8 +298,8 @@
 			width: min(var(--drawer-w), 100%);
 			padding-top: 0;
 			padding-bottom: 0;
-			border-left: 1px solid var(--border-strong);
-			box-shadow: var(--shadow-lg);
+			border-left: var(--edge-width) solid var(--border-strong);
+			box-shadow: var(--overlay-shadow);
 			grid-template-columns: minmax(0, 1fr);
 			grid-template-rows: auto minmax(0, 1fr) auto;
 			grid-template-areas:
@@ -309,7 +309,7 @@
 		}
 		.drawer[data-side='left'] .panel {
 			border-left: 0;
-			border-right: 1px solid var(--border-strong);
+			border-right: var(--edge-width) solid var(--border-strong);
 		}
 		.panel.has-nav {
 			grid-template-columns: var(--drawer-nav-w) minmax(0, 1fr);
@@ -325,7 +325,7 @@
 			overflow-x: hidden;
 			overflow-y: auto;
 			border-bottom: 0;
-			border-right: 1px solid var(--border);
+			border-right: var(--edge-width) solid var(--surface-edge);
 		}
 		.panel-nav-mobile {
 			display: none;

package/dist/components/molecules/EmojiPicker.svelte

@@ -223,7 +223,7 @@
 		align-items: center;
 		justify-content: center;
 		padding: var(--sp-1);
-		border: 1px solid transparent;
+		border: var(--edge-width) solid transparent;
 		border-radius: var(--r-sm);
 		background: none;
 		color: inherit;

package/dist/components/molecules/FileButton.svelte

@@ -107,9 +107,12 @@
 		gap: var(--sp-2);
 		padding: var(--sp-2) var(--btn-px-md);
 		min-height: var(--control-height-default);
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--btn-edge);
 		border-radius: var(--r-md);
-		background: var(--surface);
+		background: var(--btn-fill);
+		--file-shadow-rest: var(--btn-shadow);
+		--file-shadow-lift: var(--btn-shadow-hover);
+		box-shadow: var(--file-shadow-rest);
 		color: var(--text);
 		font-weight: var(--fw-medium);
 		font-size: var(--control-fs-md);
@@ -123,8 +126,10 @@
 		transition:
 			background var(--dur-fast) ease,
 			border-color var(--dur-fast) ease,
+			box-shadow var(--dur-fast) ease,
 			color var(--dur-fast) ease,
 			opacity var(--dur-fast) ease,
+			translate var(--dur-fast) var(--ease-out),
 			scale var(--file-scale-dur) var(--ease-out);
 	}
 	.file-btn:active:not(.disabled) {
@@ -197,20 +202,25 @@
 		font-size: var(--icon-xl);
 	}
 	.file-btn.primary {
-		background: var(--accent);
-		border-color: var(--accent);
+		background: var(--btn-primary-fill);
+		border-color: var(--btn-primary-edge);
+		--file-shadow-rest: var(--btn-primary-shadow);
+		--file-shadow-lift: var(--btn-primary-shadow-hover);
 		color: var(--text-on-accent);
 		font-weight: var(--fw-semibold);
 	}
 	.file-btn.ghost {
 		background: transparent;
 		border-color: transparent;
+		--file-shadow-rest: none;
+		--file-shadow-lift: none;
 	}
 	/* The hidden input keeps focusability (sr-only, not display:none), so mirror
 	   its focus onto the label for a visible ring. */
 	.file-btn:focus-within {
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);
+		box-shadow: var(--file-shadow-rest), var(--focus-glow);
 	}
 	.file-btn.disabled {
 		opacity: var(--disabled-opacity);
@@ -219,6 +229,8 @@
 	@media (hover: hover) and (pointer: fine) {
 		.file-btn:hover:not(.disabled) {
 			border-color: var(--accent);
+			translate: 0 calc(-1 * var(--hover-lift));
+			--file-shadow-rest: var(--file-shadow-lift);
 		}
 		.file-btn.primary:hover:not(.disabled) {
 			filter: brightness(1.08);

package/dist/components/molecules/FilterInput.svelte

@@ -467,12 +467,13 @@
 	.fi__bar {
 		--fi-icon: var(--control-icon-md);
 		display: flex;
+		flex-wrap: wrap;
 		align-items: center;
 		gap: var(--sp-2);
 		padding: 0 var(--control-px-md);
 		min-height: var(--control-height-default);
 		background: var(--bg-elevated);
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--control-edge);
 		border-radius: var(--r-md);
 		transition:
 			border-color var(--dur-fast) ease,
@@ -501,7 +502,7 @@
 		font-size: var(--fs-xs);
 		line-height: var(--lh-none);
 		color: var(--text-faint);
-		border: 1px solid var(--border);
+		border: var(--edge-width) solid var(--border);
 		border-radius: var(--r-sm);
 		padding: var(--sp-0-5) var(--sp-1);
 	}
@@ -522,7 +523,7 @@
 		position: relative;
 		display: flex;
 		flex: 1;
-		min-width: 0;
+		min-width: min(100%, 6rem);
 	}
 	.fi__display {
 		position: absolute;
@@ -599,8 +600,8 @@
 		left: 0;
 		right: 0;
 		z-index: var(--z-drawer);
-		background: var(--bg-elevated);
-		border: 1px solid var(--border-strong);
+		background: var(--raised-fill);
+		border: var(--edge-width) solid var(--raised-edge);
 		border-radius: var(--r-md);
 		box-shadow: var(--shadow-lg);
 		padding: var(--sp-1);

package/dist/components/molecules/GitRef.svelte

@@ -125,9 +125,9 @@
 		min-width: 0;
 		padding: var(--sp-0-5) var(--sp-2);
 		border-radius: var(--r-pill);
-		background: var(--bg-elevated-2);
+		background: var(--surface-fill-2);
 		color: var(--text-muted);
-		border: 1px solid var(--border);
+		border: var(--edge-width) solid var(--surface-edge);
 		text-decoration: none;
 	}
 	.branch {

package/dist/components/molecules/GlyphStack.svelte

@@ -314,6 +314,8 @@
 		height: 1rem;
 		max-width: 1rem;
 		max-height: 1rem;
+		min-width: 0;
+		min-height: 0;
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
@@ -321,6 +323,22 @@
 		font-size: var(--fs-xs);
 		line-height: var(--lh-none);
 	}
+	/* Controls with a minimum box (e.g. a `box="xs"` IconButton) shrink to the cell instead of clipping. */
+	.stacked > .cell > :global(*) {
+		min-width: 0;
+		min-height: 0;
+		max-width: 1rem;
+		max-height: 1rem;
+	}
+	/* A labelled Dot folds to its disc; the label stays in the accessibility tree. */
+	.stacked :global(.dot-row > :not(.dot)) {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
 	.stacked > :global(*) :global(:focus-visible),
 	.stacked > :global(:focus-visible) {
 		outline-offset: var(--focus-ring-offset-inset);
@@ -343,11 +361,11 @@
 		margin: 0;
 		padding: var(--sp-1);
 		max-width: calc(100vw - 2 * var(--sp-2));
-		background: var(--bg-elevated);
+		background: var(--raised-fill);
 		color: var(--text);
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--raised-edge);
 		border-radius: var(--r-md);
-		box-shadow: var(--shadow-md);
+		box-shadow: var(--raised-shadow);
 		opacity: 0;
 		scale: var(--enter-scale);
 		transition:

package/dist/components/molecules/InputGroup.svelte

@@ -221,8 +221,8 @@
 		position: absolute;
 		inset: auto 0 0 0;
 		height: var(--ig-h);
-		background: var(--textarea-bg, var(--bg));
-		border: 1px solid var(--textarea-border, var(--border-strong));
+		background: var(--textarea-bg, var(--control-fill));
+		border: var(--edge-width) solid var(--textarea-border, var(--control-edge));
 		border-top: 0;
 		border-radius: 0 0 var(--ig-radius) var(--ig-radius);
 		transition: border-color var(--dur-fast) ease;

package/dist/components/molecules/Modal.svelte

@@ -286,10 +286,10 @@
 		max-height: calc(100dvh - var(--safe-top) - var(--sp-6));
 		display: flex;
 		flex-direction: column;
-		background: var(--bg-elevated);
-		border: 1px solid var(--border);
+		background: var(--overlay-fill);
+		border: var(--edge-width) solid var(--overlay-edge);
 		border-radius: var(--r-lg) var(--r-lg) 0 0;
-		box-shadow: var(--shadow-lg);
+		box-shadow: var(--overlay-shadow);
 		padding-bottom: var(--safe-bottom);
 		/* Bottom sheet: slides up on enter, down on exit. */
 		opacity: 0;
@@ -357,7 +357,7 @@
 		align-items: center;
 		gap: var(--sp-2);
 		padding: var(--sp-4);
-		border-bottom: 1px solid var(--border);
+		border-bottom: var(--edge-width) solid var(--surface-edge);
 	}
 	.sheet-toned {
 		border-top: 3px solid var(--modal-tone);
@@ -382,7 +382,7 @@
 		justify-content: flex-end;
 		gap: var(--sp-2);
 		padding: var(--sp-4);
-		border-top: 1px solid var(--border);
+		border-top: var(--edge-width) solid var(--surface-edge);
 	}
 	/* Opt-in: a flex item is shrink-to-fit, so a layout wrapper handed to the
 	   footer would size to its content and hug the right edge instead of

package/dist/components/molecules/OptionButton.svelte

@@ -95,9 +95,10 @@
 		flex-direction: column;
 		gap: var(--sp-0-5);
 		padding: var(--sp-2);
-		background: var(--bg);
-		border: 1px solid var(--border-strong);
+		background: var(--control-fill);
+		border: var(--edge-width) solid var(--control-edge);
 		border-radius: var(--r-md);
+		box-shadow: var(--control-shadow);
 		color: var(--text);
 		text-align: left;
 		white-space: normal;
@@ -107,6 +108,7 @@
 			background var(--dur-fast) ease,
 			border-color var(--dur-fast) ease,
 			color var(--dur-fast) ease,
+			translate var(--dur-fast) ease,
 			scale var(--opt-scale-dur) var(--ease-out);
 	}
 	.opt:disabled {
@@ -154,8 +156,11 @@
 		color: var(--oc);
 	}
 	@media (hover: hover) and (pointer: fine) {
+		.opt:hover:not(:disabled) {
+			translate: 0 calc(-1 * var(--hover-lift));
+		}
 		.opt:hover:not(:disabled):not(.selected) {
-			border-color: var(--border-strong);
+			border-color: var(--control-edge);
 		}
 		.opt.selected:hover:not(:disabled) {
 			border-color: var(--oc);

package/dist/components/molecules/Pagination.svelte

@@ -189,7 +189,7 @@
 		min-width: var(--box-md);
 		height: var(--box-md);
 		padding: 0 var(--control-px-md);
-		border: 1px solid transparent;
+		border: var(--edge-width) solid transparent;
 		border-radius: var(--r-md);
 		background: transparent;
 		color: var(--text-muted);
@@ -201,6 +201,7 @@
 			background var(--dur-fast) ease,
 			border-color var(--dur-fast) ease,
 			color var(--dur-fast) ease,
+			translate var(--dur-fast) ease,
 			scale var(--page-scale-dur) var(--ease-out);
 	}
 	.page:active {
@@ -211,6 +212,7 @@
 		.page:hover {
 			background: var(--bg-elevated-2);
 			color: var(--text);
+			translate: 0 calc(-1 * var(--hover-lift));
 		}
 	}
 	.page.on {

package/dist/components/molecules/Popover.svelte

@@ -392,7 +392,7 @@
 		min-height: var(--pop-box, var(--box-sm));
 		min-width: var(--pop-box, var(--box-sm));
 		padding: var(--pop-trigger-pad, var(--sp-1));
-		border: 1px solid var(--pop-trigger-border, transparent);
+		border: var(--edge-width) solid var(--pop-trigger-border, transparent);
 		border-radius: var(--pop-trigger-radius, var(--r-md));
 		background: var(--pop-trigger-bg, transparent);
 		color: var(--pop-trigger-fg, var(--text));
@@ -403,6 +403,8 @@
 			background-color var(--dur-fast) var(--ease),
 			border-color var(--dur-fast) var(--ease),
 			color var(--dur-fast) var(--ease),
+			box-shadow var(--dur-fast) var(--ease),
+			translate var(--dur-fast) var(--ease),
 			scale var(--pop-scale-dur) var(--ease-out);
 	}
 	.pop-trigger:not(.bare, .trigger-toggle):active:not(:disabled, .is-disabled) {
@@ -418,11 +420,14 @@
 		}
 		.pop-trigger.canonical:hover:not(:disabled) {
 			border-color: var(--accent);
-			background: var(--surface);
+			background: var(--btn-fill);
+			box-shadow: var(--btn-shadow-hover);
+			translate: 0 calc(-1 * var(--hover-lift));
 		}
 		.pop-trigger.trigger-primary:hover:not(:disabled) {
-			background: var(--accent);
-			border-color: var(--accent);
+			background: var(--btn-primary-fill);
+			border-color: var(--btn-primary-edge);
+			box-shadow: var(--btn-primary-shadow-hover);
 			filter: brightness(1.08);
 		}
 		.pop-trigger.trigger-ghost:hover:not(:disabled) {
@@ -453,8 +458,9 @@
 		min-width: 0;
 		min-height: var(--control-height-default);
 		padding: var(--pop-trigger-pad, var(--sp-2) var(--btn-px-md));
-		border-color: var(--pop-trigger-border, var(--border-strong));
-		background: var(--pop-trigger-bg, var(--surface));
+		border-color: var(--pop-trigger-border, var(--btn-edge));
+		background: var(--pop-trigger-bg, var(--btn-fill));
+		box-shadow: var(--btn-shadow);
 		font-weight: var(--fw-medium);
 		font-size: var(--pop-trigger-size, var(--control-fs-md));
 		line-height: var(--lh-none);
@@ -462,8 +468,9 @@
 		white-space: nowrap;
 	}
 	.pop-trigger.trigger-primary {
-		background: var(--pop-trigger-bg, var(--accent));
-		border-color: var(--pop-trigger-border, var(--accent));
+		background: var(--pop-trigger-bg, var(--btn-primary-fill));
+		border-color: var(--pop-trigger-border, var(--btn-primary-edge));
+		box-shadow: var(--btn-primary-shadow);
 		color: var(--pop-trigger-fg, var(--text-on-accent));
 		font-weight: var(--fw-semibold);
 	}
@@ -620,11 +627,11 @@
 		min-width: 10rem;
 		max-width: min(22rem, calc(100vw - 2 * var(--sp-3)));
 		padding: var(--sp-1);
-		background: var(--bg-elevated);
+		background: var(--raised-fill);
 		color: var(--text);
-		border: 1px solid var(--border-strong);
+		border: var(--edge-width) solid var(--raised-edge);
 		border-radius: var(--r-md);
-		box-shadow: var(--shadow-md);
+		box-shadow: var(--raised-shadow);
 		transform-origin: var(--tsu-origin, top left);
 		opacity: 0;
 		scale: var(--enter-scale);

package/dist/components/molecules/Prose.svelte

@@ -76,15 +76,15 @@
 		font-family: var(--font-mono);
 		font-size: 0.92em;
 		color: var(--md-code, var(--text));
-		background: var(--md-code-bg, var(--bg-elevated-2));
+		background: var(--md-code-bg, var(--surface-fill-2));
 		padding: 0.1em 0.35em;
 		border-radius: var(--r-sm);
 	}
 	.prose :global(pre) {
 		margin: 0;
 		padding: var(--sp-3);
-		background: var(--bg-elevated);
-		border: 1px solid var(--border);
+		background: var(--surface-fill);
+		border: var(--edge-width) solid var(--surface-edge);
 		border-radius: var(--r-md);
 		overflow-x: auto;
 		font-family: var(--font-mono);
@@ -119,12 +119,12 @@
 	.prose :global(th),
 	.prose :global(td) {
 		padding: var(--sp-1) var(--sp-2);
-		border: 1px solid var(--border);
+		border: var(--edge-width) solid var(--surface-edge);
 		text-align: left;
 		vertical-align: top;
 	}
 	.prose :global(th) {
-		background: var(--bg-elevated-2);
+		background: var(--surface-fill-2);
 		color: var(--text-muted);
 		font-weight: var(--fw-semibold);
 	}
@@ -135,6 +135,6 @@
 	}
 	.prose :global(hr) {
 		border: 0;
-		border-top: 1px solid var(--border);
+		border-top: var(--edge-width) solid var(--surface-edge);
 	}
 </style>