:root {
  /* Fuse supplemental */
  --font-family-source-code-pro: "DM Mono", monospace;

  /* general */
  --qp-color-accent: var(--spark-color-fill-accent);
  --qp-color-background: var(--spark-color-background-inverse);
  --qp-color-border-darker: var(--spark-color-border-strongest);
  --qp-font-family-body: var(--spark-font-family-body);
  --qp-font-family-code: var(--font-family-source-code-pro);
  --qp-font-family-heading: var(--spark-font-family-heading-1);
  --qp-icon-arrow-up-right-hover: url('data:image/svg+xml;utf8,<svg viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m22.792 10.634-13.73 13.73a1.676 1.676 0 0 1-2.37-2.37l13.73-13.73H7.877a1.676 1.676 0 0 1 0-3.352h16.591c.926 0 1.676.75 1.676 1.676V23.18a1.676 1.676 0 1 1-3.352 0V10.634Z" fill="%23000"></path></svg>');
  --qp-icon-arrow-up-right: url('data:image/svg+xml;utf8,<svg viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m22.792 10.634-13.73 13.73a1.676 1.676 0 0 1-2.37-2.37l13.73-13.73H7.877a1.676 1.676 0 0 1 0-3.352h16.591c.926 0 1.676.75 1.676 1.676V23.18a1.676 1.676 0 1 1-3.352 0V10.634Z" fill="%23000"></path></svg>');
  --qp-icon-chevron-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%23c098ef"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>');
  --qp-icon-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /></svg>');
  --qp-icon-chevron-right-neutral: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%23c098ef"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /></svg>');
  --qp-icon-chevron-right-active: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%23c098ef"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /></svg>');

  --qp-icon-chevron-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%23c098ef"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>');
  --qp-icon-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /></svg>');
  --qp-icon-chevron-right-neutral: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%23c098ef"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /></svg>');
  --qp-icon-chevron-right-active: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%23c098ef"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /></svg>');

  /* Breeze overrides */
  --db-color-accent: var(--qp-color-accent);
  --db-color-background: var(--qp-color-background);
  --db-color-border-darker: var(--qp-color-border-darker);
  --db-color-focus-visible: var(--spark-color-decoration-line-link-active);
  --db-font-family-body: var(--qp-font-family-body);
  --db-font-family-heading: var(--qp-font-family-heading);
  --db-icon-arrow-up-right-hover: var(--qp-icon-arrow-up-right-hover);
  --db-icon-arrow-up-right: var(--qp-icon-arrow-up-right);
  --db-font-family-code: var(--qp-font-family-code);

  --db-icon-chevron-down: var(--qp-icon-chevron-down);
  --db-icon-chevron-right: var(--qp-icon-chevron-right);
  --db-icon-chevron-right-neutral: var(--qp-icon-chevron-right-neutral);
  --db-icon-chevron-right-active: var(--qp-icon-chevron-right-active);
}

