@rackbops/styles 0.1.0

package/rackbops-studio/components/table.css

@@ -0,0 +1,31 @@
+/* rackbops-studio — table
+ * A clean editorial table: a strong header rule, generous row padding, a quiet
+ * hover wash. */
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 15px;
+}
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).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 on white 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-studio"], [data-rb-style="rackbops-studio"] *).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-studio"], [data-rb-style="rackbops-studio"] *).rb-table tbody tr:hover td {
+  background: var(--rb-surface-2);
+}
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-table .rb-num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}

package/rackbops-studio/components/tabs.css

@@ -0,0 +1,45 @@
+/* rackbops-studio — tabs
+ * Understated editorial tabs: soft-ink labels, the active one goes ink and
+ * grows a solid vermillion underbar. */
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-tabs {
+  display: flex;
+  gap: var(--rb-space-4);
+  border-bottom: 1px solid var(--rb-border);
+}
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).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-studio"], [data-rb-style="rackbops-studio"] *).rb-tab:hover {
+  color: var(--rb-text);
+}
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-tab.rb-tab--active {
+  color: var(--rb-text);
+}
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).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-studio"], [data-rb-style="rackbops-studio"] *).rb-tabpanel {
+  padding: var(--rb-space-4) 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-tab {
+    transition: none;
+  }
+}

package/rackbops-studio/components/tag.css

