@hyvnt/hyvui 0.3.0 → 0.4.0

package/dist/examples/HextechForge.svelte

@@ -0,0 +1,324 @@
+<!--
+  EXAMPLE: Hextech Forge
+  REGISTER: hextech
+  CONCEPT: a piltover forge station monitoring console — brass instruments, crystal energy cells, hex-grid schematics
+  DEMONSTRATES: HexGrid, BrassFiligree, ArcaneVein, EnergyArc, CornerBrackets, MetricCard, Table, StatusDot, Tabs, Label, Text, applyRegister
+  INSPIRED BY: the first hour of a shift on a Piltover engineering floor
+-->
+<script lang="ts">
+	import {
+		Text,
+		Label,
+		Badge,
+		Divider,
+		Stack,
+		Grid,
+		Card,
+		Panel,
+		MetricCard,
+		Table,
+		StatusDot,
+		Tabs,
+		CornerBrackets,
+		HexGrid,
+		BrassFiligree,
+		ArcaneVein,
+		EnergyArc,
+		surface,
+		applyRegister
+	} from '../index.js';
+	import { onMount } from 'svelte';
+
+	const cells = [
+		{ id: 'CELL-A1', charge: '94.2%', temp: '312 K', status: 'ok' as const, output: '8.4 kW' },
+		{ id: 'CELL-A2', charge: '88.1%', temp: '318 K', status: 'ok' as const, output: '7.9 kW' },
+		{ id: 'CELL-B1', charge: '71.4%', temp: '334 K', status: 'warn' as const, output: '6.1 kW' },
+		{ id: 'CELL-B2', charge: '99.8%', temp: '308 K', status: 'ok' as const, output: '8.8 kW' },
+		{ id: 'CELL-C1', charge: '45.3%', temp: '347 K', status: 'warn' as const, output: '3.8 kW' },
+		{ id: 'CELL-C2', charge: '0.0%', temp: '— K', status: 'fail' as const, output: '0.0 kW' }
+	];
+
+	const cellColumns = [
+		{ key: 'id', label: 'cell' },
+		{ key: 'charge', label: 'charge' },
+		{ key: 'temp', label: 'temp' },
+		{ key: 'output', label: 'output' },
+		{ key: 'status', label: 'status' }
+	];
+
+	const tabs = ['overview', 'schematics', 'maintenance'];
+	let activeTab = $state('overview');
+
+	onMount(() => {
+		applyRegister('hextech');
+		return () => applyRegister('field-notebook');
+	});
+</script>
+
+<svelte:head>
+	<title>hextech forge // hyvui</title>
+</svelte:head>
+
+<div class="forge-wrap">
+	<div class="forge-hexgrid-host" aria-hidden="true">
+		<HexGrid animated />
+	</div>
+
+	<div class="forge-shell">
+		<!-- Top bar -->
+		<header class="forge-header" use:surface>
+			<BrassFiligree />
+			<div class="forge-header-inner">
+				<div class="forge-header-left">
+					<StatusDot status="ok" size={7} />
+					<Text expression="readout">FORGE STATION PILTOVER // SECTOR 4-DELTA</Text>
+				</div>
+				<div class="forge-header-right">
+					<Label color="muted">shift 2 / day cycle</Label>
+					<Label color="signal">ONLINE</Label>
+					<a href="/" class="forge-back">← library</a>
+				</div>
+			</div>
+		</header>
+
+		<!-- Metrics row -->
+		<div class="forge-metrics">
+			<MetricCard label="total output" value="35.0 kW" trend="up" trendValue="+4.2%" />
+			<MetricCard label="cells active" value="5 / 6" trend="neutral" trendValue="" />
+			<MetricCard label="avg temp" value="323 K" trend="up" trendValue="+2 K" />
+			<MetricCard label="uptime" value="99.3%" trend="up" trendValue="+0.1%" />
+		</div>
+
+		<Divider />
+
+		<!-- Tab nav -->
+		<Tabs tabs={tabs.map((t) => ({ id: t, label: t }))} active={activeTab} onchange={(id) => (activeTab = id)} />
+
+		{#if activeTab === 'overview'}
+			<div class="forge-content" use:surface={{ delay: 0 }}>
+				<div class="forge-left">
+					<div class="forge-panel-head">
+						<Label color="accent">energy cell array</Label>
+						<StatusDot status="warn" size={6} />
+					</div>
+					<Table columns={cellColumns} rows={cells} />
+				</div>
+
+				<div class="forge-right">
+					<div class="forge-schematic" use:surface>
+						<CornerBrackets size={16} color="rgba(93, 217, 240, 0.3)" />
+						<div class="forge-schematic-inner">
+							<Label color="muted">power conduit / sector 4</Label>
+							<div class="forge-vein-wrap">
+								<ArcaneVein x1="10%" y1="20%" x2="90%" y2="20%" />
+								<ArcaneVein x1="10%" y1="50%" x2="90%" y2="50%" />
+								<ArcaneVein x1="10%" y1="80%" x2="90%" y2="80%" />
+								<EnergyArc x1="10%" y1="20%" x2="50%" y2="80%" />
+							</div>
+						</div>
+					</div>
+
+					<Stack gap="var(--space-sm)">
+						<div class="forge-alert-row" use:surface={{ delay: 80 }}>
+							<StatusDot status="warn" size={6} />
+							<Label color="muted">CELL-B1 thermal variance above threshold</Label>
+						</div>
+						<div class="forge-alert-row" use:surface={{ delay: 140 }}>
+							<StatusDot status="fail" size={6} />
+							<Label color="muted">CELL-C2 offline — awaiting replacement crystal</Label>
+						</div>
+					</Stack>
+				</div>
+			</div>
+		{:else if activeTab === 'schematics'}
+			<div class="forge-content forge-content--center" use:surface={{ delay: 0 }}>
+				<div class="forge-schematic forge-schematic--large" use:surface>
+					<CornerBrackets size={20} color="rgba(93, 217, 240, 0.3)" />
+					<div class="forge-schematic-inner">
+						<Label color="muted">full-sector conduit map // v2.4</Label>
+						<div class="forge-vein-large">
+							<ArcaneVein x1="5%" y1="15%" x2="95%" y2="15%" />
+							<ArcaneVein x1="5%" y1="40%" x2="95%" y2="40%" />
+							<ArcaneVein x1="5%" y1="65%" x2="95%" y2="65%" />
+							<ArcaneVein x1="5%" y1="88%" x2="95%" y2="88%" />
+							<EnergyArc x1="20%" y1="15%" x2="80%" y2="88%" />
+							<EnergyArc x1="50%" y1="15%" x2="20%" y2="65%" />
+						</div>
+					</div>
+				</div>
+			</div>
+		{:else}
+			<div class="forge-content" use:surface={{ delay: 0 }}>
+				<Stack gap="var(--space-md)">
+					<Text expression="readout">NEXT SCHEDULED MAINTENANCE // 2025.12.04 / 06:00</Text>
+					<div class="forge-checklist">
+						{#each ['inspect cell housings', 'calibrate output regulators', 'flush thermal vents', 'replace CELL-C2 crystal core', 'log to council registry'] as item}
+							<div class="forge-checklist-item">
+								<StatusDot status={item.includes('CELL-C2') ? 'pend' : 'ok'} size={6} />
+								<Label color="muted">{item}</Label>
+							</div>
+						{/each}
+					</div>
+				</Stack>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.forge-wrap {
+		position: relative;
+		min-height: 100dvh;
+		background: var(--bg);
+		overflow: hidden;
+	}
+
+	.forge-hexgrid-host {
+		position: fixed;
+		inset: 0;
+		z-index: 0;
+		pointer-events: none;
+		opacity: 0.35;
+	}
+
+	.forge-shell {
+		position: relative;
+		z-index: 1;
+		max-width: 80rem;
+		margin: 0 auto;
+		padding: var(--space-xl) var(--space-lg);
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-lg);
+	}
+
+	.forge-header {
+		position: relative;
+		padding: var(--space-md) var(--space-lg);
+		border: 1px solid var(--line);
+		background: var(--surface-card);
+		overflow: hidden;
+	}
+
+	.forge-header-inner {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--space-md);
+	}
+
+	.forge-header-left,
+	.forge-header-right {
+		display: flex;
+		align-items: center;
+		gap: var(--space-sm);
+	}
+
+	.forge-back {
+		font-family: var(--font-mono);
+		font-size: 0.72rem;
+		letter-spacing: 0.1em;
+		color: var(--muted);
+		text-decoration: none;
+		transition: color var(--transition-fast);
+	}
+
+	.forge-back:hover {
+		color: var(--text);
+	}
+
+	.forge-metrics {
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+		gap: var(--space-sm);
+	}
+
+	.forge-content {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: var(--space-lg);
+		align-items: start;
+	}
+
+	.forge-content--center {
+		grid-template-columns: 1fr;
+	}
+
+	.forge-left,
+	.forge-right {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-md);
+	}
+
+	.forge-panel-head {
+		display: flex;
+		align-items: center;
+		gap: var(--space-sm);
+	}
+
+	.forge-schematic {
+		position: relative;
+		padding: var(--space-lg);
+		border: 1px solid var(--line);
+		background: var(--surface-panel);
+		overflow: hidden;
+	}
+
+	.forge-schematic--large {
+		min-height: 280px;
+	}
+
+	.forge-schematic-inner {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-sm);
+	}
+
+	.forge-vein-wrap {
+		position: relative;
+		height: 120px;
+	}
+
+	.forge-vein-large {
+		position: relative;
+		height: 220px;
+	}
+
+	.forge-alert-row {
+		display: flex;
+		align-items: center;
+		gap: var(--space-sm);
+		padding: var(--space-sm);
+		border: 1px solid var(--line);
+		background: var(--surface-panel);
+	}
+
+	.forge-checklist {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-xs);
+	}
+
+	.forge-checklist-item {
+		display: flex;
+		align-items: center;
+		gap: var(--space-sm);
+		padding: var(--space-xs) var(--space-sm);
+		border-bottom: 1px solid var(--line);
+	}
+
+	@media (max-width: 768px) {
+		.forge-metrics {
+			grid-template-columns: repeat(2, 1fr);
+		}
+
+		.forge-content {
+			grid-template-columns: 1fr;
+		}
+
+		.forge-shell {
+			padding: var(--space-lg) var(--space-md);
+		}
+	}
+</style>