/* ---------------------------    THEME TOKENS    +++++++++++++++++++++++++++ */
:root {
  --qp-content-border-radius: var(--spark-_size-radius-6);
  --qp-content-code-block-color-background: var(
    --qp-content-color-background-accent
  );
  --qp-content-code-color-background: var(
    --qp-content-color-background-accent-lighter
  );
  --qp-content-code-color-border: var(--qp-content-color-border);
  --qp-content-code-font-family: var(--qp-font-family-code);
  --qp-content-color-background-accent-lighter: var(--spark-_color-grey-10);
  --qp-content-color-background-accent: var(
    --spark-color-background-callout-cool
  );
  --qp-content-color-background: var(--spark-_color-white);
  --qp-content-color-border-darker: var(--spark-_color-grey-30);
  --qp-content-color-border-darkest: var(--qp-color-border-darker);
  --qp-content-color-border: var(--spark-color-border);
  --qp-content-color-fill: var(--spark-color-fill-weak);
  --qp-content-color-shadow: rgba(0, 0, 0, 0.05);
  --qp-content-color-text-bullet: var(--qp-color-accent);
  --qp-content-color-text-link-hover: var(--spark-color-text-link-hover);
  --qp-content-color-text-link: var(--spark-color-text-link);
  --qp-content-color-text-weak: var(--spark-color-text-weaker);
  --qp-content-color-text: var(--spark-color-text);
  --qp-content-h3-font-family: var(--qp-font-family-heading);
  --qp-content-h3-font-size: 1.4rem;
  --qp-content-h3-font-weight: var(--spark-font-weight-heading-3);
  --qp-content-h4-font-family: var(--spark-font-family-heading-4);
  --qp-content-h4-font-size: 1rem;
  --qp-content-h4-font-weight: var(--spark-font-weight-heading-4);
  --qp-content-header-color-background: var(
    --qp-content-color-background-accent
  );
  --qp-content-header-color-border: var(--qp-content-color-border);
  --qp-content-heading-color-text: var(--qp-content-color-text);
  --qp-content-heading-font-weight: var(--spark-font-weight-heading-1);
  --qp-content-heading-letter-spacing: var(--spark-_font-letter-spacing-normal);
  --qp-content-headline-color-text: var(--qp-content-color-text-weak);
  --qp-content-headline-font-size: 1.3rem;
  --qp-content-line-height: var(--spark-font-line-height-body);
  --qp-content-link-color-background-hover: transparent;
  --qp-content-link-color-text-decoration: var(--qp-color-accent);
  --qp-content-link-color-text-hover: var(--qp-content-color-text-link-hover);
  --qp-content-link-color-text: var(--qp-content-color-text-link);
  --qp-content-link-font-weight: var(--spark-font-weight-body);
  --qp-content-link-text-decoration-hover: underline 3px var(--qp-color-accent);
  --qp-content-link-text-decoration-thickness: 1px;
  --qp-content-link-text-decoration: underline;
  --qp-content-link-transition: all 0.15s ease-in-out;
  --qp-content-list-bullet-color-fill: var(--qp-content-color-text-bullet);
  --qp-content-max-character-width: 63ch;
  --qp-content-padding-horizontal: 2.0625rem;
  --qp-content-section-heading-background-position-y: 0.7rem;
  --qp-content-section-heading-font-family: var(--qp-font-family-heading);
  --qp-content-section-heading-font-size: 2.1rem;
  --qp-content-section-heading-font-weight: var(--spark-font-weight-heading-2);
  --qp-content-title-font-weight: var(--spark-font-weight-heading-1);
  --qp-content-title-line-height: normal;

  /* Breeze overrides */
  --db-content-border-radius: var(--qp-content-border-radius);
  --db-content-code-block-color-background: var(
    --qp-content-code-block-color-background
  );
  --db-content-code-color-background: var(--qp-content-code-color-background);
  --db-content-code-color-border: var(--qp-content-code-color-border);
  --db-content-code-font-family: var(--qp-content-code-font-family);
  --db-content-color-background-accent-lighter: var(
    --qp-content-color-background-accent-lighter
  );
  --db-content-color-background-accent: var(
    --qp-content-color-background-accent
  );
  --db-content-color-background: var(--qp-content-color-background);
  --db-content-color-border-darker: var(--qp-content-color-border-darker);
  --db-content-color-border-darkest: var(--qp-content-color-border-darkest);
  --db-content-color-border: var(--qp-content-color-border);
  --db-content-color-fill: var(--qp-content-color-fill);
  --db-content-color-shadow: var(--qp-content-color-shadow);
  --db-content-color-text-bullet: var(--qp-content-color-text-bullet);
  --db-content-color-text-link-hover: var(--qp-content-color-text-link-hover);
  --db-content-color-text-link-secondary: var(--qp-content-color-text-link);
  --db-content-color-text-link: var(--qp-content-color-text-link);
  --db-content-color-text-weak: var(--qp-content-color-text-weak);
  --db-content-color-text: var(--qp-content-color-text);
  --db-content-h3-font-family: var(--qp-content-h3-font-family);
  --db-content-h3-font-size: var(--qp-content-h3-font-size);
  --db-content-h3-font-weight: var(--qp-content-h3-font-weight);
  --db-content-h4-font-family: var(--qp-content-h4-font-family);
  --db-content-h4-font-size: var(--qp-content-h4-font-size);
  --db-content-h4-font-weight: var(--qp-content-h4-font-weight);
  --db-content-header-color-background: var(
    --qp-content-header-color-background
  );
  --db-content-header-color-border: var(--qp-content-header-color-border);
  --db-content-heading-color-text-hover: var(--qp-content-heading-color-text);
  --db-content-heading-color-text: var(--qp-content-heading-color-text);
  --db-content-heading-font-weight: var(--qp-content-heading-font-weight);
  --db-content-heading-letter-spacing: var(--qp-content-heading-letter-spacing);
  --db-content-headline-color-text: var(--qp-content-headline-color-text);
  --db-content-headline-font-size: var(--qp-content-headline-font-size);
  --db-content-headline-letter-spacing: var(
    --qp-content-heading-letter-spacing
  );
  --db-content-line-height: var(--qp-content-line-height);
  --db-content-link-color-background-hover: var(
    --qp-content-link-color-background-hover
  );
  --db-content-link-color-text-decoration: var(
    --qp-content-link-color-text-decoration
  );
  --db-content-link-color-text-hover: var(--qp-content-link-color-text-hover);
  --db-content-link-color-text: var(--qp-content-link-color-text);
  --db-content-link-font-weight: var(--qp-content-link-font-weight);
  --db-content-link-text-decoration-hover: var(
    --qp-content-link-text-decoration-hover
  );
  --db-content-link-text-decoration-thickness: var(
    --qp-content-link-text-decoration-thickness
  );
  --db-content-link-text-decoration: var(--qp-content-link-text-decoration);
  --db-content-link-transition: var(--qp-content-link-transition);
  --db-content-list-bullet-color-fill: var(--qp-content-list-bullet-color-fill);
  --db-content-max-character-width: var(--qp-content-max-character-width);
  --db-content-padding-horizontal: var(--qp-content-padding-horizontal);
  --db-content-section-heading-background-position-y: var(
    --qp-content-section-heading-background-position-y
  );
  --db-content-section-heading-font-family: var(
    --qp-content-section-heading-font-family
  );
  --db-content-section-heading-font-size: var(
    --qp-content-section-heading-font-size
  );
  --db-content-section-heading-font-weight: var(
    --qp-content-section-heading-font-weight
  );
  --db-content-section-heading-icon-hover: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%23c098ef"><path fill-rule="evenodd" d="M9.243 3.03a1 1 0 01.727 1.213L9.53 6h2.94l.56-2.243a1 1 0 111.94.486L14.53 6H17a1 1 0 110 2h-2.97l-1 4H15a1 1 0 110 2h-2.47l-.56 2.242a1 1 0 11-1.94-.485L10.47 14H7.53l-.56 2.242a1 1 0 11-1.94-.485L5.47 14H3a1 1 0 110-2h2.97l1-4H5a1 1 0 110-2h2.47l.56-2.243a1 1 0 011.213-.727zM9.03 8l-1 4h2.938l1-4H9.031z" clip-rule="evenodd" /></svg>');
  --db-content-title-font-weight: var(--qp-content-title-font-weight);
  --db-content-title-line-height: var(--qp-content-title-line-height);
}

