@refrakt-md/lumina 0.7.2 → 0.8.0

package/styles/runes/mockup.css

@@ -6,12 +6,42 @@
 	--mockup-bezel: var(--mockup-bezel-dark);
 	--mockup-chrome: #2a2a2a;
 	--mockup-chrome-text: #999;
-	--mockup-shadow: var(--rf-shadow-lg);
 	--mockup-scale: 1;
-	display: inline-block;
+	display: block;
+	width: 100%;
+	container-type: inline-size;
 	margin: 1.5rem 0;
-	transform: scale(var(--mockup-scale));
+	background-color: transparent;
+}
+
+/* Inside a placed showcase, let device frame use natural width */
+.rf-showcase[data-place] .rf-mockup {
+	width: auto;
+	max-width: 100%;
+	container-type: normal;
+}
+.rf-showcase[data-place] .rf-mockup__frame {
+	zoom: var(--mockup-scale, 1);
+}
+
+/* ── Fit mode: none (native pixel size) ── */
+
+.rf-mockup[data-fit="none"] {
+	display: inline-block;
+	width: auto;
+	container-type: normal;
+}
+
+.rf-mockup[data-fit="none"] .rf-mockup__frame {
+	zoom: normal;
+	transform: scale(var(--mockup-scale, 1));
 	transform-origin: top center;
+	margin-inline: 0;
+}
+
+.rf-mockup[data-fit="none"].rf-mockup--browser,
+.rf-mockup[data-fit="none"].rf-mockup--browser-dark {
+	display: block;
 }
 
 /* ── Color modifiers ── */
@@ -20,14 +50,12 @@
 	--mockup-bezel: var(--mockup-bezel-dark);
 	--mockup-chrome: #2a2a2a;
 	--mockup-chrome-text: #999;
-	--mockup-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
 }
 
 .rf-mockup--light {
 	--mockup-bezel: var(--mockup-bezel-light);
 	--mockup-chrome: #f5f5f5;
 	--mockup-chrome-text: #666;
-	--mockup-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
 }
 
 .rf-mockup--auto {
@@ -40,7 +68,8 @@
 
 .rf-mockup__frame {
 	position: relative;
-	box-shadow: var(--mockup-shadow);
+	margin-inline: auto;
+	zoom: calc(var(--mockup-scale, 1) * min(1, tan(atan2(100cqi, var(--mockup-device-width, 100cqi)))));
 }
 
 /* ── Viewport (content area) ── */
@@ -49,6 +78,9 @@
 	overflow: auto;
 	background: var(--rf-color-bg);
 }
+.rf-mockup__viewport img {
+	display: block;
+}
 
 .rf-mockup__viewport > *:first-child {
 	margin-top: 0;
@@ -165,6 +197,7 @@
 /* ── iPhone 15 ── */
 
 .rf-mockup--iphone-15 .rf-mockup__frame {
+	--mockup-device-width: 393px;
 	width: 393px;
 	border-radius: 55px;
 }
@@ -182,6 +215,7 @@
 /* ── iPhone SE ── */
 
 .rf-mockup--iphone-se .rf-mockup__frame {
+	--mockup-device-width: 375px;
 	width: 375px;
 	border-radius: 40px;
 }
@@ -223,6 +257,7 @@
 /* ── Pixel ── */
 
 .rf-mockup--pixel .rf-mockup__frame {
+	--mockup-device-width: 412px;
 	width: 412px;
 	border-radius: 40px;
 }
@@ -239,6 +274,7 @@
 /* ── Generic phone ── */
 
 .rf-mockup--phone .rf-mockup__frame {
+	--mockup-device-width: 390px;
 	width: 390px;
 	border-radius: 48px;
 }
@@ -259,6 +295,7 @@
 /* ── iPad ── */
 
 .rf-mockup--ipad .rf-mockup__frame {
+	--mockup-device-width: 820px;
 	width: 820px;
 	border-radius: 24px;
 }
@@ -275,6 +312,7 @@
 /* ── Generic tablet ── */
 
 .rf-mockup--tablet .rf-mockup__frame {
+	--mockup-device-width: 800px;
 	width: 800px;
 	border-radius: 20px;
 }
@@ -357,7 +395,6 @@
 
 .rf-mockup--browser .rf-mockup__frame {
 	width: 100%;
-	max-width: 960px;
 	border-radius: var(--rf-radius-lg) var(--rf-radius-lg) 0 0;
 	overflow: hidden;
 }
@@ -367,7 +404,7 @@
 }
 
 .rf-mockup--browser .rf-mockup__viewport {
-	height: 800px;
+	min-height: 12rem;
 	border: 1px solid var(--rf-color-border);
 	border-top: none;
 }
