@lightspeed/design-system-css 45.1.0 → 45.2.1

package/dist/index.css

@@ -111,6 +111,116 @@
     --hs-color-border-supplementary-default: #5c83af;
     --hs-color-border-supplementary-strong: #80a8d5;
     --hs-color-select-arrows-bg: url('data:image/svg+xml,<svg width="20" height="46" xmlns="http://www.w3.org/2000/svg"><polygon fill="%23E3E4E9" points="10,0 0,10 20,10"/><polygon fill="%23E3E4E9" points="0,36 20,36 10,46 "/></svg>');
+    --ls-color-bg-neutral-inert-softer: #333337;
+    --ls-color-bg-neutral-inert-soft: #3d3d41;
+    --ls-color-bg-neutral-inert-default: #48484c;
+    --ls-color-bg-neutral-sunken: #060608;
+    --ls-color-bg-neutral-backdrop: #161619;
+    --ls-color-bg-neutral-edge: #1e1e21;
+    --ls-color-bg-neutral-top: #242427;
+    --ls-color-bg-neutral-topmost: #2f2f32;
+    --ls-color-bg-neutral-inverted-backdrop: #f1f2f7;
+    --ls-color-bg-neutral-inverted-top: white;
+    --ls-color-bg-neutral-dark-soft: #1e1e21;
+    --ls-color-bg-neutral-dark-default: black;
+    --ls-color-bg-neutral-dark-strong: black;
+    --ls-color-bg-go-highlight-default: rgba(134, 157, 255, 0.1607843137);
+    --ls-color-bg-go-highlight-strong: rgba(185, 200, 252, 0.1607843137);
+    --ls-color-bg-go-soft: #4e58fd;
+    --ls-color-bg-go-default: #3a1afe;
+    --ls-color-bg-go-strong: #2b13c7;
+    --ls-color-bg-success-highlight-default: rgba(49, 188, 84, 0.1607843137);
+    --ls-color-bg-success-highlight-strong: rgba(128, 227, 132, 0.1607843137);
+    --ls-color-bg-success-soft: #158731;
+    --ls-color-bg-success-default: #126a27;
+    --ls-color-bg-success-strong: #094f10;
+    --ls-color-bg-no-highlight-default: rgba(255, 121, 106, 0.1607843137);
+    --ls-color-bg-no-highlight-strong: rgba(255, 184, 173, 0.1607843137);
+    --ls-color-bg-no-soft: #d3202f;
+    --ls-color-bg-no-default: #aa2128;
+    --ls-color-bg-no-strong: #801617;
+    --ls-color-bg-warning-soft: #a95f22;
+    --ls-color-bg-warning-default: #854d25;
+    --ls-color-bg-warning-strong: #693a1b;
+    --ls-color-bg-warning-highlight-default: rgba(238, 134, 22, 0.1607843137);
+    --ls-color-bg-warning-highlight-strong: rgba(247, 190, 119, 0.1607843137);
+    --ls-color-bg-ai-soft: #a633cc;
+    --ls-color-bg-ai-default: #8824a9;
+    --ls-color-bg-ai-strong: #680e84;
+    --ls-color-bg-ai-highlight-default: rgba(213, 117, 249, 0.1607843137);
+    --ls-color-bg-ai-highlight-strong: rgba(231, 178, 252, 0.1607843137);
+    --ls-color-bg-supplementary-soft: #5177a2;
+    --ls-color-bg-supplementary-default: #365b85;
+    --ls-color-bg-supplementary-strong: #193f66;
+    --ls-color-bg-supplementary-highlight-default: rgba(128, 168, 213, 0.1607843137);
+    --ls-color-bg-supplementary-highlight-strong: rgba(177, 205, 238, 0.1607843137);
+    --ls-color-overlay-neutral-soft: rgba(255, 255, 255, 0.1215686275);
+    --ls-color-overlay-neutral-strong: rgba(0, 0, 0, 0.5019607843);
+    --ls-color-overlay-neutral-inverted-strong: rgba(0, 0, 0, 0.5019607843);
+    --ls-color-fg-neutral-soft: #bebec3;
+    --ls-color-fg-neutral-default: #e3e4e9;
+    --ls-color-fg-neutral-inert-soft: #747478;
+    --ls-color-fg-neutral-inert-default: #808084;
+    --ls-color-fg-neutral-dark-soft: #525256;
+    --ls-color-fg-neutral-dark-default: #1e1e21;
+    --ls-color-fg-neutral-inverted-soft: #3d3d41;
+    --ls-color-fg-neutral-inverted-default: #29292c;
+    --ls-color-fg-neutral-ondark-inert-soft: #808084;
+    --ls-color-fg-neutral-ondark-inert-default: #98989c;
+    --ls-color-fg-neutral-ondark-soft: #e3e4e9;
+    --ls-color-fg-neutral-ondark-default: white;
+    --ls-color-fg-go-soft: #768efd;
+    --ls-color-fg-go-default: #a9bbfc;
+    --ls-color-fg-go-strong: #b9c8fc;
+    --ls-color-fg-go-ondark-soft: #768efd;
+    --ls-color-fg-go-ondark-default: #a9bbfc;
+    --ls-color-fg-go-ondark-strong: #b9c8fc;
+    --ls-color-fg-success-soft: #20ae45;
+    --ls-color-fg-success-default: #65d573;
+    --ls-color-fg-success-strong: #80e384;
+    --ls-color-fg-warning-soft: #e17914;
+    --ls-color-fg-warning-default: #f7ac55;
+    --ls-color-fg-warning-strong: #f7be77;
+    --ls-color-fg-no-soft: #f96053;
+    --ls-color-fg-no-default: #ffa597;
+    --ls-color-fg-no-strong: #ffb8ad;
+    --ls-color-fg-ai-soft: #cb62f2;
+    --ls-color-fg-ai-default: #e3a0fd;
+    --ls-color-fg-ai-strong: #e7b2fc;
+    --ls-color-fg-ai-ondark-soft: #cb62f2;
+    --ls-color-fg-ai-ondark-default: #e3a0fd;
+    --ls-color-fg-ai-ondark-strong: #e7b2fc;
+    --ls-color-fg-supplementary-soft: #3C6996;
+    --ls-color-fg-supplementary-default: #5B83AC;
+    --ls-color-fg-supplementary-strong: #284563;
+    --ls-color-border-neutral-soft: #333337;
+    --ls-color-border-neutral-strong: #525256;
+    --ls-color-border-neutral-stronger: #8c8c90;
+    --ls-color-border-neutral-inverted-soft: #e3e4e9;
+    --ls-color-border-neutral-inverted-strong: #c9cacf;
+    --ls-color-border-neutral-inverted-stronger: #8c8c90;
+    --ls-color-border-neutral-ondark-soft: #48484c;
+    --ls-color-border-neutral-ondark-strong: #69696d;
+    --ls-color-border-neutral-ondark-stronger: #8c8c90;
+    --ls-color-border-go-soft: #4142fd;
+    --ls-color-border-go-default: #586cfe;
+    --ls-color-border-go-strong: #869dff;
+    --ls-color-border-success-soft: #0b7628;
+    --ls-color-border-success-default: #069638;
+    --ls-color-border-success-strong: #31bc54;
+    --ls-color-border-warning-soft: #965726;
+    --ls-color-border-warning-default: #bc6620;
+    --ls-color-border-warning-strong: #ee8616;
+    --ls-color-border-no-soft: #c01d27;
+    --ls-color-border-no-default: #ea2f37;
+    --ls-color-border-no-strong: #ff796a;
+    --ls-color-border-ai-soft: #982abb;
+    --ls-color-border-ai-default: #b440dc;
+    --ls-color-border-ai-strong: #d575f9;
+    --ls-color-border-supplementary-soft: #466c96;
+    --ls-color-border-supplementary-default: #5c83af;
+    --ls-color-border-supplementary-strong: #80a8d5;
+    --ls-color-select-arrows-bg: url('data:image/svg+xml,<svg width="20" height="46" xmlns="http://www.w3.org/2000/svg"><polygon fill="%23E3E4E9" points="10,0 0,10 20,10"/><polygon fill="%23E3E4E9" points="0,36 20,36 10,46 "/></svg>');
   }
 }
 :root {
@@ -240,6 +350,116 @@
   --hs-color-border-supplementary-default: #466c96;
   --hs-color-border-supplementary-strong: #264b73;
   --hs-color-select-arrows-bg: url('data:image/svg+xml,<svg width="20" height="46" xmlns="http://www.w3.org/2000/svg"><polygon fill="%231E1E21" points="10,0 0,10 20,10"/><polygon fill="%231E1E21" points="0,36 20,36 10,46 "/></svg>');
+  --ls-color-bg-neutral-inert-softer: #f1f2f7;
+  --ls-color-bg-neutral-inert-soft: #d6d7dc;
+  --ls-color-bg-neutral-inert-default: #b1b1b5;
+  --ls-color-bg-neutral-sunken: #e3e4e9;
+  --ls-color-bg-neutral-backdrop: #f1f2f7;
+  --ls-color-bg-neutral-edge: #e3e4e9;
+  --ls-color-bg-neutral-top: white;
+  --ls-color-bg-neutral-topmost: white;
+  --ls-color-bg-neutral-inverted-backdrop: #161619;
+  --ls-color-bg-neutral-inverted-top: #242427;
+  --ls-color-bg-neutral-dark-soft: #29292c;
+  --ls-color-bg-neutral-dark-default: #1e1e21;
+  --ls-color-bg-neutral-dark-strong: #161619;
+  --ls-color-bg-go-highlight-default: rgba(185, 200, 252, 0.1607843137);
+  --ls-color-bg-go-highlight-strong: rgba(134, 157, 255, 0.1607843137);
+  --ls-color-bg-go-soft: #4e58fd;
+  --ls-color-bg-go-default: #3a1afe;
+  --ls-color-bg-go-strong: #2b13c7;
+  --ls-color-bg-success-highlight-default: rgba(128, 227, 132, 0.1607843137);
+  --ls-color-bg-success-highlight-strong: rgba(49, 188, 84, 0.1607843137);
+  --ls-color-bg-success-soft: #158731;
+  --ls-color-bg-success-default: #126a27;
+  --ls-color-bg-success-strong: #094f10;
+  --ls-color-bg-no-highlight-default: rgba(255, 184, 173, 0.1607843137);
+  --ls-color-bg-no-highlight-strong: rgba(255, 121, 106, 0.1607843137);
+  --ls-color-bg-no-soft: #d3202f;
+  --ls-color-bg-no-default: #aa2128;
+  --ls-color-bg-no-strong: #801617;
+  --ls-color-bg-warning-soft: #a95f22;
+  --ls-color-bg-warning-default: #854d25;
+  --ls-color-bg-warning-strong: #693a1b;
+  --ls-color-bg-warning-highlight-default: rgba(247, 190, 119, 0.1607843137);
+  --ls-color-bg-warning-highlight-strong: rgba(238, 134, 22, 0.1607843137);
+  --ls-color-bg-ai-soft: #a633cc;
+  --ls-color-bg-ai-default: #8824a9;
+  --ls-color-bg-ai-strong: #680e84;
+  --ls-color-bg-ai-highlight-default: rgba(231, 178, 252, 0.1607843137);
+  --ls-color-bg-ai-highlight-strong: rgba(213, 117, 249, 0.1607843137);
+  --ls-color-bg-supplementary-soft: #5177a2;
+  --ls-color-bg-supplementary-default: #365b85;
+  --ls-color-bg-supplementary-strong: #193f66;
+  --ls-color-bg-supplementary-highlight-default: rgba(177, 205, 238, 0.1607843137);
+  --ls-color-bg-supplementary-highlight-strong: rgba(128, 168, 213, 0.1607843137);
+  --ls-color-overlay-neutral-soft: rgba(0, 0, 0, 0.0509803922);
+  --ls-color-overlay-neutral-strong: rgba(0, 0, 0, 0.5019607843);
+  --ls-color-overlay-neutral-inverted-strong: rgba(255, 255, 255, 0.5019607843);
+  --ls-color-fg-neutral-soft: #525256;
+  --ls-color-fg-neutral-default: #1e1e21;
+  --ls-color-fg-neutral-inert-soft: #a4a4a8;
+  --ls-color-fg-neutral-inert-default: #98989c;
+  --ls-color-fg-neutral-dark-soft: #525256;
+  --ls-color-fg-neutral-dark-default: #1e1e21;
+  --ls-color-fg-neutral-inverted-soft: #e3e4e9;
+  --ls-color-fg-neutral-inverted-default: white;
+  --ls-color-fg-neutral-ondark-inert-soft: #808084;
+  --ls-color-fg-neutral-ondark-inert-default: #98989c;
+  --ls-color-fg-neutral-ondark-soft: #e3e4e9;
+  --ls-color-fg-neutral-ondark-default: white;
+  --ls-color-fg-go-soft: #4e58fd;
+  --ls-color-fg-go-default: #3217e3;
+  --ls-color-fg-go-strong: #1e0796;
+  --ls-color-fg-go-ondark-soft: #768efd;
+  --ls-color-fg-go-ondark-default: #a9bbfc;
+  --ls-color-fg-go-ondark-strong: #b9c8fc;
+  --ls-color-fg-success-soft: #158731;
+  --ls-color-fg-success-default: #0f5c16;
+  --ls-color-fg-success-strong: #083a0c;
+  --ls-color-fg-warning-soft: #a95f22;
+  --ls-color-fg-warning-default: #79421d;
+  --ls-color-fg-warning-strong: #4f270c;
+  --ls-color-fg-no-soft: #d3202f;
+  --ls-color-fg-no-default: #941c1e;
+  --ls-color-fg-no-strong: #621512;
+  --ls-color-fg-ai-soft: #a633cc;
+  --ls-color-fg-ai-default: #771695;
+  --ls-color-fg-ai-strong: #4f0664;
+  --ls-color-fg-ai-ondark-soft: #cb62f2;
+  --ls-color-fg-ai-ondark-default: #e3a0fd;
+  --ls-color-fg-ai-ondark-strong: #e7b2fc;
+  --ls-color-fg-supplementary-soft: #3C6996;
+  --ls-color-fg-supplementary-default: #32577D;
+  --ls-color-fg-supplementary-strong: #284563;
+  --ls-color-border-neutral-soft: #e3e4e9;
+  --ls-color-border-neutral-strong: #c9cacf;
+  --ls-color-border-neutral-stronger: #8c8c90;
+  --ls-color-border-neutral-inverted-soft: #333337;
+  --ls-color-border-neutral-inverted-strong: #525256;
+  --ls-color-border-neutral-inverted-stronger: #8c8c90;
+  --ls-color-border-neutral-ondark-soft: #48484c;
+  --ls-color-border-neutral-ondark-strong: #69696d;
+  --ls-color-border-neutral-ondark-stronger: #8c8c90;
+  --ls-color-border-go-soft: #586cfe;
+  --ls-color-border-go-default: #4142fd;
+  --ls-color-border-go-strong: #3217e3;
+  --ls-color-border-success-soft: #069638;
+  --ls-color-border-success-default: #0b7628;
+  --ls-color-border-success-strong: #0f5c16;
+  --ls-color-border-warning-soft: #bc6620;
+  --ls-color-border-warning-default: #965726;
+  --ls-color-border-warning-strong: #79421d;
+  --ls-color-border-no-soft: #ea2f37;
+  --ls-color-border-no-default: #c01d27;
+  --ls-color-border-no-strong: #941c1e;
+  --ls-color-border-ai-soft: #b440dc;
+  --ls-color-border-ai-default: #982abb;
+  --ls-color-border-ai-strong: #771695;
+  --ls-color-border-supplementary-soft: #5c83af;
+  --ls-color-border-supplementary-default: #466c96;
+  --ls-color-border-supplementary-strong: #264b73;
+  --ls-color-select-arrows-bg: url('data:image/svg+xml,<svg width="20" height="46" xmlns="http://www.w3.org/2000/svg"><polygon fill="%231E1E21" points="10,0 0,10 20,10"/><polygon fill="%231E1E21" points="0,36 20,36 10,46 "/></svg>');
   --vd-colour--solar: #E6B03D;
   --vd-colour--mars: #ED6B44;
   --vd-colour--farout-pink: #DE3CEC;
@@ -361,6 +581,116 @@
   --hs-color-border-supplementary-default: #5c83af;
   --hs-color-border-supplementary-strong: #80a8d5;
   --hs-color-select-arrows-bg: url('data:image/svg+xml,<svg width="20" height="46" xmlns="http://www.w3.org/2000/svg"><polygon fill="%23E3E4E9" points="10,0 0,10 20,10"/><polygon fill="%23E3E4E9" points="0,36 20,36 10,46 "/></svg>');
+  --ls-color-bg-neutral-inert-softer: #333337;
+  --ls-color-bg-neutral-inert-soft: #3d3d41;
+  --ls-color-bg-neutral-inert-default: #48484c;
+  --ls-color-bg-neutral-sunken: #060608;
+  --ls-color-bg-neutral-backdrop: #161619;
+  --ls-color-bg-neutral-edge: #1e1e21;
+  --ls-color-bg-neutral-top: #242427;
+  --ls-color-bg-neutral-topmost: #2f2f32;
+  --ls-color-bg-neutral-inverted-backdrop: #f1f2f7;
+  --ls-color-bg-neutral-inverted-top: white;
+  --ls-color-bg-neutral-dark-soft: #1e1e21;
+  --ls-color-bg-neutral-dark-default: black;
+  --ls-color-bg-neutral-dark-strong: black;
+  --ls-color-bg-go-highlight-default: rgba(134, 157, 255, 0.1607843137);
+  --ls-color-bg-go-highlight-strong: rgba(185, 200, 252, 0.1607843137);
+  --ls-color-bg-go-soft: #4e58fd;
+  --ls-color-bg-go-default: #3a1afe;
+  --ls-color-bg-go-strong: #2b13c7;
+  --ls-color-bg-success-highlight-default: rgba(49, 188, 84, 0.1607843137);
+  --ls-color-bg-success-highlight-strong: rgba(128, 227, 132, 0.1607843137);
+  --ls-color-bg-success-soft: #158731;
+  --ls-color-bg-success-default: #126a27;
+  --ls-color-bg-success-strong: #094f10;
+  --ls-color-bg-no-highlight-default: rgba(255, 121, 106, 0.1607843137);
+  --ls-color-bg-no-highlight-strong: rgba(255, 184, 173, 0.1607843137);
+  --ls-color-bg-no-soft: #d3202f;
+  --ls-color-bg-no-default: #aa2128;
+  --ls-color-bg-no-strong: #801617;
+  --ls-color-bg-warning-soft: #a95f22;
+  --ls-color-bg-warning-default: #854d25;
+  --ls-color-bg-warning-strong: #693a1b;
+  --ls-color-bg-warning-highlight-default: rgba(238, 134, 22, 0.1607843137);
+  --ls-color-bg-warning-highlight-strong: rgba(247, 190, 119, 0.1607843137);
+  --ls-color-bg-ai-soft: #a633cc;
+  --ls-color-bg-ai-default: #8824a9;
+  --ls-color-bg-ai-strong: #680e84;
+  --ls-color-bg-ai-highlight-default: rgba(213, 117, 249, 0.1607843137);
+  --ls-color-bg-ai-highlight-strong: rgba(231, 178, 252, 0.1607843137);
+  --ls-color-bg-supplementary-soft: #5177a2;
+  --ls-color-bg-supplementary-default: #365b85;
+  --ls-color-bg-supplementary-strong: #193f66;
+  --ls-color-bg-supplementary-highlight-default: rgba(128, 168, 213, 0.1607843137);
+  --ls-color-bg-supplementary-highlight-strong: rgba(177, 205, 238, 0.1607843137);
+  --ls-color-overlay-neutral-soft: rgba(255, 255, 255, 0.1215686275);
+  --ls-color-overlay-neutral-strong: rgba(0, 0, 0, 0.5019607843);
+  --ls-color-overlay-neutral-inverted-strong: rgba(0, 0, 0, 0.5019607843);
+  --ls-color-fg-neutral-soft: #bebec3;
+  --ls-color-fg-neutral-default: #e3e4e9;
+  --ls-color-fg-neutral-inert-soft: #747478;
+  --ls-color-fg-neutral-inert-default: #808084;
+  --ls-color-fg-neutral-dark-soft: #525256;
+  --ls-color-fg-neutral-dark-default: #1e1e21;
+  --ls-color-fg-neutral-inverted-soft: #3d3d41;
+  --ls-color-fg-neutral-inverted-default: #29292c;
+  --ls-color-fg-neutral-ondark-inert-soft: #808084;
+  --ls-color-fg-neutral-ondark-inert-default: #98989c;
+  --ls-color-fg-neutral-ondark-soft: #e3e4e9;
+  --ls-color-fg-neutral-ondark-default: white;
+  --ls-color-fg-go-soft: #768efd;
+  --ls-color-fg-go-default: #a9bbfc;
+  --ls-color-fg-go-strong: #b9c8fc;
+  --ls-color-fg-go-ondark-soft: #768efd;
+  --ls-color-fg-go-ondark-default: #a9bbfc;
+  --ls-color-fg-go-ondark-strong: #b9c8fc;
+  --ls-color-fg-success-soft: #20ae45;
+  --ls-color-fg-success-default: #65d573;
+  --ls-color-fg-success-strong: #80e384;
+  --ls-color-fg-warning-soft: #e17914;
+  --ls-color-fg-warning-default: #f7ac55;
+  --ls-color-fg-warning-strong: #f7be77;
+  --ls-color-fg-no-soft: #f96053;
+  --ls-color-fg-no-default: #ffa597;
+  --ls-color-fg-no-strong: #ffb8ad;
+  --ls-color-fg-ai-soft: #cb62f2;
+  --ls-color-fg-ai-default: #e3a0fd;
+  --ls-color-fg-ai-strong: #e7b2fc;
+  --ls-color-fg-ai-ondark-soft: #cb62f2;
+  --ls-color-fg-ai-ondark-default: #e3a0fd;
+  --ls-color-fg-ai-ondark-strong: #e7b2fc;
+  --ls-color-fg-supplementary-soft: #3C6996;
+  --ls-color-fg-supplementary-default: #5B83AC;
+  --ls-color-fg-supplementary-strong: #284563;
+  --ls-color-border-neutral-soft: #333337;
+  --ls-color-border-neutral-strong: #525256;
+  --ls-color-border-neutral-stronger: #8c8c90;
+  --ls-color-border-neutral-inverted-soft: #e3e4e9;
+  --ls-color-border-neutral-inverted-strong: #c9cacf;
+  --ls-color-border-neutral-inverted-stronger: #8c8c90;
+  --ls-color-border-neutral-ondark-soft: #48484c;
+  --ls-color-border-neutral-ondark-strong: #69696d;
+  --ls-color-border-neutral-ondark-stronger: #8c8c90;
+  --ls-color-border-go-soft: #4142fd;
+  --ls-color-border-go-default: #586cfe;
+  --ls-color-border-go-strong: #869dff;
+  --ls-color-border-success-soft: #0b7628;
+  --ls-color-border-success-default: #069638;
+  --ls-color-border-success-strong: #31bc54;
+  --ls-color-border-warning-soft: #965726;
+  --ls-color-border-warning-default: #bc6620;
+  --ls-color-border-warning-strong: #ee8616;
+  --ls-color-border-no-soft: #c01d27;
+  --ls-color-border-no-default: #ea2f37;
+  --ls-color-border-no-strong: #ff796a;
+  --ls-color-border-ai-soft: #982abb;
+  --ls-color-border-ai-default: #b440dc;
+  --ls-color-border-ai-strong: #d575f9;
+  --ls-color-border-supplementary-soft: #466c96;
+  --ls-color-border-supplementary-default: #5c83af;
+  --ls-color-border-supplementary-strong: #80a8d5;
+  --ls-color-select-arrows-bg: url('data:image/svg+xml,<svg width="20" height="46" xmlns="http://www.w3.org/2000/svg"><polygon fill="%23E3E4E9" points="10,0 0,10 20,10"/><polygon fill="%23E3E4E9" points="0,36 20,36 10,46 "/></svg>');
 }
 
 body {
@@ -371,10 +701,10 @@ body {
   font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-size: 15px;
   line-height: normal;
-  color: var(--hs-color-fg-neutral-default);
+  color: var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
   padding: 0;
   margin: 0;
-  background-color: var(--hs-color-bg-neutral-backdrop);
+  background-color: var(--ls-color-bg-neutral-backdrop, var(--hs-color-bg-neutral-backdrop));
 }
 
 a:link {
@@ -550,19 +880,19 @@ details,
 }
 
 .vd-colour-do {
-  color: var(--hs-color-fg-go-default);
+  color: var(--ls-color-fg-go-default, var(--hs-color-fg-go-default));
 }
 
 .vd-colour-go {
-  color: var(--hs-color-fg-go-default);
+  color: var(--ls-color-fg-go-default, var(--hs-color-fg-go-default));
 }
 
 .vd-colour-no {
-  color: var(--hs-color-fg-no-default);
+  color: var(--ls-color-fg-no-default, var(--hs-color-fg-no-default));
 }
 
 .vd-colour-supplementary {
-  color: var(--hs-color-fg-supplementary-default);
+  color: var(--ls-color-fg-supplementary-default, var(--hs-color-fg-supplementary-default));
 }
 
 .vd-switch-input, .vd-radio-input, .vd-checkbox-input {
@@ -609,7 +939,7 @@ details,
 
 @keyframes vd-blink-highlight {
   20%, 70% {
-    background-color: var(--hs-color-bg-go-highlight-default);
+    background-color: var(--ls-color-bg-go-highlight-default, var(--hs-color-bg-go-highlight-default));
   }
 }
 @keyframes vd-shake {
@@ -1287,14 +1617,14 @@ details,
   position: relative;
 }
 .vd-select-container.vd-error .vd-select {
-  border-color: var(--hs-color-border-no-default);
+  border-color: var(--ls-color-border-no-default, var(--hs-color-border-no-default));
 }
 .vd-select-container.vd-error .vd-select:focus {
-  box-shadow: 0 0 3px var(--hs-color-border-no-default);
+  box-shadow: 0 0 3px var(--ls-color-border-no-default, var(--hs-color-border-no-default));
 }
 
 .vd-select {
-  color: var(--hs-color-fg-neutral-default);
+  color: var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
   font-family: lato, "Helvetica Neue", helvetica, roboto, arial, sans-serif;
   font-weight: 400;
   font-size: 15px;
@@ -1305,8 +1635,8 @@ details,
   box-sizing: border-box;
   outline: none;
   box-shadow: none;
-  background-color: var(--hs-color-bg-neutral-top);
-  border: 2px solid var(--hs-color-border-neutral-soft);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
+  border: 2px solid var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
   border-radius: 4px;
   transition-duration: 0.2s;
   transition-property: border-color, box-shadow;
@@ -1315,10 +1645,10 @@ details,
   background-repeat: no-repeat;
   background-size: 8px 20px;
   background-position: calc(100% - 14px) 10px;
-  background-image: var(--hs-color-select-arrows-bg);
+  background-image: var(--ls-color-select-arrows-bg, var(--hs-color-select-arrows-bg));
 }
 .vd-select::placeholder {
-  color: var(--hs-color-fg-supplementary-default);
+  color: var(--ls-color-fg-supplementary-default, var(--hs-color-fg-supplementary-default));
   opacity: 1;
 }
 .vd-select:placeholder-shown {
@@ -1334,14 +1664,14 @@ details,
   }
 }
 .vd-select:focus, .vd-select.vd-focus {
-  border-color: var(--hs-color-border-go-default);
-  box-shadow: 0 0 3px var(--hs-color-border-go-default);
+  border-color: var(--ls-color-border-go-default, var(--hs-color-border-go-default));
+  box-shadow: 0 0 3px var(--ls-color-border-go-default, var(--hs-color-border-go-default));
 }
 .vd-select.vd-input--error, .vd-select.vd-error, .vd-select.ng-invalid.ng-dirty, .ng-submitted .vd-select.ng-invalid {
-  border-color: var(--hs-color-border-no-default);
+  border-color: var(--ls-color-border-no-default, var(--hs-color-border-no-default));
 }
 .vd-select.vd-input--error:focus, .vd-select.vd-input--error.vd-focus, .vd-select.vd-error:focus, .vd-select.vd-error.vd-focus, .vd-select.ng-invalid.ng-dirty:focus, .vd-select.ng-invalid.ng-dirty.vd-focus, .ng-submitted .vd-select.ng-invalid:focus, .ng-submitted .vd-select.ng-invalid.vd-focus {
-  box-shadow: 0 0 3px var(--hs-color-border-no-default);
+  box-shadow: 0 0 3px var(--ls-color-border-no-default, var(--hs-color-border-no-default));
 }
 
 .vd-select-group {
@@ -1414,7 +1744,7 @@ details,
 }
 
 .vd-select-inline--placeholder {
-  color: var(--hs-color-bg-supplementary-default);
+  color: var(--ls-color-bg-supplementary-default, var(--hs-color-bg-supplementary-default));
 }
 
 .vd-select-inline-text {
@@ -1431,7 +1761,7 @@ details,
 
 .vd-input {
   cursor: text;
-  color: var(--hs-color-fg-neutral-default);
+  color: var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
   font-family: lato, "Helvetica Neue", helvetica, roboto, arial, sans-serif;
   font-weight: 400;
   font-size: 15px;
@@ -1442,14 +1772,14 @@ details,
   box-sizing: border-box;
   outline: none;
   box-shadow: none;
-  background-color: var(--hs-color-bg-neutral-top);
-  border: 2px solid var(--hs-color-border-neutral-soft);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
+  border: 2px solid var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
   border-radius: 4px;
   transition-duration: 0.2s;
   transition-property: border-color, box-shadow;
 }
 .vd-input::placeholder {
-  color: var(--hs-color-fg-supplementary-default);
+  color: var(--ls-color-fg-supplementary-default, var(--hs-color-fg-supplementary-default));
   opacity: 1;
 }
 .vd-input:placeholder-shown {
@@ -1465,20 +1795,20 @@ details,
   }
 }
 .vd-input:focus, .vd-input.vd-focus {
-  border-color: var(--hs-color-border-go-default);
-  box-shadow: 0 0 3px var(--hs-color-border-go-default);
+  border-color: var(--ls-color-border-go-default, var(--hs-color-border-go-default));
+  box-shadow: 0 0 3px var(--ls-color-border-go-default, var(--hs-color-border-go-default));
 }
 .vd-input.vd-input--error, .vd-input.vd-error, .vd-input.ng-invalid.ng-dirty, .ng-submitted .vd-input.ng-invalid {
-  border-color: var(--hs-color-border-no-default);
+  border-color: var(--ls-color-border-no-default, var(--hs-color-border-no-default));
 }
 .vd-input.vd-input--error:focus, .vd-input.vd-input--error.vd-focus, .vd-input.vd-error:focus, .vd-input.vd-error.vd-focus, .vd-input.ng-invalid.ng-dirty:focus, .vd-input.ng-invalid.ng-dirty.vd-focus, .ng-submitted .vd-input.ng-invalid:focus, .ng-submitted .vd-input.ng-invalid.vd-focus {
-  box-shadow: 0 0 3px var(--hs-color-border-no-default);
+  box-shadow: 0 0 3px var(--ls-color-border-no-default, var(--hs-color-border-no-default));
 }
 
 .vd-input-error-message-section {
   display: block;
   margin-top: 8px;
-  color: var(--hs-color-fg-no-default);
+  color: var(--ls-color-fg-no-default, var(--hs-color-fg-no-default));
   font-size: 12px;
 }
 .vd-input-error-message-section .vd-input-error-message-text {
@@ -1496,7 +1826,7 @@ details,
 .vd-input-icon {
   position: absolute;
   top: 14px;
-  color: var(--hs-color-fg-supplementary-default);
+  color: var(--ls-color-fg-supplementary-default, var(--hs-color-fg-supplementary-default));
   pointer-events: none;
 }
 
@@ -1536,10 +1866,10 @@ details,
   display: flex;
 }
 .vd-autocomplete-input-container.vd-input--error .vd-autocomplete-input, .vd-autocomplete-input-container.vd-error .vd-autocomplete-input, .vd-autocomplete-input-container.ng-invalid.ng-dirty .vd-autocomplete-input, .ng-submitted .vd-autocomplete-input-container.ng-invalid .vd-autocomplete-input {
-  border-color: var(--hs-color-border-no-default);
+  border-color: var(--ls-color-border-no-default, var(--hs-color-border-no-default));
 }
 .vd-autocomplete-input-container.vd-input--error .vd-autocomplete-input:focus, .vd-autocomplete-input-container.vd-input--error .vd-autocomplete-input.vd-focus, .vd-autocomplete-input-container.vd-error .vd-autocomplete-input:focus, .vd-autocomplete-input-container.vd-error .vd-autocomplete-input.vd-focus, .vd-autocomplete-input-container.ng-invalid.ng-dirty .vd-autocomplete-input:focus, .vd-autocomplete-input-container.ng-invalid.ng-dirty .vd-autocomplete-input.vd-focus, .ng-submitted .vd-autocomplete-input-container.ng-invalid .vd-autocomplete-input:focus, .ng-submitted .vd-autocomplete-input-container.ng-invalid .vd-autocomplete-input.vd-focus {
-  box-shadow: 0 0 3px var(--hs-color-border-no-default);
+  box-shadow: 0 0 3px var(--ls-color-border-no-default, var(--hs-color-border-no-default));
 }
 
 .vd-autocomplete-input-typeahead {
@@ -1548,7 +1878,7 @@ details,
   padding: 11px 14px;
   box-sizing: border-box;
   outline: none;
-  color: var(--hs-color-fg-neutral-default);
+  color: var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
   font-family: lato, "Helvetica Neue", helvetica, roboto, arial, sans-serif;
   font-weight: 400;
   font-size: 15px;
@@ -1557,7 +1887,7 @@ details,
   top: 1px;
   left: 1px;
   opacity: 1;
-  color: var(--hs-color-fg-supplementary-default);
+  color: var(--ls-color-fg-supplementary-default, var(--hs-color-fg-supplementary-default));
   pointer-events: none;
   user-select: none;
   text-align: left;
@@ -1565,7 +1895,7 @@ details,
   white-space: nowrap;
 }
 .vd-autocomplete-input-typeahead::placeholder {
-  color: var(--hs-color-fg-supplementary-default);
+  color: var(--ls-color-fg-supplementary-default, var(--hs-color-fg-supplementary-default));
   opacity: 1;
 }
 .vd-autocomplete-input-typeahead:placeholder-shown {
@@ -1592,10 +1922,10 @@ details,
   display: block;
 }
 .vd-autocomplete-filter.vd-input--error vd-autocomplete-multi, .vd-autocomplete-filter.vd-error vd-autocomplete-multi, .vd-autocomplete-filter.ng-invalid.ng-dirty vd-autocomplete-multi, .ng-submitted .vd-autocomplete-filter.ng-invalid vd-autocomplete-multi {
-  border-color: var(--hs-color-border-no-default);
+  border-color: var(--ls-color-border-no-default, var(--hs-color-border-no-default));
 }
 .vd-autocomplete-filter.vd-input--error vd-autocomplete-multi:focus, .vd-autocomplete-filter.vd-input--error vd-autocomplete-multi.vd-focus, .vd-autocomplete-filter.vd-error vd-autocomplete-multi:focus, .vd-autocomplete-filter.vd-error vd-autocomplete-multi.vd-focus, .vd-autocomplete-filter.ng-invalid.ng-dirty vd-autocomplete-multi:focus, .vd-autocomplete-filter.ng-invalid.ng-dirty vd-autocomplete-multi.vd-focus, .ng-submitted .vd-autocomplete-filter.ng-invalid vd-autocomplete-multi:focus, .ng-submitted .vd-autocomplete-filter.ng-invalid vd-autocomplete-multi.vd-focus {
-  box-shadow: 0 0 3px var(--hs-color-border-no-default);
+  box-shadow: 0 0 3px var(--ls-color-border-no-default, var(--hs-color-border-no-default));
 }
 
 .vd-autocomplete-filter-input-container {
@@ -1605,12 +1935,12 @@ details,
 .vd-autocomplete-filter-input-container .vd-select {
   padding-left: 34px;
   border-radius: 4px 0 0 4px;
-  border-right: 1px solid var(--hs-color-border-neutral-soft);
+  border-right: 1px solid var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
   transition: none;
 }
 .vd-autocomplete-filter-input-container .vd-lozenge-group {
   border-radius: 0 4px 4px 0;
-  border-left: 1px solid var(--hs-color-border-neutral-soft);
+  border-left: 1px solid var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
 }
 .vd-autocomplete-filter-input-container vd-autocomplete-multi {
   width: 100%;
@@ -1628,26 +1958,26 @@ details,
 
 .vd-autocomplete-select-placeholder {
   box-shadow: none;
-  background-color: var(--hs-color-bg-neutral-top);
-  border: 2px solid var(--hs-color-border-neutral-soft);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
+  border: 2px solid var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
   border-radius: 4px;
   transition-duration: 0.2s;
   transition-property: border-color, box-shadow;
-  border-right: 1px solid var(--hs-color-border-neutral-soft);
+  border-right: 1px solid var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
   border-radius: 4px 0 0 4px;
   padding: 11px;
   padding-left: 34px;
   text-transform: capitalize;
 }
 .vd-autocomplete-select-placeholder:focus, .vd-autocomplete-select-placeholder.vd-focus {
-  border-color: var(--hs-color-border-go-default);
-  box-shadow: 0 0 3px var(--hs-color-border-go-default);
+  border-color: var(--ls-color-border-go-default, var(--hs-color-border-go-default));
+  box-shadow: 0 0 3px var(--ls-color-border-go-default, var(--hs-color-border-go-default));
 }
 .vd-autocomplete-select-placeholder.vd-input--error, .vd-autocomplete-select-placeholder.vd-error, .vd-autocomplete-select-placeholder.ng-invalid.ng-dirty, .ng-submitted .vd-autocomplete-select-placeholder.ng-invalid {
-  border-color: var(--hs-color-border-no-default);
+  border-color: var(--ls-color-border-no-default, var(--hs-color-border-no-default));
 }
 .vd-autocomplete-select-placeholder.vd-input--error:focus, .vd-autocomplete-select-placeholder.vd-input--error.vd-focus, .vd-autocomplete-select-placeholder.vd-error:focus, .vd-autocomplete-select-placeholder.vd-error.vd-focus, .vd-autocomplete-select-placeholder.ng-invalid.ng-dirty:focus, .vd-autocomplete-select-placeholder.ng-invalid.ng-dirty.vd-focus, .ng-submitted .vd-autocomplete-select-placeholder.ng-invalid:focus, .ng-submitted .vd-autocomplete-select-placeholder.ng-invalid.vd-focus {
-  box-shadow: 0 0 3px var(--hs-color-border-no-default);
+  box-shadow: 0 0 3px var(--ls-color-border-no-default, var(--hs-color-border-no-default));
 }
 
 .vd-autocomplete-filter-icon {
@@ -1655,7 +1985,7 @@ details,
   z-index: 1;
   margin-left: 14px;
   margin-top: 14px;
-  color: var(--hs-color-fg-supplementary-default);
+  color: var(--ls-color-fg-supplementary-default, var(--hs-color-fg-supplementary-default));
 }
 
 .vd-autocomplete-filter-button-label {
@@ -1667,7 +1997,7 @@ details,
   align-items: center;
   justify-content: space-between;
   min-height: 45px;
-  background-color: var(--hs-color-bg-neutral-edge);
+  background-color: var(--ls-color-bg-neutral-edge, var(--hs-color-bg-neutral-edge));
 }
 @media only screen and (max-width: 768px) {
   .vd-action-bar {
@@ -1698,7 +2028,7 @@ details,
 }
 
 .vd-avatar {
-  background-color: var(--hs-color-bg-neutral-edge);
+  background-color: var(--ls-color-bg-neutral-edge, var(--hs-color-bg-neutral-edge));
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
@@ -1721,10 +2051,10 @@ details,
 .vd-avatar.vd-avatar--deleted-image {
   opacity: 0.35;
   filter: grayscale(100%);
-  background-color: var(--hs-color-bg-no-default);
+  background-color: var(--ls-color-bg-no-default, var(--hs-color-bg-no-default));
 }
 .vd-avatar .deleted-state-icon {
-  color: var(--hs-color-bg-neutral-top);
+  color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
 }
 
 .vd-avatar--initials {
@@ -1739,7 +2069,7 @@ details,
   font-weight: 700;
   word-wrap: normal;
   word-break: normal;
-  color: var(--hs-color-fg-neutral-ondark-default);
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
   text-align: center;
 }
 .vd-avatar--initials.vd-avatar--x-small {
@@ -1801,7 +2131,7 @@ details,
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
-  background-color: var(--hs-color-bg-neutral-edge);
+  background-color: var(--ls-color-bg-neutral-edge, var(--hs-color-bg-neutral-edge));
   position: relative;
 }
 .vd-avatar-multi-tile:only-child {
@@ -1815,7 +2145,7 @@ details,
 }
 
 .vd-avatar-multi-tile--remainder {
-  background-color: var(--hs-color-border-neutral-strong);
+  background-color: var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
 }
 
 .vd-avatar-multi-count {
@@ -1872,8 +2202,8 @@ details,
 
 .vd-banner--info,
 .vd-banner--activation {
-  background-color: var(--hs-color-bg-supplementary-default);
-  color: var(--hs-color-fg-neutral-ondark-default);
+  background-color: var(--ls-color-bg-supplementary-default, var(--hs-color-bg-supplementary-default));
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
   border: none;
   border-left: none;
   border-right: none;
@@ -1888,13 +2218,13 @@ details,
 .vd-banner--activation .vd-link:visited,
 .vd-banner--activation .vd-btn--link,
 .vd-banner--activation .vd-btn--link:hover {
-  color: var(--hs-color-fg-neutral-ondark-default);
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
   text-decoration: underline;
 }
 
 .vd-banner--negative {
-  background-color: var(--hs-color-bg-no-default);
-  color: var(--hs-color-fg-neutral-ondark-default);
+  background-color: var(--ls-color-bg-no-default, var(--hs-color-bg-no-default));
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
   border: none;
   border-left: none;
   border-right: none;
@@ -1904,13 +2234,13 @@ details,
 .vd-banner--negative .vd-link:visited,
 .vd-banner--negative .vd-btn--link,
 .vd-banner--negative .vd-btn--link:hover {
-  color: var(--hs-color-fg-neutral-ondark-default);
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
   text-decoration: underline;
 }
 
 .vd-banner--success {
-  background-color: var(--hs-color-bg-success-default);
-  color: var(--hs-color-fg-neutral-ondark-default);
+  background-color: var(--ls-color-bg-success-default, var(--hs-color-bg-success-default));
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
   border: none;
   border-left: none;
   border-right: none;
@@ -1920,7 +2250,7 @@ details,
 .vd-banner--success .vd-link:visited,
 .vd-banner--success .vd-btn--link,
 .vd-banner--success .vd-btn--link:hover {
-  color: var(--hs-color-fg-neutral-ondark-default);
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
   text-decoration: underline;
 }
 
@@ -1945,7 +2275,7 @@ details,
 }
 
 .vd-bg--upsell {
-  background: var(--hs-color-bg-neutral-backdrop) url("//vendfrontendassets.freetls.fastly.net/images/backgrounds/dashboard-upsell-bg-v1.svg");
+  background: var(--ls-color-bg-neutral-backdrop, var(--hs-color-bg-neutral-backdrop)) url("//vendfrontendassets.freetls.fastly.net/images/backgrounds/dashboard-upsell-bg-v1.svg");
 }
 
 .vd-body {
@@ -2000,234 +2330,234 @@ a.vd-btn.disabled {
 }
 
 .vd-btn--do {
-  background-color: var(--hs-color-bg-go-default);
-  color: var(--hs-color-fg-neutral-ondark-default);
+  background-color: var(--ls-color-bg-go-default, var(--hs-color-bg-go-default));
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
 }
 @media (hover: hover) {
   .vd-btn--do:hover {
-    color: var(--hs-color-fg-neutral-ondark-default);
-    background-color: var(--hs-color-bg-go-soft);
+    color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
+    background-color: var(--ls-color-bg-go-soft, var(--hs-color-bg-go-soft));
   }
 }
 .vd-btn--do:active, .vd-btn--do.vd-btn--active {
-  color: var(--hs-color-fg-neutral-ondark-default);
-  background-color: var(--hs-color-bg-go-strong);
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
+  background-color: var(--ls-color-bg-go-strong, var(--hs-color-bg-go-strong));
 }
 .vd-btn--do:focus {
-  outline: 1px solid var(--hs-color-bg-go-soft);
+  outline: 1px solid var(--ls-color-bg-go-soft, var(--hs-color-bg-go-soft));
   outline-offset: 2px;
 }
 
 .vd-btn--icon-do {
   background-color: transparent;
   padding: 12px 14px;
-  color: var(--hs-color-fg-supplementary-default);
+  color: var(--ls-color-fg-supplementary-default, var(--hs-color-fg-supplementary-default));
 }
 @media (hover: hover) {
   .vd-btn--icon-do:hover {
-    color: var(--hs-color-fg-neutral-ondark-default);
-    background-color: var(--hs-color-bg-go-default);
+    color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
+    background-color: var(--ls-color-bg-go-default, var(--hs-color-bg-go-default));
   }
 }
 .vd-btn--icon-do:active, .vd-btn--icon-do.vd-btn--active {
-  color: var(--hs-color-fg-neutral-ondark-default);
-  background-color: var(--hs-color-bg-go-strong);
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
+  background-color: var(--ls-color-bg-go-strong, var(--hs-color-bg-go-strong));
 }
 .vd-btn--icon-do:focus {
-  outline: 1px solid var(--hs-color-bg-go-soft);
+  outline: 1px solid var(--ls-color-bg-go-soft, var(--hs-color-bg-go-soft));
   outline-offset: 2px;
 }
 
 .vd-btn--text-do {
   background-color: transparent;
-  color: var(--hs-color-fg-go-default);
+  color: var(--ls-color-fg-go-default, var(--hs-color-fg-go-default));
 }
 @media (hover: hover) {
   .vd-btn--text-do:hover {
-    color: var(--hs-color-fg-neutral-ondark-default);
-    background-color: var(--hs-color-bg-go-default);
+    color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
+    background-color: var(--ls-color-bg-go-default, var(--hs-color-bg-go-default));
   }
 }
 .vd-btn--text-do:active, .vd-btn--text-do.vd-btn--active {
-  color: var(--hs-color-fg-neutral-ondark-default);
-  background-color: var(--hs-color-bg-go-strong);
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
+  background-color: var(--ls-color-bg-go-strong, var(--hs-color-bg-go-strong));
 }
 .vd-btn--text-do:focus {
-  outline: 1px solid var(--hs-color-bg-go-soft);
+  outline: 1px solid var(--ls-color-bg-go-soft, var(--hs-color-bg-go-soft));
   outline-offset: 2px;
 }
 
 .vd-btn--supplementary {
-  background-color: var(--hs-color-bg-supplementary-default);
-  color: var(--hs-color-fg-neutral-ondark-default);
+  background-color: var(--ls-color-bg-supplementary-default, var(--hs-color-bg-supplementary-default));
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
 }
 @media (hover: hover) {
   .vd-btn--supplementary:hover {
-    color: var(--hs-color-fg-neutral-ondark-default);
-    background-color: var(--hs-color-bg-supplementary-soft);
+    color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
+    background-color: var(--ls-color-bg-supplementary-soft, var(--hs-color-bg-supplementary-soft));
   }
 }
 .vd-btn--supplementary:active, .vd-btn--supplementary.vd-btn--active {
-  color: var(--hs-color-fg-neutral-ondark-default);
-  background-color: var(--hs-color-bg-supplementary-strong);
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
+  background-color: var(--ls-color-bg-supplementary-strong, var(--hs-color-bg-supplementary-strong));
 }
 .vd-btn--supplementary:focus {
-  outline: 1px solid var(--hs-color-bg-supplementary-soft);
+  outline: 1px solid var(--ls-color-bg-supplementary-soft, var(--hs-color-bg-supplementary-soft));
   outline-offset: 2px;
 }
 
 .vd-btn--icon-supplementary {
   background-color: transparent;
   padding: 12px 14px;
-  color: var(--hs-color-fg-supplementary-default);
+  color: var(--ls-color-fg-supplementary-default, var(--hs-color-fg-supplementary-default));
 }
 @media (hover: hover) {
   .vd-btn--icon-supplementary:hover {
-    color: var(--hs-color-fg-neutral-ondark-default);
-    background-color: var(--hs-color-bg-supplementary-default);
+    color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
+    background-color: var(--ls-color-bg-supplementary-default, var(--hs-color-bg-supplementary-default));
   }
 }
 .vd-btn--icon-supplementary:active, .vd-btn--icon-supplementary.vd-btn--active {
-  color: var(--hs-color-fg-neutral-ondark-default);
-  background-color: var(--hs-color-bg-supplementary-strong);
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
+  background-color: var(--ls-color-bg-supplementary-strong, var(--hs-color-bg-supplementary-strong));
 }
 .vd-btn--icon-supplementary:focus {
-  outline: 1px solid var(--hs-color-bg-supplementary-soft);
+  outline: 1px solid var(--ls-color-bg-supplementary-soft, var(--hs-color-bg-supplementary-soft));
   outline-offset: 2px;
 }
 
 .vd-btn--text-supplementary {
   background-color: transparent;
-  color: var(--hs-color-fg-supplementary-default);
+  color: var(--ls-color-fg-supplementary-default, var(--hs-color-fg-supplementary-default));
 }
 @media (hover: hover) {
   .vd-btn--text-supplementary:hover {
-    color: var(--hs-color-fg-neutral-ondark-default);
-    background-color: var(--hs-color-bg-supplementary-default);
+    color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
+    background-color: var(--ls-color-bg-supplementary-default, var(--hs-color-bg-supplementary-default));
   }
 }
 .vd-btn--text-supplementary:active, .vd-btn--text-supplementary.vd-btn--active {
-  color: var(--hs-color-fg-neutral-ondark-default);
-  background-color: var(--hs-color-bg-supplementary-strong);
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
+  background-color: var(--ls-color-bg-supplementary-strong, var(--hs-color-bg-supplementary-strong));
 }
 .vd-btn--text-supplementary:focus {
-  outline: 1px solid var(--hs-color-bg-supplementary-soft);
+  outline: 1px solid var(--ls-color-bg-supplementary-soft, var(--hs-color-bg-supplementary-soft));
   outline-offset: 2px;
 }
 
 .vd-btn--no {
-  background-color: var(--hs-color-bg-no-default);
-  color: var(--hs-color-fg-neutral-ondark-default);
+  background-color: var(--ls-color-bg-no-default, var(--hs-color-bg-no-default));
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
 }
 @media (hover: hover) {
   .vd-btn--no:hover {
-    color: var(--hs-color-fg-neutral-ondark-default);
-    background-color: var(--hs-color-bg-no-soft);
+    color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
+    background-color: var(--ls-color-bg-no-soft, var(--hs-color-bg-no-soft));
   }
 }
 .vd-btn--no:active, .vd-btn--no.vd-btn--active {
-  color: var(--hs-color-fg-neutral-ondark-default);
-  background-color: var(--hs-color-bg-no-strong);
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
+  background-color: var(--ls-color-bg-no-strong, var(--hs-color-bg-no-strong));
 }
 .vd-btn--no:focus {
-  outline: 1px solid var(--hs-color-bg-no-soft);
+  outline: 1px solid var(--ls-color-bg-no-soft, var(--hs-color-bg-no-soft));
   outline-offset: 2px;
 }
 
 .vd-btn--icon-no {
   background-color: transparent;
   padding: 12px 14px;
-  color: var(--hs-color-fg-supplementary-default);
+  color: var(--ls-color-fg-supplementary-default, var(--hs-color-fg-supplementary-default));
 }
 @media (hover: hover) {
   .vd-btn--icon-no:hover {
-    color: var(--hs-color-fg-neutral-ondark-default);
-    background-color: var(--hs-color-bg-no-default);
+    color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
+    background-color: var(--ls-color-bg-no-default, var(--hs-color-bg-no-default));
   }
 }
 .vd-btn--icon-no:active, .vd-btn--icon-no.vd-btn--active {
-  color: var(--hs-color-fg-neutral-ondark-default);
-  background-color: var(--hs-color-bg-no-strong);
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
+  background-color: var(--ls-color-bg-no-strong, var(--hs-color-bg-no-strong));
 }
 .vd-btn--icon-no:focus {
-  outline: 1px solid var(--hs-color-bg-no-soft);
+  outline: 1px solid var(--ls-color-bg-no-soft, var(--hs-color-bg-no-soft));
   outline-offset: 2px;
 }
 
 .vd-btn--text-no {
   background-color: transparent;
-  color: var(--hs-color-fg-no-default);
+  color: var(--ls-color-fg-no-default, var(--hs-color-fg-no-default));
 }
 @media (hover: hover) {
   .vd-btn--text-no:hover {
-    color: var(--hs-color-fg-neutral-ondark-default);
-    background-color: var(--hs-color-bg-no-default);
+    color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
+    background-color: var(--ls-color-bg-no-default, var(--hs-color-bg-no-default));
   }
 }
 .vd-btn--text-no:active, .vd-btn--text-no.vd-btn--active {
-  color: var(--hs-color-fg-neutral-ondark-default);
-  background-color: var(--hs-color-bg-no-strong);
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
+  background-color: var(--ls-color-bg-no-strong, var(--hs-color-bg-no-strong));
 }
 .vd-btn--text-no:focus {
-  outline: 1px solid var(--hs-color-bg-no-soft);
+  outline: 1px solid var(--ls-color-bg-no-soft, var(--hs-color-bg-no-soft));
   outline-offset: 2px;
 }
 
 .vd-btn--go {
-  background-color: var(--hs-color-bg-go-default);
-  color: var(--hs-color-fg-neutral-ondark-default);
+  background-color: var(--ls-color-bg-go-default, var(--hs-color-bg-go-default));
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
 }
 @media (hover: hover) {
   .vd-btn--go:hover {
-    color: var(--hs-color-fg-neutral-ondark-default);
-    background-color: var(--hs-color-bg-go-soft);
+    color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
+    background-color: var(--ls-color-bg-go-soft, var(--hs-color-bg-go-soft));
   }
 }
 .vd-btn--go:active, .vd-btn--go.vd-btn--active {
-  color: var(--hs-color-fg-neutral-ondark-default);
-  background-color: var(--hs-color-bg-go-strong);
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
+  background-color: var(--ls-color-bg-go-strong, var(--hs-color-bg-go-strong));
 }
 .vd-btn--go:focus {
-  outline: 1px solid var(--hs-color-bg-go-soft);
+  outline: 1px solid var(--ls-color-bg-go-soft, var(--hs-color-bg-go-soft));
   outline-offset: 2px;
 }
 
 .vd-btn--icon-go {
   background-color: transparent;
   padding: 12px 14px;
-  color: var(--hs-color-fg-go-default);
+  color: var(--ls-color-fg-go-default, var(--hs-color-fg-go-default));
 }
 @media (hover: hover) {
   .vd-btn--icon-go:hover {
-    color: var(--hs-color-fg-neutral-ondark-default);
-    background-color: var(--hs-color-bg-go-default);
+    color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
+    background-color: var(--ls-color-bg-go-default, var(--hs-color-bg-go-default));
   }
 }
 .vd-btn--icon-go:active, .vd-btn--icon-go.vd-btn--active {
-  color: var(--hs-color-fg-neutral-ondark-default);
-  background-color: var(--hs-color-bg-go-strong);
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
+  background-color: var(--ls-color-bg-go-strong, var(--hs-color-bg-go-strong));
 }
 .vd-btn--icon-go:focus {
-  outline: 1px solid var(--hs-color-bg-go-soft);
+  outline: 1px solid var(--ls-color-bg-go-soft, var(--hs-color-bg-go-soft));
   outline-offset: 2px;
 }
 
 .vd-btn--text-go {
   background-color: transparent;
-  color: var(--hs-color-fg-go-default);
+  color: var(--ls-color-fg-go-default, var(--hs-color-fg-go-default));
 }
 @media (hover: hover) {
   .vd-btn--text-go:hover {
-    color: var(--hs-color-fg-neutral-ondark-default);
-    background-color: var(--hs-color-bg-go-default);
+    color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
+    background-color: var(--ls-color-bg-go-default, var(--hs-color-bg-go-default));
   }
 }
 .vd-btn--text-go:active, .vd-btn--text-go.vd-btn--active {
-  color: var(--hs-color-fg-neutral-ondark-default);
-  background-color: var(--hs-color-bg-go-strong);
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
+  background-color: var(--ls-color-bg-go-strong, var(--hs-color-bg-go-strong));
 }
 .vd-btn--text-go:focus {
-  outline: 1px solid var(--hs-color-bg-go-soft);
+  outline: 1px solid var(--ls-color-bg-go-soft, var(--hs-color-bg-go-soft));
   outline-offset: 2px;
 }
 
@@ -2243,7 +2573,7 @@ a.vd-btn.disabled {
   text-decoration: underline;
 }
 .vd-btn--link:hover, .vd-btn--link:focus {
-  color: var(--hs-color-fg-go-default);
+  color: var(--ls-color-fg-go-default, var(--hs-color-fg-go-default));
 }
 
 .vd-btn--jumbo {
@@ -2285,11 +2615,11 @@ a.vd-btn.disabled {
   line-height: 1.3333333333;
   font-weight: 700;
   align-items: center;
-  background-color: var(--hs-color-bg-neutral-top);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
   border-radius: 4px;
-  border: 2px solid var(--hs-color-border-neutral-soft);
+  border: 2px solid var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
   box-sizing: border-box;
-  color: var(--hs-color-fg-neutral-default);
+  color: var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
   cursor: pointer;
   display: flex;
   flex-direction: column;
@@ -2312,23 +2642,23 @@ a.vd-btn.disabled {
   filter: grayscale(100%);
 }
 .vd-btn-panel:focus {
-  border-color: var(--hs-color-border-go-default);
+  border-color: var(--ls-color-border-go-default, var(--hs-color-border-go-default));
 }
 .vd-btn-panel:hover {
-  border-color: var(--hs-color-bg-go-soft);
+  border-color: var(--ls-color-bg-go-soft, var(--hs-color-bg-go-soft));
 }
 .vd-btn-panel:active {
-  background-color: var(--hs-color-bg-neutral-edge);
+  background-color: var(--ls-color-bg-neutral-edge, var(--hs-color-bg-neutral-edge));
 }
 
 .vd-btn-panel--selected {
-  border-color: var(--hs-color-border-go-default);
+  border-color: var(--ls-color-border-go-default, var(--hs-color-border-go-default));
 }
 .vd-btn-panel--selected:focus, .vd-btn-panel--selected:hover {
-  border-color: var(--hs-color-bg-go-soft);
+  border-color: var(--ls-color-bg-go-soft, var(--hs-color-bg-go-soft));
 }
 .vd-btn-panel--selected:active {
-  border-color: var(--hs-color-bg-go-strong);
+  border-color: var(--ls-color-bg-go-strong, var(--hs-color-bg-go-strong));
 }
 
 .vd-btn-panel-group {
@@ -2357,8 +2687,8 @@ a.vd-btn.disabled {
 }
 
 .vd-card {
-  border: 2px solid var(--hs-color-border-neutral-soft);
-  background-color: var(--hs-color-bg-neutral-top);
+  border: 2px solid var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
   border-radius: 5px;
 }
 .vd-card.vd-card--active {
@@ -2372,7 +2702,7 @@ a.vd-btn.disabled {
   right: 1em;
   content: "";
   bottom: 0;
-  box-shadow: 0 0.1em 4em 0 var(--hs-color-overlay-neutral-strong);
+  box-shadow: 0 0.1em 4em 0 var(--ls-color-overlay-neutral-strong, var(--hs-color-overlay-neutral-strong));
 }
 
 vd-carousel {
@@ -2456,7 +2786,7 @@ vd-carousel-frame {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  background-color: var(--hs-color-bg-neutral-top);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
   height: 72px;
 }
 
@@ -2484,11 +2814,11 @@ vd-carousel-frame {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background-color: var(--hs-color-border-neutral-strong);
+  background-color: var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
 }
 
 .vd-carousel-paginator-indicator--active::before {
-  background-color: var(--hs-color-bg-go-default);
+  background-color: var(--ls-color-bg-go-default, var(--hs-color-bg-go-default));
 }
 
 @keyframes vd-checkbox-checked {
@@ -2574,8 +2904,8 @@ vd-carousel-frame {
   position: relative;
   height: 24px;
   width: 24px;
-  background-color: var(--hs-color-bg-neutral-top);
-  border: 2px solid var(--hs-color-border-neutral-strong);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
+  border: 2px solid var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
   border-radius: 4px;
   box-sizing: border-box;
 }
@@ -2584,9 +2914,9 @@ vd-carousel-frame {
   box-sizing: content-box;
   display: block;
   position: absolute;
-  border-right: 4px solid var(--hs-color-border-neutral-strong);
-  border-top: 4px solid var(--hs-color-border-neutral-strong);
-  border-color: var(--hs-color-border-neutral-strong);
+  border-right: 4px solid var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
+  border-top: 4px solid var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
+  border-color: var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
   transform: scaleX(-1) rotate(135deg);
   transform-origin: left top;
   height: 11px;
@@ -2602,19 +2932,19 @@ vd-carousel-frame {
 }
 
 .vd-checkbox-input:focus-visible + .vd-checkbox-tick {
-  outline: 1px solid var(--hs-color-bg-go-soft);
+  outline: 1px solid var(--ls-color-bg-go-soft, var(--hs-color-bg-go-soft));
   outline-offset: 2px;
 }
 
 .vd-checkbox-input:checked + .vd-checkbox-tick {
   transition: background-color 0.8s;
-  background-color: var(--hs-color-bg-go-default);
-  border-color: var(--hs-color-bg-go-default);
+  background-color: var(--ls-color-bg-go-default, var(--hs-color-bg-go-default));
+  border-color: var(--ls-color-bg-go-default, var(--hs-color-bg-go-default));
 }
 .vd-checkbox-input:checked + .vd-checkbox-tick::after {
   opacity: 1;
   animation: vd-checkbox-checked 0.8s;
-  border-color: var(--hs-color-fg-neutral-ondark-default);
+  border-color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
   box-sizing: content-box;
   backface-visibility: hidden;
 }
@@ -2639,11 +2969,11 @@ vd-carousel-frame {
 }
 
 .vd-checkbox--mixed .vd-checkbox-tick {
-  border: 2px solid var(--hs-color-bg-go-default);
+  border: 2px solid var(--ls-color-bg-go-default, var(--hs-color-bg-go-default));
 }
 
 .vd-checkbox--mixed .vd-checkbox-input:not(:checked) + .vd-checkbox-tick::after {
-  background-color: var(--hs-color-bg-go-default);
+  background-color: var(--ls-color-bg-go-default, var(--hs-color-bg-go-default));
   border: none;
   top: 9px;
   left: 6px;
@@ -2727,7 +3057,7 @@ vd-carousel-frame {
   box-sizing: border-box;
   margin: 0 auto;
   padding: var(--vd-dialog-spacing);
-  background: var(--hs-color-bg-neutral-top);
+  background: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
   border-radius: 4px;
   display: flex;
   flex-direction: column;
@@ -2814,7 +3144,7 @@ vd-carousel-frame {
   width: 40px;
   margin: 20px auto 0;
   border: none;
-  border-top: 1px solid var(--hs-color-border-neutral-strong);
+  border-top: 1px solid var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
 }
 
 .vd-dialog-content {
@@ -2868,9 +3198,9 @@ vd-carousel-frame {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--hs-color-bg-neutral-top);
+  background: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
   border-radius: 50%;
-  color: var(--hs-color-fg-supplementary-default);
+  color: var(--ls-color-fg-supplementary-default, var(--hs-color-fg-supplementary-default));
   padding: 10px;
   text-decoration: none;
   border: 0;
@@ -2886,15 +3216,15 @@ vd-carousel-frame {
 }
 .vd-dialog-close:focus {
   outline: 0;
-  box-shadow: 0 0 3px 1px var(--hs-color-fg-go-default);
+  box-shadow: 0 0 3px 1px var(--ls-color-fg-go-default, var(--hs-color-fg-go-default));
 }
 .vd-modal--size-full-screen .vd-dialog-close {
   top: 16px;
   right: 16px;
 }
 .vd-modal--size-full-screen .vd-dialog-close .vd-dialog-close-button {
-  background-color: var(--hs-color-bg-supplementary-default);
-  color: var(--hs-color-bg-neutral-top);
+  background-color: var(--ls-color-bg-supplementary-default, var(--hs-color-bg-supplementary-default));
+  color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
 }
 .vd-modal--size-full-screen .vd-dialog-close .vd-dialog-close-icon {
   opacity: 1;
@@ -2930,7 +3260,7 @@ vd-carousel-frame {
   font-size: 12px;
 }
 .vd-modal--size-full-screen .vd-dialog-close-label {
-  color: var(--hs-color-fg-supplementary-default);
+  color: var(--ls-color-fg-supplementary-default, var(--hs-color-fg-supplementary-default));
   font-weight: bold;
 }
 @media only screen and (max-width: 768px) {
@@ -2940,14 +3270,14 @@ vd-carousel-frame {
 }
 
 .vd-dialog-close--inverse .vd-dialog-close-button {
-  background: var(--hs-color-bg-supplementary-default);
-  color: var(--hs-color-fg-neutral-ondark-default);
+  background: var(--ls-color-bg-supplementary-default, var(--hs-color-bg-supplementary-default));
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
 }
 .vd-dialog-close--inverse .vd-dialog-close-icon {
   opacity: 1;
 }
 .vd-dialog-close--inverse .vd-dialog-close-label {
-  color: var(--hs-color-fg-neutral-default);
+  color: var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
   opacity: 0.5;
 }
 
@@ -2967,22 +3297,22 @@ vd-dott,
 }
 
 .vd-dott-gradient-start {
-  stop-color: var(--hs-color-fg-go-default);
+  stop-color: var(--ls-color-fg-go-default, var(--hs-color-fg-go-default));
 }
 
 .vd-dott-gradient-stop {
-  stop-color: var(--hs-color-fg-success-default);
+  stop-color: var(--ls-color-fg-success-default, var(--hs-color-fg-success-default));
 }
 
 .vd-dott-border:not(.vd-input--error):not(.vd-error) {
   border: initial;
-  border-top: 2px solid var(--hs-color-border-go-default);
-  border-bottom: 2px solid var(--hs-color-border-success-default);
-  background-image: linear-gradient(var(--hs-color-border-go-default), var(--hs-color-border-success-default)), linear-gradient(var(--hs-color-border-go-default), var(--hs-color-border-success-default));
+  border-top: 2px solid var(--ls-color-border-go-default, var(--hs-color-border-go-default));
+  border-bottom: 2px solid var(--ls-color-border-success-default, var(--hs-color-border-success-default));
+  background-image: linear-gradient(var(--ls-color-border-go-default, var(--hs-color-border-go-default)), var(--ls-color-border-success-default, var(--hs-color-border-success-default))), linear-gradient(var(--ls-color-border-go-default, var(--hs-color-border-go-default)), var(--ls-color-border-success-default, var(--hs-color-border-success-default)));
   background-size: 2px 100%;
   background-position: 0 0, 100% 0;
   background-repeat: no-repeat;
-  box-shadow: 0 0 4px 0 var(--hs-color-border-go-default);
+  box-shadow: 0 0 4px 0 var(--ls-color-border-go-default, var(--hs-color-border-go-default));
 }
 
 .vd-dropdown-input {
@@ -2993,10 +3323,10 @@ vd-dott,
 }
 
 .vd-dropdown-input-container.vd-input--error .vd-dropdown-input, .vd-dropdown-input-container.vd-error .vd-dropdown-input, .vd-dropdown-input-container.ng-invalid.ng-dirty .vd-dropdown-input, .ng-submitted .vd-dropdown-input-container.ng-invalid .vd-dropdown-input {
-  border-color: var(--hs-color-border-no-default);
+  border-color: var(--ls-color-border-no-default, var(--hs-color-border-no-default));
 }
 .vd-dropdown-input-container.vd-input--error .vd-dropdown-input:focus, .vd-dropdown-input-container.vd-input--error .vd-dropdown-input.vd-focus, .vd-dropdown-input-container.vd-error .vd-dropdown-input:focus, .vd-dropdown-input-container.vd-error .vd-dropdown-input.vd-focus, .vd-dropdown-input-container.ng-invalid.ng-dirty .vd-dropdown-input:focus, .vd-dropdown-input-container.ng-invalid.ng-dirty .vd-dropdown-input.vd-focus, .ng-submitted .vd-dropdown-input-container.ng-invalid .vd-dropdown-input:focus, .ng-submitted .vd-dropdown-input-container.ng-invalid .vd-dropdown-input.vd-focus {
-  box-shadow: 0 0 3px var(--hs-color-border-no-default);
+  box-shadow: 0 0 3px var(--ls-color-border-no-default, var(--hs-color-border-no-default));
 }
 
 .vd-expandable-content {
@@ -3109,7 +3439,7 @@ vd-dott,
   margin: 0 0 16px;
   font-size: 16px;
   font-weight: 700;
-  border-bottom: 1px solid var(--hs-color-border-neutral-strong);
+  border-bottom: 1px solid var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
   width: 100%;
 }
 
@@ -3125,14 +3455,14 @@ vd-dott,
   font-weight: 900;
   text-transform: uppercase;
   padding: 4px 8px;
-  background-color: var(--hs-color-bg-neutral-edge);
+  background-color: var(--ls-color-bg-neutral-edge, var(--hs-color-bg-neutral-edge));
   border-radius: 4px;
   display: inline-block;
   vertical-align: text-top;
   overflow: hidden;
 }
 .vd-flag, .vd-flag:link, .vd-flag:visited {
-  color: var(--hs-color-fg-supplementary-default) !important;
+  color: var(--ls-color-fg-supplementary-default, var(--hs-color-fg-supplementary-default)) !important;
 }
 
 .vd-flag-chevron {
@@ -3150,13 +3480,13 @@ vd-dott,
 
 .vd-flag--negative,
 .vd-flag--warning {
-  background-color: var(--hs-color-bg-no-default);
+  background-color: var(--ls-color-bg-no-default, var(--hs-color-bg-no-default));
 }
 .vd-flag--negative, .vd-flag--negative:link, .vd-flag--negative:visited,
 .vd-flag--warning,
 .vd-flag--warning:link,
 .vd-flag--warning:visited {
-  color: var(--hs-color-fg-neutral-ondark-default) !important;
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default)) !important;
 }
 .vd-flag--negative .vd-flag-chevron,
 .vd-flag--warning .vd-flag-chevron {
@@ -3223,7 +3553,7 @@ vd-dott,
 .vd-header {
   display: block;
   font-weight: 700;
-  color: var(--hs-color-fg-neutral-default);
+  color: var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
   margin: 0;
 }
 
@@ -3275,7 +3605,7 @@ vd-dott,
   text-align: center;
   padding: 48px 20px;
   box-sizing: border-box;
-  background-color: var(--hs-color-bg-neutral-top);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
 }
 @media only screen and (max-width: 1000px) {
   .vd-hero-container .vd-hero {
@@ -3301,7 +3631,7 @@ vd-dott,
   word-break: break-word;
   font-weight: 700;
   margin: 0;
-  color: var(--hs-color-fg-neutral-default);
+  color: var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
   line-height: 1.2;
   font-synthesis: none;
   text-rendering: optimizelegibility;
@@ -3336,9 +3666,9 @@ vd-dott,
   justify-content: center;
   padding: 20px;
   box-sizing: border-box;
-  background-color: var(--hs-color-bg-neutral-inverted-top);
+  background-color: var(--ls-color-bg-neutral-inverted-top, var(--hs-color-bg-neutral-inverted-top));
   font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
-  color: var(--hs-color-fg-neutral-inverted-default);
+  color: var(--ls-color-fg-neutral-inverted-default, var(--hs-color-fg-neutral-inverted-default));
   text-align: center;
   font-size: 15px;
 }
@@ -3388,7 +3718,7 @@ vd-dott,
 }
 
 .vd-hero-aux-footer {
-  color: var(--hs-color-border-neutral-strong);
+  color: var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
   margin-top: 12px;
 }
 
@@ -3396,7 +3726,7 @@ vd-dott,
   margin: 20px auto;
   width: 100%;
   max-width: 1100px;
-  border-top: 1px solid var(--hs-color-border-neutral-strong);
+  border-top: 1px solid var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
   border-left: none;
   border-right: none;
   border-bottom: none;
@@ -3412,7 +3742,7 @@ vd-dott,
   font-size: 12px;
 }
 .vd-countdown:not(.vd-text--negative) {
-  color: var(--hs-color-fg-supplementary-default);
+  color: var(--ls-color-fg-supplementary-default, var(--hs-color-fg-supplementary-default));
 }
 
 .vd-in-page-help {
@@ -3420,7 +3750,7 @@ vd-dott,
 }
 
 .vd-in-page-help-section {
-  border-bottom: 1px solid var(--hs-color-border-neutral-soft);
+  border-bottom: 1px solid var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
 }
 
 .vd-in-page-help-container {
@@ -3476,13 +3806,13 @@ vd-dott,
 }
 
 .vd-link {
-  color: var(--hs-color-fg-go-default);
+  color: var(--ls-color-fg-go-default, var(--hs-color-fg-go-default));
   text-decoration: none;
   cursor: pointer;
   transition: color 0.2s;
 }
 .vd-link:visited {
-  color: var(--hs-color-fg-go-default);
+  color: var(--ls-color-fg-go-default, var(--hs-color-fg-go-default));
 }
 @media (hover: hover) {
   .vd-link:hover {
@@ -3499,7 +3829,7 @@ vd-dott,
 }
 @media (hover: hover) {
   .vd-link--secondary:hover {
-    color: var(--hs-color-fg-go-default) !important;
+    color: var(--ls-color-fg-go-default, var(--hs-color-fg-go-default)) !important;
   }
 }
 
@@ -3514,8 +3844,8 @@ vd-dott,
   line-height: 1.3333333333;
   font-weight: 400;
   padding: 6px 10px;
-  color: var(--hs-color-fg-supplementary-default);
-  background-color: var(--hs-color-bg-neutral-edge);
+  color: var(--ls-color-fg-supplementary-default, var(--hs-color-fg-supplementary-default));
+  background-color: var(--ls-color-bg-neutral-edge, var(--hs-color-bg-neutral-edge));
   border-radius: 4px;
   display: inline-block;
   margin-right: 4px;
@@ -3533,8 +3863,8 @@ vd-dott,
 }
 
 .vd-lozenge--interactive {
-  color: var(--hs-color-fg-neutral-ondark-default);
-  background-color: var(--hs-color-bg-supplementary-default);
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
+  background-color: var(--ls-color-bg-supplementary-default, var(--hs-color-bg-supplementary-default));
 }
 
 .vd-lozenge--disabled {
@@ -3544,8 +3874,8 @@ vd-dott,
 }
 
 .vd-lozenge--marked {
-  background-color: var(--hs-color-bg-no-default);
-  color: var(--hs-color-fg-neutral-ondark-default);
+  background-color: var(--ls-color-bg-no-default, var(--hs-color-bg-no-default));
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
 }
 
 @keyframes vd-lozenge-group-already-added {
@@ -3571,25 +3901,25 @@ vd-dott,
   align-items: center;
   cursor: text;
   box-shadow: none;
-  background-color: var(--hs-color-bg-neutral-top);
-  border: 2px solid var(--hs-color-border-neutral-soft);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
+  border: 2px solid var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
   border-radius: 4px;
   transition-duration: 0.2s;
   transition-property: border-color, box-shadow;
 }
 .vd-lozenge-group:focus, .vd-lozenge-group.vd-focus {
-  border-color: var(--hs-color-border-go-default);
-  box-shadow: 0 0 3px var(--hs-color-border-go-default);
+  border-color: var(--ls-color-border-go-default, var(--hs-color-border-go-default));
+  box-shadow: 0 0 3px var(--ls-color-border-go-default, var(--hs-color-border-go-default));
 }
 .vd-lozenge-group.vd-input--error, .vd-lozenge-group.vd-error, .vd-lozenge-group.ng-invalid.ng-dirty, .ng-submitted .vd-lozenge-group.ng-invalid {
-  border-color: var(--hs-color-border-no-default);
+  border-color: var(--ls-color-border-no-default, var(--hs-color-border-no-default));
 }
 .vd-lozenge-group.vd-input--error:focus, .vd-lozenge-group.vd-input--error.vd-focus, .vd-lozenge-group.vd-error:focus, .vd-lozenge-group.vd-error.vd-focus, .vd-lozenge-group.ng-invalid.ng-dirty:focus, .vd-lozenge-group.ng-invalid.ng-dirty.vd-focus, .ng-submitted .vd-lozenge-group.ng-invalid:focus, .ng-submitted .vd-lozenge-group.ng-invalid.vd-focus {
-  box-shadow: 0 0 3px var(--hs-color-border-no-default);
+  box-shadow: 0 0 3px var(--ls-color-border-no-default, var(--hs-color-border-no-default));
 }
 .vd-lozenge-group:focus-within {
-  border-color: var(--hs-color-border-go-default);
-  box-shadow: 0 0 3px var(--hs-color-border-go-default);
+  border-color: var(--ls-color-border-go-default, var(--hs-color-border-go-default));
+  box-shadow: 0 0 3px var(--ls-color-border-go-default, var(--hs-color-border-go-default));
 }
 .vd-lozenge-group .vd-lozenge {
   margin-left: 4px;
@@ -3602,7 +3932,7 @@ vd-dott,
   animation-fill-mode: both;
 }
 .vd-lozenge-group .vd-lozenge-group-input {
-  color: var(--hs-color-fg-neutral-default);
+  color: var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
   font-family: lato, "Helvetica Neue", helvetica, roboto, arial, sans-serif;
   font-weight: 400;
   font-size: 15px;
@@ -3617,7 +3947,7 @@ vd-dott,
   flex-grow: 1;
 }
 .vd-lozenge-group .vd-lozenge-group-input::placeholder {
-  color: var(--hs-color-fg-supplementary-default);
+  color: var(--ls-color-fg-supplementary-default, var(--hs-color-fg-supplementary-default));
   opacity: 1;
 }
 .vd-lozenge-group .vd-lozenge-group-input:placeholder-shown {
@@ -3639,7 +3969,7 @@ vd-dott,
   width: 20px;
   height: 20px;
   border-radius: 50%;
-  border: 2px solid var(--hs-color-fg-go-default);
+  border: 2px solid var(--ls-color-fg-go-default, var(--hs-color-fg-go-default));
   border-left-color: transparent;
   animation: vd-rotate 1s ease-in-out infinite;
 }
@@ -3723,7 +4053,7 @@ vd-dott,
   font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-size: 15px;
   line-height: normal;
-  color: var(--hs-color-fg-neutral-default);
+  color: var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
   position: absolute;
   z-index: 410;
 }
@@ -3744,7 +4074,7 @@ vd-dott,
 
 .vd-overlay--visible {
   visibility: visible;
-  background-color: var(--hs-color-overlay-neutral-strong);
+  background-color: var(--ls-color-overlay-neutral-strong, var(--hs-color-overlay-neutral-strong));
   pointer-events: auto;
 }
 
@@ -3760,12 +4090,12 @@ vd-dott,
 
 .vd-panel {
   display: block;
-  background-color: var(--hs-color-bg-neutral-top);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
   margin: 0 -24px;
 }
 
 .vd-panel--dark {
-  background-color: var(--hs-color-bg-neutral-backdrop);
+  background-color: var(--ls-color-bg-neutral-backdrop, var(--hs-color-bg-neutral-backdrop));
 }
 
 .vd-popover-container {
@@ -3776,7 +4106,7 @@ vd-dott,
   font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-size: 15px;
   line-height: normal;
-  color: var(--hs-color-fg-neutral-default);
+  color: var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
   display: none;
   position: relative;
   z-index: 300;
@@ -3887,8 +4217,8 @@ vd-dott,
 .vd-popover {
   position: relative;
   border-radius: 5px;
-  filter: drop-shadow(0 4px 5px var(--hs-color-overlay-neutral-strong));
-  background-color: var(--hs-color-bg-neutral-top);
+  filter: drop-shadow(0 4px 5px var(--ls-color-overlay-neutral-strong, var(--hs-color-overlay-neutral-strong)));
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
 }
 .vd-popover-tether-pinned-bottom .vd-popover {
   margin-bottom: 12px;
@@ -3901,7 +4231,7 @@ vd-dott,
   position: relative;
   box-sizing: border-box;
   border-radius: 5px;
-  background-color: var(--hs-color-bg-neutral-top);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
   z-index: 1;
   padding: 24px;
   max-height: calc(50vh - 40px);
@@ -3930,26 +4260,26 @@ vd-dott,
   position: absolute;
   height: 12px;
   width: 12px;
-  background-color: var(--hs-color-bg-neutral-top);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
   transform: rotate(45deg);
 }
 .vd-popover-tether-element-attached-bottom.vd-popover-tether-target-attached-top .vd-popover-actions:not(:empty) ~ .vd-popover-beak {
-  background-color: var(--hs-color-bg-neutral-edge);
+  background-color: var(--ls-color-bg-neutral-edge, var(--hs-color-bg-neutral-edge));
 }
 .vd-popover-tether-element-attached-bottom.vd-popover-tether-target-attached-left .vd-popover-actions:not(:empty) ~ .vd-popover-beak {
-  background-color: var(--hs-color-bg-neutral-edge);
+  background-color: var(--ls-color-bg-neutral-edge, var(--hs-color-bg-neutral-edge));
 }
 .vd-popover-tether-element-attached-bottom.vd-popover-tether-target-attached-right .vd-popover-actions:not(:empty) ~ .vd-popover-beak {
-  background-color: var(--hs-color-bg-neutral-edge);
+  background-color: var(--ls-color-bg-neutral-edge, var(--hs-color-bg-neutral-edge));
 }
 .vd-popover-tether-element-attached-bottom.vd-popover-tether-target-attached-top .vd-popover-actions:has(.vd-popover-list-footer-action:not(:empty)) ~ .vd-popover-beak {
-  background-color: var(--hs-color-bg-neutral-top);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
 }
 .vd-popover-tether-element-attached-bottom.vd-popover-tether-target-attached-left .vd-popover-actions:has(.vd-popover-list-footer-action:not(:empty)) ~ .vd-popover-beak {
-  background-color: var(--hs-color-bg-neutral-top);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
 }
 .vd-popover-tether-element-attached-bottom.vd-popover-tether-target-attached-right .vd-popover-actions:has(.vd-popover-list-footer-action:not(:empty)) ~ .vd-popover-beak {
-  background-color: var(--hs-color-bg-neutral-top);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
 }
 .vd-popover-tether-pinned .vd-popover-beak {
   display: none;
@@ -4004,13 +4334,13 @@ vd-dott,
 }
 .vd-multiselect-popover-container .vd-input-icon {
   padding-right: 24px;
-  color: var(--hs-color-fg-neutral-default);
+  color: var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
 }
 .vd-multiselect-popover-container.vd-input--error .vd-multiselect-popover-input, .vd-multiselect-popover-container.vd-error .vd-multiselect-popover-input, .vd-multiselect-popover-container.ng-invalid.ng-dirty .vd-multiselect-popover-input, .ng-submitted .vd-multiselect-popover-container.ng-invalid .vd-multiselect-popover-input {
-  border-color: var(--hs-color-border-no-default);
+  border-color: var(--ls-color-border-no-default, var(--hs-color-border-no-default));
 }
 .vd-multiselect-popover-container.vd-input--error .vd-multiselect-popover-input:focus, .vd-multiselect-popover-container.vd-input--error .vd-multiselect-popover-input.vd-focus, .vd-multiselect-popover-container.vd-error .vd-multiselect-popover-input:focus, .vd-multiselect-popover-container.vd-error .vd-multiselect-popover-input.vd-focus, .vd-multiselect-popover-container.ng-invalid.ng-dirty .vd-multiselect-popover-input:focus, .vd-multiselect-popover-container.ng-invalid.ng-dirty .vd-multiselect-popover-input.vd-focus, .ng-submitted .vd-multiselect-popover-container.ng-invalid .vd-multiselect-popover-input:focus, .ng-submitted .vd-multiselect-popover-container.ng-invalid .vd-multiselect-popover-input.vd-focus {
-  box-shadow: 0 0 3px var(--hs-color-border-no-default);
+  box-shadow: 0 0 3px var(--ls-color-border-no-default, var(--hs-color-border-no-default));
 }
 
 .vd-multiselect-popover-content-container {
@@ -4082,7 +4412,7 @@ vd-dott,
 }
 .vd-popover-list-group-header::after {
   content: "";
-  border-bottom: 2px solid var(--hs-color-border-neutral-soft);
+  border-bottom: 2px solid var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
   display: block;
   position: absolute;
   bottom: 0;
@@ -4116,7 +4446,7 @@ vd-dott,
 }
 .vd-popover-list-group-divider::after {
   content: "";
-  border-bottom: 2px solid var(--hs-color-border-neutral-soft);
+  border-bottom: 2px solid var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
   display: block;
   position: absolute;
   right: 24px;
@@ -4138,7 +4468,7 @@ vd-dott,
   text-decoration: none;
 }
 .vd-popover-list-item.vd-popover-list-item--active, .vd-popover-list-item:hover, .vd-popover-list-item:focus {
-  background-color: var(--hs-color-bg-go-highlight-default);
+  background-color: var(--ls-color-bg-go-highlight-default, var(--hs-color-bg-go-highlight-default));
 }
 
 .vd-popover-list-item--disabled {
@@ -4189,8 +4519,8 @@ vd-dott,
 }
 
 .vd-popover-list-footer--full {
-  background-color: var(--hs-color-bg-neutral-top);
-  border-top: 1px solid var(--hs-color-border-neutral-soft);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
+  border-top: 1px solid var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
   display: flex;
   flex-direction: column;
   min-height: 60px;
@@ -4207,9 +4537,9 @@ vd-dott,
   font-size: 15px;
   line-height: 1.3333333333;
   font-weight: 700;
-  background-color: var(--hs-color-bg-neutral-top);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
   border: 0;
-  color: var(--hs-color-fg-go-default);
+  color: var(--ls-color-fg-go-default, var(--hs-color-fg-go-default));
   cursor: pointer;
   flex: 1 0 100%;
   font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
@@ -4220,11 +4550,11 @@ vd-dott,
 }
 @media (hover: hover) {
   .vd-popover-list-footer-action:hover {
-    background-color: var(--hs-color-bg-go-highlight-default);
+    background-color: var(--ls-color-bg-go-highlight-default, var(--hs-color-bg-go-highlight-default));
   }
 }
 .vd-popover-list-footer-action:active, .vd-popover-list-footer-action:focus {
-  background-color: var(--hs-color-bg-go-highlight-default);
+  background-color: var(--ls-color-bg-go-highlight-default, var(--hs-color-bg-go-highlight-default));
 }
 
 .vd-popover-list-separator {
@@ -4251,7 +4581,7 @@ vd-dott,
   word-break: break-word;
   font-weight: 700;
   margin: 0;
-  color: var(--hs-color-fg-neutral-default);
+  color: var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
   line-height: 1.25;
   font-synthesis: none;
   text-rendering: optimizelegibility;
@@ -4392,8 +4722,8 @@ vd-dott,
   height: 24px;
   width: 24px;
   border-radius: 50%;
-  background-color: var(--hs-color-bg-neutral-top);
-  border: 2px solid var(--hs-color-border-neutral-strong);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
+  border: 2px solid var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
   box-sizing: border-box;
 }
 .vd-radio-tick::after {
@@ -4403,7 +4733,7 @@ vd-dott,
   height: 8px;
   width: 8px;
   border-radius: 50%;
-  background-color: var(--hs-color-border-neutral-strong);
+  background-color: var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
   opacity: 0;
   left: 6px;
   top: 6px;
@@ -4416,13 +4746,13 @@ vd-dott,
 
 .vd-radio-input:checked + .vd-radio-tick {
   transition: background-color 0.8s;
-  background-color: var(--hs-color-bg-go-default);
-  border-color: var(--hs-color-bg-go-default);
+  background-color: var(--ls-color-bg-go-default, var(--hs-color-bg-go-default));
+  border-color: var(--ls-color-bg-go-default, var(--hs-color-bg-go-default));
 }
 .vd-radio-input:checked + .vd-radio-tick::after {
   opacity: 1;
   animation: vd-radio-checked 0.8s;
-  background-color: var(--hs-color-fg-neutral-ondark-default);
+  background-color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
   box-sizing: content-box;
   backface-visibility: hidden;
 }
@@ -4439,7 +4769,7 @@ vd-dott,
 .vd-radio.vd-disabled .vd-radio-input:hover:checked + .vd-radio-tick::after,
 .vd-radio-input:disabled:hover:checked + .vd-radio-tick::after {
   opacity: 1;
-  background-color: var(--hs-color-bg-neutral-top);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
 }
 .vd-radio.vd-disabled .vd-radio-input ~ .vd-radio-label,
 .vd-radio-input:disabled ~ .vd-radio-label {
@@ -4452,7 +4782,7 @@ vd-dott,
 }
 
 .vd-radio:focus-within {
-  box-shadow: 0 0 5px 2px var(--hs-color-fg-go-default);
+  box-shadow: 0 0 5px 2px var(--ls-color-fg-go-default, var(--hs-color-fg-go-default));
 }
 
 .vd-scrollable-container {
@@ -4484,7 +4814,7 @@ vd-dott,
 }
 .vd-scrollable-indicator::before {
   content: "";
-  box-shadow: 0 0 30px var(--hs-color-overlay-neutral-strong);
+  box-shadow: 0 0 30px var(--ls-color-overlay-neutral-strong, var(--hs-color-overlay-neutral-strong));
   border-radius: 100%;
   width: 100%;
   height: 100%;
@@ -4549,16 +4879,16 @@ vd-section .vd-section,
 
 .vd-section--secondary,
 .vd-section--secondary .vd-section-container {
-  background-color: var(--hs-color-bg-neutral-edge);
+  background-color: var(--ls-color-bg-neutral-edge, var(--hs-color-bg-neutral-edge));
 }
 
 .vd-section--tertiary,
 .vd-section--tertiary .vd-section-container {
-  background-color: var(--hs-color-bg-neutral-top);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
 }
 
 .vd-section--panel {
-  border-bottom: 1px solid var(--hs-color-border-neutral-strong);
+  border-bottom: 1px solid var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
   margin: 0 24px;
 }
 .vd-section--panel:last-child {
@@ -4581,7 +4911,7 @@ vd-section .vd-section,
   right: 1em;
   content: "";
   bottom: 0;
-  box-shadow: 0 0.1em 4em 0 var(--hs-color-overlay-neutral-strong);
+  box-shadow: 0 0.1em 4em 0 var(--ls-color-overlay-neutral-strong, var(--hs-color-overlay-neutral-strong));
 }
 .vd-section--fixed::after {
   animation: vd-fade-in 0.2s ease-in-out;
@@ -4595,7 +4925,7 @@ vd-section .vd-section,
 
 .vd-section--action-bar,
 .vd-section--action-bar .vd-section-container {
-  background-color: var(--hs-color-bg-neutral-edge);
+  background-color: var(--ls-color-bg-neutral-edge, var(--hs-color-bg-neutral-edge));
 }
 .vd-section--action-bar .vd-section-wrap {
   min-height: 45px;
@@ -4633,7 +4963,7 @@ vd-section .vd-section,
 }
 .vd-section-back .vd-section-back-icon {
   display: block;
-  color: var(--hs-color-border-neutral-strong);
+  color: var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
   font-size: 24px;
   transition-duration: 0.2s;
   transition-property: margin-left, padding-right, color;
@@ -4641,7 +4971,7 @@ vd-section .vd-section,
 .vd-section-back:hover .vd-section-back-icon {
   margin-left: -2px;
   padding-right: 2px;
-  color: var(--hs-color-fg-go-default);
+  color: var(--ls-color-fg-go-default, var(--hs-color-fg-go-default));
 }
 @media only screen and (max-width: 1000px) {
   .vd-section-back {
@@ -4661,12 +4991,12 @@ vd-section .vd-section,
   font-weight: normal;
 }
 .vd-segcontrol:first-of-type .vd-segcontrol-button {
-  border-left: 2px solid var(--hs-color-border-neutral-soft);
+  border-left: 2px solid var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
   border-radius: 4px 0 0 4px;
 }
 .vd-segcontrol:last-of-type .vd-segcontrol-button {
   border-radius: 0 4px 4px 0;
-  border-right: 2px solid var(--hs-color-border-neutral-soft);
+  border-right: 2px solid var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
 }
 
 .vd-segcontrol--stretched {
@@ -4674,13 +5004,13 @@ vd-section .vd-section,
 }
 
 .vd-segcontrol--selected .vd-segcontrol-button {
-  border-color: var(--hs-color-border-go-default) !important;
+  border-color: var(--ls-color-border-go-default, var(--hs-color-border-go-default)) !important;
   z-index: 3;
 }
 
 .vd-segcontrol:not(.vd-segcontrol--selected):not(.vd-segcontrol--disabled):hover .vd-segcontrol-input:not(:disabled) ~ .vd-segcontrol-button {
   z-index: 2;
-  border-color: var(--hs-color-border-neutral-strong);
+  border-color: var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
   cursor: pointer;
 }
 
@@ -4693,10 +5023,10 @@ vd-section .vd-section,
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
-  background-color: var(--hs-color-bg-neutral-top);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
   padding: 12px 20px;
-  border: 2px solid var(--hs-color-border-neutral-soft);
-  color: var(--hs-color-fg-neutral-default);
+  border: 2px solid var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
+  color: var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
   width: 100%;
   transition-duration: 0.2s;
   transition-property: background, border;
@@ -4707,7 +5037,7 @@ vd-section .vd-section,
   position: absolute;
 }
 .vd-segcontrol-input:checked + .vd-segcontrol-button {
-  color: var(--hs-color-fg-neutral-default);
+  color: var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
 }
 .vd-segcontrol-input:disabled + .vd-segcontrol-button {
   opacity: 0.35;
@@ -4717,8 +5047,8 @@ vd-section .vd-section,
 }
 
 .vd-segcontrol:active .vd-segcontrol-input + .vd-segcontrol-button {
-  background-color: var(--hs-color-bg-neutral-inert-softer);
-  box-shadow: 0 0 3px var(--hs-color-bg-neutral-edge);
+  background-color: var(--ls-color-bg-neutral-inert-softer, var(--hs-color-bg-neutral-inert-softer));
+  box-shadow: 0 0 3px var(--ls-color-bg-neutral-edge, var(--hs-color-bg-neutral-edge));
 }
 
 .vd-segcontrol--panel {
@@ -4730,7 +5060,7 @@ vd-section .vd-section,
 }
 
 .vd-splash-fullscreen-container {
-  border: 20px solid var(--hs-color-overlay-neutral-strong);
+  border: 20px solid var(--ls-color-overlay-neutral-strong, var(--hs-color-overlay-neutral-strong));
   box-sizing: border-box;
   display: block;
   position: fixed;
@@ -4751,7 +5081,7 @@ vd-section .vd-section,
   display: flex;
   justify-content: center;
   align-items: center;
-  background: var(--hs-color-bg-neutral-top);
+  background: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
   overflow: auto;
   animation: vd-fade-in 0.5s ease-in-out;
   animation-fill-mode: forwards;
@@ -4780,7 +5110,7 @@ vd-section .vd-section,
 
 .vd-status-icon {
   border-radius: 50%;
-  background-color: var(--hs-color-bg-go-default);
+  background-color: var(--ls-color-bg-go-default, var(--hs-color-bg-go-default));
   width: 8px;
   height: 8px;
   display: inline-block;
@@ -4788,7 +5118,7 @@ vd-section .vd-section,
 }
 
 .vd-status-icon--negative {
-  background-color: var(--hs-color-bg-no-default);
+  background-color: var(--ls-color-bg-no-default, var(--hs-color-bg-no-default));
 }
 
 .vd-suggestions-popover .vd-popover-content {
@@ -4820,8 +5150,8 @@ vd-section .vd-section,
   right: 0;
   height: 60px;
   box-sizing: border-box;
-  background-color: var(--hs-color-bg-neutral-top);
-  border-top: 1px solid var(--hs-color-border-neutral-soft);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
+  border-top: 1px solid var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
 }
 
 .vd-suggestion-query-container {
@@ -4852,8 +5182,8 @@ vd-section .vd-section,
   margin-right: -16px !important;
 }
 .vd-suggestion-clear.vd-suggestion-clear--active {
-  color: var(--hs-color-fg-neutral-ondark-default);
-  background-color: var(--hs-color-bg-supplementary-soft);
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
+  background-color: var(--ls-color-bg-supplementary-soft, var(--hs-color-bg-supplementary-soft));
 }
 
 .vd-switch {
@@ -4878,8 +5208,8 @@ vd-section .vd-section,
   height: 36px;
   border-radius: 36px;
   box-sizing: border-box;
-  border: 2px solid var(--hs-color-bg-go-soft);
-  background-color: var(--hs-color-bg-neutral-top);
+  border: 2px solid var(--ls-color-bg-go-soft, var(--hs-color-bg-go-soft));
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
   transition: background-color 0.5s ease-in-out;
 }
 .vd-switch--small .vd-switch-track {
@@ -4891,7 +5221,7 @@ vd-section .vd-section,
   box-sizing: border-box;
   display: inline-block;
   position: absolute;
-  color: var(--hs-color-fg-neutral-ondark-default);
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
   top: 8px;
   left: 10px;
   opacity: 0;
@@ -4909,7 +5239,7 @@ vd-section .vd-section,
   position: absolute;
   top: 8px;
   left: 41px;
-  color: var(--hs-color-bg-go-soft);
+  color: var(--ls-color-bg-go-soft, var(--hs-color-bg-go-soft));
   opacity: 1;
   transition: opacity 0.54s ease-in-out;
 }
@@ -4923,8 +5253,8 @@ vd-section .vd-section,
   float: left;
   border-radius: inherit;
   box-sizing: border-box;
-  border: 2px solid var(--hs-color-bg-go-soft);
-  background-color: var(--hs-color-bg-neutral-top);
+  border: 2px solid var(--ls-color-bg-go-soft, var(--hs-color-bg-go-soft));
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
   pointer-events: none;
   width: 36px;
   height: 36px;
@@ -4938,11 +5268,11 @@ vd-section .vd-section,
 }
 
 .vd-switch-input:checked:focus + .vd-switch-track {
-  box-shadow: 0 0 5px 2px var(--hs-color-bg-go-default);
+  box-shadow: 0 0 5px 2px var(--ls-color-bg-go-default, var(--hs-color-bg-go-default));
 }
 .vd-switch-input:checked + .vd-switch-track {
-  border-color: var(--hs-color-bg-go-default);
-  background-color: var(--hs-color-bg-go-default);
+  border-color: var(--ls-color-bg-go-default, var(--hs-color-bg-go-default));
+  background-color: var(--ls-color-bg-go-default, var(--hs-color-bg-go-default));
 }
 .vd-switch-input:checked + .vd-switch-track .vd-switch-icon {
   opacity: 1;
@@ -4952,14 +5282,14 @@ vd-section .vd-section,
 }
 .vd-switch-input:checked + .vd-switch-track .vd-switch-track-knob {
   transform: translate3d(32px, 0, 0);
-  border-color: var(--hs-color-bg-go-default);
+  border-color: var(--ls-color-bg-go-default, var(--hs-color-bg-go-default));
 }
 .vd-switch--small .vd-switch-input:checked + .vd-switch-track .vd-switch-track-knob {
   transform: translate3d(24px, 0, 0);
 }
 
 .vd-switch-input:focus + .vd-switch-track {
-  box-shadow: 0 0 5px 2px var(--hs-color-bg-go-soft);
+  box-shadow: 0 0 5px 2px var(--ls-color-bg-go-soft, var(--hs-color-bg-go-soft));
 }
 
 .vd-switch-input:disabled + .vd-switch-track {
@@ -4992,7 +5322,7 @@ vd-section .vd-section,
   gap: 16px 32px;
   padding: 0;
   margin: 0;
-  box-shadow: inset 0 -1px var(--hs-color-border-neutral-strong);
+  box-shadow: inset 0 -1px var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
 }
 
 .vd-tabs-container--overflow {
@@ -5011,16 +5341,16 @@ vd-section .vd-section,
 
 .vd-tab {
   display: inline-block;
-  color: var(--hs-color-fg-neutral-default);
+  color: var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
 }
 .vd-tab.vd-tab--active .vd-tab-button {
-  border-bottom-color: var(--hs-color-border-go-default);
-  color: var(--hs-color-fg-go-default);
+  border-bottom-color: var(--ls-color-border-go-default, var(--hs-color-border-go-default));
+  color: var(--ls-color-fg-go-default, var(--hs-color-fg-go-default));
 }
 @media (hover: hover) {
   .vd-tab:hover:not(.vd-tab--disabled) .vd-tab-button {
-    border-bottom-color: var(--hs-color-border-go-default);
-    color: var(--hs-color-fg-go-default);
+    border-bottom-color: var(--ls-color-border-go-default, var(--hs-color-border-go-default));
+    color: var(--ls-color-fg-go-default, var(--hs-color-fg-go-default));
   }
   .vd-tab:hover:not(.vd-tab--active) .vd-tab-button {
     cursor: pointer;
@@ -5097,10 +5427,10 @@ table {
   padding: 16px 40px;
 }
 .vd-table thead tr {
-  border-color: var(--hs-color-border-neutral-strong);
+  border-color: var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
 }
 .vd-table tr {
-  border-bottom: 1px solid var(--hs-color-border-neutral-soft);
+  border-bottom: 1px solid var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
 }
 .vd-table tr .vd-clickable {
   display: block;
@@ -5127,10 +5457,10 @@ table {
   border-right: none;
 }
 .vd-table tr.vd-border-t {
-  border-top: 1px solid var(--hs-color-border-neutral-soft);
+  border-top: 1px solid var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
 }
 .vd-table tr.vd-border-b {
-  border-bottom: 1px solid var(--hs-color-border-neutral-soft);
+  border-bottom: 1px solid var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
 }
 .vd-table tr.vd-med-pad-t td, .vd-table tr.vd-med-pad-v td {
   padding-top: 8px;
@@ -5156,18 +5486,18 @@ table {
 @media (hover: hover) {
   .vd-table tr.vd-expandable:hover:not(.vd-expandable--nt) {
     cursor: pointer;
-    background-color: var(--hs-color-bg-go-highlight-default);
+    background-color: var(--ls-color-bg-go-highlight-default, var(--hs-color-bg-go-highlight-default));
   }
 }
 .vd-table tr.vd-expandable + tr:not(.vd-expandable), .vd-table tr.vd-expandable.vd-expandable--expanded {
-  background: var(--hs-color-bg-neutral-top);
+  background: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
 }
 .vd-table tr.vd-expandable + tr:not(.vd-expandable) > td:first-child::before, .vd-table tr.vd-expandable.vd-expandable--expanded > td:first-child::before {
   content: "";
   top: -1px;
   left: 0;
   width: 4px;
-  background-color: var(--hs-color-border-go-default);
+  background-color: var(--ls-color-border-go-default, var(--hs-color-border-go-default));
   bottom: 0;
   z-index: 1;
   position: absolute;
@@ -5244,10 +5574,10 @@ table {
   vertical-align: bottom;
 }
 .vd-table.vd-table--data {
-  border: 1px solid var(--hs-color-border-neutral-soft);
+  border: 1px solid var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
 }
 .vd-table.vd-table--data tr {
-  background-color: var(--hs-color-bg-neutral-top);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
 }
 
 .vd-table--compact thead th {
@@ -5275,23 +5605,23 @@ table {
 }
 
 .vd-table--report {
-  border: 1px solid var(--hs-color-border-neutral-soft);
+  border: 1px solid var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
 }
 .vd-table--report > thead th {
   padding: 16px;
-  background-color: var(--hs-color-bg-neutral-top);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
 }
 .vd-table--report > thead tr {
-  border: 1px solid var(--hs-color-border-neutral-soft);
+  border: 1px solid var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
 }
 .vd-table--report > tbody > tr {
   border-bottom: none;
 }
 .vd-table--report > tbody > tr:nth-child(odd) {
-  background-color: var(--hs-color-bg-neutral-backdrop);
+  background-color: var(--ls-color-bg-neutral-backdrop, var(--hs-color-bg-neutral-backdrop));
 }
 .vd-table--report > tbody > tr:nth-child(even) {
-  background-color: var(--hs-color-bg-neutral-top);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
 }
 .vd-table--report > tbody > tr > td {
   padding: 16px;
@@ -5307,10 +5637,10 @@ table {
   margin-bottom: 0;
 }
 .vd-table--report.vd-table--report--nested > tbody > tr:nth-child(odd) {
-  background-color: var(--hs-color-bg-neutral-backdrop);
+  background-color: var(--ls-color-bg-neutral-backdrop, var(--hs-color-bg-neutral-backdrop));
 }
 .vd-table--report.vd-table--report--nested > tbody > tr:nth-child(even) {
-  background-color: var(--hs-color-bg-neutral-top);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
 }
 .vd-table--report.vd-table--report--nested > tbody > tr > td:first-child {
   padding-left: 13px;
@@ -5320,19 +5650,19 @@ table {
 }
 
 .vd-text--secondary {
-  color: var(--hs-color-fg-supplementary-default);
+  color: var(--ls-color-fg-supplementary-default, var(--hs-color-fg-supplementary-default));
 }
 
 .vd-text--success {
-  color: var(--hs-color-fg-go-default);
+  color: var(--ls-color-fg-go-default, var(--hs-color-fg-go-default));
 }
 
 .vd-text--negative {
-  color: var(--hs-color-fg-no-default);
+  color: var(--ls-color-fg-no-default, var(--hs-color-fg-no-default));
 }
 
 .vd-text--disabled {
-  color: var(--hs-color-fg-neutral-default);
+  color: var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
   opacity: 0.35;
 }
 
@@ -5364,7 +5694,7 @@ table {
   font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-size: 15px;
   line-height: normal;
-  color: var(--hs-color-fg-neutral-default);
+  color: var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
   position: fixed;
   right: 0;
   left: 0;
@@ -5392,7 +5722,7 @@ table {
   padding: 24px 76px 24px 40px;
   border-radius: 4px;
   box-sizing: border-box;
-  color: var(--hs-color-fg-neutral-ondark-default);
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
   text-align: center;
   font-weight: 700;
   transition: opacity ease-in-out 0.5s;
@@ -5414,25 +5744,25 @@ table {
 }
 
 .vd-toast-notification--success {
-  background-color: var(--hs-color-bg-success-default);
+  background-color: var(--ls-color-bg-success-default, var(--hs-color-bg-success-default));
 }
 
 .vd-toast-notification--negative {
-  background-color: var(--hs-color-bg-no-default);
+  background-color: var(--ls-color-bg-no-default, var(--hs-color-bg-no-default));
 }
 
 .vd-popover--tooltip {
-  border-color: var(--hs-color-border-neutral-inverted-soft);
-  background-color: var(--hs-color-bg-neutral-inverted-top);
-  color: var(--hs-color-fg-neutral-inverted-default);
+  border-color: var(--ls-color-border-neutral-inverted-soft, var(--hs-color-border-neutral-inverted-soft));
+  background-color: var(--ls-color-bg-neutral-inverted-top, var(--hs-color-bg-neutral-inverted-top));
+  color: var(--ls-color-fg-neutral-inverted-default, var(--hs-color-fg-neutral-inverted-default));
 }
 .vd-popover--tooltip .vd-popover-content {
-  background-color: var(--hs-color-bg-neutral-inverted-top);
+  background-color: var(--ls-color-bg-neutral-inverted-top, var(--hs-color-bg-neutral-inverted-top));
   padding: 8px;
 }
 .vd-popover--tooltip .vd-popover-beak {
-  background-color: var(--hs-color-bg-neutral-inverted-top);
-  border-color: var(--hs-color-border-neutral-inverted-soft);
+  background-color: var(--ls-color-bg-neutral-inverted-top, var(--hs-color-bg-neutral-inverted-top));
+  border-color: var(--ls-color-border-neutral-inverted-soft, var(--hs-color-border-neutral-inverted-soft));
 }
 
 @media only screen and (max-width: 480px) {
@@ -5583,11 +5913,11 @@ td.vd-show-print {
 .vd-next-stepper {
   display: block;
   padding: 24px;
-  background-color: var(--hs-color-bg-neutral-top);
-  border: 1px solid var(--hs-color-border-neutral-soft);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
+  border: 1px solid var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
 }
 .vd-next-stepper.vd-next-stepper--on-box {
-  background-color: var(--hs-color-bg-neutral-backdrop);
+  background-color: var(--ls-color-bg-neutral-backdrop, var(--hs-color-bg-neutral-backdrop));
   border-color: transparent;
 }
 
@@ -5610,7 +5940,7 @@ td.vd-show-print {
 .vd-next-stepper-details {
   display: flex;
   flex-direction: column;
-  border-top: 1px solid var(--hs-color-border-neutral-strong);
+  border-top: 1px solid var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
   margin-top: 8px;
   padding-top: 8px;
 }
@@ -5677,8 +6007,8 @@ td.vd-show-print {
   margin-top: 16px;
 }
 .vd-id-badge.vd-id-badge--interactive-selection {
-  border: 2px solid var(--hs-color-border-neutral-soft);
-  background-color: var(--hs-color-bg-neutral-top);
+  border: 2px solid var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
   border-radius: 5px;
   cursor: pointer;
 }
@@ -5687,10 +6017,10 @@ td.vd-show-print {
 }
 .vd-id-badge.vd-id-badge--interactive-selection:hover, .vd-id-badge.vd-id-badge--interactive-selection:active, .vd-id-badge.vd-id-badge--interactive-selection:focus {
   outline: none;
-  background-color: var(--hs-color-bg-go-highlight-default);
+  background-color: var(--ls-color-bg-go-highlight-default, var(--hs-color-bg-go-highlight-default));
 }
 .vd-id-badge.vd-id-badge--current {
-  border-color: var(--hs-color-border-go-default);
+  border-color: var(--ls-color-border-go-default, var(--hs-color-border-go-default));
 }
 .vd-id-badge.vd-id-badge--small .vd-id-badge__content {
   padding: 8px;
@@ -5715,7 +6045,7 @@ td.vd-show-print {
   outline: none;
 }
 .vd-id-badge.vd-id-badge--interactive-action:hover .vd-id-badge__header-title, .vd-id-badge.vd-id-badge--interactive-action:active .vd-id-badge__header-title, .vd-id-badge.vd-id-badge--interactive-action:focus .vd-id-badge__header-title {
-  color: var(--hs-color-fg-go-default);
+  color: var(--ls-color-fg-go-default, var(--hs-color-fg-go-default));
 }
 .vd-id-badge.vd-id-badge--x-small .vd-id-badge__content {
   padding: 8px;
@@ -5756,7 +6086,7 @@ td.vd-show-print {
   justify-content: center;
   flex: 1;
   word-break: break-word;
-  color: var(--hs-color-fg-neutral-default);
+  color: var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
   font-synthesis: none;
   text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
@@ -5793,7 +6123,7 @@ td.vd-show-print {
 }
 
 .vd-id-badge__image {
-  background-color: var(--hs-color-bg-neutral-edge);
+  background-color: var(--ls-color-bg-neutral-edge, var(--hs-color-bg-neutral-edge));
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
@@ -5843,7 +6173,7 @@ td.vd-show-print {
 }
 
 .vd-password-strength-meter[data-value="4"] {
-  background-color: var(--hs-color-bg-success-default);
+  background-color: var(--ls-color-bg-success-default, var(--hs-color-bg-success-default));
   width: 100%;
 }
 
@@ -6344,21 +6674,21 @@ td.vd-show-print {
 }
 .vd-bar-chart-container .y.axis text {
   font-size: 14px;
-  fill: var(--hs-color-fg-neutral-default);
+  fill: var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
 }
 .vd-bar-chart-container .bar {
-  fill: var(--hs-color-bg-success-default);
+  fill: var(--ls-color-bg-success-default, var(--hs-color-bg-success-default));
   opacity: 0.15;
 }
 .vd-bar-chart-container .top {
-  fill: var(--hs-color-bg-success-default);
+  fill: var(--ls-color-bg-success-default, var(--hs-color-bg-success-default));
 }
 .vd-bar-chart-container .bar-label {
   font-size: 13px;
-  fill: var(--hs-color-fg-neutral-default);
+  fill: var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
 }
 .vd-bar-chart-container .bar-chart-background {
-  fill: var(--hs-color-border-neutral-soft);
+  fill: var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
 }
 
 .vd-currency-input-container {
@@ -6368,7 +6698,7 @@ td.vd-show-print {
 
 .vd-datatable {
   width: 100%;
-  border: 1px solid var(--hs-color-border-neutral-strong);
+  border: 1px solid var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
   border-collapse: separate;
   border-spacing: 0;
   border-radius: 4px;
@@ -6394,36 +6724,36 @@ td.vd-show-print {
 }
 
 .vd-datatable-row:nth-child(odd) {
-  background-color: var(--hs-color-bg-neutral-backdrop);
+  background-color: var(--ls-color-bg-neutral-backdrop, var(--hs-color-bg-neutral-backdrop));
 }
 .vd-datatable-row:nth-child(even) {
-  background-color: var(--hs-color-bg-neutral-top);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
 }
 
 .vd-datatable-row--header {
-  border-bottom: 1px solid var(--hs-color-border-neutral-strong);
+  border-bottom: 1px solid var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
 }
 .vd-datatable-row--header:nth-child(odd), .vd-datatable-row--header:nth-child(even) {
-  background-color: var(--hs-color-bg-neutral-top);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
 }
 
 .vd-datatable-row--header-sections {
-  border-bottom: 1px solid var(--hs-color-border-neutral-strong);
+  border-bottom: 1px solid var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
 }
 .vd-datatable-row--header-sections:nth-child(odd), .vd-datatable-row--header-sections:nth-child(even) {
-  background-color: var(--hs-color-bg-neutral-edge);
+  background-color: var(--ls-color-bg-neutral-edge, var(--hs-color-bg-neutral-edge));
 }
 
 .vd-datatable-row--footer:nth-child(odd), .vd-datatable-row--footer:nth-child(even) {
-  background-color: var(--hs-color-bg-neutral-edge);
+  background-color: var(--ls-color-bg-neutral-edge, var(--hs-color-bg-neutral-edge));
 }
 
 .vd-datatable-foot.vd-sticky .vd-datatable-row--footer:last-of-type .vd-datatable-cell {
-  border-bottom: 1px solid var(--hs-color-border-neutral-strong);
+  border-bottom: 1px solid var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
   border-bottom-color: transparent;
 }
 .vd-datatable-foot.vd-sticky--stuck .vd-datatable-row--footer:last-of-type .vd-datatable-cell {
-  border-bottom-color: var(--hs-color-border-neutral-strong);
+  border-bottom-color: var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
   border-radius: 0;
 }
 
@@ -6437,7 +6767,7 @@ td.vd-show-print {
   left: 0;
   width: 100%;
   height: 30px;
-  box-shadow: inset 0 -30px 40px -48px var(--hs-color-overlay-neutral-strong);
+  box-shadow: inset 0 -30px 40px -48px var(--ls-color-overlay-neutral-strong, var(--hs-color-overlay-neutral-strong));
 }
 
 .vd-datatable-cell {
@@ -6455,11 +6785,11 @@ td.vd-show-print {
   font-size: 15px;
   line-height: 1.3333333333;
   font-weight: 700;
-  border-top: 1px solid var(--hs-color-border-neutral-strong);
+  border-top: 1px solid var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
 }
 
 .vd-datatable-cell--section-start {
-  border-left: 1px solid var(--hs-color-border-neutral-strong);
+  border-left: 1px solid var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
 }
 
 .vd-datatable-head-cell {
@@ -6475,7 +6805,7 @@ td.vd-show-print {
   white-space: nowrap;
 }
 .vd-datatable-row--header .vd-datatable-head-cell, .vd-datatable-row--header-sections .vd-datatable-head-cell {
-  border-bottom: 1px solid var(--hs-color-border-neutral-strong);
+  border-bottom: 1px solid var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
 }
 .vd-datatable-row--header-sections .vd-datatable-head-cell {
   font-synthesis: none;
@@ -6491,7 +6821,7 @@ td.vd-show-print {
   font-size: 12px;
   padding: 8px;
   text-align: center;
-  border-left: 1px solid var(--hs-color-border-neutral-strong);
+  border-left: 1px solid var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
 }
 .vd-datatable-row--header-sections .vd-datatable-head-cell:first-child {
   border-left: none;
@@ -6541,7 +6871,7 @@ td.vd-show-print {
   right: 50%;
   bottom: 0;
   width: 1px;
-  background-color: var(--hs-color-border-neutral-soft);
+  background-color: var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
 }
 @media only screen and (max-width: 768px) {
   .vd-daterangepicker {
@@ -6571,7 +6901,7 @@ td.vd-show-print {
     right: 0;
     bottom: -24px;
     height: 1px;
-    background-color: var(--hs-color-border-neutral-soft);
+    background-color: var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
   }
 }
 
@@ -6610,7 +6940,7 @@ td.vd-show-print {
   font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-size: 15px;
   line-height: normal;
-  color: var(--hs-color-fg-neutral-default);
+  color: var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
   font-size: 15px;
   position: relative;
 }
@@ -6656,8 +6986,8 @@ td.vd-show-print {
   position: absolute;
   width: 7px;
   height: 7px;
-  border-right: 3px solid var(--hs-color-fg-neutral-default);
-  border-top: 3px solid var(--hs-color-fg-neutral-default);
+  border-right: 3px solid var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
+  border-top: 3px solid var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
   box-sizing: initial;
   transform: rotate(225deg);
 }
@@ -6671,8 +7001,8 @@ td.vd-show-print {
   position: absolute;
   width: 7px;
   height: 7px;
-  border-right: 3px solid var(--hs-color-fg-neutral-default);
-  border-top: 3px solid var(--hs-color-fg-neutral-default);
+  border-right: 3px solid var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
+  border-top: 3px solid var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
   box-sizing: initial;
   transform: rotate(45deg);
 }
@@ -6689,7 +7019,7 @@ td.vd-show-print {
 
 .react-datepicker__month-select,
 .react-datepicker__year-select {
-  color: var(--hs-color-fg-neutral-default);
+  color: var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
   font-family: lato, "Helvetica Neue", helvetica, roboto, arial, sans-serif;
   font-weight: 400;
   font-size: 15px;
@@ -6700,8 +7030,8 @@ td.vd-show-print {
   box-sizing: border-box;
   outline: none;
   box-shadow: none;
-  background-color: var(--hs-color-bg-neutral-top);
-  border: 2px solid var(--hs-color-border-neutral-soft);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
+  border: 2px solid var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
   border-radius: 4px;
   transition-duration: 0.2s;
   transition-property: border-color, box-shadow;
@@ -6710,12 +7040,12 @@ td.vd-show-print {
   background-repeat: no-repeat;
   background-size: 8px 20px;
   background-position: calc(100% - 14px) 10px;
-  background-image: var(--hs-color-select-arrows-bg);
+  background-image: var(--ls-color-select-arrows-bg, var(--hs-color-select-arrows-bg));
   padding-right: 12px;
 }
 .react-datepicker__month-select::placeholder,
 .react-datepicker__year-select::placeholder {
-  color: var(--hs-color-fg-supplementary-default);
+  color: var(--ls-color-fg-supplementary-default, var(--hs-color-fg-supplementary-default));
   opacity: 1;
 }
 .react-datepicker__month-select:placeholder-shown,
@@ -6736,15 +7066,15 @@ td.vd-show-print {
 .react-datepicker__month-select:focus, .react-datepicker__month-select.vd-focus,
 .react-datepicker__year-select:focus,
 .react-datepicker__year-select.vd-focus {
-  border-color: var(--hs-color-border-go-default);
-  box-shadow: 0 0 3px var(--hs-color-border-go-default);
+  border-color: var(--ls-color-border-go-default, var(--hs-color-border-go-default));
+  box-shadow: 0 0 3px var(--ls-color-border-go-default, var(--hs-color-border-go-default));
 }
 .react-datepicker__month-select.vd-input--error, .react-datepicker__month-select.vd-error, .react-datepicker__month-select.ng-invalid.ng-dirty, .ng-submitted .react-datepicker__month-select.ng-invalid,
 .react-datepicker__year-select.vd-input--error,
 .react-datepicker__year-select.vd-error,
 .react-datepicker__year-select.ng-invalid.ng-dirty,
 .ng-submitted .react-datepicker__year-select.ng-invalid {
-  border-color: var(--hs-color-border-no-default);
+  border-color: var(--ls-color-border-no-default, var(--hs-color-border-no-default));
 }
 .react-datepicker__month-select.vd-input--error:focus, .react-datepicker__month-select.vd-input--error.vd-focus, .react-datepicker__month-select.vd-error:focus, .react-datepicker__month-select.vd-error.vd-focus, .react-datepicker__month-select.ng-invalid.ng-dirty:focus, .react-datepicker__month-select.ng-invalid.ng-dirty.vd-focus, .ng-submitted .react-datepicker__month-select.ng-invalid:focus, .ng-submitted .react-datepicker__month-select.ng-invalid.vd-focus,
 .react-datepicker__year-select.vd-input--error:focus,
@@ -6755,7 +7085,7 @@ td.vd-show-print {
 .react-datepicker__year-select.ng-invalid.ng-dirty.vd-focus,
 .ng-submitted .react-datepicker__year-select.ng-invalid:focus,
 .ng-submitted .react-datepicker__year-select.ng-invalid.vd-focus {
-  box-shadow: 0 0 3px var(--hs-color-border-no-default);
+  box-shadow: 0 0 3px var(--ls-color-border-no-default, var(--hs-color-border-no-default));
 }
 
 .react-datepicker__month-select {
@@ -6790,7 +7120,7 @@ td.vd-show-print {
 .vd-datepicker-day-button {
   box-sizing: border-box;
   padding: 3px;
-  background: var(--hs-color-bg-neutral-top);
+  background: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
   width: 30px;
   height: 30px;
   border: none;
@@ -6809,15 +7139,15 @@ td.vd-show-print {
 .react-datepicker__day--range-start .vd-datepicker-day-button,
 .react-datepicker__day--range-end .vd-datepicker-day-button,
 .react-datepicker__day--selected .vd-datepicker-day-button {
-  background: var(--hs-color-bg-go-default);
-  color: var(--hs-color-fg-neutral-ondark-default);
+  background: var(--ls-color-bg-go-default, var(--hs-color-bg-go-default));
+  color: var(--ls-color-fg-neutral-ondark-default, var(--hs-color-fg-neutral-ondark-default));
   font-weight: 700;
   border: none;
 }
 
 .react-datepicker__day:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end):not(.react-datepicker__day--selected) .vd-datepicker-day-button:hover {
-  background-color: var(--hs-color-bg-go-soft);
-  color: var(--hs-color-fg-neutral-inverted-default);
+  background-color: var(--ls-color-bg-go-soft, var(--hs-color-bg-go-soft));
+  color: var(--ls-color-fg-neutral-inverted-default, var(--hs-color-fg-neutral-inverted-default));
 }
 
 .react-datepicker__day--outside-month {
@@ -6825,15 +7155,15 @@ td.vd-show-print {
 }
 
 .react-datepicker__day--today {
-  color: var(--hs-color-fg-go-default);
+  color: var(--ls-color-fg-go-default, var(--hs-color-fg-go-default));
   font-weight: 700;
 }
 
 .react-datepicker__day--in-range:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end):not(.react-datepicker__day--selected) {
-  background-color: var(--hs-color-bg-go-highlight-default);
+  background-color: var(--ls-color-bg-go-highlight-default, var(--hs-color-bg-go-highlight-default));
 }
 .react-datepicker__day--in-range:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end):not(.react-datepicker__day--selected) .vd-datepicker-day-button {
-  background-color: var(--hs-color-bg-go-highlight-default);
+  background-color: var(--ls-color-bg-go-highlight-default, var(--hs-color-bg-go-highlight-default));
   border-radius: 0;
 }
 .react-datepicker__day--in-range:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end):not(.react-datepicker__day--selected) .vd-datepicker-day-button:hover {
@@ -6847,11 +7177,11 @@ td.vd-show-print {
 }
 
 .react-datepicker__day--range-start {
-  background-image: linear-gradient(to right, transparent 50%, var(--hs-color-bg-go-highlight-default) 50%);
+  background-image: linear-gradient(to right, transparent 50%, var(--ls-color-bg-go-highlight-default, var(--hs-color-bg-go-highlight-default)) 50%);
 }
 
 .react-datepicker__day--range-end {
-  background-image: linear-gradient(to right, var(--hs-color-bg-go-highlight-default) 50%, transparent 50%);
+  background-image: linear-gradient(to right, var(--ls-color-bg-go-highlight-default, var(--hs-color-bg-go-highlight-default)) 50%, transparent 50%);
 }
 
 .react-datepicker__day--range-start.react-datepicker__day--range-end {
@@ -6876,14 +7206,14 @@ td.vd-show-print {
   height: 10px;
   width: 100%;
   border-radius: 5px;
-  background-color: var(--hs-color-bg-neutral-edge);
+  background-color: var(--ls-color-bg-neutral-edge, var(--hs-color-bg-neutral-edge));
   overflow: hidden;
 }
 
 .vs-progress-bar {
   height: 100%;
   width: 0%;
-  background-color: var(--hs-color-bg-go-default);
+  background-color: var(--ls-color-bg-go-default, var(--hs-color-bg-go-default));
   transition: width 0.6s ease;
 }
 
@@ -6895,51 +7225,51 @@ td.vd-show-print {
 .vd-line-graph-container .vd-grid.vd-y .tick line,
 .vd-line-graph-container .vd-axis.vd-y .tick line,
 .vd-line-graph-container .vd-axis.vd-x .tick line {
-  stroke: var(--hs-color-border-neutral-soft);
+  stroke: var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
   stroke-width: 1px;
   fill: transparent;
 }
 .vd-line-graph-container .vd-grid.vd-grid-filled {
   stroke-dasharray: 4, 2;
-  stroke: var(--hs-color-border-neutral-soft);
+  stroke: var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
 }
 .vd-line-graph-container .vd-grid-background {
   fill: transparent;
   stroke: none;
 }
 .vd-line-graph-container .vd-grid-zero-tick {
-  stroke: var(--hs-color-border-neutral-strong);
+  stroke: var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
 }
 .vd-line-graph-container .vd-line {
   fill: transparent;
   stroke-width: 2px;
-  stroke: var(--hs-color-border-neutral-strong);
+  stroke: var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
 }
 .vd-line-graph-container .vd-line-with-fill {
   fill: transparent;
   stroke-width: 2px;
-  stroke: var(--hs-color-fg-success-default);
+  stroke: var(--ls-color-fg-success-default, var(--hs-color-fg-success-default));
 }
 .vd-line-graph-container .vd-line-fill {
-  fill: var(--hs-color-bg-success-default);
+  fill: var(--ls-color-bg-success-default, var(--hs-color-bg-success-default));
   opacity: 0.1;
   stroke-width: 0;
 }
 .vd-line-graph-container .vd-plot-point {
-  fill: var(--hs-color-bg-go-default);
-  stroke: var(--hs-color-bg-neutral-top);
+  fill: var(--ls-color-bg-go-default, var(--hs-color-bg-go-default));
+  stroke: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
   stroke-width: 2px;
 }
 .vd-line-graph-container .vd-plot-point-with-fill {
-  fill: var(--hs-color-bg-success-default);
-  stroke: var(--hs-color-bg-neutral-top);
+  fill: var(--ls-color-bg-success-default, var(--hs-color-bg-success-default));
+  stroke: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
 }
 .vd-line-graph-container .vd-plot-point-hidden {
   stroke: none;
   fill: transparent;
 }
 .vd-line-graph-container .vd-line-wrapper-main .vd-line {
-  stroke: var(--hs-color-bg-supplementary-default);
+  stroke: var(--ls-color-bg-supplementary-default, var(--hs-color-bg-supplementary-default));
 }
 .vd-line-graph-container .vd-line-wrapper-secondary .vd-plot-point {
   stroke: none;
@@ -6956,7 +7286,7 @@ td.vd-show-print {
   line-height: 1.2;
   font-weight: 900;
   text-transform: uppercase;
-  fill: var(--hs-color-border-neutral-strong);
+  fill: var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
 }
 .vd-line-graph-container .vd-axis .tick text {
   font-synthesis: none;
@@ -6968,7 +7298,7 @@ td.vd-show-print {
   font-size: 10px;
   line-height: 1.2;
   font-weight: 400;
-  fill: var(--hs-color-fg-neutral-default);
+  fill: var(--ls-color-fg-neutral-default, var(--hs-color-fg-neutral-default));
 }
 
 .vd-chart-popover {
@@ -6977,7 +7307,7 @@ td.vd-show-print {
 }
 
 .vd-sparkline {
-  stroke: var(--hs-color-fg-success-default);
+  stroke: var(--ls-color-fg-success-default, var(--hs-color-fg-success-default));
   stroke-width: 1px;
   fill: transparent;
 }
@@ -6987,7 +7317,7 @@ td.vd-show-print {
   box-sizing: border-box;
   margin: 0 auto;
   padding: 0;
-  background: var(--hs-color-bg-neutral-top);
+  background: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
   border-radius: 4px;
   width: calc(90% - 50px);
   pointer-events: auto;
@@ -7161,7 +7491,7 @@ td.vd-show-print {
   display: flex;
   padding-top: 6px;
   padding-bottom: 6px;
-  border-bottom: 1px solid var(--hs-color-border-neutral-strong);
+  border-bottom: 1px solid var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
   justify-content: space-between;
   align-items: center;
   min-height: 60px;
@@ -7225,7 +7555,7 @@ td.vd-show-print {
 }
 
 .vd-table-list-toggle-icon {
-  color: var(--hs-color-fg-supplementary-default);
+  color: var(--ls-color-fg-supplementary-default, var(--hs-color-fg-supplementary-default));
   transition: transform 50ms ease-in-out 0s;
   width: 16px;
   height: 16px;
@@ -7279,27 +7609,27 @@ td.vd-show-print {
 }
 
 .vd-table-list-row {
-  border-bottom: 1px solid var(--hs-color-border-neutral-soft);
+  border-bottom: 1px solid var(--ls-color-border-neutral-soft, var(--hs-color-border-neutral-soft));
 }
 .vd-table-list-row.vd-table-list-row--active {
-  background-color: var(--hs-color-bg-go-highlight-default);
+  background-color: var(--ls-color-bg-go-highlight-default, var(--hs-color-bg-go-highlight-default));
 }
 
 .vd-table-list-row--expandable:hover {
   cursor: pointer;
-  background-color: var(--hs-color-bg-go-highlight-default);
+  background-color: var(--ls-color-bg-go-highlight-default, var(--hs-color-bg-go-highlight-default));
 }
 
 .vd-table-list-row--expanded {
-  background: var(--hs-color-bg-neutral-top);
-  box-shadow: 0 10px 12px -2px var(--hs-color-overlay-neutral-strong);
+  background: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
+  box-shadow: 0 10px 12px -2px var(--ls-color-overlay-neutral-strong, var(--hs-color-overlay-neutral-strong));
 }
 .vd-table-list-row--expanded .vd-table-list-cell:first-child::before {
   content: "";
   top: -1px;
   left: 0;
   width: 4px;
-  background-color: var(--hs-color-border-go-default);
+  background-color: var(--ls-color-border-go-default, var(--hs-color-border-go-default));
   bottom: 0;
   z-index: 1;
   position: absolute;
@@ -7309,15 +7639,15 @@ td.vd-show-print {
 }
 
 .vd-table-list-row--actions {
-  background-color: var(--hs-color-bg-neutral-edge);
-  border-bottom: 1px solid var(--hs-color-border-neutral-strong);
+  background-color: var(--ls-color-bg-neutral-edge, var(--hs-color-bg-neutral-edge));
+  border-bottom: 1px solid var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
 }
 
 .vd-table-list-row--expanded-content {
   display: none;
 }
 .vd-table-list-row--expanded-content > .vd-table-list-cell {
-  background: var(--hs-color-bg-neutral-top);
+  background: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
   padding: 0;
 }
 .vd-table-list-row--expanded-content > .vd-table-list-cell:first-child::before {
@@ -7325,7 +7655,7 @@ td.vd-show-print {
   top: -1px;
   left: 0;
   width: 4px;
-  background-color: var(--hs-color-border-go-default);
+  background-color: var(--ls-color-border-go-default, var(--hs-color-border-go-default));
   bottom: 0;
   z-index: 1;
   position: absolute;
@@ -7333,7 +7663,7 @@ td.vd-show-print {
 .vd-table-list-row--expanded-content > .vd-table-list-cell:first-child::after {
   content: "";
   pointer-events: none;
-  box-shadow: 0 10px 12px -2px var(--hs-color-overlay-neutral-strong);
+  box-shadow: 0 10px 12px -2px var(--ls-color-overlay-neutral-strong, var(--hs-color-overlay-neutral-strong));
   position: absolute;
   left: 0;
   top: 0;
@@ -7343,7 +7673,7 @@ td.vd-show-print {
 }
 
 .vd-table-list-row--header {
-  border-bottom-color: var(--hs-color-border-neutral-strong);
+  border-bottom-color: var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
 }
 
 .vd-table-list-expanded-container {
@@ -7417,8 +7747,8 @@ td.vd-show-print {
   position: absolute;
   width: 100%;
   height: 100%;
-  color: var(--hs-color-bg-neutral-top);
-  background: var(--hs-color-bg-neutral-top) linear-gradient(to left, var(--hs-color-bg-neutral-top) 50%, #e9f6e8 50%) no-repeat;
+  color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
+  background: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top)) linear-gradient(to left, var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top)) 50%, #e9f6e8 50%) no-repeat;
 }
 
 .vd-upsell-primary-background-inner {
@@ -7432,7 +7762,7 @@ td.vd-show-print {
 
 .vd-upsell-primary-upper {
   position: relative;
-  background-color: var(--hs-color-bg-neutral-top);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
 }
 
 .vd-upsell-primary-background svg {
@@ -7529,7 +7859,7 @@ td.vd-show-print {
   display: flex;
   justify-content: space-between;
   flex-flow: row wrap;
-  box-shadow: inset 0 -1px var(--hs-color-border-neutral-strong);
+  box-shadow: inset 0 -1px var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
 }
 
 .pm-products-search-open {
@@ -7615,7 +7945,7 @@ td.vd-show-print {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  background-color: var(--hs-color-bg-neutral-top);
+  background-color: var(--ls-color-bg-neutral-top, var(--hs-color-bg-neutral-top));
   padding-top: 8px;
   height: auto;
 }
@@ -7642,10 +7972,10 @@ td.vd-show-print {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background-color: var(--hs-color-border-neutral-strong);
+  background-color: var(--ls-color-border-neutral-strong, var(--hs-color-border-neutral-strong));
 }
 .vd-carousel-wrapper .vd-carousel-paginator-indicator--active::before {
-  background-color: var(--hs-color-bg-go-default);
+  background-color: var(--ls-color-bg-go-default, var(--hs-color-bg-go-default));
 }
 
 .vd-video-thumbnail-container {
@@ -7662,7 +7992,7 @@ td.vd-show-print {
   margin: auto;
 }
 .vd-video-thumbnail-container .vd-video-play-button-container .vd-video-play-button {
-  background-color: var(--hs-color-bg-neutral-backdrop);
+  background-color: var(--ls-color-bg-neutral-backdrop, var(--hs-color-bg-neutral-backdrop));
   width: 80px;
   height: 80px;
   border-radius: 50%;
@@ -7671,10 +8001,10 @@ td.vd-show-print {
   transform: translateX(3px);
 }
 .vd-video-thumbnail-container .vd-video-play-button-container .vd-video-play-button:hover {
-  background-color: var(--hs-color-bg-supplementary-default);
+  background-color: var(--ls-color-bg-supplementary-default, var(--hs-color-bg-supplementary-default));
 }
 .vd-video-thumbnail-container .vd-video-play-button-container .vd-video-play-button:active {
-  background-color: var(--hs-color-bg-supplementary-default);
+  background-color: var(--ls-color-bg-supplementary-default, var(--hs-color-bg-supplementary-default));
 }
 .vd-video-thumbnail-container .vd-video-thumbnail-image {
   position: absolute;
@@ -7708,14 +8038,14 @@ td.vd-show-print {
   top: 0;
 }
 .vd-sticky--top.vd-sticky--stuck {
-  box-shadow: 0 20px 40px -20px var(--hs-color-overlay-neutral-strong);
+  box-shadow: 0 20px 40px -20px var(--ls-color-overlay-neutral-strong, var(--hs-color-overlay-neutral-strong));
 }
 
 .vd-sticky--bottom {
   bottom: 0;
 }
 .vd-sticky--bottom.vd-sticky--stuck {
-  box-shadow: 0 -20px 40px -20px var(--hs-color-overlay-neutral-strong);
+  box-shadow: 0 -20px 40px -20px var(--ls-color-overlay-neutral-strong, var(--hs-color-overlay-neutral-strong));
 }
 
 .vd-sticky--stuck {