:root {
    --app-font-family: "Inter", "Public Sans", "Segoe UI", "Helvetica Neue", sans-serif;

    --app-bg: #1a222c;
    --app-bg-alt: #111827;
    --app-surface: #1e293b;
    --app-surface-2: #273444;
    --app-border: #334155;
    --app-border-strong: #3b4b61;

    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --sidebar-icon-color: #9eb2c8;

    --brand-primary: #3b82f6;
    --brand-primary-hover: #2563eb;
    --success-primary: #34d399;
    --warning-primary: #facc15;
    --danger-primary: #ef4444;
    --danger-primary-hover: #dc2626;

    --surface-panel: #1e293b;
    --surface-panel-alt: #1e293b;
    --surface-panel-strong: #334155;
    --border-panel: #334155;
    --border-panel-soft: #41546d;

    --table-bg: #1e293b;
    --table-head-bg: #1f2d40;
    --table-head-text: #cbd5e1;
    --table-row-odd: #223042;
    --table-row-even: #1e2b3b;
    --table-row-hover: #2a3b50;
    --table-cell-border: #334155;

    --input-bg: #1e293b;
    --input-border: #334155;
    --input-text: #f8fafc;
    --input-placeholder: #94a3b8;
    --input-focus-border: #3b82f6;
    --input-focus-ring: rgba(59, 130, 246, 0.24);
    --profile-photo-bg: var(--input-bg);
    --profile-photo-border: var(--input-border);
    --profile-photo-meta: var(--text-muted);

    --modal-overlay: rgba(7, 12, 20, 0.76);
    --modal-bg: var(--app-bg);
    --modal-border: #334155;
    --modal-header-bg: var(--app-surface);
    --modal-footer-bg: var(--app-surface);
    --modal-shadow: 0 22px 48px rgba(0, 0, 0, 0.45);

    ---text: #ffffff;
    --btn-danger-text: #ffffff;
    --icon-btn-bg: var(--app-bg);
    --icon-btn-border-color: var(--table-head-text-strong);
    --icon-btn-border-width: 1px;
    --icon-btn-color: var(--table-head-text-strong);
    --icon-btn-hover-bg: var(--btn-secondary-bg-hover);
    --icon-btn-hover-border-color: var(--btn-secondary-border-hover);
    --icon-btn-hover-color: #ffffff;

    --surface-main: var(--app-bg);
    --surface-hover: #2a3b50;

    --tab-strip-border: #36506d;
    --tab-strip-bg-start: rgba(26, 41, 59, 0.94);
    --tab-strip-bg-end: rgba(22, 35, 49, 0.94);
    --tab-strip-shadow: rgba(255, 255, 255, 0.04);
    --tab-text: #9fb5cc;
    --tab-text-hover: #d4e6f8;
    --tab-hover-bg: rgba(255, 255, 255, 0.05);
    --tab-active-glow: rgba(22, 99, 212, 0.35);

    --switch-shell-border: #3d546c;
    --switch-shell-bg: #162637;
    --switch-shell-text: #c6d5e4;
    --switch-shell-hover-border: #496585;
    --switch-shell-hover-ring: rgba(73, 101, 133, 0.2);
    --switch-track-off-border: #4d627d;
    --switch-track-off-start: #5e7189;
    --switch-track-off-end: #4a5c73;
    --switch-knob-start: #ffffff;
    --switch-knob-end: #e2ebf5;
    --switch-track-on-border: var(--brand-primary);
    --switch-track-on-glow: rgba(59, 130, 246, 0.22);

    --context-add-text: #e7f2ff;
    --context-add-border: rgba(82, 149, 224, 0.56);
    --context-add-bg-start: rgba(47, 95, 150, 0.46);
    --context-add-bg-end: rgba(36, 74, 120, 0.4);
    --context-add-ring: rgba(82, 149, 224, 0.25);
    --context-add-glow: rgba(17, 46, 84, 0.3);
    --context-add-text-hover: #f5f9ff;
    --context-add-border-hover: rgba(104, 171, 245, 0.74);
    --context-add-bg-start-hover: rgba(60, 113, 174, 0.54);
    --context-add-bg-end-hover: rgba(41, 86, 138, 0.5);
    --context-add-ring-hover: rgba(104, 171, 245, 0.35);
    --context-add-glow-hover: rgba(18, 52, 95, 0.36);

    --table-head-bg-strong: #2a3b51;
    --table-head-text-strong: #9db1c8;
    --table-row-bg-strong: #243447;
    --table-row-hover-strong: #2b3f56;
    --table-row-even-strong: #1f2f42;
    --table-border-strong: #33465d;
    --table-muted-strong: #8fa3b9;

    --table-warning-bg: #4c371f;
    --table-warning-hover-bg: #5a4022;
    --table-warning-border: rgba(217, 119, 6, 0.45);
    --table-warning-text: #ffd8a8;
    --table-immediate-bg: #4a2a2f;
    --table-immediate-hover-bg: #5a3138;
    --table-immediate-border: rgba(185, 28, 28, 0.45);
    --table-immediate-text: #ffc5c5;
    --depthub-comment-bg: rgba(15, 33, 48, 0.72);
    --depthub-comment-border: var(--border-panel);
    --depthub-post-bg: var(--surface-panel-alt);
    --depthub-post-alt-bg: color-mix(in srgb, var(--surface-panel-alt) 86%, var(--surface-main) 14%);
    --depthub-post-border: var(--border-panel);
    --depthub-post-subject: color-mix(in srgb, var(--brand-primary) 68%, var(--text-primary) 32%);
    --depthub-post-muted: var(--text-muted);
    --depthub-reply-bg: color-mix(in srgb, var(--depthub-comment-bg) 88%, var(--surface-panel) 12%);
    --depthub-reply-border: color-mix(in srgb, var(--depthub-comment-border) 76%, var(--brand-primary) 24%);
    --depthub-pill-post-bg: color-mix(in srgb, var(--brand-primary) 20%, transparent);
    --depthub-pill-post-border: color-mix(in srgb, var(--brand-primary) 42%, transparent);
    --depthub-pill-post-text: color-mix(in srgb, var(--brand-primary) 62%, var(--text-primary) 38%);
    --depthub-pill-attention-bg: var(--table-immediate-bg);
    --depthub-pill-attention-border: var(--table-immediate-border);
    --depthub-pill-attention-text: var(--table-immediate-text);
    --depthub-pill-claimed-bg: color-mix(in srgb, var(--warning-primary) 22%, transparent);
    --depthub-pill-claimed-border: color-mix(in srgb, var(--warning-primary) 50%, transparent);
    --depthub-pill-claimed-text: color-mix(in srgb, var(--warning-primary) 72%, var(--text-primary) 28%);
    --depthub-pill-completed-bg: color-mix(in srgb, var(--success-primary) 22%, transparent);
    --depthub-pill-completed-border: color-mix(in srgb, var(--success-primary) 52%, transparent);
    --depthub-pill-completed-text: color-mix(in srgb, var(--success-primary) 76%, var(--text-primary) 24%);

    --btn-secondary-border: var(--app-surface);
    --btn-secondary-text: #d6e2ee;
    --btn-secondary-bg-hover: #1f3244;
    --btn-secondary-border-hover: var(--app-surface);
    ---bg: var(--brand-primary);
    ---bg-hover: var(--brand-primary-hover);
    ---border: var(--brand-primary);
    ---border-hover: var(--brand-primary-hover);
    --btn-outline-border: var(--app-surface);
    --btn-outline-text: #7ec6ff;
    --btn-outline-bg-hover: var(--brand-primary);

    --topbar-settings-icon-bg: #1f3145;
    --topbar-settings-icon-border: #36506d;
    --topbar-settings-icon-color: #9fc3e8;
    --topbar-account-hover-bg: #2a3f56;
    --topbar-account-hover-border: #3b5878;

    --sidebar-tab-active-text: #93c5fd;
    --sidebar-tab-active-border: rgba(59, 130, 246, 0.25);
    --sidebar-tab-active-bg: rgba(59, 130, 246, 0.12);

    --kpi-card-1-bg: #243447;
    --kpi-card-1-border: #2d3f56;
    --kpi-card-1-glow: rgba(59, 130, 246, 0.18);
    --kpi-card-1-ring: rgba(93, 164, 255, 0.16);
    --kpi-card-2-bg: #2a303c;
    --kpi-card-2-border: #3b4252;
    --kpi-card-2-glow: rgba(100, 116, 139, 0.16);
    --kpi-card-2-ring: rgba(148, 163, 184, 0.14);
    --kpi-card-3-bg: #1b3531;
    --kpi-card-3-border: #234942;
    --kpi-card-3-glow: rgba(16, 185, 129, 0.18);
    --kpi-card-3-ring: rgba(52, 211, 153, 0.18);
    --kpi-card-4-bg: #3b2326;
    --kpi-card-4-border: #522e33;
    --kpi-card-4-glow: rgba(239, 68, 68, 0.18);
    --kpi-card-4-ring: rgba(248, 113, 113, 0.18);

    --helpdesk-config-panel-bg: var(--surface-panel-alt);
    --helpdesk-config-panel-border: var(--border-panel);
    --helpdesk-config-row-bg: #243447;
    --helpdesk-config-row-border: #33465d;
    --helpdesk-config-row-hover-bg: #2b3f56;
    --helpdesk-signature-preview-bg: #0f1a25;
    --helpdesk-signature-preview-border: #34495e;
    --helpdesk-signature-preview-text: var(--text-primary);
    --dashboard-map-canvas-bg: #0f1a25;
}

