@refrakt-md/lumina 0.20.2 → 0.22.0

package/styles/layouts/blog.css

@@ -45,9 +45,9 @@
 	display: inline-flex;
 	align-items: center;
 	gap: 0.5rem;
-	font-weight: 600;
-	font-size: 1.2rem;
-	letter-spacing: -0.02em;
+	font-weight: var(--rf-weight-semibold);
+	font-size: var(--rf-text-xl);
+	letter-spacing: var(--rf-tracking-tight);
 }
 .rf-blog-header img,
 .rf-blog-header p:first-child a > .rf-icon {
@@ -60,7 +60,7 @@
 	color: currentColor;
 }
 .rf-blog-header__inner p ~ p {
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 }
 .rf-blog-header__inner p ~ p a {
 	margin-left: 1.5rem;
@@ -93,16 +93,16 @@
 	max-width: 42rem;
 }
 .rf-blog-index__title {
-	font-size: 2.25rem;
-	font-weight: 800;
-	line-height: 1.15;
-	letter-spacing: -0.02em;
+	font-size: var(--rf-text-4xl);
+	font-weight: var(--rf-weight-bold);
+	line-height: var(--rf-leading-tight);
+	letter-spacing: var(--rf-tracking-tight);
 	margin: 0 0 1rem;
 	color: var(--rf-color-text);
 }
 .rf-blog-index__body {
 	margin-bottom: 2rem;
-	line-height: 1.8;
+	line-height: var(--rf-leading-relaxed);
 	color: var(--rf-color-muted);
 }
 .rf-blog-index__body:empty {
@@ -130,8 +130,8 @@
 	text-decoration: none;
 }
 .rf-blog-card__title {
-	font-size: 1.35rem;
-	font-weight: 700;
+	font-size: var(--rf-text-xl);
+	font-weight: var(--rf-weight-bold);
 	margin: 0 0 0.5rem;
 	color: var(--rf-color-text);
 }
@@ -139,7 +139,7 @@
 	display: flex;
 	align-items: center;
 	gap: 0.75rem;
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 	margin-bottom: 0.5rem;
 }
@@ -149,8 +149,8 @@
 }
 .rf-blog-card__desc {
 	margin: 0 0 0.75rem;
-	font-size: 0.95rem;
-	line-height: 1.6;
+	font-size: var(--rf-text);
+	line-height: var(--rf-leading-relaxed);
 	color: var(--rf-color-muted);
 }
 .rf-blog-card__tags {
@@ -160,8 +160,8 @@
 	margin-bottom: 0.75rem;
 }
 .rf-blog-card__link {
-	font-size: 0.85rem;
-	font-weight: 600;
+	font-size: var(--rf-text-sm);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-primary, var(--rf-color-text));
 }
 
@@ -175,10 +175,10 @@
 	border-bottom: 1px solid var(--rf-color-border);
 }
 .rf-blog-article__title {
-	font-size: 2.25rem;
-	font-weight: 800;
-	line-height: 1.15;
-	letter-spacing: -0.02em;
+	font-size: var(--rf-text-4xl);
+	font-weight: var(--rf-weight-bold);
+	line-height: var(--rf-leading-tight);
+	letter-spacing: var(--rf-tracking-tight);
 	margin: 0 0 1rem;
 	color: var(--rf-color-text);
 }
@@ -186,11 +186,11 @@
 	display: flex;
 	align-items: center;
 	gap: 0.75rem;
-	font-size: 0.9rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 }
 .rf-blog-article__meta time {
-	font-weight: 500;
+	font-weight: var(--rf-weight-medium);
 }
 .rf-blog-article__author::before {
 	content: '\00b7';
@@ -203,8 +203,8 @@
 	margin-top: 0.75rem;
 }
 .rf-blog-article__tag {
-	font-size: 0.75rem;
-	font-weight: 500;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-medium);
 	padding: 0.2rem 0.6rem;
 	border-radius: 9999px;
 	background: var(--rf-color-surface);
