/** Blue-Pro — brag layout tokens when cross-applied on brag. */
html:not([data-pf-theme]),
html[data-pf-theme='blue-pro'] {
  --nav-width: 280px;
  --nav-width-max: 340px;
  --dual-context-strip-block-height: 44px;
  --sdlc-timeline-bar-collapsed-outer-height: 38px;
  --presentation-footer-reserved-height: var(--brag-bottom-bar-height);
  --timeline-phase-separator-flex: 1 1 12px;
  --timeline-phase-separator-min-width: 10px;
  --timeline-phase-separator-max-width: 28px;
  --timeline-phase-separator-height: 2px;
  --timeline-phase-separator-color: var(--line);
}

html[data-pf-theme='blue-pro'] .topbar,
html:not([data-pf-theme]) .topbar,
html[data-pf-theme='blue-pro'] .pf-site-nav,
html:not([data-pf-theme]) .pf-site-nav {
  background: var(--color-chrome);
  color: var(--color-chrome-text);
  border-bottom-color: var(--color-chrome-border);
}

html[data-pf-theme='blue-pro'] .sidebar,
html[data-pf-theme='blue-pro'] .slide,
html:not([data-pf-theme]) .sidebar,
html:not([data-pf-theme]) .slide {
  background: var(--color-surface);
}

html[data-pf-theme='blue-pro'] .slide.macro-slide,
html:not([data-pf-theme]) .slide.macro-slide {
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
}