@refrakt-md/lumina 0.32.0 → 0.34.0

package/styles/runes/pricing.css

@@ -1,126 +1,136 @@
 @layer skin {
-/* Pricing — skin. The tiers grid, tier flex-column, eyebrow stretched-link, and
+	/* Pricing — skin. The tiers grid, tier flex-column, eyebrow stretched-link, and
  * list resets live in @refrakt-md/skeleton (styles/runes/pricing.css). */
-.rf-pricing {
-	padding: 2rem 0;
-}
-.rf-pricing > header,
-.rf-pricing__preamble {
-	gap: 0.25rem;
-	text-align: center;
-	margin-bottom: 2rem;
-}
-.rf-pricing > header h1,
-.rf-pricing__headline {
-	margin-top: 0;
-}
-.rf-pricing__eyebrow {
-	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;
-}
-.rf-pricing__eyebrow:has(a) {
-	padding: 0.25rem 0.875rem;
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-full);
-	color: var(--rf-color-text);
-	font-weight: var(--rf-weight-normal);
-	text-transform: none;
-	letter-spacing: var(--rf-tracking-normal);
-	transition: border-color 150ms ease;
-}
-.rf-pricing__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
-.rf-pricing__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: var(--rf-weight-semibold); text-decoration: none; }
-.rf-pricing__eyebrow:has(a) a::before { border-radius: inherit; }
-.rf-pricing__blurb {
-	color: var(--rf-color-muted);
-	margin-bottom: 0;
-}
-.rf-pricing__image {
-	margin-bottom: 1rem;
-}
-.rf-pricing__tiers,
-.rf-pricing > ul[data-layout="grid"] {
-	gap: 1.5rem;
-	padding: 0;
-	margin: 0;
-}
-.rf-tier {
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-md);
-	padding: 2rem;
-	background: var(--rf-color-bg);
-	transition: box-shadow 200ms ease;
-}
-.rf-tier:hover {
-	box-shadow: var(--rf-shadow-md);
-}
-.rf-tier--featured {
-	border-color: var(--rf-color-primary);
-	box-shadow: var(--rf-shadow-lg);
-}
-.rf-tier h1[property="name"] {
-	margin: 0 0 0.5rem;
-	font-size: var(--rf-text-lg);
-	font-weight: var(--rf-weight-semibold);
-	color: var(--rf-color-muted);
-}
-.rf-tier p[property="price"] {
-	font-size: var(--rf-text-4xl);
-	font-weight: var(--rf-weight-bold);
-	letter-spacing: var(--rf-tracking-tight);
-	color: var(--rf-color-text);
-	margin-bottom: 1.5rem;
-	line-height: var(--rf-leading-tight);
-}
-.rf-tier__body ul {
-	padding-left: 0;
-	margin: 0 0 1.5rem;
-}
-.rf-tier__body li {
-	padding: 0.375rem 0;
-	font-size: var(--rf-text-sm);
-	color: var(--rf-color-muted);
-}
-.rf-tier__body li::before {
-	content: '\2713';
-	margin-right: 0.5rem;
-	color: var(--rf-color-success);
-	font-weight: var(--rf-weight-semibold);
-}
-.rf-tier__body a {
-	text-align: center;
-	padding: 0.625rem 1.5rem;
-	border-radius: var(--rf-radius-sm);
-	font-weight: var(--rf-weight-semibold);
-	font-size: var(--rf-text-sm);
-	text-decoration: none;
-	transition: background-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
-}
-.rf-tier:not(.rf-tier--featured) a {
-	background: var(--rf-color-surface);
-	color: var(--rf-color-text);
-	border: 1px solid var(--rf-color-border);
-}
-.rf-tier:not(.rf-tier--featured) a:hover {
-	background: var(--rf-color-surface-hover);
-	text-decoration: none;
-}
-.rf-tier--featured a {
-	background: var(--rf-color-primary);
-	color: white;
-}
-.rf-tier--featured a:hover {
-	background: var(--rf-color-primary-hover);
-	box-shadow: var(--rf-shadow-sm);
-	transform: translateY(-1px);
-	text-decoration: none;
-}
-.rf-tier__body p:has(a) {
-	margin-bottom: 0;
-}
-
+	.rf-pricing {
+		padding: 2rem 0;
+	}
+	.rf-pricing > header,
+	.rf-pricing__preamble {
+		gap: 0.25rem;
+		text-align: center;
+		margin-bottom: 2rem;
+	}
+	.rf-pricing > header h1,
+	.rf-pricing__headline {
+		margin-top: 0;
+	}
+	.rf-pricing__eyebrow {
+		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;
+	}
+	.rf-pricing__eyebrow:has(a) {
+		padding: 0.25rem 0.875rem;
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-full);
+		color: var(--rf-color-text);
+		font-weight: var(--rf-weight-normal);
+		text-transform: none;
+		letter-spacing: var(--rf-tracking-normal);
+		transition: border-color 150ms ease;
+	}
+	.rf-pricing__eyebrow:has(a):hover {
+		border-color: var(--rf-color-muted);
+	}
+	.rf-pricing__eyebrow:has(a) a {
+		color: var(--rf-color-primary);
+		font-weight: var(--rf-weight-semibold);
+		text-decoration: none;
+	}
+	.rf-pricing__eyebrow:has(a) a::before {
+		border-radius: inherit;
+	}
+	.rf-pricing__blurb {
+		color: var(--rf-color-muted);
+		margin-bottom: 0;
+	}
+	.rf-pricing__image {
+		margin-bottom: 1rem;
+	}
+	.rf-pricing__tiers,
+	.rf-pricing > ul[data-layout="grid"] {
+		gap: 1.5rem;
+		padding: 0;
+		margin: 0;
+	}
+	.rf-tier {
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-md);
+		padding: 2rem;
+		background: var(--rf-color-bg);
+		transition: box-shadow 200ms ease;
+	}
+	.rf-tier:hover {
+		box-shadow: var(--rf-shadow-md);
+	}
+	.rf-tier--featured {
+		border-color: var(--rf-color-primary);
+		box-shadow: var(--rf-shadow-lg);
+	}
+	.rf-tier h1[property="name"] {
+		margin: 0 0 0.5rem;
+		font-size: var(--rf-text-lg);
+		font-weight: var(--rf-weight-semibold);
+		color: var(--rf-color-muted);
+	}
+	.rf-tier p[property="price"] {
+		font-size: var(--rf-text-4xl);
+		font-weight: var(--rf-weight-bold);
+		letter-spacing: var(--rf-tracking-tight);
+		color: var(--rf-color-text);
+		margin-bottom: 1.5rem;
+		line-height: var(--rf-leading-tight);
+	}
+	.rf-tier__body ul {
+		padding-left: 0;
+		margin: 0 0 1.5rem;
+	}
+	.rf-tier__body li {
+		padding: 0.375rem 0;
+		font-size: var(--rf-text-sm);
+		color: var(--rf-color-muted);
+	}
+	.rf-tier__body li::before {
+		content: "\2713";
+		margin-right: 0.5rem;
+		color: var(--rf-color-success);
+		font-weight: var(--rf-weight-semibold);
+	}
+	.rf-tier__body a {
+		text-align: center;
+		padding: 0.625rem 1.5rem;
+		border-radius: var(--rf-radius-sm);
+		font-weight: var(--rf-weight-semibold);
+		font-size: var(--rf-text-sm);
+		text-decoration: none;
+		transition:
+			background-color 200ms ease,
+			box-shadow 200ms ease,
+			transform 200ms ease;
+	}
+	.rf-tier:not(.rf-tier--featured) a {
+		background: var(--rf-color-surface);
+		color: var(--rf-color-text);
+		border: 1px solid var(--rf-color-border);
+	}
+	.rf-tier:not(.rf-tier--featured) a:hover {
+		background: var(--rf-color-surface-hover);
+		text-decoration: none;
+	}
+	.rf-tier--featured a {
+		background: var(--rf-color-primary);
+		color: white;
+	}
+	.rf-tier--featured a:hover {
+		background: var(--rf-color-primary-hover);
+		box-shadow: var(--rf-shadow-sm);
+		transform: translateY(-1px);
+		text-decoration: none;
+	}
+	.rf-tier__body p:has(a) {
+		margin-bottom: 0;
+	}
 }

