@refrakt-md/lumina 0.20.2 → 0.22.0

package/styles/runes/hero.css

@@ -13,9 +13,9 @@
 }
 /* Higher specificity needed to override .rf-hero p (0,1,1) */
 .rf-hero .rf-hero__eyebrow {
-	font-size: 0.875rem;
-	font-weight: 600;
-	letter-spacing: 0.05em;
+	font-size: var(--rf-text-sm);
+	font-weight: var(--rf-weight-semibold);
+	letter-spacing: var(--rf-tracking-wider);
 	text-transform: uppercase;
 	color: var(--rf-color-primary);
 	margin: 0 0 1rem;
@@ -29,9 +29,9 @@
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-full);
 	color: var(--rf-color-text);
-	font-weight: 400;
+	font-weight: var(--rf-weight-normal);
 	text-transform: none;
-	letter-spacing: 0;
+	letter-spacing: var(--rf-tracking-normal);
 	transition: border-color 150ms ease;
 }
 .rf-hero .rf-hero__eyebrow:has(a):hover {
@@ -39,7 +39,7 @@
 }
 .rf-hero .rf-hero__eyebrow:has(a) a {
 	color: var(--rf-color-primary);
-	font-weight: 600;
+	font-weight: var(--rf-weight-semibold);
 	text-decoration: none;
 }
 .rf-hero .rf-hero__eyebrow:has(a) a::before {
@@ -93,7 +93,7 @@
 .rf-hero__actions pre {
 	margin: 0;
 	padding: 0.7rem 1.75rem;
-	font-size: 0.95rem;
+	font-size: var(--rf-text);
 	border-radius: var(--rf-radius-sm);
 	background: var(--rf-color-code-bg);
 	color: var(--rf-color-code-text);
@@ -102,10 +102,11 @@
 }
 .rf-hero h1,
 .rf-hero__headline {
+	/* Hero display headline — a one-off above the --rf-text scale's top step. */
 	font-size: 3.25rem;
-	font-weight: 800;
-	letter-spacing: -0.035em;
-	line-height: 1.1;
+	font-weight: var(--rf-weight-bold);
+	letter-spacing: var(--rf-tracking-tight);
+	line-height: var(--rf-leading-tight);
 	margin: 0 0 1rem;
 	background: linear-gradient(135deg, var(--rf-color-text) 0%, var(--rf-color-muted) 100%);
 	-webkit-background-clip: text;
@@ -115,8 +116,8 @@
 /* Higher specificity needed to override .rf-hero p (0,1,1) */
 .rf-hero p,
 .rf-hero .rf-hero__blurb {
-	font-size: 1.2rem;
-	line-height: 1.65;
+	font-size: var(--rf-text-xl);
+	line-height: var(--rf-leading-relaxed);
 	color: var(--rf-color-muted);
 	margin: 0 0 2rem;
 	max-width: 40rem;
@@ -152,8 +153,8 @@
 	padding: 0.7rem 1.75rem;
 	border-radius: var(--rf-radius-sm);
 	text-decoration: none;
-	font-weight: 600;
-	font-size: 0.95rem;
+	font-weight: var(--rf-weight-semibold);
+	font-size: var(--rf-text);
 	transition: all 200ms ease;
 }
 .rf-hero li:first-child a {
@@ -181,6 +182,23 @@
 	margin-top: 3rem;
 	border-radius: var(--rf-radius-lg);
 }
+/* BUG-001 — hero DOM is content-first (headline before media: the right
+ * reading order for the classic hero), inverting the shared media-first
+ * stacked contract in layouts/split.css. Counter it so the labels are
+ * truthful: `bottom` (the hero default) is plain block flow — media renders
+ * after the content, exactly the historical look — and an explicit `top`
+ * flips the visual order without touching the DOM. */
+.rf-hero[data-media-position="bottom"] {
+	display: block;
+}
+.rf-hero[data-media-position="top"] {
+	display: flex;
+	flex-direction: column-reverse;
+}
+.rf-hero[data-media-position="top"] > .rf-hero__media {
+	margin-top: 0;
+	margin-bottom: 3rem;
+}
 .rf-hero__media img {
 	display: block;
 	width: 100%;
@@ -190,6 +208,90 @@
 	margin: 0;
 }
 
+/* ── Cover mode (SPEC-101) — `media-position="cover"` ───────────────────
+ * The shared cover layer (dimensions/cover.css) does the grid stacking, the
+ * default scrim, and the overlay anchoring; these rules supply the hero-band
+ * specifics. This file imports after cover.css, so equal-specificity rules
+ * here win. */
+
+/* The section's generous padding moves to the overlaid content — on the root
+ * it would inset the media well (the backdrop must be flush with the band). */
+.rf-hero--cover {
+	padding: 0;
+}
+.rf-hero--cover > [data-name="content"] {
+	--rune-padding: 7rem 2rem 6.5rem;
+}
+
+/* Band height authority: a hero is a full-width band, not a portrait tile.
+ * Height comes from a viewport-aware floor — deliberately NOT a default
+ * aspect-ratio: with `aspect-ratio` + `min-height`, the ratio transfers a
+ * winning min-height back into *width* on narrow screens (a 22rem-tall 21/9
+ * band computes ~820px wide on a 375px phone — the band marches off-screen).
+ * `--cover-aspect: auto` releases the shared 3/4 tile default; an explicit
+ * `aspect` knob still lands as an inline style and owns the shape. */
+.rf-hero--cover {
+	--cover-aspect: auto;
+	min-height: clamp(22rem, 55vh, 40rem);
+}
+/* An explicit aspect owns the shape — drop the floor so the same
+ * ratio-vs-min-height transfer can't reintroduce the overflow. */
+.rf-hero--cover[data-aspect] {
+	min-height: 0;
+}
+
+/* The shared cover layer applies `container-type: size` (size containment) for
+ * its orientation query — under it the band cannot grow with its content, so
+ * tall content clips at min-height. The hero band doesn't use the orientation
+ * query (the centred-band default below covers `auto` placement), so release
+ * the containment and let the band stretch to fit. */
+.rf-hero--cover[data-media-position="cover"][data-cover-scope="full"] {
+	container-type: normal;
+}
+
+/* Named height scale (`height="sm…xl"`): an explicit band height. */
+.rf-hero--cover[data-height="sm"] { min-height: 20rem; }
+.rf-hero--cover[data-height="md"] { min-height: 28rem; }
+.rf-hero--cover[data-height="lg"] { min-height: 36rem; }
+.rf-hero--cover[data-height="xl"] { min-height: 44rem; }
+
+/* Mobile: the desktop overlay padding (7rem bands) would eat most of the well
+ * on a phone — tighten it so the content fits the band. */
+@media (max-width: 640px) {
+	.rf-hero--cover > [data-name="content"] {
+		--rune-padding: 3.5rem 1.25rem 3rem;
+	}
+}
+
+/* A full-bleed band sits flush — no media radius on the well. */
+.rf-hero--cover > [data-section="media"] {
+	border-radius: 0;
+}
+
+/* Legibility over the scrim: the primary action hard-codes white text above,
+ * which inverts to white-on-near-white once the cover scheme flips
+ * --rf-color-primary on the dark overlay. Use the scheme's tokens instead. */
+.rf-hero--cover li:first-child a {
+	color: var(--rf-color-on-accent, var(--rf-color-bg));
+}
+
+/* Centre-band default: a hero overlay reads as a centred band, not the
+ * cover-card caption strip — seat it mid-well unless the author anchors it
+ * with an explicit `content-place`. */
+.rf-hero--cover[data-media-position="cover"]:is([data-content-place="auto"], :not([data-content-place])) > [data-name="content"] {
+	align-self: center;
+	justify-self: stretch;
+}
+
+/* The default cover scrim is edge-weighted (a caption-strip treatment); under
+ * the centred band it would leave the headline on undarkened media. With no
+ * explicit `content-place`, darken the well evenly (slightly bottom-weighted).
+ * An explicit `content-place` re-enters the shared content-edge scrim contract,
+ * and `scrim="none"` still opts out. */
+.rf-hero--cover:is([data-content-place="auto"], :not([data-content-place])):not([data-scrim="none"]) > [data-section="media"]::after {
+	background-image: var(--cover-scrim-image, linear-gradient(rgb(0 0 0 / 0.45), rgb(0 0 0 / 0.35) 50%, rgb(0 0 0 / 0.55)));
+}
+
 /* Mobile: stack actions full-width so the code block and button line up */
 @media (max-width: 640px) {
 	.rf-hero__actions {

package/styles/runes/hint.css

@@ -46,14 +46,14 @@
 	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
 }
 .rf-hint__header [data-meta-value] {
-	font-weight: 600;
+	font-weight: var(--rf-weight-semibold);
 	text-transform: capitalize;
-	font-size: 0.8rem;
-	letter-spacing: 0.03em;
+	font-size: var(--rf-text-xs);
+	letter-spacing: var(--rf-tracking-wide);
 }
 .rf-hint__body {
-	font-size: 0.925rem;
-	line-height: 1.65;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-relaxed);
 }
 .rf-hint__body p:last-child {
 	margin-bottom: 0;
@@ -78,7 +78,7 @@
 	margin: 1rem 0 0;
 	padding: 0.625rem 1rem;
 	border-radius: var(--rf-radius-sm);
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 }
 .rf-hint--in-hero .rf-hint__header {
 	margin-bottom: 0.25rem;
@@ -88,5 +88,5 @@
 .rf-hint--in-feature {
 	margin: 0.75rem 0 0;
 	padding: 0.5rem 0.875rem;
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 }

package/styles/runes/howto.css

@@ -11,7 +11,7 @@
 }
 .rf-howto__content ul li {
 	padding: 0.2rem 0;
-	line-height: 1.6;
+	line-height: var(--rf-leading-relaxed);
 }
 .rf-howto__content ul li::marker {
 	color: var(--rf-color-primary);
@@ -29,7 +29,7 @@
 	padding: 0.625rem 0;
 	padding-left: 2.25rem;
 	position: relative;
-	line-height: 1.65;
+	line-height: var(--rf-leading-relaxed);
 }
 .rf-howto__content ol > li + li {
 	border-top: 1px solid var(--rf-color-border);
@@ -44,8 +44,8 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	font-size: 0.75rem;
-	font-weight: 700;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-bold);
 	color: var(--rf-color-primary);
 	background: var(--rf-color-surface);
 	border-radius: var(--rf-radius-full);
@@ -63,10 +63,10 @@
 	border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
 	padding: 0.75rem 1.25rem;
 	margin: 1.75rem 0 0;
-	font-size: 0.9125rem;
+	font-size: var(--rf-text-sm);
 	font-style: italic;
 	color: var(--rf-color-muted);
-	line-height: 1.6;
+	line-height: var(--rf-leading-relaxed);
 }
 .rf-howto__content blockquote p {
 	margin: 0;

package/styles/runes/itinerary.css

@@ -14,8 +14,8 @@
 	margin-bottom: 0;
 }
 .rf-itinerary-day__header {
-	font-size: 1.15rem;
-	font-weight: 700;
+	font-size: var(--rf-text-lg);
+	font-weight: var(--rf-weight-bold);
 	color: var(--rf-color-text);
 	margin-bottom: 1rem;
 	padding-bottom: 0.5rem;
@@ -58,26 +58,26 @@
 /* Stop time */
 .rf-itinerary-stop__time {
 	display: block;
-	font-size: 0.8rem;
-	font-weight: 600;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-primary);
-	letter-spacing: 0.02em;
+	letter-spacing: var(--rf-tracking-wide);
 	margin-bottom: 0.15rem;
 }
 
 /* Stop location */
 .rf-itinerary-stop__location {
 	display: block;
-	font-size: 1.05rem;
-	font-weight: 700;
+	font-size: var(--rf-text);
+	font-weight: var(--rf-weight-bold);
 	color: var(--rf-color-text);
 	margin-bottom: 0.35rem;
 }
 
 /* Stop body */
 .rf-itinerary-stop__body {
-	font-size: 0.925rem;
-	line-height: 1.65;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-relaxed);
 	color: var(--rf-color-muted);
 }
 .rf-itinerary-stop__body p:last-child {
@@ -90,8 +90,8 @@
 	position: absolute;
 	top: 0.15rem;
 	right: 0;
-	font-size: 0.75rem;
-	font-weight: 500;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-medium);
 	color: var(--rf-color-muted);
 	background: var(--rf-color-surface);
 	padding: 0.1rem 0.5rem;
