@refrakt-md/lumina 0.18.0 → 0.19.0

package/styles/runes/feature.css

@@ -60,35 +60,40 @@
 .rf-feature[data-align="right"] h2 {
 	text-align: right;
 }
+/* Definitions stack in a single column by default; the `--definitions-grid`
+ * modifier (SPEC-091 media-position variant: top/bottom) tiles them as a grid. */
 .rf-feature__definitions {
+	display: block;
+	margin: 0;
+}
+.rf-feature--definitions-grid .rf-feature__definitions {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(max(240px, calc((100% - 3rem) / 3)), 1fr));
 	gap: 1.5rem;
-	margin: 0;
 }
-/* Split layout: override defaults when in split mode */
-.rf-feature[data-layout="split"] .rf-feature__content,
-.rf-feature[data-layout="split-reverse"] .rf-feature__content {
+/* Beside layouts (media on start/end): definitions stay stacked (no grid
+ * modifier) inside the content track. */
+.rf-feature[data-media-position="start"] .rf-feature__content,
+.rf-feature[data-media-position="end"] .rf-feature__content {
 	display: block;
 }
-.rf-feature[data-layout="split"] .rf-feature__preamble,
-.rf-feature[data-layout="split-reverse"] .rf-feature__preamble,
-.rf-feature[data-layout="split"] h2,
-.rf-feature[data-layout="split-reverse"] h2 {
+.rf-feature[data-media-position="start"] .rf-feature__preamble,
+.rf-feature[data-media-position="end"] .rf-feature__preamble,
+.rf-feature[data-media-position="start"] h2,
+.rf-feature[data-media-position="end"] h2 {
 	text-align: left;
 }
-.rf-feature[data-layout="split"] .rf-feature__definitions,
-.rf-feature[data-layout="split-reverse"] .rf-feature__definitions {
-	display: block;
-}
-.rf-feature[data-layout="split"] .rf-feature__feature-item,
-.rf-feature[data-layout="split-reverse"] .rf-feature__feature-item {
+.rf-feature[data-media-position="start"] .rf-feature__feature-item,
+.rf-feature[data-media-position="end"] .rf-feature__feature-item {
 	background: none;
+	border: none;
+	border-radius: 0;
 	padding: 0.75rem 0;
 }
 .rf-feature__feature-item {
 	padding: 1.75rem;
-	border-radius: var(--rf-radius-md);
+	border-radius: var(--rf-radius-container);
+	border: 1px solid var(--rf-color-border);
 	background: var(--rf-color-surface);
 }
 .rf-feature__feature-item dt {
@@ -106,7 +111,7 @@
 	width: 1.5rem;
 	height: 1.5rem;
 	margin-bottom: 0.5rem;
-	color: var(--rf-color-accent);
+	color: var(--rf-color-primary);
 }
 .rf-feature__feature-item dd {
 	margin: 0;

package/styles/runes/figure.css

@@ -2,8 +2,7 @@
 .rf-figure img {
 	max-width: 100%;
 	height: auto;
-	border-radius: var(--rf-radius-md);
-	box-shadow: var(--rf-shadow-sm);
+	border-radius: var(--rf-radius-media);
 }
 .rf-figure figcaption {
 	margin-top: 0.625rem;

package/styles/runes/gallery.css

@@ -1,7 +1,18 @@
-/* Gallery — Multi-image container with grid/carousel/masonry layout */
+/* Gallery — Multi-image container with grid/carousel/masonry layout.
+ *
+ * Thin-edge tile mosaic: a gallery is media all the way down (every child is an
+ * image), so the outer padding is treated as a frame margin and locked to the
+ * same value as the inter-item gap — outer = inter = a single visual rhythm.
+ * Both are theme tokens (`--rf-gallery-edge` / `--rf-gallery-gap`), not author
+ * attributes; the `gap` attribute was removed because aesthetic spacing is the
+ * theme's concern. `columns` stays an author attribute — that's content density,
+ * not aesthetics. */
 .rf-gallery {
 	position: relative;
 	margin: 0;
+	--rf-gallery-edge: 0.5rem;
+	--rf-gallery-gap: 0.5rem;
+	padding: var(--rf-gallery-edge);
 }
 
 /* Layout modifier classes */
@@ -13,7 +24,7 @@
 .rf-gallery__items {
 	display: grid;
 	grid-template-columns: repeat(var(--gallery-columns, 3), 1fr);
-	gap: var(--gallery-gap, var(--rf-spacing-md));
+	gap: var(--rf-gallery-gap);
 }
 
 /* Individual gallery items */
@@ -85,16 +96,36 @@
 .rf-gallery__nav:hover {
 	opacity: 1;
 }
+/* Inset the carousel nav buttons from the image edge by the same 0.5rem the
+ * gallery uses as its thin-edge frame, so the buttons overlap onto the image
+ * slightly rather than sitting flush against it. The gallery's outer padding
+ * already inserts 0.5rem between gallery border and image, so the total offset
+ * from the gallery border is `edge + 0.5rem` = 1rem. */
 .rf-gallery__nav--prev {
-	left: 0.5rem;
+	left: calc(var(--rf-gallery-edge) + 0.5rem);
 }
 .rf-gallery__nav--next {
-	right: 0.5rem;
+	right: calc(var(--rf-gallery-edge) + 0.5rem);
 }
 
-/* Masonry layout (CSS progressive enhancement) */
+/* Masonry layout — CSS multi-column flow gives true variable-height masonry in
+ * every browser. (`grid-template-rows: masonry` is Firefox-only behind a flag
+ * and silently falls back to uniform-height grid rows everywhere else, which is
+ * why heights used to only vary in the collapsed single-column case.) Items
+ * flow top-to-bottom inside each column, then move to the next column. */
 .rf-gallery[data-layout="masonry"] .rf-gallery__items {
-	grid-template-rows: masonry;
+	display: block;
+	column-count: var(--gallery-columns, 3);
+	column-gap: var(--rf-gallery-gap);
+}
+.rf-gallery[data-layout="masonry"] .rf-gallery__item {
+	break-inside: avoid;
+	margin-bottom: var(--rf-gallery-gap);
+}
+/* In masonry the row height isn't pinned, so let each image take its natural
+ * height (grid mode keeps `height: 100%` for uniform tiles). */
+.rf-gallery[data-layout="masonry"] .rf-gallery__item img {
+	height: auto;
 }
 
 /* Lightbox cursor hint */
@@ -157,11 +188,11 @@
 	right: 1rem;
 }
 
-/* Responsive: reset custom columns/gap and collapse on small screens */
+/* Responsive: collapse columns on small screens. (Gap is theme-locked at all
+ * widths — no override needed.) */
 @media (max-width: 768px) {
 	.rf-gallery {
 		--gallery-columns: 2 !important;
-		--gallery-gap: var(--rf-spacing-md) !important;
 	}
 	.rf-gallery[data-layout="carousel"] .rf-gallery__item {
 		flex-basis: 80%;

package/styles/runes/itinerary.css

@@ -116,8 +116,8 @@
 	box-shadow: 0 0 0 2px var(--rf-color-success);
 }
 .rf-itinerary-stop--activity::before {
-	background: var(--rf-color-accent);
-	box-shadow: 0 0 0 2px var(--rf-color-accent);
+	background: var(--rf-color-primary);
+	box-shadow: 0 0 0 2px var(--rf-color-primary);
 }
 .rf-itinerary-stop--rest::before {
 	background: var(--rf-color-muted);

package/styles/runes/lore.css

@@ -19,7 +19,7 @@
 	font-size: 1.5rem;
 	font-weight: 700;
 	margin-bottom: 0.5rem;
-	color: var(--rf-color-heading);
+	color: var(--rf-color-text);
 }
 
 /* Spoiler mode */

package/styles/runes/palette.css

@@ -15,7 +15,7 @@
 	font-weight: 600;
 	text-transform: uppercase;
 	letter-spacing: 0.05em;
-	color: var(--rf-color-text-muted, #6b7280);
+	color: var(--rf-color-muted);
 	margin-bottom: 0.75rem;
 }
 .rf-palette__grid {
@@ -49,12 +49,12 @@
 .rf-palette__swatch-value {
 	font-family: var(--rf-font-mono, monospace);
 	font-size: 0.75rem;
-	color: var(--rf-color-text-muted, #6b7280);
+	color: var(--rf-color-muted);
 }
 .rf-palette__swatch-contrast {
 	font-family: var(--rf-font-mono, monospace);
 	font-size: 0.7rem;
-	color: var(--rf-color-text-muted, #6b7280);
+	color: var(--rf-color-muted);
 }
 .rf-palette__swatch-a11y {
 	display: flex;

package/styles/runes/plan-progress.css

@@ -1,69 +1,22 @@
-/* Plan Progress */
+/* plan-progress (SPEC-076 / WORK-296) — a stack of per-type blocks, each a type
+ * heading + an `aggregate` composition (progress bar + status badges). The bar
+ * and badge-row chrome come from the `progress` / `aggregate` / `badge` runes;
+ * this file only lays out the per-type grouping. */
 .rf-plan-progress {
-	background: var(--rf-color-surface);
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-md);
-	padding: 0.75rem 1.25rem;
-}
-.rf-plan-progress__row {
 	display: flex;
-	align-items: baseline;
-	gap: 0.5rem;
-	padding-block: 0.25rem;
-}
-.rf-plan-progress__row + .rf-plan-progress__row {
-	border-block-start: 1px solid var(--rf-color-border);
-}
-.rf-plan-progress__label {
-	font-weight: 600;
-	font-size: 0.8125rem;
-	color: var(--rf-color-text);
-	min-width: 8rem;
+	flex-direction: column;
+	gap: var(--rf-spacing-lg, 2rem);
 }
-.rf-plan-progress__counts {
+.rf-plan-progress__group {
 	display: flex;
-	flex-wrap: wrap;
-	gap: 0.25rem 0.5rem;
-}
-.rf-plan-progress__count {
-	font-size: 0.75rem;
-	padding: 0.125rem 0.5rem;
-	border-radius: var(--rf-radius-sm);
-	white-space: nowrap;
+	flex-direction: column;
+	gap: var(--rf-spacing-sm, 0.75rem);
 }
-
-/* Status-colored counts */
-.rf-plan-progress__count[data-status="done"],
-.rf-plan-progress__count[data-status="fixed"],
-.rf-plan-progress__count[data-status="accepted"],
-.rf-plan-progress__count[data-status="active"],
-.rf-plan-progress__count[data-status="complete"] {
-	color: var(--rf-color-success);
-	background: var(--rf-color-success-bg);
-}
-.rf-plan-progress__count[data-status="in-progress"],
-.rf-plan-progress__count[data-status="confirmed"],
-.rf-plan-progress__count[data-status="review"] {
-	color: var(--rf-color-warning);
-	background: var(--rf-color-warning-bg);
-}
-.rf-plan-progress__count[data-status="ready"],
-.rf-plan-progress__count[data-status="reported"],
-.rf-plan-progress__count[data-status="proposed"],
-.rf-plan-progress__count[data-status="planning"] {
-	color: var(--rf-color-info);
-	background: var(--rf-color-info-bg);
-}
-.rf-plan-progress__count[data-status="blocked"] {
-	color: var(--rf-color-danger);
-	background: var(--rf-color-danger-bg);
-}
-.rf-plan-progress__count[data-status="draft"],
-.rf-plan-progress__count[data-status="pending"],
-.rf-plan-progress__count[data-status="superseded"],
-.rf-plan-progress__count[data-status="deprecated"],
-.rf-plan-progress__count[data-status="wontfix"],
-.rf-plan-progress__count[data-status="duplicate"] {
+.rf-plan-progress__heading {
+	margin: 0;
+	font-size: 0.8125rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
 	color: var(--rf-color-muted);
-	background: var(--rf-color-surface-active);
 }

package/styles/runes/playlist.css

@@ -1,5 +1,37 @@
 /* Playlist */
 
+/* Thin-edge inset model (matches `.rf-card` / `.rf-recipe`): card outer padding
+ * is a thin edge, the content column adds the remaining inset back so text sits
+ * at the full `--rune-padding` without negative-margin bleed. Like recipe, no
+ * `align-items: stretch` — the cover is a square album image (aspect-ratio: 1
+ * on `__media img` below), and stretching the cell would just produce empty
+ * card padding around it. */
+.rf-playlist {
+	--rf-playlist-edge: 0.5rem;
+	--rf-playlist-media-gap: var(--rf-spacing-lg);
+	--rf-playlist-split-gap: var(--rf-spacing-sm);
+	padding: var(--rf-playlist-edge);
+}
+
+.rf-playlist__content {
+	padding: max(0px, calc(var(--rune-padding, var(--rf-spacing-md)) - var(--rf-playlist-edge)));
+}
+
+/* Direct grid properties (column-gap / row-gap) win via selector specificity
+ * over the shared media-position layout vars. */
+.rf-playlist[data-media-position="start"],
+.rf-playlist[data-media-position="end"] {
+	column-gap: var(--rf-playlist-split-gap);
+	row-gap: var(--rf-playlist-media-gap);
+}
+
+.rf-playlist[data-media-position="top"] > [data-section="media"] {
+	margin-bottom: var(--rf-playlist-media-gap);
+}
+.rf-playlist[data-media-position="bottom"] > [data-section="media"] {
+	margin-top: var(--rf-playlist-media-gap);
+}
+
 /* Inner header (headline + description) inside content */
 .rf-playlist__content > .rf-playlist__header {
 	flex-direction: column;

package/styles/runes/plot.css

@@ -8,7 +8,7 @@
 	font-size: 1.5rem;
 	font-weight: 700;
 	margin-bottom: 0.5rem;
-	color: var(--rf-color-heading);
+	color: var(--rf-color-text);
 }
 
 /* Description */
@@ -48,7 +48,7 @@
 .rf-beat > span[data-field="label"] {
 	font-weight: 600;
 	font-size: 1rem;
-	color: var(--rf-color-heading);
+	color: var(--rf-color-text);
 }
 .rf-beat__body {
 	margin-top: 0.25rem;

package/styles/runes/realm.css

@@ -4,15 +4,41 @@
  * "preamble"), and dimensions/metadata.css ([data-zone-layout]). This file
  * only carries realm-specific chrome. */
 
-/* Stacked layout — split / split-reverse are handled by shared split.css */
-.rf-realm[data-layout="stacked"] {
+/* Thin-edge inset model (matches `.rf-card` / `.rf-recipe`): card outer padding
+ * is a thin edge, the content column adds the remaining inset back so text sits
+ * at the full `--rune-padding` without negative-margin bleed. Like recipe, no
+ * `--split-valign: stretch` — realm content can be long (multiple sections), so
+ * we let the scene keep its natural aspect ratio rather than cover-cropping. */
+.rf-realm {
+	--rf-realm-edge: 0.5rem;
+	--rf-realm-media-gap: var(--rf-spacing-lg);
+	--rf-realm-split-gap: var(--rf-spacing-sm);
+	padding: var(--rf-realm-edge);
+}
+
+.rf-realm__content {
+	padding: max(0px, calc(var(--rune-padding, var(--rf-spacing-md)) - var(--rf-realm-edge)));
+}
+
+/* Direct grid properties (column-gap / row-gap) win via selector specificity
+ * over the shared media-position layout vars. */
+.rf-realm[data-media-position="start"],
+.rf-realm[data-media-position="end"] {
+	column-gap: var(--rf-realm-split-gap);
+	row-gap: var(--rf-realm-media-gap);
+}
+
+/* Stacked layouts — beside layouts handled by shared split.css */
+.rf-realm[data-media-position="top"] {
 	display: flex;
 	flex-direction: column;
 }
 
-/* Scene image — base styles deferred to shared [data-section="media"] in split.css */
-.rf-realm__scene {
-	margin-bottom: var(--rf-spacing-md);
+.rf-realm[data-media-position="top"] > .rf-realm__scene {
+	margin-bottom: var(--rf-realm-media-gap);
+}
+.rf-realm[data-media-position="bottom"] > .rf-realm__scene {
+	margin-top: var(--rf-realm-media-gap);
 }
 
 /* Content */
@@ -37,7 +63,7 @@
 	font-weight: 700;
 	line-height: 1.3;
 	margin-bottom: 0.5rem;
-	color: var(--rf-color-heading);
+	color: var(--rf-color-text);
 }
 .rf-realm-section__body ul,
 .rf-realm-section__body ol {

package/styles/runes/recipe.css

@@ -1,5 +1,39 @@
 /* Recipe — editorial cookbook aesthetic */
 
+/* Thin-edge inset model (matches `.rf-card`): card outer padding is a thin edge,
+ * the content column adds the remaining inset back so text sits at the full
+ * `--rune-padding` without negative-margin bleed. Unlike `card`, the split
+ * layout keeps `align-items: start` (no `--split-valign: stretch`) — recipe
+ * content can be very tall (ingredients + many steps + tips), so stretching the
+ * media to match would crop the image hard. The image keeps its natural ratio
+ * and any leftover height in the media column sits as quiet card padding. */
+.rf-recipe {
+	--rf-recipe-edge: 0.5rem;
+	--rf-recipe-media-gap: var(--rf-spacing-lg);
+	--rf-recipe-split-gap: var(--rf-spacing-sm);
+	padding: var(--rf-recipe-edge);
+}
+
+.rf-recipe__content {
+	padding: max(0px, calc(var(--rune-padding, var(--rf-spacing-md)) - var(--rf-recipe-edge)));
+}
+
+/* Direct grid properties (column-gap / row-gap) rather than overriding shared
+ * media-position layout vars — the per-rune rules win via selector specificity
+ * and stay in our control regardless of inline styles. */
+.rf-recipe[data-media-position="start"],
+.rf-recipe[data-media-position="end"] {
+	column-gap: var(--rf-recipe-split-gap);
+	row-gap: var(--rf-recipe-media-gap);
+}
+
+.rf-recipe[data-media-position="top"] > [data-section="media"] {
+	margin-bottom: var(--rf-recipe-media-gap);
+}
+.rf-recipe[data-media-position="bottom"] > [data-section="media"] {
+	margin-top: var(--rf-recipe-media-gap);
+}
+
 .rf-recipe .rf-recipe__eyebrow {
 	font-size: 0.8rem;
 	font-weight: 600;
@@ -100,9 +134,11 @@
 	margin: 0;
 }
 
-/* Media zone — domain-specific overrides (base styles in split.css) */
+/* Media zone — base sizing/clip come from the shared [data-section="media"]
+ * rule in split.css. The image uses the media radius tier so it reads as a
+ * guest nested inside the (larger-radius) recipe card. */
 .rf-recipe__media img {
-	border-radius: var(--rf-radius-lg);
+	border-radius: var(--rf-radius-media);
 }
 
 /* Metadata — prep / cook / serves / difficulty are short, symmetric facts,

package/styles/runes/sandbox.css

@@ -33,7 +33,7 @@
 	font-size: 0.8125rem;
 	line-height: 1.25rem;
 	font-weight: 600;
-	color: var(--rf-color-warning-fg, #78350f);
+	color: var(--rf-color-warning);
 	background: var(--rf-color-warning-bg, #fef3c7);
 	border-bottom: 1px solid var(--rf-color-warning, #b45309);
 }

package/styles/runes/spacing.css

@@ -15,7 +15,7 @@
 	font-weight: 600;
 	text-transform: uppercase;
 	letter-spacing: 0.05em;
-	color: var(--rf-color-text-muted, #6b7280);
+	color: var(--rf-color-muted);
 	margin-bottom: 0.75rem;
 }
 
@@ -32,7 +32,7 @@
 }
 .rf-spacing__scale-bar {
 	height: 1.25rem;
-	background: var(--rf-color-primary, #0ea5e9);
+	background: var(--rf-color-primary);
 	border-radius: var(--rf-radius-sm, 4px);
 	opacity: 0.8;
 	min-width: 4px;
@@ -45,7 +45,7 @@
 	flex-shrink: 0;
 }
 .rf-spacing__scale-multiplier {
-	color: var(--rf-color-text-muted, #6b7280);
+	color: var(--rf-color-muted);
 	margin-left: 0.25rem;
 }
 
@@ -75,7 +75,7 @@
 .rf-spacing__radius-value {
 	font-size: 0.7rem;
 	font-family: var(--rf-font-mono, monospace);
-	color: var(--rf-color-text-muted, #6b7280);
+	color: var(--rf-color-muted);
 }
 
 /* Shadows — sample cards */

package/styles/runes/swatch.css

@@ -21,7 +21,7 @@
 	font-weight: 500;
 }
 .rf-swatch__value {
-	color: var(--rf-color-text-muted, #6b7280);
+	color: var(--rf-color-muted);
 	font-size: 0.75em;
 	font-family: var(--rf-font-mono, monospace);
 	vertical-align: middle;

package/styles/runes/tint.css

@@ -56,11 +56,11 @@
 	background-color: var(--rf-color-bg);
 
 	--cs-bg: #1a1a17;
-	--cs-surface: #211f1c;
+	--cs-surface: #1f1f1c;
 	--cs-text: #f6f4ef;
 	--cs-muted: #94908a;
 	--cs-accent: #f6f4ef;
-	--cs-border: #2a2825;
+	--cs-border: #282825;
 
 	--rf-color-bg: var(--cs-bg);
 	--rf-color-surface: var(--cs-surface);
@@ -70,9 +70,9 @@
 	--rf-color-border: var(--cs-border);
 
 	--rf-color-primary-hover: #d4cfc5;
-	--rf-color-surface-hover: #2a2825;
-	--rf-color-surface-active: #353330;
-	--rf-color-surface-raised: #292723;
+	--rf-color-surface-hover: #282825;
+	--rf-color-surface-active: #333330;
+	--rf-color-surface-raised: #272723;
 
 	--rf-color-info: #9bb4c7;
 	--rf-color-info-bg: #1f2530;
@@ -87,7 +87,7 @@
 	--rf-color-success-bg: #1a2a1f;
 	--rf-color-success-border: #2a4a35;
 
-	--rf-color-code-bg: #222220;
+	--rf-color-code-bg: #1c1c19;
 	--rf-color-code-text: #f6f4ef;
 	--rf-color-code-inline-bg: #2b2b29;
 	--rf-color-inline-code-bg: #2b2b29;
@@ -101,7 +101,7 @@
 	--rf-syntax-variable: #f6f4ef;
 
 	--rf-syntax-foreground: #f6f4ef;
-	--rf-syntax-background: #222220;
+	--rf-syntax-background: #1c1c19;
 	--rf-syntax-token-keyword: #7eb6bc;
 	--rf-syntax-token-string: #c79a9a;
 	--rf-syntax-token-string-expression: #c79a9a;

package/styles/runes/typography.css

@@ -11,7 +11,7 @@
 }
 .rf-typography__specimen {
 	border-radius: var(--rf-radius-lg, 12px);
-	padding: 1.5rem;
+	padding: 0;
 }
 .rf-typography__specimen-header {
 	display: flex;
@@ -26,14 +26,14 @@
 	font-weight: 600;
 	text-transform: uppercase;
 	letter-spacing: 0.05em;
-	color: var(--rf-color-primary, #0ea5e9);
-	background: var(--rf-color-primary-bg, rgba(14, 165, 233, 0.1));
+	color: var(--rf-color-muted);
+	background: var(--rf-color-surface-raised);
 	padding: 0.125rem 0.5rem;
 	border-radius: var(--rf-radius-sm, 4px);
 }
 .rf-typography__specimen-family {
 	font-size: 0.9rem;
-	color: var(--rf-color-text-muted, #6b7280);
+	color: var(--rf-color-muted);
 }
 .rf-typography__sizes {
 	display: flex;
@@ -54,7 +54,7 @@
 	flex-shrink: 0;
 	font-size: 0.7rem;
 	font-family: var(--rf-font-mono, monospace);
-	color: var(--rf-color-text-muted, #6b7280);
+	color: var(--rf-color-muted);
 	min-width: 3rem;
 	text-align: right;
 }
@@ -73,7 +73,7 @@
 .rf-typography__weight-label {
 	font-size: 0.7rem;
 	font-family: var(--rf-font-mono, monospace);
-	color: var(--rf-color-text-muted, #6b7280);
+	color: var(--rf-color-muted);
 }
 .rf-typography__charset {
 	margin-top: 1rem;
@@ -83,7 +83,7 @@
 	line-height: 1.8;
 	letter-spacing: 0.05em;
 	word-break: break-all;
-	color: var(--rf-color-text-muted, #6b7280);
+	color: var(--rf-color-muted);
 }
 
 /* Context-aware: no outer border when inside design-context (parent already has one) */

package/styles/runes/xref.css

@@ -23,6 +23,6 @@
 /* Unresolved reference */
 .rf-xref--unresolved {
 	text-decoration: underline dashed;
-	color: var(--rf-color-text-muted);
+	color: var(--rf-color-muted);
 	cursor: help;
 }

package/tokens/base.css

@@ -11,19 +11,6 @@
 	--rf-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
 	--rf-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, 'Cascadia Code', monospace;
 
-	/* Primary scale — warm-neutral axis, near-bg → near-text */
-	--rf-color-primary-50: #fbfaf7;
-	--rf-color-primary-100: #f5f4f1;
-	--rf-color-primary-200: #ecebe8;
-	--rf-color-primary-300: #e2e0dd;
-	--rf-color-primary-400: #bfbab2;
-	--rf-color-primary-500: #94908a;
-	--rf-color-primary-600: #76716a;
-	--rf-color-primary-700: #5a564f;
-	--rf-color-primary-800: #3a342d;
-	--rf-color-primary-900: #2a2622;
-	--rf-color-primary-950: #1c1a17;
-
 	/* Core palette */
 	--rf-color-text: #1c1a17;
 	--rf-color-muted: #6b6661;
@@ -31,6 +18,9 @@
 	--rf-color-bg: #f5f4f1;
 	--rf-color-primary: #1c1a17;
 	--rf-color-primary-hover: #3a342d;
+	/* Derived subtle primary wash — tracks `primary` in both modes. */
+	--rf-color-primary-bg: color-mix(in oklch, var(--rf-color-primary) 10%, transparent);
+	--rf-color-on-primary: #ffffff;
 
 	/* Surfaces */
 	--rf-color-surface: #fbfaf7;
@@ -58,7 +48,13 @@
 	 * status-coloured (which would compete with diff's add/remove channel
 	 * and the semantic palette above). `*-rail` is the optional left-edge
 	 * border colour; falls back to the primary accent via the consuming
-	 * CSS for themes that don't override it. */
+	 * CSS for themes that don't override it.
+	 *
+	 * WORK-341 — these three (and `--rf-color-primary-bg` above) are
+	 * **intentionally shared**: each derives from a mode-aware token
+	 * (`text` / `primary` / `muted`), so they track dark mode automatically
+	 * and deliberately have no dark.css override (a fixed dark value would
+	 * break the derivation). */
 	--rf-color-line-highlight: color-mix(in srgb, var(--rf-color-text) 6%, transparent);
 	--rf-color-line-highlight-rail: var(--rf-color-primary, var(--rf-color-text));
 	/* Gutter colour for `pre[data-linenumbers]` line counter. Defers to