/*
	App-wide colour tokens: the only place a colour literal may appear.
	Loaded first by _SiteLayout, _SiteRestrictedLayout and HTMLEditor/Editor; scripts read them
	through ViewUtils.Color() and re-read them on the document 'themechange' event.

	Light is the bare :root block; the dark blocks at the end override part of it. A few tokens exist
	only in dark and are read with a fallback, var(--color-text-on-status, var(--color-text-inverse)),
	where a light token plays two roles that dark has to split.

	Groups, by role rather than by hue:
	  text      text, text-* levels; text-inverse is text on dark or coloured fills,
	            text-on-bright is text on fixed bright fills (status badges, marks)
	  surface   page, surface (cards, inputs), surface-raised (menus, popovers, dialogs),
	            surface-alt / -panel / -muted / -sunken / -tint, hover states, translucent veils
	  border    border, border-*, divider-*
	  input     form controls (input-bg, input-text); their border is border-input
	  brand     primary (#075781: navbar, primary actions), brand (#467495: controls, table heads),
	            accent (navbar highlight), link, selection, focus
	  state     success / warning / danger / info / error (+ -bg / -border / -text), neutral, chips
	  status    player and screen status (status-*)
	  overlay   overlay-*, shade-*, shadow-*
	  charts    chart-*, perf-* (server performance), preview-* (screen layout preview)
	  component tokens where a role is specific to one feature (console, ticket, xovis, editor...)
*/
:root {
	color-scheme: light;

	/* text */
	--color-text: #000;
	--color-text-strong: #111;
	--color-text-heading: #1f2d3a;
	--color-text-body: #222;
	--color-text-secondary: #333;
	--color-text-soft: #3b3b3b;
	--color-text-header: darkslategray;
	--color-text-tertiary: #555;
	--color-text-muted: #5c6b7a;
	--color-text-subtle: #666;
	--color-text-dim: dimgray;
	--color-text-faint: #777;
	--color-text-hint: gray;
	--color-text-disabled: #999;
	--color-text-placeholder: #aaa;
	--color-text-pale: #b9b9b9;
	--color-text-inverse: #fff;
	--color-text-on-bright: #000;
	--color-text-shadow: rgba(0, 0, 0, 0.6);

	/* surfaces */
	--color-page: #F0F4FA;
	--color-surface: #fff;
	--color-surface-raised: #fff;
	--color-surface-alt: #F1F5F9;
	--color-surface-panel: #e6eeee;
	--color-surface-muted: #eee;
	--color-surface-subtle: #f5f5f5;
	--color-surface-sunken: #f9f9f9;
	--color-surface-tint: #F0F4FA;
	--color-surface-hover: #f0f0f0;
	--color-surface-hover-strong: lightgray;
	--color-surface-hover-tint: #eef4f8;
	--color-surface-inverse: #000;
	--color-surface-translucent: rgba(255, 255, 255, 0.7);
	--color-surface-frost: rgba(255, 255, 255, 0.35);
	--color-surface-veil: rgba(255, 255, 255, 0.85);
	--color-menu-bg: #f9f9f9;
	--color-highlight: #d1ecff;
	--color-highlight-soft: #e2f1ff;
	--color-highlight-text: #d1ecff;
	--color-mark: #ff0;
	--color-mark-hover: rgb(255, 239, 128);

	/* borders */
	--color-border: #dbe3ec;
	--color-border-strong: #888;
	--color-border-emphasis: #5c6b7a;
	--color-border-control: gray;
	--color-border-muted: #999;
	--color-border-light: #ccc;
	--color-border-soft: #d9d9d9;
	--color-border-subtle: #ddd;
	--color-border-faint: #eee;
	--color-border-contrast: #000;
	--color-border-translucent: rgba(0, 0, 0, .2);
	--color-border-input: #275d84;
	--color-border-input-soft: #d1ecff;
	--color-border-input-hover: rgb(74, 162, 204);
	--color-divider: #d3d3d3;
	--color-divider-strong: #bbb;
	--color-divider-faint: #f2f2f2;
	--color-column-rule: #f8f8ff;
	--color-table-cell-divider: aliceblue;
	--color-permission-border: rgb(204, 221, 234);

	/* form controls: the browser's own light defaults */
	--color-input-bg: #fff;
	--color-input-text: #000;

	/* brand, links, selection, focus */
	--color-primary: #075781;
	--color-primary-text: #075781;
	--color-primary-hover: #06344c;
	--color-primary-strong: #06344c;
	--color-brand: #467495;
	--color-brand-text: #467495;
	--color-brand-hover: rgb(50, 96, 129);
	--color-brand-tint: rgba(70, 116, 149, 0.08);
	--color-button-bg: #467495;
	--color-accent: #FC7A1E;
	--color-icon: var(--color-brand-text);
	--color-link: #275d84;
	--color-link-hover: #6d98b6;
	--color-link-active: #1d60ff;
	--color-selected: #275d84;
	--color-selected-soft: #d7e8f4;
	--color-active: var(--color-selected);
	--color-focus: #075781;
	--color-focus-brand: #467495;
	--color-focus-strong: #0b6fb3;

	/* states */
	--color-success: #157f42;
	--color-success-text: #157f42;
	--color-success-text-strong: #1d6b34;
	--color-success-bg: #dff0e4;
	--color-success-border: #b9dcc3;
	--color-success-border-strong: #11703a;
	--color-warning: #8a5b06;
	--color-warning-text: #8a5b06;
	--color-warning-bg: #fdf0d9;
	--color-warning-bg-soft: #fdf9f0;
	--color-warning-bg-faint: #fffaf0;
	--color-warning-border: #f2ddb3;
	--color-danger: #97231f;
	--color-danger-text: #97231f;
	--color-danger-bg: #fbe0e0;
	--color-danger-border: #f0bfbe;
	--color-danger-border-strong: #cf4b45;
	--color-danger-glow: rgba(207, 75, 69, 0.16);
	--color-danger-bright: #dc3545;
	--color-danger-hover: #7a1c19;
	--color-info-text: #1c4f7c;
	--color-info-bg: #E6F0FA;
	--color-info-border: #c3d9ee;
	--color-error: #f00;
	--color-error-text: #f00;
	--color-error-text-strong: #c00;
	--color-error-border: #f00;
	--color-error-bg: #ffe1d9;
	--color-alert-text: #c90000;
	--color-attention: #d9822b;
	--color-attention-text: #a85b00;
	--color-attention-bg: #fff8f0;
	--color-neutral-text: #6a7580;
	--color-neutral-bg: #eceef0;
	--color-neutral-bg-soft: #f1f3f5;
	--color-neutral-border: #dcdfe3;
	--color-neutral-border-soft: #e0e4e8;
	--color-activation-success: rgb(0, 201, 0);
	--color-activation-error: rgb(201, 0, 0);

	/* chips and badges (command status, live view tags, auto-login) */
	--color-badge: #ff8c00;
	--color-badge-alert: #d0021b;
	--color-chip-neutral-bg: #eee;
	--color-chip-neutral-strong-bg: #e6e6e6;
	--color-chip-success-bg: #dff0d8;
	--color-chip-success-text: #2d5f2d;
	--color-chip-error-bg: #f2dede;
	--color-chip-error-text: #a12;
	--color-chip-warning-bg: #fcf8e3;
	--color-chip-warning-text: #7a6a00;
	--color-chip-info-bg: #d9edf7;
	--color-chip-info-text: #22536b;
	--color-chip-live-bg: #2d8a3e;
	--color-chip-hidden-bg: #f0ad4e;

	/* player / screen status */
	--color-status-online: #4a90e2;
	--color-status-offline: gray;
	--color-status-offline-soft: #9b9b9b;
	--color-status-warning: #f5a623;
	--color-status-degraded: #e8730c;
	--color-status-error: #d0021b;
	--color-status-late: #c9302c;

	/* table rows */
	--color-row-stripe: #e6f0fa;
	--color-row-deleted: rgb(241, 242, 243);
	--color-row-expired: rgb(207, 63, 111);
	--color-row-expired-bg: #fbe4ec;
	--color-row-expanded: #99d3ff;
	--color-row-failed: #fdecea;
	--color-row-error: #f15456;
	--color-row-error-link: #0efdfb;
	--color-row-warning: #fff48e;
	--color-row-warning-text: #5b000a;
	--color-log-error-bg: rgb(245, 144, 117);
	--color-log-error-archived-bg: #ffe1d9;
	--color-log-warning-bg: rgb(255, 221, 122);
	--color-log-warning-archived-bg: rgb(255, 245, 217);
	--color-table-bg: #CDCDCD;
	--color-table-row-odd: #F0F0F6;
	--color-table-head-sorted: #8dbdd8;

	/* overlays, shades, shadows */
	--color-overlay: rgba(0, 0, 0, 0.5);
	--color-overlay-strong: rgba(0, 0, 0, 0.55);
	--color-overlay-caption: rgba(0, 0, 0, 0.65);
	--color-scrim: rgba(15, 30, 45, 0.4);
	--color-shade-subtle: rgba(0, 0, 0, 0.02);
	--color-shade: rgba(0, 0, 0, 0.1);
	--color-shade-strong: rgba(0, 0, 0, 0.15);
	--color-shadow-subtle: rgba(0, 0, 0, 0.1);
	--color-shadow-soft: rgba(0, 0, 0, 0.15);
	--color-shadow-raised: rgba(0, 0, 0, 0.16);
	--color-shadow: rgba(0, 0, 0, 0.2);
	--color-shadow-strong: rgba(0, 0, 0, 0.3);
	--color-shadow-dialog: rgba(0, 0, 0, 0.35);
	--color-shadow-heavy: rgba(0, 0, 0, 0.5);
	--color-shadow-tinted: rgba(6, 52, 76, 0.12);
	--color-shadow-menu: rgba(15, 35, 55, 0.14);

	/* charts */
	--color-chart-1: #075781;
	--color-chart-1-fill: rgba(7, 87, 129, 0.12);
	--color-chart-2: #2e9e52;
	--color-chart-2-fill: rgba(46, 158, 82, 0.12);
	--color-chart-3: #5a88a6;
	--color-chart-forecast-online: rgba(74, 144, 226, 0.85);
	--color-chart-forecast-offline: rgba(208, 2, 27, 0.85);
	--color-perf-grid: rgba(0,0,0,0.62);
	--color-perf-grid-line: rgba(255,255,255,0.14);
	--color-perf-label: #ffffff;
	--color-perf-tooltip-line: #bbbbbb;
	--color-perf-tooltip-bg: #777;
	--color-perf-ok: #00ff00;
	--color-perf-ok-fill: rgba(0,255,0,0.30);
	--color-perf-high: #fbff00;
	--color-perf-high-fill: rgba(223,217,42,0.30);
	--color-perf-critical: #ec3232;
	--color-perf-critical-fill: rgba(160,28,28,0.30);
	--color-perf-secondary: #184ecd;
	--color-perf-secondary-fill: rgba(1,28,70,0.30);
	--color-preview-screen-bg: WhiteSmoke;
	--color-preview-screen-text: darkgrey;
	--color-preview-screen-border: lightgrey;
	--color-preview-screen-shadow: rgba(0, 0, 0, 0.6);
	--color-preview-overlap: #ff8c00;
	--color-preview-player-border: black;

	/* navigation and shared controls */
	--color-nav-bg: var(--color-primary);
	--color-nav-border: transparent;
	--color-nav-flyout-bg: var(--color-brand);
	--color-nav-glyph: rgb(76, 126, 161);
	--color-nav-glyph-bg: #fff;
	--color-nav-hover-bg: rgba(255,255,255,0.1);
	--color-nav-gradient-start: #6C97B6;
	--color-nav-gradient-end: #5c87b2;
	--color-tab-hover-bg: rgb(200, 215, 220);
	--color-button-secondary-bg: #e4e8ec;
	--color-button-secondary-text: #3b4651;
	--color-button-secondary-hover-bg: #d3d9df;
	--color-button-neutral-bg: #f2f2f2;
	--color-button-neutral-border: #b9b9b9;
	--color-button-neutral-hover-bg: #e6e6e6;
	--color-toggle-track: #ccc;
	--color-toggle-thumb: white;
	--color-toggle-off-bg: lightgrey;
	--color-loader-track: #f3f3f3;
	--color-meter-track: #e0e0e0;
	--color-progress-track: #dbe3ec;
	--color-scrollbar-thumb: #5a88a6;
	--color-scrollbar-thumb-hover: #555;
	--color-scrollbar-track: #06344c;
	--color-scrollbar-glow: rgba(255, 255, 255, .5);
	--color-drag-handle: #6b7a86;
	--color-drag-item: #29e;
	--color-drop-target: #c8ebfb;
	--color-dropzone-border: #c8dcea;
	--color-dropzone-border-hover: #5b9cc4;
	--color-dropzone-bg-hover: #f0f7fd;
	--color-dropzone-icon: #8aafcc;
	--color-logon-gradient-start: #fff;
	--color-logon-gradient-end: rgb(237, 242, 248);
	--color-bevel-highlight: #fff;
	--color-bevel-highlight-soft: rgba(255, 255, 255, 0.9);
	--color-capture-nav-bg: #f6f6f6;
	--color-device-code: #1f5f8b;

	/* dashboard */
	--color-dashboard-accent: #4a90e2;
	--color-dashboard-accent-hover: #3a7fd0;
	--color-dashboard-active-bg: #e8f4fd;
	--color-dashboard-active-hover-bg: #d0e8fa;
	--color-dashboard-hover-bg: #eaf2fd;
	--color-pulse-cell: #ebedf0;
	--color-pulse-cell-none: #f2b8b8;
	--color-pulse-cell-before-border: #c8c8c8;
	--color-pulse-current: #4a90e2;

	/* live view */
	--color-liveview-border: #d5dbe1;
	--color-media-backdrop: #000;
	--color-media-backdrop-alt: #111;
	--color-media-frame: #333;

	/* help pages */
	--color-help-link: #0b4a8a;
	--color-help-accent: #d9e8fb;
	--color-help-quote-bg: #f9fbfe;
	--color-code-bg: #f4f4f4;
	--color-code-block-bg: #2d2d2d;
	--color-code-block-text: #f2f2f2;

	/* xovis flow-tracking report */
	--color-xovis-accent: #255681;
	--color-xovis-warning: #dabe42;
	--color-xovis-button-hover: #E1BC29;
	--color-xovis-card-border: lightblue;
	--color-xovis-card-shadow: rgba(175, 217, 231, 0.5);
	--color-xovis-modal-bg: #fefefe;
	--color-xovis-cell-border: gainsboro;

	/* HTML template editor (its preview shows the template as a player renders it) */
	--color-editor-accent: hsl(205deg 34% 55%);
	--color-editor-text: rgb(240, 240, 240);
	--color-editor-text-strong: white;
	--color-editor-placeholder: #dfdcdc;
	--color-editor-warning-text: #ffb6b6;
	--color-editor-recover: #ff6d6d;
	--color-editor-scrollbar-thumb: #888;
	--color-editor-preview-bg: white;
	--color-editor-preview-text: black;

	/* ticketing */
	--color-ticket-status-open: #1c4f7c;
	--color-ticket-status-progress: #1d6b34;
	--color-ticket-status-waiting: #8a5b06;
	--color-ticket-status-blocked: #97231f;
	--color-ticket-status-resolved: #157f42;
	--color-ticket-status-closed: #6a7580;
	--color-ticket-status-onsite: #8a5b06;
	--color-ticket-status-duplicate: #5b2b7b;
	--color-ticket-status-unknown: #7a8794;
	--color-ticket-internal-bg: #efe3f6;
	--color-ticket-internal-text: #62347e;
	--color-ticket-internal-border: #ddc9ea;
	--color-ticket-internal-entry-bg: #faf5fd;
	--color-ticket-internal-entry-border: #e7d8f0;
	--color-ticket-note-tab: #6b2f8f;
	--color-ticket-note-bg: #fdf6e3;
	--color-ticket-note-border: #e0c88a;
	--color-ticket-note-toolbar-bg: #f9edd0;
	--color-ticket-resolved-bg: #dff3e7;
	--color-ticket-resolved-text: #11663a;
	--color-ticket-resolved-border: #b6dfc6;
	--color-ticket-console-bg: #1f2d3a;
	--color-ticket-console-text: #e8eef4;
	--color-ticket-bar: #5a88a6;
	--color-ticket-bar-low: #7a8794;
	--color-ticket-bar-high: #d99031;
	--color-ticket-bar-urgent: #c0392b;
	--color-ticket-rail: #5c6b7a;
	--color-ticket-rail-ontrack: #2e9e52;
	--color-ticket-rail-soon: #e0a021;
	--color-ticket-rail-overdue: #d0021b;
	--color-ticket-rail-done: #7a8794;
	--color-ticket-rail-undated: #9fb0c0;
	--color-mention-bg: #e3edf6;
	--color-mention-text: #0b4a6e;
	--color-mention-self-bg: #fdecc8;
	--color-mention-self-text: #6b4604;

	/* the dark live log console */
	--color-console-bg: #0a0e14;
	--color-console-input: #161b22;
	--color-console-border: #3c4043;
	--color-console-divider: rgba(255, 255, 255, 0.1);
	--color-console-row-border: rgba(255, 255, 255, 0.06);
	--color-console-graph-bg: rgba(255, 255, 255, 0.04);
	--color-console-graph-fps: #4caf50;
	--color-console-graph-heap: #2196f3;
	--color-console-text: #e8eaed;
	--color-console-soft: #bdc1c6;
	--color-console-debug: #c9ccd1;
	--color-console-muted: #9aa0a6;
	--color-console-idle: #5f6368;
	--color-console-accent: #8ab4f8;
	--color-console-live: #34a853;
	--color-console-live-pulse: rgba(52, 168, 83, 0.9);
	--color-console-live-pulse-end: rgba(52, 168, 83, 0);
	--color-console-warn: #fdd663;
	--color-console-error: #f28b82;
	--color-console-fatal: #ff6d63;
}