package/dist/examples/HextechForge.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const HextechForge: import("svelte").Component<Record<string, never>, {}, "">;
+type HextechForge = ReturnType<typeof HextechForge>;
+export default HextechForge;

package/dist/index.d.ts

@@ -46,7 +46,14 @@ export { default as ConfirmDialog } from './components/patterns/ConfirmDialog.sv
 export { default as SearchBar } from './components/patterns/SearchBar.svelte';
 export { default as TerminalBoot } from './components/patterns/TerminalBoot.svelte';
 export { default as ActionBar } from './components/patterns/ActionBar.svelte';
-export { tokens } from './tokens/tokens.js';
+export { default as RegisterSwitcher } from './components/patterns/RegisterSwitcher.svelte';
+export { default as Manifesto } from './components/patterns/Manifesto.svelte';
+export { default as ChapterMark } from './components/patterns/ChapterMark.svelte';
+export { default as PullQuote } from './components/patterns/PullQuote.svelte';
+export { default as ShowcaseFrame } from './components/patterns/ShowcaseFrame.svelte';
+export { default as DepthPortal } from './components/patterns/DepthPortal.svelte';
+export { default as AppShell } from './components/system/AppShell.svelte';
+export { tokens, themeClasses } from './tokens/tokens.js';
 export { applyRegister, clearRegister, registers } from './system/register.js';
 export type { Register } from './system/register.js';
 export type { Expression } from './components/primitives/text.js';
