@refrakt-md/lumina 0.20.2 → 0.22.0

package/styles/runes/cta.css

@@ -15,9 +15,9 @@
 }
 /* Higher specificity needed to override .rf-cta p (0,1,1) */
 .rf-cta .rf-cta__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 0.75rem;
@@ -31,9 +31,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-cta .rf-cta__eyebrow:has(a):hover {
@@ -41,7 +41,7 @@
 }
 .rf-cta .rf-cta__eyebrow:has(a) a {
 	color: var(--rf-color-primary);
-	font-weight: 600;
+	font-weight: var(--rf-weight-semibold);
 	text-decoration: none;
 }
 .rf-cta .rf-cta__eyebrow:has(a) a::before {
@@ -57,12 +57,12 @@
 .rf-cta h2,
 .rf-cta h3,
 .rf-cta__headline {
-	font-size: 2.5rem;
-	font-weight: 750;
-	letter-spacing: -0.03em;
+	font-size: var(--rf-text-4xl);
+	font-weight: var(--rf-weight-bold);
+	letter-spacing: var(--rf-tracking-tight);
 	margin-bottom: 0.75rem;
 	margin-top: 0;
-	line-height: 1.15;
+	line-height: var(--rf-leading-tight);
 	background: linear-gradient(135deg, var(--rf-color-text) 0%, var(--rf-color-muted) 100%);
 	-webkit-background-clip: text;
 	-webkit-text-fill-color: transparent;
@@ -71,11 +71,11 @@
 /* Higher specificity needed to override .rf-cta p (0,1,1) */
 .rf-cta p,
 .rf-cta .rf-cta__blurb {
-	font-size: 1.15rem;
+	font-size: var(--rf-text-lg);
 	color: var(--rf-color-muted);
 	max-width: 540px;
 	margin: 0 auto 2rem;
-	line-height: 1.65;
+	line-height: var(--rf-leading-relaxed);
 }
 .rf-cta ul {
 	display: flex;
@@ -97,8 +97,8 @@
 	padding: 0.625rem 1.5rem;
 	border-radius: var(--rf-radius-sm);
 	text-decoration: none;
-	font-weight: 600;
-	font-size: 0.925rem;
+	font-weight: var(--rf-weight-semibold);
+	font-size: var(--rf-text-sm);
 	transition: all 200ms ease;
 }
 .rf-cta li:first-child a {

package/styles/runes/datatable.css

@@ -10,7 +10,7 @@
 	padding: 0.35rem 0.625rem;
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-sm);
-	font-size: 0.8rem;
+	font-size: var(--rf-text-xs);
 	font-family: var(--rf-font-sans);
 	background: var(--rf-color-bg);
 	color: var(--rf-color-text);
@@ -47,10 +47,10 @@
 .rf-datatable__content th {
 	text-align: left;
 	padding: 0.75rem 1rem;
-	font-size: 0.75rem;
-	font-weight: 600;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-semibold);
 	text-transform: uppercase;
-	letter-spacing: 0.05em;
+	letter-spacing: var(--rf-tracking-wider);
 	color: var(--rf-color-muted);
 	background: var(--rf-color-surface);
 }
@@ -58,13 +58,13 @@
 	color: var(--rf-color-text);
 }
 .rf-datatable__content .sort-indicator {
-	font-size: 0.65rem;
+	font-size: var(--rf-text-xs);
 	opacity: 0.7;
 }
 .rf-datatable__content td {
 	padding: 0.75rem 1rem;
 	border-bottom: 1px solid var(--rf-color-border);
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 }
 .rf-datatable__content tr:last-child td {
 	border-bottom: none;
@@ -86,7 +86,7 @@
 	border-radius: var(--rf-radius-sm);
 	background: transparent;
 	color: var(--rf-color-muted);
-	font-size: 0.8rem;
+	font-size: var(--rf-text-xs);
 	font-family: var(--rf-font-sans);
 	cursor: pointer;
 	transition: color 150ms ease, background 150ms ease;
@@ -100,6 +100,6 @@
 	cursor: not-allowed;
 }
 .rf-datatable__page-info {
-	font-size: 0.75rem;
+	font-size: var(--rf-text-xs);
 	color: var(--rf-color-muted);
 }

package/styles/runes/decision.css

