@refrakt-md/lumina 0.18.0 → 0.20.0

package/dist/config.js

@@ -62,17 +62,17 @@ export const luminaConfig = mergeThemeConfig(baseConfig, {
                 border: 'var(--rf-color-info-border)',
             },
             dark: {
-                bg: 'var(--rf-color-primary-950)',
-                text: 'var(--rf-color-primary-300)',
+                bg: '#1c1a17',
+                text: '#e2e0dd',
                 primary: 'var(--rf-color-primary)',
-                border: 'var(--rf-color-primary-700)',
+                border: '#5a564f',
             },
         },
         dark: {
             lockMode: 'dark',
             dark: {
-                bg: 'var(--rf-color-primary-700)',
-                text: 'var(--rf-color-primary-50)',
+                bg: '#5a564f',
+                text: '#fbfaf7',
                 primary: 'var(--rf-color-danger)',
             },
         },

package/dist/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,YAAY,CAAC;AAElD,gFAAgF;AAChF,MAAM,CAAC,MAAM,YAAY,GAAG,gBAAgB,CAAC,UAAU,EAAE;IACxD,KAAK,EAAE;QACN,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,EAAE,EAAE,oBAAoB;gBACxB,OAAO,EAAE,yBAAyB;gBAClC,IAAI,EAAE,sBAAsB;gBAC5B,KAAK,EAAE,uBAAuB;gBAC9B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,wBAAwB;aAChC;YACD,IAAI,EAAE;gBACL,EAAE,EAAE,oBAAoB;gBACxB,OAAO,EAAE,yBAAyB;gBAClC,IAAI,EAAE,sBAAsB;gBAC5B,KAAK,EAAE,uBAAuB;gBAC9B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,wBAAwB;aAChC;SACD;QACD,MAAM,EAAE;YACP,KAAK,EAAE;gBACN,EAAE,EAAE,yBAAyB;gBAC7B,OAAO,EAAE,+BAA+B;gBACxC,IAAI,EAAE,sBAAsB;gBAC5B,KAAK,EAAE,uBAAuB;gBAC9B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,wBAAwB;aAChC;YACD,IAAI,EAAE;gBACL,EAAE,EAAE,yBAAyB;gBAC7B,OAAO,EAAE,+BAA+B;gBACxC,IAAI,EAAE,sBAAsB;gBAC5B,KAAK,EAAE,uBAAuB;gBAC9B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,wBAAwB;aAChC;SACD;QACD,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,EAAE,EAAE,gCAAgC;gBACpC,IAAI,EAAE,sBAAsB;gBAC5B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,wBAAwB;aAChC;YACD,IAAI,EAAE;gBACL,EAAE,EAAE,SAAS;gBACb,IAAI,EAAE,sBAAsB;gBAC5B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,SAAS;aACjB;SACD;QACD,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,EAAE,EAAE,yBAAyB;gBAC7B,IAAI,EAAE,sBAAsB;gBAC5B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,6BAA6B;aACrC;YACD,IAAI,EAAE;gBACL,EAAE,EAAE,6BAA6B;gBACjC,IAAI,EAAE,6BAA6B;gBACnC,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,6BAA6B;aACrC;SACD;QACD,IAAI,EAAE;YACL,QAAQ,EAAE,MAAM;YAChB,IAAI,EAAE;gBACL,EAAE,EAAE,6BAA6B;gBACjC,IAAI,EAAE,4BAA4B;gBAClC,OAAO,EAAE,wBAAwB;aACjC;SACD;KACD;IACD,KAAK,EAAE;QACN,IAAI,EAAE;YACL,IAAI,EAAE,4SAA4S;YAClT,OAAO,EAAE,iXAAiX;YAC1X,OAAO,EAAE,uSAAuS;YAChT,KAAK,EAAE,qRAAqR;SAC5R;QACD,MAAM,EAAE,WAAW;KACnB;CACD,CAAC,CAAC"}
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,YAAY,CAAC;AAElD,gFAAgF;AAChF,MAAM,CAAC,MAAM,YAAY,GAAG,gBAAgB,CAAC,UAAU,EAAE;IACxD,KAAK,EAAE;QACN,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,EAAE,EAAE,oBAAoB;gBACxB,OAAO,EAAE,yBAAyB;gBAClC,IAAI,EAAE,sBAAsB;gBAC5B,KAAK,EAAE,uBAAuB;gBAC9B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,wBAAwB;aAChC;YACD,IAAI,EAAE;gBACL,EAAE,EAAE,oBAAoB;gBACxB,OAAO,EAAE,yBAAyB;gBAClC,IAAI,EAAE,sBAAsB;gBAC5B,KAAK,EAAE,uBAAuB;gBAC9B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,wBAAwB;aAChC;SACD;QACD,MAAM,EAAE;YACP,KAAK,EAAE;gBACN,EAAE,EAAE,yBAAyB;gBAC7B,OAAO,EAAE,+BAA+B;gBACxC,IAAI,EAAE,sBAAsB;gBAC5B,KAAK,EAAE,uBAAuB;gBAC9B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,wBAAwB;aAChC;YACD,IAAI,EAAE;gBACL,EAAE,EAAE,yBAAyB;gBAC7B,OAAO,EAAE,+BAA+B;gBACxC,IAAI,EAAE,sBAAsB;gBAC5B,KAAK,EAAE,uBAAuB;gBAC9B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,wBAAwB;aAChC;SACD;QACD,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,EAAE,EAAE,gCAAgC;gBACpC,IAAI,EAAE,sBAAsB;gBAC5B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,wBAAwB;aAChC;YACD,IAAI,EAAE;gBACL,EAAE,EAAE,SAAS;gBACb,IAAI,EAAE,sBAAsB;gBAC5B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,SAAS;aACjB;SACD;QACD,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,EAAE,EAAE,yBAAyB;gBAC7B,IAAI,EAAE,sBAAsB;gBAC5B,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,6BAA6B;aACrC;YACD,IAAI,EAAE;gBACL,EAAE,EAAE,SAAS;gBACb,IAAI,EAAE,SAAS;gBACf,OAAO,EAAE,yBAAyB;gBAClC,MAAM,EAAE,SAAS;aACjB;SACD;QACD,IAAI,EAAE;YACL,QAAQ,EAAE,MAAM;YAChB,IAAI,EAAE;gBACL,EAAE,EAAE,SAAS;gBACb,IAAI,EAAE,SAAS;gBACf,OAAO,EAAE,wBAAwB;aACjC;SACD;KACD;IACD,KAAK,EAAE;QACN,IAAI,EAAE;YACL,IAAI,EAAE,4SAA4S;YAClT,OAAO,EAAE,iXAAiX;YAC1X,OAAO,EAAE,uSAAuS;YAChT,KAAK,EAAE,qRAAqR;SAC5R;QACD,MAAM,EAAE,WAAW;KACnB;CACD,CAAC,CAAC"}