@@ -66,8 +73,15 @@ export { default as SignalRing } from './components/ambient/SignalRing.svelte';
 export { default as GlyphMark } from './components/ambient/GlyphMark.svelte';
 export { default as DataStream } from './components/ambient/DataStream.svelte';
 export { default as ThreadLine } from './components/ambient/ThreadLine.svelte';
+export { default as HexGrid } from './components/ambient/HexGrid.svelte';
+export { default as BrassFiligree } from './components/ambient/BrassFiligree.svelte';
+export { default as CrystalShard } from './components/ambient/CrystalShard.svelte';
+export { default as ArcaneVein } from './components/ambient/ArcaneVein.svelte';
+export { default as EnergyArc } from './components/ambient/EnergyArc.svelte';
+export { default as ShimmerCloud } from './components/ambient/ShimmerCloud.svelte';
 export { default as NarrativeScene } from './components/scenes/NarrativeScene.svelte';
 export { default as ReadoutScene } from './components/scenes/ReadoutScene.svelte';
 export { default as StageScene } from './components/scenes/StageScene.svelte';
 export { default as ArchiveScene } from './components/scenes/ArchiveScene.svelte';
 export { default as LogScene } from './components/scenes/LogScene.svelte';
+export { default as DepthScene } from './components/scenes/DepthScene.svelte';

package/dist/index.js

