@rackbops/styles 0.1.0

package/rackbops-noir/components/badge.css

@@ -0,0 +1,39 @@
+/* rackbops-noir — badge
+ * A bordered mono pill, like the studio's capability tags. Default is an
+ * outline chip; semantic modifiers tint to their hue. */
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rb-space-1);
+  padding: 4px 10px;
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius-pill);
+  font-family: var(--rb-font-mono);
+  font-size: 11.5px;
+  letter-spacing: 0.02em;
+  color: var(--rb-text-soft);
+  background: var(--rb-surface);
+}
+/* Semantic variants: a tint fill + tinted border carry the hue, while the label
+ * uses --rb-text so it clears WCAG AA against the tint (raw semantic colours as
+ * small text fall short of AA). */
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-badge--info {
+  background: color-mix(in srgb, var(--rb-info) 14%, var(--rb-surface));
+  border-color: color-mix(in srgb, var(--rb-info) 45%, var(--rb-border));
+  color: var(--rb-text);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-badge--success {
+  background: color-mix(in srgb, var(--rb-success) 14%, var(--rb-surface));
+  border-color: color-mix(in srgb, var(--rb-success) 45%, var(--rb-border));
+  color: var(--rb-text);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-badge--warning {
+  background: color-mix(in srgb, var(--rb-warning) 16%, var(--rb-surface));
+  border-color: color-mix(in srgb, var(--rb-warning) 45%, var(--rb-border));
+  color: var(--rb-text);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-badge--danger {
+  background: color-mix(in srgb, var(--rb-danger) 14%, var(--rb-surface));
+  border-color: color-mix(in srgb, var(--rb-danger) 45%, var(--rb-border));
+  color: var(--rb-text);
+}

package/rackbops-noir/components/button.css

@@ -0,0 +1,79 @@
+/* rackbops-noir — button
+ * Primary is a light high-contrast fill that warms to vermillion on hover; ghost
+ * is a bordered outline. A press dips the button; an optional arrow slides on hover. */
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rb-space-2);
+  padding: 13px 22px;
+  border: 1px solid transparent;
+  border-radius: var(--rb-radius);
+  font-weight: var(--rb-font-weight-medium);
+  font-size: 16px;
+  text-decoration: none;
+  cursor: pointer;
+  color: var(--rb-text);
+  background: transparent;
+  transition:
+    transform 0.12s ease,
+    background var(--rb-transition) ease,
+    border-color var(--rb-transition) ease,
+    color var(--rb-transition) ease;
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn:active {
+  transform: translateY(1px);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--primary {
+  background: var(--rb-text); /* light in this theme — a bright neutral fill */
+  color: var(--rb-bg); /* dark ink on the light fill */
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--primary:hover,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--primary:focus-visible {
+  background: var(--rb-accent);
+  color: var(--rb-accent-fg);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--accent {
+  background: var(--rb-accent);
+  color: var(--rb-accent-fg);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--accent:hover,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--accent:focus-visible {
+  /* mix toward the text colour: lightens in a dark theme, darkens in a light one */
+  background: color-mix(in srgb, var(--rb-accent), var(--rb-text) 15%);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--ghost {
+  background: transparent;
+  color: var(--rb-text);
+  border-color: var(--rb-border-strong);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--ghost:hover,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--ghost:focus-visible {
+  border-color: var(--rb-text);
+  background: var(--rb-surface-2);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--danger {
+  background: transparent;
+  color: var(--rb-danger);
+  border-color: color-mix(in srgb, var(--rb-danger) 45%, var(--rb-border));
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--danger:hover,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--danger:focus-visible {
+  border-color: var(--rb-danger);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn__arrow {
+  transition: transform var(--rb-transition) ease;
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn:hover .rb-btn__arrow {
+  transform: translateX(3px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn,
+  :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn__arrow {
+    transition: none;
+  }
+}

package/rackbops-noir/components/card.css

@@ -0,0 +1,37 @@
+/* rackbops-noir — card
+ * A surface panel with a soft resting shadow; hovers lift and deepen — the studio's
+ * service-card motion. A mono kicker tag can sit at the top. */
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-card {
+  display: flex;
+  flex-direction: column;
+  background: var(--rb-surface);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius-lg);
+  padding: 26px 24px 28px;
+  box-shadow: var(--rb-shadow-sm);
+  transition:
+    transform 0.16s ease,
+    border-color 0.16s ease,
+    box-shadow 0.16s ease;
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-card:hover {
+  transform: translateY(-4px);
+  border-color: var(--rb-border-strong);
+  box-shadow: var(--rb-shadow-lg);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-card__tag {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-family: var(--rb-font-mono);
+  font-size: 12px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--rb-accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-card {
+    transition: none;
+  }
+}

package/rackbops-noir/components/dialog.css

@@ -0,0 +1,33 @@
+/* rackbops-noir — dialog
+ * Native <dialog>: a surface pane with the studio's deep lift shadow over a
+ * softly dimmed, blurred backdrop; a heavy editorial title. */
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-dialog {
+  padding: 0;
+  border: 1px solid var(--rb-border);
+  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="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-dialog::backdrop {
+  background: rgba(19, 30, 41, 0.4);
+  backdrop-filter: blur(var(--rb-blur));
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-dialog__body {
+  padding: var(--rb-space-5);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).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);
+  font-size: 1.4rem;
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).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/rackbops-noir/components/eyebrow.css

@@ -0,0 +1,21 @@
+/* rackbops-noir — eyebrow (section kicker)
+ * The studio's signature label: a mono, uppercase, wide-tracked accent tag with
+ * a short leading rule. Sits above every section headline. */
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-family: var(--rb-font-mono);
+  font-size: 12.5px;
+  font-weight: var(--rb-font-weight-medium);
+  letter-spacing: var(--rb-label-tracking);
+  text-transform: uppercase;
+  color: var(--rb-accent);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-eyebrow::before {
+  content: "";
+  width: 22px;
+  height: 1.5px;
+  background: var(--rb-accent);
+  display: inline-block;
+}

package/rackbops-noir/components/form.css

@@ -0,0 +1,70 @@
+/* rackbops-noir — form controls
+ * Fields on the surface; focus is a vermillion border + soft wash.
+ * Comfortable, roomy sizing to match the editorial body. */
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rb-space-1);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-label {
+  font-size: var(--rb-text-sm);
+  font-weight: var(--rb-font-weight-medium);
+  color: var(--rb-text-soft);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-input,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-textarea,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-select {
+  width: 100%;
+  padding: 12px 14px;
+  background: var(--rb-surface);
+  border: 1px solid var(--rb-border-strong);
+  border-radius: var(--rb-radius);
+  color: var(--rb-text);
+  font-family: var(--rb-font-body);
+  font-size: 16px;
+  transition:
+    border-color var(--rb-transition),
+    box-shadow var(--rb-transition);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-textarea {
+  min-height: 6rem;
+  resize: vertical;
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-input:focus-visible,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-textarea:focus-visible,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).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="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-input::placeholder,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-textarea::placeholder {
+  color: var(--rb-text-faint);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-choice {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rb-space-1);
+  font-size: 16px;
+  color: var(--rb-text);
+  cursor: pointer;
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-checkbox,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-radio,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-switch {
+  accent-color: var(--rb-accent);
+  width: 1.1rem;
+  height: 1.1rem;
+  cursor: pointer;
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-switch {
+  width: 2.2rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-input,
+  :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-textarea,
+  :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-select {
+    transition: none;
+  }
+}

package/rackbops-noir/components/link.css

@@ -0,0 +1,31 @@
+/* rackbops-noir — nav link
+ * The header's quiet mono nav: soft ink that fills to a surface pill on hover;
+ * accent on the active route. */
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rb-space-1);
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-family: var(--rb-font-mono);
+  font-size: var(--rb-text-sm);
+  color: var(--rb-text-soft);
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    color var(--rb-transition),
+    background var(--rb-transition);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-link:hover {
+  color: var(--rb-text);
+  background: var(--rb-surface-2);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-link.rb-link--active {
+  color: var(--rb-accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-link {
+    transition: none;
+  }
+}

package/rackbops-noir/components/principle.css

@@ -0,0 +1,31 @@
+/* rackbops-noir — principle (theme extra)
+ * The studio's numbered "how we work" list: a mono /0N marker in the accent
+ * beside a heading + paragraph, rows divided by hairlines. */
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-principles {
+  display: flex;
+  flex-direction: column;
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-principle {
+  display: grid;
+  grid-template-columns: 56px 1fr;
+  gap: 18px;
+  padding: 22px 0;
+  border-top: 1px solid var(--rb-border);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-principles > .rb-principle:first-child {
+  border-top: 0;
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-principle__n {
+  font-family: var(--rb-font-mono);
+  font-size: 13px;
+  font-weight: var(--rb-font-weight-medium);
+  color: var(--rb-accent);
+  padding-top: 3px;
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-principle__body h3 {
+  font-size: 1.16rem;
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-principle__body p {
+  margin: 7px 0 0;
+  color: var(--rb-text-soft);
+}

package/rackbops-noir/components/progress.css

@@ -0,0 +1,40 @@
+/* rackbops-noir — progress + spinner
+ * A pill trough with a vermillion fill; the spinner is a single accent arc. */
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-progress {
+  appearance: none;
+  width: 100%;
+  height: 8px;
+  border: 0;
+  border-radius: var(--rb-radius-pill);
+  overflow: hidden;
+  background: var(--rb-surface-sunken);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-progress::-webkit-progress-bar {
+  background: var(--rb-surface-sunken);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-progress::-webkit-progress-value {
+  background: var(--rb-accent);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-progress::-moz-progress-bar {
+  background: var(--rb-accent);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).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-noir-spin 0.7s linear infinite;
+}
+@keyframes rb-noir-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-spinner {
+    animation-duration: 2s;
+  }
+}

package/rackbops-noir/components/rack.css

@@ -0,0 +1,93 @@
+/* rackbops-noir — rack panel (theme extra)
+ * The studio's visual pun: a dark "rack" unit with an animated vermillion
+ * equaliser (the "bops" — signal) and a pulsing live dot. The panel palette
+ * matches rackbops.com's *dark*-mode rack — a near-canvas block set off by its
+ * border (vs. the studio theme, which uses the site's light-mode rack). */
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-rack {
+  --rb-rack-panel: #0a121a;
+  --rb-rack-ink: #e7eef4;
+  --rb-rack-faint: #7d90a2;
+  --rb-rack-line: #1e2b37;
+  background: var(--rb-rack-panel);
+  border: 1px solid var(--rb-rack-line);
+  border-radius: 16px;
+  padding: 24px;
+  box-shadow: var(--rb-shadow-lg);
+  color: var(--rb-rack-ink);
+  overflow: hidden;
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-rack__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-family: var(--rb-font-mono);
+  font-size: 11.5px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--rb-rack-faint);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-rack__live {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--rb-rack-ink);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-rack__live::before {
+  content: "";
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--rb-accent);
+  animation: rb-noir-pulse 1.8s ease-in-out infinite;
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-rack__bars {
+  display: flex;
+  align-items: flex-end;
+  gap: 7px;
+  height: 132px;
+  margin: 22px 2px 16px;
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-rack__bars > i {
+  flex: 1;
+  background: var(--rb-accent-grad);
+  border-radius: 4px 4px 2px 2px;
+  transform-origin: bottom;
+  animation: rb-noir-bop 1.4s ease-in-out infinite;
+  opacity: 0.92;
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-rack__bars > i:nth-child(1) { height: 52%; animation-delay: -0.2s; }
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-rack__bars > i:nth-child(2) { height: 88%; animation-delay: -1.1s; }
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-rack__bars > i:nth-child(3) { height: 34%; animation-delay: -0.6s; }
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-rack__bars > i:nth-child(4) { height: 70%; animation-delay: -0.9s; }
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-rack__bars > i:nth-child(5) { height: 100%; animation-delay: -0.35s; }
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-rack__bars > i:nth-child(6) { height: 46%; animation-delay: -1.3s; }
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-rack__foot {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  border-top: 1px solid var(--rb-rack-line);
+  padding-top: 14px;
+  font-family: var(--rb-font-mono);
+  font-size: 11.5px;
+  color: var(--rb-rack-faint);
+  letter-spacing: 0.04em;
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-rack__foot b {
+  color: var(--rb-rack-ink);
+  font-weight: var(--rb-font-weight-medium);
+}
+@keyframes rb-noir-bop {
+  0%, 100% { transform: scaleY(0.5); }
+  50% { transform: scaleY(1); }
+}
+@keyframes rb-noir-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.35; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-rack__bars > i,
+  :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-rack__live::before {
+    animation: none;
+  }
+}

package/rackbops-noir/components/table.css

@@ -0,0 +1,31 @@
+/* rackbops-noir — table
+ * A clean editorial table: a strong header rule, generous row padding, a quiet
+ * hover wash. */
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 15px;
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-table th {
+  text-align: left;
+  padding: var(--rb-space-2) var(--rb-space-3);
+  border-bottom: 2px solid var(--rb-border-strong);
+  color: var(--rb-text-soft); /* text-faint is below AA at header size */
+  font-family: var(--rb-font-mono);
+  font-size: 12px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  font-weight: var(--rb-font-weight-medium);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-table td {
+  padding: var(--rb-space-2) var(--rb-space-3);
+  border-bottom: 1px solid var(--rb-border);
+  color: var(--rb-text);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-table tbody tr:hover td {
+  background: var(--rb-surface-2);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-table .rb-num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}

package/rackbops-noir/components/tabs.css

@@ -0,0 +1,45 @@
+/* rackbops-noir — tabs
+ * Understated editorial tabs: soft-ink labels, the active one goes ink and
+ * grows a solid vermillion underbar. */
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tabs {
+  display: flex;
+  gap: var(--rb-space-4);
+  border-bottom: 1px solid var(--rb-border);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tab {
+  position: relative;
+  padding: var(--rb-space-2) 0;
+  background: transparent;
+  border: 0;
+  color: var(--rb-text-soft);
+  font-family: var(--rb-font-body);
+  font-weight: var(--rb-font-weight-medium);
+  font-size: 15px;
+  cursor: pointer;
+  transition: color var(--rb-transition);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tab:hover {
+  color: var(--rb-text);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tab.rb-tab--active {
+  color: var(--rb-text);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tab.rb-tab--active::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: 2px;
+  border-radius: 2px 2px 0 0;
+  background: var(--rb-accent);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tabpanel {
+  padding: var(--rb-space-4) 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tab {
+    transition: none;
+  }
+}

package/rackbops-noir/components/tag.css

@@ -0,0 +1,20 @@
+/* rackbops-noir — capability tag (theme extra)
+ * The small mono pill used in flex-wrap lists inside service cards — a quieter,
+ * borderless-feel counterpart to the semantic .rb-badge. */
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tag {
+  font-family: var(--rb-font-mono);
+  font-size: 11.5px;
+  color: var(--rb-text-soft);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius-pill);
+  padding: 4px 10px;
+  letter-spacing: 0.02em;
+}

package/rackbops-noir/design.md

@@ -0,0 +1,85 @@
+# rackbops-noir
+
+The dark counterpart of **rackbops-studio** — the mode rackbops.com toggles into.
+Same editorial studio language (heavy 800 headlines with tight tracking, the mono
+eyebrow, vermillion as the single warm voice, the rack-equaliser motif, soft
+two-step shadow depth) rendered on a deep slate canvas instead of paper. It ships
+the identical `rb-*` component set as rackbops-studio — token-driven, so only the
+palette differs, plus a dark-appropriate accent-fg and a lighter accent ramp —
+and swaps in with a single attribute flip. Derived from rackbops.com's dark scheme.
+
+## Color
+
+Palette values match rackbops.com's dark scheme. On the dark ground the vermillion
+accent clears **~5.5:1 as text**, so — unlike the light studio theme — noir's
+accent labels are AA.
+
+| Role | Value | Usage |
+| --- | --- | --- |
+| Background | `#0d141d` (deep slate) | Page canvas |
+| Surface | `#141f2a` | Cards, fields, raised panels |
+| Surface 2 | `#19242f` | Hover wash, secondary sections |
+| Surface sunken | `#0f1720` | Progress troughs, insets |
+| Text | `#e9eff4` | Headlines and body |
+| Text soft | `#a4b4c3` | Lead paragraphs, secondary text |
+| Text faint | `#697a8c` | Meta, footnotes, placeholders (below AA as normal text — secondary use only; the shared table header uses `--rb-text-soft`) |
+| Border | `#243140` | Hairline dividers |
+| Border strong | `#31404f` | Field borders, ghost-button outline |
+| Accent | `#ff5d3d` (vermillion) | The single warm voice: emphasis, CTAs, the equaliser (~5.5:1 as text) |
+| Accent fg | `#0d141d` | Dark ink on the vermillion fill (keeps it AA) |
+| Accent wash | `rgba(255,93,61,.13)` | Focus ring, faint accent tint |
+| Info | `#4c9df0` | Informational chips (std-lib addition; brightened for the dark ground) |
+| Success | `#43c97e` | Positive status |
+| Warning | `#f2a93b` | Caution status |
+| Danger | `#f0616d` | Destructive/error |
+
+**Rules.** The canvas is deep and calm; vermillion is spent sparingly — CTAs, the
+eyebrow rule, the live dot, the equaliser. Elevation is soft shadow (deeper on the
+dark ground), not frosted glass — the one blurred surface is the dialog backdrop.
+The marketing site itself uses no colour beyond the accent; `--rb-surface-sunken`
+and the four semantic hues are std-lib additions for the shared components
+(progress trough, badges, alerts) the marketing site lacks.
+
+## Typography
+
+Identical to rackbops-studio: the system sans at weight **800** for headlines
+(tracking `-0.02em`, `text-wrap: balance`), the same sans body, and the mono voice
+(`ui-monospace, "SF Mono", …`) for eyebrows, nav, tags, and the rack readouts. The
+eyebrow is mono, uppercase, tracked `0.18em`, accent-coloured, with a leading rule.
+
+## Shape & effects
+
+- Radius `0.6875rem` (11px) for buttons/inputs; `0.9375rem` (15px) for cards;
+  pills for tags and troughs.
+- Depth is a soft two-step shadow (`--rb-shadow-sm` resting, `--rb-shadow-lg` on
+  hover/lift), deepened for the dark ground. Cards lift `-4px` on hover.
+- Focus is a `2.5px` vermillion outline offset `3px`; fields add an accent border
+  plus a soft wash ring.
+- Primary buttons are a **bright neutral fill with dark ink** that warms to
+  vermillion on hover (the studio's ink-fill idiom, inverted for dark); a press
+  dips the button `1px`; an optional arrow slides on hover.
+- The gradient (`--rb-accent-grad`) is a vertical vermillion ramp — spent on the
+  rack equaliser bars.
+- Every animation respects `prefers-reduced-motion`.
+
+## Components
+
+Class prefix `rb-`; the full rackbops-studio inventory, styled identically from
+tokens — `.rb-btn`, `.rb-card` (+ `__tag`), `.rb-link`, the form set, `.rb-badge`,
+`.rb-alert`, `.rb-dialog`, `.rb-tabs`, `.rb-table`, `.rb-progress`/`.rb-spinner`,
+`.rb-eyebrow` — plus the studio extras `.rb-rack` (equaliser panel; its panel palette
+matches rackbops.com's dark-mode rack — a near-canvas block set off by its border), `.rb-principles`/
+`.rb-principle`, and `.rb-tags`/`.rb-tag`. See rackbops-studio's `design.md` for
+the per-component notes. The Boppy mascot asset ships with rackbops-studio
+(`styles/rackbops-studio/assets/boppy.svg`) and is shared.
+
+## Light counterpart
+
+`rackbops-studio` — the canonical light look. Same `--rb-*` baseline and `rb-*`
+classes, so switching `data-rb-style` restyles a page without touching markup.
+
+## Scoping
+
+Every rule is guarded by `data-rb-style="rackbops-noir"` (self or ancestor),
+wrapped in zero-specificity `:where()`. Set the attribute on `<html>` for a page
+or on a container for an embedded island.