@@ -17,8 +17,8 @@
 }
 
 .rf-decision__body {
-	font-size: 0.925rem;
-	line-height: 1.65;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-relaxed);
 }
 .rf-decision__body > section {
 	margin-top: 1rem;

package/styles/runes/design-context.css

@@ -1,7 +1,7 @@
 /* Design Context — unified token card wrapper */
 .rf-design-context__title {
-	font-size: 1.25rem;
-	font-weight: 700;
+	font-size: var(--rf-text-xl);
+	font-weight: var(--rf-weight-bold);
 	margin-bottom: 1rem;
 }
 .rf-design-context__sections {

package/styles/runes/details.css

@@ -6,8 +6,8 @@
 	align-items: center;
 	gap: 0.5rem;
 	padding: 0.75rem 0;
-	font-weight: 600;
-	font-size: 0.925rem;
+	font-weight: var(--rf-weight-semibold);
+	font-size: var(--rf-text-sm);
 	cursor: pointer;
 	user-select: none;
 	list-style: none;
@@ -30,8 +30,8 @@
 }
 .rf-details__body {
 	padding: 0 0 1rem;
-	font-size: 0.925rem;
-	line-height: 1.65;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-relaxed);
 }
 .rf-details__body p:last-child {
 	margin-bottom: 0;

package/styles/runes/diagram.css

@@ -7,8 +7,8 @@
 	overflow: hidden;
 }
 .rf-diagram__title {
-	font-weight: 600;
-	font-size: 1rem;
+	font-weight: var(--rf-weight-semibold);
+	font-size: var(--rf-text);
 	margin-bottom: 1rem;
 }
 .rf-diagram__container {
@@ -22,7 +22,7 @@
 }
 .rf-diagram__source {
 	text-align: left;
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 	margin: 0;
 }
 

package/styles/runes/diff.css

@@ -15,14 +15,14 @@
 	overflow-x: auto;
 	overflow-y: hidden;
 	overscroll-behavior-x: contain;
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 	background: var(--rf-color-code-bg);
 }
 .rf-diff__header {
 	padding: 0.5rem 1rem;
 	font-family: var(--rf-font-sans);
-	font-size: 0.75rem;
-	font-weight: 600;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-muted);
 	background: var(--rf-color-surface);
 	border-bottom: 1px solid var(--rf-color-border);
@@ -52,8 +52,8 @@
 	overflow-x: auto;
 	overscroll-behavior-x: contain;
 	font-family: var(--rf-font-mono);
