theme.css

/*
 * The 2026-10 brand, on Blume's tokens: neutral greys, one green, Strichpunkt
 * Sans for every word and Intel One Mono for code (both set in
 * blume.config.ts). Values are the dashboard's Figma variables, so a colour
 * can be checked against the product without translating it.
 *
 * Dark is the default, like the Website: a #030303 page with #141414 code and
 * card surfaces, white type, and the green as the accent. Light mode is the
 * dashboard's light theme: a white page, ink type, and ink as the accent,
 * because the green fails as type on white (1.4:1). There the green appears
 * only as a ground with ink on it.
 */
:root {
  --blume-foreground: #141414;
  --blume-muted: color-mix(in oklch, #141414 6%, transparent);
  --blume-muted-foreground: #6a6a6a;
  --blume-border: color-mix(in oklch, #141414 8%, transparent);
  --blume-code-background: #f5f5f5;
  --sf-green: #1efe57;
  --sf-ink: #141414;
}

:root[data-theme="dark"] {
  --blume-foreground: #ffffff;
  --blume-muted: color-mix(in oklch, #ffffff 10%, transparent);
  --blume-muted-foreground: #8e8e8e;
  --blume-border: color-mix(in oklch, #ffffff 10%, transparent);
  --blume-code-background: #141414;
  --blume-accent-foreground: #141414;
}

/*
 * The one call to action in the header is the brand's green pill in both
 * modes, ink on green, as the Website and dashboard draw their primary
 * buttons.
 */
[data-blume-header] a[href="https://my.spacefast.com"] {
  background: var(--sf-green);
  color: var(--sf-ink);
}

/* The wordmark beside the mark reads as part of the logo, not a link. */
[data-blume-header] > a:first-of-type {
  gap: 0.625rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

[data-blume-header] > a:first-of-type > span:last-child {
  color: var(--blume-muted-foreground);
}

/*
 * Headings follow the brand's type scale: Medium for display sizes, slight
 * negative tracking, no serif.
 */
:where(h1, h2, h3, h4, h5, h6) {
  letter-spacing: -0.02em;
}

.prose :where(h1, h2, h3) {
  font-weight: 500;
}

/* Links in prose are underlined ink, the Website's quiet text link. */
.prose :where(a):not(:where(.not-prose, .not-prose *)) {
  text-decoration-color: color-mix(in oklch, currentColor 30%, transparent);
  text-underline-offset: 4px;
}

.prose :where(a):not(:where(.not-prose, .not-prose *)):hover {
  text-decoration-color: currentColor;
}

/*
 * Top-level collapsible sidebar groups read like flat section headings: same
 * weight and color, with no indented rail under them. Their headers stack
 * tightly whether open or closed; the only extra space is after an open
 * group's pages. Nested groups (Recipes, Errors) keep the default style.
 */
[data-blume-nav-tree] > ul > li:has(> details) {
  margin-top: 0.125rem;
}

[data-blume-nav-tree] > ul > li:not(:has(> details)) + li:has(> details) {
  margin-top: 1.5rem;
}

[data-blume-nav-tree] > ul > li:has(> details[open]) + li {
  margin-top: 0.75rem;
}

[data-blume-nav-tree] > ul > li > details > summary.blume-nav-summary {
  color: var(--blume-foreground);
  font-weight: 500;
}

[data-blume-nav-tree] > ul > li > details[open] > summary.blume-nav-summary {
  margin-bottom: 0.25rem;
}

[data-blume-nav-tree] > ul > li > details > summary + div {
  border-inline-start: 0;
  padding-inline-start: 0;
}

.prose :where(.config-playground, .config-playground *) {
  box-sizing: border-box;
}

/*
 * An API reference sample panel has its own Copy in its tab strip, so Blume
 * hides the code-block Copy overlay there but not the Ask one beside it, which
 * then covers the first line of the sample.
 */
blume-panel-tabs [data-blume-ask] {
  display: none !important;
}

/*
 * The shared cookie banner (https://spacefast.com/cookie-banner.js) draws
 * itself in the brand: light by default, dark on a page whose <html> says
 * `data-theme="dark"`, which Blume sets. Its type is the page's sans.
 */
:root {
  --font-sans: var(--blume-font-body);
}