@@ -214,7 +214,7 @@
 
 /* ---- Article body typography ---- */
 .rf-blog-article__body {
-	line-height: 1.8;
+	line-height: var(--rf-leading-relaxed);
 }
 .rf-blog-article__body h2 {
 	margin-top: 2.5rem;
@@ -234,16 +234,16 @@
 .rf-blog-sidebar {
 	position: sticky;
 	top: 2.5rem;
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 }
 .rf-blog-sidebar h2,
 .rf-blog-sidebar h3,
 .rf-blog-sidebar h4 {
-	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);
 	margin-top: 0;
 	margin-bottom: 0.5rem;
@@ -269,7 +269,7 @@
 	border-top: 1px solid var(--rf-color-border);
 	padding: 2rem 1.5rem;
 	text-align: center;
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 }
 
@@ -282,7 +282,7 @@
 		grid-template-columns: 1fr;
 	}
 	.rf-blog-article__title {
-		font-size: 1.75rem;
+		font-size: var(--rf-text-3xl);
 	}
 	.rf-blog-sidebar {
 		position: static;

package/styles/layouts/default.css

@@ -31,9 +31,9 @@
 }
 .rf-header h1, .rf-header h2, .rf-header h3 {
 	margin: 0;
-	font-size: 1.2rem;
-	font-weight: 600;
-	letter-spacing: -0.02em;
+	font-size: var(--rf-text-xl);
+	font-weight: var(--rf-weight-semibold);
+	letter-spacing: var(--rf-tracking-tight);
 	line-height: 1;
 }
 .rf-header a {
@@ -48,9 +48,9 @@
 	display: inline-flex;
 	align-items: center;
 	gap: 0.5rem;
-	font-weight: 600;
-	font-size: 1.2rem;
-	letter-spacing: -0.02em;
+	font-weight: var(--rf-weight-semibold);
+	font-size: var(--rf-text-xl);
+	letter-spacing: var(--rf-tracking-tight);
 }
 .rf-header img,
 .rf-header p:first-child a > .rf-icon {
@@ -66,7 +66,7 @@
 	color: currentColor;
 }
 .rf-header__inner p ~ p {
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 }
 .rf-header__inner p ~ p a {
 	margin-left: 1.5rem;
@@ -234,7 +234,7 @@
 	border-top: 1px solid var(--rf-color-border);
 	background: var(--rf-color-bg);
 	color: var(--rf-color-muted);
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 }
 .rf-footer > * {
 	width: 100%;
@@ -242,6 +242,6 @@
 }
 .rf-footer p {
 	margin: 1.5rem 0 0;
-	font-size: 0.8rem;
+	font-size: var(--rf-text-xs);
 	color: var(--rf-color-muted);
 }

package/styles/layouts/docs.css

@@ -45,9 +45,9 @@
 	display: inline-flex;
 	align-items: center;
 	gap: 0.5rem;
