/* ::backdrop inherits nothing before Safari 17.4, so a dialog's backdrop
   takes the tokens from here as well (blocks/dialog.css draws it with them). */
:root,
::backdrop {
    color-scheme: light;
    --color-canvas: #fff;
    --color-text: #2c3034;
    --color-text-secondary: #575f63;
    --color-heading: #3f3f3f;
    --color-selection-text: white;
    --color-selection-background: #009aff;
    --color-selection-background-hover: #33aeff;
    /* Header */
    --color-header-background: #050505;
    --color-header-text: white;
    /* The header's hover step (a navigation tab's), and the edge of the
       list hung from it; lighter than the navigation bar under the list. */
    --color-header-raised: var(--color-nav-surface);
    /* Toolbar */
    --color-toolbar: #f6f6f6;
    --color-toolbar-rgb: 246, 246, 246;
    --color-toolbar-hover: #eee;
    --color-toolbar-border: silver;
    --color-toolbar-menu-heading: gray;
    /* Layers (RULES §10.10): a menu hung from a bar lifts off the page; a
       list opened from a control can sit over that menu, so it lifts
       further. A list row under the pointer or keyboard takes one step
       in tone, as the navigation's menus do. */
    --shadow-menu: 0 8px 24px rgb(0 0 0 / 18%);
    --shadow-list: 0 12px 32px rgb(0 0 0 / 20%), 0 2px 6px rgb(0 0 0 / 10%);
    --color-list-highlight: var(--color-toolbar-hover);
    --color-list-highlight-text: var(--color-text);
    /* Input */
    --color-input-background: white;
    --color-input-text: black;
    --color-input-border: #8e8e8e;
    --color-control-border: var(--color-input-border);
    --color-placeholder-text: var(--color-text-muted);
    --color-input-focus-border: rgb(82 168 236 / 75%);
    --color-input-focus-shadow: rgb(82 168 236 / 50%);
    --color-control-knob: #fff;
    --color-control-knob-border: rgb(0 0 0 / 30%);
    --checkbox-checkmark-icon: url(/assets/forms/check_mark_black-a87b3261.svg);
    --select-icon-default: url(/assets/forms/input_select_icon_black-a6f5c4de.svg);
    --select-icon-header: url(/assets/forms/input_select_icon_white-f232248e.png);
    --select-icon-muted: url(/assets/forms/input_select_icon_9b9b9b-d35fb320.png);
    --tree-select-line: url(/assets/tree_select/tree_select_line-2bc97ff4.svg);
    --tree-select-ocl-open: url(/assets/tree_select/tree_select_ocl_open-0e145f46.svg);
    --tree-select-ocl-closed: url(/assets/tree_select/tree_select_ocl_closed-4277ede8.svg);
    --tree-select-ocl-leaf: url(/assets/tree_select/tree_select_ocl_leaf-8207e3a6.svg);
    --color-inactive-pattern-one: #eef0f0;
    --color-inactive-pattern-two: #d3d4d6;
    /* Inspector fields the page in the preview does not use: the second stripe, light enough for secondary text. */
    --color-panel-field-inactive-stripe: #e0e2e3;
    --color-instructions-background: #dee4ea;
    --color-instructions-text: #60666c;
    --color-neutral: #009aff;
    --color-neutral-state-one: #0065b2;
    --color-positive: #bedf51;
    --color-positive-state-one: #8eb51c;
    --color-negative: #e10000;
    --color-negative-state-one: #bf050e;
    --color-button-background: #fff;
    --color-button-hover: #f2f2f2;
    --color-button-text: var(--color-text);
    --color-button-positive-text: #263000;
    --color-button-positive-quiet-text: #4c6505;
    /* Blue buttons: a deeper DPG blue so white text passes AA (4.5:1); #009aff stays for selection. */
    --color-button-neutral-background: #007acb;
    --color-button-neutral-text: var(--color-text-inverse);
    --color-button-neutral-hover-text: var(--color-text-inverse);
    --color-button-neutral-quiet-text: var(--color-link-strong);
    --color-button-flat-text: rgb(0 0 0 / 87%);
    --color-text-inverse: #fff;
    --color-text-muted: #6d7175;
    --color-text-subtle: #858585;
    --color-text-faint: #999;
    --color-text-disabled: #bfbfbf;
    --color-text-inactive: silver;
    --color-surface-muted: #f2f2f2;
    --color-surface-soft: #eee;
    /* Key caps (blocks/keyboard.css): the keyboard shortcuts list and tooltips. */
    --color-key-cap-background: #fff;
    --color-key-cap-border: var(--color-control-border);
    --color-key-cap-text: var(--color-text);
    --color-surface-code: #e9e8e8;
    --color-surface-neutral-strong: #777;
    --color-border-dark: #3a3a3a;
    --color-border-subtle: #dedede;
    --color-border-light: #cfcfcf;
    --color-border-faint: #eee;
    --color-border-dotted: gray;
    --color-table-sort-border: #000;
    --color-shadow-muted: #999;
    /* Autocomplete */
    --color-autocomplete-background: var(--color-card-background);
    --color-autocomplete-border: #ccc;
    --color-autocomplete-item-selected-background: #e0e0e0;
    --shadow-autocomplete-dropdown: 0 2px 8px rgb(0 0 0 / 15%);
    --color-accent-strong: #2196f3;
    --color-accent-bright: #00a1ff;
    --color-accent-soft-bg: rgb(0 154 255 / 12%);
    --color-danger-accent: #f44336;
    --color-link-muted: #2276bb;
    --color-link-strong: #225898;
    /* Text links: DPG blue darkened to AA on white and the greys (5.8:1 on
       white, 4.7:1 on the code surface); #009aff was 2.97:1. */
    --color-link: #0069b0;
    --color-link-hover: #225898;
    --color-facebook-hover: #eff2f7;
    --color-border-neutral: #666;
    --color-attention: #ffae00;
    --color-image-background: white;
    /* The well behind a photo (a mid-tone in dark, for transparent images). */
    --color-image-well: var(--color-image-background);
    --color-image-border: #eee;
    --color-video-embed-background: black;
    --color-card-background: white;
    --color-card-banner-text: black;
    --color-card-title-text: white;
    --color-card-link-text: white;
    /* Card Regular */
    --color-card-regular-border: #009aff;
    --color-card-regular-background: #009aff;
    --color-card-regular-text: white;
    --color-card-regular-border-hover: black;
    --color-card-regular-background-hover: white;
    --color-card-regular-text-hover: black;
    /* Card Small */
    --color-card-small-text: white;
    --color-card-small-background: silver;
    --color-card-small-border: silver;
    --color-card-small-hover-text: black;
    --color-card-small-hover-background: white;
    --color-card-small-hover-border: black;
    /* Floating boxes */
    --color-floating-box-background: rgb(14 14 14 / 98%);
    --color-floating-box-border: rgb(255 255 255 / 70%);
    --color-floating-box-heading: #fff;
    --color-floating-box-text: #f2f2f2;
    --color-floating-box-text-muted: #d0d0d0;
    --color-floating-box-link: #e6e6e6;
    --color-floating-box-link-hover: #fff;
    --color-floating-box-spinner: #fff;
    --color-floating-box-row-hover-bg: rgb(51 51 51 / 85%);
    --color-floating-box-rule: rgb(255 255 255 / 22%);
    /* A notice on the floating box takes the dark theme's notice colours. */
    --color-floating-box-notice-info: #2c2e40;
    --color-floating-box-notice-warning: #3d3520;
    --color-floating-box-notice-negative: #3a1f24;
    --color-floating-box-notice-positive: #2a3525;
    --color-floating-box-status-neutral: #9cd1bb;
    --color-floating-box-status-warning: #ffd76d;
    --color-floating-box-status-negative: #ff657a;
    --color-floating-box-status-positive: #bad761;
    /* Chart series, in order (a photographer's line, slice and table swatch):
       admin's bright chart family, each at 3:1 or more on its surface. The
       floating box is dark in both themes. Its charts take the
       --color-floating-box-chart set. A page in the light theme takes deeper
       shades of the same hues. */
    --color-chart-1: #0b7fd1;
    --color-chart-2: #c26a1f;
    --color-chart-3: #2f9e44;
    --color-chart-4: #d63ae0;
    --color-chart-5: #9a7b00;
    --color-chart-6: #7b52e8;
    --color-chart-7: #1f9e6a;
    --color-chart-8: #e0335c;
    --color-chart-other: #8a8f99;
    /* A period against the one before it (the chart block's trend and
       sparklines): the period in the accent, the previous period in a quiet
       grey. Checked together with the data-visualisation palette validator
       (lightness, colour-blind separation, 3:1 on the canvas and cards). */
    --color-chart-current: #0b7fd1;
    --color-chart-previous: #8a8f99;
    --color-floating-box-chart-1: #009aff;
    --color-floating-box-chart-2: #ffa34c;
    --color-floating-box-chart-3: #93ff4c;
    --color-floating-box-chart-4: #ff4cf9;
    --color-floating-box-chart-5: #ffeb4c;
    --color-floating-box-chart-6: #a679ff;
    --color-floating-box-chart-7: #4cffa7;
    --color-floating-box-chart-8: #7a8cff;
    --color-floating-box-chart-other: #6b6b6b;
    /* The chart block's period and previous period on the floating box,
       which is dark in both themes (checked with the palette validator). */
    --color-floating-box-chart-current: #1f8ce0;
    --color-floating-box-chart-previous: #73767f;
    --color-floating-box-select-text: var(--color-floating-box-heading);
    --floating-box-select-icon: var(--select-icon-header);
    /* Panels */
    --color-panels-header-text-open: #009aff;
    --color-panels-header-text-closed: var(--color-text-secondary);
    --color-panels-header-text-hover: var(--color-text);
    --color-panels-subheading: var(--color-text-secondary);
    --color-panels-link: var(--color-text-secondary);
    --color-panels-guide-background: #e2e6ec;
    /* Tabs */
    --color-tabs-primary-text-inactive: var(--color-text-muted);
    --color-tabs-primary-text-active: black;
    --color-tabs-secondary-text-inactive: var(--color-text-muted);
    --color-tabs-secondary-text-active: black;
    --color-tabs-scroll-arrow: silver;
    --color-nav-background: #1e1e1e;
    --color-nav-surface: #2e2f2f;
    --color-nav-text: #868686;
    --color-nav-text-hover: white;
    --color-nav-surface-overlay: rgb(46 47 47 / 95%);
    /* Processing */
    --color-processing-screen-background: rgba(255, 255, 255, .9);
    --color-processing-screen-text: black;
    --color-processing-progress-track: rgb(0 0 0 / 10%);
    --color-processing-progress-value: #000000;
    /* Upload: the full-screen target shown while files are dragged over the page. */
    --color-drop-target-scrim: var(--color-processing-screen-background);
    --color-drop-target-edge: var(--color-status-neutral);
    /* The file field's drop zone (blocks/file_queue.css): its paper and its dashed edge. */
    --color-file-drop-surface: #faf9f6;
    --color-file-drop-edge: #7d7d7d;
    --color-processing-button-bg: #000;
    --color-processing-button-text: #fff;
    /* Dialogs */
    --color-dialog-backdrop: rgb(170, 170, 170, .3);
    --color-dialog-toolbar-background: black;
    --color-dialog-toolbar-text: white;
    --color-dialog-toolbar-text-hover: #C0C0C0;
    --color-dialog-background: #f6f6f6;
    --color-dialog-border: black;
    --color-dialog-advanced-options-text: #cfcfcf;
    /* Notifications / alerts */
    --color-configuration-warning-text: var(--color-text);
    --color-configuration-warning-bg: orange;
    --color-status-bar-text: white;
    --color-status-bar-bg: #767676;
    --color-transactions-text: white;
    --color-transactions-bg: rgb(51 51 51 / 85%);
    --color-transactions-progress-track: white;
    --color-alert-text: white;
    --color-alert-bg: rgb(0 0 0 / 85%);
    --color-warning-text: #ae0000;
    --color-warning-bg: #fff2ca;
    --color-warning-soft-text: #8a1f11;
    --color-warning-soft-bg: #fccd67;
    --color-error-soft-border: #fbc2c4;
    --color-error-soft-bg: #fbe3e4;
    --color-info-subtle-bg: #fffee0;
    /* Status and notice blocks: text-grade state colours (4.5:1 on the page,
       cards, panels and their own notice background), so thin light-weight
       glyphs stay legible. */
    --color-status-positive: #4c6505;
    --color-status-negative: #c00000;
    --color-status-warning: #8a5a00;
    --color-status-neutral: #0069b4;
    /* A status glyph's filled circle and the mark knocked out of it
       (blocks/status.css). Positive is DPG's deeper lime (2.3:1 on white, by
       Kris's choice: the text beside it carries the state); the others are
       at least 3:1. */
    --color-status-positive-fill: var(--color-positive-state-one);
    --color-status-negative-fill: #d42a1e;
    --color-status-warning-fill: #b37a00;
    --color-status-neutral-fill: #0069b4;
    --color-status-mark: white;
    --color-field-hint-background: var(--color-instructions-background);
    --color-field-hint-text: var(--color-instructions-text);
    --color-notice-info-background: var(--color-surface-muted);
    --color-notice-warning-background: var(--color-warning-bg);
    --color-notice-negative-background: var(--color-error-soft-bg);
    /* Upload rows: a file being sent or processed, its passing light, and a file in the library. */
    --color-upload-progress-surface: #cce2f3;
    --color-upload-progress-sweep: rgb(255 255 255 / 55%);
    --color-upload-done-surface: #d9edaa;
    /* A waiting file with something to check (its checks found an issue). */
    --color-upload-attention-surface: #fbe3a6;
    /* The theme of an upload row in each state (blocks/file_queue.css "Row
       themes"). It sets the surface, chips and controls, text, edges and glyphs. */
    --color-upload-progress-raised: #b4d3ec;
    --color-upload-progress-text: #0f2a43;
    --color-upload-progress-muted: #2c4d6b;
    --color-upload-progress-border: #4f7396;
    --color-upload-progress-icon: #0a5590;
    --color-upload-done-raised: #c4e183;
    --color-upload-done-text: #1f2d06;
    --color-upload-done-muted: #3c4f12;
    --color-upload-done-border: #5d7426;
    --color-upload-done-icon: #3a5200;
    --color-upload-attention-raised: #f5cf72;
    --color-upload-attention-text: #3a2700;
    --color-upload-attention-muted: #5c4100;
    --color-upload-attention-border: #866a1f;
    --color-upload-attention-icon: #7a4b00;
    --color-upload-failed-surface: var(--color-error-soft-bg);
    --color-upload-failed-raised: #f5c7ca;
    --color-upload-failed-text: #4a0d10;
    --color-upload-failed-muted: #702126;
    --color-upload-failed-border: #a0545a;
    --color-upload-failed-icon: #a30008;
    /* Chosen files, and files held for a change being previewed. */
    --color-upload-selected-surface: #e0f3ff;
    --color-upload-selected-raised: #c6e5fc;
    --color-upload-selected-text: #0f2a43;
    --color-upload-selected-muted: #2c4d6b;
    --color-upload-selected-border: #4f7396;
    --color-upload-selected-icon: #0a5590;
    /* A control pointed at over a coloured row: the row's own colour, darker (lighter in dark). */
    --color-row-hover-overlay: rgb(0 0 0 / 8%);
    --color-notice-positive-background: #f1f7dc;
    --color-upload-file-error-text: white;
    --color-upload-file-error-bg: silver;
    --color-upload-file-error-border: gray;
    --color-browser-warning-text: white;
    --color-browser-warning-link: var(--color-browser-warning-text);
    /* Diff */
    --color-diff-add-bg: #dfd;
    --color-diff-add-strong-bg: #9f9;
    --color-diff-add-text: #080;
    --color-diff-del-bg: #fee;
    --color-diff-del-strong-bg: #fcc;
    --color-diff-del-text: #b00;
    --color-diff-hover-bg: #ffc;
    --color-diff-block-info-bg: gray;
    /* Misc */
    --color-toast-background: #333;
    --color-toast-text: white;
    --color-panel-muted-bg: #ebeded;
    --color-spinner-border: rgb(155 155 155 / 90%);
    /* Overlays drawn on top of photos (same in both themes) */
    --color-media-overlay-text: #fff;
    --color-media-overlay-text-muted: rgb(255 255 255 / 75%);
    --color-media-overlay-track: rgb(255 255 255 / 25%);
    --color-media-overlay-scrim: rgb(0 0 0 / 50%);
    --color-media-overlay-scrim-strong: rgb(0 0 0 / 70%);
    --color-media-overlay-backdrop: rgb(0 0 0 / 92%);
    /* A drawn choice's sample picture (blocks/drawn_choice.css), the same in
       both themes: warm and cool colours standing in for a photo, and the
       layer blended over part of it, light at the top and dark below. */
    --color-drawn-sample-one: rgb(214 92 64);
    --color-drawn-sample-two: rgb(232 196 88);
    --color-drawn-sample-three: rgb(86 156 120);
    --color-drawn-sample-four: rgb(52 92 168);
    --color-drawn-sample-layer-light: rgb(240 232 250);
    --color-drawn-sample-layer-dark: rgb(70 40 110);
    /* Maps */
    --color-map-control-background: #fff;
    --color-map-control-text: #333;
    --color-map-control-border: rgb(0 0 0 / 20%);
    --color-map-track: #2563eb;
    --color-map-route: #dc2626;
    /* Images */
    --color-images-icon-view-row-hover-text: white;
    --color-images-detail-row-border: black;
    --color-images-detail-set-text: white;
    --color-images-detail-set-bg: silver;
    --color-images-select-checkbox-bg: rgb(192 192 192 / 50%);
    --color-images-select-checkbox-border: white;
    --color-sortable-position-badge-text: #ffffff;
    --color-sortable-position-badge-bg: rgb(0 0 0 / 75%);
    --color-crop-tool-selection-border: var(--color-text-inverse);
    --color-crop-tool-handle-bg: rgb(242 242 242);
    --color-crop-tool-handle-border: rgb(128 128 128);
    /* Website Design */
    --color-selection-area-bg: rgb(0 0 255 / 10%);
    --color-selection-area-border: rgb(0 0 255 / 20%);
    --color-website-design-data-attribute-state-bg: #e5e3e3;
    --color-website-design-colour-scheme-badge-text: white;
    --color-website-design-colour-scheme-badge-bg: black;
    --color-website-design-preview-bg: gray;
    --color-page-key-ink-dark: #1f1f1f;
    --color-page-key-ink-light: #fff;
    --color-transparency-checkerboard-one: #eeeeee;
    --color-transparency-checkerboard-two: white;
    /* Libraries */
    --color-rich-text-border: #d6d6d6;
    --color-rich-text-toolbar-bg: #f7f7f7;
    --color-rich-text-toolbar-control-border: #d0d0d0;
    --color-rich-text-toolbar-control-active-bg: #e9eefc;
    --color-rich-text-toolbar-control-active-border: #8ea2d9;
    --color-rich-text-toolbar-button-active-bg: rgb(0 0 0 / 5%);
    --color-rich-text-blockquote-text: #666666;
    --color-rich-text-blockquote-border: #d5d5d5;
    --color-rich-text-hr: #dddddd;
    --color-rich-text-link: #0077cc;
    --color-iconpicker-selected-bg: #f5f5f5;
    --color-iconpicker-launch-hover-text: #666666;
    /* Icons */
    --icon-card-images: url(/assets/cards/images-777859c8.svg);
    --icon-card-websites: url(/assets/cards/websites-eb93dbd9.svg);
    --icon-card-blogs: url(/assets/cards/blogs-260576a8.svg);
    --icon-card-downloads: url(/assets/cards/downloads-7ef80713.svg);
    --icon-card-sales: url(/assets/cards/sales-2c02bf22.svg);
    --icon-card-services: url(/assets/cards/services-3cdf38f6.svg);
    --icon-card-statistics: url(/assets/cards/statistics-e8605dbc.svg);
    --icon-card-messages: url(/assets/cards/messages-f5dd5c70.svg);
    --icon-card-mailing-lists: url(/assets/cards/mailing_lists-01c9a9c8.svg);
    --icon-card-settings: url(/assets/cards/settings-7a30f5f0.svg);
    --icon-card-support: url(/assets/cards/support-e3c90223.svg);
    --icon-image-select-hover: url(/assets/images/hover_pattern-183da451.svg);
    --icon-table-sort-up: url(/assets/tables/controls/header_up-a0c476fa.svg);
    --icon-table-sort-down: url(/assets/tables/controls/header_down-94a89c67.svg);
    --icon-keyword-chip: url(/assets/buttons/keyword-1f3dd371.svg);
    --icon-information-chip: url(/assets/information/information_small-2f202615.svg);
    --icon-no-connection: url(/assets/information/no_connection-e0182785.svg);
    --icon-status-exclamation: url(/assets/statuses/exclamation-b2fee8e8.svg);
    --icon-status-warning: url(/assets/statuses/warning-cb8f3b2c.svg);
    --icon-drag-image-here: url(/assets/panels/drag_image_here-ad64e1eb.svg);

    /* UI guide overlay */
    --color-ui-guide-accent: #0a84ff;
    --color-ui-guide-accent-soft: rgb(10 132 255 / 28%);
    --color-ui-guide-scrim: rgb(10 12 16 / 52%);
    --color-ui-guide-shadow: rgb(0 0 0 / 28%);
    --color-ui-guide-callout-background: #16181c;
    --color-ui-guide-callout-text: #ffffff;
    --color-ui-guide-callout-muted: #c9ced6;
    --color-ui-guide-cursor-fill: #000000;
    --color-ui-guide-cursor-stroke: #ffffff;
    --color-ui-guide-gap: #ff3b30;
    --color-ui-guide-partial: #ff9f0a;
    --color-ui-guide-frame: #050505;
    --color-ui-guide-frame-hairline: rgb(5 5 5 / 20%);
    --color-ui-guide-frame-fill: rgb(190 223 81 / 16%);
    --color-ui-guide-frame-glow: rgb(190 223 81 / 70%);
    --color-ui-guide-frame-on-dark: #f6f2e8;
    --color-ui-guide-frame-on-light: #050505;
    --color-ui-guide-caption-background: #050505;
    --color-ui-guide-caption-text: #f6f2e8;
    --color-ui-guide-caption-edge: rgb(246 242 232 / 0%);
    --color-ui-guide-caption-mark: #bedf51;

    /* DPG editor: chrome */
    --color-editor-surface: var(--color-input-background);
    --color-editor-text: var(--color-input-text);
    --color-editor-border: var(--color-input-border);
    --color-editor-toolbar: var(--color-toolbar);
    --color-editor-tool-hover: var(--color-toolbar-hover);
    --color-editor-tool-active: var(--color-accent-soft-bg);
    --color-editor-tool-active-text: var(--color-accent-strong);
    --color-editor-focus: var(--color-input-focus-border);
    --color-editor-focus-shadow: var(--color-input-focus-shadow);
    --color-editor-selected: var(--color-accent-strong);
    --color-editor-placeholder: var(--color-placeholder-text);
    --color-editor-island-background: var(--color-surface-muted);
    --color-editor-island-border: var(--color-border-dotted);
    --color-editor-drop-zone: var(--color-accent-soft-bg);

    /* DPG editor: code, Monokai Pro Light */
    --color-code-background: #faf4f2;
    --color-code-gutter-background: #faf4f2;
    --color-code-gutter-text: #756f6f;
    --color-code-text: #29242a;
    --color-code-active-line: #ede7e5;
    --color-code-selection: #d3cdcc;
    --color-code-cursor: #29242a;
    --color-code-matching-bracket: #bfb9ba;
    --color-code-comment: #6d6668;
    --color-code-dimmed: #6c6769;
    --color-code-red: #c82152;
    --color-code-orange: #b6431b;
    --color-code-yellow: #975a07;
    --color-code-green: #1d764f;
    --color-code-blue: #177289;
    --color-code-purple: #6e56bd;
}