@@ -0,0 +1,20 @@
+/* rackbops-studio — 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-studio"], [data-rb-style="rackbops-studio"] *).rb-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).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-studio/design.md

@@ -0,0 +1,157 @@
+# rackbops-studio
+
+The design language of **rackbops.com** — the studio's own editorial brand.
+A light, paper-cool canvas; heavy, balanced headlines with tight tracking; a
+single warm voice — vermillion — over deep navy ink. The texture is print-like,
+not console-like: elevation is soft two-step shadows rather than frosted panels,
+roomy spacing, and a mono "eyebrow" that kickers every section. Two motifs carry the identity: the
+**rack panel** — a dark equaliser unit that puns on "the rack" (infrastructure)
+and "the bops" (signal) — and **Boppy**, the mascot. This theme ships the
+canonical **light** look; the dark mode rackbops.com toggles into is tabled at
+the end. Derived from rackbops/site/index.html.
+
+## Color
+
+Values are the light (primary) scheme; the dark counterpart is tabled at the end.
+Every value matches rackbops.com's token block, except `Surface sunken` and the
+four semantic hues (Info/Success/Warning/Danger), which are std-lib additions for
+the shared components (progress trough, badges, alerts) the marketing site lacks.
+
+| Role | Value | Usage |
+| --- | --- | --- |
+| Background | `#eaeef1` (cool paper) | Page canvas |
+| Surface | `#ffffff` | Cards, fields, raised panels |
+| Surface 2 | `#f3f6f8` | Hover wash, secondary sections |
+| Surface sunken | `#e4e9ed` | Progress troughs, insets |
+| Text | `#131e29` (navy ink) | Headlines and body |
+| Text soft | `#4c5b6b` | Lead paragraphs, secondary text |
+| Text faint | `#8091a1` | Meta, footnotes, table headers |
+| Border | `#d8e0e6` | Hairline dividers |
+| Border strong | `#c3ced7` | Field borders, ghost-button outline |
+| Accent | `#ef4d28` (vermillion) | The single warm voice: emphasis, CTAs, the equaliser |
+| Accent fg | `#ffffff` | Text on the vermillion fill |
+| Accent wash | `rgba(239,77,40,.09)` | Focus ring, faint accent tint |
+| Info | `#1e6fd0` | Informational chips (std-lib addition; see the Accessibility note) |
+| Success | `#1f9d57` | Positive status |
+| Warning | `#c07d12` | Caution status |
+| Danger | `#d64550` | Destructive/error (distinct rose vs. the vermillion accent) |
+
+**Rules.** The canvas is calm and cool; vermillion is spent sparingly — CTAs,
+the eyebrow rule, the live dot, the equaliser. Elevation is soft shadow on white,
+not frosted glass — the one blurred surface is the dialog backdrop (the source
+site also blurs its sticky header, which this library does not ship as a
+component). The marketing site itself uses no colour beyond the accent.
+
+## Typography
+
+- **Headlines:** the system sans at weight **800** with tight tracking
+  (`-0.02em`), `text-wrap: balance`, tight line-height (1.08). Heavy and
+  editorial — the studio signature.
+- **Body:** the same system sans, 17px / 1.6, weight 400.
+- **Mono voice:** `ui-monospace, "SF Mono", …` for eyebrows, nav, meta, tags, and
+  the rack readouts.
+- **Eyebrow:** mono, uppercase, wide-tracked (`0.18em`), accent-coloured, with a
+  short leading rule — the kicker above every section headline.
+
+## Shape & effects
+
+- Radius `0.6875rem` (11px) for buttons and inputs; `0.9375rem` (15px) for cards;
+  16–20px for the large feature panels; pills for tags and troughs.
+- Depth is a soft two-step shadow (`--rb-shadow-sm` resting, `--rb-shadow-lg` on
+  hover/lift). Cards lift `-4px` on hover.
+- Focus is a `2.5px` vermillion outline offset `3px`; fields add an accent border
+  plus a soft wash ring.
+- Overlay surfaces (the dialog) use a blurred backdrop (`--rb-blur`); the source
+  site also blurs its sticky header, which this library does not ship.
+- Primary buttons are an **ink fill that warms to vermillion** on hover; a press
+  dips the button `1px`; an optional arrow slides right on hover.
+- The gradient (`--rb-accent-grad`) is a vertical vermillion ramp — spent on the
+  rack equaliser bars.
+- Every animation (equaliser, live-dot pulse, hovers) respects
+  `prefers-reduced-motion`.
+
+## Accessibility
+
+This theme faithfully reproduces rackbops.com's editorial palette, and that
+palette makes deliberate below-AA choices for decorative text. Documented so
+consumers can compensate rather than discover it:
+
+- **Vermillion as text is ~3.6:1 on white** (below the 4.5:1 AA bar for normal
+  text). The source uses it exactly this way for the eyebrow kicker, the card
+  kicker tag, the `/0N` principle markers, and the active nav link — all
+  reproduced here. Treat accent-coloured text as decorative; never set body copy
+  or the sole label of an interactive control in `--rb-accent`.
+- **`--rb-text-faint` (#8091a1) is below AA on white** — use it only for
+  genuinely secondary meta (as the source does for footnotes), never for
+  essential text. The shared `.rb-table` header therefore uses `--rb-text-soft`,
+  which passes.
+- **White on the vermillion fill is ~3.6:1** — the `.rb-btn--accent` fill and the
+  `.rb-btn--primary` hover state. Fine for large/bold button text; for small
+  labels prefer the default primary (ink fill, ~15:1).
+- **The semantic badge stays AA** by rendering a tint fill + ink text rather than
+  coloured text on white.
+- The dark **arcane-obsidian** theme is much stronger on contrast (text ramp
+  5.4–8.8:1, semantic chips 4.5–6.5:1; only a few accent-on-tint states — the
+  default chip, the active link/tab — sit near ~4.3:1). Reach for it where
+  full-contrast UI matters.
+
+## Components
+
+Class prefix `rb-`; shared token/class contract with the other themes.
+
+- **Button** `.rb-btn` — `--primary` ink-fill→vermillion, `--accent` solid
+  vermillion, `--ghost` bordered outline, `--danger` rose outline; `.rb-btn__arrow`
+  slides on hover.
+- **Card** `.rb-card` (+ `__tag`) — white panel, soft shadow, `-4px` hover lift.
+- **NavLink** `.rb-link` — mono header nav; hover fills to a surface pill; accent
+  on the active route.
+- **Form** `.rb-input` / `.rb-textarea` / `.rb-select` / `.rb-label` / `.rb-field`
+  / `.rb-choice` / `.rb-checkbox` / `.rb-radio` / `.rb-switch` — white fields;
+  focus is a vermillion border + wash ring.
+- **Badge** `.rb-badge` — bordered mono pill; semantic modifiers tint the border
+  and text.
+- **Alert** `.rb-alert` — white surface card, soft shadow, 4px semantic left bar.
+- **Dialog** `.rb-dialog` — native `<dialog>`, white pane, deep lift shadow,
+  blurred navy backdrop, heavy title.
+- **Tabs** `.rb-tabs` / `.rb-tab` / `.rb-tabpanel` — understated; active goes ink
+  with a vermillion underbar.
+- **Table** `.rb-table` (+ `.rb-num`) — mono uppercase header rule, generous rows,
+  quiet hover wash.
+- **Progress / Spinner** `.rb-progress` / `.rb-spinner` — pill trough with a
+  vermillion fill; single-arc spinner.
+- **Eyebrow** `.rb-eyebrow` — the mono kicker with leading rule.
+
+### Theme extras
+
+- **Rack** `.rb-rack` (+ `__top` / `__live` / `__bars` / `__foot`) — the dark navy
+  equaliser panel; a pulsing live dot and animated vermillion bars. Its inverted
+  panel palette is fixed dark regardless of the light canvas.
+- **Principles** `.rb-principles` / `.rb-principle` (+ `__n` / `__body`) — the
+  numbered `/0N` "how we work" list.
+- **Tags** `.rb-tags` / `.rb-tag` — mono capability pills in a flex-wrap row.
+- **Boppy** — the mascot ships as `assets/boppy.svg` (navy body, round eyes, a
+  vermillion equaliser smile).
+
+## Dark counterpart
+
+The dark mode rackbops.com toggles into. Not shipped as a separate theme yet;
+documented so it can become one additively.
+
+| Role | Value |
+| --- | --- |
+| Background | `#0d141d` |
+| Surface | `#141f2a` |
+| Surface 2 | `#19242f` |
+| Text | `#e9eff4` |
+| Text soft | `#a4b4c3` |
+| Text faint | `#697a8c` |
+| Border | `#243140` |
+| Border strong | `#31404f` |
+| Accent | `#ff5d3d` |
+| Accent soft | `#ff7a5f` |
+
+## Scoping
+
+Every rule is guarded by `data-rb-style="rackbops-studio"` (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/rackbops-studio/index.css

@@ -0,0 +1,17 @@
+/* rackbops-studio — full theme entry point */
+@import "./tokens.css";
+@import "./base.css";
+@import "./components/button.css";
+@import "./components/card.css";
+@import "./components/link.css";
+@import "./components/form.css";
+@import "./components/badge.css";
+@import "./components/alert.css";
+@import "./components/dialog.css";
+@import "./components/tabs.css";
+@import "./components/table.css";
+@import "./components/progress.css";
+@import "./components/eyebrow.css";
+@import "./components/rack.css";
+@import "./components/principle.css";
+@import "./components/tag.css";