@@ -162,7 +162,7 @@
 }
 .rf-itinerary--compact .rf-itinerary-stop__location {
 	display: inline;
-	font-size: 0.925rem;
+	font-size: var(--rf-text-sm);
 }
 .rf-itinerary--compact .rf-itinerary-stop__time {
 	display: inline;

package/styles/runes/juxtapose.css

@@ -27,8 +27,8 @@
 	padding: 0.25rem 0.75rem;
 	background: rgba(0, 0, 0, 0.6);
 	color: white;
-	font-size: 0.75rem;
-	font-weight: 600;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-semibold);
 	border-radius: var(--rf-radius-sm);
 	pointer-events: none;
 }
@@ -43,7 +43,7 @@
 .rf-juxtapose-panel__body {
 	/* Content fills the panel */
 }
-.rf-juxtapose-panel__body img {
+.rf-juxtapose-panel__body :is(img, .rf-placeholder) {
 	display: block;
 	width: 100%;
 	height: auto;
@@ -105,7 +105,7 @@
 
 .rf-juxtapose__divider-handle::before {
 	content: '\2194';  /* ↔ */
-	font-size: 1rem;
+	font-size: var(--rf-text);
 	color: var(--rf-color-muted);
 	line-height: 1;
 }
@@ -137,8 +137,8 @@
 	border-radius: var(--rf-radius-full);
 	background: transparent;
 	color: var(--rf-color-muted);
-	font-size: 0.75rem;
-	font-weight: 500;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-medium);
 	cursor: pointer;
 	transition: background 150ms ease, color 150ms ease;
 }

