/* Colour tokens for the editor's own styles, for light, for dark, and for each palette over its base (js/theme.js
   sets data-theme and data-palette on the page). Everything should use these variables instead of hardcoded colours
   so it follows the theme. The Syncfusion controls follow them too: their Tailwind 3 stylesheet takes its colours
   from --color-sf-* variables, set from these tokens below.
   The selectors are attributes, not :root alone, so an element of its own with data-theme and data-palette (a
   preview of a theme in Settings) shows that theme's colours whatever the page's. */
/* Type for the documents the editor shows — the schema and map trees, samples, results and code views.
   Set from the signed-in user's settings by js/font.js; these are the fallbacks when nothing is stored.
   Deliberately not used for the app's own chrome, which stays a fixed size. */
:root {
    --xm-doc-size: 12px;
    --xm-doc-font: 'Cascadia Mono', Consolas, monospace;
}

:root,
[data-theme="light"] {
    --xm-bg: #ffffff;
    --xm-surface: #ffffff;
    /* Behind cards: white cards on a white page show only their border, so pages built from cards
       sit on a tint instead. In dark the surface is already lighter than the page, so it stays --xm-bg. */
    --xm-page-bg: #f4f5f7;
    /* Cards need a firmer edge than --xm-border-soft, which all but disappears against the tint. */
    --xm-card-border: #cfd4dc;
    --xm-card-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 6px rgba(16, 24, 40, .08);
    --xm-surface-alt: #f3f4f6;
    --xm-surface-hover: #f9f9f9;
    --xm-text: #111827;
    --xm-text-muted: #666666;
    --xm-border: #d6d5d5;
    --xm-border-soft: #e5e7eb;
    --xm-link: #0071c1;
    --xm-accent: #2F5D8C;
    --xm-accent-hover: #24496E;
    --xm-accent-text: #2F5D8C;
    --xm-highlight: #C6B37E;
    --xm-error-bg: #fee2e2;
    --xm-error-text: #b91c1c;
    --xm-error-border: #fca5a5;
    --xm-warning-bg: lightyellow;
    --xm-warning-text: #b45309;
    /* Mapping kinds in the editor's trees and inspector: text on a tint of the same hue. */
    --xm-kind-link: #23476c;
    --xm-kind-link-bg: #e8eff7;
    --xm-kind-function: #5b3591;
    --xm-kind-function-bg: #f1eaf8;
    --xm-kind-constant: #3f4854;
    --xm-kind-constant-bg: #eef0f3;
    --xm-kind-loop: #0b5f58;
    --xm-kind-loop-bg: #e3f2ef;
    --xm-kind-if: #7a4a06;
    --xm-kind-if-bg: #fbf1de;
    /* An open question (Question* node): blue, as the old editor showed it, but clear of the link blue. */
    --xm-kind-question: #0b6285;
    --xm-kind-question-bg: #e0f2fa;
    --xm-kind-source: #6b5310;
    --xm-kind-source-bg: #fbf6e9;
    --xm-info-bg: #f0f8ff;
    --xm-status-success: #16a34a;
    --xm-ribbon-bg: #f3f4f6; /* matches the Syncfusion ribbon background */
    --xm-control-border: #d1d5db;
    --xm-control-hover: #e5e7eb;
    --xm-shadow: rgba(0, 0, 0, 0.08);
    /* Dialogs: a destructive action's button, the dimmed page behind a dialog, and the dialog's lift. */
    --xm-danger: #dc2626;
    --xm-danger-hover: #b91c1c;
    --xm-overlay: rgba(15, 23, 42, 0.28);
    --xm-dialog-shadow: 0 16px 40px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
    --xm-accent-text-hover: #244766;
    --xm-selection: #DBE0F3;
    --xm-row-alt: #f2f2f2;
    --xm-separator: black;
    /* Status highlights on tree nodes and source paths */
    --xm-status-error: #FFCCCB;
    --xm-status-ok: lightgreen;
    --xm-status-ok-text: #14532d;
    --xm-unsaved-dot: #d97706;
    --xm-status-question: #ADD8E6;
    --xm-status-warning: #FED8B1;
    --xm-status-neutral: #ECECEC;
    /* Sample viewer syntax colours */
    --xm-code-toggle: #007bff;
    --xm-code-name: #a31515;
    --xm-code-string: #0451a5;
    --xm-code-value: #008000;
    --xm-code-keyword: #0000ff;
    --xm-code-comment: #008000;
    --xm-code-punct: #333333;
}

