:root {
  /* PALETTE */

  /* Absolutes */
  --c-white: #fff;
  --c-white-ff: #ffffff;        /* same colour, kept distinct from #fff for grep parity */
  --c-black: #000;

  /* Neutral / slate-grey ramp (light → dark) */
  --c-gray-50:  #fafbfc;        /* zebra off-white */
  --c-gray-75:  #f8fafc;        /* pick-list hover wash */
  --c-gray-100: #f4f4f4;        /* app background, readonly fields */
  --c-gray-110: #f4f7fc;        /* list row hover */
  --c-gray-120: #f7f9fc;        /* list header bg */
  --c-gray-150: #ececec;        /* hairline divider */
  --c-gray-160: #eef1f6;        /* logs-state neutral bg */
  --c-gray-200: #e7ecf3;        /* pill hover bg */
  --c-gray-250: #e5e7eb;        /* cancelled-state row / map placeholder */
  --c-gray-300: #d0d0d0;        /* input border (login + table actions) */
  --c-gray-350: #555;           /* login label text */
  --c-text-900: #1a1a1a;        /* body text */

  /* Cool slate ramp (blue-grey) */
  --c-slate-100: #f1f5f9;       /* sunken slate wash, badges */
  --c-slate-150: #e2e8f0;       /* slate border, ops/prefs card border */
  --c-slate-200: #cbd5e1;       /* slate input border */
  --c-slate-210: #cdd5e3;       /* pill / modal input border (warmer slate) */
  --c-slate-220: #d8dde8;       /* list outer card border */
  --c-slate-250: #b6c0d3;       /* pill hover border */
  --c-slate-400: #94a3b8;       /* muted slate text */
  --c-slate-480: #6b7280;       /* neutral muted text (mtime, slugs, readonly) */
  --c-slate-500: #64748b;       /* secondary muted text (cool slate) */
  --c-slate-550: #4b5563;       /* cancelled-pill text */
  --c-slate-560: #4a5670;       /* modal caption text */
  --c-slate-570: #475569;       /* icon/secondary text, list header text */
  --c-slate-600: #2c3645;       /* pill text, param mono text */
  --c-slate-700: #334155;       /* url-hint text */
  --c-slate-900: #0f172a;       /* strong text, terminal bg (ops-log) */

  /* Dark sidebar / chrome ramp */
  --c-navy-700: #29354a;        /* nav hover / pressed */
  --c-navy-720: #232b3a;        /* user-menu popover bg */
  --c-navy-750: #2e3a4e;        /* sidebar dividers, menu hover */
  --c-navy-760: #3a4a64;        /* sidebar control border */
  --c-navy-800: #1e2430;        /* sidebar bg, primary button, toast */
  --c-navy-850: #1e293b;        /* active log-pick bg */

  /* Sidebar text ramp (light-on-dark) */
  --c-fog-300: #8a96aa;         /* dim sidebar text (hint, role, caret) */
  --c-fog-200: #d0d8e8;         /* sidebar body text */
  --c-fog-100: #e8eef8;         /* sidebar emphasis text */

  /* Terminal ink */
  --c-ink-900: #0d1117;         /* logs-pane / cat-viewer-pre bg */
  --c-ink-100: #c9d1d9;         /* logs-pane text */

  /* Blue ramp (accent) */
  --c-blue-50:  #f1f5fb;        /* faint blue wash (kbd, bbox-pick hover) */
  --c-blue-60:  #eef2ff;        /* chip bg (indigo-tinted) */
  --c-blue-70:  #e7f0ff;        /* running-state row bg */
  --c-blue-80:  #e0edff;        /* ingest badge bg */
  --c-blue-90:  #dbeafe;        /* state-pill running bg */
  --c-blue-95:  #dde9ff;        /* active sortable header bg */
  --c-blue-100: #c7dbff;        /* ingest badge border */
  --c-blue-300: #6ea8fe;        /* focus ring / sidebar active accent */
  --c-blue-400: #3a6fc7;        /* avatar gradient end */
  --c-blue-500: #2563eb;        /* accent */
  --c-blue-600: #1d4ed8;        /* accent hover / strong link */
  --c-blue-700: #1e40af;        /* accent active border */

  /* Indigo (chip + url-hint accent) */
  --c-indigo-100: #ddd6fe;      /* custom badge border */
  --c-indigo-200: #ede9fe;      /* custom badge bg */
  --c-indigo-500: #6366f1;      /* url-hint left rule */
  --c-indigo-700: #6d28d9;      /* custom badge text */
  --c-indigo-800: #4338ca;      /* chip text */

  /* Green ramp (success) */
  --c-green-50:  #e7f8ec;       /* succeeded-state row bg */
  --c-green-100: #dcfce7;       /* success bg */
  --c-green-200: #bbf7d0;       /* success border */
  --c-green-600: #16a34a;       /* (reserved success mid) */
  --c-green-700: #15803d;       /* success fg (icon-on) */
  --c-green-800: #166534;       /* success text (badge/pill) */

  /* Red ramp (danger) */
  --c-red-50:  #fef2f2;         /* files-rm hover bg */
  --c-red-60:  #fee2e2;         /* danger soft bg */
  --c-red-70:  #fde2e2;         /* danger-state row / pill bg */
  --c-red-100: #fecaca;         /* bad sys-pill border */
  --c-red-110: #f4c2c2;         /* danger pill border */
  --c-red-200: #ffd6d5;         /* destructive-menu hover text */
  --c-red-300: #f08988;         /* destructive-menu text */
  --c-red-400: #c0392b;         /* login error text */
  --c-red-500: #dc2626;         /* (reserved danger mid) */
  --c-red-600: #b91c1c;         /* icon-btn-danger text */
  --c-red-700: #b42318;         /* danger text */
  --c-red-750: #991b1b;         /* bad badge text */
  --c-red-800: #8b1d12;         /* danger active / pill-danger hover text */
  --c-red-900: #7f1d1d;         /* icon-btn-danger hover text */
  --c-red-950: #4a2828;         /* destructive-menu hover bg */

  /* Amber ramp (warning / pending) */
  --c-amber-50:  #fdf6e3;       /* pending-state row bg */
  --c-amber-100: #fef3c7;       /* warning bg */
  --c-amber-150: #fde6a9;       /* pending state-pill bg */
  --c-amber-200: #fde68a;       /* warning border */
  --c-amber-700: #92660a;       /* preparation badge text */
  --c-amber-720: #92400e;       /* warning text */
  --c-amber-800: #7c4a03;       /* pending state-pill text */

  /* Translucent overlays / shadows (alpha preserved per-use) */
  --c-overlay-login:  rgba(20, 28, 44, 0.92);  /* login backdrop */
  --c-overlay-modal:  rgba(20, 24, 36, 0.55);  /* modal backdrop */
  --c-shadow-12:      rgba(15, 23, 42, 0.12);  /* dropdown shadow */
  --c-shadow-25:      rgba(0, 0, 0, 0.25);     /* modal / toast shadow */
  --c-shadow-40:      rgba(0, 0, 0, 0.4);       /* login-form shadow */
  --c-shadow-50:      rgba(0, 0, 0, 0.5);       /* user-menu shadow */
  --c-focus-glow:     rgba(110, 168, 254, 0.25); /* input focus halo */

  /* SEMANTIC */

  /* Surfaces / backgrounds */
  --surface:         var(--c-white-ff);   /* primary panel / modal / main */
  --surface-raised:  var(--c-white);      /* cards, inputs, list rows */
  --surface-sunken:  var(--c-slate-100);  /* recessed wash (placeholders, hints) */
  --surface-muted:   var(--c-gray-100);   /* readonly fields, modal-actions btn */
  --surface-alt:     var(--c-gray-50);    /* zebra stripe */
  --surface-hover:   var(--c-gray-110);   /* list/dropdown row hover */
  --surface-hover-cool: var(--c-gray-75); /* pick-list hover */
  --icon-btn-hover:  rgba(0, 0, 0, 0.05); /* translucent hover plate — lifts over any bg, incl. a hovered row */
  --bg-app:          var(--c-gray-100);   /* app / catalog backdrop */
  --bg-terminal:     var(--c-ink-900);    /* logs panes */
  --bg-terminal-alt: var(--c-slate-900);  /* ops-log terminal */
  --bg-map:          var(--c-gray-250);   /* map canvas before tiles */
  --panel-glass:        rgba(255, 255, 255, 0.82);  /* translucent over-map panels (layers list) */
  --panel-glass-border: rgba(15, 23, 42, 0.10);
  /* Over-map plaques (toolbar, search, report, scale) match the layers panel: light glass with
     theme text. The dark theme re-darkens them to navy glass (see the dark block below). */
  --map-glass-bg:       var(--panel-glass);
  --map-glass-fg:       var(--text);
  --map-glass-border:   var(--panel-glass-border);

  /* Header / table chrome */
  --head-bg:         var(--c-gray-120);   /* table + list header bg */
  --head-fg:         var(--c-slate-570);  /* table + list header text */
  --divider:         var(--c-gray-150);   /* hairline between rows / toolbars */

  /* Borders */
  --border:          var(--c-slate-150);  /* default card/control border */
  --border-list:     var(--c-slate-220);  /* list outer card border */
  --border-input:    var(--c-slate-210);  /* pill / modal / filter inputs */
  --border-input-cool: var(--c-slate-200);/* search / page-size / prefs inputs */
  --border-input-plain: var(--c-gray-300);/* login + table-action inputs */

  /* Text */
  --text:            var(--c-text-900);   /* body */
  --text-strong:     var(--c-slate-900);  /* emphasised headings/values */
  --text-secondary:  var(--c-slate-570);  /* icons, secondary labels */
  --text-muted:      var(--c-slate-480);  /* muted captions, disabled rows, mtime */
  --text-muted-cool: var(--c-slate-500);  /* cool-slate muted (ops-meta, hints) */
  --text-muted-2:    var(--c-gray-350);   /* login label */
  --text-faint:      var(--c-slate-400);  /* faint slate (none-badge, locks) */
  --text-caption:    var(--c-slate-560);  /* modal field captions */
  --text-mono:       var(--c-slate-600);  /* mono param / pill text */
  --text-mono-dark:  var(--c-navy-800);   /* dropdown / picker item text, accents on light */
  --text-inverse:    var(--c-white);      /* text on dark buttons */
  --text-link:       var(--c-blue-500);   /* breadcrumb / crumb links */
  --text-terminal:   var(--c-ink-100);    /* logs-pane text */
  --text-terminal-alt: var(--c-slate-150);/* ops-log text */

  /* Muted-row dimming (disabled / archived / cancelled) */
  --text-dim:        var(--c-slate-480);

  /* Accent (primary blue) */
  --accent:          var(--c-blue-500);
  --accent-hover:    var(--c-blue-600);
  --accent-active:   var(--c-blue-700);
  --accent-fg:       var(--c-white);
  --accent-strong:   var(--c-blue-600);   /* active sortable text, strong link */
  --accent-soft-bg:  var(--c-blue-50);    /* faint blue hover wash */
  --accent-grad-end: var(--c-blue-400);   /* avatar gradient terminus */
  --sort-active-bg:  var(--c-blue-95);    /* active sortable column header bg */

  /* Focus */
  --focus-ring:      var(--c-blue-300);
  --focus-glow:      var(--c-focus-glow);

  /* Sidebar / chrome — light glass + theme text to match the layers panel.
     The dark theme re-darkens the rail to navy (see the dark block below). */
  --sidebar-glass:     var(--panel-glass);
  --sidebar-fg:        var(--text-secondary);
  --sidebar-fg-strong: var(--text-strong);
  --sidebar-fg-dim:    var(--text-muted);
  --sidebar-divider:   var(--border);
  --sidebar-hover:     var(--surface-hover);
  --sidebar-hover-weak: rgba(15, 23, 42, 0.05);  /* gentle nav-btn hover lift */
  --sidebar-active-accent: var(--accent);
  --sidebar-control-border: var(--border-input);
  --menu-bg:           var(--surface);
  --menu-hover:        var(--surface-hover);
  --primary-bg:        var(--c-navy-800);  /* primary/dark button + toast */
  --log-active-bg:     var(--c-navy-850);
  --log-active-fg:     var(--c-slate-100);
  --log-active-border: var(--c-slate-900);

  /* Status — danger */
  --danger:          var(--c-red-700);
  --danger-hover:    var(--c-red-800);
  --danger-bg:       var(--c-red-70);
  --danger-border:   var(--c-red-110);
  --danger-fg:       var(--c-white);
  --danger-row-hover-bg: var(--c-red-50);  /* files-rm hover */
  --danger-icon:     var(--c-red-600);
  --danger-icon-hover-fg: var(--c-red-900);
  --danger-menu-fg:  var(--c-red-300);
  --danger-menu-hover-bg: var(--c-red-950);
  --danger-menu-hover-fg: var(--c-red-200);
  --error-text:      var(--c-red-400);

  /* Status — success */
  --success:         var(--c-green-800);
  --success-icon:    var(--c-green-700);

  /* Status — warning */
  --warning:         var(--c-amber-720);
  --warning-bg:      var(--c-amber-100);

  /* Truncated-source warn banner (cat-viewer) */
  --text-warn:       #8a6d00;
  --bg-warn-soft:    #fff7e0;
  --border-warn:     #e8d28a;

  /* Run-state row tints */
  --state-pending-bg:   var(--c-amber-50);
  --state-running-bg:   var(--c-blue-70);
  --state-succeeded-bg: var(--c-green-50);
  --state-failed-bg:    var(--c-red-70);
  --state-cancelled-bg: var(--c-gray-150);

  /* State pills */
  --pill-pending-bg:   var(--c-amber-150);
  --pill-pending-fg:   var(--c-amber-800);
  --pill-running-bg:   var(--c-blue-90);
  --pill-running-fg:   var(--c-blue-600);
  --pill-succeeded-bg: var(--c-green-100);
  --pill-succeeded-fg: var(--c-green-800);
  --pill-failed-bg:    var(--c-red-70);
  --pill-failed-fg:    var(--c-red-700);
  --pill-cancelled-bg: var(--c-gray-250);
  --pill-cancelled-fg: var(--c-slate-550);

  /* Logs-state badge (neutral default) */
  --logstate-bg:     var(--c-gray-160);
  --logstate-fg:     var(--c-slate-560);

  /* Category badges */
  --cat-ingest-bg:      var(--c-blue-80);
  --cat-ingest-fg:      var(--c-blue-600);
  --cat-ingest-border:  var(--c-blue-100);
  --cat-prep-bg:        var(--c-amber-100);
  --cat-prep-fg:        var(--c-amber-700);
  --cat-prep-border:    var(--c-amber-200);
  --cat-compute-bg:     var(--c-green-100);
  --cat-compute-fg:     var(--c-green-700);
  --cat-compute-border: var(--c-green-200);
  --cat-custom-bg:      var(--c-indigo-200);
  --cat-custom-fg:      var(--c-indigo-700);
  --cat-custom-border:  var(--c-indigo-100);
  --cat-none-bg:        var(--c-slate-100);
  --cat-none-fg:        var(--c-slate-400);
  --cat-none-border:    var(--c-slate-150);

  /* Status dashboard badges */
  --badge-ok-bg:    var(--c-green-100);
  --badge-ok-fg:    var(--c-green-800);
  --badge-warn-bg:  var(--c-amber-100);
  --badge-warn-fg:  var(--c-amber-720);
  --badge-bad-bg:   var(--c-red-60);
  --badge-bad-fg:   var(--c-red-750);
  --badge-muted-bg: var(--c-slate-100);
  --badge-muted-fg: var(--c-slate-500);

  /* Sysinfo pills (load buckets) */
  --sys-ok-bg:     var(--c-green-100);
  --sys-ok-fg:     var(--c-green-800);
  --sys-ok-border: var(--c-green-200);
  --sys-warn-bg:     var(--c-amber-100);
  --sys-warn-fg:     var(--c-amber-720);
  --sys-warn-border: var(--c-amber-200);
  --sys-bad-bg:     var(--c-red-60);
  --sys-bad-fg:     var(--c-red-750);
  --sys-bad-border: var(--c-red-100);
  --sys-muted-bg:     var(--c-slate-100);
  --sys-muted-fg:     var(--c-slate-500);
  --sys-muted-border: var(--c-slate-150);

  /* Chip (Secrets page) */
  --chip-bg: var(--c-blue-60);
  --chip-fg: var(--c-indigo-800);

  /* URL-hint block (Preferences) */
  --urlhint-bg:     var(--c-slate-100);
  --urlhint-rule:   var(--c-indigo-500);
  --urlhint-fg:     var(--c-slate-700);
  --urlhint-code-bg: var(--c-white);

  /* uuid copy-cell */
  --uuid-fg:        var(--c-slate-570);
  --uuid-hover-bg:  var(--c-slate-150);
  --uuid-hover-fg:  var(--c-slate-900);

  /* Pill buttons (table row actions) */
  --pill-bg:           var(--c-white);
  --pill-fg:           var(--c-slate-600);
  --pill-border:       var(--c-slate-210);
  --pill-hover-bg:     var(--c-gray-200);
  --pill-hover-fg:     var(--c-text-900);
  --pill-hover-border: var(--c-slate-250);

  /* Shadows / overlays */
  --overlay-login:  var(--c-overlay-login);
  --overlay-modal:  var(--c-overlay-modal);
  --shadow-dropdown: var(--c-shadow-12);
  --shadow-modal:    var(--c-shadow-25);
  --shadow-login:    var(--c-shadow-40);
  --shadow-menu:     var(--c-shadow-50);

  /* shared list/table look, kept under historical --list-* names so consumers need no rename */
  --list-bg:        var(--surface-raised);
  --list-border:    var(--border-list);
  --list-head-bg:   var(--head-bg);
  --list-head-fg:   var(--head-fg);
  --list-divider:   var(--divider);
  --list-row-hover: var(--surface-hover);
  --list-row-alt:   var(--surface-alt);
  --list-row-selected: var(--accent-soft-bg);  /* desktop-style row selection */

  /* Radius scale — collapses the old 2→14px sprawl onto five steps + pill. */
  --r-xs:   4px;    /* badges, inputs, icon buttons, menu items */
  --r-sm:   6px;    /* cards, modals, list, login, segmented toggle */
  --r-md:   8px;    /* large blocks / big action buttons */
  --r-lg:   14px;   /* big bento tiles / gallery cards */
  --r-pill: 999px;  /* status pills, category badges, round chips */

  /* Spacing scale (4px base) — page padding + ad-hoc gaps consume these. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* Uniform page frame: same side gutters on every page, tighter top/bottom. */
  --page-pad-y: var(--space-4);
  --page-pad-x: var(--space-7);

  /* Shared page-header rhythm: one gap below every page title (no divider). */
  --page-head-gap: var(--space-4);

  /* One height + text size for every interactive header control (inputs,
     selects, pills, header icon buttons) so they line up across all pages. */
  --control-h: 30px;
  --control-fs: var(--fs-sm);

  /* shared list/table corner radius — kept under its historical name. */
  --list-radius: var(--r-sm);

  /* Font families — one sans for UI, one mono for code/ids/logs. */
  --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Font-size scale — collapses the 10→22px sprawl onto stepped sizes. */
  --fs-micro: 10px;  /* uppercase eyebrow labels, sort arrows */
  --fs-xs:    11px;  /* captions, badges, meta */
  --fs-sm:    12px;  /* secondary body, table cells, controls */
  --fs-base:  13px;  /* default body / list rows */
  --fs-md:    14px;  /* emphasised body, sub-headings */
  --fs-lg:    16px;  /* modal / card heading */
  --fs-xl:    18px;  /* canonical page title */
  --fs-3xl:   30px;  /* hero stat numerals */

  /* Font-weight scale — four steps; 550/620/650 round to semibold. */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     680;

  /* Line-height scale. */
  --lh-tight:   1.1;
  --lh-normal:  1.4;
  --lh-relaxed: 1.6;
}