package/styles/runes/lore.css

@@ -16,8 +16,8 @@
 }
 .rf-lore > span[property="title"] {
 	display: block;
-	font-size: 1.5rem;
-	font-weight: 700;
+	font-size: var(--rf-text-2xl);
+	font-weight: var(--rf-weight-bold);
 	margin-bottom: 0.5rem;
 	color: var(--rf-color-text);
 }
@@ -36,8 +36,8 @@
 	padding: 0.5rem 1rem;
 	background: var(--rf-color-bg);
 	border-radius: var(--rf-radius-md);
-	font-size: 0.875rem;
-	font-weight: 500;
+	font-size: var(--rf-text-sm);
+	font-weight: var(--rf-weight-medium);
 	color: var(--rf-color-muted);
 	cursor: pointer;
 	z-index: 1;

package/styles/runes/map.css

@@ -36,7 +36,7 @@
 	padding: 1.5rem;
 	margin: 0;
 	list-style: decimal inside;
-	font-size: 0.925rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 }
 
@@ -73,7 +73,7 @@
 
 .rf-map-pin__group {
 	display: inline-block;
-	font-size: 0.75rem;
+	font-size: var(--rf-text-xs);
 	padding: 0.1rem 0.5rem;
 	border-radius: var(--rf-radius-sm, 0.25rem);
 	background: var(--rf-color-surface, #f0f0f0);
@@ -113,18 +113,18 @@
 .rf-map .leaflet-popup-content-wrapper {
 	border-radius: var(--rf-radius-md, 0.5rem);
 	font-family: var(--rf-font-sans, inherit);
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-text);
 }
 
 .rf-map .leaflet-popup-content {
 	margin: 0.75rem 1rem;
-	line-height: 1.5;
+	line-height: var(--rf-leading-normal);
 }
 
 .rf-map .leaflet-popup-content strong {
 	display: block;
-	font-size: 0.95rem;
+	font-size: var(--rf-text);
 	margin-bottom: 0.25rem;
 }
 
@@ -134,7 +134,7 @@
 
 .rf-map .leaflet-popup-content small {
 	color: var(--rf-color-muted);
-	font-size: 0.8rem;
+	font-size: var(--rf-text-xs);
 }
 
 .rf-map .leaflet-popup-content a {

package/styles/runes/mediatext.css

@@ -24,7 +24,7 @@
 }
 
 /* Media container */
-.rf-mediatext__media img {
+.rf-mediatext__media :is(img, .rf-placeholder) {
 	max-width: 100%;
 	height: auto;
 	border-radius: var(--rf-radius-md);

package/styles/runes/milestone.css

@@ -16,8 +16,8 @@
 	margin-bottom: 1.5rem;
 }
 .rf-milestone__body {
-	font-size: 0.925rem;
-	line-height: 1.65;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-relaxed);
 }
 .rf-milestone__body ul {
 	padding-left: 1.5rem;
@@ -33,10 +33,10 @@
 	margin-bottom: 1rem;
 }
 .rf-milestone__backlog-group-label {
-	font-size: 0.75rem;
-	font-weight: 700;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-bold);
 	text-transform: uppercase;
-	letter-spacing: 0.05em;
+	letter-spacing: var(--rf-tracking-wider);
 	color: var(--rf-color-muted);
 	margin: 0 0 0.375rem;
 }