[data-theme="dark"] {
    --xm-bg: #111827;
    --xm-surface: #1f2937;
    --xm-page-bg: #111827;
    --xm-card-border: #374151;
    --xm-card-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    --xm-surface-alt: #1a2230;
    --xm-surface-hover: #273244;
    --xm-text: #e5e7eb;
    --xm-text-muted: #9ca3af;
    --xm-border: #374151;
    --xm-border-soft: #374151;
    --xm-link: #60a5fa;
    --xm-accent: #3b6fa5;
    --xm-accent-hover: #4a80b8;
    --xm-accent-text: #7fb0e3;
    --xm-highlight: #d6c48f;
    --xm-error-bg: #3f1d1d;
    --xm-error-text: #fca5a5;
    --xm-error-border: #7f3d3d;
    --xm-warning-bg: #3a3413;
    --xm-warning-text: #fbbf24;
    --xm-kind-link: #a9c8ea;
    --xm-kind-link-bg: #1e3350;
    --xm-kind-function: #d2b8f5;
    --xm-kind-function-bg: #34264a;
    --xm-kind-constant: #d1d5db;
    --xm-kind-constant-bg: #2f3845;
    --xm-kind-loop: #8fdccf;
    --xm-kind-loop-bg: #173a37;
    --xm-kind-if: #fcd58b;
    --xm-kind-if-bg: #3d3014;
    --xm-kind-question: #7dd3fc;
    --xm-kind-question-bg: #123a4d;
    --xm-kind-source: #eed8a0;
    --xm-kind-source-bg: #3a3218;
    --xm-info-bg: #172a3d;
    --xm-status-success: #4ade80;
    --xm-ribbon-bg: #374151;
    --xm-control-border: #6b7280;
    --xm-control-hover: #4b5563;
    --xm-shadow: rgba(0, 0, 0, 0.4);
    --xm-danger: #ef4444;
    --xm-danger-hover: #dc2626;
    --xm-overlay: rgba(0, 0, 0, 0.55);
    --xm-dialog-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
    --xm-accent-text-hover: #a9cbee;
    --xm-selection: #2c3e5c;
    --xm-row-alt: #243041;
    --xm-separator: #4b5563;
    --xm-status-error: #6b2b2b;
    --xm-status-ok: #1f5130;
    --xm-status-ok-text: #a7f3d0;
    --xm-unsaved-dot: #fbbf24;
    --xm-status-question: #1f4a66;
    --xm-status-warning: #6b4a1f;
    --xm-status-neutral: #374151;
    --xm-code-toggle: #60a5fa;
    --xm-code-name: #f28b82;
    --xm-code-string: #8ab4f8;
    --xm-code-value: #81c995;
    --xm-code-keyword: #93c5fd;
    --xm-code-comment: #7ea87e;
    --xm-code-punct: #d1d5db;
}

/* ================================================================== palettes
   Each is a base (light or dark, js/theme.js) and the colours it changes; whatever a palette leaves out comes from
   its base, so the kinds, statuses and errors keep their tested contrast. Listed in Settings by Helper/AppThemes.cs.
   Body text is at least 4.5:1 on its surface, and white text at least 4.5:1 on the accent (primary buttons). */

/* Cobalt: deep blue, with yellow for links and what is selected. */
[data-palette="cobalt"] {
    --xm-bg: #132738;
    --xm-page-bg: #132738;
    --xm-surface: #193549;
    --xm-surface-alt: #15304a;
    --xm-surface-hover: #1f4662;
    --xm-card-border: #2a5677;
    --xm-border: #2a4f6e;
    --xm-border-soft: #24455f;
    --xm-text: #e6eef6;
    --xm-text-muted: #9db4c8;
    --xm-link: #ffc600;
    --xm-accent: #1f6fb2;
    --xm-accent-hover: #2a7fc4;
    --xm-accent-text: #ffc600;
    --xm-accent-text-hover: #ffd84d;
    --xm-highlight: #ffc600;
    --xm-selection: #23507a;
    --xm-row-alt: #183a52;
    --xm-ribbon-bg: #1f4662;
    --xm-control-border: #3b6a8f;
    --xm-control-hover: #285677;
    --xm-info-bg: #173c5a;
    --xm-separator: #2a5677;
    --xm-code-toggle: #ffc600;
    --xm-code-name: #ff9d00;
    --xm-code-string: #a5ff90;
    --xm-code-value: #ffee80;
    --xm-code-keyword: #ff6790;
    --xm-code-comment: #56a2e2;
    --xm-code-punct: #9db4c8;
}