@media screen and (min-width: 48rem) {
  :root {
    --qp-content-padding-horizontal: 4.0625rem;
  }
}

/* layout */
:root {
  /* sidebar */
  --qp-sidebar-color-background-accent: var(--spark-_color-grey-70);
  --qp-sidebar-logo-height: 29px;
  --qp-sidebar-logo-width: 29px;
  --qp-sidebar-nav-line-height: 2;
  --qp-sidebar-nav-link-color-text-active: var(--spark-_color-purple-40);
  --qp-sidebar-nav-link-color-text-hover: var(--spark-_color-purple-40);

  --db-sidebar-color-background-accent: var(
    --qp-sidebar-color-background-accent
  );
  --db-sidebar-logo-height: var(--qp-sidebar-logo-height);
  --db-sidebar-logo-width: var(--qp-sidebar-logo-width);
  --db-sidebar-nav-line-height: var(--qp-sidebar-nav-line-height);
  --db-sidebar-nav-link-color-text-active: var(
    --qp-sidebar-nav-link-color-text-active
  );
  --db-sidebar-nav-link-section-color-border-active: var(
    --qp-sidebar-nav-link-color-text-active
  );
  --db-sidebar-nav-link-color-text-hover: var(
    --qp-sidebar-nav-link-color-text-hover
  );
  --db-sidebar-toggle-color-fill-hover: var(--qp-color-accent);
  --db-sidebar-toggle-color-fill-hover-open: var(
    --qp-sidebar-nav-link-color-text-hover
  );

  /* sidebar search */
  --qp-search-color-background: var(--qp-sidebar-color-background-accent);
  --qp-search-color-border-focus: var(--qp-color-accent);
  --qp-search-results-color-border: var(--qp-color-border-darker);

  --db-search-color-background: var(--qp-search-color-background);
  --db-search-color-border-focus: var(--qp-search-color-border-focus);
  --db-search-results-color-border: var(--qp-search-results-color-border);
}

