/*
 * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL
 * was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/.
 *
 * Custom properties of the docs UI. Started from src/css/vars.css of antora-ui-default at revision 0e38223a;
 * tier 3 keeps the upstream names, so part 1 of site.css reads them unchanged.
 *
 * Tier 1: palette. Tier 2: semantic roles. Tier 3: components.
 * Outside this file colors are written only as var(--…) (node tools/check-css.mjs).
 * The dark theme is the block at the end of this file (screen only). It sets the tier 2 colors and shadow, and
 * the tier 3 colors that must differ in the dark theme; node tools/check-css.mjs checks that it sets every
 * --color-* and --shadow-* token.
 */

:root {
  color-scheme: light;

  /* ---- Tier 1: palette ---- */

  /* brand book */
  --jmix-space: #17124b;
  --jmix-fiesta: #fc1264;
  --jmix-sun: #fdb42b;
  --jmix-sky: #25cde3;
  --jmix-grace: #22d685;

  /* accent violet: 700 is the current docs violet, 500 the jmix.io link color, the other steps are derived;
     950, 900 and 300 serve the dark theme */
  --jmix-violet-950: #2b2650;
  --jmix-violet-900: #3a3470;
  --jmix-violet-800: #261d7d;
  --jmix-violet-700: #342a98;
  --jmix-violet-500: #7b6dff;
  --jmix-violet-300: #a99bff;
  --jmix-violet-200: #d3cdf8;
  --jmix-violet-50: #f0eeff;

  --gray-900: #2a2c33;
  --gray-700: #3a3d46;
  --gray-600: #5c606b;
  --gray-500: #8a8f99;
  --gray-300: #cfd3da;
  --gray-200: #e4e6eb;
  --gray-100: #eff1f4;
  --gray-50: #f6f7f9;
  --white: #fff;
  --black: #000;

  /* "Ink": the dark theme's grays, with a slight violet cast; derived */
  --ink-950: #17171d;
  --ink-900: #1f1f27;
  --ink-850: #272730;
  --ink-800: #2e2e39;
  --ink-700: #3f3f4c;
  --ink-500: #6e6e80;
  --ink-400: #9e9eb1;
  --ink-300: #c6c6d2;
  --ink-200: #d8d8e2;
  --ink-50: #f2f1f9;

  /* ---- Tier 2: semantic roles ---- */

  --color-text: var(--gray-900);
  --color-heading: var(--jmix-space);
  --color-text-nav: var(--gray-700);
  --color-text-muted: var(--gray-600);
  --color-text-on-accent: var(--white);
  --color-link: var(--jmix-violet-700);
  --color-link-hover: var(--jmix-violet-800);
  --color-accent: var(--jmix-violet-700);
  --color-accent-tint: var(--jmix-violet-50);
  --color-accent-line: var(--jmix-violet-200);
  --color-focus: var(--jmix-violet-700);
  --color-surface: var(--white);
  --color-surface-subtle: var(--gray-50);
  --color-surface-hover: var(--gray-100);
  --color-line: var(--gray-200);
  --color-line-strong: var(--gray-300);
  --color-control-border: var(--gray-500);
  --color-overlay: color-mix(in srgb, var(--jmix-space) 30%, transparent);
  --shadow-menu: 0 10px 28px color-mix(in srgb, var(--jmix-space) 14%, transparent), 0 2px 6px color-mix(in srgb, var(--jmix-space) 8%, transparent);

  --radius-lg: 8px;
  --radius-md: 6px;
  --radius-sm: 4px;

  /* ---- Tier 3: components ---- */

  /* header */
  --header-background: var(--color-surface);
  --header-text: var(--color-heading);
  --header-logo-center: var(--jmix-space);

  /* code blocks and syntax colors, IntelliJ IDEA Light-like; comment and annotation darkened to 4.5:1 */
  --code-block-background: #f7f8fa;
  --code-block-text: #080808;
  --inline-code-text: #1f2128;
  --syntax-keyword: #0033b3;
  --syntax-string: #067d17;
  --syntax-number: #1750eb;
  --syntax-comment: #6f6f6f;
  --syntax-annotation: #7a6a0a;
  --syntax-function: #00627a;
  --syntax-field: #871094;
  --syntax-attribute: #174ad4;
  --syntax-property-key: #083080;
  /* XML and HTML tags: IntelliJ's light scheme draws them like keywords, its dark scheme in yellow */
  --syntax-tag: #0033b3;
  --syntax-added: #e6f4ea;
  --syntax-removed: #fce8e6;

  /* admonitions: label and icon, background, border, left edge */
  --note-color: #0a6874;
  --note-background: #effbfd;
  --note-border-color: #c9eff5;
  --note-accent: var(--jmix-sky);
  --tip-color: #0d7348;
  --tip-background: #effcf5;
  --tip-border-color: #c6f0dc;
  --tip-accent: var(--jmix-grace);
  --warning-color: #8a5300;
  --warning-background: #fff8e6;
  --warning-border-color: #fbe3ae;
  --warning-accent: var(--jmix-sun);
  --important-color: #b4104a;
  --important-background: #fff1f6;
  --important-border-color: #fbcadb;
  --important-accent: var(--jmix-fiesta);
  --caution-color: #4b3fb8;
  --caution-background: #f4f2ff;
  --caution-border-color: #dad5fb;
  --caution-accent: var(--jmix-violet-500);
  --addon-color: var(--jmix-space);
  --addon-background: #f4f2ff;
  --addon-border-color: #dad5fb;
  --addon-accent: var(--jmix-space);
  /* upstream names: text of the upstream label pill */
  --caution-on-color: var(--color-text-on-accent);
  --important-on-color: var(--color-text-on-accent);
  --note-on-color: var(--color-text-on-accent);
  --tip-on-color: var(--color-text-on-accent);
  --warning-on-color: var(--color-text-on-accent);

  /* event banner and content buttons */
  --banner-background: var(--color-accent-tint);
  --banner-border: var(--color-accent-line);
  --banner-text: var(--color-text);
  --banner-link: var(--color-link);
  --banner-close: var(--color-text-muted);
  --banner-marker: var(--jmix-fiesta);
  --live-demo-background: #fdcb6e;
  --live-demo-background-hover: #ffd588;
  --live-demo-text: #32346b;
  --vaadin-docs-background: #2486f9;
  --vaadin-docs-background-hover: #3890f8;
  --vaadin-docs-text: #fdfdfd;
  --mdn-docs-background: #575757;
  --mdn-docs-background-hover: #727272;
  --mdn-docs-text: #f8f8f9;
  --echarts-docs-background: #b03a5b;
  --echarts-docs-text: #fdfdfd;

  /* images: the plate of the light-background role, for diagrams drawn with dark lines on transparency;
     white in both themes, so it shows only on the dark one */
  --image-plate-background: var(--white);

  /* mask icons; data URIs because mask images from files are blocked on file:// pages */
  --icon-chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m9 6 6 6-6 6'/></svg>");
  --icon-home: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5'/><path d='M5 9.5V21h5v-6h4v6h5V9.5'/></svg>");
  --icon-edit: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20h4L19 9l-4-4L4 16v4z'/><path d='m13.5 6.5 4 4'/></svg>");
  --icon-search: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>");
  --icon-copy: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='12' height='12' rx='2'/><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/></svg>");
  --icon-note: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 11v5'/><path d='M12 7.5h.01'/></svg>");
  --icon-tip: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6'/><path d='M10 21h4'/><path d='M12 3a6 6 0 0 0-3.6 10.8c.7.6 1.1 1.3 1.1 2.2h5c0-.9.4-1.6 1.1-2.2A6 6 0 0 0 12 3z'/></svg>");
  --icon-warning: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.5 2.5 20h19L12 3.5z'/><path d='M12 10v4.5'/><path d='M12 17.5h.01'/></svg>");
  --icon-important: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v6'/><path d='M12 16.5h.01'/></svg>");
  --icon-caution: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8.5 3h7L21 8.5v7L15.5 21h-7L3 15.5v-7z'/><path d='M12 8v5'/><path d='M12 16h.01'/></svg>");
  --icon-addon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 3.5 7.5v9L12 21l8.5-4.5v-9L12 3z'/><path d='M3.5 7.5 12 12l8.5-4.5'/><path d='M12 12v9'/></svg>");
  --icon-unfold: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m8 8 4-4 4 4'/><path d='m8 16 4 4 4-4'/><path d='M4 12h16'/></svg>");
  --icon-fold: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m8 4 4 4 4-4'/><path d='m8 20 4-4 4 4'/><path d='M4 12h16'/></svg>");
  --icon-menu: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16'/><path d='M4 12h16'/><path d='M4 17h16'/></svg>");
  --icon-back: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 12H5'/><path d='m11 6-6 6 6 6'/></svg>");
  /* sun-moon: Lucide icon (https://lucide.dev/icons/sun-moon), ISC License.
     Copyright (c) 2026 Lucide Icons and Contributors
     Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby
     granted, provided that the above copyright notice and this permission notice appear in all copies. */
  --icon-sun-moon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2v2'/><path d='M14.837 16.385a6 6 0 1 1-7.223-7.222c.624-.147.97.66.715 1.248a4 4 0 0 0 5.26 5.259c.589-.255 1.396.09 1.248.715'/><path d='M16 12a4 4 0 0 0-4-4'/><path d='m19 5-1.256 1.256'/><path d='M20 12h2'/></svg>");
  --icon-sun: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2.5v2'/><path d='M12 19.5v2'/><path d='m5.3 5.3 1.4 1.4'/><path d='m17.3 17.3 1.4 1.4'/><path d='M2.5 12h2'/><path d='M19.5 12h2'/><path d='m5.3 18.7 1.4-1.4'/><path d='m17.3 6.7 1.4-1.4'/></svg>");
  --icon-moon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z'/></svg>");
  --icon-check: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12.5 4.5 4.5L19 7.5'/></svg>");
  --icon-thumb-up: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path fill-rule='evenodd' d='M7.70972 0.463679C7.78997 0.283115 7.96903 0.166748 8.16663 0.166748C8.96228 0.166748 9.72534 0.482819 10.2879 1.04543C10.8506 1.60804 11.1666 2.3711 11.1666 3.16675V6.00008H15.3807C15.6937 5.99698 16.0037 6.06174 16.2893 6.18993C16.5759 6.31854 16.831 6.50791 17.0371 6.74492C17.2432 6.98193 17.3953 7.26092 17.4829 7.56255C17.5705 7.86418 17.5914 8.18125 17.5443 8.49178L16.3943 15.9917C16.3943 15.9918 16.3943 15.9916 16.3943 15.9917C16.3159 16.5082 16.0534 16.9794 15.6554 17.3177C15.258 17.6555 14.7521 17.8386 14.2307 17.8334H2.33329C1.75866 17.8334 1.20756 17.6051 0.801228 17.1988C0.394899 16.7925 0.166626 16.2414 0.166626 15.6667V9.83341C0.166626 9.25878 0.394899 8.70768 0.801228 8.30135C1.20756 7.89502 1.75866 7.66675 2.33329 7.66675H4.50836L7.70972 0.463679ZM5.33329 8.27286L8.48055 1.19153C8.89468 1.25735 9.28058 1.45227 9.58084 1.75253C9.95591 2.12761 10.1666 2.63631 10.1666 3.16675V6.50008C10.1666 6.77622 10.3905 7.00008 10.6666 7.00008H15.3833L15.389 7.00005C15.5581 6.99813 15.7256 7.03301 15.8799 7.10226C16.0342 7.17151 16.1716 7.27348 16.2825 7.4011C16.3935 7.52872 16.4754 7.67895 16.5226 7.84136C16.5697 8.00371 16.581 8.17436 16.5557 8.3415C16.5556 8.34157 16.5557 8.34143 16.5557 8.3415L15.4057 15.841C15.3635 16.1192 15.2221 16.3736 15.0077 16.5558C14.7933 16.738 14.5203 16.8366 14.2389 16.8334L5.33329 16.8334V8.27286ZM4.33329 16.8334V8.66675H2.33329C2.02387 8.66675 1.72713 8.78966 1.50833 9.00846C1.28954 9.22725 1.16663 9.524 1.16663 9.83341V15.6667C1.16663 15.9762 1.28954 16.2729 1.50833 16.4917C1.72713 16.7105 2.02387 16.8334 2.33329 16.8334H4.33329Z'/></svg>");

  /* upstream: fonts */
  --rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */
  --body-font-size: 1.0625em; /* 17px */
  --body-font-size--desktop: 1.125em; /* 18px */
  --body-font-size--print: 0.9375em; /* 15px */
  --body-line-height: 1.15;
  --body-font-color: var(--color-text);
  --body-font-family: "Roboto", system-ui, sans-serif;
  --body-font-weight-bold: 600;
  --monospace-font-family: "JetBrains Mono", ui-monospace, monospace;
  --monospace-font-weight-bold: 600;
  /* upstream: base */
  --body-background: var(--color-surface);
  --panel-background: var(--color-surface-subtle);
  --panel-border-color: var(--color-line);
  --scrollbar-track-color: var(--color-surface-subtle);
  --scrollbar-thumb-color: var(--color-line-strong);
  --scrollbar_hover-thumb-color: var(--color-control-border);
  /* upstream: navbar */
  --navbar-background: var(--header-background);
  --navbar-font-color: var(--header-text);
  --navbar_hover-background: var(--color-surface-hover);
  --navbar-button-background: var(--color-surface);
  --navbar-button-border-color: var(--color-line);
  --navbar-button-font-color: var(--color-text);
  --navbar-menu-border-color: var(--color-line);
  --navbar-menu-background: var(--color-surface);
  --navbar-menu-font-color: var(--color-text);
  --navbar-menu_hover-background: var(--color-surface-hover);
  /* upstream: nav */
  --nav-background: var(--color-surface);
  --nav-border-color: var(--color-line);
  --nav-line-height: 1.4;
  --nav-heading-font-color: var(--color-heading);
  --nav-muted-color: var(--color-text-muted);
  --nav-panel-divider-color: var(--color-line);
  --nav-secondary-background: var(--color-surface-subtle);
  /* upstream: toolbar */
  --toolbar-background: var(--color-surface);
  --toolbar-border-color: var(--color-line);
  --toolbar-font-color: var(--color-text-muted);
  --toolbar-muted-color: var(--color-text-muted);
  --page-version-menu-background: var(--color-surface-subtle);
  --page-version-missing-font-color: var(--color-text-muted);
  /* upstream: doc */
  --doc-font-color: var(--color-text);
  --doc-font-size: inherit;
  --doc-font-size--desktop: calc(17 / var(--rem-base) * 1rem);
  --doc-line-height: 1.65;
  --doc-margin: 0 auto;
  --doc-margin--desktop: 0 2rem;
  --heading-font-color: var(--color-heading);
  --heading-font-weight: 650;
  --alt-heading-font-weight: 650;
  --section-divider-color: var(--color-line);
  --link-font-color: var(--color-link);
  --link_hover-font-color: var(--color-link-hover);
  --link_unresolved-font-color: var(--important-color);
  --abstract-background: var(--color-surface-subtle);
  --abstract-font-color: var(--color-text);
  --abstract-border-color: var(--color-line);
  --admonition-background: var(--color-surface-subtle);
  --admonition-label-font-weight: 650;
  --caption-font-color: var(--color-text-muted);
  --caption-font-style: normal;
  --caption-font-weight: 500;
  --code-background: var(--color-surface-subtle);
  --code-font-color: var(--inline-code-text);
  --example-background: var(--color-surface);
  --example-border-color: var(--color-line);
  --kbd-background: var(--color-surface);
  --kbd-border-color: var(--color-line-strong);
  --pre-background: var(--code-block-background);
  --pre-border-color: var(--color-line);
  --pre-annotation-font-color: var(--color-text-muted);
  --quote-background: var(--color-surface-subtle);
  --quote-border-color: var(--color-line-strong);
  --quote-font-color: var(--color-text-muted);
  --quote-attribution-font-color: var(--color-text-muted);
  --sidebar-background: var(--color-surface-subtle);
  --table-border-color: var(--color-line);
  --table-stripe-background: var(--color-surface-subtle);
  --table-footer-background: linear-gradient(to bottom, var(--color-surface-subtle) 0%, var(--color-surface) 100%);
  /* upstream: toc */
  --toc-font-color: var(--color-text-muted);
  --toc-heading-font-color: var(--color-heading);
  --toc-border-color: var(--color-line);
  --toc-line-height: 1.35;
  /* upstream: footer */
  --footer-line-height: var(--doc-line-height);
  --footer-background: var(--color-surface);
  --footer-font-color: var(--color-text-muted);
  --footer-link-font-color: var(--color-text-muted);
  /* upstream: dimensions and positioning; the toolbar height and the wide TOC width differ from upstream */
  --navbar-height: calc(63 / var(--rem-base) * 1rem);
  --toolbar-height: calc(49.5 / var(--rem-base) * 1rem);
  --drawer-height: var(--toolbar-height);
  --body-top: var(--navbar-height);
  --body-min-height: calc(100vh - var(--body-top));
  --nav-height: calc(var(--body-min-height) - var(--toolbar-height));
  --nav-height--desktop: var(--body-min-height);
  --nav-panel-menu-height: calc(100% - var(--drawer-height));
  --nav-panel-explore-height: calc(50% + var(--drawer-height));
  --nav-width: calc(270 / var(--rem-base) * 1rem);
  --toc-top: calc(var(--body-top) + var(--toolbar-height));
  --toc-height: calc(100vh - var(--toc-top) - 2.5rem);
  --toc-width: calc(162 / var(--rem-base) * 1rem);
  --toc-width--widescreen: calc(252 / var(--rem-base) * 1rem);
  --doc-max-width: calc(720 / var(--rem-base) * 1rem);
  --doc-max-width--desktop: calc(828 / var(--rem-base) * 1rem);
  /* upstream: stacking */
  --z-index-nav: 1;
  --z-index-toolbar: 2;
  --z-index-page-version-menu: 3;
  --z-index-navbar: 4;
}