/* Frost: cool, muted blue-greys. */
[data-palette="frost"] {
    --xm-bg: #2e3440;
    --xm-page-bg: #2e3440;
    --xm-surface: #3b4252;
    --xm-surface-alt: #353c4a;
    --xm-surface-hover: #434c5e;
    --xm-card-border: #4c566a;
    --xm-border: #4c566a;
    --xm-border-soft: #434c5e;
    --xm-text: #eceff4;
    --xm-text-muted: #b4bccc;
    --xm-link: #88c0d0;
    --xm-accent: #4c6e96;
    --xm-accent-hover: #5e81ac;
    --xm-accent-text: #88c0d0;
    --xm-accent-text-hover: #8fbcbb;
    --xm-highlight: #ebcb8b;
    --xm-selection: #3f4b63;
    --xm-row-alt: #353c4a;
    --xm-ribbon-bg: #3b4252;
    --xm-control-border: #616e88;
    --xm-control-hover: #4c566a;
    --xm-info-bg: #354258;
    --xm-separator: #4c566a;
    --xm-code-toggle: #88c0d0;
    --xm-code-name: #88c0d0;
    --xm-code-string: #a3be8c;
    --xm-code-value: #ebcb8b;
    --xm-code-keyword: #c4a7bf;
    --xm-code-comment: #aab2c1;
    --xm-code-punct: #d8dee9;
}

/* Forest: deep greens. */
[data-palette="forest"] {
    --xm-bg: #13201a;
    --xm-page-bg: #13201a;
    --xm-surface: #1a2b23;
    --xm-surface-alt: #17261f;
    --xm-surface-hover: #22382d;
    --xm-card-border: #2d4a3c;
    --xm-border: #2d4a3c;
    --xm-border-soft: #263f33;
    --xm-text: #e4eee8;
    --xm-text-muted: #a3bcae;
    --xm-link: #7fd1a6;
    --xm-accent: #2f7d5b;
    --xm-accent-hover: #3a9069;
    --xm-accent-text: #7fd1a6;
    --xm-accent-text-hover: #a2e3c0;
    --xm-highlight: #d9c27a;
    --xm-selection: #24493a;
    --xm-row-alt: #1d3128;
    --xm-ribbon-bg: #22382d;
    --xm-control-border: #3f6654;
    --xm-control-hover: #2d4a3c;
    --xm-info-bg: #1b3a33;
    --xm-separator: #2d4a3c;
    --xm-code-toggle: #7fd1a6;
    --xm-code-name: #e6a87c;
    --xm-code-string: #a8d8a0;
    --xm-code-value: #d9c27a;
    --xm-code-keyword: #7fc8d1;
    --xm-code-comment: #7f9f8d;
    --xm-code-punct: #c3d4ca;
}

/* Mist: light, cool blue-greys. */
[data-palette="mist"] {
    --xm-bg: #f5f8fb;
    --xm-page-bg: #eaf0f6;
    --xm-surface: #ffffff;
    --xm-surface-alt: #eef3f8;
    --xm-surface-hover: #f1f6fb;
    --xm-card-border: #c9d6e3;
    --xm-border: #cfdbe7;
    --xm-border-soft: #e1e9f1;
    --xm-text: #102a43;
    --xm-text-muted: #52667a;
    --xm-link: #0b69a3;
    --xm-accent: #1769aa;
    --xm-accent-hover: #11568c;
    --xm-accent-text: #135c94;
    --xm-accent-text-hover: #0e4a78;
    --xm-selection: #d6e6f5;
    --xm-row-alt: #f0f5fa;
    --xm-ribbon-bg: #eaf0f6;
    --xm-control-border: #c3d1df;
    --xm-control-hover: #dde7f1;
    --xm-info-bg: #e8f2fb;
    --xm-separator: #102a43;
    --xm-code-toggle: #1769aa;
    --xm-code-name: #b4235a;
    --xm-code-string: #0b69a3;
    --xm-code-value: #2f7d32;
    --xm-code-keyword: #6b3fa0;
    --xm-code-comment: #657789;
    --xm-code-punct: #334e68;
}

/* Paper: light and warm, like a printed page. */
[data-palette="paper"] {
    --xm-bg: #fbf8f1;
    --xm-page-bg: #f3eee2;
    --xm-surface: #fffdf8;
    --xm-surface-alt: #f4efe3;
    --xm-surface-hover: #f6f1e6;
    --xm-card-border: #dccfb4;
    --xm-border: #d8ccb4;
    --xm-border-soft: #e8dfcc;
    --xm-text: #2b2418;
    --xm-text-muted: #6d6252;
    --xm-link: #8a4b0f;
    --xm-accent: #8a5a1c;
    --xm-accent-hover: #6f4714;
    --xm-accent-text: #7a4e14;
    --xm-accent-text-hover: #5c3a0e;
    --xm-highlight: #c39a4a;
    --xm-selection: #efe2c4;
    --xm-row-alt: #f5efe2;
    --xm-ribbon-bg: #f1eadb;
    --xm-control-border: #d2c4a8;
    --xm-control-hover: #ebe2cf;
    --xm-info-bg: #f6efe0;
    --xm-separator: #3a2f1f;
    --xm-code-toggle: #8a5a1c;
    --xm-code-name: #a3361b;
    --xm-code-string: #1f5a8a;
    --xm-code-value: #3f6e1f;
    --xm-code-keyword: #7a2e8a;
    --xm-code-comment: #817256;
    --xm-code-punct: #4a4030;
}

