diff --git a/ext/riverlea/core/civi_mail-ang/crmMailing.css b/ext/riverlea/core/civi_mail-ang/crmMailing.css
index 21ddc1fe6c86..673734236671 100644
--- a/ext/riverlea/core/civi_mail-ang/crmMailing.css
+++ b/ext/riverlea/core/civi_mail-ang/crmMailing.css
@@ -6,8 +6,7 @@
   height: 20em;
 }
 .crmMailing-recip-est {
-  background: var(--crm-checkbox-list-bg);
-  color: var(--crm-checkbox-list-col);
+  background: var(--crm-c-yellow-light);
   font-size: var(--crm-small-font-size);
   padding: var(--crm-padding-small);
   margin: 0 0 0 var(--crm-m);
diff --git a/ext/riverlea/core/css/_base.css b/ext/riverlea/core/css/_base.css
index 0082fb6b0aea..13dfd9a31fa5 100755
--- a/ext/riverlea/core/css/_base.css
+++ b/ext/riverlea/core/css/_base.css
@@ -46,6 +46,9 @@ body {
 .crm-container table.dataTable.display tbody tr:hover {
   background-color: transparent;
 }
+.crm-container td:empty {
+    padding: 0 !important; /* allows empty cells to collapse to 0 width */
+}
 /* Remove list styles (bullets/numbers) */
 .crm-container ol,
 .crm-container ul {
@@ -156,7 +159,7 @@ body {
   font-size: var(--crm-font-size);
   line-height: 1.4;
   color: var(--crm-c-text);
-  background: var(--crm-c-page-background);
+  background: var(--crm-c-page-bg);
 }
 .crm-container table,
 .crm-container tr,
@@ -288,7 +291,8 @@ dl dl {
 .crm-container tr.disabled,
 .crm-container tr:has(td.disabled),
 .crm-container .table-striped > tbody > tr:has(td.disabled) {
-  background-color: var(--crm-c-page-background);
+  --crm-striped-bg: var(--crm-c-page-bg) /* for striped rows */;
+  background-color: var(--crm-striped-bg) !important /* vs jquery */;
 }
 .crm-container tr.disabled td *:not(.btn,button,i,a),
 .crm-container td.disabled,
@@ -365,8 +369,8 @@ dl dl {
 }
 .crm-container code {
   display: inline;
-  background-color: var(--crm-c-code-background);
-  border: 1px solid var(--crm-c-background4);
+  background-color: var(--crm-c-code-bg);
+  border: var(--crm-c-code-border);
   color: var(--crm-c-text);
   border-radius: 2px;
   padding: 2px;
@@ -380,8 +384,8 @@ dl dl {
   font-size: var(--crm-font-size) !important /* vs inline css on api3 */;
   line-height: 1.4  !important /* vs inline css on api3 */;
   color: var(--crm-c-text);
-  background-color: var(--crm-c-code-background);
-  border: 1px solid var(--crm-c-background4);
+  background-color: var(--crm-c-code-bg);
+  border: var(--crm-c-code-border);
   border-radius: var(--crm-roundness);
 }
 .crm-container pre code {
diff --git a/ext/riverlea/core/css/_bootstrap.css b/ext/riverlea/core/css/_bootstrap.css
index 5870a437e6bd..8c3c56161d82 100644
--- a/ext/riverlea/core/css/_bootstrap.css
+++ b/ext/riverlea/core/css/_bootstrap.css
@@ -1290,7 +1290,7 @@
 #bootstrap-theme .form-control[disabled],
 #bootstrap-theme .form-control[readonly],
 fieldset[disabled] #bootstrap-theme .form-control {
-  background-color: var(--crm-c-background2);
+  background-color: var(--crm-c-layer1-bg);
   opacity: 1;
 }
 #bootstrap-theme .form-control[disabled],
@@ -1782,7 +1782,7 @@ fieldset[disabled] #bootstrap-theme .btn-link {
 #bootstrap-theme .btn-link[disabled]:focus,
 fieldset[disabled] #bootstrap-theme .btn-link:hover,
 fieldset[disabled] #bootstrap-theme .btn-link:focus {
-  color: var(--crm-c-gray-800);
+  color: var(--crm-c-inactive);
   text-decoration: none;
 }
 #bootstrap-theme .input-group-addon {
@@ -1792,7 +1792,7 @@ fieldset[disabled] #bootstrap-theme .btn-link:focus {
   line-height: inherit;
   color: var(--crm-input-color);
   text-align: left;
-  background-color: var(--crm-input-background);
+  background-color: var(--crm-input-bg);
   /* width: 100%; */
   border-radius: var(--crm-roundness);
 }
@@ -2539,7 +2539,7 @@ fieldset[disabled] #bootstrap-theme .navbar-inverse .btn-link:focus {
   padding-bottom: 30px;
   margin-bottom: 30px;
   color: inherit;
-  background-color: var(--crm-c-background);
+  background-color: var(--crm-c-container-bg);
 }
 #bootstrap-theme .jumbotron h1,
 #bootstrap-theme .jumbotron .h1 {
@@ -2782,7 +2782,7 @@ fieldset[disabled] #bootstrap-theme .navbar-inverse .btn-link:focus {
 #bootstrap-theme button.list-group-item:focus {
   color: #555;
   text-decoration: none;
-  background-color: var(--crm-c-background);
+  background-color: var(--crm-c-container-bg);
 }
 #bootstrap-theme button.list-group-item {
   width: 100%;
@@ -2945,7 +2945,7 @@ fieldset[disabled] #bootstrap-theme .navbar-inverse .btn-link:focus {
   min-height: 20px;
   padding: 19px;
   margin-bottom: 20px;
-  background-color: var(--crm-c-background);
+  background-color: var(--crm-c-container-bg);
   border: var(--crm-c-divider);
   border-radius: var(--crm-c-roundness);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
@@ -3395,17 +3395,16 @@ fieldset[disabled] #bootstrap-theme .navbar-inverse .btn-link:focus {
 }
 #bootstrap-theme a.label:hover,
 #bootstrap-theme a.label:focus {
-  color: var(--crm-c-text-light);
   text-decoration: none;
   cursor: var(--crm-hover-clickable);
 }
 #bootstrap-theme .label-default {
-  background-color: var(--crm-c-text);
+  background: var(--crm-c-darkest);
   color: var(--crm-c-text-light);
 }
 #bootstrap-theme .label-default[href]:hover,
 #bootstrap-theme .label-default[href]:focus {
-  background-color: var(--crm-c-background4);
+  background: color-mix(in srgb, var(--crm-c-darkest) 87.5%, #fff 12.5%);
 }
 #bootstrap-theme .label-primary {
   background: var(--crm-c-primary);
@@ -3421,7 +3420,7 @@ fieldset[disabled] #bootstrap-theme .navbar-inverse .btn-link:focus {
 }
 #bootstrap-theme .label-success[href]:hover,
 #bootstrap-theme .label-success[href]:focus {
-  background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-c-success);
+  background: color-mix(in srgb, var(--crm-c-success) 87.5%, #000 12.5%);
 }
 #bootstrap-theme .label-info {
   background: var(--crm-c-info);
@@ -3429,7 +3428,7 @@ fieldset[disabled] #bootstrap-theme .navbar-inverse .btn-link:focus {
 }
 #bootstrap-theme .label-info[href]:hover,
 #bootstrap-theme .label-info[href]:focus {
-  background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-c-info);
+  background: color-mix(in srgb, var(--crm-c-info) 87.5%, #000 12.5%);
 }
 #bootstrap-theme .label-warning {
   background: var(--crm-c-warning);
@@ -3437,7 +3436,7 @@ fieldset[disabled] #bootstrap-theme .navbar-inverse .btn-link:focus {
 }
 #bootstrap-theme .label-warning[href]:hover,
 #bootstrap-theme .label-warning[href]:focus {
-  background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-c-warning);
+  background: color-mix(in srgb, var(--crm-c-warning) 87.5%, #000 12.5%);
 }
 #bootstrap-theme .label-danger {
   background: var(--crm-c-danger);
@@ -3445,10 +3444,10 @@ fieldset[disabled] #bootstrap-theme .navbar-inverse .btn-link:focus {
 }
 #bootstrap-theme .label-danger[href]:hover,
 #bootstrap-theme .label-danger[href]:focus {
-  background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-c-danger);
+  background: color-mix(in srgb, var(--crm-c-danger) 87.5%, #000 12.5%);
 }
 #bootstrap-theme .label i.crm-i {
-  color: inherit; /* resets icons inside lables to use the label text colour */
+  color: inherit; /* resets icons inside labels to use the label text colour */
 }
 
 /* Panels */