package/styles/runes/progress.css

@@ -1,30 +1,35 @@
 @layer skin {
-/* progress — skin. The flex row, value auto-push, track box, and fill box live in
+	/* progress — skin. The flex row, value auto-push, track box, and fill box live in
  * @refrakt-md/skeleton (styles/runes/progress.css). */
-.rf-progress {
-	gap: var(--rf-spacing-xs) var(--rf-spacing-sm);
-	margin: var(--rf-spacing-sm) 0;
-}
-.rf-progress__label {
-	font-weight: var(--rf-weight-semibold);
-	color: var(--rf-color-text);
-}
-.rf-progress__value {
-	font-weight: var(--rf-weight-semibold);
-	color: var(--rf-color-text);
-}
-.rf-progress__track {
-	border-radius: var(--rf-radius-pill, 999px);
-	background: var(--rf-color-surface-hover);
-}
-.rf-progress__fill {
-	border-radius: inherit;
-	background: var(--rf-color-primary);
-	transition: width 0.3s ease;
-}
-/* Sentiment variants tint the fill. */
-.rf-progress--positive .rf-progress__fill { background: var(--rf-color-success); }
-.rf-progress--caution .rf-progress__fill { background: var(--rf-color-warning); }
-.rf-progress--negative .rf-progress__fill { background: var(--rf-color-danger); }
-
+	.rf-progress {
+		gap: var(--rf-spacing-xs) var(--rf-spacing-sm);
+		margin: var(--rf-spacing-sm) 0;
+	}
+	.rf-progress__label {
+		font-weight: var(--rf-weight-semibold);
+		color: var(--rf-color-text);
+	}
+	.rf-progress__value {
+		font-weight: var(--rf-weight-semibold);
+		color: var(--rf-color-text);
+	}
+	.rf-progress__track {
+		border-radius: var(--rf-radius-pill, 999px);
+		background: var(--rf-color-surface-hover);
+	}
+	.rf-progress__fill {
+		border-radius: inherit;
+		background: var(--rf-color-primary);
+		transition: width 0.3s ease;
+	}
+	/* Sentiment variants tint the fill. */
+	.rf-progress--positive .rf-progress__fill {
+		background: var(--rf-color-success);
+	}
+	.rf-progress--caution .rf-progress__fill {
+		background: var(--rf-color-warning);
+	}
+	.rf-progress--negative .rf-progress__fill {
+		background: var(--rf-color-danger);
+	}
 }