/* Sky: light, crisp white cards on a pale blue page. */
[data-palette="sky"] {
    --xm-bg: #f7fbff;
    --xm-page-bg: #eaf4fd;
    --xm-surface: #ffffff;
    --xm-surface-alt: #f0f7fe;
    --xm-surface-hover: #f3f9ff;
    --xm-card-border: #c5dcf2;
    --xm-border: #cde0f3;
    --xm-border-soft: #e0edf9;
    --xm-text: #0b2540;
    --xm-text-muted: #4b6584;
    --xm-link: #0063c6;
    --xm-accent: #0a6ad6;
    --xm-accent-hover: #0856ad;
    --xm-accent-text: #0058b0;
    --xm-accent-text-hover: #00478f;
    --xm-selection: #d3e8fc;
    --xm-row-alt: #f2f8fe;
    --xm-ribbon-bg: #eaf4fd;
    --xm-control-border: #b9d3ec;
    --xm-control-hover: #dcebfa;
    --xm-info-bg: #e3f1fd;
    --xm-separator: #0b2540;
    --xm-code-toggle: #0a6ad6;
    --xm-code-name: #c0265e;
    --xm-code-string: #0063c6;
    --xm-code-value: #1e7f3e;
    --xm-code-keyword: #7a3fc0;
    --xm-code-comment: #5c7591;
    --xm-code-punct: #2f4a66;
}

/* Sage: light, pale green-greys, the calm partner of Forest. */
[data-palette="sage"] {
    --xm-bg: #f6f8f4;
    --xm-page-bg: #e9efe6;
    --xm-surface: #fdfefc;
    --xm-surface-alt: #eff3ec;
    --xm-surface-hover: #f2f6ef;
    --xm-card-border: #c9d6c3;
    --xm-border: #cfdac9;
    --xm-border-soft: #e2e9de;
    --xm-text: #1f2a1c;
    --xm-text-muted: #56634f;
    --xm-link: #2f6b3f;
    --xm-accent: #3f7a52;
    --xm-accent-hover: #326443;
    --xm-accent-text: #2f6b3f;
    --xm-accent-text-hover: #23512f;
    --xm-selection: #dbe8d6;
    --xm-row-alt: #f1f5ee;
    --xm-ribbon-bg: #e9efe6;
    --xm-control-border: #c3d0bd;
    --xm-control-hover: #dde6d8;
    --xm-info-bg: #e6efe3;
    --xm-separator: #1f2a1c;
    --xm-code-toggle: #3f7a52;
    --xm-code-name: #9b3b2a;
    --xm-code-string: #2d5f8a;
    --xm-code-value: #3f6e1f;
    --xm-code-keyword: #7a3b8a;
    --xm-code-comment: #6b7765;
    --xm-code-punct: #3b4637;
}

/* Graphite: neutral greys, no blue in them. */
[data-palette="graphite"] {
    --xm-bg: #1a1a1a;
    --xm-page-bg: #1a1a1a;
    --xm-surface: #242424;
    --xm-surface-alt: #1f1f1f;
    --xm-surface-hover: #2e2e2e;
    --xm-card-border: #3a3a3a;
    --xm-border: #3a3a3a;
    --xm-border-soft: #303030;
    --xm-text: #e6e6e6;
    --xm-text-muted: #a8a8a8;
    --xm-link: #8ab4f8;
    --xm-accent: #3d6db5;
    --xm-accent-hover: #4a7cc4;
    --xm-accent-text: #9ec1f7;
    --xm-accent-text-hover: #bcd4fa;
    --xm-selection: #2f3d52;
    --xm-row-alt: #202020;
    --xm-ribbon-bg: #242424;
    --xm-control-border: #555555;
    --xm-control-hover: #333333;
    --xm-info-bg: #23303f;
    --xm-separator: #3a3a3a;
}

