@rackbops/styles 0.1.0

package/arcane-parchment/components/tabs.css

@@ -0,0 +1,45 @@
+/* arcane-parchment — tabs
+ * The active tab carries accent text + a faint wash, and the ONE gradient is
+ * rationed here as a 2px underline indicator — the console's signature flair. */
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tabs {
+  display: flex;
+  gap: var(--rb-space-2);
+  border-bottom: 1px solid var(--rb-border);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tab {
+  position: relative;
+  padding: var(--rb-space-2) var(--rb-space-4);
+  background: transparent;
+  border: 0;
+  color: var(--rb-text-soft);
+  font-family: var(--rb-font-body);
+  font-weight: var(--rb-font-weight-medium);
+  font-size: var(--rb-text-sm);
+  cursor: pointer;
+  transition: color var(--rb-transition);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tab:hover {
+  color: var(--rb-text);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tab.rb-tab--active {
+  color: var(--rb-accent);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tab.rb-tab--active::after {
+  content: "";
+  position: absolute;
+  left: var(--rb-space-3);
+  right: var(--rb-space-3);
+  bottom: -1px;
+  height: 2px;
+  border-radius: 2px 2px 0 0;
+  background: var(--rb-accent-grad);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tabpanel {
+  padding: var(--rb-space-4) 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tab {
+    transition: none;
+  }
+}

package/arcane-parchment/components/tabstrip.css

@@ -0,0 +1,35 @@
+/* arcane-parchment — tabstrip (theme extra)
+ * The console's top-level view nav: natural-width bordered pill buttons.
+ * The active button gets accent text + a faint wash and an accent-tinted
+ * border; distinct from the text-underline .rb-tabs used inside a panel. */
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tabstrip {
+  display: flex;
+  gap: var(--rb-space-2);
+  padding: var(--rb-space-2) 0;
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tabstrip__tab {
+  position: relative;
+  padding: var(--rb-space-2) var(--rb-space-4);
+  background: var(--rb-surface-2);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius);
+  color: var(--rb-text);
+  font-size: var(--rb-text-sm);
+  font-weight: var(--rb-font-weight-medium);
+  cursor: pointer;
+  transition: border-color var(--rb-transition);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tabstrip__tab:hover {
+  border-color: var(--rb-accent);
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tabstrip__tab.rb-tabstrip__tab--active {
+  color: var(--rb-accent);
+  border-color: color-mix(in srgb, var(--rb-accent) 40%, var(--rb-border));
+  background: var(--rb-accent-wash);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tabstrip__tab {
+    transition: none;
+  }
+}

package/arcane-parchment/components/wordmark.css

@@ -0,0 +1,23 @@
+/* arcane-parchment — wordmark (theme extra)
+ * The brand voice: a mono display h1 with the ONE gradient clipped into the
+ * text, and a solid-accent spark mark that stays un-clipped. This and the
+ * active tab underline are the only two places the gradient is spent. */
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-wordmark {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.4em;
+  margin: 0;
+  font-family: var(--rb-font-display);
+  font-weight: var(--rb-font-weight-medium);
+  font-size: 15px;
+  letter-spacing: var(--rb-heading-tracking);
+  background-image: var(--rb-accent-grad);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+}
+:where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-wordmark__spark {
+  color: var(--rb-accent);
+  -webkit-text-fill-color: var(--rb-accent);
+}

package/arcane-parchment/design.md

@@ -0,0 +1,89 @@
+# arcane-parchment
+
+The light, AA-tuned counterpart of **arcane-obsidian** — artifact-console's
+"Parchment" scheme. Same developer-console language (monospace display voice over
+a `system-ui` body, tabular numerals, the sole arcane-violet accent, the one
+rationed violet→gold gradient, flat shadow-based depth) rendered on a cool
+off-white ground instead of obsidian. It ships the identical `rb-*` component set
+as arcane-obsidian — the components are token-driven, so only the palette differs
+— and swaps in with a single attribute flip. Derived from artifact-console#31.
+
+## Color
+
+Palette values match artifact-console's light scheme. Unlike the studio themes,
+the arcane accent (a darker violet) stays **above WCAG AA as text on white**
+(~5.5:1), so accent labels, body text, and the muted ramp all clear AA. The one
+exception — inherited from artifact-console itself — is the semantic chip colours
+(`--rb-success/--rb-warning/...`) used as small text on their faint tint, which
+sit below 4.5:1; treat those as status accents, not body copy.
+
+| Role | Value | Usage |
+| --- | --- | --- |
+| Background | `#f6f7f9` (cool parchment) | Page canvas |
+| Surface | `#ffffff` | Cards, header, panels |
+| Surface 2 | `#f1f3f7` | Raised/hover surface, active-tab wash base |
+| Surface sunken | `#edeff3` | Inset fields, log wells, progress troughs |
+| Text | `#191d26` | Body text |
+| Text soft | `#4a5261` | Secondary text |
+| Text faint | `#5f6b7d` | Labels, headers, meta (tuned darker than report's `#7c8598` for AA) |
+| Border | `#e2e6ec` | Resting hairline borders |
+| Border strong | `#cbd2dc` | Dialog edges, header rules |
+| Accent | `#6a4fe0` (arcane-violet) | The sole brand voice: emphasis, active state, focus (~5.5:1 on white) |
+| Accent fg | `#ffffff` | White on the solid violet fill |
+| Accent wash | `rgba(106,79,224,.12)` | Active/hover tint behind accent text |
+| Info | `#1e6fd0` | Informational chips |
+| Success | `#1f9d57` | Healthy/live status |
+| Warning | `#c07d12` | Caution status |
+| Danger | `#d64550` | Destructive actions, errors |
+
+**Rules.** Colour is functional. Resting UI is parchment, white, and faint;
+violet appears only on interaction, focus, active state, and emphasis. Colour
+beyond the accent is *earned* — severity and status chips are the one place other
+hues appear. Muted-on-surface is tuned to clear WCAG AA (4.5:1) on every surface.
+
+## Typography
+
+Identical to arcane-obsidian: monospace display voice (the wordmark, weight 600,
+tracking `-0.01em`) over a `system-ui` body (weight 400); `tabular-nums` wherever
+data is shown; mono uppercase labels tracked `0.06em`.
+
+## Shape & effects
+
+- Radius `0.4375rem` (7px) for buttons/inputs/rows; `0.75rem` (12px) for cards
+  and dialogs; pills for chips/badges and progress troughs.
+- Flat, shadow-based depth: a two-step light shadow ramp (`--rb-shadow-sm`
+  resting, `--rb-shadow-lg` for dialogs/raised cards). No glow.
+- Focus is the accent: inputs swap to a violet border + a soft `--rb-accent-wash`
+  ring; interactive elements take a 2px accent outline.
+- The **one gradient** (`--rb-accent-grad`, violet → orchid → gold) is rationed
+  to the wordmark and the active-tab underline only; primary buttons stay a solid
+  accent fill.
+- Transitions `0.15s`; every animation respects `prefers-reduced-motion`.
+- 4px spacing rhythm.
+
+## Components
+
+Class prefix `rb-`; the full arcane-obsidian inventory, styled identically from
+tokens: `.rb-wordmark` (+ `__spark`), `.rb-btn` (+ `--primary/--accent/--danger/--ghost`),
+`.rb-card` (+ `--raised`), `.rb-link`, the form set, `.rb-badge`, `.rb-alert`,
+`.rb-dialog`, `.rb-tabs`, `.rb-tabstrip`, `.rb-table` (+ `.rb-num`),
+`.rb-progress` / `.rb-spinner`, `.rb-eyebrow`. See arcane-obsidian's `design.md`
+for the per-component notes — the behaviour is the same; only the palette is light.
+
+## Code syntax
+
+Tokens `--rb-code-*` (a per-theme extra), light-tuned for AA on the parchment
+ground: violet keywords, dark-green strings, dark-amber numbers, info-blue
+functions, dark-violet types, rose variables, dimmed comments/meta.
+
+## Dark counterpart
+
+`arcane-obsidian` — the primary, dark look. This theme and it share the same
+`--rb-*` baseline and `rb-*` classes, so switching `data-rb-style` between them
+restyles a page without touching markup.
+
+## Scoping
+
+Every rule is guarded by `data-rb-style="arcane-parchment"` (self or ancestor),
+wrapped in zero-specificity `:where()`. Set the attribute on `<html>` for a page
+or on a container for an embedded island.

package/arcane-parchment/index.css

@@ -0,0 +1,16 @@
+/* arcane-parchment — full theme entry point */
+@import "./tokens.css";
+@import "./base.css";
+@import "./components/button.css";
+@import "./components/card.css";
+@import "./components/link.css";
+@import "./components/form.css";
+@import "./components/badge.css";
+@import "./components/alert.css";
+@import "./components/dialog.css";
+@import "./components/tabs.css";
+@import "./components/table.css";
+@import "./components/progress.css";
+@import "./components/eyebrow.css";
+@import "./components/wordmark.css";
+@import "./components/tabstrip.css";

package/arcane-parchment/tokens.css

@@ -0,0 +1,78 @@
+/* arcane-parchment — design tokens
+ * The light, AA-tuned counterpart of arcane-obsidian: artifact-console's
+ * "Parchment" scheme. Same structure, class contract, and component CSS as
+ * arcane-obsidian (token-driven) — only the palette and code colours differ.
+ * Consume via:
+ *   @import "@rackbops/styles/arcane-parchment/tokens";
+ * or pull the whole theme with ./index.css.
+ *
+ * Nothing applies until an element carries data-rb-style="arcane-parchment".
+ * Every theme declares the same baseline token set (styles/test enforces
+ * parity); names marked (extra) are additions this theme's own component CSS
+ * may rely on. Palette values match artifact-console's light scheme.
+ */
+:where([data-rb-style="arcane-parchment"]) {
+  color-scheme: light;
+
+  /* color — cool off-white parchment, white raised surfaces */
+  --rb-bg: #f6f7f9;
+  --rb-surface: #ffffff;
+  --rb-surface-2: #f1f3f7;
+  --rb-surface-sunken: #edeff3; /* inset fields, log wells */
+  --rb-text: #191d26;
+  --rb-text-soft: #4a5261;
+  --rb-text-faint: #5f6b7d; /* tuned darker than report's #7c8598 so muted-on-surface clears AA */
+  --rb-border: #e2e6ec;
+  --rb-border-strong: #cbd2dc;
+
+  /* accent — arcane-violet, the sole brand voice (darker on light for AA) */
+  --rb-accent: #6a4fe0;
+  --rb-accent-fg: #ffffff; /* white on the solid violet fill */
+  --rb-accent-wash: rgba(106, 79, 224, 0.12);
+
+  /* the ONE gradient — rationed to wordmark + active tab only */
+  --rb-accent-grad: linear-gradient(120deg, #6a4fe0, #a25be0 46%, #d99a2a);
+
+  /* semantic — earned: severity/status only */
+  --rb-info: #1e6fd0;
+  --rb-success: #1f9d57;
+  --rb-warning: #c07d12;
+  --rb-danger: #d64550;
+
+  /* code syntax (extra) — light-tuned; only this theme renders code */
+  --rb-code-keyword: #6a4fe0;
+  --rb-code-string: #0f7a3d;
+  --rb-code-number: #9a6400;
+  --rb-code-comment: #7c8598;
+  --rb-code-function: #1e6fd0;
+  --rb-code-variable: #c2255c;
+  --rb-code-type: #7a3ecc;
+  --rb-code-meta: #5f6b7d;
+
+  /* typography — monospace display voice over a system-ui body; tabular numerals */
+  --rb-font-display: ui-monospace, "Cascadia Code", "Cascadia Mono", "Segoe UI Mono", Consolas, Menlo, monospace;
+  --rb-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --rb-font-mono: ui-monospace, "Cascadia Code", "Cascadia Mono", "Segoe UI Mono", Consolas, Menlo, monospace;
+  --rb-font-weight: 400;
+  --rb-font-weight-medium: 600;
+  --rb-font-weight-bold: 700;
+  --rb-heading-tracking: -0.01em;
+  --rb-label-tracking: 0.06em;
+  --rb-text-sm: 13px;
+
+  /* shape & effects — flat, compact console radii; soft light shadows */
+  --rb-radius: 0.4375rem; /* 7px */
+  --rb-radius-lg: 0.75rem; /* 12px */
+  --rb-radius-pill: 999px;
+  --rb-shadow-sm: 0 1px 2px rgba(20, 25, 40, 0.06);
+  --rb-shadow-lg: 0 6px 24px rgba(20, 25, 40, 0.1);
+  --rb-blur: 12px;
+  --rb-transition: 0.15s;
+
+  /* spacing — 4px rhythm */
+  --rb-space-1: 0.25rem;
+  --rb-space-2: 0.5rem;
+  --rb-space-3: 0.75rem;
+  --rb-space-4: 1rem;
+  --rb-space-5: 1.5rem;
+}

package/luminous-precision/base.css

@@ -0,0 +1,58 @@
+/* luminous-precision — base styles
+ * Scoped defaults. Requires tokens.css. Apps that need webfonts should
+ * include the Google Fonts <link>s for Sora (500, 600, 700) and
+ * JetBrains Mono (400, 600, 700) or self-host; the token stacks fall back
+ * to system families.
+ *
+ * The element carrying data-rb-style is the theme's canvas: it gets the
+ * background, text color, and body font — whether that is <html> for a page
+ * or a mount container for an embedded island. Page-only rules (body margin,
+ * viewport height) apply only when the attribute sits on <html>.
+ */
+:where([data-rb-style="luminous-precision"]) {
+  background-color: var(--rb-bg);
+  color: var(--rb-text);
+  font-family: var(--rb-font-body);
+  font-weight: var(--rb-font-weight);
+}
+
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *),
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *)::before,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *)::after {
+  box-sizing: border-box;
+}
+
+:where(html[data-rb-style="luminous-precision"]) body {
+  margin: 0;
+  min-height: 100vh;
+  background-color: var(--rb-bg);
+  color: var(--rb-text);
+  font-family: var(--rb-font-body);
+  font-weight: var(--rb-font-weight);
+}
+
+/* Opt-in page background: soft out-of-focus orchid/teal underlays over the
+ * obsidian base — the "luminous underlay" treatment. Apply to <body>, or to
+ * the attributed container itself. */
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-bg {
+  background:
+    radial-gradient(50rem 30rem at 12% -5%, rgba(198, 165, 255, 0.08), transparent 70%),
+    radial-gradient(55rem 35rem at 90% 105%, rgba(0, 245, 255, 0.05), transparent 70%),
+    var(--rb-bg);
+  background-attachment: fixed;
+}
+
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *):where(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--rb-font-display);
+  font-weight: var(--rb-font-weight-medium);
+  letter-spacing: var(--rb-heading-tracking);
+}
+
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *):where(a) {
+  color: var(--rb-accent);
+}
+
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *)::selection {
+  background: var(--rb-accent);
+  color: var(--rb-bg);
+}

package/luminous-precision/components/alert.css

@@ -0,0 +1,26 @@
+/* luminous-precision — alert / callout */
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-alert {
+  padding: var(--rb-space-3) var(--rb-space-4);
+  background: var(--rb-surface-glass);
+  border: 1px solid var(--rb-border);
+  border-left-width: 3px;
+  border-radius: var(--rb-radius);
+  backdrop-filter: blur(var(--rb-blur));
+  color: var(--rb-text);
+  font-size: var(--rb-text-sm);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-alert--info    { border-left-color: var(--rb-info); }
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-alert--success { border-left-color: var(--rb-success); }
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-alert--warning { border-left-color: var(--rb-warning); }
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-alert--danger  { border-left-color: var(--rb-danger); }
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-alert__title {
+  display: block;
+  margin-bottom: var(--rb-space-1);
+  text-transform: uppercase;
+  font-weight: var(--rb-font-weight-medium);
+  letter-spacing: var(--rb-label-tracking);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-alert--info .rb-alert__title    { color: var(--rb-info); }
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-alert--success .rb-alert__title { color: var(--rb-success); }
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-alert--warning .rb-alert__title { color: var(--rb-warning); }
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-alert--danger .rb-alert__title  { color: var(--rb-danger); }

package/luminous-precision/components/badge.css

@@ -0,0 +1,19 @@
+/* luminous-precision — badge: pill chip, 15% tint of its hue behind
+ * full-saturation text */
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-badge {
+  display: inline-block;
+  padding: 0.15rem var(--rb-space-2);
+  background: rgba(255, 255, 255, 0.08);
+  border: none;
+  border-radius: 9999px;
+  color: var(--rb-text-faint);
+  text-transform: uppercase;
+  font-size: 11px;
+  font-weight: var(--rb-font-weight-medium);
+  letter-spacing: var(--rb-label-tracking);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-badge--primary { background: rgba(198, 165, 255, 0.15); color: var(--rb-accent); }
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-badge--info    { background: rgba(131, 183, 255, 0.15); color: var(--rb-info); }
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-badge--success { background: rgba(71, 227, 78, 0.15);   color: var(--rb-success); }
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-badge--warning { background: rgba(255, 184, 108, 0.15); color: var(--rb-warning); }
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-badge--danger  { background: rgba(255, 77, 109, 0.15);  color: var(--rb-danger); }

package/luminous-precision/components/button.css

@@ -0,0 +1,88 @@
+/* luminous-precision — button */
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rb-space-2);
+  padding: var(--rb-space-2) var(--rb-space-3);
+  background: transparent;
+  border: 1px solid var(--rb-border-strong);
+  border-radius: var(--rb-radius);
+  color: var(--rb-text);
+  text-transform: uppercase;
+  font-family: var(--rb-font-mono);
+  font-weight: var(--rb-font-weight-medium);
+  font-size: var(--rb-text-sm);
+  letter-spacing: var(--rb-label-tracking);
+  cursor: pointer;
+  transition:
+    border-color var(--rb-transition),
+    color var(--rb-transition),
+    box-shadow var(--rb-transition);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn:hover,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn:focus-visible {
+  border-color: var(--rb-accent-border);
+  color: var(--rb-accent);
+  animation: rb-lp-pulse-glow 2s infinite;
+  outline: none;
+}
+
+/* primary: solid orchid fill, dark text, glow pulse on hover */
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--primary {
+  background: var(--rb-accent);
+  border-color: var(--rb-accent);
+  color: var(--rb-accent-fg);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--primary:hover,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--primary:focus-visible {
+  border-color: var(--rb-accent);
+  color: var(--rb-accent-fg);
+}
+
+/* accent: teal ghost — critical navigation paths */
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--accent {
+  border-color: var(--rb-accent-2);
+  color: var(--rb-accent-2);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--accent:hover,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--accent:focus-visible {
+  border-color: var(--rb-accent-2);
+  color: var(--rb-accent-2);
+  animation-name: rb-lp-pulse-glow-accent;
+}
+
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--danger {
+  border-color: var(--rb-danger);
+  color: var(--rb-danger);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--danger:hover,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn--danger:focus-visible {
+  border-color: var(--rb-danger);
+  color: var(--rb-danger);
+}
+
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  animation: none;
+}
+
+@keyframes rb-lp-pulse-glow-accent {
+  0%,
+  100% {
+    box-shadow: 0 0 5px rgba(0, 245, 255, 0.15);
+  }
+  50% {
+    box-shadow: 0 0 20px var(--rb-accent-2-glow);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn {
+    transition: none;
+  }
+  :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn:hover,
+  :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-btn:focus-visible {
+    animation: none;
+  }
+}

package/luminous-precision/components/card.css

@@ -0,0 +1,12 @@
+/* luminous-precision — card: glass pane with a lit top edge */
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-card {
+  padding: var(--rb-space-4);
+  background: var(--rb-surface-glass);
+  border: 1px solid var(--rb-border);
+  border-top-color: var(--rb-border-strong);
+  border-radius: var(--rb-radius-lg);
+  backdrop-filter: blur(var(--rb-blur));
+  color: var(--rb-text);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-card > :first-child { margin-top: 0; }
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-card > :last-child { margin-bottom: 0; }

package/luminous-precision/components/dialog.css

@@ -0,0 +1,31 @@
+/* luminous-precision — dialog (native <dialog>) */
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-dialog {
+  padding: var(--rb-space-4);
+  max-width: 32rem;
+  width: calc(100vw - 2rem);
+  background: var(--rb-surface);
+  border: 1px solid var(--rb-border);
+  border-top-color: var(--rb-border-strong);
+  border-radius: var(--rb-radius-lg);
+  color: var(--rb-text);
+  font-family: var(--rb-font-mono);
+  box-shadow: 0 0 40px var(--rb-accent-glow);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-dialog::backdrop {
+  background: rgba(10, 12, 16, 0.6);
+  backdrop-filter: blur(var(--rb-blur));
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-dialog__title {
+  margin: 0 0 var(--rb-space-3);
+  color: var(--rb-accent);
+  font-family: var(--rb-font-display);
+  font-size: 1.25rem;
+  font-weight: var(--rb-font-weight-medium);
+  letter-spacing: var(--rb-heading-tracking);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-dialog__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--rb-space-2);
+  margin-top: var(--rb-space-4);
+}

package/luminous-precision/components/form.css

@@ -0,0 +1,126 @@
+/* luminous-precision — form controls: input, textarea, select, checkbox,
+ * radio, switch. Focus drops the resting border for an electric-teal line
+ * with a soft outer glow. */
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-input,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-select,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-textarea {
+  display: block;
+  width: 100%;
+  padding: var(--rb-space-2) var(--rb-space-3);
+  background: rgba(26, 29, 41, 0.6);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius);
+  color: var(--rb-text);
+  font-family: var(--rb-font-mono);
+  font-weight: var(--rb-font-weight);
+  font-size: var(--rb-text-sm);
+  transition: border-color var(--rb-transition), box-shadow var(--rb-transition);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-select {
+  appearance: none;
+  padding-right: 2.25rem;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23958e9b' stroke-width='1.5'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-input::placeholder,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-textarea::placeholder {
+  color: var(--rb-text-faint);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-input:focus,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-select:focus,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-textarea:focus {
+  outline: none;
+  border-color: var(--rb-accent-2);
+  box-shadow: 0 0 8px var(--rb-accent-2-glow);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-input[aria-invalid="true"],
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-textarea[aria-invalid="true"] {
+  border-color: var(--rb-danger);
+}
+
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-label {
+  display: block;
+  margin-bottom: var(--rb-space-1);
+  color: var(--rb-text-faint);
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: var(--rb-font-weight-medium);
+  letter-spacing: var(--rb-label-tracking);
+}
+
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-field {
+  margin-bottom: var(--rb-space-3);
+}
+
+/* checkbox & radio */
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-checkbox,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-radio {
+  appearance: none;
+  width: 1.1rem;
+  height: 1.1rem;
+  margin: 0;
+  vertical-align: text-bottom;
+  background: var(--rb-surface);
+  border: 1px solid var(--rb-border-strong);
+  border-radius: 0.25rem;
+  cursor: pointer;
+  transition: border-color var(--rb-transition), box-shadow var(--rb-transition);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-radio {
+  border-radius: 50%;
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-checkbox:checked,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-radio:checked {
+  border-color: var(--rb-accent-2);
+  box-shadow: inset 0 0 0 3px var(--rb-surface), inset 0 0 0 1rem var(--rb-accent-2),
+    0 0 6px var(--rb-accent-2-glow);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-checkbox:focus-visible,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-radio:focus-visible,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-switch:focus-visible {
+  outline: none;
+  border-color: var(--rb-accent-border);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-choice {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rb-space-2);
+  color: var(--rb-text);
+  font-size: var(--rb-text-sm);
+  cursor: pointer;
+}
+
+/* switch */
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-switch {
+  appearance: none;
+  width: 2.4rem;
+  height: 1.3rem;
+  margin: 0;
+  vertical-align: text-bottom;
+  background: var(--rb-surface);
+  border: 1px solid var(--rb-border-strong);
+  border-radius: 1rem;
+  cursor: pointer;
+  position: relative;
+  transition: border-color var(--rb-transition);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-switch::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: calc(1.3rem - 6px);
+  height: calc(1.3rem - 6px);
+  border-radius: 50%;
+  background: var(--rb-text-faint);
+  transition: transform var(--rb-transition), background var(--rb-transition);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-switch:checked {
+  border-color: var(--rb-accent-2);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-switch:checked::after {
+  transform: translateX(1.1rem);
+  background: var(--rb-accent-2);
+  box-shadow: 0 0 6px var(--rb-accent-2-glow);
+}