package/dist/presets/tideline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tideline.d.ts","sourceRoot":"","sources":["../../src/presets/tideline.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,QAAQ,EAAE,iBAyHf,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"tideline.d.ts","sourceRoot":"","sources":["../../src/presets/tideline.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,QAAQ,EAAE,iBA0Gf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/presets/tideline.js

@@ -32,20 +32,6 @@ const tideline = {
         bg: '#faf5eb',
         primary: '#457b9d',
         'primary-hover': '#376585',
-        // Cerulean → frosted blue scale, preserved from pre-v0.14.0 Lumina.
-        'primary-scale': {
-            '50': '#f0f6f9',
-            '100': '#dcebf0',
-            '200': '#b8d6e2',
-            '300': '#a8dadc',
-            '400': '#70b4c0',
-            '500': '#457b9d',
-            '600': '#376585',
-            '700': '#1d3557',
-            '800': '#182c4a',
-            '900': '#12213a',
-            '950': '#0c162a',
-        },
         surface: {
             base: '#fffbf2',
             hover: '#fdf0d5',

package/dist/presets/tideline.js.map

@@ -1 +1 @@
-{"version":3,"file":"tideline.js","sourceRoot":"","sources":["../../src/presets/tideline.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tideline.js","sourceRoot":"","sources":["../../src/presets/tideline.ts"],"names":[],"mappings":"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"}

package/dist/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,YAAY,EAAE,iBA6L1B,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,YAAY,EAAE,iBAyL1B,CAAC"}

package/dist/tokens.js

@@ -27,23 +27,13 @@ export const luminaTokens = {
         bg: '#f5f4f1',
         primary: '#1c1a17',
         'primary-hover': '#3a342d',
-        // Warm-neutral axis from near-bg to near-text, eleven hand-picked stops.
-        // Several stops intentionally overlap with semantic tokens (surface.base,
-        // border, primary-hover, text) — that's normal; palette steps double as
-        // the implementations of the named tokens at their lightness level.
-        'primary-scale': {
-            '50': '#fbfaf7',
-            '100': '#f5f4f1',
-            '200': '#ecebe8',
-            '300': '#e2e0dd',
-            '400': '#bfbab2',
-            '500': '#94908a',
-            '600': '#76716a',
-            '700': '#5a564f',
-            '800': '#3a342d',
-            '900': '#2a2622',
-            '950': '#1c1a17',
-        },
+        // Derived subtle primary wash — completes the {semantic}-bg family.
+        // color-mix off `primary` so it tracks any preset/config override in
+        // both modes (no per-preset value, no dark override needed).
+        'primary-bg': 'color-mix(in oklch, var(--rf-color-primary) 10%, transparent)',
+        // Foreground for text/icons sitting on a `primary` fill. Flips per mode
+        // because base `primary` is dark in light mode and light in dark mode.
+        'on-primary': '#ffffff',
         surface: {
             base: '#fbfaf7',
             hover: '#ecebe8',
@@ -103,6 +93,7 @@ export const luminaTokens = {
         breathe: '8rem',
     },
     shadow: {
+        none: 'none',
         xs: '0 1px 2px rgba(0,0,0,0.04)',
         sm: '0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)',
         md: '0 4px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04)',
@@ -126,22 +117,23 @@ export const luminaTokens = {
             color: {
                 text: '#f6f4ef',
                 muted: '#94908a',
-                border: '#2a2825',
+                border: '#282825',
                 bg: '#1a1a17',
                 primary: '#f6f4ef',
                 'primary-hover': '#d4cfc5',
+                'on-primary': '#1a1a17',
                 surface: {
-                    base: '#211f1c',
-                    hover: '#2a2825',
-                    active: '#353330',
-                    raised: '#292723',
+                    base: '#1f1f1c',
+                    hover: '#282825',
+                    active: '#333330',
+                    raised: '#272723',
                 },
                 info: { base: '#9bb4c7', bg: '#1f2530', border: '#3d4655' },
                 warning: { base: '#d4a868', bg: '#2a2519', border: '#4a3f2a' },
                 danger: { base: '#d48888', bg: '#2a1818', border: '#4a2a2a' },
                 success: { base: '#7eb398', bg: '#1a2a1f', border: '#2a4a35' },
                 code: {
-                    bg: '#222220',
+                    bg: '#1c1c19',
                     text: '#f6f4ef',
                     'inline-bg': '#2b2b29',
                 },
@@ -169,6 +161,8 @@ export const luminaTokens = {
             // above by the generator.
             extra: {
                 'rf-color-inline-code-bg': '#2b2b29',
+                // SPEC-087 — inset surfaces dip a touch deeper in dark mode.
+                'rf-surface-inset-shift': '0.06',
             },
         },
     },
@@ -184,6 +178,9 @@ export const luminaTokens = {
      *  them here. */
     extra: {
         'rf-color-inline-code-bg': '#e6e5e3',
+        // SPEC-087 — lightness delta for the derived inset surface (a tint-tracking
+        // recessed fill applied at use-site via relative-color). Per-mode tunable.
+        'rf-surface-inset-shift': '0.04',
     },
 };
 //# sourceMappingURL=tokens.js.map

package/dist/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"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"}

package/index.css

@@ -34,6 +34,10 @@
 @import './styles/dimensions/state.css';
 @import './styles/dimensions/media.css';
 @import './styles/dimensions/surfaces.css';
+@import './styles/dimensions/frame.css';
+@import './styles/dimensions/substrate.css';
+@import './styles/dimensions/cover.css';
+@import './styles/dimensions/guest-posture.css';
 @import './styles/dimensions/checklist.css';
 @import './styles/dimensions/sequence.css';
 
@@ -125,6 +129,6 @@
 @import './styles/runes/bug.css';
 @import './styles/runes/decision.css';
 @import './styles/runes/milestone.css';
-@import './styles/runes/plan-progress.css';
 @import './styles/runes/plan-ref.css';
 @import './styles/runes/plan-history.css';
+@import './styles/runes/plan-progress.css';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@refrakt-md/lumina",
   "description": "Lumina theme for refrakt.md — design tokens, CSS, identity transform, and layout configs",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -83,9 +83,9 @@
     "build": "tsc"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.18.0",
-    "@refrakt-md/transform": "0.18.0",
-    "@refrakt-md/types": "0.18.0"
+    "@refrakt-md/runes": "0.20.0",
+    "@refrakt-md/transform": "0.20.0",
+    "@refrakt-md/types": "0.20.0"
   },
   "devDependencies": {
     "postcss": "^8.4.0"

package/styles/base/attributes.css

@@ -18,3 +18,12 @@
 [data-rune][data-inset="tight"]   { padding-inline: var(--rf-inset-tight, 1rem); }
 [data-rune][data-inset="loose"]   { padding-inline: var(--rf-inset-loose, 4rem); }
 [data-rune][data-inset="breathe"] { padding-inline: var(--rf-inset-breathe, 8rem); }
+
+/* ── Elevation — drop shadow (box-shadow) ──────────────────────────────
+ * Universal `elevation` attribute (SPEC-086). Maps to the shared --rf-shadow-*
+ * token scale; `none` explicitly flattens a rune's default shadow. */
+
+[data-rune][data-elevation="none"] { box-shadow: var(--rf-shadow-none); }
+[data-rune][data-elevation="sm"]   { box-shadow: var(--rf-shadow-sm); }
+[data-rune][data-elevation="md"]   { box-shadow: var(--rf-shadow-md); }
+[data-rune][data-elevation="lg"]   { box-shadow: var(--rf-shadow-lg); }

package/styles/dimensions/cover.css

@@ -0,0 +1,140 @@
+/* Cover layout (SPEC-089) — `media-position="cover"`.
+ *
+ * The media well fills the rune interior and the content overlays it (the poster
+ * / cover card). The media stays a media guest — the thin-edge frame and
+ * `--rf-radius-media` are preserved — with content floated on top via grid
+ * stacking (media + content share one grid cell). No overlay primitive in the
+ * layout config; the variant supplies the structure (SPEC-091), CSS positions.
+ *
+ * Height authority: an external grid track (bento) wins; else the media aspect
+ * (`frame-aspect`, default portrait); a card height/aspect knob overrides via the
+ * cascade. Cover supersedes the media-vs-content split knobs (content-height /
+ * media-ratio), which have no meaning when there is no split. */
+
+/* ── full scope — the whole content overlays the media well ──────────── */
+[data-media-position="cover"]:not([data-cover-scope="header"]) {
+	display: grid;
+	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
+	aspect-ratio: var(--frame-aspect, var(--cover-aspect, 3 / 4));
+	container-type: size;
+	overflow: hidden;
+	isolation: isolate;
+}
+[data-media-position="cover"]:not([data-cover-scope="header"]) > [data-section="media"],
+[data-media-position="cover"]:not([data-cover-scope="header"]) > [data-name="content"] {
+	grid-area: 1 / 1;
+	margin: 0;
+	min-width: 0;
+}
+
+/* ── header scope — only the cover-band overlays; body flows below ────── */
+[data-cover-scope="header"] > [data-name="cover-band"] {
+	display: grid;
+	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
+	aspect-ratio: var(--frame-aspect, 16 / 9);
+	border-radius: var(--rf-radius-media);
+	overflow: hidden;
+	isolation: isolate;
+	container-type: size;
+}
+/* On narrow screens a 16/9 band is too short to seat the preamble over the
+ * scrim, so default it to a taller (≥1:1) poster shape. An explicit
+ * `frame-aspect` still wins. */
+@media (max-width: 40rem) {
+	[data-cover-scope="header"] > [data-name="cover-band"] {
+		aspect-ratio: var(--frame-aspect, 4 / 5);
+	}
+}
+[data-cover-scope="header"] > [data-name="cover-band"] > [data-section="media"],
+[data-cover-scope="header"] > [data-name="cover-band"] > [data-name="preamble"] {
+	grid-area: 1 / 1;
+	margin: 0;
+}
+
+/* ── shared: the media well fills, the overlaid box positions ─────────── */
+[data-media-position="cover"] [data-section="media"] {
+	position: relative;
+	height: 100%;
+	border-radius: var(--rf-radius-media);
+	overflow: hidden;
+}
+[data-media-position="cover"] [data-section="media"] > :is(img, video) {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+/* The overlaid box (full: content; header: preamble) anchors via content-place. */
+[data-media-position="cover"]:not([data-cover-scope="header"]) > [data-name="content"],
+[data-cover-scope="header"] > [data-name="cover-band"] > [data-name="preamble"] {
+	position: relative;
+	z-index: 1;
+	align-self: var(--cover-place-block, end);
+	justify-self: var(--cover-place-inline, stretch);
+	padding: var(--rune-padding, var(--rf-spacing-md));
+}
+
+/* ── auto / unset placement ───────────────────────────────────────────
+ * `auto` is the cover default, so an unset content-place behaves the same as an
+ * explicit `auto`. A header band is always a caption strip — the preamble sits at
+ * the block-end over the scrim regardless of the band's orientation. A full-scope
+ * overlay adapts to the cover region's orientation (portrait → block-end caption;
+ * landscape → inline-start side panel). An explicit value (e.g. "center center")
+ * sets the `--cover-place-*` vars on the base rule above and does NOT match here,
+ * so it pins regardless of orientation. */
+[data-media-position="cover"]:not([data-cover-scope="header"]):is([data-content-place="auto"], :not([data-content-place])) > [data-name="content"],
+[data-cover-scope="header"]:is([data-content-place="auto"], :not([data-content-place])) > [data-name="cover-band"] > [data-name="preamble"] {
+	align-self: end;
+	justify-self: stretch;
+}
+@container (min-aspect-ratio: 1 / 1) {
+	[data-media-position="cover"]:not([data-cover-scope="header"]):is([data-content-place="auto"], :not([data-content-place])) > [data-name="content"] {
+		align-self: center;
+		justify-self: start;
+	}
+}
+
+/* ── default cover scrim (SPEC-088 scrim, on the media surface) ────────
+ * Overlaying text on an arbitrary image without a scrim is a legibility footgun,
+ * so cover applies a default gradient scrim weighted toward the content edge.
+ * `scrim="none"` opts out. The overlaid foreground is set light by the engine
+ * (data-color-scheme) so text reads against the darkened media. */
+[data-media-position="cover"]:not([data-scrim="none"]) [data-section="media"]::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+	background-image: linear-gradient(var(--cover-scrim-dir, to top), rgb(0 0 0 / 0.55), transparent 62%);
+}
+
+/* Frost treatment (`scrim-type="frost"`) — a frosted-glass blur over the media
+ * instead of a gradient. `scrim-blur` (named scale) sets the blur radius; the
+ * tint follows the cover scheme (a dark scheme → a dark frost for light text).
+ * The frost is masked to the content edge (following `--cover-scrim-dir`, default
+ * bottom) so it reads as a band behind the text, not a blur over the whole image. */
+[data-media-position="cover"][data-scrim-blur="none"] { --cover-scrim-blur: 0px; }
+[data-media-position="cover"][data-scrim-blur="sm"]   { --cover-scrim-blur: 4px; }
+[data-media-position="cover"][data-scrim-blur="md"]   { --cover-scrim-blur: 8px; }
+[data-media-position="cover"][data-scrim-blur="lg"]   { --cover-scrim-blur: 16px; }
+[data-media-position="cover"][data-scrim-type="frost"]:not([data-scrim="none"]) [data-section="media"]::after {
+	background-image: none;
+	background-color: rgb(0 0 0 / 0.18);
+	-webkit-backdrop-filter: blur(var(--cover-scrim-blur, 8px));
+	backdrop-filter: blur(var(--cover-scrim-blur, 8px));
+	-webkit-mask-image: linear-gradient(var(--cover-scrim-dir, to top), #000 30%, transparent 72%);
+	mask-image: linear-gradient(var(--cover-scrim-dir, to top), #000 30%, transparent 72%);
+}
+[data-media-position="cover"][data-scrim-type="frost"][data-color-scheme="light"]:not([data-scrim="none"]) [data-section="media"]::after {
+	background-color: rgb(255 255 255 / 0.25);
+}
+
+/* The overlay carries the cover colour-scheme (set by the engine) so its text
+ * reads against the darkened media. The standalone `[data-color-scheme]` rule
+ * also paints a `background-color`; null it out here so the overlay stays
+ * see-through over the media (the scrim, not a solid box, does the legibility). */
+[data-media-position="cover"] [data-name="content"][data-color-scheme],
+[data-cover-scope="header"] > [data-name="cover-band"][data-color-scheme] {
+	background-color: transparent;
+	/* Muted text (the blurb) is barely legible over a photo, so on the overlay it
+	 * reads at full foreground strength — the same colour as the headline. */
+	--rf-color-muted: var(--rf-color-text);
+}

package/styles/dimensions/frame.css

@@ -0,0 +1,54 @@
+/* Frame chrome (SPEC-086) — media-surface presentation.
+ *
+ * The engine lands the frame contract on the frame-target element: a rune's
+ * `[data-section="media"]` zone (frameTarget: 'media') or the rune's own root
+ * (frameTarget: 'self', e.g. figure/showcase). These selectors are intentionally
+ * surface-agnostic — they match wherever the chrome is emitted.
+ *
+ *   data-frame              — applied preset name (marker)
+ *   data-frame-shadow       — silhouette drop-shadow (none|sm|md|lg)
+ *   data-displace           — edge/corner the guest moves toward
+ *   --frame-aspect          — aspect-ratio of the framed media
+ *   --frame-offset          — displacement distance (resolved spacing token)
+ *   --frame-oversize        — scale factor by which the guest exceeds its slot
+ *   --frame-anchor          — crop focal point (object-position)
+ *   --frame-place-x / -y    — guest-box alignment within its slot
+ *
+ * Clip is host-owned: a clipping host (card/bento-cell/figure media well) crops a
+ * displaced/oversized guest into a *peek*; a breakout host (showcase-self, a
+ * section/page) lets it *spill*. `elevation` (box-shadow on the self surface) and
+ * `frame-shadow` (drop-shadow silhouette here) never collide — different property,
+ * different surface. */
+
+/* ── Silhouette drop-shadow ──────────────────────────────────────────── */
+[data-frame-shadow="none"] { filter: none; }
+[data-frame-shadow="sm"]   { filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.10)); }
+[data-frame-shadow="md"]   { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25)); }
+[data-frame-shadow="lg"]   { filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.20)); }
+
+/* ── Aspect ratio ────────────────────────────────────────────────────── */
+[style*="--frame-aspect"] { aspect-ratio: var(--frame-aspect); }
+
+/* ── Crop anchor — focal point when the guest is cut ─────────────────── */
+[style*="--frame-anchor"] > :is(img, video) { object-position: var(--frame-anchor); }
+
+/* ── Placement of the framed box within its slot ─────────────────────── */
+[style*="--frame-place-x"] { justify-self: var(--frame-place-x, auto); align-self: var(--frame-place-y, auto); }
+
+/* ── Oversize — guest exceeds its slot (clipping hosts crop it) ──────── */
+[style*="--frame-oversize"] > :is(img, video) { width: calc(100% * var(--frame-oversize, 1)); max-width: none; }
+
+/* ── Displacement (bleed / peek) — move the guest toward an edge/corner.
+ * The host decides whether it spills or is cropped; this only moves it. ─ */
+[data-displace] { position: relative; z-index: 1; }
+[data-displace="top"]        { margin-top: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }
+[data-displace="bottom"]     { margin-bottom: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }
+[data-displace="both"]       { margin-block: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }
+[data-displace="end"]        { margin-inline-end: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }
+[data-displace="bottom-end"] { margin-bottom: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); margin-inline-end: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }
+[data-displace="top-end"]    { margin-top: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); margin-inline-end: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }
+
+/* Collapse displacement on mobile, regardless of host. */
+@media (max-width: 768px) {
+	[data-displace] { margin: 0; }
+}

package/styles/dimensions/guest-posture.css

@@ -0,0 +1,27 @@
+/* Media-guest interaction posture (SPEC-090).
+ *
+ * A media-slot guest is presentational by default. When its container is itself
+ * an interaction target — a `card` / `bento-cell` with a stretched whole-tile
+ * `href` link — or the guest is a `cover` backdrop (SPEC-089), the engine marks
+ * the media zone `data-guest-posture="presentational"`. That makes the guest
+ * non-interactive at the pointer level, so:
+ *   • a linked tile links reliably — clicks over the media fall through to the
+ *     stretched link beneath it instead of being eaten by the guest's controls;
+ *   • a cover backdrop never steals interaction from the overlaid content.
+ *
+ * The behaviours layer additionally skips JS enhancement for a presentational
+ * guest (see @refrakt-md/behaviors), so it renders its static fallback. The
+ * posture is scoped to the media zone only — content-overlay controls
+ * (body/footer links & buttons) are outside it and stay fully interactive. */
+[data-section="media"][data-guest-posture="presentational"] {
+	pointer-events: none;
+}
+
+/* Static fallback for demoted tabbed guests (`codegroup`, `tabs`): their tab
+ * strip is rendered statically but the behaviour that wires it is skipped, so
+ * it would sit there inert. Hide it and let the panels read as plain stacked
+ * content — the non-enhanced render is the fallback. (Guests whose chrome is
+ * JS-injected — datatable toolbars, map controls — simply never appear.) */
+[data-section="media"][data-guest-posture="presentational"] :is(.rf-tabs__tabs, .rf-codegroup__tabs) {
+	display: none;
+}

package/styles/dimensions/media.css

@@ -20,7 +20,7 @@
 [data-media="cover"] {
 	width: 100%;
 	object-fit: cover;
-	border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
+	border-radius: var(--rf-radius-md);
 }
 
 /* ─── Thumbnail: small fixed preview ──────────────────────────────── */

package/styles/dimensions/sections.css

@@ -73,5 +73,8 @@
 /* ─── Media: visual content ───────────────────────────────────────── */
 
 [data-section="media"] {
-	margin: var(--rf-spacing-sm) 0;
+	/* Media zones manage their own spacing via their layout (split gap, cell
+	 * padding, flow margins); a blanket block margin here misaligns media in
+	 * flex/beside layouts, so keep it neutral. */
+	margin: 0;
 }

package/styles/dimensions/sequence.css

@@ -63,7 +63,7 @@
 	height: 0.75rem;
 	border-radius: 50%;
 	background: var(--rf-color-primary);
-	border: 2px solid var(--rf-color-background);
+	border: 2px solid var(--rf-color-bg);
 	box-shadow: 0 0 0 2px var(--rf-color-primary);
 }
 