/* Ocean: teals and sea blues. */
[data-palette="ocean"] {
    --xm-bg: #0b1f26;
    --xm-page-bg: #0b1f26;
    --xm-surface: #10303a;
    --xm-surface-alt: #0d2a33;
    --xm-surface-hover: #164049;
    --xm-card-border: #1f5260;
    --xm-border: #1f4c58;
    --xm-border-soft: #1a414c;
    --xm-text: #e2f1f4;
    --xm-text-muted: #94bcc6;
    --xm-link: #4fd1c5;
    --xm-accent: #0f7d8c;
    --xm-accent-hover: #13909f;
    --xm-accent-text: #4fd1c5;
    --xm-accent-text-hover: #81e6d9;
    --xm-highlight: #f6c177;
    --xm-selection: #15505d;
    --xm-row-alt: #0f2e37;
    --xm-ribbon-bg: #164049;
    --xm-control-border: #2f6b78;
    --xm-control-hover: #1d4f5b;
    --xm-info-bg: #12404b;
    --xm-separator: #1f5260;
    --xm-code-toggle: #4fd1c5;
    --xm-code-name: #f6a77c;
    --xm-code-string: #7fe0c8;
    --xm-code-value: #f6c177;
    --xm-code-keyword: #7cc7f6;
    --xm-code-comment: #6f9aa5;
    --xm-code-punct: #b9d6dc;
}

/* XMap: the logo's navy and gold, as the sign-in page's picture. */
[data-palette="xmap"] {
    --xm-bg: #081326;
    --xm-page-bg: #081326;
    --xm-surface: #0d2244;
    --xm-surface-alt: #0b1c38;
    --xm-surface-hover: #13305e;
    --xm-card-border: #1d3f72;
    --xm-border: #1b3a69;
    --xm-border-soft: #16325c;
    --xm-text: #e8eef8;
    --xm-text-muted: #a6b6cf;
    --xm-link: #d6c48f;
    --xm-accent: #2f5d8c;
    --xm-accent-hover: #3a6fa6;
    --xm-accent-text: #d6c48f;
    --xm-accent-text-hover: #e6d9b0;
    --xm-highlight: #d6c48f;
    --xm-selection: #1d3f72;
    --xm-row-alt: #0f2650;
    --xm-ribbon-bg: #0d2244;
    --xm-control-border: #2c5288;
    --xm-control-hover: #1a3a6b;
    --xm-info-bg: #12305a;
    --xm-separator: #1d3f72;
    --xm-code-toggle: #d6c48f;
    --xm-code-name: #d6c48f;
    --xm-code-string: #9cc3f5;
    --xm-code-value: #8fd6b0;
    --xm-code-keyword: #c3a6f0;
    --xm-code-comment: #7f93b3;
    --xm-code-punct: #c3d0e4;
}

/* ---------------------------------------------------------------- accessibility
   High contrast: every text at least 7:1 (WCAG AAA), borders as firm as the text, and the place of the keyboard
   always marked (below). Colour-blind safe: the colours that tell things apart (problem, reference, open question,
   the statuses and kinds) taken from the Okabe-Ito set, told apart with every common colour-vision deficiency; red and
   green, which most cannot tell apart, are not used for that. */

/* High contrast, dark: black, white text, yellow for links, focus and what is selected. */
[data-palette="hc-dark"] {
    --xm-bg: #000000;
    --xm-page-bg: #000000;
    --xm-surface: #000000;
    --xm-surface-alt: #0a0a0a;
    --xm-surface-hover: #1a1a1a;
    --xm-card-border: #ffffff;
    --xm-card-shadow: none;
    --xm-border: #ffffff;
    --xm-border-soft: #8a8a8a;
    --xm-text: #ffffff;
    --xm-text-muted: #e0e0e0;
    --xm-link: #ffff00;
    --xm-accent: #0050c8;
    --xm-accent-hover: #0062f0;
    --xm-accent-text: #ffff00;
    --xm-accent-text-hover: #ffffa0;
    --xm-highlight: #ffff00;
    --xm-selection: #00377a;
    --xm-row-alt: #0d0d0d;
    --xm-ribbon-bg: #000000;
    --xm-control-border: #ffffff;
    --xm-control-hover: #262626;
    --xm-info-bg: #001a33;
    --xm-separator: #ffffff;
    --xm-overlay: rgba(0, 0, 0, 0.8);
    --xm-code-toggle: #ffff00;
    --xm-code-name: #ffd700;
    --xm-code-string: #7fffd4;
    --xm-code-value: #00ff7f;
    --xm-code-keyword: #87cefa;
    --xm-code-comment: #c0c0c0;
    --xm-code-punct: #ffffff;
}