diff --git a/ext/riverlea/core/css/_cms.css b/ext/riverlea/core/css/_cms.css
index 6aa3919e47cf..75a20abfd17a 100755
--- a/ext/riverlea/core/css/_cms.css
+++ b/ext/riverlea/core/css/_cms.css
@@ -7,7 +7,7 @@
 /* Backdrop - html.admin-bar */
 
 html.admin-bar body {
-  background-color: var(--crm-c-page-background);
+  background-color: var(--crm-c-page-bg);
 }
 html.admin-bar .crm-container {
   --crm-page-padding: 0;
@@ -38,13 +38,13 @@ body.page-civicrm .crm-container div.status {
 /* D8+ */
 body.page-civicrm header.content-header {
   margin-bottom: 0;
-  background-color: var(--crm-c-background);
+  background-color: var(--crm-c-container-bg);
 }
 body.page-civicrm main.page-content {
   margin-top: 0;
 }
 body.page-civicrm header + div.layout-container {
-  background-color: var(--crm-c-page-background) !important;
+  background-color: var(--crm-c-page-bg) !important;
   margin: 0 !important; /* use of important vs some themes */
 }
 body.page-civicrm .button {
@@ -59,7 +59,7 @@ body.page-civicrm #squeeze #crm-container,
 .region-sidebar-first .block-civicrm {
   padding: 0;
   --crm-page-padding: 0;
-  --crm-c-page-background: transparent;
+  --crm-c-page-bg: transparent;
   --crm-input-label-width: 12em;
 }
 body.page-civicrm #squeeze .crm-container ul li:not(.ui-tab) {
@@ -69,7 +69,7 @@ body.page-civicrm #squeeze .crm-container ul li:not(.ui-tab) {
 
 /* D7 Seven */
 body.page-civicrm > #branding {
-  background-color: var(--crm-c-page-background);
+  background-color: var(--crm-c-page-bg);
 }
 body.page-civicrm > #branding + #page {
   --crm-page-padding: 0.5rem 1.25rem;
@@ -130,7 +130,7 @@ body.page-civicrm .page-content:has(#block-claro-content) {
 /* Bootstrap 4 */
 body.page-civicrm main > .container:has(#block-bootstrap4-content) {
   max-width: 100%;
-  background: var(--crm-c-page-background);
+  background: var(--crm-c-page-bg);
 }
 
 /******************
@@ -138,7 +138,7 @@ body.page-civicrm main > .container:has(#block-bootstrap4-content) {
 *******************/
 
 body.toplevel_page_CiviCRM.wp-admin {
-  background: var(--crm-c-page-background);
+  background: var(--crm-c-page-bg);
 }
 body.toplevel_page_CiviCRM #wpcontent {
   padding-left: 0; /* resets WP padding */
@@ -208,8 +208,8 @@ html.crm-standalone body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",sans-serif; /* Adds fallback for base font */
 }
 html.crm-standalone #crm-container:has(.standalone-auth-form) {
-  background: var(--crm-c-background);
+  background: var(--crm-c-container-bg);
 }
 html.crm-standalone .standalone-auth-box {
-  background: var(--crm-c-page-background);
+  background: var(--crm-c-page-bg);
 }
diff --git a/ext/riverlea/core/css/_fixes.css b/ext/riverlea/core/css/_fixes.css
index e59172854468..5de4385b2721 100755
--- a/ext/riverlea/core/css/_fixes.css
+++ b/ext/riverlea/core/css/_fixes.css
@@ -426,7 +426,7 @@ body[class*="page-civicrm-report-"] #report-tab-order-by-elements #optionFieldLi
 .crm-container .tag-tree-wrapper div.tag-info {
   width: auto;
   position: relative;
-  background: var(--crm-c-background);
+  background: var(--crm-c-container-bg);
   border: 0 solid transparent;
   box-shadow: var(--crm-block-shadow);
   padding: var(--crm-padding-reg);
@@ -625,7 +625,7 @@ tr.crm-preferences-display-form-block-contact_edit_options td table {
 /* Custom searches */
 .crm-container > #crm-main-content-wrapper > fieldset {
   display: grid;
-  background: var(--crm-c-background);
+  background: var(--crm-c-container-bg);
   border: 0 solid transparent;
   box-shadow: var(--crm-block-shadow);
   padding: var(--crm-padding-reg);
@@ -844,7 +844,7 @@ details + .crm-content-block:has(.dataTables_wrapper) {
   gap: var(--crm-flex-gap);
 }
 .crm-mosaico-wizard .crm-mosaico-template-item.thumbnail {
-  background: var(--crm-c-background2) !important /* vs _template-item.scss */;
+  background: var(--crm-c-layer1-bg) !important /* vs _template-item.scss */;
   border: var(--crm-c-divider) !important /* vs _template-item.scss */;
   border-radius: var(--crm-roundness) !important /* vs _template-item.scss */;
 }
diff --git a/ext/riverlea/core/css/_variables.css b/ext/riverlea/core/css/_variables.css
index e3c361dd75ce..421d8cfb0517 100644
--- a/ext/riverlea/core/css/_variables.css
+++ b/ext/riverlea/core/css/_variables.css
@@ -10,7 +10,6 @@
   --crm-system-fonts: unset;
   --crm-font: unset;
 /* Colour names */
-  --crm-c-darkest: #0a0a0a;
   --crm-c-gray-900: #2f2f2e;
   --crm-c-gray-800: #3e3e3e;
   --crm-c-gray-700: #696969;
@@ -42,48 +41,51 @@
   --crm-c-teal: #63c4b9;
   --crm-c-dark-teal: #3e8079;
 /* Practical colours */
+  --crm-c-darkest: #0a0a0a;
   --crm-c-text-light: #fff;
   --crm-c-text-dark: #464354;
   --crm-c-text: var(--crm-c-text-dark);
   --crm-c-link: var(--crm-c-blue-dark);
   --crm-c-link-hover: var(--crm-c-blue-darker);
-  --crm-c-divider: 1px solid var(--crm-c-gray-300);
-  --crm-c-page-background: #fff; /* background to page body */
-  --crm-c-background: #f4f4ed; /* background to page header, often form block & dialog bg */
-  --crm-c-background2: var(--crm-c-gray-050); /* 2-5 = progressively darker backgrounds */
-  --crm-c-background3: var(--crm-c-gray-100);
-  --crm-c-background4: var(--crm-c-gray-200);
-  --crm-c-background5: var(--crm-c-gray-700);
-  --crm-c-drag-background: var(--crm-c-background3); /* background for drag/drop regions, select2 highlight */
-  --crm-c-code-background: var(--crm-c-background2); /* background for code regions */
   --crm-c-focus: var(--crm-c-blue-dark);
-  --crm-c-inactive: #696969;
+  --crm-c-inactive: color-mix(in srgb,var(--crm-c-text) 95%,#fff 5%);
+  --crm-c-divider: 1px solid var(--crm-c-gray-300);
+/* Backgrounds */
+  --crm-c-layer0-bg: #fff; /* The lightest bg in light mode */
+  --crm-c-page-bg: var(--crm-c-layer0-bg);
+  --crm-c-container-bg: #f4f4ed;
+  --crm-c-layer1-bg: var(--crm-c-gray-050);
+  --crm-c-layer2-bg: color-mix(in srgb,var(--crm-c-layer1-bg) 95%,#000 5%);
+  --crm-c-inverse-bg: var(--crm-c-gray-700); /* bg to light text */
+  --crm-c-drag-bg: var(--crm-c-layer2-bg);
+  --crm-c-code-bg: var(--crm-c-layer1-bg);
+  --crm-c-code-border: color-mix(in srgb,var(--crm-c-code-bg) 75%,#000 25%);
 /* Emphasis colours */
-  --crm-c-primary: var(--crm-c-gray-700);
-  --crm-c-primary-hover: hsl(from var(--crm-c-primary) h s calc(l - 10));
+  --crm-c-primary: var(--crm-c-inverse-bg);
+  --crm-c-primary-hover: color-mix(in srgb,var(--crm-c-primary) 75%,#000 25%);
   --crm-c-primary-text: var(--crm-c-text-light);
   --crm-c-primary-hover-text: var(--crm-c-text-light);
   --crm-c-primary-on-page-bg: var(--crm-c-primary-hover);
   --crm-c-secondary: #5d677b;
-  --crm-c-secondary-hover: hsl(from var(--crm-c-secondary) h s calc(l - 10));
+  --crm-c-secondary-hover: color-mix(in srgb,var(--crm-c-secondary) 75%,#000 25%);
   --crm-c-secondary-text: var(--crm-c-text-light);
   --crm-c-secondary-hover-text: var(--crm-c-text-light);
   --crm-c-secondary-on-page-bg: var(--crm-c-secondary-hover);
   --crm-c-success: var(--crm-c-green-dark); /* Main colour for emphasis */
-  --crm-c-success-text: var(--crm-c-text-light); /* Text colour on top of that, usually text-light or text-dark */
-  --crm-c-success-light: var(--crm-c-green-light); /* Light version of emphasis col, for alert bgs, and emphasis on dark bgs */
-  --crm-c-success-on-page-bg: var(--crm-c-success); /* Text colour on top of light, usually text-light or text-dark but could be a tint */
+  --crm-c-success-text: var(--crm-c-text-light); /* Text colour on top */
+  --crm-c-success-light: hsl(from var(--crm-c-success) h s calc(l + 65));
+  --crm-c-success-on-page-bg: var(--crm-c-success);
   --crm-c-warning: var(--crm-c-amber);
   --crm-c-warning-text: var(--crm-c-text-light);
-  --crm-c-warning-light: var(--crm-c-yellow-light);
-  --crm-c-warning-on-page-bg: #a94303;
+  --crm-c-warning-light: hsl(from var(--crm-c-warning) h s calc(l + 65));
+  --crm-c-warning-on-page-bg: var(--crm-c-warning);
   --crm-c-danger: var(--crm-c-red-dark);
   --crm-c-danger-text: var(--crm-c-text-light);
-  --crm-c-danger-light: var(--crm-c-red-light);
-  --crm-c-danger-on-page-bg: #5d0d20;
+  --crm-c-danger-light: hsl(from var(--crm-c-danger) h s calc(l + 60));
+  --crm-c-danger-on-page-bg: var(--crm-c-danger);
   --crm-c-info: var(--crm-c-blue-dark);
   --crm-c-info-text: var(--crm-c-text-light);
-  --crm-c-info-light: var(--crm-c-blue-light);
+  --crm-c-info-light: hsl(from var(--crm-c-info) h s calc(l + 67));
   --crm-c-info-on-page-bg: var(--crm-c-info);
 /* Shadows */
   --crm-block-shadow: unset;
@@ -162,21 +164,21 @@
   --crm-btn-icon-padding: var(--crm-btn-padding-block);
   --crm-btn-margin: 0; /* used to add padding block between multiple stacked buttons */
 /* Tables */
-  --crm-table-outside-border: 1px solid var(--crm-c-background3);
-  --crm-table-background: var(--crm-c-page-background);
+  --crm-table-outside-border: var(--crm-c-divider);
+  --crm-table-bg: var(--crm-c-layer0-bg);
   --crm-table-row-border: var(--crm-c-divider);
   --crm-table-column-border: 0 solid transparent;
   --crm-table-font-size: var(--crm-font-size);
   --crm-table-padding: var(--crm-m);
   --crm-table-header-border: 1px solid transparent;
   --crm-table-header-bottom: 2px solid var(--crm-c-gray-300);
-  --crm-table-header-bg: var(--crm-c-page-background);
+  --crm-table-header-bg: var(--crm-c-layer0-bg);
   --crm-table-header-col: var(--crm-c-text);
   --crm-table-header-txt: inherit;
-  --crm-table-even-row: var(--crm-c-background2);
-  --crm-table-even-hover: var(--crm-c-yellow-less-light);
-  --crm-table-odd-row: var(--crm-c-gray-025);
-  --crm-table-odd-hover: var(--crm-c-yellow-light);
+  --crm-table-row-bg: var(--crm-table-bg); /* don't make transparent */
+  --crm-table-row-alternate-bg: #000; /* color for alternate row mixer */
+  --crm-table-row-alternate-mix: 7%; /* 0% for no row col, 100% for all of it */
+  --crm-table-row-hover: var(--crm-c-yellow-light);
   --crm-table-sort-col: var(--crm-c-gray-300);
   --crm-table-sort-float: left; /* 'left', 'right' or 'none' */
   --crm-table-sort-active-col: var(--crm-c-link);
@@ -184,10 +186,10 @@
   --crm-table-nested-padding: var(--crm-r) var(--crm-m);
   --crm-table-nested-head-border: 0 solid transparent;
   --crm-table-nested-border: var(--crm-c-divider);
-  --crm-table-inset-bg: var(--crm-c-background3);
+  --crm-table-inset-bg: var(--crm-c-layer2-bg);
 /* Panels */
   --crm-panel-shadow: var(--crm-block-shadow);
-  --crm-panel-background: var(--crm-c-page-background);
+  --crm-panel-bg: var(--crm-c-layer0-bg);
   --crm-panel-border: var(--crm-c-divider);
   --crm-panel-head-margin: 0px;
   --crm-panel-head-height: 37px;
@@ -214,7 +216,7 @@
   --crm-expand-body-padding: var(--crm-padding-reg);
 /* .crm-accordion-light */
   --crm-expand2-header-bg: unset;
-  --crm-expand2-header-bg-active: var(--crm-c-background-2);
+  --crm-expand2-header-bg-active: unset;
   --crm-expand2-header-weight: normal;
   --crm-expand2-header-color: var(--crm-c-text);
   --crm-expand2-header-border: unset;
@@ -229,24 +231,25 @@
   --crm-alert-margin: 0 0 var(--crm-m);
   --crm-alert-border-width: 1px;
   --crm-alert-success-bg: var(--crm-c-success-light);
-  --crm-alert-success-border: hsl(from var(--crm-alert-success-bg) h s calc(l - 10));
+  --crm-alert-success-border: color-mix(in srgb, var(--crm-alert-success-bg) 90%,#000 10%);
   --crm-alert-success-text: var(--crm-c-success);
   --crm-alert-warning-bg: var(--crm-c-warning-light);
-  --crm-alert-warning-border: hsl(from var(--crm-alert-warning-bg) h s calc(l - 10));
+  --crm-alert-warning-border: color-mix(in srgb, var(--crm-alert-warning-bg) 90%,#000 10%);
   --crm-alert-warning-text: var(--crm-c-text);
   --crm-alert-info-bg: var(--crm-c-info-light);
-  --crm-alert-info-border: hsl(from var(--crm-alert-info-bg) h s calc(l - 10));
+  --crm-alert-info-border: color-mix(in srgb, var(--crm-alert-info-bg) 90%,#000 10%);
   --crm-alert-info-text: var(--crm-c-info);
   --crm-alert-danger-bg: var(--crm-c-danger-light);
-  --crm-alert-danger-border: hsl(from var(--crm-alert-danger-bg) h s calc(l - 5));
+  --crm-alert-danger-border: color-mix(in srgb, var(--crm-alert-danger-bg) 90%,#000 10%);
   --crm-alert-danger-text: var(--crm-c-danger);
 /* Form */
   --crm-form-block-box-shadow: var(--crm-block-shadow);
-  --crm-form-block-background: var(--crm-c-background);
+  --crm-form-block-bg: var(--crm-c-container-bg);
   --crm-form-block-padding: var(--crm-m);
   --crm-form-block-border-radius: var(--crm-roundness);
-  --crm-input-background: var(--crm-c-page-background);
-  --crm-input-background-image: linear-gradient(top, #eee 1%, #fff 15%);
+  --crm-form-block-header: var(--crm-c-inverse-bg);
+  --crm-input-bg: var(--crm-c-layer0-bg);
+  --crm-input-bg-image: linear-gradient(top, #eee 1%, #fff 15%);
   --crm-input-color: var(--crm-c-text);
   --crm-input-border-color: var(--crm-c-gray-400);
   --crm-input-border-radius: 3px;
@@ -262,27 +265,25 @@
   --crm-input-label-width: var(--crm-big-input);
   --crm-input-label-align: right;
   --crm-input-label-color: var(--crm-c-text);
-  --crm-input-description: var(--crm-c-gray-700);
+  --crm-input-description: var(--crm-c-inactive);
   --crm-input-dropdown-icon: "\f107";
   --crm-input-radio-color: var(--crm-c-focus);
-  --crm-form-select-bg: var(--crm-c-background2);
+  --crm-form-select-bg: var(--crm-c-layer1-bg);
   --crm-inline-edit-border: 0 solid transparent;
-  --crm-inline-edit-bg: var(--crm-c-background);
+  --crm-inline-edit-bg: var(--crm-c-container-bg);
   --crm-fieldset-border-color: var(--crm-c-gray-400);
   --crm-fieldset-border: 1px 0 0 0;
   --crm-fieldset-padding: var(--crm-padding-reg) var(--crm-padding-small);
-  --crm-checkbox-list-col: var(--crm-c-text-dark);
-  --crm-checkbox-list-bg: var(--crm-c-yellow-light);
-  --crm-checkbox-list-bg2: var(--crm-c-yellow-less-light);
+  --crm-checkbox-list-bg: var(--crm-table-row-hover);
 /* Tabs */
-  --crm-tabs-bg: var(--crm-c-background4);
+  --crm-tabs-bg: var(--crm-c-gray-200);
   --crm-tabs-padding: var(--crm-s);
   --crm-tabs-border: var(--crm-dash-border);
   --crm-tabs-radius: var(--crm-roundness);
   --crm-tabs-gap: var(--crm-s);
-  --crm-tab-bg: var(--crm-c-background2);
-  --crm-tab-bg-hover: var(--crm-c-background);
-  --crm-tab-bg-active: var(--crm-c-page-background);
+  --crm-tab-bg: var(--crm-c-layer1-bg);
+  --crm-tab-bg-hover: color-mix(in srgb,var(--crm-c-layer1-bg) 75%,#000 25%);
+  --crm-tab-bg-active: var(--crm-c-container-bg);
   --crm-tab-hang: 0; /* lip to extend tab flush with active region - set to 0 for no lip */
   --crm-tab-padding: var(--crm-s3) var(--crm-m) var(--crm-s) var(--crm-m);
   --crm-tab-col: var(--crm-c-text);
@@ -317,7 +318,7 @@
   --crm-dash-tab-hang: 0; /* lip to extend tab flush with active region - set to 0 for no lip */
   --crm-dash-tab-radius: var(--crm-dash-roundness);
   --crm-dash-icon-size: var(--crm-r);
-  --crm-dash-summary-row-bg: var(--crm-c-background);
+  --crm-dash-summary-row-bg: var(--crm-c-container-bg);
   --crm-dash-heading-inset: 0;
   --crm-dash-box-shadow: 0;
   --crm-dash-panel-padding: var(--crm-m);
@@ -328,8 +329,8 @@
   --crm-dash-block-padding: 0;
   --crm-dash-block-bg: unset;
   --crm-dash-block-radius: var(--crm-roundness);
-  --crm-dash-label-bg: var(--crm-c-background2);
-  --crm-dash-header-bg: var(--crm-c-page-background);
+  --crm-dash-label-bg: var(--crm-c-layer1-bg);
+  --crm-dash-header-bg: var(--crm-c-layer0-bg);
   --crm-dash-header-bg2: transparent;
   --crm-dash-header-col: var(--crm-c-text);
   --crm-dash-header-size: var(--crm-r3);
@@ -340,7 +341,7 @@
   --crm-dash-image-top: unset; /* distance from top of dashboard */
   --crm-dash-image-border: 0;
 /* Dialog */
-  --crm-dialog-bg: var(--crm-c-page-background);
+  --crm-dialog-bg: var(--crm-c-layer0-bg);
   --crm-dialog-padding: var(--crm-s);
   --crm-dialog-radius: var(--crm-roundness);
   --crm-dialog-line: unset;
@@ -351,15 +352,15 @@
   --crm-dialog-header-padding: var(--crm-m1) var(--crm-r);
   --crm-dialog-header-radius: var(--crm-dialog-radius);
   --crm-dialog-header-border-col: transparent transparent var(--crm-c-gray-300) transparent; /* set a border color for each side of the header */
-  --crm-dialog-body-bg: var(--crm-c-background);
+  --crm-dialog-body-bg: var(--crm-c-container-bg);
   --crm-dialog-body-padding: var(--crm-m);
 /* Dashlet */
   --crm-dashlet-columns: 2fr 3fr;
   --crm-dashlet-border: unset;
-  --crm-dashlet-bg: var(--crm-c-page-background);
+  --crm-dashlet-bg: var(--crm-c-layer0-bg);
   --crm-dashlet-padding: var(--crm-s2);
   --crm-dashlet-box-shadow: var(--crm-popup-shadow);
-  --crm-dashlet-dashlets-bg: var(--crm-c-background);
+  --crm-dashlet-dashlets-bg: var(--crm-c-container-bg);
   --crm-dashlet-header-bg: var(--crm-expand-header-bg);
   --crm-dashlet-header-col: var(--crm-expand-header-color);
   --crm-dashlet-header-border: unset;
@@ -375,7 +376,7 @@
   --crm-dropdown-bg: var(--crm-c-secondary-hover);
   --crm-dropdown-col: var(--crm-c-text-light);
   --crm-dropdown-hover: var(--crm-c-text);
-  --crm-dropdown-hover-bg: var(--crm-c-page-background);
+  --crm-dropdown-hover-bg: var(--crm-c-layer0-bg);
   --crm-dropdown-border: 0;
   --crm-dropdown-width: 180px;
   --crm-dropdown-danger-bg: var(--crm-c-danger); /* for delete links in dropdowns */
@@ -383,7 +384,7 @@
   --crm-dropdown-2-col: var(--crm-c-text);
   --crm-dropdown-2-padding: var(--crm-padding-small);
 /* Notifications */
-  --crm-notify-background: rgba(0,0,0,0.85);
+  --crm-notify-bg: rgba(0,0,0,0.85);
   --crm-notify-padding: var(--crm-m2);
   --crm-notify-col: var(--crm-c-text-light);
   --crm-notify-accent-border: 2px 0 0 0; /* adds a border to one/several sides of the notification - set to 0 for none */
@@ -404,6 +405,8 @@
   --crm-icon-success-color: inherit;
   --crm-icon-warning-color: inherit;
   --crm-icon-info-color: inherit;
+/* Form Builder UI */
+  --crm-fb-header-bg: var(--crm-c-layer2-bg);
 /* Wizard */
   --crm-wizard-width: fit-content;
   --crm-wizard-margin: 0.5rem auto;
@@ -414,18 +417,18 @@
   --crm-wizard-active-col: var(--crm-c-text-light);
   --crm-wizard-active-bg: var(--crm-c-link);
   --crm-wizard-border: var(--crm-c-divider);
-  --crm-wizard-bg: var(--crm-c-page-background);
+  --crm-wizard-bg: var(--crm-c-layer0-bg);
   --crm-wizard-box-shadow: unset;
 /* Alpha filter */
   --crm-filter-bg: var(--crm-c-info-light);
   --crm-filter-padding: var(--crm-m);
-  --crm-filter-item-bg: var( --crm-c-background2);
+  --crm-filter-item-bg: var( --crm-c-layer1-bg);
   --crm-filter-item-shadow: 0px 0px 3px rgba(0,0,0,0.1);
   --crm-filter-spacing: space-between; /* choose 'space-between' to spread out evenly, 'start' for left align, or 'end' for right. */
 /* Frontend */
   --crm-f-form-width: 800px;
   --crm-f-box-shadow: var(--crm-block-shadow);
-  --crm-f-fieldset-bg: var(--crm-c-page-background);
+  --crm-f-fieldset-bg: var(--crm-c-page-bg);
   --crm-f-fieldset-padding: var(--crm-r) 0;
   --crm-f-fieldset-margin: 0 0 var(--crm-padding-reg) 0;
   --crm-f-fieldset-border: 0;
@@ -448,7 +451,7 @@
   --crm-f-input-font-size: var(--crm-r1);
   --crm-f-input-width: 300px;
   --crm-f-form-focus-bg: var(--crm-c-green-light);
-  --crm-f-form-error-bg: var(--crm-c-light);
+  --crm-f-form-error-bg: var(--crm-c-gray-200);
   --crm-f-logo-height: 40px;
   --crm-f-logo-align: center; /* left, right or center */
 }
diff --git a/ext/riverlea/core/css/admin.css b/ext/riverlea/core/css/admin.css
index 925ae823c849..7736dbd20494 100644
--- a/ext/riverlea/core/css/admin.css
+++ b/ext/riverlea/core/css/admin.css
@@ -85,6 +85,38 @@
 .crm-container .crm-extensions-stage.fa-trophy {
   color: var(--crm-notify-success);
 }
+.crm-container .extension-installed {
+  background: var(--crm-alert-success-bg);
+  color: var(--crm-alert-success-text);
+}
+.crm-container .extension-installed summary {
+  color: var(--crm-alert-success-text);
+}
+.crm-container table.dataTable.display tbody {
+  --crm-striped-bg: var(--crm-table-row-bg);
+}
+.crm-container table.dataTable.display tbody tr:not(.disabled) {
+  background-color: var(--crm-striped-bg) !important;
+}
+.crm-container table.dataTable.display tbody tr.even:not(.disabled) {
+  --crm-striped-bg: color-mix(in srgb, var(--crm-table-row-bg) 100%, var(--crm-table-row-alternate-bg) var(--crm-table-row-alternate-mix));
+}
+.crm-container table.dataTable.display tbody tr.extension-installed {
+  --crm-striped-bg: var(--crm-alert-success-bg);
+}
+.crm-container table.dataTable.display tbody tr.extension-installed.even {
+  --crm-striped-bg: color-mix(in srgb, var(--crm-alert-success-bg) 100%, var(--crm-table-row-alternate-bg) var(--crm-table-row-alternate-mix));
+}
+.crm-container table.dataTable.display tbody tr:hover {
+  --crm-striped-bg: var(--crm-table-row-hover);
+}
+.crm-container table.dataTable.display tbody tr.even:hover {
+  --crm-striped-bg: color-mix(in srgb, var(--crm-table-row-hover) 100%, var(--crm-table-row-alternate-bg) var(--crm-table-row-alternate-mix));
+}
+.crm-container table.dataTable.display tbody tr > .sorting_1,
+.crm-container table.dataTable.order-column.stripe tbody tr > .sorting_1 {
+  background-color: color-mix(in srgb, var(--crm-striped-bg) 100%, var(--crm-table-row-alternate-bg)  6%) !important;
+}
 
 /* Navigation Menu Editor */
 .crm-container .navigation-tree .jstree-hovered {
diff --git a/ext/riverlea/core/css/api4-explorer.css b/ext/riverlea/core/css/api4-explorer.css
index 09c15d669d61..d1fa785e4189 100644
--- a/ext/riverlea/core/css/api4-explorer.css
+++ b/ext/riverlea/core/css/api4-explorer.css
@@ -13,7 +13,7 @@
 }
 .api4-explorer-row > .panel {
   margin: 0;
-  background: var(--crm-panel-background);
+  background: var(--crm-panel-bg);
 }
 .api4-explorer-page .panel-heading {
   display: flex;
diff --git a/ext/riverlea/core/css/components/_buttons.css b/ext/riverlea/core/css/components/_buttons.css
index ffdaa423a52e..64b0d06435d6 100644
--- a/ext/riverlea/core/css/components/_buttons.css
+++ b/ext/riverlea/core/css/components/_buttons.css
@@ -101,7 +101,7 @@
 .crm-container a.button.delete-button:hover,
 .crm-container a.button.delete-button:focus,
 .crm-container a.button.delete:hover {
-  background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-btn-cancel-bg);
+  background: color-mix(in srgb, var(--crm-btn-cancel-bg) 87.5%, #000 12.5%);
 }
 .crm-container .crm-button-type-cancel:hover,
 .crm-container .crm-button-type-cancel:focus,
@@ -121,7 +121,6 @@
 }
 #bootstrap-theme .btn.btn-secondary:hover,
 #bootstrap-theme .btn.btn-secondary:focus {
-  background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-c-secondary); /* darkening fallback if hover state not set */
   background: var(--crm-c-secondary-hover);
   color: var(--crm-c-secondary-text);
 }
@@ -131,7 +130,7 @@
 }
 #bootstrap-theme .btn.btn-info:hover,
 #bootstrap-theme .btn.btn-info:focus {
-  background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-btn-info-bg);
+  background: color-mix(in srgb, var(--crm-btn-info-bg) 87.5%, #000 12.5%);
   color: var(--crm-btn-info-text);
 }
 #bootstrap-theme .btn-warning {
@@ -140,7 +139,7 @@
 }
 #bootstrap-theme .btn.btn-warning:hover,
 #bootstrap-theme .btn.btn-warning:focus {
-  background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-btn-warning-bg);
+  background: color-mix(in srgb, var(--crm-btn-warning-bg) 87.5%, #000 12.5%);
   color: var(--crm-btn-warning-text);
 }
 #bootstrap-theme .btn-success {
@@ -149,7 +148,7 @@
 }
 #bootstrap-theme .btn.btn-success:hover,
 #bootstrap-theme .btn.btn-success:focus {
-  background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-btn-success-bg);
+  background: color-mix(in srgb, var(--crm-btn-success-bg) 87.5%, #000 12.5%);
   color: var(--crm-btn-success-text);
 }
 #bootstrap-theme .btn-danger {
@@ -158,7 +157,7 @@
 }
 #bootstrap-theme .btn.btn-danger:hover,
 #bootstrap-theme .btn.btn-danger:focus {
-  background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-btn-danger-bg);
+  background: color-mix(in srgb, var(--crm-btn-danger-bg) 87.5%, #000 12.5%);
   color: var(--crm-btn-danger-text);
 }
 
@@ -290,11 +289,6 @@
 #bootstrap-theme .btn-secondary.dropdown-toggle:focus {
   background: var(--crm-c-secondary-hover);
 }
-.crm-container .crm-search-display button.dropdown-toggle:not(.btn-default):not(.btn-secondary),
-#bootstrap-theme .crm-search-display th .btn-group .btn {
-  background-color: var(--crm-c-background4);
-  color: var(--crm-c-text);
-}
 
 /* BS3 Button groups and dropdowns  */
 
@@ -500,7 +494,7 @@
   left: auto;
 }
 #bootstrap-theme .btn-group .btn + .btn.dropdown-toggle {
-  border-left: 1px solid var(--crm-c-page-background);
+  border-left: 1px solid var(--crm-table-bg);
 }
 
 /* Icons (for ease, include .button & .ui-button icons) */
diff --git a/ext/riverlea/core/css/components/_components.css b/ext/riverlea/core/css/components/_components.css
index 4a7bf4d02165..09f554315326 100644
--- a/ext/riverlea/core/css/components/_components.css
+++ b/ext/riverlea/core/css/components/_components.css
@@ -8,24 +8,25 @@
   max-width: 30rem;
   height: 7.25rem;
   overflow: auto;
-  border: 1px solid var(--crm-c-gray-500);
+  border: var(--crm-c-divider);
 }
 .crm-container ul.crm-checkbox-list {
   list-style: none;
   margin: 0;
   padding: 0;
-  background-color: var(--crm-c-page-background);
+  background-color: var(--crm-input-bg);
   width: 300px;
   max-width: 100%;
   max-height: 300px;
   overflow-y: auto;
 }