body[data-theme-mode="light"] {
    --app-bg: #f2f4f7;
    --app-bg-alt: #f6f7f9;
    --app-surface: #f9fafb;
    --app-surface-2: #f1f3f6;
    --app-border: #d9e0e7;
    --app-border-strong: #cdd6df;

    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --sidebar-icon-color: #5f748a;

    --brand-primary: #2563eb;
    --brand-primary-hover: #1d4ed8;
    --success-primary: #16a34a;
    --warning-primary: #d97706;
    --danger-primary: #ef4444;
    --danger-primary-hover: #dc2626;

    --surface-panel: #f9fafb;
    --surface-panel-alt: #f3f5f8;
    --surface-panel-strong: #eef2f6;
    --border-panel: #d9e0e7;
    --border-panel-soft: #cfd8e2;

    --table-bg: #f8fafb;
    --table-head-bg: #eef2f6;
    --table-head-text: #334155;
    --table-row-odd: #f9fafb;
    --table-row-even: #f2f4f7;
    --table-row-hover: #e4e9ef;
    --table-cell-border: #dde3ea;

    --input-bg: #f9fafb;
    --input-border: #c5d1de;
    --input-text: #0f172a;
    --input-placeholder: #64748b;
    --input-focus-border: #2563eb;
    --input-focus-ring: rgba(37, 99, 235, 0.22);
    --profile-photo-bg: var(--input-bg);
    --profile-photo-border: var(--input-border);
    --profile-photo-meta: var(--text-muted);

    --modal-overlay: rgba(15, 23, 42, 0.4);
    --modal-bg: var(--app-bg);
    --modal-border: #d3dde7;
    --modal-header-bg: var(--app-surface);
    --modal-footer-bg: var(--app-surface);
    --modal-shadow: 0 18px 36px rgba(15, 23, 42, 0.2);

    ---text: #ffffff;
    --btn-danger-text: #ffffff;

    --surface-main: var(--app-bg);
    --surface-hover: #e6ebf1;

    --tab-strip-border: #c8d3e0;
    --tab-strip-bg-start: #eef2f6;
    --tab-strip-bg-end: #eef2f6;
    --tab-strip-shadow: rgba(15, 23, 42, 0.03);
    --tab-text: #5b7188;
    --tab-text-hover: #27486a;
    --tab-hover-bg: rgba(31, 122, 204, 0.08);
    --tab-active-text: #ffffff;
    --tab-active-bg-start: var(--brand-primary);
    --tab-active-bg-end: var(--brand-primary);
    --tab-active-border: var(--brand-primary);
    --tab-active-glow: rgba(37, 99, 235, 0.28);

    --switch-shell-border: #c5d1de;
    --switch-shell-bg: #f3f5f8;
    --switch-shell-text: #334155;
    --switch-shell-hover-border: #b9c5d6;
    --switch-shell-hover-ring: rgba(100, 116, 139, 0.2);
    --switch-track-off-border: #b9c5d6;
    --switch-track-off-start: #dbe3ef;
    --switch-track-off-end: #cbd5e1;
    --switch-knob-start: #ffffff;
    --switch-knob-end: #f1f5f9;
    --switch-track-on-border: var(--brand-primary);
    --switch-track-on-glow: rgba(37, 99, 235, 0.22);

    --context-add-text: #eaf4ff;
    --context-add-border: rgba(65, 124, 202, 0.62);
    --context-add-bg-start: rgba(40, 103, 184, 0.86);
    --context-add-bg-end: rgba(33, 89, 161, 0.84);
    --context-add-ring: rgba(65, 124, 202, 0.28);
    --context-add-glow: rgba(39, 93, 165, 0.28);
    --context-add-text-hover: #ffffff;
    --context-add-border-hover: rgba(47, 112, 194, 0.78);
    --context-add-bg-start-hover: rgba(47, 112, 194, 0.92);
    --context-add-bg-end-hover: rgba(37, 100, 178, 0.9);
    --context-add-ring-hover: rgba(47, 112, 194, 0.38);
    --context-add-glow-hover: rgba(37, 100, 178, 0.33);

    --table-head-bg-strong: #e8edf3;
    --table-head-text-strong: #5a6f86;
    --table-row-bg-strong: #f7f9fb;
    --table-row-hover-strong: #e9eff6;
    --table-row-even-strong: #f1f4f7;
    --table-border-strong: #d3dde7;
    --table-muted-strong: #6682a1;

    --table-warning-bg: #fff4de;
    --table-warning-hover-bg: #ffedcc;
    --table-warning-border: rgba(217, 119, 6, 0.32);
    --table-warning-text: #8a5a12;
    --table-immediate-bg: #ffe7e9;
    --table-immediate-hover-bg: #ffd9dc;
    --table-immediate-border: rgba(185, 28, 28, 0.3);
    --table-immediate-text: #8d1f2d;
    --depthub-comment-bg: #f4f8ff;
    --depthub-comment-border: var(--border-panel);
    --depthub-post-bg: #ffffff;
    --depthub-post-alt-bg: #f7fbff;
    --depthub-post-border: var(--border-panel);
    --depthub-post-subject: color-mix(in srgb, var(--brand-primary) 72%, #0f172a 28%);
    --depthub-post-muted: var(--text-muted);
    --depthub-reply-bg: #f1f6ff;
    --depthub-reply-border: color-mix(in srgb, var(--brand-primary) 36%, var(--border-panel) 64%);
    --depthub-pill-post-bg: color-mix(in srgb, var(--brand-primary) 16%, transparent);
    --depthub-pill-post-border: color-mix(in srgb, var(--brand-primary) 34%, transparent);
    --depthub-pill-post-text: color-mix(in srgb, var(--brand-primary) 72%, #0f172a 28%);
    --depthub-pill-attention-bg: #ffe9ec;
    --depthub-pill-attention-border: rgba(185, 28, 28, 0.26);
    --depthub-pill-attention-text: #a02436;
    --depthub-pill-claimed-bg: color-mix(in srgb, var(--warning-primary) 18%, transparent);
    --depthub-pill-claimed-border: color-mix(in srgb, var(--warning-primary) 36%, transparent);
    --depthub-pill-claimed-text: color-mix(in srgb, var(--warning-primary) 78%, #0f172a 22%);
    --depthub-pill-completed-bg: color-mix(in srgb, var(--success-primary) 20%, transparent);
    --depthub-pill-completed-border: color-mix(in srgb, var(--success-primary) 44%, transparent);
    --depthub-pill-completed-text: color-mix(in srgb, var(--success-primary) 76%, #0f172a 24%);

    --btn-secondary-border: var(--app-surface);
    --btn-secondary-text: #1f7acc;
    --btn-secondary-bg-hover: #f2f8ff;
    --btn-secondary-border-hover: var(--app-surface);
    ---bg: #1f7acc;
    ---bg-hover: #186cb6;
    ---border: #1f7acc;
    ---border-hover: #186cb6;
    --btn-outline-border: var(--app-surface);
    --btn-outline-text: #1f7acc;
    --btn-outline-bg-hover: #1f7acc;

    --topbar-settings-icon-bg: #f2f8ff;
    --topbar-settings-icon-border: #b9d0e7;
    --topbar-settings-icon-color: #1f7acc;
    --topbar-account-hover-bg: #edf4ff;
    --topbar-account-hover-border: #b9d0e7;

    --sidebar-tab-active-text: #1f7acc;
    --sidebar-tab-active-border: rgba(31, 122, 204, 0.35);
    --sidebar-tab-active-bg: rgba(31, 122, 204, 0.12);

    --kpi-card-1-bg: #f8fbff;
    --kpi-card-1-border: #d5e3f3;
    --kpi-card-1-glow: rgba(47, 124, 243, 0.12);
    --kpi-card-1-ring: rgba(47, 124, 243, 0.1);
    --kpi-card-2-bg: #f7f9fc;
    --kpi-card-2-border: #d8dee8;
    --kpi-card-2-glow: rgba(100, 116, 139, 0.08);
    --kpi-card-2-ring: rgba(148, 163, 184, 0.1);
    --kpi-card-3-bg: #eefaf4;
    --kpi-card-3-border: #c9ebdc;
    --kpi-card-3-glow: rgba(16, 185, 129, 0.1);
    --kpi-card-3-ring: rgba(52, 211, 153, 0.12);
    --kpi-card-4-bg: #fff0f1;
    --kpi-card-4-border: #f2d2d6;
    --kpi-card-4-glow: rgba(239, 68, 68, 0.1);
    --kpi-card-4-ring: rgba(248, 113, 113, 0.12);

    --helpdesk-config-panel-bg: #f8fbff;
    --helpdesk-config-panel-border: #d6e3f3;
    --helpdesk-config-row-bg: #ffffff;
    --helpdesk-config-row-border: #d6e3f3;
    --helpdesk-config-row-hover-bg: #edf4ff;
    --helpdesk-signature-preview-bg: #ffffff;
    --helpdesk-signature-preview-border: #d6e3f3;
    --helpdesk-signature-preview-text: #0f172a;
    --dashboard-map-canvas-bg: #eef4fb;
}

/* Stitch palette overlays. */
body[data-theme-mode="dark"].theme-palette-default {
    /* Explicitly pin original WebbMTS deep-blue tab styling. */
    --icon-btn-bg: #1E293B;
    --icon-btn-border-color: transparent;
    --icon-btn-border-width: 1px;
    --icon-btn-color: #9DB1C8;
    --icon-btn-hover-bg: color-mix(in srgb, var(--icon-btn-bg) 90%, #ffffff 10%);
    --icon-btn-hover-border-color: transparent;
    --icon-btn-hover-color: #9DB1C8;
    --input-bg: #1a293b;
    --tab-strip-border: #36506d;
    --tab-strip-bg-start: rgba(26, 41, 59, 0.94);
    --tab-strip-bg-end: rgba(22, 35, 49, 0.94);
    --tab-strip-shadow: rgba(255, 255, 255, 0.04);
    --tab-text: #9fb5cc;
    --tab-text-hover: #d4e6f8;
    --tab-hover-bg: rgba(255, 255, 255, 0.05);
    --tab-active-text: #ffffff;
    --tab-active-bg-start: #4f99ff;
    --tab-active-bg-end: #2f7cf3;
    --tab-active-border: #5ca4ff;
    --tab-active-glow: rgba(22, 99, 212, 0.35);
    --icon-btn-hover-bg: var(--sidebar-tab-active-bg);
    --icon-btn-hover-border-color: var(--sidebar-tab-active-border);
    --icon-btn-hover-color: var(--sidebar-tab-active-text);
    --btn-secondary-hover-bg: var(--sidebar-tab-active-bg);
    --btn-secondary-hover-border: var(--sidebar-tab-active-border);
    --btn-secondary-hover-text: var(--sidebar-tab-active-text);
}

body[data-theme-mode="dark"].theme-palette-dark-ruby {
    --app-bg: #000000;
    --app-bg-alt: #090202;
    --app-surface: #120505;
    --app-surface-2: #1b0909;
    --app-border: #2d1010;
    --app-border-strong: #4a2020;
    --text-primary: #ffeded;
    --text-secondary: #b88f8f;
    --text-muted: #806060;
    --brand-primary: #e0115f;
    --brand-primary-hover: #c30f54;
    --danger-primary: #ff5f1f;
    --danger-primary-hover: #e1521b;
    --table-warning-bg: #4f2f1a;
    --table-warning-hover-bg: #5b381f;
    --table-warning-text: #ffd8aa;
    --table-immediate-bg: #4c151f;
    --table-immediate-hover-bg: #61202a;
    --table-immediate-text: #ffc1d2;
    --tab-active-bg-start: #e0115f;
    --tab-active-bg-end: #990000;
    --tab-active-border: #e0115f;
    --tab-active-glow: rgba(224, 17, 95, 0.34);
    --switch-track-on-border: #ff5f1f;
    --switch-track-on-glow: rgba(255, 95, 31, 0.24);
}

body[data-theme-mode="light"].theme-palette-light {
    --app-bg: #f8f6f6;
    --app-bg-alt: #ffffff;
    --app-surface: #ffffff;
    --app-surface-2: #fbf8f6;
    --app-border: #e6e1dd;
    --text-primary: #221610;
    --text-secondary: #5d4f49;
    --text-muted: #7f726b;
    --brand-primary: #ec5b13;
    --brand-primary-hover: #cf4d10;
    --input-focus-border: #ec5b13;
    --input-focus-ring: rgba(236, 91, 19, 0.22);
    --tab-hover-bg: rgba(236, 91, 19, 0.1);
    --tab-active-bg-start: var(--brand-primary);
    --tab-active-bg-end: var(--brand-primary-hover);
    --tab-active-border: var(--brand-primary);
    --sidebar-tab-active-text: #cf4d10;
    --sidebar-tab-active-border: rgba(236, 91, 19, 0.4);
    --sidebar-tab-active-bg: rgba(236, 91, 19, 0.12);
}

body[data-theme-mode="dark"].theme-palette-pitch-black {
    --app-bg: #000000;
    --app-bg-alt: #000000;
    --app-surface: #070707;
    --app-surface-2: #111111;
    --app-border: #2a2a2a;
    --app-border-strong: #3d3d3d;
    --text-primary: #e8e8e8;
    --text-secondary: #c6c6c6;
    --text-muted: #9a9a9a;
    --brand-primary: #bdbdbd;
    --brand-primary-hover: #a6a6a6;
    --danger-primary: #8f8f8f;
    --danger-primary-hover: #7a7a7a;
    --tab-strip-border: #353535;
    --tab-strip-bg-start: #0a0a0a;
    --tab-strip-bg-end: #141414;
    --tab-text: #b5b5b5;
    --tab-text-hover: #efefef;
    --tab-hover-bg: rgba(189, 189, 189, 0.12);
    --tab-active-text: #0b0b0b;
    --tab-active-bg-start: #d0d0d0;
    --tab-active-bg-end: #a9a9a9;
    --tab-active-border: #d8d8d8;
    --tab-active-glow: rgba(214, 214, 214, 0.24);
    --switch-track-on-border: #c8c8c8;
    --switch-track-on-glow: rgba(212, 212, 212, 0.22);
    --sidebar-tab-active-text: #f2f2f2;
    --sidebar-tab-active-border: rgba(212, 212, 212, 0.45);
    --sidebar-tab-active-bg: rgba(212, 212, 212, 0.12);
    --table-warning-bg: #2b2b2b;
    --table-warning-hover-bg: #343434;
    --table-warning-text: #dedede;
    --table-immediate-bg: #1f1f1f;
    --table-immediate-hover-bg: #2a2a2a;
    --table-immediate-text: #f1f1f1;
}

body[data-theme-mode="dark"].theme-palette-dark {
    --app-bg: #000000;
    --app-bg-alt: #080808;
    --app-surface: #1a1a1a;
    --app-surface-2: #212121;
    --app-border: #2d2d2d;
    --app-border-strong: #3a3a3a;
    --text-primary: #ffffff;
    --text-secondary: #c4c4c4;
    --text-muted: #a0a0a0;
    --brand-primary: #111827;
    --brand-primary-hover: #0b1220;
    --danger-primary: #f43f5e;
    --danger-primary-hover: #e11d48;
    --tab-active-bg-start: #111827;
    --tab-active-bg-end: #0b1220;
    --tab-active-border: #111827;
    --kpi-card-3-bg: #0d2b20;
    --kpi-card-3-border: #1a4b39;
    --kpi-card-4-bg: #3a1a23;
    --kpi-card-4-border: #5a2735;
}

body[data-theme-mode="dark"].theme-palette-dark-blue {
    --app-bg: #000000;
    --app-bg-alt: #080808;
    --app-surface: #1a1a1a;
    --app-surface-2: #212121;
    --app-border: #2d2d2d;
    --app-border-strong: #3a3a3a;
    --text-primary: #ffffff;
    --text-secondary: #c4c4c4;
    --text-muted: #a0a0a0;
    --brand-primary: #4f8bff;
    --brand-primary-hover: #2f6fe0;
    --tab-active-bg-start: #4f8bff;
    --tab-active-bg-end: #2f6fe0;
    --tab-active-border: #4f8bff;
    --switch-track-on-border: #4f8bff;
    --switch-track-on-glow: rgba(79, 139, 255, 0.3);
    ---bg: #4f8bff;
    ---bg-hover: #2f6fe0;
    ---border: #4f8bff;
    ---border-hover: #2f6fe0;
    --sidebar-tab-active-text: #9fc3ff;
    --sidebar-tab-active-border: rgba(79, 139, 255, 0.35);
    --sidebar-tab-active-bg: rgba(79, 139, 255, 0.18);
}

body[data-theme-mode="dark"].theme-palette-dark-green {
    --app-bg: #000000;
    --app-bg-alt: #080808;
    --app-surface: #1a1a1a;
    --app-surface-2: #212121;
    --app-border: #2d2d2d;
    --app-border-strong: #3a3a3a;
    --text-primary: #ffffff;
    --text-secondary: #c4c4c4;
    --text-muted: #a0a0a0;
    --brand-primary: #22c55e;
    --brand-primary-hover: #16a34a;
    --tab-active-bg-start: #22c55e;
    --tab-active-bg-end: #16a34a;
    --tab-active-border: #22c55e;
    --switch-track-on-border: #22c55e;
    --switch-track-on-glow: rgba(34, 197, 94, 0.3);
    ---bg: #22c55e;
    ---bg-hover: #16a34a;
    ---border: #22c55e;
    ---border-hover: #16a34a;
    --sidebar-tab-active-text: #8ee6b5;
    --sidebar-tab-active-border: rgba(34, 197, 94, 0.35);
    --sidebar-tab-active-bg: rgba(34, 197, 94, 0.18);
}

body[data-theme-mode="dark"].theme-palette-dark-red {
    --app-bg: #000000;
    --app-bg-alt: #080808;
    --app-surface: #1a1a1a;
    --app-surface-2: #212121;
    --app-border: #2d2d2d;
    --app-border-strong: #3a3a3a;
    --text-primary: #ffffff;
    --text-secondary: #c4c4c4;
    --text-muted: #a0a0a0;
    --brand-primary: #ef4444;
    --brand-primary-hover: #dc2626;
    --tab-active-bg-start: #ef4444;
    --tab-active-bg-end: #dc2626;
    --tab-active-border: #ef4444;
    --switch-track-on-border: #ef4444;
    --switch-track-on-glow: rgba(239, 68, 68, 0.3);
    ---bg: #ef4444;
    ---bg-hover: #dc2626;
    ---border: #ef4444;
    ---border-hover: #dc2626;
    --sidebar-tab-active-text: #ffb4b4;
    --sidebar-tab-active-border: rgba(239, 68, 68, 0.35);
    --sidebar-tab-active-bg: rgba(239, 68, 68, 0.18);
}

body[data-theme-mode="dark"].theme-palette-dark-gold {
    --app-bg: #000000;
    --app-bg-alt: #080808;
    --app-surface: #1a1a1a;
    --app-surface-2: #212121;
    --app-border: #2d2d2d;
    --app-border-strong: #3a3a3a;
    --text-primary: #ffffff;
    --text-secondary: #c4c4c4;
    --text-muted: #a0a0a0;
    --brand-primary: #d4af37;
    --brand-primary-hover: #b8902f;
    --tab-active-bg-start: #f1d07a;
    --tab-active-bg-end: #b98a2f;
    --tab-active-border: #d4af37;
    --switch-track-on-border: #d4af37;
    --switch-track-on-glow: rgba(212, 175, 55, 0.32);
    ---bg: linear-gradient(135deg, #f1d07a 0%, #c99a3a 100%);
    ---bg-hover: linear-gradient(135deg, #e3bf64 0%, #b18630 100%);
    ---border: #d4af37;
    ---border-hover: #b8902f;
    --sidebar-tab-active-text: #f4e2a7;
    --sidebar-tab-active-border: rgba(212, 175, 55, 0.45);
    --sidebar-tab-active-bg: rgba(212, 175, 55, 0.18);
}

body[data-theme-mode="dark"].theme-palette-dark-silver {
    --app-bg: #000000;
    --app-bg-alt: #080808;
    --app-surface: #1a1a1a;
    --app-surface-2: #212121;
    --app-border: #2d2d2d;
    --app-border-strong: #3a3a3a;
    --text-primary: #ffffff;
    --text-secondary: #c4c4c4;
    --text-muted: #a0a0a0;
    --brand-primary: #c0c7d1;
    --brand-primary-hover: #9aa3ad;
    --tab-active-bg-start: #e3e8ef;
    --tab-active-bg-end: #a9b2bd;
    --tab-active-border: #c0c7d1;
    --switch-track-on-border: #c0c7d1;
    --switch-track-on-glow: rgba(192, 199, 209, 0.32);
    ---bg: linear-gradient(135deg, #e3e8ef 0%, #aeb7c3 100%);
    ---bg-hover: linear-gradient(135deg, #d4dbe4 0%, #9aa4b0 100%);
    ---border: #c0c7d1;
    ---border-hover: #9aa3ad;
    --sidebar-tab-active-text: #eef1f5;
    --sidebar-tab-active-border: rgba(192, 199, 209, 0.45);
    --sidebar-tab-active-bg: rgba(192, 199, 209, 0.2);
}

body[data-theme-mode="dark"].theme-palette-dark-gray {
    --app-bg: #000000;
    --app-bg-alt: #080808;
    --app-surface: #1a1a1a;
    --app-surface-2: #212121;
    --app-border: #2d2d2d;
    --app-border-strong: #3a3a3a;
    --text-primary: #f5f5f5;
    --text-secondary: #c4c4c4;
    --text-muted: #a0a0a0;
    --brand-primary: #6b7280;
    --brand-primary-hover: #4b5563;
    --tab-active-bg-start: #6b7280;
    --tab-active-bg-end: #4b5563;
    --tab-active-border: #6b7280;
    --switch-track-on-border: #6b7280;
    --switch-track-on-glow: rgba(107, 114, 128, 0.3);
    ---bg: #6b7280;
    ---bg-hover: #4b5563;
    ---border: #6b7280;
    ---border-hover: #4b5563;
    --sidebar-tab-active-text: #d0d4da;
    --sidebar-tab-active-border: rgba(107, 114, 128, 0.4);
    --sidebar-tab-active-bg: rgba(107, 114, 128, 0.18);
}

body[data-theme-mode="dark"].theme-palette-cyber-purple {
    --app-bg: #1e0d2e;
    --app-bg-alt: #170a24;
    --app-surface: #3a1a4a;
    --app-surface-2: #45225a;
    --app-border: #5a3b70;
    --app-border-strong: #70508a;
    --text-primary: #ffffff;
    --text-secondary: #ceb8de;
    --text-muted: #b993d6;
    --brand-primary: #00ffff;
    --brand-primary-hover: #00d6d6;
    --danger-primary: #ff0088;
    --danger-primary-hover: #df0077;
    --tab-active-bg-start: #00ffff;
    --tab-active-bg-end: #00c2d4;
    --tab-active-border: #00ffff;
    --tab-active-text: #13101a;
    --switch-track-on-border: #39ff14;
    --switch-track-on-glow: rgba(57, 255, 20, 0.28);
    --table-warning-bg: #4a4022;
    --table-warning-hover-bg: #5b4e2b;
    --table-immediate-bg: #4a1637;
    --table-immediate-hover-bg: #5d1b44;
}

body[data-theme-mode="dark"].theme-palette-emerald {
    --app-bg: #1f3d2f;
    --app-bg-alt: #173126;
    --app-surface: #2c4f40;
    --app-surface-2: #355c4b;
    --app-border: #3e6c58;
    --app-border-strong: #4f826b;
    --text-primary: #f5f5dc;
    --text-secondary: #d9e2c6;
    --text-muted: #b6c79f;
    --brand-primary: #388e3c;
    --brand-primary-hover: #2f7a33;
    --danger-primary: #b94c2d;
    --danger-primary-hover: #a34025;
    --tab-active-bg-start: #388e3c;
    --tab-active-bg-end: #2f7a33;
    --tab-active-border: #6bbd6a;
    --switch-track-on-border: #388e3c;
    --switch-track-on-glow: rgba(56, 142, 60, 0.24);
    --kpi-card-3-bg: #6bbd6a;
    --kpi-card-3-border: #4b954a;
    --kpi-card-3-glow: rgba(107, 189, 106, 0.2);
    --kpi-card-4-bg: #b94c2d;
    --kpi-card-4-border: #8d3a22;
    --kpi-card-4-glow: rgba(185, 76, 45, 0.2);
}

body[data-theme-mode="dark"].theme-palette-midnight-teal {
    --app-bg: #000000;
    --app-bg-alt: #050b12;
    --app-surface: #0a151f;
    --app-surface-2: #102131;
    --app-border: #1a2b3d;
    --app-border-strong: #27425f;
    --text-primary: #e6f2ff;
    --text-secondary: #9ab1c8;
    --text-muted: #6a8095;
    --brand-primary: #00bcd4;
    --brand-primary-hover: #00a3b8;
    --danger-primary: #ff00ff;
    --danger-primary-hover: #db00db;
    --tab-active-bg-start: #00cfe6;
    --tab-active-bg-end: #00aeca;
    --tab-active-border: #00d7ee;
    --tab-active-text: #08111b;
    --switch-track-on-border: #00ff9d;
    --switch-track-on-glow: rgba(0, 255, 157, 0.26);
}

body[data-theme-mode="dark"].theme-palette-tuscan {
    --app-bg: #2c2423;
    --app-bg-alt: #241d1c;
    --app-surface: #4a3e3c;
    --app-surface-2: #524543;
    --app-border: #5a4d4b;
    --app-border-strong: #786664;
    --text-primary: #f5ece1;
    --text-secondary: #d4c2b6;
    --text-muted: #9a8a88;
    --brand-primary: #d4af37;
    --brand-primary-hover: #c19b2e;
    --danger-primary: #a35649;
    --danger-primary-hover: #8f473d;
    --tab-active-bg-start: #d4af37;
    --tab-active-bg-end: #b89530;
    --tab-active-border: #d4af37;
    --tab-active-text: #2c2423;
    --kpi-card-1-bg: #382f2d;
    --kpi-card-1-border: #5a4d4b;
    --kpi-card-3-bg: #a88d6a;
    --kpi-card-3-border: #8d7558;
    --kpi-card-3-ring: rgba(212, 175, 55, 0.2);
}

body[data-theme-mode="dark"].theme-palette-slate {
    --app-bg: #1a202c;
    --app-bg-alt: #111827;
    --app-surface: #2d3748;
    --app-surface-2: #364152;
    --app-border: #4a5568;
    --app-border-strong: #5b677c;
    --text-primary: #f7fafc;
    --text-secondary: #d4dde9;
    --text-muted: #cbd5e0;
    --brand-primary: #00bcd4;
    --brand-primary-hover: #00a7bc;
    --danger-primary: #6b213c;
    --danger-primary-hover: #571a31;
    --tab-active-bg-start: #00bcd4;
    --tab-active-bg-end: #008ba3;
    --tab-active-border: #00bcd4;
    --tab-active-text: #10222d;
    --kpi-card-3-bg: #0f4c5c;
    --kpi-card-3-border: #0d3d4b;
    --kpi-card-3-ring: rgba(0, 188, 212, 0.2);
    --kpi-card-4-bg: #6b213c;
    --kpi-card-4-border: #51172d;
    --kpi-card-4-ring: rgba(251, 207, 232, 0.2);
}

/*
 * Theme completeness bridge:
 * ensure every palette controls every shared semantic token.
 * This is theme-only and does not alter structure/layout.
 */
body[class*="theme-palette-"]:not(.theme-palette-default) {
    --surface-main: var(--app-bg);
    --surface-hover: var(--app-surface-2);
    --success-primary: color-mix(in srgb, var(--brand-primary) 64%, #22c55e 36%);
    --warning-primary: color-mix(in srgb, var(--brand-primary) 52%, #f59e0b 48%);
    --profile-photo-bg: var(--input-bg);
    --profile-photo-border: var(--input-border);
    --profile-photo-meta: var(--text-muted);
    --modal-overlay: color-mix(in srgb, var(--app-bg-alt) 76%, transparent);
    --modal-bg: var(--app-bg);
    --modal-border: var(--border-panel);
    --modal-header-bg: var(--app-surface);
    --modal-footer-bg: var(--app-surface);
    --modal-shadow: 0 20px 40px color-mix(in srgb, var(--app-bg-alt) 42%, transparent);

    --table-bg: var(--app-surface);
    --table-head-bg: var(--app-surface-2);
    --table-head-text: var(--text-secondary);
    --table-row-odd: var(--app-surface);
    --table-row-even: color-mix(in srgb, var(--app-surface) 88%, #000000 12%);
    --table-row-hover: color-mix(in srgb, var(--brand-primary) 12%, var(--app-surface));
    --table-cell-border: var(--app-border);

    --tab-strip-border: var(--app-border-strong);
    --tab-strip-bg-start: var(--app-surface);
    --tab-strip-bg-end: var(--app-surface-2);
    --tab-strip-shadow: rgba(255, 255, 255, 0.04);
    --tab-text: var(--text-secondary);
    --tab-text-hover: var(--text-primary);
    --tab-hover-bg: color-mix(in srgb, var(--brand-primary) 14%, transparent);
    --tab-active-text: #ffffff;
    --tab-active-bg-start: var(--brand-primary);
    --tab-active-bg-end: var(--brand-primary-hover);
    --tab-active-border: var(--brand-primary);
    --tab-active-glow: color-mix(in srgb, var(--brand-primary) 34%, transparent);

    --switch-shell-border: var(--app-border-strong);
    --switch-shell-bg: var(--app-surface);
    --switch-shell-text: var(--text-secondary);
    --switch-shell-hover-border: var(--brand-primary);
    --switch-shell-hover-ring: color-mix(in srgb, var(--brand-primary) 20%, transparent);
    --switch-track-off-border: var(--app-border-strong);
    --switch-track-off-start: color-mix(in srgb, var(--app-surface-2) 75%, #ffffff 25%);
    --switch-track-off-end: color-mix(in srgb, var(--app-surface) 85%, #000000 15%);
    --switch-knob-start: #ffffff;
    --switch-knob-end: #e5e7eb;
    --switch-track-on-border: var(--brand-primary);
    --switch-track-on-glow: color-mix(in srgb, var(--brand-primary) 24%, transparent);

    --context-add-text: var(--text-primary);
    --context-add-border: color-mix(in srgb, var(--brand-primary) 58%, transparent);
    --context-add-bg-start: color-mix(in srgb, var(--brand-primary) 46%, var(--app-surface));
    --context-add-bg-end: color-mix(in srgb, var(--brand-primary-hover) 42%, var(--app-surface));
    --context-add-ring: color-mix(in srgb, var(--brand-primary) 24%, transparent);
    --context-add-glow: color-mix(in srgb, var(--brand-primary) 28%, transparent);
    --context-add-text-hover: #ffffff;
    --context-add-border-hover: color-mix(in srgb, var(--brand-primary) 72%, transparent);
    --context-add-bg-start-hover: color-mix(in srgb, var(--brand-primary) 58%, var(--app-surface));
    --context-add-bg-end-hover: color-mix(in srgb, var(--brand-primary-hover) 54%, var(--app-surface));
    --context-add-ring-hover: color-mix(in srgb, var(--brand-primary) 34%, transparent);
    --context-add-glow-hover: color-mix(in srgb, var(--brand-primary) 36%, transparent);

    --table-head-bg-strong: var(--table-head-bg);
    --table-head-text-strong: var(--table-head-text);
    --table-row-bg-strong: var(--table-row-odd);
    --table-row-hover-strong: var(--table-row-hover);
    --table-row-even-strong: var(--table-row-even);
    --table-border-strong: var(--table-cell-border);
    --table-muted-strong: var(--text-muted);

    --table-warning-bg: color-mix(in srgb, var(--switch-shell-bg) 74%, var(--switch-track-on-border) 26%);
    --table-warning-hover-bg: color-mix(in srgb, var(--switch-shell-bg) 62%, var(--switch-track-on-border) 38%);
    --table-warning-border: color-mix(in srgb, var(--switch-track-on-border) 48%, transparent);
    --table-warning-text: color-mix(in srgb, var(--text-primary) 82%, var(--switch-track-on-border) 18%);

    --table-immediate-bg: color-mix(in srgb, var(--danger-primary) 28%, var(--table-row-odd));
    --table-immediate-hover-bg: color-mix(in srgb, var(--danger-primary) 36%, var(--table-row-hover));
    --table-immediate-border: color-mix(in srgb, var(--danger-primary) 50%, transparent);
    --table-immediate-text: color-mix(in srgb, var(--text-primary) 80%, var(--danger-primary) 20%);

    ---bg: var(--switch-track-on-border);
    ---bg-hover: color-mix(in srgb, var(--switch-track-on-border) 78%, #000000 22%);
    ---border: var(--switch-track-on-border);
    ---border-hover: color-mix(in srgb, var(--switch-track-on-border) 84%, #000000 16%);
    --btn-secondary-border: var(--app-surface);
    --btn-secondary-text: var(--text-secondary);
    --btn-secondary-bg-hover: var(--app-surface-2);
    --btn-secondary-border-hover: var(--app-surface);
    --btn-outline-border: var(--app-surface);
    --btn-outline-text: var(--brand-primary);
    --btn-outline-bg-hover: var(--brand-primary);

    --topbar-settings-icon-bg: var(--app-surface);
    --topbar-settings-icon-border: var(--app-border-strong);
    --topbar-settings-icon-color: var(--text-secondary);
    --topbar-account-hover-bg: var(--app-surface-2);
    --topbar-account-hover-border: var(--app-border-strong);

    --sidebar-tab-active-text: color-mix(in srgb, var(--text-primary) 84%, var(--brand-primary) 16%);
    --sidebar-tab-active-border: color-mix(in srgb, var(--brand-primary) 42%, transparent);
    --sidebar-tab-active-bg: color-mix(in srgb, var(--brand-primary) 16%, transparent);
    --sidebar-icon-color: color-mix(in srgb, var(--text-secondary) 70%, var(--brand-primary) 30%);

    --kpi-card-1-bg: color-mix(in srgb, var(--app-surface) 76%, var(--brand-primary) 24%);
    --kpi-card-1-border: color-mix(in srgb, var(--app-border) 72%, var(--brand-primary) 28%);
    --kpi-card-1-glow: color-mix(in srgb, var(--brand-primary) 22%, transparent);
    --kpi-card-1-ring: color-mix(in srgb, var(--brand-primary) 16%, transparent);
    --kpi-card-2-bg: var(--surface-panel-alt);
    --kpi-card-2-border: var(--border-panel);
    --kpi-card-2-glow: rgba(148, 163, 184, 0.16);
    --kpi-card-2-ring: rgba(148, 163, 184, 0.12);
    --kpi-card-3-bg: color-mix(in srgb, var(--app-surface) 68%, var(--brand-primary) 32%);
    --kpi-card-3-border: color-mix(in srgb, var(--app-border) 62%, var(--brand-primary) 38%);
    --kpi-card-3-glow: color-mix(in srgb, var(--brand-primary) 26%, transparent);
    --kpi-card-3-ring: color-mix(in srgb, var(--brand-primary) 22%, transparent);
    --kpi-card-4-bg: color-mix(in srgb, var(--app-surface) 66%, var(--danger-primary) 34%);
    --kpi-card-4-border: color-mix(in srgb, var(--app-border) 56%, var(--danger-primary) 44%);
    --kpi-card-4-glow: color-mix(in srgb, var(--danger-primary) 24%, transparent);
    --kpi-card-4-ring: color-mix(in srgb, var(--danger-primary) 20%, transparent);

    --depthub-comment-bg: var(--surface-panel-alt);
    --depthub-comment-border: var(--border-panel);
    --depthub-post-bg: var(--surface-panel-alt);
    --depthub-post-alt-bg: color-mix(in srgb, var(--surface-panel-alt) 86%, var(--surface-main) 14%);
    --depthub-post-border: var(--border-panel);
    --depthub-post-subject: color-mix(in srgb, var(--brand-primary) 68%, var(--text-primary) 32%);
    --depthub-post-muted: var(--text-muted);
    --depthub-reply-bg: color-mix(in srgb, var(--depthub-comment-bg) 88%, var(--surface-panel) 12%);
    --depthub-reply-border: color-mix(in srgb, var(--depthub-comment-border) 76%, var(--brand-primary) 24%);
    --depthub-pill-post-bg: color-mix(in srgb, var(--brand-primary) 20%, transparent);
    --depthub-pill-post-border: color-mix(in srgb, var(--brand-primary) 42%, transparent);
    --depthub-pill-post-text: color-mix(in srgb, var(--brand-primary) 62%, var(--text-primary) 38%);
    --depthub-pill-attention-bg: var(--table-immediate-bg);
    --depthub-pill-attention-border: var(--table-immediate-border);
    --depthub-pill-attention-text: var(--table-immediate-text);
    --depthub-pill-claimed-bg: color-mix(in srgb, var(--warning-primary) 22%, transparent);
    --depthub-pill-claimed-border: color-mix(in srgb, var(--warning-primary) 50%, transparent);
    --depthub-pill-claimed-text: color-mix(in srgb, var(--warning-primary) 72%, var(--text-primary) 28%);
    --depthub-pill-completed-bg: color-mix(in srgb, var(--success-primary) 22%, transparent);
    --depthub-pill-completed-border: color-mix(in srgb, var(--success-primary) 52%, transparent);
    --depthub-pill-completed-text: color-mix(in srgb, var(--success-primary) 76%, var(--text-primary) 24%);

    --helpdesk-config-panel-bg: var(--surface-panel-alt);
    --helpdesk-config-panel-border: var(--border-panel);
    --helpdesk-config-row-bg: var(--table-row-odd);
    --helpdesk-config-row-border: var(--table-cell-border);
    --helpdesk-config-row-hover-bg: var(--table-row-hover);
    --helpdesk-signature-preview-bg: var(--surface-panel);
    --helpdesk-signature-preview-border: var(--border-panel);
    --helpdesk-signature-preview-text: var(--text-primary);
    --dashboard-map-canvas-bg: color-mix(in srgb, var(--surface-panel) 86%, #000000 14%);
}

/* Per-theme completion sweep: explicit critical UI tokens for unique identity. */
body[data-theme-mode="light"].theme-palette-light {
    --surface-panel: #ffffff;
    --surface-panel-alt: #fbf8f6;
    --surface-panel-strong: #f6f1ee;
    --border-panel: #e6e1dd;
    --border-panel-soft: #d5ceca;
    --input-bg: #ffffff;
    --input-border: #d5ceca;
    --input-text: #221610;
    --input-placeholder: #7f726b;
    --topbar-settings-icon-bg: #f6f1ee;
    --topbar-settings-icon-border: #d5ceca;
    --topbar-settings-icon-color: #5d4f49;
    --topbar-account-hover-bg: #f8f2ef;
    --topbar-account-hover-border: #d5ceca;
    --kpi-card-2-bg: #f6f1ee;
    --kpi-card-2-border: #ddd5cf;
    --tab-text: #7a5f53;
    --tab-text-hover: #3d2a22;
    --tab-hover-bg: rgba(236, 91, 19, 0.1);
    --tab-active-bg-start: var(---bg);
    --tab-active-bg-end: var(---bg-hover);
    --tab-active-border: var(---border);
    --tab-active-glow: color-mix(in srgb, var(---bg) 28%, transparent);
    --sidebar-tab-active-text: #cf4d10;
    --sidebar-tab-active-border: rgba(236, 91, 19, 0.4);
    --sidebar-tab-active-bg: rgba(236, 91, 19, 0.12);
}

body[data-theme-mode="light"].theme-palette-light-blue {
    --brand-primary: #3b82f6;
    --brand-primary-hover: #2563eb;
    --input-focus-border: #3b82f6;
    --input-focus-ring: rgba(59, 130, 246, 0.2);
    --tab-hover-bg: rgba(59, 130, 246, 0.1);
    --tab-active-bg-start: var(--brand-primary);
    --tab-active-bg-end: var(--brand-primary-hover);
    --tab-active-border: var(--brand-primary);
    ---bg: #3b82f6;
    ---bg-hover: #2563eb;
    ---border: #3b82f6;
    ---border-hover: #2563eb;
    --btn-outline-border: #3b82f6;
    --btn-outline-text: #3b82f6;
    --btn-outline-bg-hover: #3b82f6;
    --topbar-settings-icon-color: #2f6fe0;
    --sidebar-tab-active-text: #2f6fe0;
    --sidebar-tab-active-border: rgba(59, 130, 246, 0.4);
    --sidebar-tab-active-bg: rgba(59, 130, 246, 0.14);
}

body[data-theme-mode="light"].theme-palette-light-green {
    --brand-primary: #22c55e;
    --brand-primary-hover: #16a34a;
    --input-focus-border: #22c55e;
    --input-focus-ring: rgba(34, 197, 94, 0.2);
    --tab-hover-bg: rgba(34, 197, 94, 0.1);
    --tab-active-bg-start: var(--brand-primary);
    --tab-active-bg-end: var(--brand-primary-hover);
    --tab-active-border: var(--brand-primary);
    ---bg: #22c55e;
    ---bg-hover: #16a34a;
    ---border: #22c55e;
    ---border-hover: #16a34a;
    --btn-outline-border: #22c55e;
    --btn-outline-text: #22c55e;
    --btn-outline-bg-hover: #22c55e;
    --topbar-settings-icon-color: #16a34a;
    --sidebar-tab-active-text: #16a34a;
    --sidebar-tab-active-border: rgba(34, 197, 94, 0.4);
    --sidebar-tab-active-bg: rgba(34, 197, 94, 0.14);
}

body[data-theme-mode="light"].theme-palette-light-red {
    --brand-primary: #ef4444;
    --brand-primary-hover: #dc2626;
    --input-focus-border: #ef4444;
    --input-focus-ring: rgba(239, 68, 68, 0.2);
    --tab-hover-bg: rgba(239, 68, 68, 0.1);
    --tab-active-bg-start: var(--brand-primary);
    --tab-active-bg-end: var(--brand-primary-hover);
    --tab-active-border: var(--brand-primary);
    ---bg: #ef4444;
    ---bg-hover: #dc2626;
    ---border: #ef4444;
    ---border-hover: #dc2626;
    --btn-outline-border: #ef4444;
    --btn-outline-text: #ef4444;
    --btn-outline-bg-hover: #ef4444;
    --topbar-settings-icon-color: #dc2626;
    --sidebar-tab-active-text: #dc2626;
    --sidebar-tab-active-border: rgba(239, 68, 68, 0.4);
    --sidebar-tab-active-bg: rgba(239, 68, 68, 0.14);
}

body[data-theme-mode="light"].theme-palette-light-gold {
    --brand-primary: #d4af37;
    --brand-primary-hover: #b8902f;
    --input-focus-border: #d4af37;
    --input-focus-ring: rgba(212, 175, 55, 0.22);
    --tab-hover-bg: rgba(212, 175, 55, 0.12);
    --tab-active-bg-start: #f1d07a;
    --tab-active-bg-end: #b98a2f;
    --tab-active-border: #d4af37;
    ---bg: linear-gradient(135deg, #f1d07a 0%, #c99a3a 100%);
    ---bg-hover: linear-gradient(135deg, #e3bf64 0%, #b18630 100%);
    ---border: #d4af37;
    ---border-hover: #b8902f;
    ---text: #2b1f00;
    --btn-outline-border: #d4af37;
    --btn-outline-text: #b8902f;
    --btn-outline-bg-hover: #d4af37;
    --topbar-settings-icon-color: #b8902f;
    --sidebar-tab-active-text: #b8902f;
    --sidebar-tab-active-border: rgba(212, 175, 55, 0.45);
    --sidebar-tab-active-bg: rgba(212, 175, 55, 0.18);
}

body[data-theme-mode="light"].theme-palette-light-silver {
    --brand-primary: #aeb7c3;
    --brand-primary-hover: #8e97a3;
    --input-focus-border: #aeb7c3;
    --input-focus-ring: rgba(174, 183, 195, 0.22);
    --tab-hover-bg: rgba(174, 183, 195, 0.12);
    --tab-active-bg-start: #e3e8ef;
    --tab-active-bg-end: #aeb7c3;
    --tab-active-border: #c0c7d1;
    ---bg: linear-gradient(135deg, #e3e8ef 0%, #aeb7c3 100%);
    ---bg-hover: linear-gradient(135deg, #d4dbe4 0%, #9aa4b0 100%);
    ---border: #c0c7d1;
    ---border-hover: #9aa3ad;
    ---text: #1b1f24;
    --btn-outline-border: #c0c7d1;
    --btn-outline-text: #7f8a96;
    --btn-outline-bg-hover: #c0c7d1;
    --topbar-settings-icon-color: #8e97a3;
    --sidebar-tab-active-text: #8e97a3;
    --sidebar-tab-active-border: rgba(174, 183, 195, 0.45);
    --sidebar-tab-active-bg: rgba(174, 183, 195, 0.18);
}

body[data-theme-mode="light"].theme-palette-light-gray {
    --brand-primary: #6b7280;
    --brand-primary-hover: #4b5563;
    --input-focus-border: #6b7280;
    --input-focus-ring: rgba(107, 114, 128, 0.2);
    --tab-hover-bg: rgba(107, 114, 128, 0.12);
    --tab-active-bg-start: #6b7280;
    --tab-active-bg-end: #4b5563;
    --tab-active-border: #6b7280;
    ---bg: #6b7280;
    ---bg-hover: #4b5563;
    ---border: #6b7280;
    ---border-hover: #4b5563;
    --btn-outline-border: #6b7280;
    --btn-outline-text: #6b7280;
    --btn-outline-bg-hover: #6b7280;
    --topbar-settings-icon-color: #4b5563;
    --sidebar-tab-active-text: #4b5563;
    --sidebar-tab-active-border: rgba(107, 114, 128, 0.4);
    --sidebar-tab-active-bg: rgba(107, 114, 128, 0.18);
}

body[data-theme-mode="dark"].theme-palette-dark-ruby {
    --surface-panel: #120505;
    --surface-panel-alt: #1b0909;
    --surface-panel-strong: #261010;
    --border-panel: #2d1010;
    --border-panel-soft: #4a2020;
    --input-bg: #1b0909;
    --input-border: #4a2020;
    --input-text: #ffeded;
    --input-placeholder: #806060;
    --topbar-settings-icon-bg: #2a1212;
    --topbar-settings-icon-border: #4a2020;
    --topbar-settings-icon-color: #ffb3cf;
    --topbar-account-hover-bg: #301414;
    --topbar-account-hover-border: #5a2525;
    --kpi-card-2-bg: #2a1818;
    --kpi-card-2-border: #4a2a2a;
}

body[data-theme-mode="dark"].theme-palette-pitch-black {
    --surface-panel: #070707;
    --surface-panel-alt: #111111;
    --surface-panel-strong: #181818;
    --border-panel: #2a2a2a;
    --border-panel-soft: #3d3d3d;
    --input-bg: #101010;
    --input-border: #3b3b3b;
    --input-text: #e8e8e8;
    --input-placeholder: #8f8f8f;
    --topbar-settings-icon-bg: #121212;
    --topbar-settings-icon-border: #3b3b3b;
    --topbar-settings-icon-color: #d7d7d7;
    --topbar-account-hover-bg: #181818;
    --topbar-account-hover-border: #4a4a4a;
    --kpi-card-1-bg: #101010;
    --kpi-card-1-border: #2a2a2a;
    --kpi-card-2-bg: #161616;
    --kpi-card-2-border: #3b3b3b;
    --kpi-card-3-bg: #1c1c1c;
    --kpi-card-3-border: #4d4d4d;
    --kpi-card-4-bg: #232323;
    --kpi-card-4-border: #595959;
    ---bg: #c8c8c8;
    ---bg-hover: #b2b2b2;
    ---border: #d2d2d2;
    ---border-hover: #bebebe;
    ---text: #0b0b0b;
    --context-add-text: #101010;
    --context-add-border: rgba(220, 220, 220, 0.55);
    --context-add-bg-start: rgba(210, 210, 210, 0.86);
    --context-add-bg-end: rgba(182, 182, 182, 0.84);
    --context-add-ring: rgba(224, 224, 224, 0.24);
    --context-add-glow: rgba(166, 166, 166, 0.26);
    --context-add-text-hover: #050505;
    --context-add-border-hover: rgba(236, 236, 236, 0.74);
    --context-add-bg-start-hover: rgba(224, 224, 224, 0.92);
    --context-add-bg-end-hover: rgba(198, 198, 198, 0.9);
}

body[data-theme-mode="dark"].theme-palette-dark {
    --surface-panel: #1a1a1a;
    --surface-panel-alt: #212121;
    --surface-panel-strong: #2a2a2a;
    --border-panel: #2d2d2d;
    --border-panel-soft: #3a3a3a;
    --input-bg: #212121;
    --input-border: #3a3a3a;
    --input-text: #ffffff;
    --input-placeholder: #a0a0a0;
    --topbar-settings-icon-bg: #252525;
    --topbar-settings-icon-border: #3f3f3f;
    --topbar-settings-icon-color: #d4d4d4;
    --topbar-account-hover-bg: #2b2b2b;
    --topbar-account-hover-border: #3f3f3f;
    --kpi-card-2-bg: #252525;
    --kpi-card-2-border: #3f3f3f;
    --switch-track-on-border: #111827;
    --switch-track-on-glow: rgba(17, 24, 39, 0.35);
    ---bg: #111827;
    ---bg-hover: #0b1220;
    ---border: #111827;
    ---border-hover: #0b1220;
    ---text: #ffffff;
    --sidebar-tab-active-text: #cbd5e1;
    --sidebar-tab-active-border: rgba(17, 24, 39, 0.5);
    --sidebar-tab-active-bg: rgba(17, 24, 39, 0.2);
}

body[data-theme-mode="dark"].theme-palette-dark-blue {
    --surface-panel: #1a1a1a;
    --surface-panel-alt: #212121;
    --surface-panel-strong: #2a2a2a;
    --border-panel: #2d2d2d;
    --border-panel-soft: #3a3a3a;
    --input-bg: #212121;
    --input-border: #3a3a3a;
    --input-text: #ffffff;
    --input-placeholder: #a0a0a0;
    --topbar-settings-icon-bg: #1f2530;
    --topbar-settings-icon-border: #3a3f47;
    --topbar-settings-icon-color: #a9c4ff;
    --topbar-account-hover-bg: #262c36;
    --topbar-account-hover-border: #3a3f47;
    --kpi-card-2-bg: #252525;
    --kpi-card-2-border: #3f3f3f;
}

body[data-theme-mode="dark"].theme-palette-dark-green {
    --surface-panel: #1a1a1a;
    --surface-panel-alt: #212121;
    --surface-panel-strong: #2a2a2a;
    --border-panel: #2d2d2d;
    --border-panel-soft: #3a3a3a;
    --input-bg: #212121;
    --input-border: #3a3a3a;
    --input-text: #ffffff;
    --input-placeholder: #a0a0a0;
    --topbar-settings-icon-bg: #1f2a24;
    --topbar-settings-icon-border: #35433b;
    --topbar-settings-icon-color: #8ee6b5;
    --topbar-account-hover-bg: #26312a;
    --topbar-account-hover-border: #35433b;
    --kpi-card-2-bg: #252525;
    --kpi-card-2-border: #3f3f3f;
}

body[data-theme-mode="dark"].theme-palette-dark-red {
    --surface-panel: #1a1a1a;
    --surface-panel-alt: #212121;
    --surface-panel-strong: #2a2a2a;
    --border-panel: #2d2d2d;
    --border-panel-soft: #3a3a3a;
    --input-bg: #212121;
    --input-border: #3a3a3a;
    --input-text: #ffffff;
    --input-placeholder: #a0a0a0;
    --topbar-settings-icon-bg: #2a1f21;
    --topbar-settings-icon-border: #43323a;
    --topbar-settings-icon-color: #ffb4b4;
    --topbar-account-hover-bg: #322528;
    --topbar-account-hover-border: #43323a;
    --kpi-card-2-bg: #252525;
    --kpi-card-2-border: #3f3f3f;
}

body[data-theme-mode="dark"].theme-palette-dark-gold {
    --surface-panel: #1a1a1a;
    --surface-panel-alt: #212121;
    --surface-panel-strong: #2a2a2a;
    --border-panel: #2d2d2d;
    --border-panel-soft: #3a3a3a;
    --input-bg: #212121;
    --input-border: #3a3a3a;
    --input-text: #ffffff;
    --input-placeholder: #a0a0a0;
    --topbar-settings-icon-bg: #2b2414;
    --topbar-settings-icon-border: #4a3d1f;
    --topbar-settings-icon-color: #f4e2a7;
    --topbar-account-hover-bg: #332b18;
    --topbar-account-hover-border: #4a3d1f;
    --kpi-card-2-bg: #252525;
    --kpi-card-2-border: #3f3f3f;
    ---text: #2b1f00;
}

body[data-theme-mode="dark"].theme-palette-dark-silver {
    --surface-panel: #1a1a1a;
    --surface-panel-alt: #212121;
    --surface-panel-strong: #2a2a2a;
    --border-panel: #2d2d2d;
    --border-panel-soft: #3a3a3a;
    --input-bg: #212121;
    --input-border: #3a3a3a;
    --input-text: #ffffff;
    --input-placeholder: #a0a0a0;
    --topbar-settings-icon-bg: #23272f;
    --topbar-settings-icon-border: #3b414b;
    --topbar-settings-icon-color: #eef1f5;
    --topbar-account-hover-bg: #2a3039;
    --topbar-account-hover-border: #3b414b;
    --kpi-card-2-bg: #252525;
    --kpi-card-2-border: #3f3f3f;
    ---text: #1b1f24;
}

body[data-theme-mode="dark"].theme-palette-dark-gray {
    --surface-panel: #1a1a1a;
    --surface-panel-alt: #212121;
    --surface-panel-strong: #2a2a2a;
    --border-panel: #2d2d2d;
    --border-panel-soft: #3a3a3a;
    --input-bg: #212121;
    --input-border: #3a3a3a;
    --input-text: #f5f5f5;
    --input-placeholder: #a0a0a0;
    --topbar-settings-icon-bg: #242628;
    --topbar-settings-icon-border: #3b3d40;
    --topbar-settings-icon-color: #d0d4da;
    --topbar-account-hover-bg: #2c2f33;
    --topbar-account-hover-border: #3b3d40;
    --kpi-card-2-bg: #252525;
    --kpi-card-2-border: #3f3f3f;
}

body[data-theme-mode="dark"].theme-palette-cyber-purple {
    --surface-panel: #3a1a4a;
    --surface-panel-alt: #45225a;
    --surface-panel-strong: #532e68;
    --border-panel: #5a3b70;
    --border-panel-soft: #70508a;
    --input-bg: #45225a;
    --input-border: #70508a;
    --input-text: #ffffff;
    --input-placeholder: #b993d6;
    --topbar-settings-icon-bg: #4c2962;
    --topbar-settings-icon-border: #7b5d93;
    --topbar-settings-icon-color: #f6e7ff;
    --topbar-account-hover-bg: #55306c;
    --topbar-account-hover-border: #7b5d93;
    --kpi-card-2-bg: #4b2a61;
    --kpi-card-2-border: #73528d;
}

body[data-theme-mode="dark"].theme-palette-emerald {
    --surface-panel: #2c4f40;
    --surface-panel-alt: #355c4b;
    --surface-panel-strong: #3f6b58;
    --border-panel: #3e6c58;
    --border-panel-soft: #4f826b;
    --input-bg: #355c4b;
    --input-border: #4f826b;
    --input-text: #f5f5dc;
    --input-placeholder: #b6c79f;
    --topbar-settings-icon-bg: #3b6753;
    --topbar-settings-icon-border: #568a73;
    --topbar-settings-icon-color: #e7efd4;
    --topbar-account-hover-bg: #446f5a;
    --topbar-account-hover-border: #568a73;
    --kpi-card-2-bg: #3a6552;
    --kpi-card-2-border: #568a73;
}

body[data-theme-mode="dark"].theme-palette-midnight-teal {
    --surface-panel: #0a151f;
    --surface-panel-alt: #102131;
    --surface-panel-strong: #153048;
    --border-panel: #1a2b3d;
    --border-panel-soft: #27425f;
    --input-bg: #102131;
    --input-border: #27425f;
    --input-text: #e6f2ff;
    --input-placeholder: #6a8095;
    --topbar-settings-icon-bg: #14304a;
    --topbar-settings-icon-border: #315272;
    --topbar-settings-icon-color: #b8d9f7;
    --topbar-account-hover-bg: #183652;
    --topbar-account-hover-border: #315272;
    --kpi-card-2-bg: #1a334d;
    --kpi-card-2-border: #315272;
}

body[data-theme-mode="dark"].theme-palette-tuscan {
    --surface-panel: #4a3e3c;
    --surface-panel-alt: #524543;
    --surface-panel-strong: #5d4f4c;
    --border-panel: #5a4d4b;
    --border-panel-soft: #786664;
    --input-bg: #524543;
    --input-border: #786664;
    --input-text: #f5ece1;
    --input-placeholder: #9a8a88;
    --topbar-settings-icon-bg: #5a4c49;
    --topbar-settings-icon-border: #86716e;
    --topbar-settings-icon-color: #f1dfcc;
    --topbar-account-hover-bg: #624f4c;
    --topbar-account-hover-border: #86716e;
    --kpi-card-2-bg: #5a4a46;
    --kpi-card-2-border: #86716e;
}

body[data-theme-mode="dark"].theme-palette-slate {
    --surface-panel: #2d3748;
    --surface-panel-alt: #364152;
    --surface-panel-strong: #404d61;
    --border-panel: #4a5568;
    --border-panel-soft: #5b677c;
    --input-bg: #364152;
    --input-border: #5b677c;
    --input-text: #f7fafc;
    --input-placeholder: #cbd5e0;
    --topbar-settings-icon-bg: #3a475c;
    --topbar-settings-icon-border: #667389;
    --topbar-settings-icon-color: #e8f1fb;
    --topbar-account-hover-bg: #415068;
    --topbar-account-hover-border: #667389;
    --kpi-card-2-bg: #404d61;
    --kpi-card-2-border: #667389;
}

/* Default status colors applied per-theme (editable per theme later). */
body[data-theme-mode="light"] {
    --success-primary: #34d399;
    --warning-primary: #facc15;
    --danger-primary: #ef4444;
    --danger-primary-hover: #dc2626;
}

body[data-theme-mode="dark"].theme-palette-default {
    --success-primary: #34d399;
    --warning-primary: #facc15;
    --danger-primary: #ef4444;
    --danger-primary-hover: #dc2626;
}

body[data-theme-mode="dark"].theme-palette-dark-ruby {
    --success-primary: #34d399;
    --warning-primary: #facc15;
    --danger-primary: #ef4444;
    --danger-primary-hover: #dc2626;
}

body[data-theme-mode="dark"].theme-palette-pitch-black {
    --success-primary: #34d399;
    --warning-primary: #facc15;
    --danger-primary: #ef4444;
    --danger-primary-hover: #dc2626;
}

body[data-theme-mode="dark"].theme-palette-dark {
    --success-primary: #34d399;
    --warning-primary: #facc15;
    --danger-primary: #ef4444;
    --danger-primary-hover: #dc2626;
}

body[data-theme-mode="dark"].theme-palette-cyber-purple {
    --success-primary: #34d399;
    --warning-primary: #facc15;
    --danger-primary: #ef4444;
    --danger-primary-hover: #dc2626;
}

body[data-theme-mode="dark"].theme-palette-emerald {
    --success-primary: #34d399;
    --warning-primary: #facc15;
    --danger-primary: #ef4444;
    --danger-primary-hover: #dc2626;
}

body[data-theme-mode="dark"].theme-palette-midnight-teal {
    --success-primary: #34d399;
    --warning-primary: #facc15;
    --danger-primary: #ef4444;
    --danger-primary-hover: #dc2626;
}

body[data-theme-mode="dark"].theme-palette-midnight-teal {
    --icon-btn-bg: #102030;
    --icon-btn-border-color: transparent;
    --icon-btn-border-width: 0;
    --icon-btn-color: #8499AE;
    --icon-btn-hover-bg: color-mix(in srgb, var(--icon-btn-bg) 90%, #ffffff 10%);
    --icon-btn-hover-border-color: transparent;
    --icon-btn-hover-color: #8499AE;
}

body[data-theme-mode="dark"].theme-palette-tuscan {
    --success-primary: #34d399;
    --warning-primary: #facc15;
    --danger-primary: #ef4444;
    --danger-primary-hover: #dc2626;
}

body[data-theme-mode="dark"].theme-palette-tuscan {
    --icon-btn-bg: var(--app-bg);
    --icon-btn-border-color: transparent;
    --icon-btn-border-width: 1px;
    --icon-btn-color: var(--table-head-text-strong);
    --icon-btn-hover-bg: var(--sidebar-tab-active-bg);
    --icon-btn-hover-border-color: var(--sidebar-tab-active-border);
    --icon-btn-hover-color: var(--sidebar-tab-active-text);
}

body[data-theme-mode="dark"].theme-palette-slate {
    --success-primary: #34d399;
    --warning-primary: #facc15;
    --danger-primary: #ef4444;
    --danger-primary-hover: #dc2626;
}

body[data-theme-mode="dark"].theme-palette-slate {
    --icon-btn-border-color: transparent;
    --icon-btn-border-width: 1px;
    --icon-btn-hover-bg: var(--sidebar-tab-active-bg);
    --icon-btn-hover-border-color: #00BCD4;
    --icon-btn-hover-color: var(--sidebar-tab-active-text);
    --input-focus-border: #00BCD4;
    --input-focus-ring: rgba(0, 188, 212, 0.22);
}

/* Icon button tokens for light themes. */
body[data-theme-mode="light"] {
    --icon-btn-bg: var(--app-bg);
    --icon-btn-border-color: var(--table-head-text-strong);
    --icon-btn-border-width: 1px;
    --icon-btn-color: var(--table-head-text-strong);
    --icon-btn-hover-bg: var(--btn-secondary-bg-hover);
    --icon-btn-hover-border-color: var(--btn-secondary-border-hover);
    --icon-btn-hover-color: #ffffff;
}

/* Icon button tokens for dark themes: no visible border + sidebar-matched highlight. */
body[data-theme-mode="dark"] {
    --icon-btn-bg: var(--app-bg);
    --icon-btn-border-color: transparent;
    --icon-btn-border-width: 1px;
    --icon-btn-color: var(--table-head-text-strong);
    --icon-btn-hover-bg: var(--sidebar-tab-active-bg);
    --icon-btn-hover-border-color: var(--sidebar-tab-active-border);
    --icon-btn-hover-color: var(--sidebar-tab-active-text);
}

/* Sub-themes: remove visible borders (match default theme feel) */
body[data-theme-mode="light"].theme-palette-light-blue,
body[data-theme-mode="light"].theme-palette-light-green,
body[data-theme-mode="light"].theme-palette-light-red,
body[data-theme-mode="light"].theme-palette-light-gold,
body[data-theme-mode="light"].theme-palette-light-silver,
body[data-theme-mode="light"].theme-palette-light-gray,
body[data-theme-mode="dark"].theme-palette-dark-ruby,
body[data-theme-mode="dark"].theme-palette-dark-blue,
body[data-theme-mode="dark"].theme-palette-dark-green,
body[data-theme-mode="dark"].theme-palette-dark-red,
body[data-theme-mode="dark"].theme-palette-dark-gold,
body[data-theme-mode="dark"].theme-palette-dark-silver,
body[data-theme-mode="dark"].theme-palette-dark-gray,
body[data-theme-mode="dark"].theme-palette-dark,
body[data-theme-mode="dark"].theme-palette-cyber-purple,
body[data-theme-mode="dark"].theme-palette-emerald,
body[data-theme-mode="dark"].theme-palette-midnight-teal,
body[data-theme-mode="dark"].theme-palette-tuscan,
body[data-theme-mode="dark"].theme-palette-slate {
    ---border: var(---bg);
    ---border-hover: var(---bg-hover);
    --btn-secondary-border: transparent;
    --btn-secondary-border-hover: transparent;
    --btn-outline-border: transparent;
    --input-border: var(--table-head-bg-strong);
    --switch-shell-border: transparent;
    --table-action-bg: color-mix(in srgb, var(--table-row-bg-strong) 88%, #000000 12%);
}