/* High contrast, light: white, black text, deep blue for links, focus and what is selected. */
[data-palette="hc-light"] {
    --xm-bg: #ffffff;
    --xm-page-bg: #ffffff;
    --xm-surface: #ffffff;
    --xm-surface-alt: #f2f2f2;
    --xm-surface-hover: #e8e8e8;
    --xm-card-border: #000000;
    --xm-card-shadow: none;
    --xm-border: #000000;
    --xm-border-soft: #595959;
    --xm-text: #000000;
    --xm-text-muted: #2b2b2b;
    --xm-link: #0000c8;
    --xm-accent: #0030a0;
    --xm-accent-hover: #001f70;
    --xm-accent-text: #0000c8;
    --xm-accent-text-hover: #00008a;
    --xm-highlight: #7a5c00;
    --xm-selection: #cce0ff;
    --xm-row-alt: #f2f2f2;
    --xm-ribbon-bg: #ffffff;
    --xm-control-border: #000000;
    --xm-control-hover: #e0e0e0;
    --xm-info-bg: #e6f0ff;
    --xm-separator: #000000;
    --xm-error-text: #a00000;
    --xm-warning-text: #7a4a00;
    --xm-status-success: #0f6b2e;
    --xm-code-toggle: #0030a0;
    --xm-code-name: #9b0000;
    --xm-code-string: #0000a8;
    --xm-code-value: #005a00;
    --xm-code-keyword: #6a00a8;
    --xm-code-comment: #4a4a4a;
    --xm-code-punct: #000000;
}

/* Dim: a softer dark, less contrast between text and background, for long sessions; text still at least 4.5:1. */
[data-palette="dim"] {
    --xm-bg: #22272e;
    --xm-page-bg: #22272e;
    --xm-surface: #2d333b;
    --xm-surface-alt: #262c34;
    --xm-surface-hover: #343b45;
    --xm-card-border: #444c56;
    --xm-card-shadow: none;
    --xm-border: #444c56;
    --xm-border-soft: #3a414b;
    --xm-text: #c9d1d9;
    --xm-text-muted: #969ea7;
    --xm-link: #6cb6ff;
    --xm-accent: #316dca;
    --xm-accent-hover: #4184e4;
    --xm-accent-text: #6cb6ff;
    --xm-accent-text-hover: #96d0ff;
    --xm-selection: #2d4466;
    --xm-row-alt: #2a3038;
    --xm-ribbon-bg: #2d333b;
    --xm-control-border: #545d68;
    --xm-control-hover: #3d444d;
    --xm-info-bg: #253446;
    --xm-separator: #444c56;
    --xm-code-toggle: #6cb6ff;
    --xm-code-name: #f57971;
    --xm-code-string: #96d0ff;
    --xm-code-value: #8ddb8c;
    --xm-code-keyword: #dcbdfb;
    --xm-code-comment: #969ea7;
    --xm-code-punct: #adbac7;
}

/* Colour-blind safe (dark): as the light one, in the Okabe-Ito colours lightened for a dark background. */
[data-palette="colorblind-dark"] {
    --xm-status-success: #56b4e9;
    --xm-status-ok: #17324a;
    --xm-status-ok-text: #a6d4f2;
    --xm-error-text: #f0965a;
    --xm-error-bg: #3a2010;
    --xm-error-border: #7a3d1a;
    --xm-status-error: #5a2a12;
    --xm-danger: #c5530a;
    --xm-danger-hover: #a84a00;
    --xm-warning-text: #f0e442;
    --xm-warning-bg: #3a3413;
    --xm-unsaved-dot: #e69f00;
    --xm-kind-question: #e48fc8;
    --xm-kind-question-bg: #4a2440;
    --xm-status-question: #4a2440;
    --xm-kind-link: #7ec3ef;
    --xm-kind-link-bg: #173450;
    --xm-kind-loop: #5cc9a7;
    --xm-kind-loop-bg: #133b31;
    --xm-kind-if: #f2cc6b;
    --xm-kind-if-bg: #3d3014;
}

/* The keyboard's place, always in sight: 3px in the palette's link colour, around whatever has the focus. */
[data-palette="hc-dark"] :focus-visible,
[data-palette="hc-light"] :focus-visible {
    outline: 3px solid var(--xm-accent-text) !important;
    outline-offset: 2px;
}

/* Colour-blind safe (light): blue where green was (a reference, done, valid), vermillion where red was (a problem, an
   error), reddish purple for an open question, so none of the three is told apart by red against green. */
[data-palette="colorblind"] {
    --xm-status-success: #0072b2;
    --xm-status-ok: #cfe6f5;
    --xm-status-ok-text: #00466e;
    --xm-error-text: #a84a00;
    --xm-error-bg: #fbe3d3;
    --xm-error-border: #e8a77a;
    --xm-status-error: #f6c9ad;
    --xm-danger: #a84a00;
    --xm-danger-hover: #8a3c00;
    --xm-warning-text: #8a6400;
    --xm-warning-bg: #fdf6d3;
    --xm-unsaved-dot: #e69f00;
    --xm-kind-question: #9c3d7a;
    --xm-kind-question-bg: #f6e3ef;
    --xm-status-question: #f0c6df;
    --xm-kind-link: #005a8c;
    --xm-kind-link-bg: #e1eef7;
    --xm-kind-loop: #006e52;
    --xm-kind-loop-bg: #dff2ec;
    --xm-kind-if: #7a5200;
    --xm-kind-if-bg: #fff1cc;
}

