/* StreamingFast brand layer over the Flow direction.
 *
 * Loaded after flow.css and flow-landing.css on the pages listed in SF_BRANDED
 * (build.py), whose <body> carries the brand-sf class. Every value comes from
 * the @streamingfast/ui-tokens custom properties vendored in /sf-ui/ and linked
 * before this file, so a token release is picked up by replacing those files,
 * not by editing this one.
 *
 * Flow's two accents map onto the brand's: orange becomes lavender (the Firehose
 * side and every call to action), purple becomes mint (the Substreams side).
 */
body.brand-sf {
  --bg: var(--color-bg);
  --deep: #1d2124;
  --surface: var(--color-surface);
  --white: var(--color-text);
  --muted: var(--color-text-muted);
  --faint: var(--color-text-dim);
  --orange: var(--color-accent-lavender);
  --purple: var(--color-accent-mint);
  --green: var(--color-success);
  --line: var(--color-border);
  --display: var(--font-sans);
  --body: var(--font-sans);
  --lavender-soft: rgb(153 169 255 / 0.08);
  --lavender-line: rgb(153 169 255 / 0.4);
  --mint-soft: rgb(92 228 207 / 0.07);
  --mint-line: rgb(92 228 207 / 0.4);
  background: var(--color-bg);
}

/* Type: Urbanist for everything, JetBrains Mono wherever Flow used monospace. */
.brand-sf h1,
.brand-sf h2,
.brand-sf h3 {
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
}
.brand-sf p {
  color: var(--color-text-muted);
}
.brand-sf .mini-label,
.brand-sf .flow-headings,
.brand-sf .chip-ref,
.brand-sf .between-label,
.brand-sf .flow-caption,
.brand-sf #motion-toggle,
.brand-sf .section-index,
.brand-sf .section-meta,
.brand-sf .module-chips span,
.brand-sf .code-header,
.brand-sf .code-panel pre,
.brand-sf .code-bottom,
.brand-sf .block small,
.brand-sf .block-axis,
.brand-sf .block-data span,
.brand-sf .visual-bottom,
.brand-sf .firehose-features article > span,
.brand-sf .footer-links > div > span,
.brand-sf .familiar-list span,
.brand-sf .source-nodes::before,
.brand-sf .destination-nodes::before {
  font-family: var(--font-mono);
}
.brand-sf .eyebrow {
  letter-spacing: var(--tracking-wide);
}
.brand-sf .hero-copy .eyebrow,
.brand-sf .ecosystem-strip > .eyebrow {
  color: var(--color-mint-text);
}
.brand-sf .section-index {
  color: var(--color-lavender-text);
  border-radius: var(--radius-none);
}