@@ -54,8 +54,16 @@ export { default as ConfirmDialog } from './components/patterns/ConfirmDialog.sv
 export { default as SearchBar } from './components/patterns/SearchBar.svelte';
 export { default as TerminalBoot } from './components/patterns/TerminalBoot.svelte';
 export { default as ActionBar } from './components/patterns/ActionBar.svelte';
+export { default as RegisterSwitcher } from './components/patterns/RegisterSwitcher.svelte';
+export { default as Manifesto } from './components/patterns/Manifesto.svelte';
+export { default as ChapterMark } from './components/patterns/ChapterMark.svelte';
+export { default as PullQuote } from './components/patterns/PullQuote.svelte';
+export { default as ShowcaseFrame } from './components/patterns/ShowcaseFrame.svelte';
+export { default as DepthPortal } from './components/patterns/DepthPortal.svelte';
+// system — shell
+export { default as AppShell } from './components/system/AppShell.svelte';
 // tokens
-export { tokens } from './tokens/tokens.js';
+export { tokens, themeClasses } from './tokens/tokens.js';
 // system — register
 export { applyRegister, clearRegister, registers } from './system/register.js';
 // system — actions
@@ -75,9 +83,16 @@ export { default as SignalRing } from './components/ambient/SignalRing.svelte';
 export { default as GlyphMark } from './components/ambient/GlyphMark.svelte';
 export { default as DataStream } from './components/ambient/DataStream.svelte';
 export { default as ThreadLine } from './components/ambient/ThreadLine.svelte';
+export { default as HexGrid } from './components/ambient/HexGrid.svelte';
+export { default as BrassFiligree } from './components/ambient/BrassFiligree.svelte';
+export { default as CrystalShard } from './components/ambient/CrystalShard.svelte';
+export { default as ArcaneVein } from './components/ambient/ArcaneVein.svelte';
+export { default as EnergyArc } from './components/ambient/EnergyArc.svelte';
+export { default as ShimmerCloud } from './components/ambient/ShimmerCloud.svelte';
 // scenes
 export { default as NarrativeScene } from './components/scenes/NarrativeScene.svelte';
 export { default as ReadoutScene } from './components/scenes/ReadoutScene.svelte';
 export { default as StageScene } from './components/scenes/StageScene.svelte';
 export { default as ArchiveScene } from './components/scenes/ArchiveScene.svelte';
 export { default as LogScene } from './components/scenes/LogScene.svelte';
+export { default as DepthScene } from './components/scenes/DepthScene.svelte';

package/dist/styles.css

@@ -8,6 +8,8 @@
  */
 
 @import './tokens/tokens.css';
+@import './tokens/hextech.css';
+@import './tokens/arcane.css';
 @import './system/register.css';
 @import './system/expressions.css';
 @import './system/depth/depth.css';

package/dist/system/actions/echo.js