/* ---- Dark theme ---- */
/* data-theme on <html> comes from the inline script in partials/head-styles.hbs and from js/theme-menu.js.
   Screen only, so print keeps the light values. Text colors reach 4.5:1 and the focus ring 3:1 on every surface
   (a comment inside a diff line is the known exception). tools/ui-audit.mjs checks a sample of pairs in both
   themes. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;

    /* tier 2 */
    --color-text: var(--ink-200);
    --color-heading: var(--ink-50);
    --color-text-nav: var(--ink-300);
    --color-text-muted: var(--ink-400);
    --color-text-on-accent: var(--jmix-space);
    --color-link: var(--jmix-violet-300);
    --color-link-hover: var(--jmix-violet-200);
    --color-accent: var(--jmix-violet-300);
    --color-accent-tint: var(--jmix-violet-950);
    --color-accent-line: var(--jmix-violet-900);
    --color-focus: var(--jmix-violet-300);
    --color-surface: var(--ink-950);
    --color-surface-subtle: var(--ink-900);
    --color-surface-hover: var(--ink-850);
    --color-line: var(--ink-800);
    --color-line-strong: var(--ink-700);
    --color-control-border: var(--ink-500);
    --color-overlay: color-mix(in srgb, var(--black) 55%, transparent);
    --shadow-menu: 0 10px 28px color-mix(in srgb, var(--black) 45%, transparent), 0 2px 6px color-mix(in srgb, var(--black) 30%, transparent);

    /* tier 3: header */
    --header-logo-center: var(--ink-50);

    /* tier 3: code, IntelliJ IDEA Dark (New UI); the comment is lightened from #7a7e85 (4.0:1) to 4.75:1 */
    --code-block-background: #1e1f22;
    --code-block-text: #bcbec4;
    --inline-code-text: #e2e2ea;
    --syntax-keyword: #cf8e6d;
    --syntax-string: #6aab73;
    --syntax-number: #2aacb8;
    --syntax-comment: #868a91;
    --syntax-annotation: #b3ae60;
    --syntax-function: #56a8f5;
    --syntax-field: #c77dbb;
    --syntax-attribute: #bababa;
    --syntax-property-key: #cf8e6d;
    --syntax-tag: #d5b778;
    --syntax-added: #294436;
    --syntax-removed: #4a2a2e;

    /* tier 3: admonitions; backgrounds are the edge hue at 9% over the surface, borders at 24%; the brand edges stay */
    --note-color: #6bdcea;
    --note-background: #18272f;
    --note-border-color: #1a434d;
    --tip-color: #5ee0a5;
    --tip-background: #182826;
    --tip-border-color: #1a4536;
    --warning-color: #f9c45e;
    --warning-background: #2c251e;
    --warning-border-color: #4e3d20;
    --important-color: #ff86ab;
    --important-background: #2c1723;
    --important-border-color: #4e162e;
    --caution-color: #b9afff;
    --caution-background: #201f31;
    --caution-border-color: #2f2c53;
    --addon-color: #ddd8ff;
    --addon-background: #201f31;
    --addon-border-color: #2f2c53;
    /* Space would vanish on the dark surface */
    --addon-accent: var(--jmix-violet-300);
  }
}