@rackbops/styles 0.1.0 → 0.1.1

package/amber-hearth/components/progress.css

@@ -0,0 +1,42 @@
+/* amber-hearth — progress + spinner
+ * A sunken trough with a solid accent fill; the spinner is a single accent arc.
+ * The theme's one gradient is rationed to tabs.css — kept solid here so it
+ * isn't spent twice. */
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-progress {
+  appearance: none;
+  width: 100%;
+  height: 6px;
+  border: 0;
+  border-radius: var(--rb-radius-pill);
+  overflow: hidden;
+  background: var(--rb-surface-sunken);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-progress::-webkit-progress-bar {
+  background: var(--rb-surface-sunken);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-progress::-webkit-progress-value {
+  background: var(--rb-accent);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-progress::-moz-progress-bar {
+  background: var(--rb-accent);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-spinner {
+  display: inline-block;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid var(--rb-border-strong);
+  border-top-color: var(--rb-accent);
+  border-radius: 50%;
+  animation: rb-hearth-spin 0.7s linear infinite;
+}
+@keyframes rb-hearth-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-spinner {
+    animation-duration: 2s;
+  }
+}

package/amber-hearth/components/stepper.css

@@ -0,0 +1,87 @@
+/* amber-hearth — stepper (delivery / milestone tracker)
+ * <ol class="rb-stepper"> with one
+ * <li class="rb-stepper__step rb-stepper--complete|current|upcoming"> per
+ * milestone: a .rb-stepper__node icon/number circle + .rb-stepper__label.
+ * Each non-first step draws its OWN connector segment back to the previous
+ * step's node (right: 50%; width: 100% of that step's own flex slice, self-
+ * aligning to node centers regardless of item count or label width -- a
+ * single full-width rail can't do this without knowing how many steps there
+ * are, since node centers sit inset within their own slice). isolation:
+ * isolate keeps every segment's negative z-index scoped to this stepper, so
+ * it paints behind every node without needing per-node z-index of its own.
+ * A segment fills once its OWN step is reached (complete or current) -- the
+ * same state class already on the <li>, not a second progress mechanism. No
+ * glow -- the current node's lift is the theme's own warm, diffused
+ * shadow-lg, never a neutral hard offset. */
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-stepper {
+  display: flex;
+  isolation: isolate;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-stepper__step {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--rb-space-2);
+  text-align: center;
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-stepper__step:not(:first-child)::before {
+  content: "";
+  position: absolute;
+  top: 1rem;
+  right: 50%;
+  width: 100%;
+  height: 2px;
+  background: var(--rb-surface-sunken);
+  z-index: -1;
+  transition: background-color var(--rb-transition);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-stepper__step:not(:first-child).rb-stepper--complete::before,
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before {
+  background: var(--rb-accent);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-stepper__node {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: 2px solid transparent;
+  border-radius: var(--rb-radius-pill);
+  background: var(--rb-surface-2);
+  color: var(--rb-text-faint);
+  font-size: var(--rb-text-sm);
+  font-weight: var(--rb-font-weight-medium);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-stepper__label {
+  font-size: var(--rb-text-sm);
+  color: var(--rb-text-faint);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-stepper--complete .rb-stepper__node {
+  background: var(--rb-accent);
+  color: var(--rb-accent-fg);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-stepper--complete .rb-stepper__label {
+  color: var(--rb-text);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-stepper--current .rb-stepper__node {
+  background: var(--rb-surface);
+  border-color: var(--rb-accent);
+  color: var(--rb-accent);
+  box-shadow: var(--rb-shadow-lg);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-stepper--current .rb-stepper__label {
+  color: var(--rb-accent);
+  font-weight: var(--rb-font-weight-medium);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-stepper__step:not(:first-child)::before {
+    transition: none;
+  }
+}

package/amber-hearth/components/table.css

@@ -0,0 +1,50 @@
+/* amber-hearth — table
+ * Faint header rule, tabular numerals, row hover to surface-2 with the
+ * theme's own soft transition. Headers stay normal-case, medium weight. */
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--rb-font-body);
+  font-size: var(--rb-text-sm);
+  font-variant-numeric: tabular-nums;
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-table th {
+  text-align: left;
+  padding: var(--rb-space-2) var(--rb-space-3);
+  border-bottom: 1px solid var(--rb-border-strong);
+  color: var(--rb-text-faint);
+  font-weight: var(--rb-font-weight-medium);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-table td {
+  padding: var(--rb-space-2) var(--rb-space-3);
+  border-bottom: 1px solid var(--rb-border);
+  color: var(--rb-text);
+  transition: background var(--rb-transition);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-table tbody tr:hover td {
+  background: var(--rb-surface-2);
+}
+/* --interactive: clickable rows (a tabindex tr, or a row-wrapping button/link) —
+ * pointer cursor plus a keyboard-equivalent of the hover wash and a focus ring. */
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-table--interactive tbody tr {
+  cursor: pointer;
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-table--interactive tbody tr:focus-visible,
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-table--interactive tbody tr:has(:focus-visible) {
+  outline: 2px solid var(--rb-accent);
+  outline-offset: -2px;
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-table--interactive tbody tr:focus-visible td,
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-table--interactive tbody tr:has(:focus-visible) td {
+  background: var(--rb-surface-2);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-table .rb-num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-table td {
+    transition: none;
+  }
+}

package/amber-hearth/components/tabs.css

@@ -0,0 +1,46 @@
+/* amber-hearth — tabs
+ * Normal-case text tabs; the active tab carries accent text, underlined with
+ * the theme's one rationed gradient — clay -> amber -> gold. This is the only
+ * place --rb-accent-grad appears in this theme. */
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-tabs {
+  display: flex;
+  gap: var(--rb-space-2);
+  border-bottom: 1px solid var(--rb-border);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).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="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-tab:hover {
+  color: var(--rb-text);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-tab.rb-tab--active {
+  color: var(--rb-accent);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).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: var(--rb-radius-pill);
+  background: var(--rb-accent-grad);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-tabpanel {
+  padding: var(--rb-space-4) 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-tab {
+    transition: none;
+  }
+}

package/amber-hearth/design.md

@@ -0,0 +1,146 @@
+# amber-hearth
+
+An original rackbops theme — warm, hand-crafted editorial design. Clay-terracotta
+accent on a warm cream ground, the most generously rounded shape language in the
+library, and warm-toned diffused shadows (brown-tinted, never neutral black).
+This is the library's **only serif display voice**: headings, card and dialog
+titles use a system serif stack, while body copy and UI chrome (buttons, labels,
+table text) stay on a humanist system-ui sans. Transitions run a touch slower
+than the library default (`0.18s` vs `0.15s`) to read as unhurried and cozy, and
+the one clay -> amber -> gold gradient is rationed to a single place — the
+active-tab underline — exactly as sparingly as the library's other gradient
+themes ration theirs. Light ("Hearth") is the primary look; its dark
+counterpart ("Ember") ships as its own theme, documented below.
+
+## Color
+
+| Role | Value | Usage |
+| --- | --- | --- |
+| Background | `#fbf3e9` (warm cream) | Page canvas |
+| Surface | `#ffffff` | Cards, dialogs, panels |
+| Surface 2 | `#f5e9d9` | Raised/hover surface, active-tab wash base |
+| Surface sunken | `#efe1cd` | Inset fields, progress troughs |
+| Text | `#2b1f14` | Body text |
+| Text soft | `#5c4a38` | Secondary text |
+| Text faint | `#6e5945` | Labels, table headers, meta |
+| Border | `#e6d3ba` | Resting hairline borders |
+| Border strong | `#d1b98f` | Dialog edges, header rules |
+| Accent | `#b5542c` (clay-terracotta, darkened for AA) | The sole brand voice: emphasis, active state, focus (4.67:1 as accent-fg text) |
+| Accent fg | `#fff8f0` | Warm-white ink on the solid clay fill |
+| Accent wash | `rgba(181,84,44,.14)` | Active/hover tint behind accent text |
+| Info | `#3c7ba3` | Informational chips (4.61:1 on white) |
+| Success | `#497f4b` | Healthy/live status (4.75:1 on white) |
+| Warning | `#9c6b22` | Caution status (darkened from `#c8892c`, 2.97:1, to 4.63:1 on white) |
+| Danger | `#b8412a` | Destructive actions, errors (5.49:1 on white) |
+
+**Rules.** Colour is functional. Resting UI is cream, white, and warm neutral
+ink; clay-terracotta appears only on interaction, focus, active state, and
+emphasis. Colour beyond the accent is *earned* — severity and status badges are
+the one place other hues appear. The accent and all four semantic hues are
+tuned so every text/border use clears WCAG AA (4.5:1) against `--rb-surface`
+(white) — info, success, and warning were all originally under 4.5:1 and were
+darkened accordingly; danger already cleared. The one gradient
+(`--rb-accent-grad`, clay -> amber -> gold) is rationed to exactly one place
+across the whole theme — the active-tab underline — never spent twice; the
+progress fill and every other surface stay solid.
+
+## Typography
+
+- **Display / headings:** a system serif stack (`"Iowan Old Style", "Palatino
+  Linotype", Palatino, Georgia, serif`), weight 700, tight tracking
+  (`-0.01em`). This is the library's only serif voice — reserved for headings,
+  card titles, and dialog titles.
+- **Body & UI:** `system-ui, -apple-system, "Segoe UI", Roboto, …`, weight 400.
+  Buttons, labels, and table text stay on this sans voice even where a heading
+  nearby goes serif.
+- **Labels:** normal-case, weight 600 (`--rb-font-weight-medium`), tracked
+  `0.04em`. No uppercase-shouty labels anywhere in this theme.
+- **Bare tags:** unclassed `h1`-`h6` pick up the serif display voice directly
+  — weight 700, tracking `-0.01em`, `--rb-space-3` margin below,
+  `line-height: 1.2`. Bare `p` shares that margin; bare `ul`/`ol` add it too,
+  with `--rb-space-4` marker indent (real disc/decimal markers, not stripped).
+
+## Shape & effects
+
+- Radius `0.875rem` (14px) for buttons, inputs, and rows; `1.25rem` (20px) for
+  cards and dialogs; true pills for badges and progress troughs — the most
+  generously rounded theme in the library.
+- Shadows are warm-toned and diffused: `rgba(80,50,20,…)` brown-tinted, soft
+  normal-blur shadows — never a neutral-black hard offset shadow. `shadow-sm`
+  resting, `shadow-lg` for raised cards and dialogs.
+- Transitions `0.18s` — softer and slightly slower than the library default
+  (`0.15s`), so hovers and focus changes read as unhurried rather than snappy.
+  Every animation and transition respects `prefers-reduced-motion`.
+- Focus is the accent: inputs swap their border for a clay line plus a soft
+  `--rb-accent-wash` ring.
+- 4px spacing rhythm (`--rb-space-1..5`).
+
+## Components
+
+Class prefix `rb-`; shared token/class contract with the other themes. No
+`--rb-code-*` syntax tokens — this isn't a developer-console theme.
+
+- **Button** `.rb-btn` — soft surface-2 ghost by default, sans (not serif);
+  `--primary` is the one solid clay fill with a soft shadow-lift on hover (no
+  hard transform), `--accent` a clay-wash chip, `--danger` a rose-tinted ghost,
+  `--ghost` chromeless. `--sm` is a snugger size for inline and table-row
+  actions — tighter padding, a hair smaller type. `.rb-icon-btn` is a square
+  icon-only hit target (>=2rem), paired with `.rb-btn`.
+- **Card** `.rb-card` (+ `--raised`) — solid panel, hairline border, warm
+  diffused shadow; any `h1`-`h3` inside goes serif and bold.
+- **NavLink** `.rb-link` — sidebar row; hover fills to surface-2 and lights a
+  soft, fully-rounded 3px accent bar on the left edge (rounded to match the
+  row's own character, not a hard-edged rule); `--active` carries the accent
+  wash.
+- **Nav rail** `.rb-nav-rail` — the sidebar container: 14rem fixed-width flex
+  column, surface background, a hairline right edge. Composes with `.rb-link`
+  for items; introduces no active-state convention of its own.
+- **Form** `.rb-input` / `.rb-textarea` / `.rb-select` / `.rb-label` /
+  `.rb-field` / `.rb-choice` / `.rb-checkbox` / `.rb-radio` / `.rb-switch` —
+  sunken fields; focus swaps to the accent border + soft wash ring; labels
+  normal-case, weight 600, sans.
+- **Badge** `.rb-badge` — true pill: a 16% tint of its hue behind
+  full-strength text (semantic modifiers `--info/--success/--warning/--danger`);
+  normal-case, weight 600.
+- **Alert** `.rb-alert` — surface panel, 3px left bar carries the semantic
+  colour.
+- **Dialog** `.rb-dialog` — native `<dialog>`, generously rounded panel,
+  blurred backdrop (`backdrop-filter: blur(var(--rb-blur))`), serif bold title.
+- **Tabs** `.rb-tabs` / `.rb-tab` / `.rb-tabpanel` — normal-case text tabs; the
+  active tab is accent-coloured, underlined with the theme's one rationed
+  gradient — the only place `--rb-accent-grad` appears in this theme.
+- **Table** `.rb-table` (+ `.rb-num`) — faint header rule, tabular numerals,
+  row hover to surface-2 with the theme's own soft transition, normal-case
+  weight-600 headers. `--interactive` marks clickable rows: pointer cursor,
+  plus a focus-visible ring (and the surface-2 wash) for a `tabindex` row or a
+  row-wrapping button/link.
+- **Progress / Spinner** `.rb-progress` / `.rb-spinner` — sunken trough with a
+  solid accent fill (the gradient stays reserved for tabs); the spinner is a
+  single accent arc (`rb-hearth-spin`).
+- **Stepper** `.rb-stepper` (+ `__step` / `__node` / `__label`, `--complete` /
+  `--current` / `--upcoming`) — a milestone rail: complete nodes solid accent
+  with a checkmark, current a white-on-accent-border ring with the theme's
+  warm diffused `shadow-lg` lift, upcoming faint surface-2. Rail track is
+  `surface-sunken`; each connector segment fills to accent once its own
+  step is reached (complete or current), so the rail can't drift out of
+  sync with the step states.
+- **Muted text** `.rb-muted` — faint secondary/empty-state text;
+  `color: var(--rb-text-faint)`, italic — fits this warm, hand-crafted,
+  unhurried editorial voice.
+- **Pre / log block** `.rb-pre` — command/log `<pre>`; sunken background,
+  hairline border, radius, small mono, horizontal scroll. Pair with `.rb-log`
+  (`<pre class="rb-pre rb-log">`) for multi-line streaming output: a capped
+  16rem height with vertical scroll, wrapped lines instead of horizontal
+  scroll, and roomier line-height for dense text.
+
+## Dark counterpart
+
+`amber-ember` — the dark, espresso-ground counterpart. 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="amber-hearth"` (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/amber-hearth/index.css

@@ -0,0 +1,18 @@
+/* amber-hearth — full theme entry point */
+@import "./tokens.css";
+@import "./base.css";
+@import "./components/card.css";
+@import "./components/link.css";
+@import "./components/nav-rail.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";
+@import "./components/stepper.css";
+@import "./components/muted.css";
+@import "./components/pre.css";
+@import "./components/log.css";

package/amber-hearth/tokens.css

@@ -0,0 +1,77 @@
+/* amber-hearth — design tokens
+ * An original rackbops theme: warm hand-crafted editorial voice, clay-terracotta
+ * accent on a warm cream ground. This is the library's only serif display voice
+ * — a system serif stack for headings and titles, no webfont — over a humanist
+ * system-ui body. Consume via:
+ *   @import "@rackbops/styles/amber-hearth/tokens";
+ * or pull the whole theme with ./index.css.
+ *
+ * Nothing applies until an element carries data-rb-style="amber-hearth" — 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); this theme adds nothing beyond it. Light ("Hearth") is the primary
+ * look; its dark counterpart ("Ember") ships as its own theme — see
+ * amber-ember/tokens.css and design.md.
+ */
+:where([data-rb-style="amber-hearth"]) {
+  color-scheme: light;
+
+  /* color — warm cream ground, clay-terracotta accent */
+  --rb-bg: #fbf3e9;
+  --rb-surface: #ffffff;
+  --rb-surface-2: #f5e9d9;
+  --rb-surface-sunken: #efe1cd;
+  --rb-text: #2b1f14;
+  --rb-text-soft: #5c4a38;
+  --rb-text-faint: #6e5945;
+  --rb-border: #e6d3ba;
+  --rb-border-strong: #d1b98f;
+
+  /* accent — clay-terracotta is the sole brand voice. Darkened from the naive
+     #c1592f to #b5542c so accent-fg-on-accent (the primary button fill)
+     clears WCAG AA (4.67:1, was 4.21:1). */
+  --rb-accent: #b5542c;
+  --rb-accent-fg: #fff8f0;
+  --rb-accent-wash: rgba(181, 84, 44, 0.14);
+
+  /* the ONE gradient — rationed to the active-tab underline only */
+  --rb-accent-grad: linear-gradient(120deg, #b5542c, #e08a3f 50%, #d9a441);
+
+  /* semantic — info/success/warning darkened for AA as text on --rb-surface
+     (warning was 2.97:1, the worst offender; info/success were 4.44/4.13,
+     just under 4.5). Danger already cleared AA (5.49:1), left unchanged. */
+  --rb-info: #3c7ba3;
+  --rb-success: #497f4b;
+  --rb-warning: #9c6b22;
+  --rb-danger: #b8412a;
+
+  /* typography — the library's only serif display voice, over a sans body */
+  --rb-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
+  --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.04em;
+  --rb-text-sm: 13px;
+
+  /* shape & effects — the most generously rounded theme in the roster, warm
+   * diffused shadows (brown-tinted, never neutral black), unhurried transitions */
+  --rb-radius: 0.875rem;
+  --rb-radius-lg: 1.25rem;
+  --rb-radius-pill: 999px;
+  --rb-shadow-sm: 0 2px 6px rgba(80, 50, 20, 0.12);
+  --rb-shadow-lg: 0 12px 32px rgba(80, 50, 20, 0.18);
+  --rb-blur: 12px;
+  --rb-transition: 0.18s;
+
+  /* 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/arcane-obsidian/base.css

@@ -31,6 +31,26 @@
   font-variant-numeric: tabular-nums;
 }
 
+/* Monospace IS the display voice here — same "Display / wordmark" treatment
+ * design.md documents, wired to bare headings too. */
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *):where(h1, h2, h3, h4, h5, h6) {
+  margin: 0 0 var(--rb-space-3);
+  font-family: var(--rb-font-display);
+  font-weight: var(--rb-font-weight-medium);
+  letter-spacing: var(--rb-heading-tracking);
+  line-height: 1.15;
+  text-wrap: balance;
+}
+
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *):where(p) {
+  margin: 0 0 var(--rb-space-3);
+}
+
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *):where(ul, ol) {
+  margin: 0 0 var(--rb-space-3);
+  padding-inline-start: var(--rb-space-4);
+}
+
 :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *):where(a) {
   color: var(--rb-accent);
 }

package/arcane-obsidian/components/button.css

@@ -21,6 +21,21 @@
     background var(--rb-transition),
     color var(--rb-transition);
 }
+/* --sm: compact size for inline/table-row actions (composes with any variant) */
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--sm {
+  padding: var(--rb-space-1) var(--rb-space-3);
+  font-size: calc(var(--rb-text-sm) - 1px);
+}
+/* --icon: square icon-only hit target (>=2rem); pair with .rb-btn (+ an
+ * optional color variant) — inherits color/border/hover/focus from it. */
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-icon-btn {
+  padding: var(--rb-space-2);
+  min-width: 2rem;
+  min-height: 2rem;
+  gap: 0;
+  justify-content: center;
+  line-height: 1;
+}
 :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn:hover,
 :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn:focus-visible {
   border-color: var(--rb-accent);

package/arcane-obsidian/components/log.css

@@ -0,0 +1,19 @@
+/* arcane-obsidian — log / terminal block
+ * Pairs with .rb-pre for the shared look (surface-sunken well, hairline
+ * border, radius, small mono) -- .rb-log itself only adds what changes for
+ * multi-line streaming output: a capped height with vertical scroll, wrapped
+ * long lines instead of .rb-pre's horizontal scroll, and a touch more
+ * line-height so dense text stays readable. Use together on one element:
+ * <pre class="rb-pre rb-log">. */
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-log {
+  max-height: 16rem;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  line-height: 1.5;
+}
+/* Specificity-pinned (not import-order-dependent) override of .rb-pre's
+ * overflow-x: auto -- .rb-log wraps instead of scrolling horizontally. */
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-pre.rb-log {
+  overflow-x: hidden;
+}

package/arcane-obsidian/components/muted.css

@@ -0,0 +1,7 @@
+/* arcane-obsidian — muted / empty-state text
+ * Faint secondary text — captions, meta, "No results yet." style empty
+ * states. Italic distinguishes it from regular body copy at a glance. */
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-muted {
+  color: var(--rb-text-faint);
+  font-style: italic;
+}

package/arcane-obsidian/components/nav-rail.css

@@ -0,0 +1,14 @@
+/* arcane-obsidian — nav rail (vertical sidebar container)
+ * Flush edge chrome, not a floating card: fixed-width flex column, surface
+ * background, a hairline right edge. Composes with .rb-link for items --
+ * active/hover are entirely that component's own tokens, nothing new here. */
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-nav-rail {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: var(--rb-space-1);
+  width: 14rem;
+  padding: var(--rb-space-3);
+  background: var(--rb-surface);
+  border-right: 1px solid var(--rb-border);
+}

package/arcane-obsidian/components/pre.css

@@ -0,0 +1,13 @@
+/* arcane-obsidian — command / log block
+ * Styled <pre> for shell commands or short log output: sunken well,
+ * hairline border, small mono, scrolls horizontally instead of wrapping. */
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-pre {
+  margin: 0;
+  padding: var(--rb-space-3) var(--rb-space-4);
+  background: var(--rb-surface-sunken);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius);
+  font-family: var(--rb-font-mono);
+  font-size: var(--rb-text-sm);
+  overflow-x: auto;
+}

package/arcane-obsidian/components/stepper.css

@@ -0,0 +1,87 @@
+/* arcane-obsidian — stepper (delivery / milestone tracker)
+ * <ol class="rb-stepper"> with one
+ * <li class="rb-stepper__step rb-stepper--complete|current|upcoming"> per
+ * milestone: a .rb-stepper__node icon/number circle + .rb-stepper__label.
+ * Each non-first step draws its OWN connector segment back to the previous
+ * step's node (right: 50%; width: 100% of that step's own flex slice, self-
+ * aligning to node centers regardless of item count or label width -- a
+ * single full-width rail can't do this without knowing how many steps there
+ * are, since node centers sit inset within their own slice). isolation:
+ * isolate keeps every segment's negative z-index scoped to this stepper, so
+ * it paints behind every node without needing per-node z-index of its own.
+ * A segment fills once its OWN step is reached (complete or current) -- the
+ * same state class already on the <li>, not a second progress mechanism. No
+ * glow here -- depth is luminance-first, so the current node's elevation is
+ * the theme's own shadow-lg, not a glow. */
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-stepper {
+  display: flex;
+  isolation: isolate;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-stepper__step {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--rb-space-2);
+  text-align: center;
+}
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-stepper__step:not(:first-child)::before {
+  content: "";
+  position: absolute;
+  top: 1rem;
+  right: 50%;
+  width: 100%;
+  height: 2px;
+  background: var(--rb-surface-sunken);
+  z-index: -1;
+  transition: background-color var(--rb-transition);
+}
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-stepper__step:not(:first-child).rb-stepper--complete::before,
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before {
+  background: var(--rb-accent);
+}
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-stepper__node {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: 2px solid transparent;
+  border-radius: var(--rb-radius-pill);
+  background: var(--rb-surface-2);
+  color: var(--rb-text-faint);
+  font-size: var(--rb-text-sm);
+  font-weight: var(--rb-font-weight-medium);
+}
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-stepper__label {
+  font-size: var(--rb-text-sm);
+  color: var(--rb-text-faint);
+}
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-stepper--complete .rb-stepper__node {
+  background: var(--rb-accent);
+  color: var(--rb-accent-fg);
+}
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-stepper--complete .rb-stepper__label {
+  color: var(--rb-text);
+}
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-stepper--current .rb-stepper__node {
+  background: var(--rb-surface);
+  border-color: var(--rb-accent);
+  color: var(--rb-accent);
+  box-shadow: var(--rb-shadow-lg);
+}
+:where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-stepper--current .rb-stepper__label {
+  color: var(--rb-accent);
+  font-weight: var(--rb-font-weight-medium);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-stepper__step:not(:first-child)::before {
+    transition: none;
+  }
+}