/* ------------------------    copy-code plugin    ++++++++++++++++++++++++++ */
:root {
  --qp-copy-code-color-background-success: var(
    --spark-color-fill-feedback-success
  );
  --qp-copy-code-color-background: var(--spark-color-background);
  --qp-copy-code-color-border-hover: var(--qp-content-color-border-darkest);
  --qp-copy-code-color-border: var(--qp-content-color-border);
  --qp-copy-code-color-fill-hover: var(--qp-content-color-text);
  --qp-copy-code-color-fill: var(--qp-content-color-text-weak);
  --qp-copy-code-color-fill-success: var(--spark-_color-grey-10);
  --qp-copy-code-color-border-success: var(--spark-color-fill-feedback-success);
  --qp-copy-code-border-radius: 4px;
}

/* ---------------------    github-edit-link plugin    ++++++++++++++++++++++ */
:root {
  --qp-gh-link-color-text-hover: var(--qp-content-color-text);
  --qp-gh-link-color-text: var(--qp-content-color-text-weak);
  --qp-gh-link-font-family: var(--qp-font-family-body);
}

/* ------------------------    page-cards plugin    +++++++++++++++++++++++++ */
:root {
  --qp-page-card-title-color-text: var(--qp-content-color-text);

  /* from web-component-viewer plugin *
   * -------------------------------- */
  --qp-page-card-body-color-text: var(
    --qp-component-docs-card-description-color-text
  );
  --qp-page-card-box-shadow-hover: var(--qp-component-docs-card-shadow-hover);
  --qp-page-card-color-border-hover: var(
    --qp-component-docs-card-color-border-hover
  );
  --qp-page-card-color-border: var(--qp-component-docs-card-color-border);
  --qp-page-card-title-font-family: var(
    --qp-component-docs-card-header-font-family
  );
  --qp-page-card-title-font-weight: var(
    --qp-component-docs-card-header-font-weight
  );
}

/* ------------------------    site-title plugin    +++++++++++++++++++++++++ */
:root {
  --qp-sidebar-title-line-height-secondary: 1.6;
}

/* --------------------    web-component-docs plugin    +++++++++++++++++++++ */
:root {
  --qp-component-docs-card-border-radius: var(--spark-size-radius-card);
  --qp-component-docs-card-color-background: var(
    --qp-content-color-background-accent
  );
  --qp-component-docs-card-color-border-hover: var(--qp-color-accent);
  --qp-component-docs-card-color-border: var(--qp-content-color-border);
  --qp-component-docs-card-description-color-text: var(
    --qp-content-color-text-weak
  );
  --qp-component-docs-card-header-font-family: var(--qp-font-family-heading);
  --qp-component-docs-card-header-font-weight: var(
    --qp-content-heading-font-weight
  );
  --qp-component-docs-card-shadow-hover: 0 0 0 1px var(--qp-color-accent);
  --qp-component-docs-card-shadow: 0 1px 0 var(--qp-content-color-shadow);
  --qp-component-docs-table-cell-color-border: var(--qp-content-color-border);
  --qp-component-docs-table-color-border: var(--qp-content-color-border);
  --qp-component-docs-table-description-color-text: var(
    --qp-content-color-text
  );
  --qp-component-docs-table-header-color-background: var(
    --qp-content-color-background-accent
  );
  --qp-component-docs-table-header-color-border: var(
    --qp-content-color-border-darker
  );
  --qp-component-docs-table-header-color-text: var(
    --qp-content-color-text-weak
  );
}