-	font-size: 0.8125rem;
-	line-height: 1.6;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-relaxed);
 }
 
 /* WORK-304 — inner rows wrapper, sized as `display: grid; min-width:
@@ -118,7 +118,7 @@
 	width: 2.5em;
 	min-height: 1.6em;
 	text-align: right;
-	font-size: 0.75rem;
+	font-size: var(--rf-text-xs);
 	font-variant-numeric: tabular-nums;
 	user-select: none;
 	color: var(--rf-color-muted);

package/styles/runes/drawer.css

@@ -61,10 +61,10 @@ section.rf-drawer .rf-drawer__header {
 
 section.rf-drawer .rf-drawer__title {
 	margin: 0;
-	font-size: 1.05rem;
-	font-weight: 600;
+	font-size: var(--rf-text);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-primary);
-	letter-spacing: 0.01em;
+	letter-spacing: var(--rf-tracking-normal);
 }
 
 section.rf-drawer .rf-drawer__body > :first-child { margin-top: 0; }
@@ -77,7 +77,7 @@ section.rf-drawer .rf-drawer__footer {
 	margin-top: var(--rf-spacing-md);
 	padding-top: var(--rf-spacing-sm);
 	border-top: 1px solid var(--rf-drawer-border);
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 }
 section.rf-drawer .rf-drawer__footer > :first-child { margin-top: 0; }
@@ -134,8 +134,8 @@ dialog.rf-drawer .rf-drawer__header {
 }
 dialog.rf-drawer .rf-drawer__title {
 	margin: 0;
-	font-size: 1.05rem;
-	font-weight: 600;
+	font-size: var(--rf-text);
+	font-weight: var(--rf-weight-semibold);
 }
 
 dialog.rf-drawer .rf-drawer__close {
@@ -145,7 +145,7 @@ dialog.rf-drawer .rf-drawer__close {
 	cursor: pointer;
 	color: var(--rf-color-muted);
 	padding: var(--rf-spacing-xs) var(--rf-spacing-sm);
-	font-size: 1.25rem;
+	font-size: var(--rf-text-xl);
 	line-height: 1;
 	border-radius: var(--rf-radius-sm);
 	flex-shrink: 0;
@@ -170,7 +170,7 @@ dialog.rf-drawer .rf-drawer__footer {
 	padding: var(--rf-spacing-sm) var(--rf-spacing-lg);
 	border-top: 1px solid var(--rf-drawer-border);
 	background: var(--rf-drawer-bg);
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 }
 dialog.rf-drawer .rf-drawer__footer > :first-child { margin-top: 0; }

package/styles/runes/embed.css

@@ -20,7 +20,7 @@
 	border: none;
 }
 .rf-embed__fallback {
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 	margin-top: 0.5rem;
 }

package/styles/runes/event.css

@@ -16,8 +16,8 @@
 	background: var(--rf-color-primary);
 	color: var(--rf-color-on-primary);
 	border-radius: var(--rf-radius-md);
-	font-weight: 500;
-	font-size: 0.875rem;
+	font-weight: var(--rf-weight-medium);
+	font-size: var(--rf-text-sm);
 	text-decoration: none;
 }
 .rf-event__register a:hover {

package/styles/runes/expand.css

@@ -39,9 +39,9 @@
 .rf-expand[data-outline-scope] :is(h1, h2, h3, h4, h5, h6):first-child {
 	margin-top: 0;
 }
-.rf-expand[data-outline-scope] h1 { font-size: 1.5rem; }
-.rf-expand[data-outline-scope] h2 { font-size: 1.25rem; }
-.rf-expand[data-outline-scope] h3 { font-size: 1.1rem; }
+.rf-expand[data-outline-scope] h1 { font-size: var(--rf-text-2xl); }
+.rf-expand[data-outline-scope] h2 { font-size: var(--rf-text-xl); }
+.rf-expand[data-outline-scope] h3 { font-size: var(--rf-text-lg); }
 
 .rf-expand > :first-child { margin-top: 0; }
 .rf-expand > :last-child { margin-bottom: 0; }
@@ -49,7 +49,7 @@
 .rf-expand__canonical-link {
 	display: inline-block;
 	margin-top: var(--rf-spacing-sm);
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-primary);
 	text-decoration: none;
 }
@@ -67,6 +67,6 @@
 	background: var(--rf-color-danger-bg);
 	color: var(--rf-color-danger);
 	font-family: var(--rf-font-mono);
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 	border-radius: 0 var(--rf-radius-sm) var(--rf-radius-sm) 0;
 }

package/styles/runes/faction.css

@@ -59,9 +59,9 @@
 }
 .rf-faction-section__name {
 	display: block;
-	font-size: 1.25rem;
-	font-weight: 700;
-	line-height: 1.3;
+	font-size: var(--rf-text-xl);
+	font-weight: var(--rf-weight-bold);
+	line-height: var(--rf-leading-snug);
 	margin-bottom: 0.5rem;
 	color: var(--rf-color-text);
 }

package/styles/runes/feature.css

@@ -9,9 +9,9 @@
 	margin-bottom: 1.5rem;
 }
 .rf-feature__eyebrow {
-	font-size: 0.8125rem;
-	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 0.5rem;
@@ -23,13 +23,13 @@
 	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-feature__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
-.rf-feature__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: 600; text-decoration: none; }
+.rf-feature__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: var(--rf-weight-semibold); text-decoration: none; }
 .rf-feature__eyebrow:has(a) a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
 .rf-feature__headline {
 	margin-top: 0;
@@ -97,10 +97,10 @@
 	background: var(--rf-color-surface);
 }
 .rf-feature__feature-item dt {
-	font-weight: 650;
-	font-size: 1.125rem;
+	font-weight: var(--rf-weight-semibold);
+	font-size: var(--rf-text-lg);
 	margin-bottom: 0.75rem;
-	letter-spacing: -0.01em;
+	letter-spacing: var(--rf-tracking-tight);
 	color: var(--rf-color-text);
 }
 .rf-feature__feature-item dt:has(> .rf-icon) {
@@ -116,8 +116,8 @@
 .rf-feature__feature-item dd {
 	margin: 0;
 	color: var(--rf-color-muted);
-	font-size: 0.9rem;
-	line-height: 1.65;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-relaxed);
 }
 
 /* Context-aware: feature inside a hero — no top padding, tighter spacing */
@@ -132,3 +132,15 @@
 .rf-feature--in-grid {
 	padding: 0;
 }
+
+/* BUG-001 — content-first DOM inverts the shared media-first stacked contract
+ * (layouts/split.css): counter it so the labels are truthful. `bottom` (the
+ * default) is plain block flow — media after the content, the historical
+ * look; an explicit `top` flips the visual order without touching the DOM. */
+.rf-feature[data-media-position="bottom"] {
+	display: block;
+}
+.rf-feature[data-media-position="top"] {
+	display: flex;
+	flex-direction: column-reverse;
+}

package/styles/runes/figure.css

@@ -1,5 +1,5 @@
 /* Figure */