/* Dark theme: the same overrides twice, for System (OS dark, no explicit light) and explicit Dark.
   Keep the two blocks identical (tokens.test.js checks it). Tokens not listed keep their light value. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;

		/* text */
		--color-text: #e3e9ef;
		--color-text-strong: #eef2f6;
		--color-text-heading: #e8eef4;
		--color-text-body: #dce3ea;
		--color-text-secondary: #cdd5de;
		--color-text-soft: #c4cdd7;
		--color-text-header: #b9c8d5;
		--color-text-tertiary: #b2bdc9;
		--color-text-muted: #a0aebd;
		--color-text-subtle: #a6b1bd;
		--color-text-dim: #9eaab6;
		--color-text-faint: #98a4b0;
		--color-text-hint: #929eaa;
		--color-text-disabled: #707d8b;
		--color-text-placeholder: #75828f;
		--color-text-pale: #7f8a97;
		--color-text-on-status: #0f151c;

		/* surfaces */
		--color-page: #0f151c;
		--color-surface: #18212b;
		--color-surface-raised: #212b37;
		--color-surface-alt: #1c2631;
		--color-surface-panel: #1d2833;
		--color-surface-muted: #24303c;
		--color-surface-subtle: #1f2934;
		--color-surface-sunken: #141c25;
		--color-surface-tint: #1b2733;
		--color-surface-hover: #283442;
		--color-surface-hover-strong: #303d4c;
		--color-surface-hover-tint: #1f3041;
		--color-surface-inverse: #3a4756;
		--color-surface-translucent: rgba(24, 33, 43, 0.85);
		--color-surface-frost: rgba(255, 255, 255, 0.04);
		--color-surface-veil: rgba(24, 33, 43, 0.85);
		--color-menu-bg: #212b37;
		--color-highlight: #1e3449;
		--color-highlight-soft: #1a2d3f;
		--color-mark: #e3cd3c;
		--color-mark-hover: #ecd967;

		/* borders */
		--color-border: #2e3a48;
		--color-border-strong: #6c7886;
		--color-border-emphasis: #7f8d9b;
		--color-border-control: #5e6b79;
		--color-border-muted: #57646f;
		--color-border-light: #3b4755;
		--color-border-soft: #34404d;
		--color-border-subtle: #323e4b;
		--color-border-faint: #27323d;
		--color-border-contrast: #9aa6b2;
		--color-border-input: #4a7aa0;
		--color-border-input-soft: #2f4a62;
		--color-border-input-hover: #5aaed6;
		--color-divider: #35414e;
		--color-divider-strong: #4b5764;
		--color-divider-faint: #232d38;
		--color-column-rule: #5b7f9c;
		--color-table-cell-divider: #263240;
		--color-permission-border: #34495c;

		/* form controls */
		--color-input-bg: #1b2c3e;
		--color-input-text: #e3e9ef;

		/* brand, links, selection, focus */
		--color-primary-text: #7fb8e0;
		--color-primary-hover: #0a6696;
		--color-primary-strong: #a9d0ec;
		--color-brand-text: #8fbde0;
		--color-brand-hover: #3f6d8e;
		--color-brand-tint: rgba(143, 189, 224, 0.12);
		--color-button-bg: #375b74;
		--color-link: #8cc0e8;
		--color-link-hover: #b5d8f2;
		--color-selected-soft: #1f3a52;
		--color-active: #2e6b96;
		--color-focus: #5ea6dc;
		--color-focus-brand: #78a9cf;
		--color-focus-strong: #5aa9e6;

		/* states */
		--color-success-text: #6fd39a;
		--color-success-text-strong: #7ddca5;
		--color-success-bg: #15301f;
		--color-success-border: #24543a;
		--color-success-border-strong: #3a9b62;
		--color-warning-text: #f0c060;
		--color-warning-bg: #33270f;
		--color-warning-bg-soft: #2a2213;
		--color-warning-bg-faint: #262014;
		--color-warning-border: #5a4520;
		--color-danger-text: #f49a94;
		--color-danger-bg: #3a1a1b;
		--color-danger-border: #6b2c2b;
		--color-danger-border-strong: #e0605a;
		--color-danger-glow: rgba(224, 96, 90, 0.3);
		--color-danger-bright: #f06a76;
		--color-danger-hover: #b02a25;
		--color-info-text: #8ec2ee;
		--color-info-bg: #172a3d;
		--color-info-border: #2c4a66;
		--color-error: #c62828;
		--color-error-text: #ff6b6b;
		--color-error-text-strong: #ff8a8a;
		--color-error-border: #e04848;
		--color-error-bg: #3d1f1a;
		--color-alert-text: #ff7070;
		--color-attention: #e8984a;
		--color-attention-text: #f0a85a;
		--color-attention-bg: #2e2215;
		--color-neutral-text: #a7b2bd;
		--color-neutral-bg: #252e38;
		--color-neutral-bg-soft: #212a33;
		--color-neutral-border: #3a4450;
		--color-neutral-border-soft: #34404c;
		--color-activation-success: #1a7a2f;
		--color-activation-error: #b02020;

		/* chips and badges */
		--color-badge: #a85a00;
		--color-chip-neutral-bg: #2a3540;
		--color-chip-neutral-strong-bg: #303b47;
		--color-chip-success-bg: #193a24;
		--color-chip-success-text: #8fd9a0;
		--color-chip-error-bg: #3e1d22;
		--color-chip-error-text: #f59aa6;
		--color-chip-warning-bg: #36301a;
		--color-chip-warning-text: #e6d277;
		--color-chip-info-bg: #18324a;
		--color-chip-info-text: #94c9ee;
		--color-chip-hidden-bg: #9a6212;
		--color-chip-live-bg: #237535;

		/* player / screen status */
		--color-status-offline: #8a95a1;
		--color-status-offline-soft: #6f7a86;
		--color-status-degraded: #b85a08;
		--color-status-error: #c8102e;
		--color-status-error-text: #ff7a88;
		--color-status-late: #f0645f;

		/* table rows */
		--color-row-stripe: #1e2a36;
		--color-row-deleted: #262b31;
		--color-row-expanded: #1f4560;
		--color-row-failed: #3a1d1d;
		--color-row-expired-bg: #3b1f2b;
		--color-row-error: #8e2a2d;
		--color-row-error-link: #8ff7f5;
		--color-row-warning: #4a4214;
		--color-row-warning-text: #f5e98a;
		--color-log-error-bg: #5c2a20;
		--color-log-error-archived-bg: #3a2420;
		--color-log-warning-bg: #4f4118;
		--color-log-warning-archived-bg: #352e1c;
		--color-table-bg: #2e3a48;
		--color-table-row-odd: #1c2530;
		--color-table-head-sorted: #2a5270;

		/* overlays, shades, shadows */
		--color-overlay: rgba(0, 0, 0, 0.65);
		--color-overlay-strong: rgba(0, 0, 0, 0.7);
		--color-overlay-caption: rgba(0, 0, 0, 0.75);
		--color-scrim: rgba(0, 0, 0, 0.6);
		--color-shade-subtle: rgba(255, 255, 255, 0.03);
		--color-shade: rgba(255, 255, 255, 0.1);
		--color-shadow-subtle: rgba(0, 0, 0, 0.3);
		--color-shadow-soft: rgba(0, 0, 0, 0.35);
		--color-shadow-raised: rgba(0, 0, 0, 0.4);
		--color-shadow: rgba(0, 0, 0, 0.45);
		--color-shadow-strong: rgba(0, 0, 0, 0.5);
		--color-shadow-dialog: rgba(0, 0, 0, 0.6);
		--color-shadow-heavy: rgba(0, 0, 0, 0.7);
		--color-shadow-tinted: rgba(0, 0, 0, 0.35);
		--color-shadow-menu: rgba(0, 0, 0, 0.45);

		/* charts */
		--color-chart-1: #5aa6dc;
		--color-chart-1-fill: rgba(90, 166, 220, 0.18);
		--color-chart-2: #4cc178;
		--color-chart-2-fill: rgba(76, 193, 120, 0.18);
		--color-chart-3: #7fa9c6;
		--color-chart-forecast-offline: rgba(240, 80, 90, 0.85);
		--color-perf-tooltip-bg: #5c6773;

		/* navigation and shared controls */
		--color-nav-bg: #14263a;
		--color-nav-border: #24384d;
		--color-nav-flyout-bg: #1c3248;
		--color-nav-gradient-start: #1a2e44;
		--color-nav-gradient-end: #14263a;
		--color-tab-hover-bg: #2a3a48;
		--color-button-secondary-bg: #2a3541;
		--color-button-secondary-text: #d0d8e0;
		--color-button-secondary-hover-bg: #34414f;
		--color-button-neutral-bg: #27313c;
		--color-button-neutral-border: #4a5663;
		--color-button-neutral-hover-bg: #313c48;
		--color-toggle-track: #4a5663;
		--color-toggle-thumb: #e3e9ef;
		--color-toggle-off-bg: #3a4654;
		--color-loader-track: #2a3541;
		--color-meter-track: #2a3541;
		--color-progress-track: #2a3541;
		--color-scrollbar-thumb-hover: #7fa9c6;
		--color-scrollbar-track: #131b24;
		--color-drag-handle: #8794a0;
		--color-drag-item: #1a70b2;
		--color-drop-target: #1f4560;
		--color-dropzone-border: #34506a;
		--color-dropzone-border-hover: #6aaad4;
		--color-dropzone-bg-hover: #1a2a3a;
		--color-dropzone-icon: #7aa3c4;
		--color-logon-gradient-start: #1b2530;
		--color-logon-gradient-end: #141c25;
		--color-bevel-highlight: rgba(255, 255, 255, 0.06);
		--color-bevel-highlight-soft: rgba(255, 255, 255, 0.04);
		--color-capture-nav-bg: #212b37;
		--color-device-code: #8cc0e8;

		/* dashboard */
		--color-dashboard-active-bg: #15263a;
		--color-dashboard-active-hover-bg: #20405a;
		--color-dashboard-hover-bg: #1c2f42;
		--color-pulse-cell: #2a3541;
		--color-pulse-cell-none: #6b3436;
		--color-pulse-cell-before-border: #4a5663;

		/* live view */
		--color-liveview-border: #2f3b48;

		/* help pages */
		--color-help-link: #8cc0f0;
		--color-help-accent: #22405e;
		--color-help-quote-bg: #1a2430;
		--color-code-bg: #222c37;

		/* xovis flow-tracking report */
		--color-xovis-accent: #7fb0dc;
		--color-xovis-card-border: #34506a;
		--color-xovis-card-shadow: rgba(0, 0, 0, 0.4);
		--color-xovis-modal-bg: #212b37;
		--color-xovis-cell-border: #34404d;

		/* ticketing */
		--color-ticket-status-open: #8ec2ee;
		--color-ticket-status-progress: #7ddca5;
		--color-ticket-status-waiting: #f0c060;
		--color-ticket-status-blocked: #f49a94;
		--color-ticket-status-resolved: #6fd39a;
		--color-ticket-status-closed: #a7b2bd;
		--color-ticket-status-onsite: #f0c060;
		--color-ticket-status-duplicate: #c9a0e6;
		--color-ticket-status-unknown: #9aa6b2;
		--color-ticket-internal-bg: #2e2238;
		--color-ticket-internal-text: #d3aef0;
		--color-ticket-internal-border: #4f3a60;
		--color-ticket-internal-entry-bg: #251d2d;
		--color-ticket-internal-entry-border: #3f3150;
		--color-ticket-note-bg: #2b2617;
		--color-ticket-note-border: #5f4f28;
		--color-ticket-note-toolbar-bg: #332b18;
		--color-ticket-resolved-bg: #15301f;
		--color-ticket-resolved-text: #7ddca5;
		--color-ticket-resolved-border: #24543a;
		--color-ticket-bar: #6f9cbc;
		--color-ticket-bar-low: #8794a0;
		--color-ticket-bar-urgent: #e0574a;
		--color-ticket-rail: #7d8b99;
		--color-ticket-rail-ontrack: #43b86a;
		--color-ticket-rail-overdue: #ef4a5a;
		--color-ticket-rail-done: #8a96a2;
		--color-ticket-rail-undated: #6f8091;
		--color-mention-bg: #1f3447;
		--color-mention-text: #9fd0f2;
		--color-mention-self-bg: #3d3018;
		--color-mention-self-text: #f2c46a;
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;

	/* text */
	--color-text: #e3e9ef;
	--color-text-strong: #eef2f6;
	--color-text-heading: #e8eef4;
	--color-text-body: #dce3ea;
	--color-text-secondary: #cdd5de;
	--color-text-soft: #c4cdd7;
	--color-text-header: #b9c8d5;
	--color-text-tertiary: #b2bdc9;
	--color-text-muted: #a0aebd;
	--color-text-subtle: #a6b1bd;
	--color-text-dim: #9eaab6;
	--color-text-faint: #98a4b0;
	--color-text-hint: #929eaa;
	--color-text-disabled: #707d8b;
	--color-text-placeholder: #75828f;
	--color-text-pale: #7f8a97;
	--color-text-on-status: #0f151c;

	/* surfaces */
	--color-page: #0f151c;
	--color-surface: #18212b;
	--color-surface-raised: #212b37;
	--color-surface-alt: #1c2631;
	--color-surface-panel: #1d2833;
	--color-surface-muted: #24303c;
	--color-surface-subtle: #1f2934;
	--color-surface-sunken: #141c25;
	--color-surface-tint: #1b2733;
	--color-surface-hover: #283442;
	--color-surface-hover-strong: #303d4c;
	--color-surface-hover-tint: #1f3041;
	--color-surface-inverse: #3a4756;
	--color-surface-translucent: rgba(24, 33, 43, 0.85);
	--color-surface-frost: rgba(255, 255, 255, 0.04);
	--color-surface-veil: rgba(24, 33, 43, 0.85);
	--color-menu-bg: #212b37;
	--color-highlight: #1e3449;
	--color-highlight-soft: #1a2d3f;
	--color-mark: #e3cd3c;
	--color-mark-hover: #ecd967;

	/* borders */
	--color-border: #2e3a48;
	--color-border-strong: #6c7886;
	--color-border-emphasis: #7f8d9b;
	--color-border-control: #5e6b79;
	--color-border-muted: #57646f;
	--color-border-light: #3b4755;
	--color-border-soft: #34404d;
	--color-border-subtle: #323e4b;
	--color-border-faint: #27323d;
	--color-border-contrast: #9aa6b2;
	--color-border-input: #4a7aa0;
	--color-border-input-soft: #2f4a62;
	--color-border-input-hover: #5aaed6;
	--color-divider: #35414e;
	--color-divider-strong: #4b5764;
	--color-divider-faint: #232d38;
	--color-column-rule: #5b7f9c;
	--color-table-cell-divider: #263240;
	--color-permission-border: #34495c;

	/* form controls */
	--color-input-bg: #1b2c3e;
	--color-input-text: #e3e9ef;

	/* brand, links, selection, focus */
	--color-primary-text: #7fb8e0;
	--color-primary-hover: #0a6696;
	--color-primary-strong: #a9d0ec;
	--color-brand-text: #8fbde0;
	--color-brand-hover: #3f6d8e;
	--color-brand-tint: rgba(143, 189, 224, 0.12);
	--color-button-bg: #375b74;
	--color-link: #8cc0e8;
	--color-link-hover: #b5d8f2;
	--color-selected-soft: #1f3a52;
	--color-active: #2e6b96;
	--color-focus: #5ea6dc;
	--color-focus-brand: #78a9cf;
	--color-focus-strong: #5aa9e6;

	/* states */
	--color-success-text: #6fd39a;
	--color-success-text-strong: #7ddca5;
	--color-success-bg: #15301f;
	--color-success-border: #24543a;
	--color-success-border-strong: #3a9b62;
	--color-warning-text: #f0c060;
	--color-warning-bg: #33270f;
	--color-warning-bg-soft: #2a2213;
	--color-warning-bg-faint: #262014;
	--color-warning-border: #5a4520;
	--color-danger-text: #f49a94;
	--color-danger-bg: #3a1a1b;
	--color-danger-border: #6b2c2b;
	--color-danger-border-strong: #e0605a;
	--color-danger-glow: rgba(224, 96, 90, 0.3);
	--color-danger-bright: #f06a76;
	--color-danger-hover: #b02a25;
	--color-info-text: #8ec2ee;
	--color-info-bg: #172a3d;
	--color-info-border: #2c4a66;
	--color-error: #c62828;
	--color-error-text: #ff6b6b;
	--color-error-text-strong: #ff8a8a;
	--color-error-border: #e04848;
	--color-error-bg: #3d1f1a;
	--color-alert-text: #ff7070;
	--color-attention: #e8984a;
	--color-attention-text: #f0a85a;
	--color-attention-bg: #2e2215;
	--color-neutral-text: #a7b2bd;
	--color-neutral-bg: #252e38;
	--color-neutral-bg-soft: #212a33;
	--color-neutral-border: #3a4450;
	--color-neutral-border-soft: #34404c;
	--color-activation-success: #1a7a2f;
	--color-activation-error: #b02020;

	/* chips and badges */
	--color-badge: #a85a00;
	--color-chip-neutral-bg: #2a3540;
	--color-chip-neutral-strong-bg: #303b47;
	--color-chip-success-bg: #193a24;
	--color-chip-success-text: #8fd9a0;
	--color-chip-error-bg: #3e1d22;
	--color-chip-error-text: #f59aa6;
	--color-chip-warning-bg: #36301a;
	--color-chip-warning-text: #e6d277;
	--color-chip-info-bg: #18324a;
	--color-chip-info-text: #94c9ee;
	--color-chip-hidden-bg: #9a6212;
	--color-chip-live-bg: #237535;

	/* player / screen status */
	--color-status-offline: #8a95a1;
	--color-status-offline-soft: #6f7a86;
	--color-status-degraded: #b85a08;
	--color-status-error: #c8102e;
	--color-status-error-text: #ff7a88;
	--color-status-late: #f0645f;

	/* table rows */
	--color-row-stripe: #1e2a36;
	--color-row-deleted: #262b31;
	--color-row-expanded: #1f4560;
	--color-row-failed: #3a1d1d;
	--color-row-expired-bg: #3b1f2b;
	--color-row-error: #8e2a2d;
	--color-row-error-link: #8ff7f5;
	--color-row-warning: #4a4214;
	--color-row-warning-text: #f5e98a;
	--color-log-error-bg: #5c2a20;
	--color-log-error-archived-bg: #3a2420;
	--color-log-warning-bg: #4f4118;
	--color-log-warning-archived-bg: #352e1c;
	--color-table-bg: #2e3a48;
	--color-table-row-odd: #1c2530;
	--color-table-head-sorted: #2a5270;

	/* overlays, shades, shadows */
	--color-overlay: rgba(0, 0, 0, 0.65);
	--color-overlay-strong: rgba(0, 0, 0, 0.7);
	--color-overlay-caption: rgba(0, 0, 0, 0.75);
	--color-scrim: rgba(0, 0, 0, 0.6);
	--color-shade-subtle: rgba(255, 255, 255, 0.03);
	--color-shade: rgba(255, 255, 255, 0.1);
	--color-shadow-subtle: rgba(0, 0, 0, 0.3);
	--color-shadow-soft: rgba(0, 0, 0, 0.35);
	--color-shadow-raised: rgba(0, 0, 0, 0.4);
	--color-shadow: rgba(0, 0, 0, 0.45);
	--color-shadow-strong: rgba(0, 0, 0, 0.5);
	--color-shadow-dialog: rgba(0, 0, 0, 0.6);
	--color-shadow-heavy: rgba(0, 0, 0, 0.7);
	--color-shadow-tinted: rgba(0, 0, 0, 0.35);
	--color-shadow-menu: rgba(0, 0, 0, 0.45);

	/* charts */
	--color-chart-1: #5aa6dc;
	--color-chart-1-fill: rgba(90, 166, 220, 0.18);
	--color-chart-2: #4cc178;
	--color-chart-2-fill: rgba(76, 193, 120, 0.18);
	--color-chart-3: #7fa9c6;
	--color-chart-forecast-offline: rgba(240, 80, 90, 0.85);
	--color-perf-tooltip-bg: #5c6773;

	/* navigation and shared controls */
	--color-nav-bg: #14263a;
	--color-nav-border: #24384d;
	--color-nav-flyout-bg: #1c3248;
	--color-nav-gradient-start: #1a2e44;
	--color-nav-gradient-end: #14263a;
	--color-tab-hover-bg: #2a3a48;
	--color-button-secondary-bg: #2a3541;
	--color-button-secondary-text: #d0d8e0;
	--color-button-secondary-hover-bg: #34414f;
	--color-button-neutral-bg: #27313c;
	--color-button-neutral-border: #4a5663;
	--color-button-neutral-hover-bg: #313c48;
	--color-toggle-track: #4a5663;
	--color-toggle-thumb: #e3e9ef;
	--color-toggle-off-bg: #3a4654;
	--color-loader-track: #2a3541;
	--color-meter-track: #2a3541;
	--color-progress-track: #2a3541;
	--color-scrollbar-thumb-hover: #7fa9c6;
	--color-scrollbar-track: #131b24;
	--color-drag-handle: #8794a0;
	--color-drag-item: #1a70b2;
	--color-drop-target: #1f4560;
	--color-dropzone-border: #34506a;
	--color-dropzone-border-hover: #6aaad4;
	--color-dropzone-bg-hover: #1a2a3a;
	--color-dropzone-icon: #7aa3c4;
	--color-logon-gradient-start: #1b2530;
	--color-logon-gradient-end: #141c25;
	--color-bevel-highlight: rgba(255, 255, 255, 0.06);
	--color-bevel-highlight-soft: rgba(255, 255, 255, 0.04);
	--color-capture-nav-bg: #212b37;
	--color-device-code: #8cc0e8;

	/* dashboard */
	--color-dashboard-active-bg: #15263a;
	--color-dashboard-active-hover-bg: #20405a;
	--color-dashboard-hover-bg: #1c2f42;
	--color-pulse-cell: #2a3541;
	--color-pulse-cell-none: #6b3436;
	--color-pulse-cell-before-border: #4a5663;

	/* live view */
	--color-liveview-border: #2f3b48;

	/* help pages */
	--color-help-link: #8cc0f0;
	--color-help-accent: #22405e;
	--color-help-quote-bg: #1a2430;
	--color-code-bg: #222c37;

	/* xovis flow-tracking report */
	--color-xovis-accent: #7fb0dc;
	--color-xovis-card-border: #34506a;
	--color-xovis-card-shadow: rgba(0, 0, 0, 0.4);
	--color-xovis-modal-bg: #212b37;
	--color-xovis-cell-border: #34404d;

	/* ticketing */
	--color-ticket-status-open: #8ec2ee;
	--color-ticket-status-progress: #7ddca5;
	--color-ticket-status-waiting: #f0c060;
	--color-ticket-status-blocked: #f49a94;
	--color-ticket-status-resolved: #6fd39a;
	--color-ticket-status-closed: #a7b2bd;
	--color-ticket-status-onsite: #f0c060;
	--color-ticket-status-duplicate: #c9a0e6;
	--color-ticket-status-unknown: #9aa6b2;
	--color-ticket-internal-bg: #2e2238;
	--color-ticket-internal-text: #d3aef0;
	--color-ticket-internal-border: #4f3a60;
	--color-ticket-internal-entry-bg: #251d2d;
	--color-ticket-internal-entry-border: #3f3150;
	--color-ticket-note-bg: #2b2617;
	--color-ticket-note-border: #5f4f28;
	--color-ticket-note-toolbar-bg: #332b18;
	--color-ticket-resolved-bg: #15301f;
	--color-ticket-resolved-text: #7ddca5;
	--color-ticket-resolved-border: #24543a;
	--color-ticket-bar: #6f9cbc;
	--color-ticket-bar-low: #8794a0;
	--color-ticket-bar-urgent: #e0574a;
	--color-ticket-rail: #7d8b99;
	--color-ticket-rail-ontrack: #43b86a;
	--color-ticket-rail-overdue: #ef4a5a;
	--color-ticket-rail-done: #8a96a2;
	--color-ticket-rail-undated: #6f8091;
	--color-mention-bg: #1f3447;
	--color-mention-text: #9fd0f2;
	--color-mention-self-bg: #3d3018;
	--color-mention-self-text: #f2c46a;
}