html[data-theme="dark"] {
  color-scheme: dark;  /* native checkboxes, scrollbars, number spinners render dark */

  /* Dark navy ramp (same family as the sidebar, which stays inherited).
     Surfaces/borders lifted a notch and keyed to Radix dark-slate steps
     (app=1, panel=2, card=3, hover=4, border=6/7) so blocks separate cleanly. */
  --c-d-app:      #11161f;  /* app backdrop */
  --c-d-surface:  #181f2c;  /* primary panel */
  --c-d-raised:   #212c3c;  /* cards, inputs, rows — lifted for separation */
  --c-d-sunken:   #141b26;  /* recessed wash */
  --c-d-hover:    #283446;  /* row / dropdown hover */
  --c-d-head:     #1a222f;  /* table / list header */
  --c-d-border:   #3e4e6a;  /* default border — lifted so cards don't blend */
  --c-d-divider:  #323f56;  /* hairline */

  /* Fog text ramp (light-on-dark). Secondary/muted/faint brightened toward
     Radix dark-slate step-11 (#b0b4ba) so no tier muddies into the bg. */
  --c-d-text:      #e9eef7;  /* body */
  --c-d-strong:    #f4f8fd;  /* emphasised */
  --c-d-secondary: #cfdaeb;  /* secondary labels */
  --c-d-muted:     #b8c4d9;  /* muted captions */
  --c-d-faint:     #a3afc6;  /* faint */
  --c-d-link:      #93c5fd;  /* bright accent link, readable on dark */

  /* Surfaces / backgrounds */
  --surface:         var(--c-d-surface);
  --surface-raised:  var(--c-d-raised);
  --surface-sunken:  var(--c-d-sunken);
  --surface-muted:   var(--c-d-sunken);
  --surface-alt:     #1b2532;          /* zebra stripe */
  --surface-hover:   var(--c-d-hover);
  --surface-hover-cool: #1e293a;
  --icon-btn-hover:  rgba(255, 255, 255, 0.09); /* always lighter than the bg, so hover never reads as a dark hole */
  --bg-app:          var(--c-d-app);
  --bg-map:          var(--c-d-sunken);
  --panel-glass:        rgba(23, 31, 43, 0.80);
  --panel-glass-border: rgba(255, 255, 255, 0.10);
  /* Over-map plaques + sidebar stay navy/dark glass in the dark theme. */
  --map-glass-bg:       rgba(23, 31, 43, 0.82);
  --map-glass-fg:       rgba(255, 255, 255, 0.92);
  --map-glass-border:   rgba(255, 255, 255, 0.14);
  --sidebar-glass:      rgba(30, 36, 48, 0.80);
  --sidebar-fg:         var(--c-fog-200);
  --sidebar-fg-strong:  var(--c-fog-100);
  --sidebar-fg-dim:     var(--c-fog-300);
  --sidebar-divider:    var(--c-navy-750);
  --sidebar-hover:      var(--c-navy-700);
  --sidebar-hover-weak: rgba(255, 255, 255, 0.06);
  --sidebar-active-accent: var(--c-blue-300);
  --sidebar-control-border: var(--c-navy-760);
  --menu-bg:            var(--c-navy-720);
  --menu-hover:         var(--c-navy-750);

  /* Header / table chrome */
  --head-bg:         var(--c-d-head);
  --head-fg:         var(--c-d-secondary);
  --divider:         var(--c-d-divider);

  /* Borders */
  --border:          var(--c-d-border);
  --border-list:     var(--c-d-border);
  --border-input:    #3a4860;
  --border-input-cool: #3a4860;
  --border-input-plain: #44526c;

  /* Text */
  --text:            var(--c-d-text);
  --text-strong:     var(--c-d-strong);
  --text-secondary:  var(--c-d-secondary);
  --text-muted:      var(--c-d-muted);
  --text-muted-cool: var(--c-d-muted);
  --text-muted-2:    var(--c-d-secondary);
  --text-faint:      var(--c-d-faint);
  --text-caption:    var(--c-d-secondary);
  --text-mono:       var(--c-d-text);
  --text-mono-dark:  var(--c-d-strong);
  --text-link:       var(--c-d-link);

  /* Muted-row dimming */
  --text-dim:        var(--c-d-muted);

  /* Accent — brighter blue on dark for links/tabs; primary buttons take dark
     ink (--accent-fg) since white on #5b9bff fails contrast (~2.6:1). */
  --accent:          #5b9bff;
  --accent-hover:    #7db0ff;
  --accent-fg:       #0c1320;
  --accent-strong:   var(--c-d-link);
  --accent-soft-bg:  #1c2c44;          /* faint blue selection wash */
  --sort-active-bg:  #213352;

  /* Status text — lightened so it reads on dark (row-shared green, warn banner).
     NOT --danger: it backs the destructive modal button (needs a saturated red). */
  --success:     #6fd897;
  --warning:     #e8c468;
  --text-warn:   #e8c468;

  /* Row-action icons monochrome at rest (like play/edit) — colour only on hover. */
  --danger-icon:          var(--c-d-secondary);
  --success-icon:         var(--c-d-secondary);
  --danger-icon-hover-fg: #f2a3a0;
  --bg-warn-soft: #2e2718;
  --border-warn: #4a3c18;

  /* Run-state row tints — muted dark backgrounds */
  --state-pending-bg:   #2e2718;
  --state-running-bg:   #182640;
  --state-succeeded-bg: #16271d;
  --state-failed-bg:    #2e1c1c;
  --state-cancelled-bg: #232c38;

  /* State pills — darker bg, light-enough fg */
  --pill-pending-bg:   #3a2f12;
  --pill-pending-fg:   #f2cd6b;
  --pill-running-bg:   #1a3055;
  --pill-running-fg:   #8fc0ff;
  --pill-succeeded-bg: #16321f;
  --pill-succeeded-fg: #74e09a;
  --pill-failed-bg:    #3a1e1e;
  --pill-failed-fg:    #f2a3a0;
  --pill-cancelled-bg: #2a3340;
  --pill-cancelled-fg: #aab6ca;

  /* Logs-state badge (neutral) */
  --logstate-bg:     #232d3c;
  --logstate-fg:     var(--c-d-secondary);

  /* Category badges */
  --cat-ingest-bg:      #182842;
  --cat-ingest-fg:      #8fc0ff;
  --cat-ingest-border:  #294063;
  --cat-prep-bg:        #322910;
  --cat-prep-fg:        #e8c468;
  --cat-prep-border:    #4a3c18;
  --cat-compute-bg:     #16301e;
  --cat-compute-fg:     #6fd897;
  --cat-compute-border: #265438;
  --cat-custom-bg:      #241f3f;
  --cat-custom-fg:      #b3a7f5;
  --cat-custom-border:  #3a3066;
  --cat-none-bg:        #232c38;
  --cat-none-fg:        var(--c-d-muted);
  --cat-none-border:    var(--c-d-border);

  /* Status dashboard badges */
  --badge-ok-bg:    #16301e;
  --badge-ok-fg:    #6fd897;
  --badge-warn-bg:  #322910;
  --badge-warn-fg:  #e8c468;
  --badge-bad-bg:   #3a1e1e;
  --badge-bad-fg:   #f2a3a0;
  --badge-muted-bg: #232c38;
  --badge-muted-fg: var(--c-d-muted);

  /* Sysinfo pills */
  --sys-ok-bg:     #16301e;
  --sys-ok-fg:     #6fd897;
  --sys-ok-border: #265438;
  --sys-warn-bg:     #322910;
  --sys-warn-fg:     #e8c468;
  --sys-warn-border: #4a3c18;
  --sys-bad-bg:     #3a1e1e;
  --sys-bad-fg:     #f2a3a0;
  --sys-bad-border: #5a2b2b;
  --sys-muted-bg:     #232c38;
  --sys-muted-fg:     var(--c-d-muted);
  --sys-muted-border: var(--c-d-border);

  /* Chip (Secrets page) */
  --chip-bg: #1e2840;
  --chip-fg: #b3a7f5;

  /* URL-hint block (Preferences) */
  --urlhint-bg:     var(--c-d-sunken);
  --urlhint-rule:   #6366f1;
  --urlhint-fg:     var(--c-d-secondary);
  --urlhint-code-bg: var(--c-d-raised);

  /* uuid copy-cell */
  --uuid-fg:        var(--c-d-secondary);
  --uuid-hover-bg:  var(--c-d-hover);
  --uuid-hover-fg:  var(--c-d-strong);

  /* Pill buttons (table row actions) */
  --pill-bg:           var(--c-d-raised);
  --pill-fg:           var(--c-d-text);
  --pill-border:       var(--border-input);
  --pill-hover-bg:     var(--c-d-hover);
  --pill-hover-fg:     var(--c-d-strong);
  --pill-hover-border: var(--border-input-plain);
}

/* High contrast — opaque panels (kills the translucent glass; --surface follows the theme). */
html.high-contrast {
  --panel-glass:        var(--surface);
  --panel-glass-border: var(--border);
  --sidebar-glass:      #1e2430;  /* opaque navy rail */
  /* High contrast goes opaque: the over-map plaques follow the (theme-coloured) surface, so their
     text/border must follow the theme too — not the light-on-dark glass defaults above. */
  --map-glass-bg:       var(--panel-glass);
  --map-glass-fg:       var(--text);
  --map-glass-border:   var(--border);
}