+.crm-container :is(.listing-box,.listing-box-tall) > div,
 .crm-container ul.crm-checkbox-list li {
   margin: 0;
   display: grid;
   grid-template-columns: var(--crm-r) 100%;
   gap: var(--crm-xs);
-  background-color: var(--crm-c-background2);
+  background-color: var(--crm-input-bg);
   padding-inline: var(--crm-s) var(--crm-m2);
   word-break: break-all;
   align-items: center;
@@ -33,26 +34,17 @@
 .crm-container ul.crm-checkbox-list li input {
   margin: 0;
 }
+.crm-container :is(.listing-box,.listing-box-tall) .even-row,
 .crm-container ul.crm-checkbox-list li:nth-child(2n) {
-  background-color: var(--crm-c-background3);
-}
-.crm-container ul.crm-checkbox-list li:has(input:checked) label {
-  color: var(--crm-checkbox-list-col);
+  background-color: color-mix(in srgb, var(--crm-input-bg) 100%, var(--crm-table-row-alternate-bg) var(--crm-table-row-alternate-mix));
 }
+.crm-container :is(.listing-box,.listing-box-tall) > div:has(input:checked),
 .crm-container ul.crm-checkbox-list li:has(input:checked) {
-  background-color: var(--crm-checkbox-list-bg);
-}
-.crm-container ul.crm-checkbox-list li:nth-child(2n):has(input:checked) {
-  background-color: var(--crm-checkbox-list-bg2);
+  --crm-input-bg: var(--crm-checkbox-list-bg);
 }
-
 .listing-box input.crm-form-checkbox {
   margin: 0 0 0 var(--crm-s);
 }
-tbody.scrollContent tr.alternateRow {
-  background-color: var(--crm-c-background3);
-  padding-inline: var(--crm-s) var(--crm-m2);
-}
 
 /* Action Links */
 
@@ -101,7 +93,7 @@ table.advmultiselect {
   list-style: none;
   margin: 0 0 20px;
   line-height: normal;
-  background-color: var(--crm-c-background);
+  background-color: var(--crm-c-container-bg);
   border: var(--crm-wizard-border);
   border-radius: var(--crm-wizard-radius);
   overflow: hidden;
@@ -225,7 +217,7 @@ table.advmultiselect {
 }
 .crm-container .panel-body {
   padding: var(--crm-padding-reg);
-  background: var(--crm-panel-background);
+  background: var(--crm-panel-bg);
   box-shadow: none;
   border-radius: var(--crm-roundness);
 }
@@ -242,29 +234,19 @@ table.advmultiselect {
   font-size: var(--crm-font-size);
   color: inherit;
 }
-.crm-container .panel-title > a,
-.crm-container .panel-title > small,
-.crm-container .panel-title > .small,
-.crm-container .panel-title > small > a,
-.crm-container .panel-title > .small > a {
+.crm-container .panel-title > :is(a,small,.small,small > a,.small > a) {
   color: inherit;
 }
 .crm-container .panel-footer {
   padding: var(--crm-padding-reg);
-  background: var(--crm-panel-background);
-  border-top: var(--crm-c-divider);
+  background: var(--crm-panel-bg);
+  border-top: var(--crm-panel-border);
   border-radius: 0 0 var(--crm-roundness) var(--crm-roundness);
   box-shadow: var(--crm-panel-shadow);
 }
-.crm-container .panel > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: var(--crm-c-gray-300);
-}
-.crm-container .panel > .panel-footer + .panel-collapse > .panel-body {
-  border-color: var(--crm-c-gray-300);
-}
 .crm-container .panel-default > .panel-heading {
   color: var(--crm-c-text);
-  background-color: var(--crm-c-background2);
+  background-color: var(--crm-c-layout1-bg);
   border-bottom: var(--crm-panel-border);
 }
 .crm-container .panel-title {
@@ -283,40 +265,35 @@ table.advmultiselect {
   color: var(--crm-c-primary-text);
   background-color: var(--crm-c-primary);
 }
-.crm-container .panel-primary > .panel-heading .badge,
-.crm-container .panel-primary > .panel-heading a {
+.crm-container .panel-primary > .panel-heading :is(.badge,a) {
   color: var(--crm-c-primary-text);
 }
 .crm-container .panel-success > .panel-heading {
   color: var(--crm-alert-success-text);
   background-color: var(--crm-alert-success-bg);
 }
-.crm-container .panel-success > .panel-heading .badge,
-.crm-container .panel-success > .panel-heading a {
+.crm-container .panel-success > .panel-heading :is(.badge,a) {
   color: var(--crm-alert-success-text);
 }
 .crm-container .panel-info > .panel-heading {
   color: var(--crm-alert-info-text);
   background-color: var(--crm-alert-info-bg);
 }
-.crm-container .panel-info > .panel-heading .badge,
-.crm-container .panel-info > .panel-heading a {
+.crm-container .panel-info > .panel-heading :is(.badge,a) {
   color: var(--crm-alert-info-text);
 }
 .crm-container .panel-warning > .panel-heading {
   color: var(--crm-c-warning-text);
   background-color: var(--crm-c-warning);
 }
-.crm-container .panel-warning > .panel-heading .badge,
-.crm-container .panel-warning > .panel-heading a {
+.crm-container .panel-warning > .panel-heading :is(.badge,a) {
   color: var(--crm-c-warning-text);
 }
 .crm-container .panel-danger > .panel-heading {
   color: var(--crm-c-danger-on-page-bg);
   background-color: var(--crm-c-danger);
 }
-.crm-container .panel-danger > .panel-heading .badge,
-.crm-container .panel-danger > .panel-heading a {
+.crm-container .panel-danger > .panel-heading :is(.badge,a) {
   color: var(--crm-c-danger);
 }
 .crm-container .panel:has(.nav.nav-tabs) {
@@ -357,7 +334,7 @@ table.advmultiselect {
 .list-group-item.active > .badge,
 .nav-pills > .active > a > .badge {
   color: var(--crm-c-link);
-  background-color: var(--crm-c-page-background);
+  background-color: var(--crm-c-layer1-bg);
 }
 .nav-pills > li > a > .badge {
   margin-left: 3px;
@@ -399,7 +376,7 @@ table.advmultiselect {
 }
 .crm-container #civicrm-footer .status.crm-error {
   background-color: var(--crm-c-danger);
-  color: var(--crm-c-danger-text);
+  color: var(--danger-text);
 }
 #civicrm-footer .status a {
   color: inherit;
@@ -431,7 +408,7 @@ p.crm-upgrade-large-text {
   color: var(--crm-alert-success-text);
 }
 .crm-upgrade-box-inner a {
-  color: var(--crm-c-link) !important  /* vs inline */;
+  color: var(--link) !important  /* vs inline */;
 }
 p.crm-upgrade-large-text:first-of-type {
   font-size: var(--crm-r1);
@@ -452,10 +429,10 @@ p.crm-upgrade-large-text:first-of-type {
 
 #crm-queue-runner-progress {
   width: 100%;
-  background: var(--crm-c-background3);
+  background: var(--crm-c-layer2-bg);
 }
 #crm-queue-runner-desc {
-  background: var(--crm-c-background2);
+  background: var(--crm-c-layer1-bg);
   padding: var(--crm-padding-reg);
   margin-block: var(--crm-r);
   border-radius: var(--crm-roundness);
@@ -511,7 +488,7 @@ div.civicrm-community-messages a.civicrm-community-message-dismiss::before {
   color: var(--crm-c-text-light);
   font-weight: bold;
   text-align: center;
-  background: var(--crm-c-background2);
+  background: var(--crm-c-layer1-bg);
 }
 .crm-status-box-outer.status-success .crm-status-box-inner {
   background: var(--crm-c-success);
@@ -554,7 +531,7 @@ div.civicrm-community-messages a.civicrm-community-message-dismiss::before {
 #bootstrap-theme a.bg-success:focus,
 #bootstrap-theme .dropdown-menu a.bg-success:hover,
 #bootstrap-theme .dropdown-menu .bg-success a:hover {
-  background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-c-success);
+  background: color-mix(in srgb, var(--crm-c-success) 87.5%, #000 12.5%);
   color: var(--crm-c-success-text);
 }
 #bootstrap-theme .dropdown-menu .bg-info a,
@@ -567,7 +544,7 @@ div.civicrm-community-messages a.civicrm-community-message-dismiss::before {
 #bootstrap-theme a.bg-info:focus,
 #bootstrap-theme .dropdown-menu .bg-info a:hover,
 #bootstrap-theme .dropdown-menu a.bg-info:hover {
-  background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-c-info);
+  background: color-mix(in srgb, var(--crm-c-info) 87.5%, #000 12.5%);
   color: var(--crm-c-info-text);
 }
 #bootstrap-theme .bg-warning,
@@ -580,7 +557,7 @@ div.civicrm-community-messages a.civicrm-community-message-dismiss::before {
 #bootstrap-theme a.bg-warning:focus,
 #bootstrap-theme .dropdown-menu .bg-warning a:hover,
 #bootstrap-theme .dropdown-menu a.bg-warning:hover {
-  background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-c-warning);
+  background: color-mix(in srgb, var(--crm-c-warning) 87.5%, #000 12.5%);
   color: var(--crm-c-warning-text);
 }
 #bootstrap-theme .bg-danger,
@@ -593,7 +570,7 @@ div.civicrm-community-messages a.civicrm-community-message-dismiss::before {
 #bootstrap-theme a.bg-danger:focus,
 #bootstrap-theme .dropdown-menu .bg-danger a:hover,
 #bootstrap-theme .dropdown-menu a.bg-danger:hover {
-  background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-c-danger);
+  background: color-mix(in srgb, var(--crm-c-danger) 87.5%, #000 12.5%);
   color: var(--crm-c-danger-text);
 }
 #bootstrap-theme .dropdown-menu .bg-danger .crm-i::before {
@@ -615,7 +592,7 @@ div.civicrm-community-messages a.civicrm-community-message-dismiss::before {
   width: 30px;
   height: 30px;
   border-radius: var(--crm-roundness);
-  background: var(--crm-c-background);
+  background: var(--crm-c-container-bg);
 }
 #CKEditorConfig .move {
   background-color: var(--crm-c-primary);
@@ -640,7 +617,7 @@ div.civicrm-community-messages a.civicrm-community-message-dismiss::before {
   margin-block: var(--crm-xs);
   padding: var(--crm-s);
   border: var(--crm-c-divider);
-  background-color: var(--crm-input-background);
+  background-color: var(--crm-input-bg);
   list-style-type: none;
   position: relative;
   border-radius: var(--crm-roundness);
@@ -677,7 +654,7 @@ div.civicrm-community-messages a.civicrm-community-message-dismiss::before {
   --crm-svg-logo: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 355 355" style="enable-background:new 0 0 355 355;" xml:space="preserve"><style type="text/css">.st0{fill:%23086287;}.st1{fill:%2381C459;}</style><g transform="matrix(1, 0, 0, 1, -198, -120)"><g><path class="st0" d="M342.05,470.43C342.05,470.43,342.05,470.43,342.05,470.43c-20.72-0.4-28.62-24.34-29.45-27.07l-70.69-231.67c-4.16-13.61-3.21-24.56,2.83-32.55c3.9-5.16,11.67-11.25,26.56-10.96c5.45,0.1,9.72,1.07,10.19,1.17l235.37,54.83c15.13,3.52,24.43,10.66,27.64,21.21c5.09,16.72-9.08,32.57-10.72,34.32L369.09,456.41C360.25,465.89,351.15,470.61,342.05,470.43z M270.14,192.48c-4.21-0.08-5.58,1.07-5.84,1.44c-1.19,1.68-1.45,2.43,1.05,10.62l70.69,231.66c1.58,4.95,4.2,9.55,6.48,9.72l0,0c0.03,0,2.84-0.02,8.64-6.23l164.69-176.68c3.04-3.34,5.84-8.78,5.2-10.46c-0.46-1.19-2.35-2.75-9.76-4.48l-235.37-54.84l0,0C275.92,193.23,272.97,192.54,270.14,192.48z"/></g><g><path class="st1" d="M315.61,451.6c-7.61,2.82-15.56,3.37-21.8,1.34c0,0,0,0,0,0c-19.66-6.41-20.24-31.58-20.24-34.42l0.02-225.56l23.16,5.19L296.84,419c0.06,5.18,1.4,10.13,4.56,10.68l0,0c0.02,0.01,1.64,0.52,6.35-1.63L315.61,451.6z M329.71,415.68l190.44-110.19c3.87-2.3,8.39-5.74,8.01-8.48c-0.06-0.41-0.96-2.89-5.08-5.75l15.97-18.15c9.02,6.88,13.59,14.89,13.59,23.91c0,17.44-18.16,28.45-20.23,29.65L337.06,438.9L329.71,415.68z M500.93,278.76L313.77,169.87c0,0-4.67-2.98-7.36-3.86c-4-1.3-5.96,0.02-6.33,0.27c-1.12,0.75-1.48,1.34-1.95,6.84l-24.11-4.49c1.31-10.03,5.23-17.46,11.68-22.15c5.22-3.79,14.42-7.34,28.55-2.73c5.17,1.69,8.97,3.85,9.38,4.09l194.69,112.31L500.93,278.76z"/></g></g></svg>') no-repeat;
 }
 .crm-container .blockUI.blockOverlay {
-  background: var(--crm-c-page-background) !important;
+  background: var(--crm-c-page-bg) !important;
 }
 .crm-container .blockUI.blockOverlay::before {
   content: "";
diff --git a/ext/riverlea/core/css/components/_dialogs.css b/ext/riverlea/core/css/components/_dialogs.css
index 1e78687f386e..c0496bf84b4d 100644
--- a/ext/riverlea/core/css/components/_dialogs.css
+++ b/ext/riverlea/core/css/components/_dialogs.css
@@ -160,7 +160,7 @@
   z-index: 99998;
 }
 #crm-notification-container div.ui-notify-message-style {
-  background: var(--crm-notify-background);
+  background: var(--crm-notify-bg);
   box-shadow: var(--crm-popup-shadow);
   color: var(--crm-notify-col);
   border-radius: var(--crm-notify-radius);
diff --git a/ext/riverlea/core/css/components/_dropdowns.css b/ext/riverlea/core/css/components/_dropdowns.css
index 37590a020e19..f18d20da7334 100644
--- a/ext/riverlea/core/css/components/_dropdowns.css
+++ b/ext/riverlea/core/css/components/_dropdowns.css
@@ -78,19 +78,14 @@
   border-radius: var(--crm-roundness);
   display: block;
 }
-#crm-contact-actions-list ul a:hover,
-#crm-contact-actions-list ul a:focus,
-.crm-contribpage-links-list-inner ul a:hover,
-.crm-contribpage-links-list-inner ul a:focus,
-.crm-event-links-list-inner ul a:hover,
-.crm-event-links-list-inner ul a:focus,
-.crm-participant-list-inner ul a:hover,
-.crm-participant-list-inner ul a:focus,
-#crm-create-new-list ul a:hover,
-#crm-create-new-list ul a:focus {
+#crm-contact-actions-list ul a:is(:hover,:focus),
+.crm-contribpage-links-list-inner a:is(:hover,:focus),
+.crm-event-links-list-inner ul a:is(:hover,:focus),
+.crm-participant-list-inner ul a:is(:hover,:focus),
+#crm-create-new-list ul a:is(:hover,:focus), {
   text-decoration: none;
   color: var(--crm-c-text);
-  background-color: var(--crm-c-background);
+  background-color: var(--crm-c-container-bg);
 }
 
 /* In-table dropdown */
@@ -183,11 +178,11 @@
 }
 .crm-container .crm-tooltip-wrapper .crm-tooltip {
   box-shadow: var(--crm-popup-shadow);
-  background: var(--crm-c-background);
+  background: var(--crm-c-container-bg);
   border-radius: var(--crm-roundness);
 }
 .crm-container .crm-tooltip-active:not(.crm-tooltip-down) .crm-tooltip-wrapper::after {
-  border-top: 10px solid var(--crm-c-background);
+  border-top: 10px solid var(--crm-c-container-bg);
   border-left: 10px solid rgba(0,0,0,0);
   border-right: 10px solid rgba(0,0,0,0);
   content: "";
@@ -196,7 +191,7 @@
   bottom: -7px;
 }
 .crm-container .crm-tooltip-active.crm-tooltip-down .crm-tooltip-wrapper::before {
-  border-bottom: 10px solid var(--crm-c-background2);
+  border-bottom: 10px solid var(--crm-c-layer1-bg);
   border-left: 10px solid rgba(0,0,0,0);
   border-right: 10px solid rgba(0,0,0,0);
   content: "";
@@ -211,7 +206,7 @@
 .crm-container .crm-tooltip table,
 .crm-container .crm-tooltip table tr,
 .crm-container .crm-tooltip table tr td {
-  background-color: var(--crm-c-background);
+  background-color: var(--crm-c-container-bg);
   border: none;
   color: var(--crm-c-text);
   word-wrap: break-word;
@@ -225,7 +220,7 @@
   padding: var(--crm-s) 0;
 }
 .crm-container .crm-tooltip-wrapper .crm-tooltip .crm-table-group-summary > tbody > tr:nth-child(1) > td {
-  background: var(--crm-c-background2);
+  background: var(--crm-c-layer1-bg);
   color: var(--crm-c-text);
   font-size: var(--crm-r1);
   padding: var(--crm-m2) var(--crm-r1);
@@ -288,7 +283,7 @@
   height: 1px;
   margin: var(--crm-m) 0;
   overflow: hidden;
-  background-color: var(--crm-c-background3);
+  background-color: var(--crm-c-layout2-bg);
 }
 #bootstrap-theme .dropdown-menu li .form-inline,
 #bootstrap-theme .dropdown-menu li .form-inline a:not(.select2-choice) {
@@ -314,7 +309,7 @@
 .crm-container .dropdown-menu > .active > a,
 .crm-container .dropdown-menu > .active > a:hover,
 .crm-container .dropdown-menu > .active > a:focus {
-  color: var(--crm-dropdown-hover);
+  color: var(--crm-dropdown-hover) !important; /* vs BS .btn-secondary:hover */
   background-color: var(--crm-dropdown-hover-bg);
   text-decoration: none;
   border-radius: var(--crm-roundness);
diff --git a/ext/riverlea/core/css/components/_form.css b/ext/riverlea/core/css/components/_form.css
index 579da38b7c21..4b3962afb1cd 100644
--- a/ext/riverlea/core/css/components/_form.css
+++ b/ext/riverlea/core/css/components/_form.css
@@ -138,7 +138,7 @@ select.crm-form-select,
 .ui-datepicker .ui-datepicker-header select {
   transition: var(--crm-input-active-ani);
   font-size: var(--crm-input-font-size);
-  background-color: var(--crm-input-background);
+  background-color: var(--crm-input-bg);
   border-radius: var(--crm-input-border-radius);
   box-shadow: var(--crm-input-box-shadow);
   color: var(--crm-input-color);
@@ -162,7 +162,7 @@ select.crm-form-multiselect {
   border: 1px solid var(--crm-c-darkest);
 }
 .crm-container .replace-plain {
-  background-color: var(--crm-c-background3);
+  background-color: var(--crm-input-bg);
   min-width: var(--crm-huge-input);
 }
 input.crm-form-text:focus,
@@ -348,11 +348,16 @@ input.crm-form-checkbox) + label {
 }
 /* Slider */
 .crm-container .ui-slider {
-  background: var(--crm-c-background4);
+  background: var(--crm-input-bg);
+  border: 1px solid var(--crm-input-border-color);
 }
 .crm-container .ui-slider .ui-slider-handle {
+  border: var(--crm-btn-border);
+  background: var(--crm-c-secondary);
+}
+.crm-container .ui-slider .ui-slider-range {
   border: 0;
-  background: var(--crm-c-background5);
+  border-radius: 0;
 }
 
 /* Input types */
@@ -386,7 +391,7 @@ input.crm-form-checkbox) + label {
 .crm-container select.form-control,
 .crm-container .select2-container-multi .select2-choices,
 .crm-container .select2-container .select2-choice {
-  background: var(--crm-input-background);
+  background: var(--crm-input-bg);
   border: 1px solid var(--crm-input-border-color);
   border-radius: var(--crm-input-border-radius);
   box-shadow: var(--crm-input-box-shadow);
@@ -459,22 +464,22 @@ input.crm-form-checkbox) + label {
 }
 .select2-container-disabled a {
   box-shadow: none;
-  background: var(--crm-c-page-background);
+  background: var(--crm-c-layer1-bg);
 }
 .select2-container-disabled .select2-arrow {
   background: transparent;
 }
 .crm-container .select2-container.select2-container-disabled .select2-choice {
-  background-color: var(--crm-c-background);
+  background-color: var(--crm-c-container-bg);
   border: 1px dotted var(--crm-c-inactive);
   cursor: default;
 }
 .select2-container.select2-container-disabled .select2-choice .select2-arrow {
   border-left: 0;
-  background: var(--crm-c-background);
+  background: var(--crm-c-container-bg);
 }
 .select2-results .select2-disabled {
-  background: var(--crm-c-background2);
+  background: var(--crm-c-layer1-bg);
   cursor: not-allowed;
 }
 .select2-results .select2-disabled > * {
@@ -533,7 +538,7 @@ input.crm-form-checkbox) + label {
 
 .select2-drop.select2-drop-active.crm-container {
   min-width: var(--crm-big-input);
-  background: var(--crm-input-background);
+  background: var(--crm-input-bg);
   border-bottom-left-radius: var(--crm-input-border-radius);
   border-bottom-right-radius: var(--crm-input-border-radius);
   border-color: var(--crm-c-focus);
@@ -582,14 +587,14 @@ input.crm-form-checkbox) + label {
 .select2-results .select2-no-results,
 .select2-results .select2-searching,
 .select2-results .select2-selection-limit {
-  background: var(--crm-input-background);
+  background: var(--crm-input-bg);
 }
 .select2-drop.select2-drop-active.crm-container .select2-results .select2-highlighted {
-  background: var(--crm-c-drag-background);
+  background: var(--crm-form-select-bg);
 }
 .select2-drop.select2-drop-active.crm-container .crm-entityref-filters select,
 .select2-drop.select2-drop-active.crm-container .crm-entityref-filters input {
-  background: var(--crm-c-background);
+  background: var(--crm-c-container-bg);
   border: 1px solid var(--crm-input-border-color);
   border-radius: var(--crm-input-border-radius);
   box-sizing: border-box;
@@ -615,7 +620,7 @@ input.crm-form-checkbox) + label {
 }
 .select2-results li.select2-result-with-children > .select2-result-label {
   font-weight: bold;
-  background: var(--crm-c-background3);
+  background: var(--crm-c-layout2-bg);
   padding: var(--crm-s);
 }
 .crm-container .crm-select2-row-description p {
@@ -692,7 +697,7 @@ input.crm-form-checkbox) + label {
   height: unset;
 }
 #ui-datepicker-div {
-  background: var(--crm-input-background);
+  background: var(--crm-input-bg);
   border-radius: 0;
   box-shadow: var(--crm-popup-shadow);
   min-width: 30ch;
@@ -722,7 +727,7 @@ input.crm-form-checkbox) + label {
 }
 #ui-datepicker-div .ui-datepicker-header :is(.ui-datepicker-prev,.ui-datepicker-next)::before {
   font-family: "FontAwesome";
-  color: var(--crm-c-text);
+  color: var(--text);
   font-size: var(--crm-small-font-size);
   line-height: var(--crm-l);
   padding: 0;
diff --git a/ext/riverlea/core/css/components/_nav.css b/ext/riverlea/core/css/components/_nav.css
index 751a91f2a262..4a2d0a30ef36 100644
--- a/ext/riverlea/core/css/components/_nav.css
+++ b/ext/riverlea/core/css/components/_nav.css
@@ -15,25 +15,21 @@
 .crm-container .nav > li > a {
   padding: var(--crm-m) var(--crm-r);
 }
-.crm-container .nav > li > a:hover,
-.crm-container .nav > li > a:focus {
+.crm-container .nav > li > a:is(:hover,:focus) {
   text-decoration: none;
-  background-color: var(--crm-c-background2);
+  background-color: var(--crm-c-layout1-bg);
 }
 .crm-container .nav > li.disabled > a {
   color: var(--crm-c-inactive);
 }
-.crm-container .nav > li.disabled > a:hover,
-.crm-container .nav > li.disabled > a:focus {
+.crm-container .nav > li.disabled > a:is(:hover,:focus) {
   color: var(--crm-c-inactive);
   text-decoration: none;
   cursor: not-allowed;
   background-color: transparent;
 }
-.crm-container .nav .open > a,
-.crm-container .nav .open > a:hover,
-.crm-container .nav .open > a:focus {
-  background-color: var(--crm-c-background2);
+.crm-container .nav .open > :is(a,a:hover,a:focus) {
+  background-color: var(--crm-c-layout1-bg);
   border-color: var(--crm-c-link);
 }
 .crm-container .nav .nav-divider {
diff --git a/ext/riverlea/core/css/components/_page.css b/ext/riverlea/core/css/components/_page.css
index 9531da0ac862..588f8aff9356 100644
--- a/ext/riverlea/core/css/components/_page.css
+++ b/ext/riverlea/core/css/components/_page.css
@@ -4,7 +4,7 @@
 
 .crm-container .crm-form-block { /* darkened page bg style */
   box-shadow: var(--crm-form-block-box-shadow);
-  background-color: var(--crm-form-block-background);
+  background-color: var(--crm-form-block-bg);
   border-radius: var(--crm-form-block-border-radius);
   padding: var(--crm-form-block-padding);
   margin: 0;
@@ -124,8 +124,7 @@
 .crm-container .pagination > li {
   display: inline;
 }
-.crm-container .pagination > li > a,
-.crm-container .pagination > li > span {
+.crm-container .pagination > li > :is(a,span) {
   position: relative;
   float: left;
   padding: var(--crm-s) var(--crm-m);
@@ -133,81 +132,59 @@
   line-height: 1.4;
   color: var(--crm-c-link);
   text-decoration: none;
-  background-color: var(--crm-c-page-background);
+  background-color: var(--crm-c-layer1-bg);
   border: var(--crm-c-divider);
 }
-.crm-container .pagination > li > a:hover,
-.crm-container .pagination > li > a:focus,
-.crm-container .pagination > li > span:hover,
-.crm-container .pagination > li > span:focus {
+.crm-container .pagination > li > :is(a:hover,a:focus,span:hover,span:focus) {
   z-index: 2;
   color: var(--crm-c-link-hover);
-  background-color: var(--crm-c-background);
-  border-color: var(--crm-c-background4);
+  background-color: var(--crm-c-layer2-bg);
 }
-.crm-container .pagination > li:first-child > a,
-.crm-container .pagination > li:first-child > span {
+.crm-container .pagination > li:first-child > :is(a,span) {
   margin-left: 0;
   border-top-left-radius: var(--crm-roundness);
   border-bottom-left-radius: var(--crm-roundness);
 }
-.crm-container .pagination > li:last-child > a,
-.crm-container .pagination > li:last-child > span {
+.crm-container .pagination > li:last-child > :is(a,span) {
   border-top-right-radius: var(--crm-roundness);
   border-bottom-right-radius: var(--crm-roundness);
 }
-.crm-container .pagination > .active > a,
-.crm-container .pagination > .active > a:hover,
-.crm-container .pagination > .active > a:focus,
-.crm-container .pagination > .active > span,
-.crm-container .pagination > .active > span:hover,
-.crm-container .pagination > .active > span:focus {
+.crm-container .pagination > .active > :is(a,a:hover,a:focus,span,span:hover,span:focus) {
   z-index: 3;
   color: var(--crm-c-primary-text);
   cursor: default;
   background-color: var(--crm-c-primary);
   border: var(--crm-c-divider);
 }
-.crm-container .pagination > .disabled > span,
-.crm-container .pagination > .disabled > span:hover,
-.crm-container .pagination > .disabled > span:focus,
-.crm-container .pagination > .disabled > a,
-.crm-container .pagination > .disabled > a:hover,
-.crm-container .pagination > .disabled > a:focus {
+.crm-container .pagination > .disabled > :is(a,a:hover,a:focus,span,span:hover,span:focus) {
   color: var(--crm-c-inactive);
   cursor: not-allowed;
   background-color: transparent;
   border: var(--crm-c-divider);
 }
-.crm-container .pagination-lg > li > a,
-.crm-container .pagination-lg > li > span {
+.crm-container .pagination-lg > li > :is(a,span) {
   padding: var(--crm-m2) var(--crm-r);
   font-size: var(--crm-r1);
   line-height: 1.3;
 }
-.crm-container .pagination-lg > li:first-child > a,
-.crm-container .pagination-lg > li:first-child > span {
+.crm-container .pagination-lg > li:first-child > :is(a,span) {
   border-top-left-radius: calc(1.5 * var(--crm-roundness));
   border-bottom-left-radius: calc(1.5 * var(--crm-roundness));
 }
-.crm-container .pagination-lg > li:last-child > a,
-.crm-container .pagination-lg > li:last-child > span {
+.crm-container .pagination-lg > li:last-child > :is(a,span) {
   border-top-right-radius: calc(1.5 * var(--crm-roundness));
   border-bottom-right-radius: calc(1.5 * var(--crm-roundness));
 }
-.crm-container .pagination-sm > li > a,
-.crm-container .pagination-sm > li > span {
+.crm-container .pagination-sm > li > :is(a,span) {
   padding: var(--crm-padding-small);
   font-size: var(--crm-font-size-small);
   line-height: 1.5;
 }
-.crm-container .pagination-sm > li:first-child > a,
-.crm-container .pagination-sm > li:first-child > span {
+.crm-container .pagination-sm > li:first-child > :is(a,span) {
   border-top-left-radius: calc(0.75 * var(--crm-roundness));
   border-bottom-left-radius: calc(0.75 * var(--crm-roundness));
 }
-.crm-container .pagination-sm > li:last-child > a,
-.crm-container .pagination-sm > li:last-child > span {
+.crm-container .pagination-sm > li:last-child > :is(a,span) {
   border-top-right-radius: calc(0.75 * var(--crm-roundness));
   border-bottom-right-radius: calc(0.75 * var(--crm-roundness));
 }
diff --git a/ext/riverlea/core/css/components/_tables.css b/ext/riverlea/core/css/components/_tables.css
index 7cdef9f20c84..018253905b6b 100644
--- a/ext/riverlea/core/css/components/_tables.css
+++ b/ext/riverlea/core/css/components/_tables.css
@@ -1,7 +1,7 @@
 .crm-container table:not(.crm-inline-edit-form,
 .crm-table-group-summary) {
   border: var(--crm-table-outside-border);
-  background: var(--crm-table-background);
+  background: var(--crm-table-bg);
   box-shadow: var(--crm-block-shadow);
   margin: 0 0 var(--crm-r);
   border-collapse: collapse;
@@ -24,70 +24,7 @@
 }
 .crm-container table:not(thead) tr {
   border-bottom: var(--crm-table-row-border);
-  background-color: transparent;
-}
-.crm-container .odd-row,
-.crm-container .odd,
-tbody.scrollContent,
-.crm-container table.dataTable.stripe tbody tr.odd,
-.crm-container table.dataTable.display tbody tr.odd {
-  background-color: var(--crm-table-odd-row);
-}
-.crm-container table.dataTable.hover tbody tr.odd:hover,
-.crm-container table.dataTable.display tbody tr.odd:hover,
-.crm-container table.row-highlight tr:hover,
-.crm-container .crm-row-selected,
-.crm-container .odd-row:hover,
-.crm-container .odd:hover {
-  background-color: var(--crm-table-odd-hover);
-}
-table.dataTable.display tbody tr.odd > .sorting_1,
-table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
-  background: linear-gradient(to top,rgba(0, 0, 0, 0.05),rgba(0, 0, 0, 0.05)) var(--crm-table-odd-row);
-}
-.crm-container .even-row,
-.crm-container .even,
-tbody.scrollContent tr.alternateRow {
-  background-color: var(--crm-table-even-row);
-}
-.crm-container table.dataTable.hover tbody tr.even:hover,
-.crm-container table.dataTable.display tbody tr.even:hover,
-.crm-container table.row-highlight tr.even-row:hover,
-.crm-container table.row-highlight tr.even:hover,
-.crm-container .even-row.crm-row-selected,
-.crm-container .even.crm-row-selected ,
-.crm-container .even-row:hover,
-.crm-container .even:hover,
-tbody.scrollContent tr.alternateRow:hover {
-  background-color: var(--crm-table-even-hover);
-}
-table.dataTable.display tbody tr.even > .sorting_1,
-table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
-  background: linear-gradient(to top,rgba(0, 0, 0, 0.05),rgba(0, 0, 0, 0.05)) var(--crm-table-even-row);
-}
-.crm-container .extension-installed {
-  background: var(--crm-alert-success-bg);
-  color: var(--crm-alert-success-text);
-}
-.crm-container .extension-installed summary {
-  color: var(--crm-alert-success-text);
-}
-table.dataTable.display tbody tr.extension-installed.odd {
-  background: linear-gradient(to top,rgba(256,256,256,0.2),rgba(256,256,256,0.2)) var(--crm-alert-success-bg);
-}
-table.dataTable.display tbody tr.extension-installed.even:hover {
-  background: linear-gradient(to top,rgba(256,256,256,0.05),rgba(256,256,256,0.05)) var(--crm-alert-success-bg);
-}
-table.dataTable.display tbody tr.extension-installed.odd:hover {
-  background: linear-gradient(to top,rgba(256,256,256,0.25),rgba(256,256,256,0.25)) var(--crm-alert-success-bg);
-}
-table.dataTable.display tbody tr.extension-installed.odd > .sorting_1,
-table.dataTable.order-column.stripe tbody tr.extension-installed.odd > .sorting_1 {
-  background: var(--crm-alert-success-bg) !important;
-}
-table.dataTable.display tbody tr.extension-installed.even > .sorting_1,
-table.dataTable.order-column.stripe tbody tr.extension-installed.even > .sorting_1 {
-  background: linear-gradient(to top,rgba(0, 0, 0, 0.05),rgba(0, 0, 0, 0.05)) var(--crm-alert-success-bg);
+  background-color: var(--crm-table-row-bg);
 }
 .crm-container td,
 .crm-container table.dataTable thead td {
@@ -165,34 +102,17 @@ table.dataTable.order-column.stripe tbody tr.extension-installed.even > .sorting
 }
 
 /* Data Tables */
-.crm-container .dataTables_wrapper .dataTables_length,
-.crm-container .dataTables_wrapper .dataTables_filter,
-.crm-container .dataTables_wrapper .dataTables_info,
-.crm-container .dataTables_wrapper .dataTables_processing,
-.crm-container .dataTables_wrapper .dataTables_paginate {
-  color: var(--crm-c-text) !important;
-}
-.crm-container .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
-.crm-container .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
-.crm-container .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
+.crm-container .dataTables_wrapper :is(.dataTables_length,.dataTables_filter,.dataTables_info,.dataTables_processing,.dataTables_paginate),
+.crm-container .dataTables_wrapper .dataTables_paginate :is(.paginate_button.disabled,.paginate_button.disabled:hover,.paginate_button.disabled:active) {
   color: var(--crm-c-text) !important; /* vs jqueery.dataTables.css */
 }
 
 /* Nested table */
-.crm-container .crm-child-row tr:first-child {
-  border: 1px solid var(--crm-c-page-background);
-}
-.crm-container .crm-child-row {
-  border-top: 1px solid var(--crm-c-gray-400);
-  border-bottom: 1px solid var(--crm-c-gray-025);
-}
+
 .crm-container .crm-child-row table {
   box-shadow: none;
   border: var(--crm-table-nested-border);
 }
-.crm-container .crm-child-row th {
-  opacity: 0.7;
-}
 .crm-container .crm-child-row > td:has(table) {
   padding: var(--crm-table-nested-padding);
 }
@@ -205,21 +125,13 @@ table.dataTable.order-column.stripe tbody tr.extension-installed.even > .sorting
 }
 
 /* Nested, inset table - groups page */
-tbody .crm-row-child {
-  border-top: 1px solid var(--crm-c-gray-400);
-}
-tbody .crm-row-child ~ .crm-row-child {
-  border-top: 0;
-}
-tbody .crm-row-child:not(:has(~ .crm-row-child)) {
-  border-bottom: 1px solid var(--crm-c-gray-025);
-}
+
 tbody .crm-row-child td {
   box-shadow: inset 0 10px 8px -10px rgba(0,0,0,.15);
   background: var(--crm-table-inset-bg);
 }
 tbody .crm-row-child:hover td {
-  background: var(--crm-table-odd-hover);
+  background: color-mix(in srgb, var(--crm-table-inset-bg) 95%, #000 5%);
   cursor: var(--crm-hover-clickable);
 }
 tbody .crm-row-child ~ .crm-row-child td {
@@ -233,7 +145,7 @@ tbody .crm-row-child:not(:has(~ .crm-row-child)) td {
 .crm-container table.form-layout-compressed {
   width: var(--crm-table-compressed-width);
   border: var(--crm-table-outside-border);
-  background: var(--crm-table-background);
+  background: var(--crm-table-bg);
   box-shadow: var(--crm-block-shadow);
   margin: var(--crm-m) 0 var(--crm-l);
 }
@@ -243,8 +155,7 @@ tbody .crm-row-child:not(:has(~ .crm-row-child)) td {
   padding: var(--crm-table-padding);
 }
 .crm-container .crm-form-block > .form-layout-compressed {
-  /* handles double box/border issue when table is in a form block,
-    e.g. civicrm/member/add?reset=1&action=add&context=standalone */
+  /* handles double box/border issue when table is in a form block */
   box-shadow: none;
   border: 0 solid transparent;
   background: transparent;
@@ -253,7 +164,7 @@ tbody .crm-row-child:not(:has(~ .crm-row-child)) td {
 /* Advance search compressed table */
 #search-status table.form-layout-compressed {
   border: 0;
-  background: var(--crm-c-background);
+  background: var(--crm-c-container-bg);
   width: 100%;
   border: 0;
   padding: var(--crm-padding-reg);
@@ -277,12 +188,11 @@ tbody .crm-row-child:not(:has(~ .crm-row-child)) td {
 }
 .crm-container table.report td {
   border: var(--crm-table-row-border);
-  background-color: var(--crm-table-even-row);
+  background-color: var(--crm-table-alternate-row);
 }
 .crm-container tr.columnheader-dark th {
-  background-color: var(--crm-c-gray-700);
+  background-color: var(--crm-c-dark-bg);
   color: var(--crm-c-text-light);
-  border: 1px solid var(--crm-c-gray-800);
 }
 
 /* Batch entry table */
@@ -290,7 +200,7 @@ tbody .crm-row-child:not(:has(~ .crm-row-child)) td {
   display: table;
   border-collapse: collapse;
   border: var(--crm-table-outside-border);
-  background-color: var(--crm-table-background);
+  background-color: var(--crm-table-bg);
 }
 .crm-container .crm-grid-row,
 .crm-container .crm-grid-header {
@@ -316,8 +226,52 @@ tbody .crm-row-child:not(:has(~ .crm-row-child)) td {
 /* Pay later table (nested inside another table) */
 
 .crm-container table#payLater table#payLaterOptions.form-layout {
-  border: 1px solid #dedede;
-  background: var(--crm-c-page-background);
+  border: var(--c-crm-table-nested-border);
+  background: var(--crm-c-table-bg);
+}
+
+/* Striped rows */
+
+tbody.scrollContent:has(.alternateRow),
+.crm-container table:has(.odd-row,.even-row),
+.crm-container table.dataTable tbody,
+.crm-container .table-striped > tbody {
+  --crm-striped-bg: var(--crm-table-row-bg);
+}
+.crm-container table.dataTable:is(.stripe,.display) tbody tr.odd:not(.disabled),
+.crm-container table tbody:has(.odd,.even,.even-row,.odd-row) tr:not(.disabled),
+.crm-container .table-striped > tbody > tr:not(.disabled) {
+  background-color: var(--crm-striped-bg) !important;
+}
+.crm-container table.dataTable:is(.stripe,.display) tbody tr.even:not(.disabled),
+tbody.scrollContent tr.alternateRow:not(.disabled),
+.crm-container .table-striped > tbody > tr:nth-of-type(2n):not(.disabled) {
+  --crm-striped-bg: color-mix(in srgb, var(--crm-table-row-bg) 0%, (--crm-table-row-alternate-bg) var(--crm-table-row-alternate-mix));
+}
+.crm-container table.dataTable.hover tbody tr.odd:hover,
+.crm-container table.dataTable.display tbody tr.odd:hover,
+.crm-container table.row-highlight tr:hover,
+.crm-container .crm-row-selected,
+.crm-container .odd-row:hover,
+.crm-container .odd:hover,
+.crm-container .table-striped > tbody > tr:hover {
+  --crm-striped-bg: var(--crm-table-row-hover);
+}
+.crm-container table.dataTable.hover tbody tr.even:hover,
+.crm-container table.dataTable.display tbody tr.even:hover,
+.crm-container table.row-highlight tr.even-row:hover,
+.crm-container table.row-highlight tr.even:hover,
+.crm-container .even-row.crm-row-selected,
+.crm-container .even.crm-row-selected ,
+.crm-container .even-row:hover,
+.crm-container .even:hover,
+tbody.scrollContent tr.alternateRow:hover,
+.crm-container .table-striped > tbody > tr:nth-of-type(2n):hover {
+  --crm-striped-bg: color-mix(in srgb, var(--crm-table-row-hover) 100%, #000 6%);
+}
+.crm-container table.dataTable.display tbody tr > .sorting_1,
+.crm-container table.dataTable.order-column.stripe tbody tr > .sorting_1 {
+  background-color: color-mix(in srgb, var(--crm-striped-bg) 100%, var(--crm-table-row-alternate-bg) var(--crm-table-row-alternate-mix)) !important;
 }
 
 /* Table bg colours */
@@ -327,75 +281,30 @@ tbody .crm-row-child:not(:has(~ .crm-row-child)) td {
   max-width: 100%;
   margin-bottom: var(--crm-r1);
 }
-.crm-container .table > thead > tr > th,
-.crm-container .table > thead > tr > td,
-.crm-container .table > tbody > tr > th,
-.crm-container .table > tbody > tr > td,
-.crm-container .table > tfoot > tr > th,
-.crm-container .table > tfoot > tr > td {
+.crm-container .table > :is(thead,tbody,tfoot) > tr > :is(th,td) {
   padding: var(--crm-table-padding);
 }
-.crm-container .crm-search-display-table > table.table > thead > tr > th.crm-search-result-select {
-  padding-inline: 0.5em;
-}
 .crm-container .table > tbody + tbody {
   border-top: var(--crm-table-header-bottom);
 }
-.crm-container .table-condensed > thead > tr > th,
-.crm-container .table-condensed > thead > tr > td,
-.crm-container .table-condensed > tbody > tr > th,
-.crm-container .table-condensed > tbody > tr > td,
-.crm-container .table-condensed > tfoot > tr > th,
-.crm-container .table-condensed > tfoot > tr > td {
+.crm-container .table-condensed > :is(thead,tbody,tfoot) > tr > :is(th,td) {
   padding: var(--crm-s1);
 }
 .crm-container .table-bordered {
   border: var(--crm-table-outside-border);
 }
-.crm-container .table-bordered > thead > tr > th,
-.crm-container .table-bordered > thead > tr > td,
-.crm-container .table-bordered > tbody > tr > th,
-.crm-container .table-bordered > tbody > tr > td,
-.crm-container .table-bordered > tfoot > tr > th,
-.crm-container .table-bordered > tfoot > tr > td {
+.crm-container .table-bordered > :is(thead,tbody,tfoot) > tr > :is(th,td) {
   border: var(--crm-table-outside-border);
 }
 .crm-container .table-bordered > thead > tr > th,
 .crm-container .table-bordered > thead > tr > td {
   border-bottom-width: 2px;
 }
-.crm-container .table-striped > tbody > tr {
-  background-color: var(--crm-table-even-row);
-}
-.crm-container .table-striped > tbody > tr:nth-of-type(2n+1) {
-  background-color: var(--crm-table-odd-row);
-}
-.crm-container .table-striped > tbody > tr:hover {
-  background-color: var(--crm-table-even-hover);
-}
-.crm-container .table-striped > tbody > tr:nth-of-type(2n+1):hover {
-  background-color: var(--crm-table-odd-hover);
-}
-.crm-container .table > thead > tr > td.active,
-.crm-container .table > thead > tr > th.active,
-.crm-container .table > thead > tr.active > td,
-.crm-container .table > thead > tr.active > th,
-.crm-container .table > tbody > tr > td.active,
-.crm-container .table > tbody > tr > th.active,
-.crm-container .table > tbody > tr.active > td,
-.crm-container .table > tbody > tr.active > th,
-.crm-container .table > tfoot > tr > td.active,
-.crm-container .table > tfoot > tr > th.active,
-.crm-container .table > tfoot > tr.active > td,
-.crm-container .table > tfoot > tr.active > th {
-  background-color: var(--crm-table-odd-row);
-}
-.crm-container .table-hover > tbody > tr > td.active:hover,
-.crm-container .table-hover > tbody > tr > th.active:hover,
-.crm-container .table-hover > tbody > tr.active:hover > td,
-.crm-container .table-hover > tbody > tr:hover > .active,
-.crm-container .table-hover > tbody > tr.active:hover > th {
-  background-color: var(--crm-table-odd-hover);
+.crm-container .table > :is(thead,tbody,tfoot) > :is(tr > td.active,tr > th.active,tr.active > td,tr.active > th) {
+  background-color: var(--crm-table-row-bg);
+}*/
+.crm-container .table-hover > tbody > :is(tr > td.active:hover,th.active:hover,tr.active:hover > td,tr:hover > .active,tr.active:hover > th) {
+  background-color: var(--crm-table-row-hover);
 }
 .crm-container .table td.success,
 .crm-container .table th.success,
@@ -486,39 +395,19 @@ tbody .crm-row-child:not(:has(~ .crm-row-child)) td {
   .crm-container .table-responsive > .table {
     margin-bottom: 0;
   }
-  .crm-container .table-responsive > .table > thead > tr > th,
-  .crm-container .table-responsive > .table > thead > tr > td,
-  .crm-container .table-responsive > .table > tbody > tr > th,
-  .crm-container .table-responsive > .table > tbody > tr > td,
-  .crm-container .table-responsive > .table > tfoot > tr > th,
-  .crm-container .table-responsive > .table > tfoot > tr > td,
-  .crm-container th,
-  .crm-container td {
+  .crm-container .table-responsive > .table > :is(thead,tbody,tfoot) > tr > :is(th,td) {
     white-space: nowrap;
   }
   .crm-container .table-responsive > .table-bordered {
     border: 0;
   }
-  .crm-container .table-responsive > .table-bordered > thead > tr > th:first-child,
-  .crm-container .table-responsive > .table-bordered > thead > tr > td:first-child,
-  .crm-container .table-responsive > .table-bordered > tbody > tr > th:first-child,
-  .crm-container .table-responsive > .table-bordered > tbody > tr > td:first-child,
-  .crm-container .table-responsive > .table-bordered > tfoot > tr > th:first-child,
-  .crm-container .table-responsive > .table-bordered > tfoot > tr > td:first-child {
+  .crm-container .table-responsive > .table-bordered > :is(thead,tbody,tfoot) > tr > :is(th,td):first-child {
     border-left: 0;
   }
-  .crm-container .table-responsive > .table-bordered > thead > tr > th:last-child,
-  .crm-container .table-responsive > .table-bordered > thead > tr > td:last-child,
-  .crm-container .table-responsive > .table-bordered > tbody > tr > th:last-child,
-  .crm-container .table-responsive > .table-bordered > tbody > tr > td:last-child,
-  .crm-container .table-responsive > .table-bordered > tfoot > tr > th:last-child,
-  .crm-container .table-responsive > .table-bordered > tfoot > tr > td:last-child {
+  .crm-container .table-responsive > .table-bordered > :is(thead,tbody,tfoot) > tr > :is(th,td):last-child {
     border-right: 0;
   }
-  .crm-container .table-responsive > .table-bordered > tbody > tr:last-child > th,
-  .crm-container .table-responsive > .table-bordered > tbody > tr:last-child > td,
-  .crm-container .table-responsive > .table-bordered > tfoot > tr:last-child > th,
-  .crm-container .table-responsive > .table-bordered > tfoot > tr:last-child > td {
+  .crm-container .table-responsive > .table-bordered > :is(tbody,tfoot) > tr:last-child > :is(th,td) {
     border-bottom: 0;
   }
 }
diff --git a/ext/riverlea/core/css/components/_tabs.css b/ext/riverlea/core/css/components/_tabs.css
index d854ae6b44ac..7bc349d79ef3 100644
--- a/ext/riverlea/core/css/components/_tabs.css
+++ b/ext/riverlea/core/css/components/_tabs.css
@@ -93,8 +93,8 @@
 }
 .crm-container .ui-tabs ul.ui-tabs-nav .crm-count-0 a em,
 .crm-container #mainTabContainer ul.ui-tabs-nav .crm-count-0 a em {
-  background: var(--crm-c-background5);
-  color: var(--crm-c-text-light);
+  background: var(--crm-c-primary);
+  color: var(--crm-c-primary-text);
 }
 .crm-container .ui-tabs ul li em:empty,
 .crm-container .nav-tabs .badge:empty { /* this is to keep the height of tabs with empty badges */
diff --git a/ext/riverlea/core/css/contactSummary.css b/ext/riverlea/core/css/contactSummary.css
index 2edf00d26ee5..14c79fc77db9 100644
--- a/ext/riverlea/core/css/contactSummary.css
+++ b/ext/riverlea/core/css/contactSummary.css
@@ -4,6 +4,7 @@
 
 .crm-container .primary .crm-label {
   font-weight: bold;
+  font-family: var(--crm-font-bold);
 }
 
 /* Contact name/header */
@@ -308,7 +309,7 @@ div.crm-inline-edit-form div.crm-clear {
 #crm-contact-actions-list a.delete:hover,
 #crm-contact-actions-list a.delete:focus {
   color: var(--crm-c-danger-text);
-  background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-c-danger);
+  background: color-mix(in srgb, var(--crm-btn-cancel-bg) 87.5%, #000 12.5%);
 }
 
 /* Tags */
@@ -346,7 +347,7 @@ div.crm-inline-edit-form div.crm-clear {
 .crm-contact-page .crm-tag-item {
   border-radius: var(--crm-roundness);
   padding: 0 var(--crm-m);
-  background-color: var(--crm-c-background2);
+  background-color: var(--crm-c-layer2-bg);
 }
 #crm-main-content-wrapper:has(.crm-contact-page) {
   box-shadow: var(--crm-block-shadow);
diff --git a/ext/riverlea/core/css/dashboard.css b/ext/riverlea/core/css/dashboard.css
index e42ceea36a3d..e4c16319baa0 100644
--- a/ext/riverlea/core/css/dashboard.css
+++ b/ext/riverlea/core/css/dashboard.css
@@ -21,7 +21,7 @@
 .crm-container .ui-sortable-helper.crm-dashlet {
   box-shadow: var(--crm-block-shadow);
 }
-.crm-container #civicrm-dashboard .crm-dashlet-header {
+.crm-container .crm-dashlet-header {
   background-color: var(--crm-dashlet-header-bg);
   border-radius: var(--crm-dashlet-radius);
   border: var(--crm-dashlet-header-border);
@@ -109,10 +109,8 @@ crm-dashlet[is-fullscreen=true] > .crm-dashlet-content {
   display: inline-block;
   width: 340px;
   height: var(--crm-xxl);
-  margin: 10px;
-  box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.2);
   box-shadow: var(--crm-popup-shadow);
-  background-color: var(--crm-c-background4);
+  background-color: color-mix(in srgb, var(--crm-dashlet-bg) 90%, #fff 10%);
   border-radius: var(--crm-dashlet-radius);
   margin: 0;
 }
diff --git a/ext/riverlea/core/org.civicrm.afform-ang/afCore.css b/ext/riverlea/core/org.civicrm.afform-ang/afCore.css
index e19d6b8be696..878c13555df1 100644
--- a/ext/riverlea/core/org.civicrm.afform-ang/afCore.css
+++ b/ext/riverlea/core/org.civicrm.afform-ang/afCore.css
@@ -74,7 +74,7 @@ details.af-container.af-layout-inline > *:not(summary) {
 
 /* Card style */
 .af-container-style-pane {
-  background-color: var(--crm-form-block-background);
+  background-color: var(--crm-form-block-bg);
   border-radius: var(--crm-form-block-border-radius);
   box-shadow: var(--crm-form-block-box-shadow);
   position: relative;
@@ -82,7 +82,7 @@ details.af-container.af-layout-inline > *:not(summary) {
   padding-top: 50px !important;
 }
 #bootstrap-theme .af-container-style-pane > .af-title {
-  background-color: var(--crm-c-background5);
+  background-color: var(--crm-form-block-header);
   color: var(--crm-c-text-light);
   border-radius: var(--crm-form-block-border-radius) var(--crm-form-block-border-radius) 0 0;
   position: absolute;
diff --git a/ext/riverlea/core/org.civicrm.afform_admin-ang/afGuiEditor.css b/ext/riverlea/core/org.civicrm.afform_admin-ang/afGuiEditor.css
index f21e2db30749..8b4e8cc297a7 100644
--- a/ext/riverlea/core/org.civicrm.afform_admin-ang/afGuiEditor.css
+++ b/ext/riverlea/core/org.civicrm.afform_admin-ang/afGuiEditor.css
@@ -215,7 +215,7 @@
   cursor: auto;
 }
 .af-gui-entity-palette-select-list [ui-sortable] > div:not(.disabled):hover {
-  background-color: var(--crm-c-background3);
+  background-color: var(--crm-c-layout2-bg);
 }
 
 /* Edit canvas (right side) */
@@ -246,7 +246,7 @@
   width: 100%;
   border-radius: 0;
   transition: opacity .2s;
-  background-color: var(--crm-c-background3);
+  background-color: var(--crm-fb-header-bg);
   padding-inline: var(--crm-xs);
   cursor: move;
   display: flex;
@@ -286,15 +286,13 @@
   opacity: 1;
   transition: opacity .2s;
 }
-#afGuiEditor:not(.af-gui-dragging *) #afGuiEditor-canvas:hover .af-gui-container:not(.af-gui-container-type-fieldset),
-#afGuiEditor:not(.af-gui-dragging *) #afGuiEditor-canvas:hover .af-gui-element,
-#afGuiEditor:not(.af-gui-dragging *) #afGuiEditor-canvas:hover .af-gui-markup {
-  border: 2px solid var(--crm-c-background2);
+#afGuiEditor:not(.af-gui-dragging *) #afGuiEditor-canvas:hover :is(.af-gui-container:not(.af-gui-container-type-fieldset),.af-gui-element,.af-gui-markup) {
+  border: 2px solid var(--crm-c-layout1-bg);
 }
 /* Dragging related */
 #afGuiEditor #afGuiEditor-canvas .af-gui-dragtarget > .af-gui-bar,
 #afGuiEditor #afGuiEditor-canvas .af-gui-dragtarget > .af-gui-container-title span:empty {
-  background-color: var(--crm-c-background4);
+  background-color: color-mix(in srgb, var(--crm-fb-header-bg) 80%, #000 20%);
   opacity: 1;
   transition: opacity .1s;
 }
@@ -376,10 +374,11 @@ af-gui-container > .af-gui-bar,
 
 /* Card style */
 #afGuiEditor .af-gui-search-display {
-  border: 1px dotted var(--crm-c-background5);
+  border: var(--crm-c-divider);
+  border-style: dotted;
   color: var(--crm-c-text);
   padding: var(--crm-padding-reg);
-  background-color: var(--crm-c-background2);
+  background-color: var(--crm-c-layout1-bg);
 }
 
 /* Markup area */
@@ -401,7 +400,7 @@ af-gui-container > .af-gui-bar,
 }
 #afGuiEditor .af-gui-content-editing-area .af-gui-edit-options-bar {
   width: 100%;
-  background-color: var(--crm-c-background3);
+  background-color: var(--crm-c-layout2-bg);
   display: flex;
   align-items: center;
   padding: var(--crm-m);
@@ -427,17 +426,17 @@ af-gui-container > .af-gui-bar,
   color: var(--crm-c-link);
 }
 #bootstrap-theme #afGuiEditor .af-gui-button > .btn.disabled .crm-editable-enabled:hover:not(:focus) {
-  border-color: var(--crm-c-background2) !important;
+  border-color: var(--crm-c-layout1-bg) !important;
 }
 #bootstrap-theme #afGuiEditor .af-gui-button > .btn-default.disabled {
-  background-color: var(--crm-c-background2) !important;
+  background-color: var(--crm-c-layer1-bg) !important;
 }
 #afGuiEditor .af-gui-container-title span:empty {
   font-weight: lighter;
 }
 #afGuiEditor .af-gui-field-required:after {
   content: '*';
-  color: var(--crm-c-danger);
+  color: var(--crm-notify-danger);
   position: relative;
   left: -4px;
 }
@@ -494,7 +493,7 @@ af-gui-container > .af-gui-bar,
   background: none;
 }
 #afGuiEditor .af-gui-dropzone {
-  background-color: var(--crm-c-background2);
+  background-color: var(--crm-c-dr);
   border: 2px solid var(--crm-c-info);
   min-height: 30px;
 }
@@ -506,7 +505,7 @@ af-gui-container > .af-gui-bar,
   padding-inline: var(--crm-padding-reg);
 }
 #afGuiEditor af-gui-edit-options.af-gui-content-editing-area ul[ui-sortable] li {
-  background-color: var(--crm-c-background2);
+  background-color: var(--crm-c-layer1-bg);
   cursor: move;
   height: var(--crm-btn-height);
   display: flex;
@@ -514,7 +513,7 @@ af-gui-container > .af-gui-bar,
   padding-inline: var(--crm-m);
 }
 #afGuiEditor af-gui-edit-options.af-gui-content-editing-area ul[ui-sortable] li:nth-child(even) {
-  background-color: var(--crm-c-background3);
+  background-color: color-mix(in srgb, var(--crm-c-layer1-bg) 92%, #000 8%);
 }
 #afGuiEditor af-gui-edit-options.af-gui-content-editing-area ul[ui-sortable] li > div {
   display: inline-block;
@@ -535,14 +534,14 @@ af-gui-container > .af-gui-bar,
 /* Rules for Conditional dialog */
 .af-gui-conditional-dialog fieldset {
   padding: 6px;
-  border-top: 1px solid var(--crm-c-background2);
+  border-top: 1px solid var(--crm-c-drag-bg);
   margin-top: 10px;
   margin-bottom: 10px;
   position: relative;
 }
 .af-gui-conditional-dialog fieldset fieldset {
   padding-top: 0;
-  border: 1px solid var(--crm-c-background2);
+  border: var(--crm-c-divider);
   border-top: 0;
 }
 #bootstrap-theme .af-gui-conditional-dialog af-gui-clause > .btn-group {
@@ -675,7 +674,7 @@ i.crm-i.af-gui-conditional-dialog-move-icon {
 
 /* Misc - aka stuff I can't identify but don't want to risk removing*/
 #bootstrap-theme #afGuiEditor .af-gui-bar .btn.active {
-  background-color: var(--crm-c-background5);
+  background-color: color-mix(in srgb, var(--crm-fb-header-bg) 80%, #000);
 }
 #afGuiEditor .af-gui-bar > .form-inline > span {
   color: var(--crm-c-text);
diff --git a/ext/riverlea/core/org.civicrm.search_kit-css/crmSearchAdmin.css b/ext/riverlea/core/org.civicrm.search_kit-css/crmSearchAdmin.css
index 39099baad792..9c00e136df70 100644
--- a/ext/riverlea/core/org.civicrm.search_kit-css/crmSearchAdmin.css
+++ b/ext/riverlea/core/org.civicrm.search_kit-css/crmSearchAdmin.css
@@ -72,13 +72,13 @@
   color: var(--crm-tab-col);
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
-  border: 1px solid var(--crm-c-gray-300);
+  border: var(--crm-c-divider);
   border-right: 0 none;
   box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
 }
 .crm-search ul.nav-stacked li[role=separator] {
   height: var(--crm-m2);
-  border-top: 1px solid var(--crm-c-gray-300);
+  border-top: var(--crm-c-divider);
   margin: var(--crm-m) var(--crm-l) 0 var(--crm-r);
 }
 .crm-search ul.nav-stacked li a[disabled] {
@@ -107,7 +107,7 @@
   right: 28px;
 }
 .crm-search .crm-search-admin-outer .crm-flex-4.panel {
-  border: 1px solid var(--crm-c-gray-300);
+  border: var(--crm-c-divider);
   margin: 0;
 }
 .crm-search .crm-search-admin-outer .crm-flex-4.panel .panel-body {
@@ -174,7 +174,7 @@
 /* Tab: Select Fields */
 
 .crm-search fieldset.crm-draggable {
-  background-color: var(--crm-c-drag-background);
+  background-color: var(--crm-c-drag-bg);
   border-radius: var(--crm-roundness);
   border: 0 solid transparent;
 }
@@ -243,7 +243,7 @@
   display: block;
 }
 .crm-search crm-search-admin-link-group {
-  background: var(--crm-c-background2);
+  background: var(--crm-c-layout1-bg);
 }
 .crm-search crm-search-admin-link-group table {
   margin: var(--crm-padding-reg);
diff --git a/ext/riverlea/core/org.civicrm.search_kit-css/crmSearchDisplayTable.css b/ext/riverlea/core/org.civicrm.search_kit-css/crmSearchDisplayTable.css
index 4efe2029469f..d8cd7a04bec7 100644
--- a/ext/riverlea/core/org.civicrm.search_kit-css/crmSearchDisplayTable.css
+++ b/ext/riverlea/core/org.civicrm.search_kit-css/crmSearchDisplayTable.css
@@ -8,7 +8,7 @@ table.crm-sticky-header > thead > tr {
   z-index: 2;
 }
 .crm-search-display-table > table.table > thead > tr > th.crm-search-result-select {
-  padding-inline: 0;
+  padding-inline: var(--crm-m);
   text-transform: none;
   color: initial;
   min-width: 95px; /* Don't allow button to be split on 2 lines */
@@ -29,12 +29,13 @@ table.crm-sticky-header > thead > tr {
   width: 1px; /* shrinks cell to width of button/menu */
 }
 #bootstrap-theme th.crm-search-result-select button.btn {
-  background: transparent;
+  background-color: color-mix(in srgb,var(--crm-c-text) 15%,transparent);
+  color: var(--crm-c-text);
   padding: var(--crm-xs1) var(--crm-m1);
 }
 #bootstrap-theme th.crm-search-result-select button.btn:hover,
 #bootstrap-theme th.crm-search-result-select button.btn:focus {
-  background: transparent;
+  background-color: color-mix(in srgb,var(--crm-c-text) 25%,transparent);
 }
 #bootstrap-theme th.crm-search-result-select button.btn i.crm-i {
   color: var(--crm-c-text);
diff --git a/ext/riverlea/streams/empty/_dark.css b/ext/riverlea/streams/empty/_dark.css
index 1cbd438d9150..0a7a8deb6aa5 100644
--- a/ext/riverlea/streams/empty/_dark.css
+++ b/ext/riverlea/streams/empty/_dark.css
@@ -1,10 +1,10 @@
 /* Minimal dark mode settings
    - delete this file if you don't want dark-mode
-   - it's generally easier to change practical colours (ie '--crm-c-page-background')
+   - it's generally easier to change practical colours (ie '--crm-c-page-bg')
      than to change the colours themesleves (ie '--crm-c-gray-900').
 */
 
 :root {
   --crm-c-text: #fff;
-  --crm-c-page-background: var(--crm-c-gray-900);
+  --crm-c-page-bg: var(--crm-c-gray-900);
 }
diff --git a/ext/riverlea/streams/empty/_variables.css b/ext/riverlea/streams/empty/_variables.css
index ff0ff01125a6..4a4023d8c093 100644
--- a/ext/riverlea/streams/empty/_variables.css
+++ b/ext/riverlea/streams/empty/_variables.css
@@ -48,7 +48,7 @@
   --crm-c-text-light: #fff;
   --crm-c-text-dark: #302f35;
   --crm-c-text: var(--crm-c-text-dark);
-  --crm-c-page-background: #fff;
+  --crm-c-page-bg: #fff;
 /* Emphasis colours, e.g. warning, danger, info '--crm-c-' */
 /* Sizes */
 /* Type */
diff --git a/ext/riverlea/streams/hackneybrook/_dark.css b/ext/riverlea/streams/hackneybrook/_dark.css
index 56e0b207a4bd..149f9233e133 100644
--- a/ext/riverlea/streams/hackneybrook/_dark.css
+++ b/ext/riverlea/streams/hackneybrook/_dark.css
@@ -3,16 +3,13 @@
   --crm-c-text: #fff;
   --crm-c-link: #f5c929;
   --crm-c-link-hover: #f2d465;
-  --crm-c-background: var(--crm-c-gray-900);
-  --crm-c-page-background: var(--crm-c-gray-900);
-  --crm-c-background2: var(--crm-c-gray-800);
-  --crm-c-background3: var(--crm-c-gray-700);
-  --crm-c-background4: var(--crm-c-gray-600);
-  --crm-c-primary: var(--crm-c-background);
+  --crm-c-layer0-bg:  var(--crm-c-gray-900);
+  --crm-c-container-bg: var(--crm-c-gray-900);
+  --crm-c-layer1-bg: var(--crm-c-gray-800);
+  --crm-c-layer2-bg: var(--crm-c-gray-700);
+  --crm-c-primary: var(--crm-c-container-bg);
   --crm-c-primary-text: var(--crm-c-text);
-  --crm-c-primary-hover: var(--crm-c-darkest);
-  --crm-c-secondary: var(--crm-c-gray-800);
-  --crm-c-secondary-hover: var(--crm-c-gray-900);
+  --crm-c-secondary: var(--crm-c-layer1-bg);
   --crm-c-inactive: var(--crm-c-gray-400);
   --crm-c-amber: #993b00;
   --crm-c-red: #b3001b;
@@ -28,23 +25,21 @@
   --crm-c-gray-200: #bdbdbd;
   --crm-c-divider: 1px solid var(--crm-c-gray-500);
   --crm-checkbox-list-bg: #665800;
-  --crm-checkbox-list-bg2: #525209;
-  --crm-checkbox-list-col: var(--crm-c-text-light);
 /* Emphasis colours */
   --crm-alert-success-bg: var(--crm-c-success);
   --crm-alert-success-text: var(--crm-c-success-text);
-  --crm-alert-success-border: hsl(from var(--crm-alert-success-bg) h s calc(l + 10));
+  --crm-alert-success-border: color-mix(in srgb, var(--crm-alert-success-bg) 90%,#fff 10%);
   --crm-c-success-on-page-bg: var(--crm-c-success-light);
   --crm-alert-warning-bg: var(--crm-c-warning);
-  --crm-alert-warning-border: hsl(from var(--crm-alert-warning-bg) h s calc(l + 10));
+  --crm-alert-warning-border: color-mix(in srgb, var(--crm-alert-warning-bg) 90%,#fff 10%);
   --crm-c-warning-on-page-bg: var(--crm-c-warning-light);
   --crm-alert-danger-bg: var(--crm-c-danger);
   --crm-alert-danger-text: var(--crm-c-danger-text);
-  --crm-alert-danger-border: hsl(from var(--crm-alert-danger-bg) h s calc(l + 10));
+  --crm-alert-danger-border: color-mix(in srgb, var(--crm-alert-danger-bg) 90%,#fff 10%);
   --crm-c-danger-on-page-bg: var(--crm-c-danger-light);
   --crm-alert-info-bg: var(--crm-c-info);
   --crm-alert-info-text: var(--crm-c-success-text);
-  --crm-alert-info-border: hsl(from var(--crm-alert-info-bg) h s calc(l + 10));
+  --crm-alert-info-border: color-mix(in srgb, var(--crm-alert-info-bg) 90%,#fff 10%);
   --crm-c-info-on-page-bg: var(--crm-c-info-light);
   --crm-c-primary-on-page-bg: var(--crm-c-gray-300);
   --crm-c-secondary-on-page-bg: #cdcdcd;
@@ -55,40 +50,39 @@
   --crm-popup-shadow: 0 3px 18px 0 rgb(0,0,0);
   --crm-heading-bg: #354b55;
   --crm-heading-col: var(--crm-c-text-light);
-  --crm-dashlet-bg: var(--crm-c-background2);
-  --crm-dashlet-header-bg: var(--crm-c-background3);
+  --crm-dashlet-bg: var(--crm-c-layer1-bg);
+  --crm-dashlet-header-bg: var(--crm-c-layer2-bg);
   --crm-dashlet-tabs-border: 0;
   --crm-btn-border: 1px solid var(--crm-c-gray-500);
-  --crm-expand-header-bg: var(--crm-c-background3);
-  --crm-expand-header-bg-active: var(--crm-c-background4);
-  --crm-expand-body-bg: var(--crm-c-background2);
+  --crm-expand-header-bg: var(--crm-c-layer2-bg);
+  --crm-expand-header-bg-active: var(--crm-c-gray-600);
+  --crm-expand-body-bg: var(--crm-c-layer1-bg);
   --crm-expand-body-border: 0;
   --crm-dash-header-bg: transparent;
-  --crm-dash-block-bg: var(--crm-c-background2);
+  --crm-dash-tab-bg-hover: var(--crm-c-layer1-bg);
+  --crm-dash-block-bg: var(--crm-c-layer1-bg);
   --crm-dash-label-bg: transparent;
-  --crm-dash-panel-bg: #414141;
-  --crm-dash-tab-bg-hover: var(--crm-c-background2);
-  --crm-dash-summary-row-bg: var(--crm-c-background);
-  --crm-dropdown-bg: var(--crm-c-background2);
-  --crm-dropdown-2-bg: var(--crm-c-background2);
-  --crm-tabs-bg: var(--crm-c-background3);
+  --crm-dash-summary-row-bg: var(--crm-c-container-bg);
+  --crm-dropdown-bg: var(--crm-c-layer1-bg);
+  --crm-dropdown-2-bg: var(--crm-c-layer1-bg);
+  --crm-tabs-bg: var(--crm-c-layer2-bg);
+  --crm-tab-bg-active: var(--crm-c-layer1-bg);
   --crm-panel-border-col: var(--crm-c-gray-500);
   --crm-input-border-color: var(--crm-c-gray-500);
-  --crm-table-odd-row: var(--crm-c-gray-800);
-  --crm-table-odd-hover: var(--crm-c-gray-700);
-  --crm-table-even-row: var(--crm-c-gray-700);
-  --crm-table-even-hover: var(--crm-c-gray-600);
+  --crm-table-row-bg: var(--crm-c-layer1-bg);
+  --crm-table-row-border: 1px solid var(--crm-c-gray-200);
+  --crm-table-row-hover: var(--crm-c-layer2-bg);
+  --crm-table-row-alternate-bg: #fff;
   --crm-input-color: var(--crm-c-text);
   --crm-input-description: var(--crm-c-gray-300);
   --crm-dialog-header-border-col: transparent;
-  --crm-dialog-header-bg: var(--crm-c-background2);
-  --crm-dialog-body-bg: var(--crm-c-background2);
-  --crm-notify-background: var(--crm-c-darkest);
+  --crm-dialog-header-bg: var(--crm-c-layer1-bg);
+  --crm-dialog-body-bg: var(--crm-c-layer1-bg);
+  --crm-notify-bg: var(--crm-c-darkest);
   --crm-notify-col: var(--crm-c-text);
   --crm-wizard-active-bg: var(--crm-c-blue-dark);
-  --crm-form-block-background: var(--crm-c-background2);
-  --crm-c-code-background: var(--crm-c-background2);
-  --crm-filter-item-background: var(--crm-c-background2);
+  --crm-c-code-bg: var(--crm-c-layer1-bg);
+  --crm-filter-item-bg: var(--crm-c-layer1-bg);
   --crm-icon-danger-color: var(--crm-notify-danger);
   --crm-icon-success-color: var(--crm-notify-success);
   --crm-icon-warning-color: var(--crm-notify-warning);
diff --git a/ext/riverlea/streams/hackneybrook/_variables.css b/ext/riverlea/streams/hackneybrook/_variables.css
index 3b6daf6bf92f..6980aee42b55 100644
--- a/ext/riverlea/streams/hackneybrook/_variables.css
+++ b/ext/riverlea/streams/hackneybrook/_variables.css
@@ -18,8 +18,7 @@
   /* Practical colours */
   --crm-c-text: #2b2b2b;
   --crm-c-divider: 1px solid var(--crm-c-gray-200);
-  --crm-c-background: var(--crm-c-gray-025); /* background to page header, often form block & dialog bg */
-  --crm-c-drag-background: var(--crm-c-background3); /* background for drag/drop regions, select2 highlight */
+  --crm-c-container-bg: var(--crm-c-gray-025);
 /* Emphasis colours */
   --crm-c-primary: var(--crm-c-gray-025);
   --crm-c-primary-text: var(--crm-c-text);
@@ -51,8 +50,6 @@
   --crm-btn-icon-bg: rgba(256,256,256,0.25);
   --crm-btn-icon-border: var(--crm-btn-border);
   --crm-btn-icon-padding: 0px;
-  /* Tables */
-  --crm-table-outside-border: var(--crm-c-divider);
   /* Accordions */
   /* .crm-accordion-bold */
   --crm-expand-header-bg: var(--crm-c-gray-200);
@@ -76,6 +73,7 @@
   --crm-tab-count-bg: var(--crm-c-blue-dark);
   --crm-tab-count-col: var(--crm-c-text-light);
   --crm-tab-border: 1px solid var(--crm-c-gray-400);
+  --crm-tab-bg-active: var(--crm-c-container-bg);
   /* Contact dashboard */
   --crm-dash-border: 0;
   --crm-dash-direction: grid; /* choose 'flex' for tabs at top, or 'grid' for tabs at side */
@@ -85,7 +83,7 @@
   --crm-dash-tabs-bg: transparent;
   --crm-dash-tabs-padding: var(--crm-r) 0;
   --crm-dash-tab-bg: transparent;
-  --crm-dash-tab-bg-hover: var(--crm-c-background);
+  --crm-dash-tab-bg-hover: var(--crm-c-container-bg);
   --crm-dash-tab-padding: var(--crm-m2) var(--crm-m1) var(--crm-m2) var(--crm-r);
   --crm-dash-tab-border: 1px solid transparent;
   --crm-dash-tab-border-hover: var(--crm-c-divider);
@@ -94,24 +92,26 @@
   --crm-dash-tab-align: right;
   --crm-dash-tab-hang: 0 -1px 0 0; /* lip to extend tab flush with active region - set to 0 for no lip */
   --crm-dash-tab-radius: var(--crm-dash-roundness) 0 0 var(--crm-dash-roundness);
-  --crm-dash-summary-row-bg: var(--crm-c-background3);
+  --crm-dash-summary-row-bg: var(--crm-c-layer2-bg);
   --crm-dash-heading-inset: var(--crm-side-tabs-width);
   --crm-dash-panel-padding: var(--crm-r);
-  --crm-dash-panel-bg: var(--crm-c-background);
+  --crm-dash-panel-bg: var(--crm-dash-tab-bg-hover);
   --crm-dash-panel-border: var(--crm-c-divider);
   --crn-dash-panel-radius: var(--crm-dash-roundness);
+
   --crm-dash-image-size: 100px;
   --crm-dash-image-radius: 200px;
   --crm-dash-image-right: 0; /* distance from right of dashboard */
   --crm-dash-image-top: -10px; /* distance from top of dashboard */
   --crm-dash-image-border: 0;
   /* Dialog */
-  --crm-dialog-header-bg: var(--crm-c-background4);
+  --crm-dialog-header-bg: var(--crm-c-gray-200);
+  --crm-dialog-header-border-col: transparent;
   --crm-dialog-header-col: var(--crm-c-text);
   --crm-dialog-header-size: var(--crm-r);
   --crm-dialog-header-padding: var(--crm-s) var(--crm-m1) var(--crm-s) var(--crm-m2);
-  --crm-dialog-header-radius: var(--crm-dialog-radius) var(--crm-dialog-radius) 0 0;
-  --crm-dialog-body-bg: var(--crm-c-page-background);
+  --crm-dialog-header-radius: var(--crm-dialog-radius);
+  --crm-dialog-body-bg: var(--crm-c-container-bg);
   --crm-dialog-body-padding: var(--crm-r);
   /* Dashlet */
   --crm-dashlet-border: var(--crm-c-divider);
@@ -120,14 +120,14 @@
   --crm-dashlet-tabs-border: 3px solid #fff;
   --crm-dashlet-radius: var(--crm-roundness) var(--crm-roundness) 0 0;
   /* Button dropdowns */
-  --crm-dropdown-bg: var(--crm-c-page-background);
+  --crm-dropdown-bg: var(--crm-c-layer0-bg);
   --crm-dropdown-col: var(--crm-c-text);
   --crm-dropdown-hover-bg: var(--crm-c-secondary-hover);
   --crm-dropdown-border: var(--crm-btn-border);
   --crm-dropdown-width: 180px;
-  --crm-dropdown-2-bg: var(--crm-c-background3);
+  --crm-dropdown-2-bg: var(--crm-c-layer2-bg);
   /* Notifications */
-  --crm-notify-background: rgb(0,0,0);
+  --crm-notify-bg: rgb(0,0,0);
   --crm-notify-padding: 10px 10px 15px 15px;
   --crm-notify-accent-border: 0 0 0 4px; /* adds a border to one/several sides of the notification - set to 0 for none */
   --crm-notify-radius: 0;
diff --git a/ext/riverlea/streams/minetta/_dark.css b/ext/riverlea/streams/minetta/_dark.css
index f6ebf3d265e1..d9ea9f6c2bbb 100644
--- a/ext/riverlea/streams/minetta/_dark.css
+++ b/ext/riverlea/streams/minetta/_dark.css
@@ -7,11 +7,12 @@
   --crm-c-primary: var(--crm-c-gray-500);
   --crm-c-primary-hover: var(--crm-c-gray-600);
   --crm-c-primary-text: var(--crm-c-text);
-  --crm-c-background: var(--crm-c-gray-900);
-  --crm-c-page-background: var(--crm-c-gray-900);
-  --crm-c-background2: var(--crm-c-gray-800);
-  --crm-c-background3: var(--crm-c-gray-700);
-  --crm-c-background4: var(--crm-c-gray-600);
+  --crm-c-layer0-bg: var(--crm-c-gray-900);
+  --crm-c-page-bg: var(--crm-c-gray-900);
+  --crm-c-container-bg: var(--crm-c-gray-800);
+  --crm-c-layer1-bg: var(--crm-c-gray-800);
+  --crm-c-layer2-bg: var(--crm-c-gray-700);
+  --crm-c-inverse-bg: var(--crm-c-gray-300);
   --crm-c-teal: #a3ebe6;
   --crm-c-gray-900: #363636;
   --crm-c-gray-800: #464646;
@@ -21,21 +22,22 @@
   --crm-c-gray-300: #e1dfdf;
   --crm-c-gray-200: #bdbdbd;
   --crm-c-divider: 1px solid var(--crm-c-gray-500);
+  --crm-c-inactive: color-mix(in srgb,var(--crm-c-text) 95%,#000 5%);
   /* Emphasis colours */
   --crm-alert-success-bg: var(--crm-c-success);
   --crm-alert-success-text: var(--crm-c-success-text);
-  --crm-alert-success-border: hsl(from var(--crm-alert-success-bg) h s calc(l + 10));
+  --crm-alert-success-border: color-mix(in srgb, var(--crm-alert-success-bg) 90%,#fff 10%);
   --crm-c-success-on-page-bg: var(--crm-c-success-light);
   --crm-alert-warning-bg: var(--crm-c-warning);
-  --crm-alert-warning-border: hsl(from var(--crm-alert-warning-bg) h s calc(l + 10));
+  --crm-alert-warning-border: color-mix(in srgb, var(--crm-alert-warning-bg) 90%,#fff 10%);
   --crm-c-warning-on-page-bg: var(--crm-c-warning-light);
   --crm-alert-danger-bg: var(--crm-c-danger);
   --crm-alert-danger-text: var(--crm-c-danger-text);
-  --crm-alert-danger-border: hsl(from var(--crm-alert-danger-bg) h s calc(l + 10));
+  --crm-alert-danger-border: color-mix(in srgb, var(--crm-alert-danger-bg) 90%,#fff 10%);
   --crm-c-danger-on-page-bg: var(--crm-c-danger-light);
   --crm-alert-info-bg: var(--crm-c-info);
   --crm-alert-info-text: var(--crm-c-success-text);
-  --crm-alert-info-border: hsl(from var(--crm-alert-info-bg) h s calc(l + 10));
+  --crm-alert-info-border: color-mix(in srgb, var(--crm-alert-info-bg) 90%,#fff 10%);
   --crm-c-info-on-page-bg: var(--crm-c-info-light);
   --crm-c-primary-on-page-bg: var(--crm-c-gray-300);
   --crm-c-secondary-on-page-bg: #cdcdcd;
@@ -44,37 +46,34 @@
   --crm-popup-shadow: 0 3px 18px 0 rgb(0,0,0);
   --crm-heading-bg: var(--crm-c-blue-dark);
   --crm-heading-col: var(--crm-c-text-light);
-  --crm-dashlet-bg: var(--crm-c-background2);
-  --crm-dashlet-header-bg: var(--crm-c-background3);
-  --crm-expand-header-bg: var(--crm-c-background3);
-  --crm-expand-header-bg-active: var(--crm-c-background4);
-  --crm-expand-body-bg: var(--crm-c-background2);
+  --crm-dashlet-bg: var(--crm-c-layer1-bg);
+  --crm-dashlet-header-bg: var(--crm-c-layer2-bg);
+  --crm-expand-header-bg: var(--crm-c-layer2-bg);
+  --crm-expand-header-bg-active: var(--crm-c-gray-600);
+  --crm-expand-body-bg: var(--crm-c-layer1-bg);
   --crm-dash-header-bg: transparent;
-  --crm-dash-block-bg: var(--crm-c-background2);
+  --crm-dash-block-bg: var(--crm-c-layer1-bg);
   --crm-dash-label-bg: transparent;
   --crm-dash-panel-bg: #414141;
-  --crm-dropdown-bg: var(--crm-c-background2);
-  --crm-dropdown-2-bg: var(--crm-c-background2);
-  --crm-tabs-border: 1px solid var(--crm-c-gray-500);
-  --crm-tabs-bg: var(--crm-c-background3);
-  --crm-table-outside-border: 1px solid var(--crm-c-gray-500);
+  --crm-dropdown-bg: var(--crm-c-layer1-bg);
+  --crm-dropdown-2-bg: var(--crm-c-layer1-bg);
+  --crm-tabs-bg: var(--crm-c-layer2-bg);
+  --crm-table-outside-border: var(--crm-c-divider);
   --crm-table-row-border: 1px solid var(--crm-c-gray-200);
+  --crm-table-row-hover: var(--crm-c-amber);
+  --crm-table-row-alternate-bg: #fff;
   --crm-panel-border-col: var(--crm-c-gray-200);
   --crm-input-border-color: var(--crm-c-gray-200);
-  --crm-table-odd-row: var(--crm-c-gray-800);
-  --crm-table-odd-hover: var(--crm-c-gray-700);
-  --crm-table-even-row: var(--crm-c-page-background);
-  --crm-table-even-hover: var(--crm-c-gray-700);
   --crm-c-inactive: var(--crm-c-gray-400);
   --crm-input-color: var(--crm-c-text);
   --crm-input-description: var(--crm-c-gray-300);
   --crm-input-radio-color: #38c4b4;
   --crm-dialog-header-border-col: transparent;
-  --crm-dialog-header-bg: var(--crm-c-background2);
-  --crm-dialog-body-bg: var(--crm-c-background2);
-  --crm-notify-background: var(--crm-c-darkest);
+  --crm-dialog-header-bg: var(--crm-c-layer1-bg);
+  --crm-dialog-body-bg: var(--crm-c-layer1-bg);
+  --crm-notify-bg: var(--crm-c-darkest);
   --crm-wizard-active-bg: var(--crm-c-dark-teal);
-  --crm-form-block-background: var(--crm-c-background2);
-  --crm-c-code-background: var(--crm-c-background2);
-  --crm-filter-item-background: var(--crm-c-background2);
+  --crm-form-block-bg: var(--crm-c-layer1-bg);
+  --crm-c-code-bg: var(--crm-c-layer1-bg);
+  --crm-filter-item-bg: var(--crm-c-layer1-bg);
 }
diff --git a/ext/riverlea/streams/minetta/_variables.css b/ext/riverlea/streams/minetta/_variables.css
index bceec0776c32..cc711f011480 100644
--- a/ext/riverlea/streams/minetta/_variables.css
+++ b/ext/riverlea/streams/minetta/_variables.css
@@ -1,9 +1,20 @@
 /*
     Name: Minetta;
-    Description: Generic CiviCRM UI, somewhat familiar to users of CiviCRM since 2014. Named after Minetta Creek, which runs under Greenwich, New York;
+    Description: Generic CiviCRM UI, somewhat familiar to users of CiviCRM since 2014. Named after Minetta Creek, which runs under Greenwich, New York. NB - variables appear here when they run diverge from a pattern that supports broader customisation;
     Riverlea version: 1.3.8;
 */
 
+:root {
+/* Tables */
+  --crm-table-outside-border: 1px solid var(--crm-c-gray-200);
+/* Alerts */
+  --crm-alert-warning-bg: var(--crm-c-yellow-light);
+/* Tabs */
+  --crm-tab-bg-hover: var(--crm-c-container-bg);
+}
+
+/* Custom CSS */
+
 .contactCardRight:has(#crm-contact-thumbnail) .float-left {
   width: calc(100% - var(--crm-flex-gap) - var(--crm-dash-image-size));
 }
diff --git a/ext/riverlea/streams/thames/_dark.css b/ext/riverlea/streams/thames/_dark.css
index 671971cfb807..6b4ca7432bc8 100644
--- a/ext/riverlea/streams/thames/_dark.css
+++ b/ext/riverlea/streams/thames/_dark.css
@@ -4,12 +4,16 @@
   --crm-c-dkblue-03: #1a292f;
   --crm-c-dkblue-04: #1e323b;
   --crm-c-dkblue-08: #2ea4ff;
-  --crm-c-background: var(--crm-c-dkblue-02);
+  --crm-c-container-bg: var(--crm-c-dkblue-02);
   --crm-dash-tabs-bg: var(--crm-c-dkblue-03);
   --crm-dash-tab-count-bg: var(--crm-c-blue-darker);
-  --crm-c-page-background: var(--crm-c-dkblue-01);
-  --crm-c-code-background: var(--crm-c-dkblue-04);
+  --crm-c-code-bg: var(--crm-c-dkblue-04);
   --crm-dashlet-bg: var(--crm-c-dkblue-02);
+  --crm-c-layer0-bg: var(--crm-c-dkblue-01);
+  --crm-c-page-bg: var(--crm-c-dkblue-01);
+  --crm-c-container-bg: var(--crm-c-dkblue-02);
+  --crm-c-layer1-bg: var(--crm-c-dkblue-03);
+  --crm-c-layer2-bg: var(--crm-c-dkblue-04);
   --crm-c-green: #335417;
   --crm-c-link: var(--crm-c-dkblue-08);
   --crm-c-link-hover: color-mix(in srgb, white, var(--crm-c-dkblue-08) 70%);
@@ -22,35 +26,34 @@
   --crm-c-text: var(--crm-c-blue-overlay2);
   --crm-tabs-bg: var(--crm-dkblue-01);
   --crm-tabs-border: var(--crm-dkblue-01);
-  --crm-c-drag-background: var(--crm-c-dkblue-04);
+  --crm-c-drag-bg: var(--crm-c-dkblue-04);
   --crm-tab-bg-active: var(--crm-c-dkblue-02);
   --crm-tab-bg-hover: var(--crm-c-dkblue-02);
   --crm-tab-bg: transparent;
   --crm-alert-success-bg: var(--crm-c-dkblue-03);
   --crm-alert-warning-bg: #383124;
-  --crm-input-background: var(--crm-c-blue-darker);
+  --crm-input-bg: var(--crm-c-blue-darker);
   --crm-inline-edit-bg: var(--crm-c-dkblue-01);
   --crm-input-color: var(--crm-c-blue); /* text */
   --crm-expand-body-bg: var(--crm-c-dkblue-03);
   --crm-expand-header-color: var(--crm-c-blue-light);
   --crm-expand-header-bg: var(--crm-c-dkblue-03);
-  --crm-c-divider: var(--crm-c-dkblue-03);
-  --crm-table-odd-row: var(--crm-c-dkblue-02);
-  --crm-table-even-row: var(--crm-c-dkblue-01);
-  --crm-table-odd-hover: var(--crm-c-dkblue-03);
-  --crm-table-even-hover: var(--crm-c-dkblue-02);
-  --crm-c-background2: var(--crm-c-dkblue-02);
-  --crm-c-background3: var(--crm-c-dkblue-02);
-  --crm-c-background4: var(--crm-c-dkblue-01);
-  --crm-panel-background: var(--crm-c-dkblue-02);
-  --crm-form-block-background: var(--crm-c-dkblue-02);
-  --crm-notify-background: var(--crm-c-dkblue-02);
+  --crm-c-divider: var(--crm-c-dkblue-04);
+  --crm-table-outside-border: var(--crm-c-divider);
+  --crm-table-row-bg: var(--crm-c-dkblue-02);
+  --crm-table-row-hover: var(--crm-c-dkblue-03);
+  --crm-table-row-alternate-bg: #fff;
+  --crm-c-layer1-bg: var(--crm-c-dkblue-02);
+  --crm-c-layer2-bg: var(--crm-c-dkblue-02);
+  --crm-panel-bg: var(--crm-c-dkblue-02);
+  --crm-form-block-bg: var(--crm-c-dkblue-02);
+  --crm-notify-bg: var(--crm-c-dkblue-02);
   --crm-expand-header-bg-active: var(--crm-c-dkblue-04);
   --crm-checkbox-list-col: var(--crm-input-label-color);
   --crm-checkbox-list-bg: var(--crm-c-dkblue-01);
-  --crm-checkbox-list-bg2: var(--crm-c-dkblue-02);
   --crm-input-description: var(--crm-input-label-color);
   --crm-filter-bg: var(--crm-c-dkblue-02);
+  --crm-dropdown-col: var(--crm-c-text);
   /* Emphasis colours */
   --crm-c-info-on-page-bg: var(--crm-c-secondary);
   --crm-c-danger-on-page-bg: var(--crm-btn-danger-bg);
@@ -106,9 +109,13 @@
   background: var(--crm-c-dkblue-01) !important;
 }
 .crm-container summary {
-  background: var(--crm-c-dkblue-03);
+  /* background: var(--crm-c-dkblue-03); */
   color: var(--crm-expand-header-color);
 }
+.crm-container summary:hover,
+.crm-container summary:focus {
+  background: var(--crm-c-blue-overlay4);
+}
 .crm-container details {
   background-color: var(--crm-c-dkblue-02);
 }
diff --git a/ext/riverlea/streams/thames/_variables.css b/ext/riverlea/streams/thames/_variables.css
index 849c7e7d38d2..f327135b4b17 100644
--- a/ext/riverlea/streams/thames/_variables.css
+++ b/ext/riverlea/streams/thames/_variables.css
@@ -60,21 +60,20 @@
   --crm-c-link: var(--crm-c-blue-dark);
   --crm-c-link-hover: var(--crm-c-blue-darker);
   --crm-c-divider: 1px solid var(--crm-c-blue-overlay); /* thames */
-  --crm-c-page-background: #f3f2ed; /* background to page body */ /* thames */
-  --crm-c-background: #f8f8f8; /* background to page header, often form block & dialog bg */ /* thames */
-  --crm-c-background2: var(--crm-c-gray-050); /* 2-5 = progressively darker backgrounds*/
-  --crm-c-background3: var(--crm-c-gray-100);
-  --crm-c-background4: var(--crm-c-gray-200);
-  --crm-c-background5: var(--crm-c-gray-700);
-  --crm-c-drag-background: var(--crm-c-blue-overlay2); /* background for drag/drop regions, select2 highlight */
-  --crm-c-code-background: var(--crm-c-blue-overlay2); /* background for code regions */
+  --crm-c-layer0-bg: #fff;
+  --crm-c-inverse-bg: var(--crm-c-gray-700);
+  --crm-c-page-bg: #f3f2ed;
+  --crm-c-container-bg: #f8f8f8;
+  --crm-c-layer1-bg: var(--crm-c-gray-050);
+  --crm-c-layer2-bg: color-mix(in srgb,var(--crm-c-layer1-bg) 90%,#000 10%);
+  --crm-c-drag-bg: var(--crm-c-blue-overlay2); /* background for drag/drop regions, select2 highlight */
+  --crm-c-code-bg: var(--crm-c-blue-overlay2); /* background for code regions */
   --crm-c-focus: var(--crm-c-blue-dark);
-  --crm-c-inactive: #696969;
   /* Emphasis colours */
   --crm-c-primary: var(--crm-c-blue-dark); /* primary button bgs */ /* thames */
   --crm-c-primary-hover: var(--crm-c-blue-darker); /* thames */
   --crm-c-primary-text: var(--crm-c-text-light);
-  --crm-c-primary-hover-text: white; /* thames */
+  --crm-c-primary-hover-text: var(--crm-c-text-light); /* thames */
   --crm-c-secondary: #c9e1f1; /* buttons */ /* thames */
   --crm-c-secondary-hover: #a1cef3; /* thames */
   --crm-c-secondary-text: var(--crm-c-blue-darker); /* thames */
@@ -173,20 +172,18 @@
 }
 :root {
 /* Tables */
-  --crm-table-outside-border: 1px solid var(--crm-c-background3);
-  --crm-table-background: var(--crm-c-page-background);
+  --crm-table-outside-border: 1px solid var(--crm-c-layer2-bg);
+  --crm-table-bg: var(--crm-c-page-bg);
   --crm-table-row-border: var(--crm-c-divider);
   --crm-table-column-border: 0 solid transparent;
   --crm-table-font-size: var(--crm-font-size);
   --crm-table-padding: var(--crm-m);
   --crm-table-header-border: 1px solid transparent;
   --crm-table-header-bottom: 2px solid var(--crm-c-gray-300);
-  --crm-table-header-bg: var(--crm-c-page-background);
+  --crm-table-header-bg: var(--crm-c-page-bg);
   --crm-table-header-txt: inherit;
-  --crm-table-even-row: var(--crm-c-background2);
-  --crm-table-even-hover: var(--crm-c-blue-overlay);
-  --crm-table-odd-row: var(--crm-c-gray-025);
-  --crm-table-odd-hover: var(--crm-c-blue-overlay);
+  --crm-table-row-bg: var(--crm-c-gray-025);
+  --crm-table-row-hover: var(--crm-c-blue-overlay);
   --crm-table-sort-col: var(--crm-c-gray-300);
   --crm-table-sort-float: left; /* 'left', 'right' or 'none' */
   --crm-table-sort-active-col: var(--crm-c-link);
@@ -194,12 +191,11 @@
   --crm-table-nested-padding: var(--crm-r) var(--crm-m);
   --crm-table-nested-head-border: 0 solid transparent;
   --crm-table-nested-border: var(--crm-c-divider);
-  --crm-table-inset-bg: var(--crm-c-background3);
+  --crm-table-inset-bg: var(--crm-c-layer2-bg);
 }
 :root {
 /* Panels */
   --crm-panel-shadow: var(--crm-block-shadow);
-  --crm-panel-background: white;
   --crm-panel-border: var(--crm-c-divider);
   --crm-panel-head-margin: 0px;
   --crm-panel-head-height: 42px;
@@ -228,7 +224,7 @@
   --crm-expand-body-padding: 0.25rem 2.8rem; /* thames */
 /* .crm-accordion-light */
   --crm-expand2-header-bg: transparent;
-  --crm-expand2-header-bg-active: var(--crm-c-background-2);
+  --crm-expand2-header-bg-active: var(--crm-c-layer2-bg);
   --crm-expand2-header-weight: normal;
   --crm-expand2-header-color: var(--crm-c-text);
   --crm-expand2-header-border: unset;
@@ -260,11 +256,9 @@
 :root {
 /* Form */
   --crm-form-block-box-shadow: var(--crm-block-shadow);
-  --crm-form-block-background: var(--crm-c-background);
   --crm-form-block-padding: var(--crm-m);
   --crm-form-block-border-radius: var(--crm-roundness);
-  --crm-input-background: white; /* thames */
-  --crm-input-background-image: linear-gradient(top, #eee 1%, #fff 15%);
+  --crm-input-bg-image: linear-gradient(top, #eee 1%, #fff 15%);
   --crm-input-color: var(--crm-c-text);
   --crm-input-border-color: #0000001a; /* thames */
   --crm-input-border-radius: 3px;
@@ -282,9 +276,7 @@
   --crm-input-description: #000000e8; /* darker for legibility */ /* thames */
   --crm-input-dropdown-icon: "\f107";
   --crm-input-radio-color: var(--crm-c-focus);
-  --crm-form-select-bg: var(--crm-c-background2);
   --crm-inline-edit-border: 0 solid transparent;
-  --crm-inline-edit-bg: var(--crm-c-background);
   --crm-fieldset-border-color: var(--crm-c-gray-400);
   --crm-fieldset-border: 1px 0 0 0;
   --crm-fieldset-padding: var(--crm-padding-reg) var(--crm-padding-small);
@@ -295,9 +287,8 @@
   --crm-tabs-padding: 0;
   --crm-tabs-border: 4px solid var(--crm-c-blue-overlay2);
   --crm-tabs-gap: var(--crm-s);
-  --crm-tab-bg: var(--crm-c-background2);
   --crm-tab-bg-hover: var(--crm-c-blue-overlay);
-  --crm-tab-bg-active: white;
+  --crm-tab-bg-active: var(--crm-c-layer0-bg);
   --crm-tab-hang: 0 0 calc(-1 * var(--crm-s)) 0; /* lip to extend tab flush with active region - set to 0 for no lip */ /* thames todo check */
   --crm-tab-padding: var(--crm-m2) var(--crm-r1) var(--crm-m); /* thames todo check */
   --crm-tab-col: var(--crm-c-text);
@@ -322,7 +313,7 @@
   --crm-dash-tabs-padding: unset; /* thames */
   --crm-dash-tab-bg: transparent;
   --crm-dash-tabs-roundness: var(--crm-dash-roundness) 0 0 var(--crm-dash-roundness);
-  --crm-dash-tab-bg-hover: white; /* thames */
+  --crm-dash-tab-bg-hover: var(--crm-c-layer0-bg); /* thames */
   --crm-dash-tab-padding: var(--crm-m2) var(--crm-r1); /* thames */
   --crm-dash-tab-border: var(--crm-dash-border); /* thames */
   --crm-dash-tab-border-hover: 0 solid transparent;
@@ -335,18 +326,17 @@
   --crm-dash-tab-hang: 0 0 -1px 0; /* lip to extend tab flush with active region - set to 0 for no lip */ /* thames */
   --crm-dash-tab-radius: 0; /* thames */
   --crm-dash-icon-size: var(--crm-r); /* thames */
-  --crm-dash-summary-row-bg: var(--crm-c-background);
   --crm-dash-box-shadow: 0; /* thames */
   --crm-dash-heading-inset: unset;
   --crm-dash-panel-padding: var(--crm-r2); /* thames */
-  --crm-dash-panel-bg: white; /* thames */
+  --crm-dash-panel-bg: var(--crm-c-layer0-bg); /* thames */
   --crm-dash-panel-border: 0;
   --crm-dash-panel-radius: 0 var(--crm-dash-roundness) var(--crm-dash-roundness) 0;
   --crm-dash-edit-border: 1px solid var(--crm-c-blue-dark); /* thames */
   --crm-dash-block-padding: var(--crm-m2); /* thames */
-  --crm-dash-block-bg: var(--crm-c-background); /* thames */
+  --crm-dash-block-bg: var(--crm-c-container-bg); /* thames */
   --crm-dash-block-radius: var(--crm-roundness);
-  --crm-dash-label-bg: var(--crm-c-background); /* thames */
+  --crm-dash-label-bg: var(--crm-c-container-bg); /* thames */
   --crm-dash-header-bg: unset; /* thames */
   --crm-dash-header-bg2: unset; /* thames */
   --crm-dash-header-col: var(--crm-c-blue-darker); /* thames */
@@ -356,7 +346,7 @@
 }
 :root {
 /* Dialog */
-  --crm-dialog-bg: var(--crm-c-page-background);
+  --crm-dialog-bg: var(--crm-c-page-bg);
   --crm-dialog-padding: 0; /* thames */
   --crm-dialog-radius: var(--crm-roundness);
   --crm-dialog-line: unset;
@@ -367,17 +357,14 @@
   --crm-dialog-header-padding: var(--crm-m1) var(--crm-r);
   --crm-dialog-header-radius: var(--crm-dialog-radius);
   --crm-dialog-header-border-col: transparent; /* thames */
-  --crm-dialog-body-bg: var(--crm-c-background);
   --crm-dialog-body-padding: var(--crm-m);
 }
 :root {
 /* Dashlet */
   --crm-dashlet-border: unset;
-  --crm-dashlet-bg: white;
   --crm-dashlet-padding: var(--crm-s2);
   --crm-dashlet-box-shadow: none;
-  --crm-dashlet-dashlets-bg: var(--crm-c-background);
-  --crm-dashlet-header-bg: white;
+  --crm-dashlet-header-bg: var(--crm-c-layer0-bg); /* Thames */
   --crm-dashlet-header-col: var(--crm-expand-header-color);
   --crm-dashlet-header-border: unset;
   --crm-dashlet-header-border-width: unset;
@@ -399,7 +386,7 @@
 /* Button dropdowns */
   --crm-dropdown-padding: var(--crm-s);
   --crm-dropdown-radius: var(--crm-roundness);
-  --crm-dropdown-bg: white; /* thames */
+  --crm-dropdown-bg: var(--crm-c-layer0-bg); /* thames */
   --crm-dropdown-col: var(--crm-c-blue-darker); /* thames */
   --crm-dropdown-hover: var(--crm-c-blue-dark); /* thames */
   --crm-dropdown-hover-bg: var(--crm-c-blue-light); /* thames */
@@ -412,7 +399,7 @@
 }
 :root {
 /* Notifications */
-  --crm-notify-background: white; /* thames */
+  --crm-notify-bg: var(--crm-c-layer0-bg); /* thames */
   --crm-notify-padding: var(--crm-m2);
   --crm-notify-col: var(--crm-c-text); /* thames */
   --crm-notify-accent-border: 0.875rem 0 0 0; /* adds a border to one/several sides of the notification - set to 0 for none */ /* thames */
@@ -446,7 +433,7 @@
   --crm-wizard-active-col: var(--crm-c-text-light);
   --crm-wizard-active-bg: var(--crm-c-link);
   --crm-wizard-border: var(--crm-c-divider);
-  --crm-wizard-bg: var(--crm-c-page-background);
+  --crm-wizard-bg: var(--crm-c-page-bg);
 }
 :root {
 /* Alpha filter */
@@ -460,7 +447,7 @@
 /* Frontend */
   --crm-f-form-width: 700px;
   --crm-f-box-shadow: var(--crm-block-shadow);
-  --crm-f-fieldset-bg: var(--crm-c-background);
+  --crm-f-fieldset-bg: var(--crm-c-container-bg);
   --crm-f-fieldset-padding: var(--crm-r);
   --crm-f-fieldset-margin: 0 0 var(--crm-padding-reg) 0;
   --crm-f-fieldset-border: 0;
diff --git a/ext/riverlea/streams/thames/css/civicrm.css b/ext/riverlea/streams/thames/css/civicrm.css
index c03879ce8445..8bfd7dd2a0db 100644
--- a/ext/riverlea/streams/thames/css/civicrm.css
+++ b/ext/riverlea/streams/thames/css/civicrm.css
@@ -1,15 +1,15 @@
 /* Only affect body colour in standalone */
 html.cms-standalone body {
-  background-color: var(--crm-c-page-background);
+  background-color: var(--crm-c-page-bg);
 }
 
 #crm-container {
   min-height: 100vh;
-  background-color: var(--crm-c-page-background);
+  background-color: var(--crm-c-page-bg);
 }
 
 .crm-container details {
-  background-color: var(--crm-expand-body-bg);
+  /* background-color: var(--crm-expand-body-bg); Removed for FormBuilder clashes */
   border: var(--crm-c-divider);
 }
 
@@ -236,7 +236,7 @@ html.cms-standalone body {
     background-color: var(--crm-c-blue-overlay);
 }
   50% {
-    background-color: var(--crm-c-page-background);
+    background-color: var(--crm-c-page-bg);
 }
   100% {
     background-color: var(--crm-c-blue-overlay);
@@ -570,7 +570,7 @@ html.crm-standalone  nav.breadcrumb>ol {
   /*issue https://lab.civicrm.org/extensions/riverlea/-/issues/102 */
   margin-left: 1rem;
   /* crmSearchAdmin applies this var as the bg here and it does not suit us. */
-  --crm-c-page-background: transparent;
+  --crm-c-page-bg: transparent;
 }
 
 /* Override _dropdowns.css */
@@ -589,7 +589,7 @@ html.crm-standalone  nav.breadcrumb>ol {
 
 /* Fix Mosaico wizard */
 .crm_wizard__tille {
-  --crm-panel-background: transparent;
+  --crm-panel-bg: transparent;
 }
 .crmb-wizard-button-right {
   gap: 1rem;
@@ -632,7 +632,7 @@ ul.crm-quickSearch-results a:active {
   min-width: 8rem;
   max-width: 13rem;
   text-align: left;
-  --crm-c-background2: transparent;
+  --crm-c-layer1-bg: transparent;
 
   .crm-status-box-msg {
     color: white;
diff --git a/ext/riverlea/streams/walbrook/_dark.css b/ext/riverlea/streams/walbrook/_dark.css
index 23f3b2307e0d..c593c0cd46d6 100755
--- a/ext/riverlea/streams/walbrook/_dark.css
+++ b/ext/riverlea/streams/walbrook/_dark.css
@@ -5,36 +5,36 @@
   --crm-c-link: var(--crm-c-amber);
   --crm-c-link-hover: var(--crm-c-amber-light);
   --crm-c-focus: var(--crm-c-link);
-  --crm-c-background: var(--crm-c-gray-900);
-  --crm-c-page-background: var(--crm-c-darkest);
-  --crm-c-code-background: var(--crm-c-background2);
-  --crm-c-background2: var(--crm-c-gray-900);
-  --crm-c-background3: var(--crm-c-gray-800);
-  --crm-c-background4: var(--crm-c-gray-700);
+  --crm-c-page-bg: var(--crm-c-darkest);
+  --crm-c-layer0-bg: var(--crm-c-darkest);
+  --crm-c-container-bg: var(--crm-c-gray-900);
+  --crm-c-layer1-bg: var(--crm-c-gray-800);
+  --crm-c-layer2-bg: var(--crm-c-gray-700);
+  --crm-c-code-bg: var(--crm-c-layer1-bg);
+  --crm-c-gray-800: #222831;
   --crm-c-gray-700: #353842;
   --crm-c-gray-600: #67676a;
   --crm-c-gray-500: #b3b3b3;
-  --crm-c-gray-800: #222831;
   --crm-c-divider: 1px solid var(--crm-c-gray-500);
 /* Emphasis colours */
   --crm-c-success: var(--crm-c-green-dark);
   --crm-alert-success-bg: var(--crm-c-success);
   --crm-alert-success-text: var(--crm-c-success-text);
-  --crm-alert-success-border: hsl(from var(--crm-alert-success-bg) h s calc(l + 10));
+  --crm-alert-success-border: color-mix(in srgb, var(--crm-alert-success-bg) 90%,#fff 10%);
   --crm-c-success-on-page-bg: var(--crm-c-success-light);
   --crm-c-warning-text: var(--crm-c-text-dark);
   --crm-alert-warning-bg: var(--crm-c-warning);
   --crm-alert-warning-text: var(--crm-c-text-dark);
-  --crm-alert-warning-border: hsl(from var(--crm-alert-warning-bg) h s calc(l + 10));
+  --crm-alert-warning-border: color-mix(in srgb, var(--crm-alert-warning-bg) 90%,#fff 10%);
   --crm-c-warning-on-page-bg: var(--crm-c-warning-light);
   --crm-alert-danger-bg: var(--crm-c-danger);
   --crm-alert-danger-text: var(--crm-c-danger-text);
-  --crm-alert-danger-border: hsl(from var(--crm-alert-danger-bg) h s calc(l + 10));
+  --crm-alert-danger-border: color-mix(in srgb, var(--crm-alert-danger-bg) 90%,#fff 10%);
   --crm-c-danger-on-page-bg: var(--crm-c-danger-light);
   --crm-c-info: var(--crm-c-blue-dark);
   --crm-alert-info-bg: var(--crm-c-info);
   --crm-alert-info-text: var(--crm-c-success-text);
-  --crm-alert-info-border: hsl(from var(--crm-alert-info-bg) h s calc(l + 10));
+  --crm-alert-info-border: color-mix(in srgb, var(--crm-alert-info-bg) 90%,#fff 10%);
   --crm-c-info-on-page-bg: var(--crm-c-info-light);
   --crm-c-primary-on-page-bg: var(--crm-c-gray-300);
   --crm-c-secondary-on-page-bg: #cdcdcd;
@@ -43,42 +43,40 @@
   --crm-popup-shadow: 0 3px 18px 0 rgb(0,0,0);
   --crm-heading-bg: var(--crm-c-secondary);
   --crm-heading-col: var(--crm-c-text-light);
-  --crm-dashlet-bg: var(--crm-c-background2);
-  --crm-dashlet-header-bg: var(--crm-c-background3);
+  --crm-dashlet-header-bg: var(--crm-c-layer1-bg);
   --crm-expand-header-bg: transparent;
   --crm-expand-header-bg-active: var(--crm-c-secondary-hover);
   --crm-expand2-header-bg: transparent;
   --crm-expand2-header-bg-active: var(--crm-c-secondary-hover);
-  --crm-expand-body-bg: var(--crm-c-background3);
+  --crm-expand-body-bg: var(--crm-c-layer1-bg);
   --crm-expand-body-border: 0;
-  --crm-dash-header-bg: var(--crm-c-background4);
-  --crm-dash-block-bg: var(--crm-c-background2);
+  --crm-dash-header-bg: var(--crm-c-layer2-bg);
+  --crm-dash-block-bg: var(--crm-c-container-bg);
   --crm-dash-label-bg: transparent;
-  --crm-dash-tabs-bg: var(--crm-c-background3);
-  --crm-dash-panel-bg: var(--crm-c-background2);
-  --crm-dash-tab-bg-hover: var(--crm-c-background4);
+  --crm-dash-tabs-bg: var(--crm-c-layer1-bg);
+  --crm-dash-panel-bg: var(--crm-c-container-bg);
+  --crm-dash-tab-bg-hover: var(--crm-c-layer2-bg);
   --crm-dash-box-shadow: inset 0 5px 18px -5px rgba(0, 0, 0, 0.75);
-  --crm-dropdown-bg: var(--crm-c-background);
-  --crm-dropdown-2-bg: var(--crm-c-background);
-  --crm-tabs-bg: var(--crm-c-background3);
+  --crm-dropdown-bg: var(--crm-c-container-bg);
+  --crm-dropdown-2-bg: var(--crm-c-container-bg);
+  --crm-tabs-bg: var(--crm-c-layer2-bg);
   --crm-panel-border-col: var(--crm-c-gray-500);
   --crm-panel-border: 1px;
-  --crm-panel-background: var(--crm-c-background);
+  --crm-panel-bg: var(--crm-c-container-bg);
   --crm-input-border-color: var(--crm-c-gray-500);
-  --crm-table-odd-row: var(--crm-c-page-background);
-  --crm-table-odd-hover: var(--crm-alert-info-border);
-  --crm-table-even-row: var(--crm-c-gray-800);
-  --crm-table-even-hover: var(--crm-alert-info-border);
+  --crm-table-row-hover: var(--crm-alert-info-border);
+  --crm-table-row-alternate-bg: #fff;
   --crm-c-inactive: var(--crm-c-gray-400);
   --crm-input-color: var(--crm-c-text);
   --crm-input-description: var(--crm-c-gray-300);
   --crm-dialog-header-border-col: transparent;
-  --crm-dialog-header-bg: var(--crm-c-background2);
-  --crm-dialog-body-bg: var(--crm-c-background2);
-  --crm-notify-background: var(--crm-c-background);
-  --crm-form-block-background: var(--crm-c-background2);
+  --crm-dialog-body-bg: var(--crm-c-container-bg);
+  --crm-notify-bg: var(--crm-c-container-bg);
+  --crm-form-block-bg: var(--crm-c-container-bg);
+  --crm-wizard-bg: var(--crm-c-container-bg);
   --crm-wizard-active-bg: var(--crm-c-primary);
   --crm-wizard-active-col: var(--crm-c-primary-text);
   --crm-dash-edit-border: 1px solid var(--crm-c-link-hover);
   --crm-filter-bg: var(--crm-c-blue-dark);
+  --crm-c-drag-bg: var(--crm-c-layer2-bg);
 }
diff --git a/ext/riverlea/streams/walbrook/_variables.css b/ext/riverlea/streams/walbrook/_variables.css
index f88ace105d3d..6e3d8a1b813a 100755
--- a/ext/riverlea/streams/walbrook/_variables.css
+++ b/ext/riverlea/streams/walbrook/_variables.css
@@ -35,10 +35,10 @@
   --crm-c-text: #34303b;
   --crm-c-link: var(--crm-c-blue-darker);
   --crm-c-link-hover: #004370;
-  --crm-c-page-background: #e8eef0; /* background to page body */
-  --crm-c-background: #fff; /* background to page header, often form block & dialog bg */
-  --crm-c-drag-background: var(--crm-c-background4); /* background for drag/drop regions, select2 highlight */
-  --crm-c-code-background: var(--crm-c-background3); /* background for code regions */
+  --crm-c-page-bg: #e8eef0;
+  --crm-c-container-bg: var(--crm-c-layer0-bg);
+  --crm-c-drag-bg: var(--crm-c-gray-200); /* background for drag/drop regions, select2 highlight */
+  --crm-c-code-bg: var(--crm-c-layer2-bg); /* bg for code blocks */
 /* Emphasis colours */
   --crm-c-primary: var(--crm-c-blue-dark);
   --crm-c-secondary: var(--crm-c-purple);
@@ -68,7 +68,7 @@
   --crm-page-padding: 0; /* Margin left/right */
 /* Type */
   --crm-link-decoration-hover: none;
-  --crm-heading-bg: var(--crm-c-background3);
+  --crm-heading-bg: var(--crm-c-layer2-bg);
   --crm-heading-col: var(--crm-c-text-dark);
   --crm-heading-padding: var(--crm-m2) var(--crm-m);
   --crm-heading-margin: 0;
@@ -80,14 +80,8 @@
   --crm-btn-small-padding: var(--crm-s1) var(--crm-m1);
   --crm-btn-height: 40px;
 /* Tables */
-  --crm-table-outside-border: var(--crm-c-divider);
-  --crm-table-background: var(--crm-c-background);
-  --crm-table-header-bottom: var(--crm-c-divider);
-  --crm-table-header-bg: var(--crm-c-background);
-  --crm-table-even-row: #fff;
-  --crm-table-odd-row: var(--crm-c-gray-050);
-  --crm-table-even-hover: var(--crm-c-gray-025);
-  --crm-table-odd-hover: var(--crm-c-gray-100);
+  --crm-table-row-bg:  var(--crm-c-container-bg);
+  --crm-table-row-hover: var(--crm-c-gray-200);
   --crm-table-sort-col: var(--crm-c-gray-500);
   --crm-table-nested-padding: 0 0 var(--crm-r) 0;
   --crm-table-nested-head-border: 2px solid var(--crm-c-gray-300);
@@ -101,8 +95,8 @@
   --crm-expand-icon-spacing: var(--crm-m3);
   --crm-expand-gap: 0;
 /* .crm-accordion-bold */
-  --crm-expand-header-bg: var(--crm-c-background2);
-  --crm-expand-header-bg-active: var(--crm-c-background3);
+  --crm-expand-header-bg: var(--crm-c-layer1-bg);
+  --crm-expand-header-bg-active: var(--crm-c-layer2-bg);
   --crm-expand-header-color: var(--crm-c-text);
   --crm-expand-header-padding: var(--crm-m2) var(--crm-m3);
   --crm-expand-border: unset;
@@ -126,8 +120,8 @@
 /* Form */
   --crm-form-block-padding: var(--crm-r);
   --crm-form-block-border-radius: 0;
-  --crm-input-background: var(--crm-c-background);
-  --crm-input-background-image: none;
+  --crm-input-bg: var(--crm-c-container-bg);
+  --crm-input-bg-image: none;
   --crm-input-color: var(--crm-c-text);
   --crm-input-border-color: #c2cfd8;
   --crm-input-border-radius: var(--crm-roundness);
@@ -140,12 +134,12 @@
   --crm-fieldset-border: 0;
   --crm-fieldset-padding: 0;
 /* Tabs */
-  --crm-tabs-bg: var(--crm-c-background2);
+  --crm-tabs-bg: var(--crm-c-layer1-bg);
   --crm-tabs-padding: var(--crm-m) var(--crm-m) 0 var(--crm-m);
   --crm-tabs-border: var(--crm-c-divider);
   --crm-tab-roundness: 2px 2px 0 0;
-  --crm-tab-bg-hover: var(--crm-c-background);
-  --crm-tab-bg-active: var(--crm-c-background);
+  --crm-tab-bg-hover:  var(--crm-c-layer0-bg);
+  --crm-tab-bg-active: var(--crm-c-container-bg);
   --crm-tab-hang: 0 0 -1px 0; /* lip to extend tab flush with active region - set to 0 for no lip */
   --crm-tab-padding: var(--crm-m2) var(--crm-r1) var(--crm-m);
   --crm-tab-weight: bold;
@@ -159,10 +153,10 @@
   --crm-side-tabs-width: 220px;
   --crm-dash-tabs-flow: column; /* choose 'row' for tabs at top, or 'column' for tabs at side */
   --crm-dash-tabs-gap: 0;
-  --crm-dash-tabs-bg: var(--crm-c-background);
+  --crm-dash-tabs-bg: var(--crm-c-container-bg);
   --crm-dash-tabs-padding: unset;
   --crm-dash-tab-bg: transparent;
-  --crm-dash-tab-bg-hover: var(--crm-c-background3);
+  --crm-dash-tab-bg-hover: var(--crm-c-layer2-bg);
   --crm-dash-tab-padding: var(--crm-r) var(--crm-r1);
   --crm-dash-tab-border: var(--crm-dash-border);
   --crm-dash-tab-border-hover: unset;
@@ -175,8 +169,8 @@
   --crm-dash-panel-padding: var(--crm-r2);
   --crm-dash-edit-border: 1px dashed var(--crm-c-gray-900);
   --crm-dash-block-padding: var(--crm-m2);
-  --crm-dash-block-bg: var(--crm-c-background);
-  --crm-dash-label-bg: var(--crm-c-background);
+  --crm-dash-block-bg: var(--crm-c-container-bg);
+  --crm-dash-label-bg: var(--crm-c-container-bg);
   --crm-dash-header-bg: var(--crm-c-gray-900);
   --crm-dash-header-bg2: var(--crm-c-gray-800);
   --crm-dash-header-col: var(--crm-c-text-light);
@@ -188,21 +182,21 @@
   --crm-dash-image-top: 30px; /* distance from top of dashboard */
   --crm-dash-image-border: 2px solid #fff;
 /* Dialog */
-  --crm-dialog-bg: var(--crm-c-background);
+  --crm-dialog-bg: var(--crm-c-container-bg);
   --crm-dialog-padding: 0;
   --crm-dialog-line: var(--crm-c-divider);
-  --crm-dialog-header-bg: var(--crm-c-background2);
+  --crm-dialog-header-bg: var(--crm-c-layer2-bg);
   --crm-dialog-header-col: var(--crm-c-text);
 /* Dashlet */
   --crm-dashlet-border: var(--crm-tab-border);
-  --crm-dashlet-bg: var(--crm-c-background);
+  --crm-dashlet-bg: var(--crm-c-container-bg);
   --crm-dashlet-padding: 0;
   --crm-dashlet-header-bg: var(--crm-c-secondary);
   --crm-dashlet-header-col: var(--crm-c-text-light);
   --crm-dashlet-header-padding: var(--crm-padding-reg);
   --crm-dashlet-tabs-border: var(--crm-tabs-border);
 /* Notifications */
-  --crm-notify-background: var(--crm-c-background);
+  --crm-notify-bg: var(--crm-c-layer0-bg);
   --crm-notify-col: var(--crm-c-text);
   --crm-notify-accent-border: 0 0 0 3px; /* adds a border to one/several sides of the notification - set to 0 for none */
   --crm-notify-danger: #d02e2e;
@@ -217,9 +211,8 @@
   --crm-wizard-angle: 20px;
   --crm-wizard-arrow-thickness: 2px;
   --crm-wizard-active-col: var(--crm-c-link);
-  --crm-wizard-active-bg: var(--crm-c-page-background);
-  --crm-wizard-border: 1px solid var(--crm-c-page-background);
-  --crm-wizard-bg: var(--crm-c-background);
+  --crm-wizard-active-bg: var(--crm-c-page-bg);
+  --crm-wizard-border: 1px solid var(--crm-c-page-bg);
 /* Frontend */
   --crm-f-fieldset-padding: var(--crm-padding-reg);
   --crm-f-legend-align: unset;