/* ================================================================== the Syncfusion controls
   Their Tailwind 3 stylesheet (_Host.cshtml) colours every control from --color-sf-* variables; set here from the
   tokens, for every theme, so dialogs, dropdowns, trees and grids match the page instead of Syncfusion's own grey and
   indigo. html[data-theme] outranks the stylesheet's own :root. */
html[data-theme] {
    --color-sf-primary: var(--xm-accent);
    --color-sf-primary-text-color: #ffffff;
    --color-sf-primary-light: var(--xm-selection);
    --color-sf-primary-lighter: var(--xm-selection);
    --color-sf-primary-dark: var(--xm-accent-hover);
    --color-sf-primary-darker: var(--xm-accent-hover);
    --color-sf-primary-bg-color: var(--xm-accent);
    --color-sf-primary-border-color: var(--xm-accent);
    --color-sf-primary-bg-color-hover: var(--xm-accent-hover);
    --color-sf-primary-border-color-hover: var(--xm-accent-hover);
    --color-sf-primary-bg-color-pressed: var(--xm-accent-hover);
    --color-sf-primary-border-color-pressed: var(--xm-accent-hover);
    --color-sf-primary-bg-color-focus: var(--xm-accent-hover);
    --color-sf-primary-border-color-focus: var(--xm-accent-hover);
    --color-sf-primary-outline: var(--xm-accent);

    --color-sf-content-bg-color: var(--xm-surface);
    --color-sf-content-bg-color-alt1: var(--xm-surface-alt);
    --color-sf-content-bg-color-alt2: var(--xm-surface-alt);
    --color-sf-content-bg-color-alt3: var(--xm-surface-hover);
    --color-sf-content-bg-color-hover: var(--xm-surface-hover);
    --color-sf-content-bg-color-pressed: var(--xm-control-hover);
    --color-sf-content-bg-color-focus: var(--xm-surface-hover);
    --color-sf-content-bg-color-selected: var(--xm-selection);
    --color-sf-content-bg-color-dragged: var(--xm-surface-hover);
    --color-sf-flyout-bg-color: var(--xm-surface);
    --color-sf-flyout-bg-color-hover: var(--xm-surface-hover);
    --color-sf-flyout-bg-color-pressed: var(--xm-control-hover);
    --color-sf-flyout-bg-color-focus: var(--xm-surface-hover);
    --color-sf-flyout-bg-color-selected: var(--xm-selection);
    --color-sf-table-bg-color-hover: var(--xm-surface-hover);
    --color-sf-table-bg-color-pressed: var(--xm-control-hover);
    --color-sf-table-bg-color-selected: var(--xm-selection);
    --color-sf-text-input-bg-color: var(--xm-surface);
    --color-sf-treeview-item-active-hover-bg: var(--xm-selection);

    --color-sf-content-text-color: var(--xm-text);
    --color-sf-content-text-color-alt1: var(--xm-text);
    --color-sf-content-text-color-alt2: var(--xm-text-muted);
    --color-sf-content-text-color-alt3: var(--xm-text-muted);
    --color-sf-content-text-color-hover: var(--xm-text);
    --color-sf-content-text-color-pressed: var(--xm-text);
    --color-sf-content-text-color-focus: var(--xm-text);
    --color-sf-content-text-color-selected: var(--xm-text);
    --color-sf-content-text-color-dragged: var(--xm-text);
    --color-sf-placeholder-text-color: var(--xm-text-muted);
    --color-sf-flyout-text-color: var(--xm-text);
    --color-sf-flyout-text-color-hover: var(--xm-text);
    --color-sf-flyout-text-color-pressed: var(--xm-text);
    --color-sf-flyout-text-color-focus: var(--xm-text);
    --color-sf-flyout-text-color-selected: var(--xm-text);
    --color-sf-table-text-color-hover: var(--xm-text);
    --color-sf-table-text-color-pressed: var(--xm-text);
    --color-sf-table-text-color-selected: var(--xm-text);
    --color-sf-icon-color: var(--xm-text-muted);
    --color-sf-icon-color-hover: var(--xm-text);
    --color-sf-icon-color-pressed: var(--xm-text);
    --color-sf-close-icon-color: var(--xm-text-muted);
    --color-sf-close-icon-color-hover: var(--xm-text);
    --color-sf-close-icon-color-pressed: var(--xm-text);

    --color-sf-border-light: var(--xm-border-soft);
    --color-sf-border: var(--xm-border);
    --color-sf-border-hover: var(--xm-control-border);
    --color-sf-border-pressed: var(--xm-control-border);
    --color-sf-border-focus: var(--xm-accent);
    --color-sf-border-selected: var(--xm-accent);
    --color-sf-border-dragged: var(--xm-border);
    --color-sf-flyout-border: var(--xm-border-soft);
    --color-sf-overlay-bg-color: var(--xm-overlay);

    /* The four conversions (maps library, lineage): shades of the accent, from XML to XML, darkest, to JSON to JSON,
       lightest, as the fixed blues before them were; so each palette has its own. */
    --xm-conv-xmltoxml: var(--xm-accent);
    --xm-conv-xmltojson: color-mix(in srgb, var(--xm-accent) 82%, #ffffff);
    --xm-conv-jsontoxml: color-mix(in srgb, var(--xm-accent) 68%, #ffffff);
    --xm-conv-jsontojson: color-mix(in srgb, var(--xm-accent) 55%, #ffffff);
    /* A map with a CSV side (Helper/ConversionLabels): one more shade of the accent, a little deeper than XML to XML. */
    --xm-conv-flatfile: color-mix(in srgb, var(--xm-accent) 78%, #000000);
}

html, body {
    background-color: var(--xm-bg);
    color: var(--xm-text);
}

/* Buttons marked e-info (a primary action on several pages) are the accent in every state: Syncfusion's own info
   colour, a cyan, showed once one kept focus after a click (Create XMap after its menu was used). */
.e-btn.e-info,
.e-btn.e-info:focus,
.e-btn.e-info:focus-visible,
.e-btn.e-info:active,
.e-btn.e-info.e-active {
    background-color: var(--xm-accent);
    border-color: var(--xm-accent);
    color: #ffffff;
}

    .e-btn.e-info:hover,
    .e-btn.e-info:focus,
    .e-btn.e-info:active,
    .e-btn.e-info.e-active {
        background-color: var(--xm-accent-hover);
        border-color: var(--xm-accent-hover);
    }

    .e-btn.e-info:focus-visible {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--xm-accent) 35%, transparent);
    }

/* A primary (or info) button that is disabled, as Create XMap is while the map is made: the accent, faded, not
   Syncfusion's own disabled colour (a light indigo) that has nothing to do with the theme. */
.e-btn.e-primary:disabled,
.e-btn.e-primary.e-disabled,
.e-btn.e-info:disabled,
.e-btn.e-info.e-disabled {
    background-color: color-mix(in srgb, var(--xm-accent) 55%, var(--xm-surface));
    border-color: color-mix(in srgb, var(--xm-accent) 55%, var(--xm-surface));
    color: #ffffff;
    opacity: .85;
    box-shadow: none;
}

/* The monochrome SVG icons (tree nodes, source/target buttons) use currentColor, which is black
   when loaded through <img>. */
[data-theme="dark"] img[src^="images/svg/"]:not([src$="xmapXLogo.svg"]) {
    filter: invert(0.9);
}

/* The Tailwind utility classes used in markup hardcode light colours; remap them in dark and in every palette, light
   ones included: a sample pane (bg-white) stayed pure white on Paper. Plain Light keeps Tailwind's own. */
:is([data-theme="dark"], [data-palette]) .bg-white { background-color: var(--xm-surface) !important; }
:is([data-theme="dark"], [data-palette]) .bg-gray-200 { background-color: var(--xm-surface-hover) !important; }
:is([data-theme="dark"], [data-palette]) .bg-red-100 { background-color: var(--xm-error-bg) !important; }
:is([data-theme="dark"], [data-palette]) .text-gray-900 { color: var(--xm-text) !important; }
:is([data-theme="dark"], [data-palette]) .text-red-700,
:is([data-theme="dark"], [data-palette]) .text-red-500 { color: var(--xm-error-text) !important; }
:is([data-theme="dark"], [data-palette]) .border-gray-200 { border-color: var(--xm-border-soft) !important; }
:is([data-theme="dark"], [data-palette]) .border-red-400 { border-color: var(--xm-error-border) !important; }

/* XPilot logo: both variants are rendered, the one for the other theme is hidden. The PNGs have a
   solid margin around the rounded tile; clip it off so only the tile shows on any background. */
.xpilot-logo {
    clip-path: inset(10% round 18%);
}
.xpilot-logo-dark { display: none; }
[data-theme="dark"] .xpilot-logo-light { display: none; }
[data-theme="dark"] .xpilot-logo-dark { display: inline-block; }