-.rf-figure img {
+.rf-figure :is(img, .rf-placeholder) {
 	display: block;
 	max-width: 100%;
 	height: auto;
@@ -12,7 +12,7 @@
  * inline-end. `object-fit: cover` crops only if the natural aspect doesn't
  * match — and `frame-anchor` already picks the focal point of that crop
  * (the same contract as a card's media slot). */
-.rf-figure[style*="--frame-aspect"] img {
+.rf-figure[style*="--frame-aspect"] :is(img, .rf-placeholder) {
 	width: 100%;
 	height: 100%;
 	object-fit: cover;
@@ -20,7 +20,7 @@
 }
 .rf-figure figcaption {
 	margin-top: 0.625rem;
-	font-size: 0.825rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 	text-align: center;
 	font-style: italic;

package/styles/runes/form.css

@@ -36,7 +36,7 @@
 /* Compact variant */
 .rf-form--compact {
 	gap: 0.75rem;
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 }
 .rf-form--compact .rf-form__body {
 	gap: 0.75rem;
@@ -45,7 +45,7 @@
 .rf-form--compact textarea,
 .rf-form--compact select {
 	padding: 0.375rem 0.625rem;
-	font-size: 0.8125rem;
+	font-size: var(--rf-text-sm);
 }
 /* Field */
 .rf-form-field {
@@ -54,8 +54,8 @@
 	gap: 0.375rem;
 }
 .rf-form-field label {
-	font-size: 0.875rem;
-	font-weight: 600;
+	font-size: var(--rf-text-sm);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-text);
 }
 .rf-form-field__required {
@@ -68,7 +68,7 @@
 	padding: 0.5rem 0.75rem;
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-md);
-	font-size: 0.9375rem;
+	font-size: var(--rf-text);
 	font-family: inherit;
 	color: var(--rf-color-text);
 	background: var(--rf-color-bg);
@@ -94,8 +94,8 @@
 	margin: 0.5rem 0 0;
 }
 .rf-form-fieldset legend {
-	font-size: 1.0625rem;
-	font-weight: 700;
+	font-size: var(--rf-text-lg);
+	font-weight: var(--rf-weight-bold);
 	color: var(--rf-color-text);
 	padding: 0;
 	margin-bottom: 0.75rem;
@@ -106,8 +106,8 @@
 	padding: 0;
 }
 .rf-form-choice-group legend {
-	font-size: 0.875rem;
-	font-weight: 600;
+	font-size: var(--rf-text-sm);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-text);
 	padding: 0;
 	margin-bottom: 0.5rem;
@@ -118,7 +118,7 @@
 	gap: 0.5rem;
 	padding: 0.375rem 0;
 	cursor: pointer;
-	font-size: 0.9375rem;
+	font-size: var(--rf-text);
 }
 .rf-form-choice input {
 	width: auto;
@@ -132,8 +132,8 @@
 	color: white;
 	border: none;
 	border-radius: var(--rf-radius-md);
-	font-size: 0.9375rem;
-	font-weight: 600;
+	font-size: var(--rf-text);
+	font-weight: var(--rf-weight-semibold);
 	cursor: pointer;
 	transition: background 0.15s;
 	align-self: flex-start;
@@ -146,13 +146,13 @@
 }
 /* Help & description */
 .rf-form__help {
-	font-size: 0.8125rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 	font-style: italic;
 	margin: 0;
 }
 .rf-form__text {
-	font-size: 0.9375rem;
+	font-size: var(--rf-text);
 	color: var(--rf-color-muted);
 	margin: 0;
 }
@@ -166,8 +166,8 @@
 .rf-form__status {
 	padding: 0.75rem 1rem;
 	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);
 }
 .rf-form__status--submitting {
 	background: var(--rf-color-surface);

package/styles/runes/gallery.css

@@ -34,7 +34,7 @@
 	border-radius: var(--rf-radius-md);
 	margin: 0;
 }
-.rf-gallery__item img {
+.rf-gallery__item :is(img, .rf-placeholder) {
 	width: 100%;
 	height: 100%;
 	object-fit: cover;
@@ -48,13 +48,13 @@
 	padding: 0.5rem 0.75rem;
 	background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
 	color: white;
-	font-size: 0.825rem;
+	font-size: var(--rf-text-sm);
 }
 
 /* Gallery caption */
 .rf-gallery > figcaption {
 	margin-top: 0.625rem;
-	font-size: 0.825rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 	text-align: center;
 	font-style: italic;
@@ -89,7 +89,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	font-size: 1.25rem;
+	font-size: var(--rf-text-xl);
 	opacity: 0.8;
 	transition: opacity 0.2s;
 }
@@ -124,7 +124,7 @@
 }
 /* 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 {
+.rf-gallery[data-layout="masonry"] .rf-gallery__item :is(img, .rf-placeholder) {
 	height: auto;
 }
 
@@ -159,7 +159,7 @@
 	border: none;
 	background: rgba(255, 255, 255, 0.15);
 	color: white;
-	font-size: 1.5rem;
+	font-size: var(--rf-text-2xl);
 	cursor: pointer;
 	display: flex;
 	align-items: center;
@@ -175,7 +175,7 @@
 	border: none;
 	background: rgba(255, 255, 255, 0.15);
 	color: white;
-	font-size: 1.5rem;
+	font-size: var(--rf-text-2xl);
 	cursor: pointer;
 	display: flex;
 	align-items: center;