@rackbops/styles 0.1.0

package/luminous-precision/components/link.css

@@ -0,0 +1,46 @@
+/* luminous-precision — nav link: glass list row; hover shifts the indigo and
+ * lights a 2px electric-teal bar on the left edge */
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-link {
+  display: flex;
+  align-items: baseline;
+  gap: var(--rb-space-3);
+  padding: 1rem var(--rb-space-4);
+  background: var(--rb-surface-glass);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius);
+  backdrop-filter: blur(var(--rb-blur));
+  color: var(--rb-text);
+  text-decoration: none;
+  text-transform: uppercase;
+  font-weight: var(--rb-font-weight-medium);
+  font-size: var(--rb-text-sm);
+  letter-spacing: var(--rb-label-tracking);
+  box-shadow: inset 0 0 0 0 var(--rb-accent-2);
+  transition:
+    background var(--rb-transition),
+    color var(--rb-transition),
+    box-shadow var(--rb-transition);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-link:hover {
+  background: var(--rb-surface);
+  color: var(--rb-accent-2);
+  box-shadow:
+    inset 2px 0 0 0 var(--rb-accent-2),
+    0 0 12px var(--rb-accent-2-glow);
+}
+
+@keyframes rb-lp-pulse-glow {
+  0%,
+  100% {
+    box-shadow: 0 0 5px rgba(198, 165, 255, 0.15);
+  }
+  50% {
+    box-shadow: 0 0 20px var(--rb-accent-glow);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-link {
+    transition: none;
+  }
+}

package/luminous-precision/components/progress.css

@@ -0,0 +1,41 @@
+/* luminous-precision — progress bar & spinner */
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-progress {
+  display: block;
+  width: 100%;
+  height: 0.5rem;
+  background: var(--rb-surface-sunken);
+  border: 1px solid var(--rb-border);
+  border-radius: 1rem;
+  overflow: hidden;
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-progress__bar {
+  height: 100%;
+  background: var(--rb-accent);
+  box-shadow: 0 0 8px var(--rb-accent-glow);
+  border-radius: 1rem;
+  transition: width var(--rb-transition);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-progress__bar--accent {
+  background: 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-spinner {
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 2px solid var(--rb-border);
+  border-top-color: var(--rb-accent);
+  border-radius: 50%;
+  animation: rb-lp-spin 0.8s linear infinite;
+}
+@keyframes rb-lp-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-spinner {
+    animation-duration: 2s;
+  }
+}

package/luminous-precision/components/table.css

@@ -0,0 +1,28 @@
+/* luminous-precision — table */
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--rb-text-sm);
+  color: var(--rb-text);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-table th {
+  padding: var(--rb-space-2) var(--rb-space-3);
+  border-bottom: 1px solid var(--rb-border-strong);
+  color: var(--rb-text-faint);
+  text-align: left;
+  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-table td {
+  padding: var(--rb-space-2) var(--rb-space-3);
+  border-bottom: 1px solid var(--rb-border);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-table tbody tr {
+  transition: background var(--rb-transition), box-shadow var(--rb-transition);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-table tbody tr:hover {
+  background: var(--rb-surface-glass);
+  box-shadow: inset 2px 0 0 0 var(--rb-accent-2);
+}

package/luminous-precision/components/tabs.css

@@ -0,0 +1,33 @@
+/* luminous-precision — tabs: active tab carries the electric-teal path */
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-tabs {
+  display: flex;
+  gap: var(--rb-space-2);
+  border-bottom: 1px solid var(--rb-border);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-tab {
+  padding: var(--rb-space-2) var(--rb-space-3);
+  margin-bottom: -1px;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--rb-text-faint);
+  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: color var(--rb-transition), border-color var(--rb-transition);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-tab:hover {
+  color: var(--rb-text);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-tab--active,
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-tab[aria-selected="true"] {
+  color: var(--rb-accent-2);
+  border-bottom-color: var(--rb-accent-2);
+  text-shadow: 0 0 8px var(--rb-accent-2-glow);
+}
+:where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-tabpanel {
+  padding: var(--rb-space-3) 0;
+}

package/luminous-precision/design.md

@@ -0,0 +1,124 @@
+# luminous-precision
+
+> **Source & attribution.** Ported from
+> [`nazuraki/ui-std-lib`](https://github.com/nazuraki/ui-std-lib)'s
+> `@nazuraki/styles` "luminous-precision" theme (MIT, Copyright (c) 2026
+> nazuraki — see the repo [`NOTICE`](../../NOTICE)), re-namespaced from `--nb-*` /
+> `.nb-*` / `data-nb-style` to the rackbops `--rb-*` contract. The aesthetic below
+> is nazuraki's; only the token/class names changed.
+
+Professional, nocturnal evolution of neon-butterfly — "Luminous Precision".
+Deep obsidian foundation, glassmorphic indigo surfaces, and light used as the
+interaction language: instead of heavy borders, elements glow. Vibrant orchid
+is the primary voice; electric teal marks active paths and critical signals.
+Sora headlines over JetBrains Mono body give it a commanding, high-tech,
+developer-console feel without going full terminal. Derived from the
+InfraPulse Stitch mockups (Stitch project 18185577263375001507).
+
+## Token mapping (dual accent)
+
+luminous-precision is a two-accent design, but the rackbops baseline carries a
+single `--rb-accent`. The mapping:
+
+| Role | rackbops token | Value |
+| --- | --- | --- |
+| Primary / brand voice (orchid) | `--rb-accent` (+ `--rb-accent-fg`, `--rb-accent-glow`, `--rb-accent-border`) | `#c6a5ff` |
+| Active / critical (electric teal) | `--rb-accent-2` (+ `--rb-accent-2-glow`) — theme extra | `#00f5ff` |
+| Lit glass edge | `--rb-border-strong` | `rgba(255,255,255,0.2)` |
+| Glass pane fill | `--rb-surface-glass` — theme extra | `rgba(26,29,41,0.4)` |
+
+`--rb-accent-2*`, `--rb-surface-glass`, and `--rb-accent-border`/`--rb-accent-glow`
+are theme extras (beyond the baseline set) that only this theme's own components
+rely on.
+
+## Color
+
+| Role | Value | Usage |
+| --- | --- | --- |
+| Background | `#0a0c10` (deep obsidian) | Page background; `.rb-bg` adds soft orchid/teal radial underlays |
+| Surface | `#1a1d29` (indigo) | Solid panels, dialogs |
+| Surface sunken | `#0c0e14` | Inset fields, log wells, progress troughs |
+| Surface glass | `rgba(26,29,41,0.4)` + 12px blur | Cards, nav links, alerts |
+| Text | `#e2e2eb` | Body text |
+| Text faint | `#958e9b` | Secondary text, labels, idle tabs |
+| Accent (orchid) | `#c6a5ff` | Primary buttons (solid fill), emphasis, glow |
+| Accent-2 (teal) | `#00f5ff` | Active states, focus rings, success paths, list-edge bars |
+| Info | `#83b7ff` | Informational callouts and chips |
+| Success | `#47e34e` | Live/healthy status |
+| Warning | `#ffb86c` (amber) | Caution states |
+| Danger | `#ff4d6d` (rose) | Destructive actions, errors |
+| Border | `rgba(255,255,255,0.08)` | Resting borders |
+| Border strong | `rgba(255,255,255,0.2)` | Top edge of glass panes — simulates overhead light |
+
+Rules: color is functional, never decorative. Resting UI stays obsidian/faint;
+orchid and teal appear on interaction, focus, and state. Depth comes from
+tonal layers and glow, not drop shadows. Never pure white or pure black.
+
+## Typography
+
+- **Headlines:** Sora (500 md / 600 lg / 700 xl), tight letter-spacing
+  (−0.01 to −0.02em; `--rb-heading-tracking`); fallback `ui-sans-serif`.
+- **Body & UI:** JetBrains Mono 400; fallback `ui-monospace`.
+- **Labels & interactive text** (buttons, tabs, table headers): uppercase,
+  600, 12–14px, letter-spacing `0.05em` (`--rb-label-tracking`).
+
+Webfonts are declared in `styles/manifest.json` (`luminous-precision.fonts`);
+consumers load that stylesheet (Sora + JetBrains Mono) or self-host. The token
+stacks fall back to system families when the webfonts are absent.
+
+## Shape & effects
+
+- Radius `0.5rem` for buttons and inputs; `1rem` for cards, dialogs, and large
+  containers. Pills (`--rb-radius-pill`) reserved strictly for chips/badges and
+  switches.
+- Glass panes: 1px hairline borders with a lighter top edge
+  (`--rb-border-strong`) to simulate overhead lighting; `backdrop-filter` 12px.
+- Focus is electric teal: inputs drop the resting border for a teal line plus
+  soft teal outer glow.
+- Elevation = glow (`rb-lp-pulse-glow` orchid, `rb-lp-pulse-glow-accent` teal),
+  not dark shadows. `--rb-shadow-*` exist for baseline parity but the components
+  lean on glow. Transitions 0.3s. Respect `prefers-reduced-motion`.
+- 8px spacing rhythm; generous negative space so glows can breathe.
+
+## Components
+
+Class prefix `rb-` (shared token/class contract with the other themes).
+
+- **Card** `.rb-card` — glass pane, 1rem radius, lit top edge.
+- **NavLink** `.rb-link` — glass list row; hover shifts to solid indigo and
+  lights a 2px teal bar on the left edge.
+- **Button** `.rb-btn` — ghost by default; `--primary` is the one solid fill
+  (orchid, dark text), `--accent` teal ghost, `--danger` rose ghost.
+- **Form** `.rb-input`, `.rb-textarea`, `.rb-select`, `.rb-label`,
+  `.rb-field`, `.rb-checkbox`, `.rb-radio`, `.rb-switch`, `.rb-choice` —
+  checked/focus states glow teal.
+- **Badge** `.rb-badge` — pill chip: 15% tint of its hue behind
+  full-saturation text (+ semantic modifiers).
+- **Alert** `.rb-alert` — glass, 3px left bar carries the semantic color.
+- **Dialog** `.rb-dialog` — native `<dialog>`, indigo pane with orchid glow,
+  Sora title, blurred obsidian backdrop.
+- **Tabs** `.rb-tabs`/`.rb-tab`/`.rb-tabpanel` — active tab underlined in
+  teal with text glow.
+- **Table** `.rb-table` — lit header rule; row hover shifts glass and lights
+  the teal left bar.
+- **Progress** `.rb-progress`, **Spinner** `.rb-spinner` — glowing orchid
+  indicators (`--accent` bar variant in teal).
+
+This port carries nazuraki's original component set; the rackbops-specific
+`eyebrow`, `tabstrip`, `wordmark`, and `card--raised` surfaces are not part of
+it. It also keeps nazuraki's `.rb-badge--primary` variant (orchid pill), which
+the other rackbops themes don't define — a `@rackbops/ui-react` `Badge` never
+emits it, so it is a theme extra, harmless where unused.
+
+## Code syntax
+
+Tokens `--rb-code-*` (theme extra). Orchid keywords, teal types, info-blue
+functions, amber numbers, success-green strings, soft-rose variables,
+dimmed-faint comments, faint meta — palette voices reused, never new hues for
+decoration.
+
+## Scoping
+
+Every rule is guarded by `data-rb-style="luminous-precision"` (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/luminous-precision/index.css

@@ -0,0 +1,13 @@
+/* luminous-precision — full theme entry point */
+@import "./tokens.css";
+@import "./base.css";
+@import "./components/card.css";
+@import "./components/link.css";
+@import "./components/button.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";

package/luminous-precision/tokens.css

@@ -0,0 +1,89 @@
+/* luminous-precision — design tokens
+ * Ported from nazuraki/ui-std-lib's @nazuraki/styles "luminous-precision"
+ * theme (MIT, Copyright (c) 2026 nazuraki — see the repo NOTICE), re-namespaced
+ * to the rackbops (--rb-*) contract. Consume via:
+ *   @import "@rackbops/styles/luminous-precision/tokens";
+ * or pull the whole theme with ./index.css.
+ *
+ * Nothing applies until an element carries data-rb-style="luminous-precision"
+ * — set it on <html> for a page, or on any container for an embedded island.
+ * The :where() keeps specificity at zero, so any consumer rule overrides.
+ *
+ * Every theme declares the same baseline token set (styles/test enforces
+ * parity); names marked (extra) are additions beyond it that only this theme's
+ * own component CSS may rely on. luminous-precision is a dual-accent design:
+ * vibrant orchid is the brand voice (baseline --rb-accent); electric teal marks
+ * active paths and critical signals (the --rb-accent-2 extra). Depth is light,
+ * not shadow — elevation comes from glow, so the baseline --rb-shadow-* are
+ * declared for contract parity but the components lean on the glow extras.
+ */
+:where([data-rb-style="luminous-precision"]) {
+  color-scheme: dark;
+
+  /* color — deep obsidian foundation, tonal indigo surfaces */
+  --rb-bg: #0a0c10;
+  --rb-surface: #1a1d29;
+  --rb-surface-2: #242838; /* raised indigo panel, a step above surface */
+  --rb-surface-sunken: #0c0e14; /* inset fields, log wells, progress troughs */
+  --rb-surface-glass: rgba(26, 29, 41, 0.4); /* (extra) glass panes over blur */
+  --rb-text: #e2e2eb;
+  --rb-text-soft: #b4b2c0; /* secondary body copy, between text and faint */
+  --rb-text-faint: #958e9b; /* labels, idle tabs, meta */
+  --rb-border: rgba(255, 255, 255, 0.08); /* resting hairline */
+  --rb-border-strong: rgba(255, 255, 255, 0.2); /* lit top edge of glass panes */
+
+  /* accent — orchid is the primary brand voice */
+  --rb-accent: #c6a5ff; /* vibrant orchid */
+  --rb-accent-fg: #16101f; /* dark ink on the solid orchid fill */
+  --rb-accent-wash: rgba(198, 165, 255, 0.16); /* tinted orchid fill */
+  --rb-accent-grad: linear-gradient(120deg, #c6a5ff, #00f5ff); /* orchid → teal */
+  --rb-accent-glow: rgba(198, 165, 255, 0.35); /* (extra) orchid glow */
+  --rb-accent-border: rgba(198, 165, 255, 0.6); /* (extra) lit orchid edge */
+
+  /* accent-2 (extra) — electric teal: active states, focus, critical paths */
+  --rb-accent-2: #00f5ff;
+  --rb-accent-2-glow: rgba(0, 245, 255, 0.3);
+
+  /* semantic — colour beyond the accents is earned: severity/status only */
+  --rb-info: #83b7ff;
+  --rb-success: #47e34e;
+  --rb-warning: #ffb86c;
+  --rb-danger: #ff4d6d;
+
+  /* code syntax (extra) — palette voices reused, never new hues */
+  --rb-code-keyword: #c6a5ff;
+  --rb-code-string: #47e34e;
+  --rb-code-number: #ffb86c;
+  --rb-code-comment: #837b8d;
+  --rb-code-function: #83b7ff;
+  --rb-code-variable: #ff7d95;
+  --rb-code-type: #00f5ff;
+  --rb-code-meta: #958e9b;
+
+  /* typography — Sora headlines over a JetBrains Mono body */
+  --rb-font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
+  --rb-font-body: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --rb-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --rb-font-weight: 400;
+  --rb-font-weight-medium: 600; /* labels, interactive text */
+  --rb-font-weight-bold: 700;
+  --rb-heading-tracking: -0.01em;
+  --rb-label-tracking: 0.05em; /* uppercase labels, buttons, tabs */
+  --rb-text-sm: 14px;
+
+  /* shape & effects — light-first depth; glow over drop shadow */
+  --rb-radius: 0.5rem; /* buttons, inputs */
+  --rb-radius-lg: 1rem; /* cards, dialogs, large containers */
+  --rb-radius-pill: 999px; /* chips, badges, switches */
+  --rb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); /* baseline parity; theme uses glow */
+  --rb-shadow-lg: 0 10px 34px rgba(0, 0, 0, 0.5);
+  --rb-blur: 12px; /* glass backdrop-filter */
+  --rb-transition: 0.3s;
+
+  /* spacing — 8px rhythm; generous negative space so glows can breathe */
+  --rb-space-1: 0.25rem;
+  --rb-space-2: 0.5rem;
+  --rb-space-3: 1rem;
+  --rb-space-4: 1.5rem;
+  --rb-space-5: 2rem;
+}

package/manifest.json

@@ -0,0 +1,39 @@
+{
+  "contract": 1,
+  "themes": {
+    "arcane-obsidian": {
+      "scheme": "dark",
+      "fonts": []
+    },
+    "arcane-parchment": {
+      "scheme": "light",
+      "fonts": []
+    },
+    "rackbops-studio": {
+      "scheme": "light",
+      "fonts": []
+    },
+    "rackbops-noir": {
+      "scheme": "dark",
+      "fonts": []
+    },
+    "luminous-precision": {
+      "scheme": "dark",
+      "fonts": [
+        "https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=JetBrains+Mono:wght@400;600;700&display=swap"
+      ]
+    },
+    "neon-butterfly": {
+      "scheme": "dark",
+      "fonts": [
+        "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@450;700&display=swap"
+      ]
+    },
+    "summer-cloud": {
+      "scheme": "light",
+      "fonts": [
+        "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Inter:wght@400;600&family=JetBrains+Mono:wght@500;700&display=swap"
+      ]
+    }
+  }
+}

package/neon-butterfly/base.css

@@ -0,0 +1,49 @@
+/* neon-butterfly — base styles
+ * Scoped defaults. Requires tokens.css. Apps that need the JetBrains Mono
+ * webfont should include the Google Fonts <link> (weights 450 + 700) or
+ * self-host; the token stack falls back to ui-monospace.
+ *
+ * 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="neon-butterfly"]) {
+  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="neon-butterfly"], [data-rb-style="neon-butterfly"] *),
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *)::before,
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *)::after {
+  box-sizing: border-box;
+}
+
+:where(html[data-rb-style="neon-butterfly"]) 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: the butterfly circuit artwork blended into the navy.
+ * Matches the switchboard landing page. Apply to <body>, or to the attributed
+ * container itself. */
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-bg {
+  background: var(--rb-bg) url("./assets/butterfly-circuit.png") center / cover fixed;
+  background-blend-mode: luminosity;
+  background-color: var(--rb-bg-blend);
+}
+
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *):where(a) {
+  color: var(--rb-accent);
+}
+
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *)::selection {
+  background: var(--rb-accent);
+  color: var(--rb-bg);
+}

package/neon-butterfly/components/alert.css

@@ -0,0 +1,26 @@
+/* neon-butterfly — alert / callout */
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).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="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-alert--info    { border-left-color: var(--rb-info); }
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-alert--success { border-left-color: var(--rb-success); }
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-alert--warning { border-left-color: var(--rb-warning); }
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-alert--danger  { border-left-color: var(--rb-danger); }
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-alert__title {
+  display: block;
+  margin-bottom: var(--rb-space-1);
+  text-transform: uppercase;
+  font-weight: var(--rb-font-weight-bold);
+  letter-spacing: var(--rb-label-tracking);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-alert--info .rb-alert__title    { color: var(--rb-info); }
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-alert--success .rb-alert__title { color: var(--rb-success); }
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-alert--warning .rb-alert__title { color: var(--rb-warning); }
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-alert--danger .rb-alert__title  { color: var(--rb-danger); }

package/neon-butterfly/components/badge.css

@@ -0,0 +1,17 @@
+/* neon-butterfly — badge */
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-badge {
+  display: inline-block;
+  padding: 0.15rem var(--rb-space-2);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius);
+  color: var(--rb-text-faint);
+  text-transform: uppercase;
+  font-size: 11px;
+  font-weight: var(--rb-font-weight-bold);
+  letter-spacing: var(--rb-label-tracking);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-badge--primary { border-color: var(--rb-accent-border); color: var(--rb-accent); }
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-badge--info    { border-color: var(--rb-info);    color: var(--rb-info); }
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-badge--success { border-color: var(--rb-success); color: var(--rb-success); }
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-badge--warning { border-color: var(--rb-warning); color: var(--rb-warning); }
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-badge--danger  { border-color: var(--rb-danger);  color: var(--rb-danger); }

package/neon-butterfly/components/button.css

@@ -0,0 +1,54 @@
+/* neon-butterfly — button */
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rb-space-2);
+  padding: var(--rb-space-2) var(--rb-space-3);
+  background: var(--rb-surface-glass);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius);
+  color: var(--rb-text);
+  text-transform: uppercase;
+  font-family: var(--rb-font-mono);
+  font-weight: var(--rb-font-weight-bold);
+  font-size: var(--rb-text-sm);
+  letter-spacing: var(--rb-label-tracking);
+  cursor: pointer;
+  transition:
+    border-color var(--rb-transition),
+    color var(--rb-transition);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn:hover,
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn:focus-visible {
+  border-color: var(--rb-accent-border);
+  color: var(--rb-accent);
+  animation: rb-nb-pulse-glow 2s infinite;
+  outline: none;
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn--primary {
+  border-color: var(--rb-accent-border);
+  color: var(--rb-accent);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn--accent {
+  border-color: var(--rb-accent-2);
+  color: var(--rb-accent-2);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn--danger {
+  border-color: var(--rb-danger);
+  color: var(--rb-danger);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  animation: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn {
+    transition: none;
+  }
+  :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn:hover,
+  :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn:focus-visible {
+    animation: none;
+  }
+}

package/neon-butterfly/components/card.css

@@ -0,0 +1,11 @@
+/* neon-butterfly — card */
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-card {
+  padding: var(--rb-space-4);
+  background: var(--rb-surface-glass);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius);
+  backdrop-filter: blur(var(--rb-blur));
+  color: var(--rb-text);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-card > :first-child { margin-top: 0; }
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-card > :last-child { margin-bottom: 0; }

package/neon-butterfly/components/dialog.css

@@ -0,0 +1,29 @@
+/* neon-butterfly — dialog (native <dialog>) */
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-dialog {
+  padding: var(--rb-space-4);
+  max-width: 32rem;
+  width: calc(100vw - 2rem);
+  background: var(--rb-surface);
+  border: 1px solid var(--rb-accent-border);
+  border-radius: var(--rb-radius);
+  color: var(--rb-text);
+  font-family: var(--rb-font-mono);
+  box-shadow: 0 0 30px rgba(210, 187, 255, 0.25);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-dialog::backdrop {
+  background: rgba(11, 19, 38, 0.7);
+  backdrop-filter: blur(4px);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-dialog__title {
+  margin: 0 0 var(--rb-space-3);
+  color: var(--rb-accent);
+  text-transform: uppercase;
+  font-size: 1rem;
+  letter-spacing: var(--rb-label-tracking);
+}
+:where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-dialog__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--rb-space-2);
+  margin-top: var(--rb-space-4);
+}