package/rackbops-studio/tokens.css

@@ -0,0 +1,77 @@
+/* rackbops-studio — design tokens
+ * Reverse-documented from rackbops.com (rackbops/site/index.html). Consume via:
+ *   @import "@rackbops/styles/rackbops-studio/tokens";
+ * or pull the whole theme with ./index.css.
+ *
+ * Nothing applies until an element carries data-rb-style="rackbops-studio"
+ * — 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.
+ *
+ * This theme ships its canonical, primary look (light); the dark counterpart
+ * that rackbops.com toggles into is documented in design.md and can become its
+ * own theme later. Every theme declares the same baseline token set (styles/test
+ * enforces parity); names marked (extra) are additions this theme's own
+ * component CSS may rely on.
+ */
+:where([data-rb-style="rackbops-studio"]) {
+  color-scheme: light;
+
+  /* color — cool paper canvas, white raised surfaces, navy ink */
+  --rb-bg: #eaeef1;
+  --rb-surface: #ffffff;
+  --rb-surface-2: #f3f6f8;
+  --rb-surface-sunken: #e4e9ed;
+  --rb-text: #131e29; /* navy ink */
+  --rb-text-soft: #4c5b6b;
+  --rb-text-faint: #8091a1;
+  --rb-border: #d8e0e6;
+  --rb-border-strong: #c3ced7;
+
+  /* accent — vermillion, the studio's single warm voice */
+  --rb-accent: #ef4d28;
+  --rb-accent-fg: #ffffff; /* white text on the vermillion fill */
+  --rb-accent-wash: rgba(239, 77, 40, 0.09);
+
+  /* the signature gradient — a vertical vermillion ramp (the rack equaliser) */
+  --rb-accent-grad: linear-gradient(180deg, #ef4d28, #c93c1c);
+
+  /* semantic — the marketing site is accent-only; these serve the shared
+     badge/alert/status components. As a thin border (alert) they clear the 3:1
+     graphical bar; the studio badge renders them as a tint + ink text so its
+     label stays AA. Used directly as small text on white they are below 4.5:1
+     — see design.md's Accessibility note. */
+  --rb-info: #1e6fd0;
+  --rb-success: #1f9d57;
+  --rb-warning: #c07d12;
+  --rb-danger: #d64550;
+
+  /* typography — bold editorial sans headlines over a system-ui body; mono for
+     eyebrows, nav, tags, and meta */
+  --rb-font-display: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --rb-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --rb-font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
+  --rb-font-weight: 400;
+  --rb-font-weight-medium: 600;
+  --rb-font-weight-bold: 800; /* headlines are heavy — the studio signature */
+  --rb-heading-tracking: -0.02em;
+  --rb-label-tracking: 0.18em; /* the mono eyebrow's wide tracking */
+  --rb-text-sm: 13.5px;
+
+  /* shape & effects — soft two-step shadow depth, roomy editorial radii */
+  --rb-radius: 0.6875rem; /* 11px — buttons, inputs */
+  --rb-radius-lg: 0.9375rem; /* 15px — cards */
+  --rb-radius-pill: 99px;
+  --rb-shadow-sm: 0 1px 2px rgba(19, 30, 41, 0.06);
+  --rb-shadow-lg: 0 2px 6px rgba(19, 30, 41, 0.05), 0 22px 48px -24px rgba(19, 30, 41, 0.28);
+  --rb-blur: 10px; /* backdrop blur for overlay surfaces (dialog); the source
+                      site also uses it on its sticky header, which this library
+                      does not ship as a component */
+  --rb-transition: 0.15s;
+
+  /* spacing — generous, editorial rhythm */
+  --rb-space-1: 0.5rem;
+  --rb-space-2: 0.75rem;
+  --rb-space-3: 1rem;
+  --rb-space-4: 1.5rem;
+  --rb-space-5: 2.25rem;
+}

package/summer-cloud/base.css

@@ -0,0 +1,58 @@
+/* summer-cloud — base styles
+ * Scoped defaults. Requires tokens.css. Apps that need the webfonts should
+ * include the Google Fonts <link>s for Plus Jakarta Sans (400;600;700;800),
+ * Inter (400;600) and JetBrains Mono (500;700), or self-host; every token
+ * stack falls back to a system family.
+ *
+ * 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="summer-cloud"]) {
+  background-color: var(--rb-bg);
+  color: var(--rb-text);
+  font-family: var(--rb-font-body);
+  font-weight: var(--rb-font-weight);
+  -webkit-font-smoothing: antialiased;
+}
+
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *),
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *)::before,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *)::after {
+  box-sizing: border-box;
+}
+
+:where(html[data-rb-style="summer-cloud"]) 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);
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Opt-in page background: the sky gradient. Flat --rb-bg is also correct, but
+ * the gradient is the signature — the theme reads as "airy" only against it.
+ * Apply to <body>, or to the attributed container itself. */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-bg {
+  background: linear-gradient(135deg, var(--rb-sky-start) 0%, var(--rb-sky-end) 100%);
+  background-attachment: fixed;
+}
+
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *):where(h1, h2, h3, h4) {
+  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="summer-cloud"], [data-rb-style="summer-cloud"] *):where(a) {
+  color: var(--rb-accent);
+}
+
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *)::selection {
+  background: var(--rb-accent);
+  color: #fff;
+}