package/styles/dimensions/state.css

@@ -45,7 +45,7 @@ button[data-state="inactive"] {
 /* ─── Selected: user selection highlight ──────────────────────────── */
 
 [data-state="selected"] {
-	background: color-mix(in oklch, var(--rf-color-primary) 10%, transparent);
+	background: var(--rf-color-primary-bg);
 	outline: 2px solid var(--rf-color-primary);
 }
 

package/styles/dimensions/substrate.css

@@ -0,0 +1,101 @@
+/* Substrate (SPEC-087) — generated surface pattern.
+ *
+ * The token-driven gradient recipes that realise each pattern ship here in the
+ * always-included base layer (not a theme's swappable CSS), so "dots = dots on
+ * every theme" is a guarantee: themes retune the `--substrate-*` token hooks
+ * (ink colour, cell size), they don't redefine a pattern's geometry. Patterns
+ * are pure CSS — no image assets, crisp at any zoom. The engine emits markers
+ * only (`data-substrate` + `--substrate-*`); CSS does the drawing.
+ *
+ * The pattern is a `background-image` over the surface `background-color`; the
+ * gradient's `transparent` gaps reveal whatever fill sits beneath (tint/inset).
+ * `--substrate-ink` resolves from `--rf-color-border` (tint-bridged), so the
+ * pattern recolours with the surface.
+ *
+ * Runes set their surface with the `background` *shorthand* (e.g.
+ * `.rf-card { background: var(--rf-color-surface) }`), which resets
+ * `background-image`/`-size`/`-position` and loads *after* this base layer. So
+ * the actual `background-*` longhands live here on the higher-specificity
+ * `[data-substrate]:not(…)` selector (0,2,0 — beats a rune's `.rf-*`, 0,1,0),
+ * and each pattern only feeds custom properties (which never collide with a
+ * rune's background). The rune's `background-color` still shows through. */
+
+[data-substrate]:not([data-substrate="none"]) {
+	--substrate-cell: 16px;
+	--substrate-opacity: 0.5;
+	/* `--substrate-boost` (per-pattern) and `--substrate-mode-boost` (light/dark)
+	 * are intentionally NOT set here — only referenced with a `1` fallback — so a
+	 * lower-specificity pattern rule or an inherited dark-mode rule can drive them
+	 * without losing to this (0,2,0) base. The product is clamped to 100% by
+	 * color-mix. */
+	--substrate-ink: color-mix(in oklab, var(--rf-color-border) calc(var(--substrate-opacity) * var(--substrate-boost, 1) * var(--substrate-mode-boost, 1) * 100%), transparent);
+	background-image: var(--substrate-image);
+	background-size: var(--substrate-tile, var(--substrate-cell) var(--substrate-cell));
+	background-position: var(--substrate-pos, 0 0);
+	background-repeat: repeat;
+}
+
+/* dots — one tiled radial-gradient. A small dot reads fainter than a 1px line,
+ * so dots get a per-pattern ink boost. */
+[data-substrate="dots"] {
+	--substrate-image: radial-gradient(var(--substrate-ink) var(--substrate-dot, 1.5px), transparent 0);
+	--substrate-boost: 1.4;
+}
+
+/* grid — two tiled linear-gradients */
+[data-substrate="grid"] {
+	--substrate-image:
+		linear-gradient(var(--substrate-ink) 1px, transparent 1px),
+		linear-gradient(90deg, var(--substrate-ink) 1px, transparent 1px);
+}
+
+/* lines — diagonal hatching (the repeating gradient owns its own spacing) */
+[data-substrate="lines"] {
+	--substrate-image: repeating-linear-gradient(45deg, var(--substrate-ink) 0 1px, transparent 1px var(--substrate-cell));
+	--substrate-tile: auto;
+}
+
+/* cross — plus marks on a grid (a grid masked down to short ticks at each node) */
+[data-substrate="cross"] {
+	--substrate-image:
+		linear-gradient(var(--substrate-ink) 1px, transparent 1px),
+		linear-gradient(90deg, var(--substrate-ink) 1px, transparent 1px);
+	--substrate-pos: center;
+	-webkit-mask-image: radial-gradient(circle at center, #000 0 2px, transparent 2px);
+	-webkit-mask-size: var(--substrate-cell) var(--substrate-cell);
+	mask-image: radial-gradient(circle at center, #000 0 2px, transparent 2px);
+	mask-size: var(--substrate-cell) var(--substrate-cell);
+}
+
+/* checker — alternating filled cells */
+[data-substrate="checker"] {
+	--substrate-image:
+		conic-gradient(var(--substrate-ink) 0 25%, transparent 0 50%, var(--substrate-ink) 0 75%, transparent 0);
+}
+
+[data-substrate="none"] { background-image: none; }
+
+/* substrate-fill="inset" — paint the pattern over the recessed inset fill
+ * (SPEC-087 inset surface) instead of the inherited surface colour. */
+[data-substrate][data-substrate-fill="inset"] {
+	background-color: oklch(from var(--rf-color-surface) calc(l - var(--rf-surface-inset-shift)) c h);
+}
+
+/* Dark mode — the border ink sits close to the dark surface, so patterns need
+ * more presence across the board (dots compound their per-pattern boost on top,
+ * landing near full strength). Set the multiplier on the dark root so it
+ * inherits into every substrate element; mirrors how dark.css triggers dark. */
+[data-theme="dark"],
+[data-color-scheme="dark"] {
+	--substrate-mode-boost: 1.6;
+}
+@media (prefers-color-scheme: dark) {
+	:root:not([data-theme="light"]) {
+		--substrate-mode-boost: 1.6;
+	}
+}
+/* A tint-locked light subtree resets to the light intensity (nearest ancestor
+ * wins via inheritance), even when nested inside dark mode. */
+[data-color-scheme="light"] {
+	--substrate-mode-boost: 1;
+}