@rackbops/styles 0.1.0 → 0.1.1

package/amber-ember/components/tabs.css

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

package/amber-ember/design.md

@@ -0,0 +1,78 @@
+# amber-ember
+
+The dark, espresso-ground counterpart of **amber-hearth**. Same warm,
+hand-crafted editorial design language — clay/amber accent, the library's only
+serif display voice (system serif for headings and titles over a humanist
+system-ui body), the most generously rounded shape language in the library, and
+warm-toned diffused shadows — rendered on a deep espresso ground instead of
+warm cream. It ships the identical `rb-*` component set as amber-hearth — the
+components are token-driven, so only the palette differs — and swaps in with a
+single attribute flip.
+
+## Color
+
+| Role | Value | Usage |
+| --- | --- | --- |
+| Background | `#1c130c` (espresso) | Page canvas |
+| Surface | `#26190f` | Cards, dialogs, panels |
+| Surface 2 | `#331f13` | Raised/hover surface, active-tab wash base |
+| Surface sunken | `#150e08` | Inset fields, progress troughs |
+| Text | `#f5e9da` | Body text |
+| Text soft | `#c9b39a` | Secondary text |
+| Text faint | `#a68a6c` | Labels, table headers, meta |
+| Border | `#40291a` | Resting hairline borders |
+| Border strong | `#5a3a24` | Dialog edges, header rules |
+| Accent | `#e08a3f` (warm amber) | The sole brand voice: emphasis, active state, focus |
+| Accent fg | `#1c130c` | Dark espresso ink on the solid amber fill |
+| Accent wash | `rgba(224,138,63,.18)` | Active/hover tint behind accent text |
+| Info | `#5a9fc4` | Informational chips |
+| Success | `#6ba26e` | Healthy/live status |
+| Warning | `#dba748` | Caution status |
+| Danger | `#d1614a` | Destructive actions, errors |
+
+**Rules.** Colour is functional. Resting UI is espresso, near-black wells, and
+warm neutral ink; amber 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 one gradient (`--rb-accent-grad`, amber ->
+clay -> gold) is rationed to exactly one place across the whole theme — the
+active-tab underline — never spent twice.
+
+## Typography
+
+Identical to amber-hearth: a system serif stack (`"Iowan Old Style", "Palatino
+Linotype", Palatino, Georgia, serif`) for headings, card titles, and dialog
+titles at weight 700 with tight tracking (`-0.01em`) — the library's only serif
+voice — over a `system-ui` body at weight 400. Labels stay normal-case, weight
+600, tracked `0.04em`.
+
+## Shape & effects
+
+Identical to amber-hearth — see its `design.md` for the full detail. Radius
+`0.875rem` (14px) for buttons/inputs/rows, `1.25rem` (20px) for cards/dialogs,
+true pills for badges/progress; warm-toned diffused shadows (deepened to
+near-black for the dark ground); transitions `0.18s`; 4px spacing rhythm; the
+one gradient rationed to the active-tab underline only.
+
+## Components
+
+Class prefix `rb-`; the full amber-hearth inventory, styled identically from
+tokens: `.rb-btn` (+ `--primary/--accent/--danger/--ghost`, `--sm` compact size, `.rb-icon-btn` icon-only square), `.rb-card` (+
+`--raised`), `.rb-link` (+ `--active`), `.rb-nav-rail`, the form set (`.rb-input` /
+`.rb-textarea` / `.rb-select` / `.rb-label` / `.rb-field` / `.rb-choice` /
+`.rb-checkbox` / `.rb-radio` / `.rb-switch`), `.rb-badge`, `.rb-alert`,
+`.rb-dialog`, `.rb-tabs` / `.rb-tab` / `.rb-tabpanel`, `.rb-table` (+
+`.rb-num`, `--interactive`), `.rb-progress` / `.rb-spinner` (keyframe `rb-ember-spin`), `.rb-stepper`,
+`.rb-muted`, `.rb-pre` (+ `.rb-log`). See amber-hearth's `design.md` for the per-component
+notes — the behaviour is the same; only the palette is dark.
+
+## Light counterpart
+
+`amber-hearth` — the primary, light 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="amber-ember"` (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-ember/index.css

@@ -0,0 +1,18 @@
+/* amber-ember — 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-ember/tokens.css

@@ -0,0 +1,72 @@
+/* amber-ember — design tokens
+ * The dark counterpart of amber-hearth: same warm hand-crafted editorial
+ * voice — clay-terracotta accent, the library's only serif display voice — on
+ * an espresso ground instead of warm cream. Consume via:
+ *   @import "@rackbops/styles/amber-ember/tokens";
+ * or pull the whole theme with ./index.css.
+ *
+ * Nothing applies until an element carries data-rb-style="amber-ember" — 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. It ships the identical `rb-*`
+ * component set as amber-hearth — the components are token-driven, so only the
+ * palette differs. See amber-hearth/design.md for the light, primary look.
+ */
+:where([data-rb-style="amber-ember"]) {
+  color-scheme: dark;
+
+  /* color — espresso ground, warm amber accent */
+  --rb-bg: #1c130c;
+  --rb-surface: #26190f;
+  --rb-surface-2: #331f13;
+  --rb-surface-sunken: #150e08;
+  --rb-text: #f5e9da;
+  --rb-text-soft: #c9b39a;
+  --rb-text-faint: #a68a6c;
+  --rb-border: #40291a;
+  --rb-border-strong: #5a3a24;
+
+  /* accent — warm amber is the sole brand voice */
+  --rb-accent: #e08a3f;
+  --rb-accent-fg: #1c130c;
+  --rb-accent-wash: rgba(224, 138, 63, 0.18);
+
+  /* the ONE gradient — rationed to the active-tab underline only */
+  --rb-accent-grad: linear-gradient(120deg, #e08a3f, #c1592f 50%, #f2c15a);
+
+  /* semantic */
+  --rb-info: #5a9fc4;
+  --rb-success: #6ba26e;
+  --rb-warning: #dba748;
+  --rb-danger: #d1614a;
+
+  /* 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 (deepened for the dark ground), unhurried transitions */
+  --rb-radius: 0.875rem;
+  --rb-radius-lg: 1.25rem;
+  --rb-radius-pill: 999px;
+  --rb-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35);
+  --rb-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
+  --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/amber-hearth/base.css

@@ -0,0 +1,61 @@
+/* amber-hearth — base styles
+ * Scoped defaults. Requires tokens.css. Fonts are system stacks (a system serif
+ * for display, system-ui for body) — nothing to load, no webfont network hop.
+ *
+ * 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="amber-hearth"]) {
+  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="amber-hearth"], [data-rb-style="amber-hearth"] *),
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *)::before,
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *)::after {
+  box-sizing: border-box;
+}
+
+:where(html[data-rb-style="amber-hearth"]) 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);
+}
+
+/* Headings and titles are the one place this theme goes serif — the library's
+ * only serif display voice. Body copy and UI chrome (buttons, labels, table
+ * text) stay on the sans body font. */
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *):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-bold);
+  letter-spacing: var(--rb-heading-tracking);
+  line-height: 1.2;
+  text-wrap: balance;
+  color: var(--rb-text);
+}
+
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *):where(p) {
+  margin: 0 0 var(--rb-space-3);
+}
+
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *):where(ul, ol) {
+  margin: 0 0 var(--rb-space-3);
+  padding-inline-start: var(--rb-space-4);
+}
+
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *):where(a) {
+  color: var(--rb-accent);
+}
+
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *)::selection {
+  background: var(--rb-accent);
+  color: var(--rb-accent-fg);
+}

package/amber-hearth/components/alert.css

@@ -0,0 +1,30 @@
+/* amber-hearth — alert
+ * A surface panel with a 3px left bar carrying the semantic colour. */
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-alert {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rb-space-1);
+  padding: var(--rb-space-3) var(--rb-space-4);
+  background: var(--rb-surface);
+  border: 1px solid var(--rb-border);
+  border-left: 3px solid var(--rb-accent);
+  border-radius: var(--rb-radius);
+  color: var(--rb-text);
+  font-family: var(--rb-font-body);
+  font-size: var(--rb-text-sm);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-alert__title {
+  font-weight: var(--rb-font-weight-medium);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-alert--info {
+  border-left-color: var(--rb-info);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-alert--success {
+  border-left-color: var(--rb-success);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-alert--warning {
+  border-left-color: var(--rb-warning);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-alert--danger {
+  border-left-color: var(--rb-danger);
+}

package/amber-hearth/components/badge.css

@@ -0,0 +1,32 @@
+/* amber-hearth — badge / status chip
+ * A true pill: a 16%-alpha tint of its hue behind full-strength text. Normal
+ * case, medium weight — this theme has no uppercase-shouty labels. */
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rb-space-1);
+  padding: 2px var(--rb-space-2);
+  border-radius: var(--rb-radius-pill);
+  font-family: var(--rb-font-body);
+  font-size: 12px;
+  font-weight: var(--rb-font-weight-medium);
+  letter-spacing: var(--rb-label-tracking);
+  background: var(--rb-accent-wash);
+  color: var(--rb-accent);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-badge--info {
+  background: color-mix(in srgb, var(--rb-info) 16%, transparent);
+  color: var(--rb-info);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-badge--success {
+  background: color-mix(in srgb, var(--rb-success) 16%, transparent);
+  color: var(--rb-success);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-badge--warning {
+  background: color-mix(in srgb, var(--rb-warning) 16%, transparent);
+  color: var(--rb-warning);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-badge--danger {
+  background: color-mix(in srgb, var(--rb-danger) 16%, transparent);
+  color: var(--rb-danger);
+}

package/amber-hearth/components/button.css

@@ -0,0 +1,90 @@
+/* amber-hearth — button
+ * Soft surface-2 ghost by default; --primary is the one solid clay fill. Buttons
+ * stay on the sans body voice (serif is reserved for headings/titles). Hover
+ * lifts via a softer shadow, never a hard transform — cozy, not snappy. */
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--rb-space-2);
+  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-family: var(--rb-font-body);
+  font-weight: var(--rb-font-weight-medium);
+  font-size: var(--rb-text-sm);
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    background var(--rb-transition),
+    border-color var(--rb-transition),
+    color var(--rb-transition),
+    box-shadow var(--rb-transition);
+}
+/* --sm: compact size for inline/table-row actions (composes with any variant) */
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).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="amber-hearth"], [data-rb-style="amber-hearth"] *).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="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn:hover,
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn:focus-visible {
+  border-color: var(--rb-border-strong);
+  outline: none;
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--primary {
+  background: var(--rb-accent);
+  border-color: var(--rb-accent);
+  color: var(--rb-accent-fg);
+  box-shadow: var(--rb-shadow-sm);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--primary:hover,
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--primary:focus-visible {
+  box-shadow: var(--rb-shadow-lg);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--accent {
+  background: var(--rb-accent-wash);
+  border-color: transparent;
+  color: var(--rb-accent);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--danger {
+  background: transparent;
+  border-color: color-mix(in srgb, var(--rb-danger) 40%, var(--rb-border));
+  color: var(--rb-danger);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--danger:hover,
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--danger:focus-visible {
+  border-color: var(--rb-danger);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--rb-text-soft);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--ghost:hover,
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--ghost:focus-visible {
+  background: var(--rb-surface-2);
+  border-color: var(--rb-border);
+  color: var(--rb-text);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn {
+    transition: none;
+  }
+}

package/amber-hearth/components/card.css

@@ -0,0 +1,24 @@
+/* amber-hearth — card
+ * Solid raised panel, generously rounded, warm diffused shadow. A heading
+ * (h1-h3) inside a card is the theme's serif display voice, styled bold. */
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-card {
+  background: var(--rb-surface);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius-lg);
+  padding: var(--rb-space-5);
+  color: var(--rb-text);
+  box-shadow: var(--rb-shadow-sm);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-card--raised {
+  background: var(--rb-surface-2);
+  box-shadow: var(--rb-shadow-lg);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-card > :where(h1, h2, h3):first-child {
+  margin-top: 0;
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-card :where(h1, h2, h3) {
+  font-family: var(--rb-font-display);
+  font-weight: var(--rb-font-weight-bold);
+  letter-spacing: var(--rb-heading-tracking);
+  color: var(--rb-text);
+}

package/amber-hearth/components/dialog.css

@@ -0,0 +1,33 @@
+/* amber-hearth — dialog
+ * Native <dialog>: a raised, generously rounded panel over a blurred backdrop.
+ * The title is the theme's serif display voice, set bold. */
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-dialog {
+  padding: 0;
+  border: 1px solid var(--rb-border-strong);
+  border-radius: var(--rb-radius-lg);
+  background: var(--rb-surface);
+  color: var(--rb-text);
+  box-shadow: var(--rb-shadow-lg);
+  max-width: min(92vw, 34rem);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-dialog::backdrop {
+  background: rgba(43, 31, 20, 0.4);
+  backdrop-filter: blur(var(--rb-blur));
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-dialog__body {
+  padding: var(--rb-space-5);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-dialog__title {
+  margin: 0 0 var(--rb-space-3);
+  font-family: var(--rb-font-display);
+  font-weight: var(--rb-font-weight-bold);
+  letter-spacing: var(--rb-heading-tracking);
+  color: var(--rb-text);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-dialog__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--rb-space-2);
+  padding: var(--rb-space-3) var(--rb-space-5);
+  border-top: 1px solid var(--rb-border);
+}

package/amber-hearth/components/form.css

@@ -0,0 +1,72 @@
+/* amber-hearth — form controls
+ * Sunken fields on the warm cream ground; focus swaps the border for the accent
+ * plus a soft accent-wash ring. Labels stay normal-case, medium weight, sans. */
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rb-space-1);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-label {
+  font-family: var(--rb-font-body);
+  font-size: var(--rb-text-sm);
+  font-weight: var(--rb-font-weight-medium);
+  color: var(--rb-text-soft);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-input,
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-textarea,
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-select {
+  width: 100%;
+  padding: var(--rb-space-2) var(--rb-space-3);
+  background: var(--rb-surface-sunken);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius);
+  color: var(--rb-text);
+  font-family: var(--rb-font-body);
+  font-size: var(--rb-text-sm);
+  transition:
+    border-color var(--rb-transition),
+    box-shadow var(--rb-transition);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-textarea {
+  min-height: 5rem;
+  resize: vertical;
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-input:focus-visible,
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-textarea:focus-visible,
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-select:focus-visible {
+  outline: none;
+  border-color: var(--rb-accent);
+  box-shadow: 0 0 0 3px var(--rb-accent-wash);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-input::placeholder,
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-textarea::placeholder {
+  color: var(--rb-text-faint);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-choice {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rb-space-2);
+  font-family: var(--rb-font-body);
+  font-size: var(--rb-text-sm);
+  color: var(--rb-text);
+  cursor: pointer;
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-checkbox,
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-radio,
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-switch {
+  accent-color: var(--rb-accent);
+  width: 1rem;
+  height: 1rem;
+  cursor: pointer;
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-switch {
+  width: 2rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-input,
+  :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-textarea,
+  :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-select {
+    transition: none;
+  }
+}

package/amber-hearth/components/link.css

@@ -0,0 +1,47 @@
+/* amber-hearth — nav link (tree/sidebar row)
+ * A list row; hover fills to surface-2 and lights a soft, fully-rounded accent
+ * bar on the left edge — round, not a hard-edged rule, to match the theme's
+ * rounded character. Active carries the accent wash. */
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-link {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--rb-space-2);
+  padding: var(--rb-space-2) var(--rb-space-3);
+  border-radius: var(--rb-radius);
+  color: var(--rb-text);
+  font-size: var(--rb-text-sm);
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background var(--rb-transition),
+    color var(--rb-transition);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-link:hover {
+  background: var(--rb-surface-2);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-link::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 8px;
+  bottom: 8px;
+  width: 3px;
+  border-radius: var(--rb-radius-pill);
+  background: transparent;
+  transition: background var(--rb-transition);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-link:hover::before,
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-link.rb-link--active::before {
+  background: var(--rb-accent);
+}
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-link.rb-link--active {
+  background: var(--rb-accent-wash);
+  color: var(--rb-accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-link {
+    transition: none;
+  }
+}

package/amber-hearth/components/log.css

@@ -0,0 +1,19 @@
+/* amber-hearth — 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="amber-hearth"], [data-rb-style="amber-hearth"] *).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="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-pre.rb-log {
+  overflow-x: hidden;
+}

package/amber-hearth/components/muted.css

@@ -0,0 +1,7 @@
+/* amber-hearth — muted / empty-state text
+ * Faint secondary text — captions, meta, "No results yet." style empty
+ * states. Italic fits this warm, hand-crafted, unhurried editorial voice. */
+:where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-muted {
+  color: var(--rb-text-faint);
+  font-style: italic;
+}

package/amber-hearth/components/nav-rail.css

@@ -0,0 +1,14 @@
+/* amber-hearth — 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="amber-hearth"], [data-rb-style="amber-hearth"] *).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/amber-hearth/components/pre.css

@@ -0,0 +1,13 @@
+/* amber-hearth — 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="amber-hearth"], [data-rb-style="amber-hearth"] *).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;
+}