package/summer-cloud/components/alert.css

@@ -0,0 +1,29 @@
+/* summer-cloud — alert / callout: glass card with a semantic left rule */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-alert {
+  padding: var(--rb-space-4);
+  background: var(--rb-surface-glass);
+  border: 1px solid var(--rb-border);
+  border-left: 4px solid var(--rb-accent-2);
+  border-radius: var(--rb-radius);
+  backdrop-filter: blur(var(--rb-blur));
+  -webkit-backdrop-filter: blur(var(--rb-blur));
+  box-shadow: var(--rb-shadow-sm);
+  color: var(--rb-text);
+  font-size: var(--rb-text-sm);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-alert--info    { border-left-color: var(--rb-info); }
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-alert--success { border-left-color: var(--rb-success); }
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-alert--warning { border-left-color: var(--rb-warning); }
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-alert--danger  { border-left-color: var(--rb-danger); }
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-alert__title {
+  display: block;
+  margin-bottom: var(--rb-space-1);
+  font-family: var(--rb-font-display);
+  font-weight: var(--rb-font-weight-medium);
+  font-size: var(--rb-text-sm);
+  color: var(--rb-text);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-alert--info .rb-alert__title    { color: var(--rb-accent-2-deep); }
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-alert--success .rb-alert__title { color: #1a7a1a; }
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-alert--warning .rb-alert__title { color: #594400; }
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-alert--danger .rb-alert__title  { color: #93000a; }

package/summer-cloud/components/badge.css

@@ -0,0 +1,49 @@
+/* summer-cloud — badge: solid pill, mono uppercase, for retail energy */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rb-space-1);
+  padding: 0.25rem 0.75rem;
+  background: var(--rb-surface-glass-high);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius-pill);
+  color: var(--rb-text-faint);
+  text-transform: uppercase;
+  font-family: var(--rb-font-mono);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: var(--rb-label-tracking);
+  box-shadow: 0 1px 2px rgba(93, 43, 255, 0.06);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-badge--primary { background: var(--rb-accent);  border-color: transparent; color: #fff; }
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-badge--info    { background: var(--rb-info);     border-color: transparent; color: #004261; }
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-badge--success { background: var(--rb-success);  border-color: transparent; color: #0a2e0a; }
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-badge--warning { background: var(--rb-warning);  border-color: transparent; color: #241a00; }
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-badge--danger  { background: var(--rb-danger);   border-color: transparent; color: #4a0000; }
+
+/* Chip — the filter variant: outlined until selected. */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rb-space-1);
+  padding: var(--rb-space-2) var(--rb-space-3);
+  background: none;
+  border: 1px solid var(--rb-outline);
+  border-radius: var(--rb-radius-pill);
+  color: var(--rb-text-faint);
+  font-family: var(--rb-font-display);
+  font-size: 12px;
+  font-weight: var(--rb-font-weight-medium);
+  cursor: pointer;
+  transition: background var(--rb-transition), color var(--rb-transition),
+    border-color var(--rb-transition);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-chip:hover {
+  background: var(--rb-sky-tint);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-chip--selected,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-chip[aria-pressed="true"] {
+  background: var(--rb-accent-bright);
+  border-color: transparent;
+  color: #fff;
+}

package/summer-cloud/components/button.css

@@ -0,0 +1,109 @@
+/* summer-cloud — button: pill-shaped, bouncy, tinted-shadow lift */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--rb-space-2);
+  padding: 0.75rem var(--rb-space-4);
+  background: rgba(255, 255, 255, 0.4);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius-pill);
+  color: var(--rb-text-faint);
+  font-family: var(--rb-font-display);
+  font-weight: var(--rb-font-weight-medium);
+  font-size: var(--rb-text-sm);
+  cursor: pointer;
+  transition:
+    background var(--rb-transition),
+    border-color var(--rb-transition),
+    color var(--rb-transition),
+    box-shadow 0.2s ease,
+    transform 0.2s var(--rb-ease-bounce);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn:hover,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn:focus-visible {
+  background: rgba(255, 255, 255, 0.6);
+  border-color: var(--rb-accent-border);
+  color: var(--rb-accent);
+  transform: scale(1.03);
+  outline: none;
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn:focus-visible {
+  box-shadow: 0 0 0 4px var(--rb-accent-2-glow);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn:active {
+  transform: scale(0.95);
+}
+
+/* Primary — the solid violet CTA. One per view. */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--primary {
+  background: var(--rb-accent);
+  border-color: transparent;
+  color: #fff;
+  font-weight: var(--rb-font-weight-bold);
+  box-shadow: var(--rb-shadow-raised);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--primary:hover {
+  background: var(--rb-accent-bright);
+  color: #fff;
+  box-shadow: var(--rb-shadow-raised-hover);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--primary:focus-visible {
+  background: var(--rb-accent-bright);
+  color: #fff;
+  box-shadow: var(--rb-shadow-raised-hover), 0 0 0 4px var(--rb-accent-glow);
+}
+
+/* Accent — glass with a sky-blue edge, for the secondary path. */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--accent {
+  border-color: var(--rb-accent-2);
+  color: var(--rb-accent-2-deep);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--accent:hover,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--accent:focus-visible {
+  color: var(--rb-accent-2-deep);
+  box-shadow: 0 0 0 4px var(--rb-accent-2-glow);
+}
+
+/* Ghost — no chrome until hovered. */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--ghost {
+  background: none;
+  border-color: transparent;
+  box-shadow: none;
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--ghost:hover,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--ghost:focus-visible {
+  background: var(--rb-sky-tint);
+}
+
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--danger {
+  background: var(--rb-danger-deep);
+  border-color: transparent;
+  color: #fff;
+  font-weight: var(--rb-font-weight-bold);
+  box-shadow: 0 4px 14px rgba(204, 31, 31, 0.39);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--danger:hover,
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--danger:focus-visible {
+  background: var(--rb-danger);
+  color: #4a0000;
+  box-shadow: 0 6px 20px rgba(255, 77, 77, 0.5);
+}
+
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn {
+    transition: background var(--rb-transition), color var(--rb-transition);
+  }
+  :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn:hover,
+  :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn:focus-visible,
+  :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn:active {
+    transform: none;
+  }
+}

package/summer-cloud/components/card.css

@@ -0,0 +1,35 @@
+/* summer-cloud — card: the glassmorphic panel everything else sits in */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-card {
+  padding: var(--rb-space-5);
+  background: var(--rb-surface-glass);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius);
+  backdrop-filter: blur(var(--rb-blur));
+  -webkit-backdrop-filter: blur(var(--rb-blur));
+  box-shadow: var(--rb-shadow-lg);
+  color: var(--rb-text);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-card > :first-child { margin-top: 0; }
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-card > :last-child { margin-bottom: 0; }
+
+/* Level 2 — floating: higher-opacity white, lifts on hover. Use for
+ * interactive cards (products, tiles), not for static content panels. */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-card--floating {
+  background: var(--rb-surface-glass-high);
+  backdrop-filter: blur(var(--rb-blur-high));
+  -webkit-backdrop-filter: blur(var(--rb-blur-high));
+  transition: transform var(--rb-transition), box-shadow var(--rb-transition);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-card--floating:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--rb-shadow-raised-hover);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-card--floating {
+    transition: none;
+  }
+  :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-card--floating:hover {
+    transform: none;
+  }
+}

package/summer-cloud/components/dialog.css

@@ -0,0 +1,30 @@
+/* summer-cloud — dialog (native <dialog>): the floating tier, fully opaque */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-dialog {
+  padding: var(--rb-space-5);
+  max-width: 32rem;
+  width: calc(100vw - 2rem);
+  background: var(--rb-surface);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius);
+  color: var(--rb-text);
+  font-family: var(--rb-font-body);
+  box-shadow: var(--rb-shadow-lg);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-dialog::backdrop {
+  background: rgba(23, 28, 31, 0.3);
+  backdrop-filter: blur(4px);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-dialog__title {
+  margin: 0 0 var(--rb-space-3);
+  color: var(--rb-accent);
+  font-family: var(--rb-font-display);
+  font-size: 1.5rem;
+  font-weight: var(--rb-font-weight-bold);
+  letter-spacing: var(--rb-heading-tracking);
+}
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-dialog__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--rb-space-2);
+  margin-top: var(--rb-space-5);
+}