@@ -376,7 +413,6 @@
 
 .rf-mockup--browser-dark .rf-mockup__frame {
 	width: 100%;
-	max-width: 960px;
 	border-radius: var(--rf-radius-lg) var(--rf-radius-lg) 0 0;
 	overflow: hidden;
 }
@@ -391,7 +427,7 @@
 }
 
 .rf-mockup--browser-dark .rf-mockup__viewport {
-	height: 800px;
+	min-height: 12rem;
 	border: 1px solid rgba(255, 255, 255, 0.1);
 	border-top: none;
 }
@@ -399,8 +435,8 @@
 /* ── MacBook ── */
 
 .rf-mockup--macbook .rf-mockup__frame {
+	--mockup-device-width: 1440px;
 	width: 1440px;
-	max-width: 100%;
 }
 
 .rf-mockup--macbook .rf-mockup__title-bar {
@@ -410,7 +446,7 @@
 }
 
 .rf-mockup--macbook .rf-mockup__viewport {
-	height: 900px;
+	min-height: 12rem;
 	border: 3px solid var(--mockup-bezel);
 	border-top: none;
 	border-bottom: none;
@@ -441,6 +477,7 @@
 /* ── Watch ── */
 
 .rf-mockup--watch .rf-mockup__frame {
+	--mockup-device-width: 198px;
 	width: 198px;
 	border-radius: 40px;
 	position: relative;
@@ -469,10 +506,6 @@
 
 /* ── None (no frame) ── */
 
-.rf-mockup--none .rf-mockup__frame {
-	box-shadow: none;
-}
-
 .rf-mockup--none .rf-mockup__viewport {
 	border: 1px dashed var(--rf-color-border);
 	border-radius: var(--rf-radius-sm);
@@ -482,6 +515,9 @@
    CONTEXT: inside preview
    ═══════════════════════════════════════ */
 
+.rf-grid .rf-mockup {
+	justify-self: center;
+}
 .rf-preview .rf-mockup {
 	margin: 0;
 }

package/styles/runes/page-section.css

@@ -12,6 +12,7 @@
 	gap: 3rem;
 	align-items: start;
 }
+
 @media (max-width: 768px) {
 	.rf-page-section--split {
 		grid-template-columns: 1fr;

package/styles/runes/playlist.css

@@ -0,0 +1,88 @@
+/* Playlist */
+.rf-playlist {
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-lg);
+	margin: 1.5rem 0;
+	overflow: hidden;
+}
+
+/* Header: cover art + title + description */
+.rf-playlist__header {
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+	padding: 1.5rem 1.5rem 1rem;
+}
+.rf-playlist__header img {
+	width: 100%;
+	max-width: 200px;
+	aspect-ratio: 1;
+	object-fit: cover;
+	border-radius: var(--rf-radius-md);
+}
+.rf-playlist__header h1,
+.rf-playlist__header h2,
+.rf-playlist__header h3,
+.rf-playlist__header h4,
+.rf-playlist__header h5,
+.rf-playlist__header h6 {
+	margin: 0;
+	font-size: 1.25rem;
+	font-weight: 700;
+	color: var(--rf-color-text);
+}
+.rf-playlist__header p {
+	margin: 0;
+	font-size: 0.875rem;
+	color: var(--rf-color-muted);
+	line-height: 1.5;
+}
+
+/* Type badge */
+.rf-playlist__type-badge {
+	display: inline-block;
+	font-size: 0.7rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	padding: 0.125rem 0.5rem;
+	border-radius: var(--rf-radius-full);
+	color: var(--rf-color-primary);
+	background: color-mix(in srgb, var(--rf-color-primary) 10%, transparent);
+	width: fit-content;
+}
+
+/* Type-specific badge colors via data attributes */
+[data-type="podcast"] > .rf-playlist__header .rf-playlist__type-badge {
+	color: var(--rf-color-info);
+	background: var(--rf-color-info-bg);
+}
+[data-type="audiobook"] > .rf-playlist__header .rf-playlist__type-badge {
+	color: var(--rf-color-success);
+	background: var(--rf-color-success-bg);
+}
+
+/* Tracks list wrapper */
+.rf-playlist__tracks {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	border-top: 1px solid var(--rf-color-border);
+}
+
+/* Player area */
+.rf-playlist__player {
+	padding: 0.75rem 1.5rem;
+	border-top: 1px solid var(--rf-color-border);
+}
+
+@media (min-width: 480px) {
+	.rf-playlist__header {
+		flex-direction: row;
+		align-items: flex-start;
+		gap: 1.25rem;
+	}
+	.rf-playlist__header img {
+		flex-shrink: 0;
+	}
+}

package/styles/runes/preview.css

@@ -7,10 +7,6 @@
 }
 
 /* Width variants */
-.rf-preview[data-width="medium"] {
-	width: calc(100% + 4rem);
-	margin-left: -2rem;
-}
 @container (min-width: 1008px) {
 	.rf-preview[data-width="wide"] {
 		width: calc(100% + 8rem);
@@ -93,6 +89,9 @@
 	padding: 2rem 2.5rem;
 	background: var(--rf-color-bg);
 }
+.rf-preview__canvas:has(.rf-mockup) {
+	text-align: center;
+}
 .rf-preview__canvas > *:first-child {
 	margin-top: 0;
 }

package/styles/runes/reveal.css

@@ -66,8 +66,8 @@
 	font-weight: 600;
 	margin: 0 0 0.5rem;
 }
-.rf-reveal-step__body span[property],
-.rf-reveal-step__body meta { display: none; }
+.rf-reveal-step__body > span[property],
+.rf-reveal-step__body > meta { display: none; }
 .rf-reveal-step__body p:last-child { margin-bottom: 0; }
 .rf-reveal__next,
 .rf-reveal__reset {

package/styles/runes/showcase.css

@@ -0,0 +1,94 @@
+/* Showcase — Media presentation wrapper with shadows, bleed, and aspect ratio */
+.rf-showcase {
+	position: relative;
+}
+.rf-showcase__viewport {
+	position: relative;
+}
+/* Shadows */
+.rf-showcase[data-shadow="soft"] {
+	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
+}
+.rf-showcase[data-shadow="hard"] {
+	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
+}
+.rf-showcase[data-shadow="elevated"] {
+	filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.2));
+}
+/* Bleed displacement via negative margins */
+.rf-showcase[data-bleed="top"] {
+	margin-top: calc(-1 * var(--showcase-offset, 2rem));
+	position: relative;
+	z-index: 1;
+}
+.rf-showcase[data-bleed="bottom"] {
+	margin-bottom: calc(-1 * var(--showcase-offset, 2rem));
+	position: relative;
+	z-index: 1;
+}
+.rf-showcase[data-bleed="both"] {
+	margin-top: calc(-1 * var(--showcase-offset, 2rem));
+	margin-bottom: calc(-1 * var(--showcase-offset, 2rem));
+	position: relative;
+	z-index: 1;
+}
+.rf-showcase[data-bleed="end"] {
+	margin-inline-end: calc(-1 * var(--showcase-offset, 2rem));
+	position: relative;
+	z-index: 1;
+}
+.rf-showcase[data-bleed="bottom-end"] {
+	margin-bottom: calc(-1 * var(--showcase-offset, 2rem));
+	margin-inline-end: calc(-1 * var(--showcase-offset, 2rem));
+	position: relative;
+	z-index: 1;
+}
+.rf-showcase[data-bleed="top-end"] {
+	margin-top: calc(-1 * var(--showcase-offset, 2rem));
+	margin-inline-end: calc(-1 * var(--showcase-offset, 2rem));
+	position: relative;
+	z-index: 1;
+}
+/* Parent needs overflow visible for bleed — except inside clipping containers like bento cells */
+:has(> .rf-showcase[data-bleed]:not(.rf-showcase--in-bento-cell)) {
+	overflow: visible;
+}
+/* Bento cell context — showcase fills remaining space */
+.rf-showcase--in-bento-cell {
+	flex: 1;
+	min-height: 0;
+}
+/* Aspect ratio enforcement */
+.rf-showcase[data-aspect] .rf-showcase__viewport {
+	aspect-ratio: var(--showcase-aspect);
+	overflow: hidden;
+}
+.rf-showcase[data-aspect] .rf-showcase__viewport > img,
+.rf-showcase[data-aspect] .rf-showcase__viewport > video {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+/* Self-positioning within parent via place attribute */
+.rf-showcase[data-place] {
+	justify-self: var(--place-x, auto);
+	align-self: var(--place-y, auto);
+}
+/* Spacing — vertical margin around the showcase */
+.rf-showcase[data-spacing="flush"]   { margin-top: 0; margin-bottom: 0; }
+.rf-showcase[data-spacing="tight"]   { margin-top: var(--rf-spacing-section-tight, 1.5rem); margin-bottom: var(--rf-spacing-section-tight, 1.5rem); }
+.rf-showcase[data-spacing="loose"]   { margin-top: var(--rf-spacing-section-loose, 8rem); margin-bottom: var(--rf-spacing-section-loose, 8rem); }
+.rf-showcase[data-spacing="breathe"] { margin-top: var(--rf-spacing-section-breathe, 12rem); margin-bottom: var(--rf-spacing-section-breathe, 12rem); }
+/* Inset — all-around padding (not just inline, since showcase is a contained frame) */
+.rf-showcase[data-inset="flush"]   { padding: 0; }
+.rf-showcase[data-inset="tight"]   { padding: var(--rf-inset-tight, 1rem); }
+.rf-showcase[data-inset="loose"]   { padding: var(--rf-inset-loose, 4rem); }
+.rf-showcase[data-inset="breathe"] { padding: var(--rf-inset-breathe, 8rem); }
+/* Responsive: collapse bleed on mobile */
+@media (max-width: 768px) {
+	.rf-showcase[data-bleed] {
+		margin-top: 0;
+		margin-bottom: 0;
+		margin-inline-end: 0;
+	}
+}

package/styles/runes/steps.css

@@ -44,7 +44,7 @@
 	padding-left: 0;
 	margin: 0;
 }
-.rf-step__main {
+.rf-step__content {
 	display: contents;
 }
 .rf-step {
@@ -99,15 +99,7 @@
 	font-size: 0.925rem;
 	line-height: 1.65;
 }
-.rf-step--split {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	gap: 2rem;
-}
-.rf-step--mirror .rf-step__showcase {
-	order: -1;
-}
-.rf-step__showcase {
+.rf-step__media {
 	border-radius: var(--rf-radius-md);
 	overflow: hidden;
 }

package/styles/runes/storyboard.css

@@ -54,8 +54,8 @@
 	height: auto;
 	display: block;
 }
-.rf-storyboard-panel__body span[property],
-.rf-storyboard-panel__body meta { display: none; }
+.rf-storyboard-panel__body > span[property],
+.rf-storyboard-panel__body > meta { display: none; }
 .rf-storyboard-panel__body p:last-child { margin-bottom: 0; }
 @media (max-width: 768px) {
 	.rf-storyboard__panels { grid-template-columns: repeat(2, 1fr) !important; }

package/styles/runes/tint.css

@@ -0,0 +1,203 @@
+/* Tint Rune — Colour Token Bridge
+ *
+ * Maps --tint-* custom properties (set by the identity transform) to
+ * Lumina's internal --rf-color-* tokens.
+ *
+ * The six bridgeable tokens are registered with @property so that when a
+ * tint doesn't override a particular token, the property falls back to
+ * its inherited value instead of becoming guaranteed-invalid (which would
+ * happen with a self-referencing var() fallback — a CSS cycle). */
+
+/* ── 0. Token registration ────────────────────────────────────────────────
+ * @property makes guaranteed-invalid fall back to the inherited value
+ * (inherits: true) rather than propagating as invalid through children.
+ * initial-value matches the light-mode defaults from tokens/base.css. */
+
+@property --rf-color-bg {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: #ffffff;
+}
+@property --rf-color-surface {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: #f8fafc;
+}
+@property --rf-color-text {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: #1a1a2e;
+}
+@property --rf-color-muted {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: #64748b;
+}
+@property --rf-color-primary {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: #0ea5e9;
+}
+@property --rf-color-border {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: #e2e8f0;
+}
+
+/* ── 1. Colour scheme override ──────────────────────────────────────────────
+ * Forces dark or light mode tokens on a subtree. The six tint-bridgeable
+ * tokens are also exposed as --cs-* intermediaries so compound selectors
+ * in step 4 can fall back to them without a cycle. */
+
+[data-color-scheme="dark"] {
+	color-scheme: dark;
+	color: var(--rf-color-text);
+	background-color: var(--rf-color-bg);
+
+	--cs-bg: #0c1222;
+	--cs-surface: #0f172a;
+	--cs-text: #e2e8f0;
+	--cs-muted: #94a3b8;
+	--cs-accent: #38bdf8;
+	--cs-border: rgba(255, 255, 255, 0.1);
+
+	--rf-color-bg: var(--cs-bg);
+	--rf-color-surface: var(--cs-surface);
+	--rf-color-text: var(--cs-text);
+	--rf-color-muted: var(--cs-muted);
+	--rf-color-primary: var(--cs-accent);
+	--rf-color-border: var(--cs-border);
+
+	--rf-color-primary-hover: #7dd3fc;
+	--rf-color-surface-hover: #1e293b;
+	--rf-color-surface-active: #334155;
+	--rf-color-surface-raised: #1e293b;
+
+	--rf-color-info: #60a5fa;
+	--rf-color-info-bg: rgba(59, 130, 246, 0.1);
+	--rf-color-info-border: rgba(59, 130, 246, 0.3);
+	--rf-color-warning: #fbbf24;
+	--rf-color-warning-bg: rgba(245, 158, 11, 0.1);
+	--rf-color-warning-border: rgba(245, 158, 11, 0.3);
+	--rf-color-danger: #f87171;
+	--rf-color-danger-bg: rgba(239, 68, 68, 0.1);
+	--rf-color-danger-border: rgba(239, 68, 68, 0.3);
+	--rf-color-success: #34d399;
+	--rf-color-success-bg: rgba(16, 185, 129, 0.1);
+	--rf-color-success-border: rgba(16, 185, 129, 0.3);
+
+	--rf-color-code-bg: #0f172a;
+	--rf-color-code-text: #e2e8f0;
+	--rf-color-inline-code-bg: rgba(255, 255, 255, 0.08);
+
+	--rf-shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
+	--rf-shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
+	--rf-shadow-md: 0 4px 12px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
+	--rf-shadow-lg: 0 8px 24px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
+}
+
+[data-color-scheme="light"] {
+	color-scheme: light;
+	color: var(--rf-color-text);
+	background-color: var(--rf-color-bg);
+
+	--cs-bg: #ffffff;
+	--cs-surface: #f8fafc;
+	--cs-text: #1a1a2e;
+	--cs-muted: #64748b;
+	--cs-accent: #0ea5e9;
+	--cs-border: #e2e8f0;
+
+	--rf-color-bg: var(--cs-bg);
+	--rf-color-surface: var(--cs-surface);
+	--rf-color-text: var(--cs-text);
+	--rf-color-muted: var(--cs-muted);
+	--rf-color-primary: var(--cs-accent);
+	--rf-color-border: var(--cs-border);
+
+	--rf-color-primary-hover: #0284c7;
+	--rf-color-surface-hover: #f1f5f9;
+	--rf-color-surface-active: #e2e8f0;
+	--rf-color-surface-raised: #ffffff;
+
+	--rf-color-info: #3b82f6;
+	--rf-color-info-bg: #eff6ff;
+	--rf-color-info-border: #bfdbfe;
+	--rf-color-warning: #f59e0b;
+	--rf-color-warning-bg: #fffbeb;
+	--rf-color-warning-border: #fde68a;
+	--rf-color-danger: #ef4444;
+	--rf-color-danger-bg: #fef2f2;
+	--rf-color-danger-border: #fecaca;
+	--rf-color-success: #10b981;
+	--rf-color-success-bg: #ecfdf5;
+	--rf-color-success-border: #a7f3d0;
+
+	--rf-color-inline-code-bg: #f1f5f9;
+
+	--rf-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
+	--rf-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
+	--rf-shadow-md: 0 4px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
+	--rf-shadow-lg: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
+}
+
+/* ── 2. Tint bridge — light mode (default) ────────────────────────────────
+ * Maps --tint-* → --rf-color-*. No fallback needed — when --tint-* is
+ * unset, var() produces guaranteed-invalid, and @property makes the
+ * token inherit from the parent element.
+ *
+ * :where() background gives tinted elements a painted background at zero
+ * specificity — runes with their own background naturally override it. */
+
+:where([data-tint]) {
+	background-color: var(--rf-color-bg);
+}
+
+[data-tint] {
+	color: var(--rf-color-text);
+	--rf-color-bg: var(--tint-background);
+	--rf-color-surface: var(--tint-surface);
+	--rf-color-text: var(--tint-primary);
+	--rf-color-muted: var(--tint-secondary);
+	--rf-color-primary: var(--tint-accent);
+	--rf-color-border: var(--tint-border);
+}
+
+/* ── 3. Tint bridge — dark ancestor ───────────────────────────────────────
+ * When a dark context is on an ancestor (data-theme on html, or
+ * data-color-scheme on a parent), prefer dark tint values.
+ * Uses descendant combinator — does NOT match same-element.
+ * Unset tokens → guaranteed-invalid → @property inherits from parent
+ * (which carries the dark theme value). */
+
+:is([data-theme="dark"], [data-color-scheme="dark"]) [data-tint] {
+	--rf-color-bg: var(--tint-dark-background, var(--tint-background));
+	--rf-color-surface: var(--tint-dark-surface, var(--tint-surface));
+	--rf-color-text: var(--tint-dark-primary, var(--tint-primary));
+	--rf-color-muted: var(--tint-dark-secondary, var(--tint-secondary));
+	--rf-color-primary: var(--tint-dark-accent, var(--tint-accent));
+	--rf-color-border: var(--tint-dark-border, var(--tint-border));
+}
+
+/* ── 4. Tint bridge — colour scheme + tint on SAME element ────────────────
+ * Compound selectors (no space) match when both attributes sit on the
+ * same element. Falls back to --cs-* intermediaries so that unlisted
+ * tint tokens use the colour-scheme value, not the page-level value. */
+
+[data-color-scheme="dark"][data-tint] {
+	--rf-color-bg: var(--tint-dark-background, var(--tint-background, var(--cs-bg)));
+	--rf-color-surface: var(--tint-dark-surface, var(--tint-surface, var(--cs-surface)));
+	--rf-color-text: var(--tint-dark-primary, var(--tint-primary, var(--cs-text)));
+	--rf-color-muted: var(--tint-dark-secondary, var(--tint-secondary, var(--cs-muted)));
+	--rf-color-primary: var(--tint-dark-accent, var(--tint-accent, var(--cs-accent)));
+	--rf-color-border: var(--tint-dark-border, var(--tint-border, var(--cs-border)));
+}
+
+[data-color-scheme="light"][data-tint] {
+	--rf-color-bg: var(--tint-background, var(--cs-bg));
+	--rf-color-surface: var(--tint-surface, var(--cs-surface));
+	--rf-color-text: var(--tint-primary, var(--cs-text));
+	--rf-color-muted: var(--tint-secondary, var(--cs-muted));
+	--rf-color-primary: var(--tint-accent, var(--cs-accent));
+	--rf-color-border: var(--tint-border, var(--cs-border));
+}