@media (prefers-color-scheme: dark) {
  /* ::backdrop inherits nothing before Safari 17.4, so a dialog's backdrop
   takes the tokens from here as well (blocks/dialog.css draws it with them). */
:root,
::backdrop {
    color-scheme: dark;
    --color-canvas: #282a3a;
    --color-text: #eaf2f1;
    --color-text-secondary: #b0b8c4;
    --color-heading: #f5f9f8;
    --color-selection-text: #282a3a;
    --color-selection-background: #9cd1bb;
    --color-selection-background-hover: #b5dfcd;
    /* Header */
    --color-header-background: #000000;
    --color-header-text: var(--color-heading);
    /* The header's hover step (a navigation tab's), and the edge of the
       list hung from it; lighter than the navigation bar under the list. */
    --color-header-raised: var(--color-nav-surface);
    /* Toolbar */
    --color-toolbar: #2c2e40;
    --color-toolbar-rgb: 44, 46, 64;
    --color-toolbar-hover: #3a3d4b;
    --color-toolbar-border: #535763;
    --color-toolbar-menu-heading: var(--color-text-subtle);
    /* Layers (RULES §10.10): a menu hung from a bar lifts off the page; a
       list opened from a control can sit over that menu, so it lifts
       further. A list row under the pointer or keyboard takes one step
       in tone, as the navigation's menus do. */
    --shadow-menu: 0 8px 24px rgb(0 0 0 / 55%);
    --shadow-list: 0 12px 32px rgb(0 0 0 / 65%), 0 2px 6px rgb(0 0 0 / 40%);
    --color-list-highlight: var(--color-toolbar-hover);
    --color-list-highlight-text: var(--color-text);
    /* Input */
    --color-input-background: #242634;
    --color-input-text: #eaf2f1;
    --color-input-border: #747882;
    --color-control-border: var(--color-input-border);
    --color-placeholder-text: var(--color-text-muted);
    --color-input-focus-border: rgb(156 209 187 / 75%);
    --color-input-focus-shadow: rgb(156 209 187 / 45%);
    --color-control-knob: #f5f9f8;
    --color-control-knob-border: rgb(0 0 0 / 45%);
    --checkbox-checkmark-icon: url(/assets/forms/check_mark_white-38599f55.svg);
    --select-icon-default: url(/assets/forms/input_select_icon_white-f232248e.png);
    --select-icon-header: url(/assets/forms/input_select_icon_white-f232248e.png);
    --select-icon-muted: url(/assets/forms/input_select_icon_9b9b9b-d35fb320.png);
    --tree-select-line: url(/assets/tree_select/tree_select_line_dark-f69b32be.svg);
    --tree-select-ocl-open: url(/assets/tree_select/tree_select_ocl_open_dark-7fcc91be.svg);
    --tree-select-ocl-closed: url(/assets/tree_select/tree_select_ocl_closed_dark-f513328f.svg);
    --tree-select-ocl-leaf: url(/assets/tree_select/tree_select_ocl_leaf_dark-d477af09.svg);
    --color-inactive-pattern-one: #2c2e40;
    --color-inactive-pattern-two: #242634;
    /* Inspector fields the page in the preview does not use: the second stripe, light enough for secondary text. */
    --color-panel-field-inactive-stripe: var(--color-inactive-pattern-two);
    --color-instructions-background: #242634;
    --color-instructions-text: #b8bcc4;
    --color-neutral: #9cd1bb;
    --color-neutral-state-one: #7ab89f;
    --color-positive: #bad761;
    --color-positive-state-one: #a5c254;
    --color-negative: #ff657a;
    --color-negative-state-one: #f57183;
    --color-button-background: #3a3d4b;
    --color-button-hover: #535763;
    --color-button-text: #eaf2f1;
    --color-button-positive-text: var(--color-text-inverse);
    --color-button-positive-quiet-text: var(--color-positive);
    --color-button-neutral-background: var(--color-neutral);
    --color-button-neutral-text: var(--color-text-inverse);
    --color-button-neutral-hover-text: var(--color-text-inverse);
    --color-button-neutral-quiet-text: var(--color-link-strong);
    --color-button-flat-text: rgb(234 242 241 / 87%);
    --color-text-inverse: #282a3a;
    --color-text-muted: #a0a5ae;
    --color-text-subtle: #b8bcc4;
    --color-text-faint: var(--color-text-muted);
    --color-text-disabled: #696d77;
    --color-text-inactive: var(--color-text-muted);
    --color-surface-muted: #2c2e40;
    --color-surface-soft: #242634;
    /* Key caps (blocks/keyboard.css): the keyboard shortcuts list and tooltips. */
    --color-key-cap-background: var(--color-surface-muted);
    --color-key-cap-border: var(--color-control-border);
    --color-key-cap-text: var(--color-text);
    --color-surface-code: #1e1f2b;
    --color-surface-neutral-strong: #3a3d4b;
    --color-border-dark: #3a3d4b;
    --color-border-subtle: #535763;
    --color-border-light: #696d77;
    --color-border-faint: #2c2e40;
    --color-border-dotted: var(--color-border-light);
    --color-table-sort-border: #a0a5ae;
    --color-shadow-muted: rgba(0, 0, 0, 0.4);
    /* Autocomplete */
    --color-autocomplete-background: var(--color-card-background);
    --color-autocomplete-border: var(--color-border-light);
    --color-autocomplete-item-selected-background: var(--color-surface-muted);
    --shadow-autocomplete-dropdown: 0 8px 24px rgb(0 0 0 / 65%);
    --color-accent-strong: #9cd1bb;
    --color-accent-bright: #bad761;
    --color-accent-soft-bg: rgb(156 209 187 / 20%);
    --color-danger-accent: #ff657a;
    --color-link-muted: #c39ac9;
    --color-link-strong: #9cd1bb;
    --color-link: #9cd1bb;
    --color-link-hover: #c39ac9;
    --color-facebook-hover: #2c2e40;
    --color-border-neutral: #696d77;
    --color-attention: #ff9b5e;
    --color-image-background: #242634;
    /* The well behind a photo: in dark, a mid-tone that both black and white parts of a transparent image stand out from. */
    --color-image-well: #5a5d6b;
    --color-image-border: #535763;
    --color-video-embed-background: #000000;
    --color-card-background: #242634;
    --color-card-banner-text: #eaf2f1;
    --color-card-title-text: var(--color-heading);
    --color-card-link-text: var(--color-heading);
    /* Card Regular */
    --color-card-regular-border: #9cd1bb;
    --color-card-regular-background: #3a3d4b;
    --color-card-regular-text: #eaf2f1;
    --color-card-regular-border-hover: #bad761;
    --color-card-regular-background-hover: #2c2e40;
    --color-card-regular-text-hover: #f5f9f8;
    /* Card Small */
    --color-card-small-text: var(--color-heading);
    --color-card-small-background: var(--color-surface-neutral-strong);
    --color-card-small-border: var(--color-border-subtle);
    --color-card-small-hover-text: var(--color-heading);
    --color-card-small-hover-background: var(--color-surface-muted);
    --color-card-small-hover-border: var(--color-accent-strong);
    /* Floating boxes */
    --color-floating-box-background: rgb(30 31 43 / 98%);
    --color-floating-box-border: var(--color-border-light);
    --color-floating-box-heading: var(--color-heading);
    --color-floating-box-text: var(--color-text);
    --color-floating-box-text-muted: var(--color-text-subtle);
    --color-floating-box-link: var(--color-link-strong);
    --color-floating-box-link-hover: var(--color-heading);
    --color-floating-box-spinner: var(--color-heading);
    --color-floating-box-row-hover-bg: rgb(255 255 255 / 10%);
    --color-floating-box-rule: rgb(255 255 255 / 16%);
    /* A notice on the floating box takes the dark theme's notice colours. */
    --color-floating-box-notice-info: var(--color-notice-info-background);
    --color-floating-box-notice-warning: var(--color-notice-warning-background);
    --color-floating-box-notice-negative: var(--color-notice-negative-background);
    --color-floating-box-notice-positive: var(--color-notice-positive-background);
    --color-floating-box-status-neutral: var(--color-status-neutral);
    --color-floating-box-status-warning: var(--color-status-warning);
    --color-floating-box-status-negative: var(--color-status-negative);
    --color-floating-box-status-positive: var(--color-status-positive);
    /* Chart series, in order (a photographer's line, slice and table swatch):
       admin's bright chart family, each at 3:1 or more on its surface. The
       floating box is dark in both themes. Its charts take the
       --color-floating-box-chart set. A page in the light theme takes deeper
       shades of the same hues. */
    --color-chart-1: #009aff;
    --color-chart-2: #ffa34c;
    --color-chart-3: #93ff4c;
    --color-chart-4: #ff4cf9;
    --color-chart-5: #ffeb4c;
    --color-chart-6: #a679ff;
    --color-chart-7: #4cffa7;
    --color-chart-8: #7a8cff;
    --color-chart-other: #6b6b6b;
    /* A period against the one before it (the chart block): see the light
       theme. Deeper than --color-chart-1 to stay inside the dark lightness
       band, and a grey at 3:1 on the canvas and cards. */
    --color-chart-current: #1f8ce0;
    --color-chart-previous: #73767f;
    --color-floating-box-chart-1: #009aff;
    --color-floating-box-chart-2: #ffa34c;
    --color-floating-box-chart-3: #93ff4c;
    --color-floating-box-chart-4: #ff4cf9;
    --color-floating-box-chart-5: #ffeb4c;
    --color-floating-box-chart-6: #a679ff;
    --color-floating-box-chart-7: #4cffa7;
    --color-floating-box-chart-8: #7a8cff;
    --color-floating-box-chart-other: #6b6b6b;
    /* The chart block's period and previous period on the floating box,
       which is dark in both themes (checked with the palette validator). */
    --color-floating-box-chart-current: #1f8ce0;
    --color-floating-box-chart-previous: #73767f;
    --color-floating-box-select-text: var(--color-heading);
    --floating-box-select-icon: var(--select-icon-header);
    /* Panels */
    --color-panels-header-text-open: #9cd1bb;
    --color-panels-header-text-closed: #a0a5ae;
    --color-panels-header-text-hover: #eaf2f1;
    --color-panels-subheading: var(--color-text-subtle);
    --color-panels-link: var(--color-text-subtle);
    --color-panels-guide-background: #363a50;
    /* Tabs */
   --color-tabs-primary-text-inactive: #a0a5ae;
   --color-tabs-primary-text-active: #eaf2f1;
   --color-tabs-secondary-text-inactive: #a0a5ae;
   --color-tabs-secondary-text-active: #eaf2f1;
    --color-tabs-scroll-arrow: #a0a5ae;
    --color-nav-background: #1e1f2b;
    --color-nav-surface: #2c2e40;
    --color-nav-text: #eaf2f1;
    --color-nav-text-hover: var(--color-heading);
    --color-nav-surface-overlay: rgb(44 46 64 / 95%);
    /* Processing */
    --color-processing-screen-background: rgba(40, 42, 58, 0.92);
    --color-processing-screen-text: #eaf2f1;
    --color-processing-progress-track: rgb(255 255 255 / 10%);
    --color-processing-progress-value: var(--color-heading);
    /* Upload: the full-screen target shown while files are dragged over the page. */
    --color-drop-target-scrim: var(--color-processing-screen-background);
    --color-drop-target-edge: var(--color-status-neutral);
    /* The file field's drop zone (blocks/file_queue.css): its paper and its dashed edge. */
    --color-file-drop-surface: #2c2e40;
    --color-file-drop-edge: #8a8f9b;
    --color-processing-button-bg: var(--color-text);
    --color-processing-button-text: var(--color-text-inverse);
    /* Dialogs */
    --color-dialog-backdrop: rgba(0, 0, 0, 0.5);
    --color-dialog-toolbar-background: #1e1f2b;
    --color-dialog-toolbar-text: #eaf2f1;
    --color-dialog-toolbar-text-hover: #b8bcc4;
    --color-dialog-background: #242634;
    --color-dialog-border: #535763;
    --color-dialog-advanced-options-text: var(--color-text-subtle);
    /* Notifications / alerts */
    --color-configuration-warning-text: var(--color-text-inverse);
    --color-configuration-warning-bg: var(--color-attention);
    --color-status-bar-text: var(--color-text);
    --color-status-bar-bg: var(--color-surface-neutral-strong);
    --color-transactions-text: var(--color-text);
    --color-transactions-bg: rgb(30 31 43 / 95%);
    --color-transactions-progress-track: rgb(234 242 241 / 20%);
    --color-alert-text: var(--color-text);
    --color-alert-bg: rgb(30 31 43 / 95%);
    --color-warning-text: #ffd76d;
    --color-warning-bg: #3d3520;
    --color-warning-soft-text: #ffd76d;
    --color-warning-soft-bg: #352e1c;
    --color-error-soft-border: #7f2d35;
    --color-error-soft-bg: #3a1f24;
    --color-info-subtle-bg: #242634;
    /* Status and notice blocks: text-grade state colours (4.5:1 on the page,
       cards, panels and their own notice background), so thin light-weight
       glyphs stay legible. */
    --color-status-positive: var(--color-positive);
    --color-status-negative: var(--color-negative);
    --color-status-warning: #ffd76d;
    --color-status-neutral: var(--color-neutral);
    /* A status glyph's filled circle (at least 3:1 on the card) and the mark
       knocked out of it (blocks/status.css). */
    --color-status-positive-fill: var(--color-status-positive);
    --color-status-negative-fill: var(--color-status-negative);
    --color-status-warning-fill: var(--color-status-warning);
    --color-status-neutral-fill: var(--color-status-neutral);
    --color-status-mark: #1e1f2b;
    --color-field-hint-background: var(--color-instructions-background);
    --color-field-hint-text: var(--color-instructions-text);
    --color-notice-info-background: var(--color-surface-muted);
    --color-notice-warning-background: var(--color-warning-bg);
    --color-notice-negative-background: var(--color-error-soft-bg);
    /* Upload rows: a file being sent or processed, its passing light, and a file in the library. */
    --color-upload-progress-surface: #2d4263;
    --color-upload-progress-sweep: rgb(255 255 255 / 9%);
    --color-upload-done-surface: #3a4d2c;
    /* A waiting file with something to check (its checks found an issue). */
    --color-upload-attention-surface: #4a3c18;
    /* The theme of an upload row in each state (blocks/file_queue.css "Row
       themes"). It sets the surface, chips and controls, text, edges and glyphs. */
    --color-upload-progress-raised: #3b557d;
    --color-upload-progress-text: #e8f1ff;
    --color-upload-progress-muted: #c2d2ea;
    --color-upload-progress-border: #8aa3cb;
    --color-upload-progress-icon: #a4c6ff;
    --color-upload-done-raised: #4b6238;
    --color-upload-done-text: #eef6e2;
    --color-upload-done-muted: #cddcb9;
    --color-upload-done-border: #98b27b;
    --color-upload-done-icon: #c2dd6e;
    --color-upload-attention-raised: #5f4e22;
    --color-upload-attention-text: #fbf1d8;
    --color-upload-attention-muted: #e6d3a5;
    --color-upload-attention-border: #b49c5c;
    --color-upload-attention-icon: #ffd76d;
    --color-upload-failed-surface: var(--color-error-soft-bg);
    --color-upload-failed-raised: #512b32;
    --color-upload-failed-text: #ffe9ec;
    --color-upload-failed-muted: #f0bcc3;
    --color-upload-failed-border: #b47c85;
    --color-upload-failed-icon: #ff8a99;
    /* Chosen files, and files held for a change being previewed. */
    --color-upload-selected-surface: #3f4b54;
    --color-upload-selected-raised: #4d5d69;
    --color-upload-selected-text: #eaf4f8;
    --color-upload-selected-muted: #ccdbe2;
    --color-upload-selected-border: #93aab6;
    --color-upload-selected-icon: #a8dcc6;
    /* A control pointed at over a coloured row: the row's own colour, darker (lighter in dark). */
    --color-row-hover-overlay: rgb(255 255 255 / 12%);
    --color-notice-positive-background: #2a3525;
    --color-upload-file-error-text: var(--color-text);
    --color-upload-file-error-bg: var(--color-surface-neutral-strong);
    --color-upload-file-error-border: var(--color-border-light);
    --color-browser-warning-text: var(--color-text);
    --color-browser-warning-link: var(--color-browser-warning-text);
    /* Diff */
    --color-diff-add-bg: #2a3525;
    --color-diff-add-strong-bg: #3d4a32;
    --color-diff-add-text: #bad761;
    --color-diff-del-bg: #3a2428;
    --color-diff-del-strong-bg: #4d2f35;
    --color-diff-del-text: #ff657a;
    --color-diff-hover-bg: #3a3d4b;
    --color-diff-block-info-bg: var(--color-surface-neutral-strong);
    /* Misc */
    --color-toast-background: #242634;
    --color-toast-text: var(--color-text);
    --color-panel-muted-bg: #2c2e40;
    --color-spinner-border: rgb(184 188 196 / 90%);
    /* Overlays drawn on top of photos (same in both themes) */
    --color-media-overlay-text: #fff;
    --color-media-overlay-text-muted: rgb(255 255 255 / 75%);
    --color-media-overlay-track: rgb(255 255 255 / 25%);
    --color-media-overlay-scrim: rgb(0 0 0 / 50%);
    --color-media-overlay-scrim-strong: rgb(0 0 0 / 70%);
    --color-media-overlay-backdrop: rgb(0 0 0 / 92%);
    /* A drawn choice's sample picture (blocks/drawn_choice.css), the same in
       both themes: warm and cool colours standing in for a photo, and the
       layer blended over part of it, light at the top and dark below. */
    --color-drawn-sample-one: rgb(214 92 64);
    --color-drawn-sample-two: rgb(232 196 88);
    --color-drawn-sample-three: rgb(86 156 120);
    --color-drawn-sample-four: rgb(52 92 168);
    --color-drawn-sample-layer-light: rgb(240 232 250);
    --color-drawn-sample-layer-dark: rgb(70 40 110);
    /* Maps */
    --color-map-control-background: var(--color-card-background);
    --color-map-control-text: var(--color-text);
    --color-map-control-border: var(--color-border-subtle);
    --color-map-track: #4da3ff;
    --color-map-route: var(--color-negative);
    /* Images */
    --color-images-icon-view-row-hover-text: var(--color-heading);
    --color-images-detail-row-border: var(--color-border-subtle);
    --color-images-detail-set-text: var(--color-text);
    --color-images-detail-set-bg: var(--color-surface-neutral-strong);
    --color-images-select-checkbox-bg: rgb(0 0 0 / 35%);
    --color-images-select-checkbox-border: var(--color-heading);
    --color-sortable-position-badge-text: var(--color-heading);
    --color-sortable-position-badge-bg: rgb(0 0 0 / 75%);
    --color-crop-tool-selection-border: var(--color-heading);
    --color-crop-tool-handle-bg: rgb(242 242 242);
    --color-crop-tool-handle-border: rgb(128 128 128);
    /* Website Design */
    --color-selection-area-bg: rgb(156 209 187 / 15%);
    --color-selection-area-border: rgb(156 209 187 / 30%);
    --color-website-design-data-attribute-state-bg: var(--color-surface-muted);
    --color-website-design-colour-scheme-badge-text: var(--color-text-inverse);
    --color-website-design-colour-scheme-badge-bg: var(--color-neutral);
    --color-website-design-preview-bg: var(--color-surface-neutral-strong);
    --color-page-key-ink-dark: #1f1f1f;
    --color-page-key-ink-light: #fff;
    --color-transparency-checkerboard-one: var(--color-inactive-pattern-one);
    --color-transparency-checkerboard-two: var(--color-inactive-pattern-two);
    /* Libraries */
    --color-rich-text-border: var(--color-border-subtle);
    --color-rich-text-toolbar-bg: var(--color-toolbar);
    --color-rich-text-toolbar-control-border: var(--color-input-border);
    --color-rich-text-toolbar-control-active-bg: rgb(156 209 187 / 20%);
    --color-rich-text-toolbar-control-active-border: var(--color-accent-strong);
    --color-rich-text-toolbar-button-active-bg: rgb(255 255 255 / 8%);
    --color-rich-text-blockquote-text: var(--color-text-subtle);
    --color-rich-text-blockquote-border: var(--color-border-light);
    --color-rich-text-hr: var(--color-border-subtle);
    --color-rich-text-link: var(--color-link-strong);
    --color-iconpicker-selected-bg: var(--color-toolbar-hover);
    --color-iconpicker-launch-hover-text: var(--color-text-subtle);
    /* Icons */
    --icon-card-images: url(/assets/cards/images_dark-9a6e9361.svg);
    --icon-card-websites: url(/assets/cards/websites_dark-6fd6ecf9.svg);
    --icon-card-blogs: url(/assets/cards/blogs_dark-fdcf5e2e.svg);
    --icon-card-downloads: url(/assets/cards/downloads_dark-f05b4f9e.svg);
    --icon-card-sales: url(/assets/cards/sales_dark-8d3efe2b.svg);
    --icon-card-services: url(/assets/cards/services_dark-f0f95f63.svg);
    --icon-card-statistics: url(/assets/cards/statistics_dark-410947c6.svg);
    --icon-card-messages: url(/assets/cards/messages_dark-91008d6e.svg);
    --icon-card-mailing-lists: url(/assets/cards/mailing_lists_dark-37aaf79a.svg);
    --icon-card-settings: url(/assets/cards/settings_dark-b9cc8d28.svg);
    --icon-card-support: url(/assets/cards/support_dark-5f8134d8.svg);
    --icon-image-select-hover: url(/assets/images/hover_pattern_dark-d49c5df2.svg);
    --icon-table-sort-up: url(/assets/tables/controls/header_up_dark-87d49d66.svg);
    --icon-table-sort-down: url(/assets/tables/controls/header_down_dark-a6e64bfd.svg);
    --icon-keyword-chip: url(/assets/buttons/keyword_dark-a83ce40c.svg);
    --icon-information-chip: url(/assets/information/information_small_dark-f1886a6b.svg);
    --icon-no-connection: url(/assets/information/no_connection_dark-35fb185d.svg);
    --icon-status-exclamation: url(/assets/statuses/exclamation_dark-ca6bca96.svg);
    --icon-status-warning: url(/assets/statuses/warning_dark-3f444cbc.svg);
    --icon-drag-image-here: url(/assets/panels/drag_image_here_dark-71fb2425.svg);

    /* UI guide overlay */
    --color-ui-guide-accent: #4da3ff;
    --color-ui-guide-accent-soft: rgb(77 163 255 / 32%);
    --color-ui-guide-scrim: rgb(0 0 0 / 62%);
    --color-ui-guide-shadow: rgb(0 0 0 / 45%);
    --color-ui-guide-callout-background: #f4f6f8;
    --color-ui-guide-callout-text: #16181c;
    --color-ui-guide-callout-muted: #474d57;
    --color-ui-guide-cursor-fill: #000000;
    --color-ui-guide-cursor-stroke: #ffffff;
    --color-ui-guide-gap: #ff453a;
    --color-ui-guide-partial: #ffb340;
    --color-ui-guide-frame: #f6f2e8;
    --color-ui-guide-frame-hairline: rgb(246 242 232 / 26%);
    --color-ui-guide-frame-fill: rgb(186 215 97 / 14%);
    --color-ui-guide-frame-glow: rgb(186 215 97 / 55%);
    --color-ui-guide-frame-on-dark: #f6f2e8;
    --color-ui-guide-frame-on-light: #050505;
    --color-ui-guide-caption-background: #000000;
    --color-ui-guide-caption-text: #f6f2e8;
    --color-ui-guide-caption-edge: rgb(246 242 232 / 18%);
    --color-ui-guide-caption-mark: #bad761;

    /* DPG editor: chrome */
    --color-editor-surface: var(--color-input-background);
    --color-editor-text: var(--color-input-text);
    --color-editor-border: var(--color-input-border);
    --color-editor-toolbar: var(--color-toolbar);
    --color-editor-tool-hover: var(--color-toolbar-hover);
    --color-editor-tool-active: var(--color-accent-soft-bg);
    --color-editor-tool-active-text: var(--color-accent-strong);
    --color-editor-focus: var(--color-input-focus-border);
    --color-editor-focus-shadow: var(--color-input-focus-shadow);
    --color-editor-selected: var(--color-accent-strong);
    --color-editor-placeholder: var(--color-placeholder-text);
    --color-editor-island-background: var(--color-surface-muted);
    --color-editor-island-border: var(--color-border-dotted);
    --color-editor-drop-zone: var(--color-accent-soft-bg);

    /* DPG editor: code, Monokai Pro Octagon (the palette this dark theme uses) */
    --color-code-background: #1e1f2b;
    --color-code-gutter-background: #1e1f2b;
    --color-code-gutter-text: #838791;
    --color-code-text: #eaf2f1;
    --color-code-active-line: #282a3a;
    --color-code-selection: #3a3d4b;
    --color-code-cursor: #eaf2f1;
    --color-code-matching-bracket: #535763;
    --color-code-comment: #8e929c;
    --color-code-dimmed: #8d9299;
    --color-code-red: #ff657a;
    --color-code-orange: #ff9b5e;
    --color-code-yellow: #ffd76d;
    --color-code-green: #bad761;
    --color-code-blue: #9cd1bb;
    --color-code-purple: #c39ac9;
}

}