@@ -8,6 +8,9 @@
  */
 export function echo(node) {
     const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    let frame = 0;
+    let t1 = 0;
+    let t2 = 0;
     function handleClick(e) {
         if (prefersReduced)
             return;
@@ -22,18 +25,21 @@ export function echo(node) {
       pointer-events: none;
       background: radial-gradient(circle at ${x}% ${y}%, rgba(199, 156, 87, 0.22), transparent 70%);
       opacity: 0;
-      transition: opacity 0.15s ease-out;
+      transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
     `;
         const position = getComputedStyle(node).position;
         if (position === 'static')
             node.style.position = 'relative';
         node.style.overflow = 'hidden';
         node.appendChild(overlay);
-        requestAnimationFrame(() => {
+        cancelAnimationFrame(frame);
+        clearTimeout(t1);
+        clearTimeout(t2);
+        frame = requestAnimationFrame(() => {
             overlay.style.opacity = '1';
-            setTimeout(() => {
+            t1 = setTimeout(() => {
                 overlay.style.opacity = '0';
-                setTimeout(() => overlay.remove(), 200);
+                t2 = setTimeout(() => overlay.remove(), 200);
             }, 200);
         });
     }
@@ -41,6 +47,9 @@ export function echo(node) {
     return {
         destroy() {
             node.removeEventListener('click', handleClick);
+            cancelAnimationFrame(frame);
+            clearTimeout(t1);
+            clearTimeout(t2);
         }
     };
 }

package/dist/system/actions/resolve.js

@@ -25,6 +25,9 @@ export function resolve(node, register) {
     const position = getComputedStyle(node).position;
     if (position === 'static')
         node.style.position = 'relative';
+    let frame = 0;
+    let t1 = 0;
+    let t2 = 0;
     function trigger(status) {
         node.dispatchEvent(new CustomEvent('resolve:start', { detail: status }));
         if (prefersReduced) {
@@ -39,15 +42,18 @@ export function resolve(node, register) {
       background: ${statusColors[status]};
       opacity: 0;
       border-radius: inherit;
-      transition: opacity 0.12s ease-out;
+      transition: opacity 0.12s cubic-bezier(0.4, 0, 0.2, 1);
     `;
         node.appendChild(overlay);
-        requestAnimationFrame(() => {
+        cancelAnimationFrame(frame);
+        clearTimeout(t1);
+        clearTimeout(t2);
+        frame = requestAnimationFrame(() => {
             overlay.style.opacity = '0.12';
-            setTimeout(() => {
-                overlay.style.transition = 'opacity 0.4s ease-out';
+            t1 = setTimeout(() => {
+                overlay.style.transition = 'opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1)';
                 overlay.style.opacity = '0';
-                setTimeout(() => {
+                t2 = setTimeout(() => {
                     overlay.remove();
                     node.dispatchEvent(new CustomEvent('resolve:end', { detail: status }));
                 }, 450);
@@ -55,5 +61,13 @@ export function resolve(node, register) {
         });
     }
     register({ trigger });
-    return {};
+    return {
+        destroy() {
+            cancelAnimationFrame(frame);
+            clearTimeout(t1);
+            clearTimeout(t2);
+            if (position === 'static')
+                node.style.position = '';
+        }
+    };
 }

package/dist/system/actions/reveal.js

@@ -21,7 +21,7 @@ export function reveal(node, options) {
         target.style.opacity = '0';
         target.style.transform = prefersReduced ? 'none' : 'translateY(4px)';
         if (!prefersReduced) {
-            target.style.transition = 'opacity 0.25s ease-out, transform 0.25s ease-out';
+            target.style.transition = 'opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1), transform 0.22s cubic-bezier(0.22, 1, 0.36, 1)';
         }
     }
     function show() {

package/dist/system/actions/surface.js

@@ -10,10 +10,9 @@ export function surface(node, options = {}) {
     const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
     if (prefersReduced)
         return {};
-    node.style.willChange = 'opacity, transform';
     node.style.opacity = '0';
     node.style.transform = 'translateY(6px)';
-    node.style.transition = `opacity 0.5s ease-out ${delay}ms, transform 0.5s ease-out ${delay}ms`;
+    node.style.transition = `opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1) ${delay}ms, transform 0.38s cubic-bezier(0.22, 1, 0.36, 1) ${delay}ms`;
     function onEnd(e) {
         if (e.propertyName !== 'transform')
             return;
@@ -21,7 +20,6 @@ export function surface(node, options = {}) {
         // Clear transforms to avoid creating containing blocks for fixed/floating UI.
         node.style.transform = 'none';
         node.style.transition = '';
-        node.style.willChange = '';
     }
     node.addEventListener('transitionend', onEnd);
     const frame = requestAnimationFrame(() => {

package/dist/system/register.d.ts

@@ -1,4 +1,4 @@
-export type Register = 'field-notebook' | 'mission-control' | 'archive';
+export type Register = 'field-notebook' | 'mission-control' | 'archive' | 'hextech' | 'arcane';
 /**
  * Applies a register to an element by setting data-register.
  * Call with a DOM element reference or 'body' to set globally.

package/dist/system/register.js

@@ -3,6 +3,8 @@
  * Call with a DOM element reference or 'body' to set globally.
  */
 export function applyRegister(register, target = 'body') {
+    if (typeof document === 'undefined')
+        return;
     const el = target === 'body' ? document.body : target;
     el.dataset.register = register;
 }
@@ -10,7 +12,9 @@ export function applyRegister(register, target = 'body') {
  * Removes the register from an element, restoring default behavior.
  */
 export function clearRegister(target = 'body') {
+    if (typeof document === 'undefined')
+        return;
     const el = target === 'body' ? document.body : target;
     delete el.dataset.register;
 }
-export const registers = ['field-notebook', 'mission-control', 'archive'];
+export const registers = ['field-notebook', 'mission-control', 'archive', 'hextech', 'arcane'];

package/dist/tokens/arcane.css

@@ -0,0 +1,96 @@
+/* ── arcane register tokens ───────────────────────────────────────────── */
+/* Zaun-unstable. Raw crystal + smoke + organic glow.                      */
+/* Applied under [data-register='arcane'].                                  */
+
+[data-register='arcane'] {
+	/* palette — new raw values */
+	--arc-void: #0e0818;
+	--arc-violet-deep: #2a0e3b;
+	--arc-violet: #7b2d8e;
+	--arc-magenta: #b845c9;
+	--arc-shimmer: #e94cbc;
+	--arc-pink-hot: #ff6b9d;
+	--arc-tox-green: #7fb069;
+	--arc-smoke: #3a3a4e;
+	--arc-vein-glow: rgba(184, 69, 201, 0.55);
+	--arc-crackle: rgba(233, 76, 188, 0.7);
+	--arc-particle: rgba(255, 107, 157, 0.6);
+
+	/* remap semantic tokens → arcane palette */
+	--bg: #0a0614;
+	--bg-elev: #130920;
+	--bg-elev-soft: #0f071a;
+
+	--accent: #b845c9;
+	--accent-strong: #e94cbc;
+	--signal: #7fb069;
+
+	--line: rgba(184, 69, 201, 0.18);
+	--line-strong: rgba(233, 76, 188, 0.3);
+
+	--status-ok: #7fb069;
+	--status-pend: #5a4a6e;
+	--status-warn: #e94cbc;
+	--status-fail: #ff4060;
+
+	--shadow-card: 0 8px 32px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(184, 69, 201, 0.08);
+	--shadow-veil: 0 40px 120px rgba(0, 0, 0, 0.6), 0 0 80px rgba(184, 69, 201, 0.06);
+
+	--focus-ring: 0 0 0 1px rgba(233, 76, 188, 0.5), 0 0 0 4px rgba(184, 69, 201, 0.1);
+
+	--surface-card:
+		linear-gradient(135deg, rgba(184, 69, 201, 0.08), transparent 44%),
+		linear-gradient(225deg, rgba(233, 76, 188, 0.04), transparent 32%), #0a0614;
+	--surface-panel:
+		linear-gradient(180deg, rgba(184, 69, 201, 0.1), transparent 22%),
+		linear-gradient(135deg, rgba(233, 76, 188, 0.06), #0a0614 44%),
+		#07040f;
+	--surface-soft:
+		linear-gradient(180deg, rgba(184, 69, 201, 0.03), transparent 38%),
+		linear-gradient(135deg, rgba(233, 76, 188, 0.04), transparent 50%),
+		rgba(10, 6, 20, 0.9);
+	--surface-stroke: inset 0 1px 0 rgba(233, 76, 188, 0.07);
+
+	/* motif tokens */
+	--orn-hex-density: 0;
+	--orn-vein-intensity: 1;
+	--orn-shimmer-rate: 2.4s;
+	--orn-pulse-rhythm: cubic-bezier(0.6, 0, 0.4, 1);
+	--orn-glow-radius: 20px;
+	--orn-glow-color: rgba(184, 69, 201, 0.45);
+
+	/* register weight distribution */
+	--reg-font-primary: var(--font-body);
+	--reg-font-ui: var(--font-mono);
+	--reg-heading-tracking: -0.04em;
+	--reg-heading-lh: 0.94;
+	--reg-body-size: 1.12rem;
+	--reg-label-size: 0.68rem;
+	--reg-label-tracking: 0.13em;
+	--reg-surface-opacity: 0.82;
+	--reg-ornament-opacity: 0.28;
+	--reg-accent-weight: 1.1;
+	--reg-signal-weight: 0.7;
+	--reg-spacing-scale: 1.08;
+
+	/* motion — organic, breathing */
+	--transition-smooth: 0.42s cubic-bezier(0.6, 0, 0.4, 1);
+	--transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
+	--ease-smooth: cubic-bezier(0.6, 0, 0.4, 1);
+}
+
+/* atmospheric background override */
+[data-register='arcane'] body::before,
+body[data-register='arcane']::before {
+	background:
+		radial-gradient(circle at top, rgba(184, 69, 201, 0.07), transparent 28%),
+		radial-gradient(circle at 80% 60%, rgba(233, 76, 188, 0.04), transparent 32%),
+		linear-gradient(180deg, #0a0614 0%, #07040f 40%, #050310 100%);
+}
+
+/* selection color */
+[data-register='arcane'] ::selection,
+body[data-register='arcane'] ::selection {
+	background-color: rgba(184, 69, 201, 0.28);
+	color: var(--text);
+}