package/styles/runes/pullquote.css

@@ -1,100 +1,99 @@
 @layer skin {
-/* PullQuote */
-.rf-pullquote {
-	margin: 2rem 0;
-	padding: 1.5rem 2rem;
-	border: none;
-	font-size: var(--rf-text-xl);
-	font-style: italic;
-	font-weight: var(--rf-weight-medium);
-	line-height: var(--rf-leading-normal);
-	color: var(--rf-color-text);
-	background: none;
-	border-radius: 0;
-}
-.rf-pullquote::before {
-	content: '\201C';
-	/* Decorative oversized quote glyph — a display one-off above the type scale. */
-	font-size: 4rem;
-	font-style: normal;
-	font-weight: var(--rf-weight-bold);
-	line-height: 1;
-	color: var(--rf-color-primary);
-	opacity: 0.4;
-}
-.rf-pullquote p {
-	margin: 0;
-}
-.rf-pullquote p + p {
-	margin-top: 0.75rem;
-}
-
-/* Alignment — block modes */
-.rf-pullquote--center {
-	text-align: center;
-	max-width: 80%;
-}
-.rf-pullquote--left {
-	text-align: left;
-	border-left: 2px solid var(--rf-color-primary);
-	padding-left: 1.5rem;
-}
-.rf-pullquote--right {
-	text-align: right;
-	border-right: 2px solid var(--rf-color-primary);
-	padding-right: 1.5rem;
-}
+	/* PullQuote */
+	.rf-pullquote {
+		margin: 2rem 0;
+		padding: 1.5rem 2rem;
+		border: none;
+		font-size: var(--rf-text-xl);
+		font-style: italic;
+		font-weight: var(--rf-weight-medium);
+		line-height: var(--rf-leading-normal);
+		color: var(--rf-color-text);
+		background: none;
+		border-radius: 0;
+	}
+	.rf-pullquote::before {
+		content: "\201C";
+		/* Decorative oversized quote glyph — a display one-off above the type scale. */
+		font-size: 4rem;
+		font-style: normal;
+		font-weight: var(--rf-weight-bold);
+		line-height: 1;
+		color: var(--rf-color-primary);
+		opacity: 0.4;
+	}
+	.rf-pullquote p {
+		margin: 0;
+	}
+	.rf-pullquote p + p {
+		margin-top: 0.75rem;
+	}
 
-/* Float modes — left/right pull quotes can float for text wrapping */
-.rf-pullquote[data-align="left"] {
-	margin: 0.5rem 2rem 1rem 0;
-}
-.rf-pullquote[data-align="right"] {
-	margin: 0.5rem 0 1rem 2rem;
-}
+	/* Alignment — block modes */
+	.rf-pullquote--center {
+		text-align: center;
+		max-width: 80%;
+	}
+	.rf-pullquote--left {
+		text-align: left;
+		border-left: 2px solid var(--rf-color-primary);
+		padding-left: 1.5rem;
+	}
+	.rf-pullquote--right {
+		text-align: right;
+		border-right: 2px solid var(--rf-color-primary);
+		padding-right: 1.5rem;
+	}
 
-/* Style: accent — uses primary color background tint */
-.rf-pullquote--accent {
-	background: color-mix(in srgb, var(--rf-color-primary) 8%, transparent);
-	border-radius: var(--rf-radius-md);
-	padding: 2rem 2.5rem;
-}
-.rf-pullquote--accent::before {
-	color: var(--rf-color-primary);
-	opacity: 0.5;
-}
+	/* Float modes — left/right pull quotes can float for text wrapping */
+	.rf-pullquote[data-align="left"] {
+		margin: 0.5rem 2rem 1rem 0;
+	}
+	.rf-pullquote[data-align="right"] {
+		margin: 0.5rem 0 1rem 2rem;
+	}
 
-/* Style: editorial — decorative top/bottom rules */
-.rf-pullquote--editorial {
-	border-top: 2px solid var(--rf-color-border);
-	border-bottom: 2px solid var(--rf-color-border);
-	padding: 1.75rem 0;
-	font-family: Georgia, 'Times New Roman', serif;
-	letter-spacing: var(--rf-tracking-normal);
-}
+	/* Style: accent — uses primary color background tint */
+	.rf-pullquote--accent {
+		background: color-mix(in srgb, var(--rf-color-primary) 8%, transparent);
+		border-radius: var(--rf-radius-md);
+		padding: 2rem 2.5rem;
+	}
+	.rf-pullquote--accent::before {
+		color: var(--rf-color-primary);
+		opacity: 0.5;
+	}
 
-/* Reset inner blockquote — global blockquote styles shouldn't apply here */
-.rf-pullquote blockquote {
-	border: none;
-	background: none;
-	padding: 0;
-	margin: 0;
-	border-radius: 0;
-	color: inherit;
-}
-.rf-pullquote blockquote::before {
-	display: none;
-}
+	/* Style: editorial — decorative top/bottom rules */
+	.rf-pullquote--editorial {
+		border-top: 2px solid var(--rf-color-border);
+		border-bottom: 2px solid var(--rf-color-border);
+		padding: 1.75rem 0;
+		font-family: Georgia, "Times New Roman", serif;
+		letter-spacing: var(--rf-tracking-normal);
+	}
 
-/* Responsive — floated quotes become full-width on mobile */
-@media (max-width: 768px) {
-	.rf-pullquote[data-align="left"],
-	.rf-pullquote[data-align="right"] {
-		margin: 1.5rem 0;
+	/* Reset inner blockquote — global blockquote styles shouldn't apply here */
+	.rf-pullquote blockquote {
+		border: none;
+		background: none;
+		padding: 0;
+		margin: 0;
+		border-radius: 0;
+		color: inherit;
 	}
-	.rf-pullquote--center {
-		max-width: 100%;
+	.rf-pullquote blockquote::before {
+		display: none;
 	}
-}
 
+	/* Responsive — floated quotes become full-width on mobile */
+	@media (max-width: 768px) {
+		.rf-pullquote[data-align="left"],
+		.rf-pullquote[data-align="right"] {
+			margin: 1.5rem 0;
+		}
+		.rf-pullquote--center {
+			max-width: 100%;
+		}
+	}
 }

package/styles/runes/realm.css

@@ -1,65 +1,64 @@
 @layer skin {
-/* Realm — split/stacked geometry, the title, and the metadata def-list all
+	/* Realm — split/stacked geometry, the title, and the metadata def-list all
  * come from the shared layers: layouts/split.css ([data-layout] +
  * [data-section="media"]), dimensions/sections.css ([data-section="title"] /
  * "preamble"), and dimensions/metadata.css ([data-zone-layout]). This file
  * only carries realm-specific chrome. */
 
-/* Thin-edge inset model (matches `.rf-card` / `.rf-recipe`): card outer padding
+	/* 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 {
+		--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)));
-}
+	.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
+	/* 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);
-}
+	.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);
+	}
 
-.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);
-}
+	.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 */
-.rf-realm__sections {
-	gap: 1rem;
-}
-.rf-realm__content ul,
-.rf-realm__content ol {
-	padding-left: 1.5rem;
-}
-
-/* Realm Section */
-.rf-realm-section {
-	padding: 0.75rem 0;
-	border-top: 1px solid var(--rf-color-border);
-}
-.rf-realm-section__name {
-	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);
-}
-.rf-realm-section__body ul,
-.rf-realm-section__body ol {
-	padding-left: 1.5rem;
-}
+	/* Content */
+	.rf-realm__sections {
+		gap: 1rem;
+	}
+	.rf-realm__content ul,
+	.rf-realm__content ol {
+		padding-left: 1.5rem;
+	}
 
+	/* Realm Section */
+	.rf-realm-section {
+		padding: 0.75rem 0;
+		border-top: 1px solid var(--rf-color-border);
+	}
+	.rf-realm-section__name {
+		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);
+	}
+	.rf-realm-section__body ul,
+	.rf-realm-section__body ol {
+		padding-left: 1.5rem;
+	}
 }