-	font-weight: 600;
-	font-size: 1.2rem;
-	letter-spacing: -0.02em;
+	font-weight: var(--rf-weight-semibold);
+	font-size: var(--rf-text-xl);
+	letter-spacing: var(--rf-tracking-tight);
 }
 .rf-docs-header img,
 .rf-docs-header p:first-child a > .rf-icon {
@@ -60,7 +60,7 @@
 	color: currentColor;
 }
 .rf-docs-header__inner p ~ p {
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 }
 .rf-docs-header__inner p ~ p a {
 	margin-left: 1.5rem;
@@ -215,7 +215,7 @@ html:has(.rf-docs-header) {
 	color: var(--rf-color-text);
 }
 .rf-docs-toolbar__breadcrumb {
-	font-size: 0.8rem;
+	font-size: var(--rf-text-xs);
 	color: var(--rf-color-muted);
 	/* `flex: 1 1 0` (basis 0, not auto) so the breadcrumb shrinks against
 	 * the available space rather than starting at its full content width —
@@ -237,7 +237,7 @@ html:has(.rf-docs-header) {
 }
 .rf-docs-breadcrumb-page {
 	color: var(--rf-color-text);
-	font-weight: 500;
+	font-weight: var(--rf-weight-medium);
 }
 
 /* ---- Hide TOC on medium screens ---- */

package/styles/layouts/mobile.css

@@ -68,8 +68,8 @@
 .rf-mobile-panel .rf-nav--menubar .rf-nav-group__panel .rf-nav--columns .rf-nav-item__link {
 	display: block;
 	padding: 0;
-	font-size: 1.5rem;
-	font-weight: 700;
+	font-size: var(--rf-text-2xl);
+	font-weight: var(--rf-weight-bold);
 	color: var(--rf-color-text);
 	text-decoration: none;
 	background: transparent;

package/styles/layouts/on-this-page.css

@@ -1,14 +1,14 @@
 /* On This Page — TOC sidebar navigation */
 
 .rf-on-this-page {
-	font-size: 0.8rem;
+	font-size: var(--rf-text-xs);
 }
 
 .rf-on-this-page__title {
-	font-size: 0.7rem;
-	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, #64748b);
 	margin: 0 0 0.75rem;
 }
@@ -32,7 +32,7 @@
 	padding: 0.25rem 0.75rem;
 	color: var(--rf-color-muted, #64748b);
 	text-decoration: none;
-	line-height: 1.4;
+	line-height: var(--rf-leading-snug);
 }
 
 .rf-on-this-page__item a:hover {

package/styles/layouts/plan.css

@@ -14,8 +14,8 @@
 }
 
 .rf-plan-dashboard__section-title {
-	font-size: 1.125rem;
-	font-weight: 600;
+	font-size: var(--rf-text-lg);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-text, #212529);
 	margin-block-end: var(--rf-spacing-md, 1rem);
 	padding-block-end: var(--rf-spacing-sm, 0.5rem);
@@ -43,8 +43,8 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	font-size: 1.125rem;
-	font-weight: 700;
+	font-size: var(--rf-text-lg);
+	font-weight: var(--rf-weight-bold);
 	margin-block-end: var(--rf-spacing-lg, 1.5rem);
 	color: var(--rf-color-text, #212529);
 }
@@ -77,10 +77,10 @@
 }
 
 .rf-plan-sidebar__group-title {
-	font-size: 0.8125rem;
-	font-weight: 600;
+	font-size: var(--rf-text-sm);
+	font-weight: var(--rf-weight-semibold);
 	text-transform: uppercase;
-	letter-spacing: 0.05em;
+	letter-spacing: var(--rf-tracking-wider);
 	color: var(--rf-color-muted, #6c757d);
 	margin-block-end: var(--rf-spacing-sm, 0.5rem);
 }
@@ -100,7 +100,7 @@
 	border-radius: var(--rf-radius-sm, 0.25rem);
 	background: transparent;
 	color: var(--rf-color-muted, #6c757d);
-	font-size: 0.8125rem;
+	font-size: var(--rf-text-sm);
 	cursor: pointer;
 	text-align: start;
 	transition: background 0.15s ease;
@@ -124,12 +124,12 @@
 
 .rf-plan-sidebar__status-label {
 	flex: 1;
-	font-weight: 500;
+	font-weight: var(--rf-weight-medium);
 }
 
 .rf-plan-sidebar__status-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, #6c757d);
 	background: var(--rf-color-surface-active, #f1f3f5);
 	padding: 0 0.375rem;
@@ -152,7 +152,7 @@
 	border-radius: var(--rf-radius-sm, 0.25rem);
 	color: var(--rf-color-text, #212529);
 	text-decoration: none;
-	font-size: 0.8125rem;
+	font-size: var(--rf-text-sm);
 	transition: background 0.15s ease;
 }
 
@@ -179,7 +179,7 @@
 .rf-plan-sidebar__link--active {
 	background: var(--rf-color-info-bg, #e7f5ff);
 	color: var(--rf-color-info, #339af0);
-	font-weight: 600;
+	font-weight: var(--rf-weight-semibold);
 }
 
 .rf-plan-sidebar__link--focused {
@@ -200,17 +200,17 @@
 
 .rf-plan-sidebar__blocker-icon {
 	margin-left: auto;
-	font-size: 0.75rem;
+	font-size: var(--rf-text-xs);
 	color: var(--rf-color-danger, #ff6b6b);
 	flex-shrink: 0;
 }
 
 /* Views section in sidebar */
 .rf-plan-sidebar__view-header {
-	font-size: 0.6875rem;
-	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, #6c757d);
 	padding: 0.25rem 0.5rem;
 	margin-block-start: 0.25rem;
@@ -228,8 +228,8 @@
 }
 
 .rf-plan-sidebar__link .rf-plan-sidebar__view-count {
-	font-size: 0.6875rem;
-	font-weight: 600;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-muted, #6c757d);
 	background: var(--rf-color-surface-active, #f1f3f5);
 	padding: 0 0.375rem;
@@ -311,8 +311,8 @@
 }
 
 .rf-plan-toolbar__title {
-	font-size: 0.875rem;
-	font-weight: 600;
+	font-size: var(--rf-text-sm);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-text, #212529);
 	flex: 1;
 	min-width: 0;
@@ -367,8 +367,8 @@
 	padding: 0.5rem 1rem;
 	color: var(--rf-color-text, #212529);
 	text-decoration: none;
-	font-size: 0.8125rem;
-	line-height: 1.4;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-snug);
 }
 
 .rf-section-nav__link:hover {
@@ -381,7 +381,7 @@
 
 .rf-section-nav__item[data-active] .rf-section-nav__link {
 	color: var(--rf-color-info, #339af0);
-	font-weight: 600;
+	font-weight: var(--rf-weight-semibold);
 }
 
 /* ---- Responsive ---- */

package/styles/layouts/search.css

@@ -8,7 +8,7 @@
 	border-radius: var(--rf-radius-full);
 	background: var(--rf-color-surface);
 	color: var(--rf-color-muted);
-	font-size: 0.8rem;
+	font-size: var(--rf-text-xs);
 	font-family: var(--rf-font-sans);
 	cursor: pointer;
 	transition: border-color 0.15s, color 0.15s, background 0.15s;
@@ -37,8 +37,8 @@
 	border-radius: var(--rf-radius-sm);
 	background: var(--rf-color-bg);
 	font-family: var(--rf-font-sans);
-	font-size: 0.7rem;
-	line-height: 1.2;
+	font-size: var(--rf-text-xs);
+	line-height: var(--rf-leading-tight);
 	color: var(--rf-color-muted);
 }
 
@@ -84,7 +84,7 @@
 	border: none;
 	outline: none;
 	background: transparent;
-	font-size: 1rem;
+	font-size: var(--rf-text);
 	font-family: var(--rf-font-sans);
 	color: var(--rf-color-text);
 }
@@ -103,7 +103,7 @@
 	border-radius: var(--rf-radius-sm);
 	background: var(--rf-color-surface);
 	font-family: var(--rf-font-sans);
-	font-size: 0.7rem;
+	font-size: var(--rf-text-xs);
 	color: var(--rf-color-muted);
 	flex-shrink: 0;
 }
@@ -133,15 +133,15 @@
 }
 .rf-search-result__title {
 	display: block;
-	font-weight: 500;
-	font-size: 0.875rem;
-	line-height: 1.4;
+	font-weight: var(--rf-weight-medium);
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-snug);
 	margin-bottom: 0.125rem;
 }
 .rf-search-result__excerpt {
 	display: block;
-	font-size: 0.8rem;
-	line-height: 1.5;
+	font-size: var(--rf-text-xs);
+	line-height: var(--rf-leading-normal);
 	color: var(--rf-color-muted);
 }
 .rf-search-result__excerpt mark {
@@ -155,7 +155,7 @@
 .rf-search-dialog__empty {
 	text-align: center;
 	padding: 2rem 1rem;
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 }
 
@@ -166,7 +166,7 @@
 	gap: 1rem;
 	padding: 0.5rem 1rem;
 	border-top: 1px solid var(--rf-color-border);
-	font-size: 0.7rem;
+	font-size: var(--rf-text-xs);
 	color: var(--rf-color-muted);
 }
 .rf-search-dialog__footer kbd {
@@ -179,8 +179,8 @@
 	border-radius: 3px;
 	background: var(--rf-color-surface);
 	font-family: var(--rf-font-sans);
-	font-size: 0.65rem;
-	line-height: 1.4;
+	font-size: var(--rf-text-xs);
+	line-height: var(--rf-leading-snug);
 }
 
 /* Mobile */

package/styles/layouts/version-switcher.css

@@ -5,15 +5,15 @@
 	align-items: center;
 	gap: 0.5rem;
 	margin-bottom: 1.5rem;
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 }
 
 .rf-version-switcher__label {
 	color: var(--rf-color-muted);
-	font-weight: 500;
-	font-size: 0.8rem;
+	font-weight: var(--rf-weight-medium);
+	font-size: var(--rf-text-xs);
 	text-transform: uppercase;
-	letter-spacing: 0.03em;
+	letter-spacing: var(--rf-tracking-wide);
 }
 
 .rf-version-switcher__select {
@@ -23,11 +23,11 @@
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-sm, 0.25rem);
 	color: var(--rf-color-text);
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 	font-family: inherit;
 	padding: 0.3rem 2rem 0.3rem 0.6rem;
 	cursor: pointer;
-	line-height: 1.4;
+	line-height: var(--rf-leading-snug);
 	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
 	background-repeat: no-repeat;
 	background-position: right 0.5rem center;

package/styles/runes/accordion.css

@@ -5,9 +5,9 @@
 	margin-bottom: 1.5rem;
 }
 .rf-accordion__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;
@@ -19,13 +19,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-accordion__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
-.rf-accordion__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: 600; text-decoration: none; }
+.rf-accordion__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: var(--rf-weight-semibold); text-decoration: none; }
 .rf-accordion__eyebrow:has(a) a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
 .rf-accordion__headline {
 	margin-top: 0;
@@ -51,8 +51,8 @@
 	align-items: center;
 	gap: 0.5rem;
 	padding: 0.875rem 0rem;
-	font-weight: 600;
-	font-size: 0.95rem;
+	font-weight: var(--rf-weight-semibold);
+	font-size: var(--rf-text);
 	cursor: pointer;
 	user-select: none;
 	list-style: none;
@@ -112,8 +112,8 @@
  * `group-display="accordion"` panel, where the card's own typography
  * should govern. */
 .rf-accordion-item__body:not(:has([data-block])) {
-	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-accordion-item__body p:last-child {

package/styles/runes/aggregate.css

@@ -20,7 +20,7 @@
  * weight tuned to stand out modestly in prose. */
 .rf-aggregate[data-aggregate='count'] {
 	font-variant-numeric: tabular-nums;
-	font-weight: 600;
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-text);
 }
 

package/styles/runes/annotate.css

@@ -9,7 +9,7 @@
 	width: 40%;
 	margin: 0.25rem 0 0.5rem 1rem;
 	padding: 0.5rem 0 0.5rem 1rem;
-	font-size: 0.8125rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 	border-left: 2px solid var(--rf-color-border);
 }
@@ -20,7 +20,7 @@
 	vertical-align: baseline;
 	margin: 0 0.25rem;
 	padding: 0.125rem 0 0.125rem 0.5rem;
-	font-size: 0.8125rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 	border-left: 2px solid var(--rf-color-border);
 }
@@ -40,8 +40,8 @@
 	justify-content: center;
 	width: 1rem;
 	height: 1rem;
-	font-size: 0.625rem;
-	font-weight: 700;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-bold);
 	color: var(--rf-color-primary);
 	border: 1px solid var(--rf-color-primary);
 	border-radius: var(--rf-radius-full, 50%);
@@ -55,7 +55,7 @@
 	transform: translateX(-50%);
 	width: 16rem;
 	padding: 0.75rem;
-	font-size: 0.8125rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-text);
 	background: var(--rf-color-bg);
 	border: 1px solid var(--rf-color-border);

package/styles/runes/api.css

@@ -19,7 +19,7 @@
 	padding: 0.5rem 1rem;
 	margin: 0.75rem 0;
 	border-radius: 0 var(--rf-radius-sm) var(--rf-radius-sm) 0;
-	font-size: 0.9375rem;
+	font-size: var(--rf-text);
 }
 .rf-api__body blockquote::before {
 	content: none;