/* Breakthrough announcement design tokens + isolation reset.
 * Loaded before engine.css. The ONLY place raw style values live — components
 * reference these by name via ctx.token(). Seeded from style-2018wf.css brand. */

.bbann-root {
  /* color — primary CTA is brand orange (#f3871b) */
  --bb-color-primary: #f3871b;
  --bb-color-brand:   #f3871b;
  --bb-color-blue:    #2172be;
  --bb-color-ink:     #151924;   /* brand heading + body text — site h1-h5 color */
  --bb-color-gray:    #656a78;   /* secondary text */
  --bb-color-light:   #f6f5f3;
  --bb-color-white:   #ffffff;
  /* NB: blue #2172be is the site's section-header band color (white text on blue);
     #282060 (OM indigo) and #232a3b (nav chrome) are deliberately NOT here. */

  /* type — scale tuned to what the legacy popups actually use */
  --bb-font-heading: 'Oswald', 'Helvetica Neue', Arial, sans-serif;
  --bb-font-body:    'Lato', 'Helvetica Neue', Arial, sans-serif;
  --bb-size-h1:   42px;   /* hero heading (most common large size) */
  --bb-size-h2:   32px;
  --bb-size-h3:   24px;
  --bb-size-h4:   20px;   /* common subhead size */
  --bb-size-body: 17px;   /* most common body/list size */
  --bb-size-small:13px;

  /* spacing */
  --bb-space-none: 0;
  --bb-space-xs: 4px;
  --bb-space-sm: 8px;
  --bb-space-md: 16px;
  --bb-space-lg: 28px;
  --bb-space-xl: 44px;

  /* radius + shadow */
  --bb-radius-sm: 4px;
  --bb-radius-md: 10px;
  --bb-radius-lg: 18px;
  --bb-shadow-md: 0 8px 30px rgba(8, 15, 30, .25);
}

/* ── isolation reset ──────────────────────────────────────────────────────
 * Popups are appended to document.body, so the site's global element rules
 * (ul/ol indent, h1-h6 sizes, a colors, table, inherited body font/color) would
 * bleed into author content. Scope to .bbann-body descendants only (not the
 * .bbann-root chrome). 'revert' drops site author styles but keeps sensible UA
 * defaults (a div stays block); it does NOT touch custom properties, so the
 * tokens above survive. Component rules in engine.css load AFTER this and win
 * on cascade order. We re-apply the brand look deliberately via tokens. */
.bbann-body *,
.bbann-body *::before,
.bbann-body *::after {
  all: revert;
  box-sizing: border-box;
}
.bbann-body {
  font-family: var(--bb-font-body);
  color: var(--bb-color-ink);
  line-height: 1.5;
}