/* -------------------    web-component-viewer plugin    ----------------++++ */
:root {
  --qp-component-viewer-action-color-text-hover: var(--qp-content-color-text);
  --qp-component-viewer-action-color-text: var(--qp-content-color-text-link);
  --qp-component-viewer-color-border: var(--qp-content-color-border);
  --qp-component-viewer-controls-code-color-background: var(
    --qp-content-color-background-accent
  );
  --qp-component-viewer-controls-color-background: var(
    --qp-content-color-background-accent-lighter
  );
  --qp-component-viewer-controls-color-border: var(--qp-content-color-border);
  --qp-component-viewer-controls-input-color-accent: var(--qp-color-accent);
  --qp-component-viewer-controls-input-color-border-hover: var(
    --qp-content-color-border-darker
  );
  --qp-component-viewer-controls-input-color-border: var(
    --qp-content-color-border
  );
  --qp-component-viewer-controls-input-color-text-placeholder: var(
    --qp-content-color-text-weak
  );
  --qp-component-viewer-controls-input-color-text: var(--qp-content-color-text);
  --qp-component-viewer-controls-input-font-family: var(--qp-font-family-body);
  --qp-component-viewer-controls-input-shadow-focus: 0 0 5px
    var(--qp-color-accent);
  --qp-component-viewer-resizer-color-background-hover: var(
    --qp-content-color-background-accent
  );
  --qp-component-viewer-resizer-color-background: var(
    --qp-content-color-background-accent-lighter
  );
  --qp-component-viewer-resizer-color-border-hover: var(
    --qp-content-color-border-darker
  );
  --qp-component-viewer-resizer-color-border: var(--qp-content-color-border);
  --qp-component-viewer-resizer-color-fill: var(--qp-content-color-fill);
}

/* -----------------------    preview-tools plugin    +++++++++++++++++++++++ */
/* --------------------    custom-replacements plugin    ++++++++++++++++++++ */
/* ----------------------    navbar-collapse plugin    ++++++++++++++++++++++ */
/* ------------------------    pagination plugin    +++++++++++++++++++++++++ */
/* --------------------------    search plugin    +++++++++++++++++++++++++++ */
/* ----------------------    theme-switcher plugin    +++++++++++++++++++++++ */
/* -----------------------    headers-cards plugin    +++++++++++++++++++++++ */
/* N/A */

/* -----------------------    doc-badge component    ++++++++++++++++++++++++ */
:root {
  --qp-doc-badge-info-dark: var(--qp-content-color-background-accent);
  --qp-doc-badge-info-light: var(--qp-content-color-text);
}

/* ----------------------    doc-contrast component    ++++++++++++++++++++++ */
:root {
  --qp-doc-contrast-border-color: var(--qp-content-color-border);
  --qp-doc-contrast-color: var(--spark-color-text-weak);
  --qp-doc-contrast-spacing: var(--spark-spacing-1);
}

/* -------------------    doc-directive-list component    +++++++++++++++++++ */
:root {
  --qp-doc-directive-list-font-size: var(--qp-content-font-size);
}

/* ---------------------    doc-directive component    ++++++++++++++++++++++ */
:root {
  --qp-doc-directive-line-height: var(--qp-content-line-height);
  --qp-doc-directive-max-width-ch: var(
    --qp-content-max-character-width
  ); /* 63ch */
  --qp-doc-directive-max-width: var(--qp-content-max-width);
}

/* --------------------    doc-icon-library component    ++++++++++++++++++++ */
:root {
  --qp-doc-icon-library-border-color: var(--spark-color-border);
  --qp-doc-icon-library-copy-border-color-hover: var(
    --spark-color-border-hover
  );
  --qp-doc-icon-library-copy-border-color: var(
    --qp-content-color-border-darker
  );
  --qp-doc-icon-library-copy-border-radius: var(--spark-size-radius-label);
  --qp-doc-icon-library-copy-color-hover: var(
    --spark-color-background-action-icon-hover
  );
  --qp-doc-icon-library-copy-color: var(--spark-color-text-weaker);
}