/* The hero accent line carries the brand gradient, as in the ui showcase hero. */
.brand-sf .hero h1 span,
.brand-sf .closing h2 > span {
  background: var(--color-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Focus, selection, skip link. */
.brand-sf button:focus-visible,
.brand-sf a:focus-visible {
  outline-color: var(--color-accent-mint);
}
.brand-sf ::selection {
  background: var(--color-accent-lavender);
  color: var(--color-on-gradient);
}
.brand-sf .skip {
  color: var(--color-on-gradient);
}

/* Buttons: the ui-react `marketing` variant (gradient fill) and `secondary`. */
.brand-sf .button {
  border-radius: var(--radius-none);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  transition:
    box-shadow var(--duration-base) var(--ease-standard),
    filter var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}
.brand-sf .primary {
  background: var(--color-accent-gradient);
  color: var(--color-on-gradient);
  border-color: transparent;
  box-shadow: none;
}
.brand-sf .primary:hover {
  background: var(--color-accent-gradient);
  filter: brightness(1.15);
  box-shadow: var(--shadow-glow);
  transform: none;
}
.brand-sf .secondary,
.brand-sf .nav-button {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.brand-sf .secondary:hover,
.brand-sf .nav-button:hover {
  background: transparent;
  border-color: var(--color-accent-mint);
}

/* Header, navigation, footer. */
.brand-sf .site-header {
  background: rgb(35 39 41 / 0.93);
}
.brand-sf .site-header nav a,
.brand-sf .footer-links a,
.brand-sf .footer-bottom a,
.brand-sf .hero-foot > a {
  color: var(--color-text-muted);
}
.brand-sf .site-header nav a:hover,
.brand-sf .footer-links a:hover,
.brand-sf .site-header [aria-current='page'],
.brand-sf .family-links [aria-current='page'] {
  color: var(--color-lavender-text);
}
.brand-sf .menu-button span {
  background: var(--color-text);
}
.brand-sf .footer-main p,
.brand-sf .footer-bottom,
.brand-sf .footer-links > div > span,
.brand-sf .hero-foot,
.brand-sf .closing-note {
  color: var(--color-text-dim);
}
.brand-sf .hero-foot b {
  color: var(--color-text);
}
@media (max-width: 1250px) {
  .brand-sf .site-header nav {
    background: var(--color-surface-raised);
    border-color: var(--color-border-strong);
    border-radius: var(--radius-none);
  }
}

/* Surfaces. Flow's near-black blues become the brand's graphite steps. */
.brand-sf .hero,
.brand-sf .closing {
  background-color: var(--color-bg);
}
.brand-sf .firehose-section,
.brand-sf .code-panel {
  background: var(--color-bg-raised);
  border-color: var(--color-border);
}
.brand-sf .substreams-showcase,
.brand-sf .builder-card,
.brand-sf .block-visual,
.brand-sf .flow-node,
.brand-sf .file-tab {
  background: var(--color-surface);
  border-color: var(--color-border);
}
.brand-sf .builder-card:hover,
.brand-sf .flow-node:hover {
  background: var(--color-surface-raised);
  border-color: var(--color-border-strong);
}
.brand-sf .substreams-showcase,
.brand-sf .builder-card,
.brand-sf .block-visual,
.brand-sf .flow-node,
.brand-sf .node-icon,
.brand-sf .chip,
.brand-sf .block,
.brand-sf .block-data > div,
.brand-sf .module-chips span {
  border-radius: var(--radius-none);
}
.brand-sf .grid-background {
  background-image:
    linear-gradient(rgb(184 184 184 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgb(184 184 184 / 0.04) 1px, transparent 1px);
}
.brand-sf .hero-description,
.brand-sf .hero-ticks li,
.brand-sf .feature-grid p,
.brand-sf .firehose-features p,
.brand-sf .builder-card p {
  color: var(--color-text-muted);
}

/* Glows and accent tints, rebuilt on the brand accents. */
.brand-sf .status-dot {
  background: var(--color-accent-mint);
  box-shadow: 0 0 15px rgb(92 228 207 / 0.45);
}
.brand-sf .hero-glow {
  background:
    radial-gradient(ellipse at 38% 62%, rgb(153 169 255 / 0.06), transparent 37%),
    radial-gradient(ellipse at 66% 60%, rgb(92 228 207 / 0.05), transparent 35%);
}
.brand-sf .closing-glow {
  background: radial-gradient(ellipse at 50% 100%, rgb(153 169 255 / 0.07), transparent 65%);
}
.brand-sf .cta-band {
  border-color: var(--lavender-line);
  background: linear-gradient(110deg, var(--lavender-soft), var(--mint-soft));
}
.brand-sf .showcase-copy {
  background: radial-gradient(ellipse at 0 0, var(--mint-soft), transparent 65%);
}
.brand-sf .showcase-copy .mini-label,
.brand-sf .code-bottom > a {
  color: var(--color-mint-text);
}
.brand-sf .module-chips span {
  border-color: rgb(92 228 207 / 0.2);
  background: var(--mint-soft);
  color: var(--color-mint-text);
}
.brand-sf .code-purple {
  color: var(--color-accent-mint);
}
.brand-sf .code-orange {
  color: var(--color-accent-lavender);
}
.brand-sf .code-green {
  color: var(--color-success);
}
.brand-sf .line-no {
  color: var(--color-text-dim);
}

/* Interactive flow illustration. */
.brand-sf .flow-headings span:nth-child(2) {
  color: var(--color-lavender-text);
}
.brand-sf .flow-headings span:nth-child(3) {
  color: var(--color-mint-text);
}
.brand-sf .orange {
  filter: drop-shadow(0 0 4px rgb(153 169 255 / 0.47));
}
.brand-sf .purple {
  filter: drop-shadow(0 0 4px rgb(92 228 207 / 0.44));
}
.brand-sf .source-nodes .flow-node.selected {
  border-color: var(--lavender-line);
  background: var(--color-surface-raised);
  box-shadow: 0 0 24px var(--lavender-soft);
}
.brand-sf .destination-nodes .flow-node.selected {
  border-color: var(--mint-line);
  background: var(--color-surface-raised);
  box-shadow: 0 0 24px var(--mint-soft);
}
.brand-sf .source-nodes .selected i {
  box-shadow: 0 0 9px rgb(153 169 255 / 0.5);
}
.brand-sf .destination-nodes .selected i {
  box-shadow: 0 0 9px rgb(92 228 207 / 0.5);
}
.brand-sf .chip {
  border-color: var(--lavender-line);
  background: linear-gradient(140deg, rgb(153 169 255 / 0.12), var(--color-surface) 75%);
  box-shadow: 0 0 0 5px rgb(153 169 255 / 0.03), 0 20px 70px #0003;
}
.brand-sf .chip:hover {
  box-shadow: 0 0 0 5px rgb(153 169 255 / 0.07), var(--shadow-glow);
}
.brand-sf .substreams-chip {
  border-color: var(--mint-line);
  background: linear-gradient(140deg, rgb(92 228 207 / 0.1), var(--color-surface) 75%);
  box-shadow: 0 0 0 5px rgb(92 228 207 / 0.03), 0 20px 70px #0003;
}
.brand-sf .substreams-chip:hover {
  box-shadow: 0 0 0 5px rgb(92 228 207 / 0.07), 0 0 30px rgb(92 228 207 / 0.19);
}
.brand-sf .chip-tags span {
  background: var(--lavender-soft);
  border-color: rgb(153 169 255 / 0.2);
  color: var(--color-lavender-text);
}
.brand-sf .substreams-chip .chip-tags span {
  background: var(--mint-soft);
  border-color: rgb(92 228 207 / 0.2);
  color: var(--color-mint-text);
}
.brand-sf .chip-pins {
  background: repeating-linear-gradient(to bottom, rgb(153 169 255 / 0.45) 0 3px, transparent 3px 8px);
}
.brand-sf .substreams-chip .chip-pins {
  background: repeating-linear-gradient(to bottom, rgb(92 228 207 / 0.45) 0 3px, transparent 3px 8px);
}
@media (max-width: 760px) {
  .brand-sf .chip-pins {
    background: repeating-linear-gradient(to right, rgb(153 169 255 / 0.45) 0 3px, transparent 3px 8px);
  }
  .brand-sf .substreams-chip .chip-pins {
    background: repeating-linear-gradient(to right, rgb(92 228 207 / 0.45) 0 3px, transparent 3px 8px);
  }
  .brand-sf .flow::after {
    background: var(--color-accent-lavender);
    box-shadow: 0 0 15px var(--color-accent-lavender);
  }
}

/* Firehose block conveyor. */
.brand-sf .block-visual {
  box-shadow: inset 0 0 60px rgb(153 169 255 / 0.03);
}
.brand-sf .visual-top .mini-label,
.brand-sf .visual-bottom,
.brand-sf .block small {
  color: var(--color-text-muted);
}
.brand-sf .block {
  border-color: rgb(153 169 255 / 0.3);
  background: linear-gradient(120deg, rgb(153 169 255 / 0.1), var(--color-surface));
  box-shadow: 6px 6px 0 -1px var(--color-bg), 6px 6px 0 0 rgb(153 169 255 / 0.2);
}
.brand-sf .block b {
  color: var(--color-text);
}
.brand-sf .block i {
  background: rgb(153 169 255 / 0.3);
}
.brand-sf .block.current {
  border-color: var(--color-accent-lavender);
  background: linear-gradient(120deg, rgb(153 169 255 / 0.22), var(--color-surface));
  box-shadow: 6px 6px 0 -1px var(--color-bg), 6px 6px 0 0 rgb(153 169 255 / 0.3), var(--shadow-glow);
}
.brand-sf .block.current b {
  color: var(--color-lavender-text);
}
.brand-sf .block-axis > div {
  background: linear-gradient(90deg, var(--color-border), var(--lavender-line));
}
.brand-sf .block-axis > div::after {
  color: var(--color-lavender-text);
}
.brand-sf .block-data > div {
  background: var(--color-bg-raised);
}
.brand-sf .block-data i:nth-child(3) {
  background: rgb(153 169 255 / 0.3);
}