@@ -53,8 +53,8 @@
 .rf-milestone__tab {
 	flex: 0 0 auto;
 	padding: 0.5rem 1rem;
-	font-size: 0.8125rem;
-	font-weight: 500;
+	font-size: var(--rf-text-sm);
+	font-weight: var(--rf-weight-medium);
 	color: var(--rf-color-muted);
 	background: none;
 	border: none;
@@ -70,7 +70,7 @@
 .rf-milestone__tab--active {
 	color: var(--rf-color-primary);
 	border-bottom-color: var(--rf-color-primary);
-	font-weight: 600;
+	font-weight: var(--rf-weight-semibold);
 }
 .rf-milestone__panels {
 	padding: 0;
@@ -93,13 +93,13 @@
 	margin-bottom: 0.375rem;
 }
 .rf-milestone__progress-label {
-	font-size: 0.75rem;
-	font-weight: 600;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-muted);
 }
 .rf-milestone__progress-count {
-	font-size: 0.75rem;
-	font-weight: 600;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-muted);
 }
 .rf-milestone__progress-bar {

package/styles/runes/mockup.css

@@ -93,8 +93,8 @@
 
 .rf-mockup__label {
 	text-align: center;
-	font-size: 0.75rem;
-	font-weight: 500;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-medium);
 	color: var(--rf-color-muted);
 	margin-top: 0.75rem;
 }
@@ -154,8 +154,8 @@
 	justify-content: space-between;
 	padding: 0 1.5rem;
 	height: 44px;
-	font-size: 0.75rem;
-	font-weight: 600;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-text);
 	background: var(--rf-color-bg);
 	position: relative;
@@ -168,8 +168,8 @@
 
 .rf-mockup__status-icons::after {
 	content: '\25CF\25CF\25CF \25AE 100%';
-	font-size: 0.625rem;
-	letter-spacing: 0.05em;
+	font-size: var(--rf-text-xs);
+	letter-spacing: var(--rf-tracking-wider);
 	color: var(--rf-color-muted);
 }
 
@@ -382,7 +382,7 @@
 }
 
 .rf-mockup__url {
-	font-size: 0.75rem;
+	font-size: var(--rf-text-xs);
 	font-family: var(--rf-font-sans);
 	color: var(--mockup-chrome-text);
 	white-space: nowrap;