/* -------------------    doc-layout-example component    +++++++++++++++++++ */
:root {
  --qp-doc-layout-example-border: var(--qp-content-color-border);
  --qp-doc-layout-example-line-height: var(--qp-content-line-height);
  --qp-doc-layout-example-padding: var(--spark-spacing-1);
  --qp-doc-layout-example-preview-border: var(--qp-color-border-darker);
  --qp-doc-layout-example-preview-margin: var(--spark-spacing-2);
}

/* ------------------------    doc-note component    ++++++++++++++++++++++++ */
:root {
  --qp-doc-note-background: var(--qp-content-color-background-accent);
  --qp-doc-note-line-height: var(--qp-content-line-height);
}

/* ----------------------    doc-subtitle component    ++++++++++++++++++++++ */
:root {
  --qp-doc-subtitle-color: rgba(51, 51, 51, 0.75);
  --qp-doc-subtitle-font-weight: var(--qp-font-weight-normal);
  --qp-doc-subtitle-line-height: 1.4;
  --qp-doc-subtitle-max-width: var(--qp-content-max-width);
}

/* -----------------------    doc-tokens component    +++++++++++++++++++++++ */
:root {
  --qp-doc-tokens-border-color: var(--qp-content-color-border);
  --qp-doc-tokens-code-font-family: var(--qp-content-code-font-family);
  --qp-doc-tokens-deprecated-background-color: #cc110010;
  --qp-doc-tokens-description-color: var(--spark-color-text-weak);
  --qp-doc-tokens-description-deprecated-badge-color: var(
    --spark-color-text-feedback-error
  );
  --qp-doc-tokens-description-deprecated-color: var(--qp-content-color-text);
  --qp-doc-tokens-font-size: var(--spark-font-size-body);
  --qp-doc-tokens-heading-font-family: var(
    --qp-content-section-heading-font-family
  );
  --qp-doc-tokens-heading-font-size: var(--spark-font-size-heading-2-md);
  --qp-doc-tokens-heading-font-weight: var(--qp-content-heading-font-weight);
  --qp-doc-tokens-line-height: var(--qp-content-line-height);
  --qp-doc-tokens-name-background-color: var(
    --qp-content-code-block-color-background
  );
  --qp-doc-tokens-name-before-color: var(--spark-_color-grey-50);
  --qp-doc-tokens-name-font-family: var(--qp-content-code-font-family);
  --qp-doc-tokens-preview-background-color: var(--qp-content-color-fill);
  --qp-doc-tokens-preview-color-background-color-inverse: var(
    --qp-color-background
  );
  --qp-doc-tokens-table-color: var(--qp-content-color-text);
  --qp-doc-tokens-table-head-background-color: var(
    --qp-content-color-background-accent
  );
  --qp-doc-tokens-table-head-border-color: var(--qp-content-color-border);
  --qp-doc-tokens-table-head-color: var(--spark-color-text-weak);
}

/* -----------------    doc-transition-legend component    ++++++++++++++++++ */
:root {
  --qp-doc-transition-legend-button-background-color-hover: var(
    --spark-color-background-selected
  );
  --qp-doc-transition-legend-button-color-hover: var(--spark-color-text-action);
  --qp-doc-transition-legend-tooltip-background-color: var(
    --qp-content-color-text
  );
}

/* -------------------    doc-variant-table component    ++++++++++++++++++++ */
:root {
  --qp-doc-variant-table-font-size: var(--qp-content-font-size);
  --qp-doc-variant-table-header-color: var(--spark-color-text-weaker);
  --qp-doc-variant-table-max-width: var(--qp-content-max-width);
}

/* ----------------------    doc-baseline component    ++++++++++++++++++++++ */
/* ---------------------    doc-changelog component    ++++++++++++++++++++++ */
/* -----------------------    doc-swatch component    +++++++++++++++++++++++ */
/* -------------------    doc-token-display component    ++++++++++++++++++++ */
/* --------------------    doc-token-table component    +++++++++++++++++++++ */
/* ------------------    doc-transition-graph component    ++++++++++++++++++ */
/* ----------------------    doc-variant component    +++++++++++++++++++++++ */
/* ----------------------    doc-warning component    +++++++++++++++++++++++ */
/* N/A */