diff --git a/app/assets/stylesheets/color_definitions.scss b/app/assets/stylesheets/color_definitions.scss
index 820ca3b333b..16e681d030a 100644
--- a/app/assets/stylesheets/color_definitions.scss
+++ b/app/assets/stylesheets/color_definitions.scss
@@ -135,4 +135,13 @@
   --gold: #{$gold};
   --silver: #{$silver};
   --bronze: #{$bronze};
+
+  --shadow-modal: 0 8px 60px rgba(0, 0, 0, #{$shadow-opacity-modal});
+  --shadow-composer: 0 -1px 40px rgba(0, 0, 0, #{$shadow-opacity-composer});
+  --shadow-menu-panel: 0 12px 12px rgba(0, 0, 0, #{$shadow-opacity-menu-panel});
+  --shadow-card: 0 4px 14px rgba(0, 0, 0, #{$shadow-opacity-card});
+  --shadow-dropdown: 0 2px 3px 0 rgba(0, 0, 0, #{$shadow-opacity-dropdown});
+  --shadow-header: 0 2px 4px -1px rgba(0, 0, 0, #{$shadow-opacity-header});
+  --shadow-footer-nav: 0 0 2px 0 rgba(0, 0, 0, #{$shadow-opacity-footer-nav});
+  --shadow-focus-danger: 0 0 6px 0 var(--danger);
 }
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index e0121b18b4d..9d88ec3ff60 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -380,7 +380,7 @@ $mobile-breakpoint: 700px;
     width: 460px;
     right: 0;
     z-index: z("dropdown");
-    box-shadow: shadow("card");
+    box-shadow: var(--shadow-card);
     margin-top: -2px;
     background-color: var(--secondary);
     padding: 12px 12px 5px;
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index ca2e8d587d2..925ff47e8cb 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -961,7 +961,7 @@ table.permalinks {
       height: calc(100vh - 450px);
       min-height: 200px;
       width: 100%;
-      box-shadow: shadow("footer-nav");
+      box-shadow: var(--shadow-footer-nav);
       border-radius: 4px;
     }
 
diff --git a/app/assets/stylesheets/common/admin/dashboard.scss b/app/assets/stylesheets/common/admin/dashboard.scss
index ad5a1ce4c97..7874e517195 100644
--- a/app/assets/stylesheets/common/admin/dashboard.scss
+++ b/app/assets/stylesheets/common/admin/dashboard.scss
@@ -521,7 +521,7 @@
       }
     }
     &:hover {
-      box-shadow: shadow("card");
+      box-shadow: var(--shadow-card);
     }
   }
 }
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index 226ed6a2200..68b1b33c99c 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -36,7 +36,7 @@ html.composer-open {
   transition: height 250ms ease, background 250ms ease, transform 250ms ease,
     max-width 250ms ease, padding-bottom 250ms ease;
   background-color: var(--secondary);
-  box-shadow: shadow("composer");
+  box-shadow: var(--shadow-composer);
 
   .reply-area {
     display: flex;
@@ -426,7 +426,7 @@ html.composer-open {
   width: 300px;
   background-color: var(--secondary);
   border: 1px solid var(--primary-low);
-  box-shadow: shadow("dropdown-lite");
+  box-shadow: var(--shadow-dropdown);
   border-radius: 8px;
 
   ul {
diff --git a/app/assets/stylesheets/common/base/d-popover.scss b/app/assets/stylesheets/common/base/d-popover.scss
index ef84d8cd909..ba497cdb052 100644
--- a/app/assets/stylesheets/common/base/d-popover.scss
+++ b/app/assets/stylesheets/common/base/d-popover.scss
@@ -5,7 +5,7 @@ $d-popover-border: var(--primary-low);
   color: var(--primary);
   background: $d-popover-background;
   border: 1px solid var(--primary-low);
-  box-shadow: shadow("menu-panel");
+  box-shadow: var(--shadow-menu-panel);
 }
 
 .tippy-box[data-placement^="top"] .tippy-svg-arrow > svg {
diff --git a/app/assets/stylesheets/common/base/dialog.scss b/app/assets/stylesheets/common/base/dialog.scss
index 5f74a25695a..b57f3521a53 100644
--- a/app/assets/stylesheets/common/base/dialog.scss
+++ b/app/assets/stylesheets/common/base/dialog.scss
@@ -37,7 +37,7 @@
   position: relative;
   background-color: var(--secondary);
   animation: fade-in 250ms both;
-  box-shadow: shadow("card");
+  box-shadow: var(--shadow-card);
   min-width: 40vw;
 }
 
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 77dd5cd2e89..d0616c4467d 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -198,7 +198,7 @@ textarea {
 
   &:focus:required:invalid:focus {
     border-color: var(--danger);
-    box-shadow: shadow("focus-danger");
+    box-shadow: var(--shadow-focus-danger);
   }
 }
 
diff --git a/app/assets/stylesheets/common/base/groups.scss b/app/assets/stylesheets/common/base/groups.scss
index b05cf1d383c..1aab6046096 100644
--- a/app/assets/stylesheets/common/base/groups.scss
+++ b/app/assets/stylesheets/common/base/groups.scss
@@ -46,7 +46,7 @@
       transition: all 0.25s;
 
       &:hover {
-        box-shadow: shadow("card");
+        box-shadow: var(--shadow-card);
         border-color: var(--primary-low-mid-or-secondary-high);
       }
     }
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 7038307a2b1..f33ecbcbdfd 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -10,7 +10,7 @@
   width: 100%;
   z-index: z("header");
   background-color: var(--header_background);
-  box-shadow: shadow("header");
+  box-shadow: var(--shadow-header);
   backface-visibility: hidden; /** do magic for scrolling performance **/
 
   > .wrap {
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index c34fca2bf75..202d7d87843 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -1,7 +1,7 @@
 .menu-panel.slide-in {
   position: fixed;
   right: 0;
-  box-shadow: shadow("header");
+  box-shadow: var(--shadow-header);
 
   .panel-body {
     width: 100%;
@@ -21,7 +21,7 @@
 
 .menu-panel {
   border: 1px solid var(--primary-low);
-  box-shadow: shadow("menu-panel");
+  box-shadow: var(--shadow-menu-panel);
   background-color: var(--secondary);
   z-index: z("header");
   padding: 0.5em;
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index eaede938839..8b8f8fa4e44 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -18,7 +18,7 @@
   margin: 0 auto;
   max-width: var(--modal-max-width);
   background-color: var(--secondary);
-  box-shadow: shadow("modal");
+  box-shadow: var(--shadow-modal);
 
   .select-kit {
     width: 220px;
@@ -44,7 +44,7 @@
   overflow: auto;
   height: auto;
   background-color: var(--secondary);
-  box-shadow: shadow("card");
+  box-shadow: var(--shadow-card);
   background-clip: padding-box;
 }
 
@@ -208,7 +208,7 @@
           position: absolute;
           top: 70%;
           padding: 5px 10px;
-          box-shadow: shadow("card");
+          box-shadow: var(--shadow-card);
           z-index: 5;
           background-color: var(--secondary);
           max-height: 150px;
diff --git a/app/assets/stylesheets/common/base/popup-menu.scss b/app/assets/stylesheets/common/base/popup-menu.scss
index fa1bd550fa4..dd31de815fe 100644
--- a/app/assets/stylesheets/common/base/popup-menu.scss
+++ b/app/assets/stylesheets/common/base/popup-menu.scss
@@ -3,7 +3,7 @@
   width: 14em;
   border: 1px solid var(--primary-low);
   z-index: z("dropdown");
-  box-shadow: shadow("card");
+  box-shadow: var(--shadow-card);
 
   ul {
     margin: 0;
diff --git a/app/assets/stylesheets/common/base/reviewables.scss b/app/assets/stylesheets/common/base/reviewables.scss
index 7651faf5532..6af43395c14 100644
--- a/app/assets/stylesheets/common/base/reviewables.scss
+++ b/app/assets/stylesheets/common/base/reviewables.scss
@@ -495,7 +495,7 @@
       background: var(--primary-very-low);
       color: var(--primary-high);
       font-size: var(--font-down-2);
-      box-shadow: shadow("dropdown-lite");
+      box-shadow: var(--shadow-dropdown);
       margin-left: 50%;
       transform: translateX(-50%);
       border-radius: 4px;
diff --git a/app/assets/stylesheets/common/base/sidebar-more-section-links.scss b/app/assets/stylesheets/common/base/sidebar-more-section-links.scss
index dbf19d9d946..1bfab6cde1e 100644
--- a/app/assets/stylesheets/common/base/sidebar-more-section-links.scss
+++ b/app/assets/stylesheets/common/base/sidebar-more-section-links.scss
@@ -26,7 +26,7 @@
 .sidebar-more-section-links-details-content {
   background-color: var(--d-sidebar-background);
   transition: background-color 0.25s;
-  box-shadow: shadow("card");
+  box-shadow: var(--shadow-card);
   border: 1px solid var(--primary-low);
   margin: 0 calc(var(--d-sidebar-row-horizontal-padding) * 2 / 3);
 
diff --git a/app/assets/stylesheets/common/base/static-login.scss b/app/assets/stylesheets/common/base/static-login.scss
index ddea2774f94..f1971764bcf 100644
--- a/app/assets/stylesheets/common/base/static-login.scss
+++ b/app/assets/stylesheets/common/base/static-login.scss
@@ -34,7 +34,7 @@ body.static-login {
     border: 1px solid var(--primary-low);
     text-align: center;
     padding: 2em;
-    box-shadow: shadow("card");
+    box-shadow: var(--shadow-card);
     border-radius: 5px;
     display: grid;
     place-items: center;
diff --git a/app/assets/stylesheets/common/base/tooltip.scss b/app/assets/stylesheets/common/base/tooltip.scss
index af5a4dc4e82..a1f958c5956 100644
--- a/app/assets/stylesheets/common/base/tooltip.scss
+++ b/app/assets/stylesheets/common/base/tooltip.scss
@@ -54,7 +54,7 @@ $discourse-tooltip-border: var(--primary-medium);
     max-width: 250px;
     font-size: var(--font-down-1);
     color: var(--primary);
-    box-shadow: shadow("dropdown");
+    box-shadow: var(--shadow-dropdown);
     line-height: 1.4em;
   }
 }
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 2977916ecbf..0c3c5ec4305 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -556,7 +556,7 @@ aside.quote {
   z-index: z("dropdown");
   background-color: var(--secondary);
   border: 1px solid var(--primary-low);
-  box-shadow: shadow("card");
+  box-shadow: var(--shadow-card);
   flex-direction: column;
 
   &.animated {
@@ -1394,7 +1394,7 @@ span.mention {
         margin-left: 8px;
         background-color: var(--primary-low);
         color: var(--primary);
-        box-shadow: shadow("dropdown");
+        box-shadow: var(--shadow-dropdown);
       }
     }
   }
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index b1cfef207e7..09cf6aa3560 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/app/assets/stylesheets/common/base/topic.scss
@@ -69,7 +69,7 @@ $topic-progress-height: 42px;
       overflow-y: auto;
       z-index: z("timeline");
       padding: 10px 10px 35px 10px;
-      box-shadow: shadow("dropdown");
+      box-shadow: var(--shadow-dropdown);
       background: var(--tertiary-low);
 
       .close {
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index 3f641ccbd3b..c901d5232bb 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -201,7 +201,7 @@
   border-radius: var(--d-border-radius);
   &:hover,
   &:focus {
-    box-shadow: shadow("card");
+    box-shadow: var(--shadow-card);
     outline: 1px solid #000;
   }
   &[href] {
diff --git a/app/assets/stylesheets/common/components/d-tooltip.scss b/app/assets/stylesheets/common/components/d-tooltip.scss
index 54e9b95c1b9..28433f513db 100644
--- a/app/assets/stylesheets/common/components/d-tooltip.scss
+++ b/app/assets/stylesheets/common/components/d-tooltip.scss
@@ -7,6 +7,6 @@
   color: var(--primary);
   background: var(--secondary);
   border: 1px solid var(--primary-low);
-  box-shadow: shadow("menu-panel");
+  box-shadow: var(--shadow-menu-panel);
   overflow-wrap: break-word;
 }
diff --git a/app/assets/stylesheets/common/components/footer-nav.scss b/app/assets/stylesheets/common/components/footer-nav.scss
index 52aa485b30f..8e72f4e1399 100644
--- a/app/assets/stylesheets/common/components/footer-nav.scss
+++ b/app/assets/stylesheets/common/components/footer-nav.scss
@@ -30,7 +30,7 @@ body.footer-nav-visible {
 
 .footer-nav {
   background-color: rgba(var(--header_background-rgb), 0.9);
-  box-shadow: shadow("footer-nav");
+  box-shadow: var(--shadow-footer-nav);
   height: var(--footer-nav-height);
   position: fixed;
   bottom: calc(var(--footer-nav-height) * -1);
diff --git a/app/assets/stylesheets/common/components/hashtag.scss b/app/assets/stylesheets/common/components/hashtag.scss
index 4a9186887dd..b4e6cd771ea 100644
--- a/app/assets/stylesheets/common/components/hashtag.scss
+++ b/app/assets/stylesheets/common/components/hashtag.scss
@@ -58,7 +58,7 @@ a.hashtag {
 .hashtag-autocomplete {
   max-height: 13.5em;
   overflow-y: auto;
-  box-shadow: shadow("dropdown-lite");
+  box-shadow: var(--shadow-dropdown);
   border-radius: 8px;
 
   &__fadeout {
diff --git a/app/assets/stylesheets/common/components/user-card.scss b/app/assets/stylesheets/common/components/user-card.scss
index e46ea45da21..3c9a807ca49 100644
--- a/app/assets/stylesheets/common/components/user-card.scss
+++ b/app/assets/stylesheets/common/components/user-card.scss
@@ -37,7 +37,7 @@
 .user-card,
 .group-card {
   width: var(--card-width);
-  box-shadow: shadow("card");
+  box-shadow: var(--shadow-card);
   color: var(--primary);
   background: var(--secondary) center center;
   background-size: cover;
diff --git a/app/assets/stylesheets/common/foundation/color_transformations.scss b/app/assets/stylesheets/common/foundation/color_transformations.scss
index a0ac1243fb7..7d32a179214 100644
--- a/app/assets/stylesheets/common/foundation/color_transformations.scss
+++ b/app/assets/stylesheets/common/foundation/color_transformations.scss
@@ -171,3 +171,12 @@ $hljs-attribute: dark-light-choose(
 $hljs-symbol: dark-light-choose(unquote("#990073"), unquote("#fbe")) !default;
 $hljs-bg: dark-light-choose(unquote("#f8f8f8"), unquote("#333")) !default;
 $hljs-builtin-name: dark-light-choose($tertiary-high, $tertiary-hover) !default;
+
+// shadow opacity variables
+$shadow-opacity-modal: dark-light-choose(0.6, 1) !default;
+$shadow-opacity-composer: dark-light-choose(0.12, 0.35) !default;
+$shadow-opacity-menu-panel: dark-light-choose(0.15, 0.35) !default;
+$shadow-opacity-card: dark-light-choose(0.15, 0.5) !default;
+$shadow-opacity-dropdown: dark-light-choose(0.2, 0.35) !default;
+$shadow-opacity-header: dark-light-choose(0.25, 0.45) !default;
+$shadow-opacity-footer-nav: dark-light-choose(0.2, 0.4) !default;
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index 5d7aa2d89c2..5cf234edd63 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -132,49 +132,6 @@ $z-layers: (
   @return map-deep-get($z-layers, $layers...);
 }
 
-// Box-shadow
-// --------------------------------------------------
-
-$box-shadow-light: (
-  "modal": 0 8px 60px rgba(0, 0, 0, 0.6),
-  "composer": 0 -1px 40px rgba(0, 0, 0, 0.12),
-  "menu-panel": 0 12px 12px rgba(0, 0, 0, 0.15),
-  "card": 0 4px 14px rgba(0, 0, 0, 0.15),
-  "dropdown": 0 2px 3px 0 rgba(0, 0, 0, 0.2),
-  "dropdown-lite": 0px 2px 12px 0px rgba(0, 0, 0, 0.1),
-  "header": 0 2px 4px -1px rgba(0, 0, 0, 0.25),
-  "footer-nav": 0 0 2px 0 rgba(0, 0, 0, 0.25),
-  "kbd": (
-    0 2px 0 rgba(0, 0, 0, 0.2),
-    0 0 0 1px dark-light-choose(#fff, #000) inset,
-  ),
-  "focus": 0 0 3px 0 $tertiary,
-  "focus-danger": 0 0 6px 0 $danger,
-);
-
-// do not add a dark shadow without a light equivilant
-$box-shadow-dark: (
-  "modal": 0 8px 60px rgba(0, 0, 0, 1),
-  "composer": 0 -1px 40px rgba(0, 0, 0, 0.35),
-  "menu-panel": 0 8px 12px rgba(0, 0, 0, 0.35),
-  "card": 0 4px 14px rgba(0, 0, 0, 0.5),
-  "dropdown": 0 2px 3px 0 rgba(0, 0, 0, 0.35),
-  "dropdown-lite": 0px 2px 12px 0px rgba(0, 0, 0, 0.25),
-);
-
-@function shadow($key) {
-  @if is-light-color-scheme() {
-    @return map-get($box-shadow-light, $key);
-  } @else {
-    $shadow-dark: map-get($box-shadow-dark, $key);
-    @if $shadow-dark != null {
-      @return $shadow-dark;
-    } @else {
-      @return map-get($box-shadow-light, $key);
-    }
-  }
-}
-
 // Color utilities
 // --------------------------------------------------
 
diff --git a/app/assets/stylesheets/common/input_tip.scss b/app/assets/stylesheets/common/input_tip.scss
index 77876f4dad9..d429858b6e9 100644
--- a/app/assets/stylesheets/common/input_tip.scss
+++ b/app/assets/stylesheets/common/input_tip.scss
@@ -20,7 +20,7 @@
   &.bad {
     background: var(--danger-medium);
     color: white;
-    box-shadow: shadow("dropdown");
+    box-shadow: var(--shadow-dropdown);
   }
   &.hide,
   &.good {
diff --git a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
index 43d12e6f469..dda97e1fa1b 100644
--- a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
+++ b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
@@ -15,7 +15,7 @@
       .select-kit-body {
         border: 1px solid var(--primary-low);
         background-clip: padding-box;
-        box-shadow: shadow("dropdown");
+        box-shadow: var(--shadow-dropdown);
       }
 
       .select-kit-row {
diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss
index a443c502bf9..254d6e1410c 100644
--- a/app/assets/stylesheets/common/select-kit/select-kit.scss
+++ b/app/assets/stylesheets/common/select-kit/select-kit.scss
@@ -40,7 +40,7 @@
       border-radius: 0;
       border: none;
       border: 1px solid var(--primary-low);
-      box-shadow: shadow("dropdown");
+      box-shadow: var(--shadow-dropdown);
       background: var(--secondary);
       max-width: 600px;
     }
diff --git a/app/assets/stylesheets/common/software-update-prompt.scss b/app/assets/stylesheets/common/software-update-prompt.scss
index 812b7e26872..3fb47e6ee85 100644
--- a/app/assets/stylesheets/common/software-update-prompt.scss
+++ b/app/assets/stylesheets/common/software-update-prompt.scss
@@ -9,7 +9,7 @@
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s;
-  box-shadow: shadow("header");
+  box-shadow: var(--shadow-header);
   z-index: z("header") - 10;
 
   .update-prompt-main-content {
diff --git a/app/assets/stylesheets/common/topic-entrance.scss b/app/assets/stylesheets/common/topic-entrance.scss
index 8e04f2e33f0..21fee2bc2b7 100644
--- a/app/assets/stylesheets/common/topic-entrance.scss
+++ b/app/assets/stylesheets/common/topic-entrance.scss
@@ -2,7 +2,7 @@
   border: 1px solid var(--primary-low);
   padding: 5px;
   background: var(--secondary);
-  box-shadow: shadow("card");
+  box-shadow: var(--shadow-card);
   z-index: z("dropdown");
 
   position: absolute;
diff --git a/app/assets/stylesheets/common/topic-timeline.scss b/app/assets/stylesheets/common/topic-timeline.scss
index 3713c24209e..075468f6883 100644
--- a/app/assets/stylesheets/common/topic-timeline.scss
+++ b/app/assets/stylesheets/common/topic-timeline.scss
@@ -55,7 +55,7 @@
     left: 0;
     right: 0;
     border-top: 1px solid var(--primary-low);
-    box-shadow: shadow("composer");
+    box-shadow: var(--shadow-composer);
     padding: 20px 0px;
     z-index: z("fullscreen");
     @media screen and (max-height: 425px) {
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index 408b7687c1b..5b9b4e1cbe2 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -89,7 +89,7 @@
   overflow-y: auto;
   z-index: z("composer", "dropdown") + 1;
   padding: 1.5em;
-  box-shadow: shadow("dropdown");
+  box-shadow: var(--shadow-dropdown);
   background: var(--highlight-bg);
 
   &.urgent {
diff --git a/app/assets/stylesheets/desktop/login.scss b/app/assets/stylesheets/desktop/login.scss
index 6db9f4e7ac2..722140918e3 100644
--- a/app/assets/stylesheets/desktop/login.scss
+++ b/app/assets/stylesheets/desktop/login.scss
@@ -417,7 +417,7 @@
   }
   .invite-form,
   .invite-success {
-    box-shadow: shadow("card");
+    box-shadow: var(--shadow-card);
   }
 }
 
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 478b75547b4..e8879adbd7b 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -547,7 +547,7 @@ blockquote {
   width: 200px;
   position: fixed;
   z-index: z("dropdown") + 1; // 1 higher than .select-posts
-  box-shadow: shadow("card");
+  box-shadow: var(--shadow-card);
   padding: 0.714em;
   margin-bottom: 5px;
   right: 10px;
diff --git a/plugins/chat/assets/stylesheets/common/chat-message-actions.scss b/plugins/chat/assets/stylesheets/common/chat-message-actions.scss
index 6606c6902da..42663c62167 100644
--- a/plugins/chat/assets/stylesheets/common/chat-message-actions.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-message-actions.scss
@@ -127,7 +127,7 @@
 
     .select-kit-body {
       padding: 0.5rem;
-      box-shadow: shadow("card");
+      box-shadow: var(--shadow-card);
       border: 1px solid var(--primary-300);
     }
 
diff --git a/plugins/chat/assets/stylesheets/common/direct-message-creator.scss b/plugins/chat/assets/stylesheets/common/direct-message-creator.scss
index 45e08936e1c..f46addc2b96 100644
--- a/plugins/chat/assets/stylesheets/common/direct-message-creator.scss
+++ b/plugins/chat/assets/stylesheets/common/direct-message-creator.scss
@@ -114,7 +114,7 @@
     margin: 0;
     flex-wrap: wrap;
     border-bottom: 1px solid var(--primary-low);
-    box-shadow: shadow("card");
+    box-shadow: var(--shadow-card);
     position: absolute;
     width: 100%;
     z-index: z("dropdown");
@@ -180,7 +180,7 @@
     text-align: center;
     padding: 1rem;
     width: 100%;
-    box-shadow: shadow("card");
+    box-shadow: var(--shadow-card);
     background: var(--secondary);
     margin: 0;
     box-sizing: border-box;
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-emoji-picker.scss b/plugins/chat/assets/stylesheets/mobile/chat-emoji-picker.scss
index 0e204af6407..c169432dcce 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-emoji-picker.scss
+++ b/plugins/chat/assets/stylesheets/mobile/chat-emoji-picker.scss
@@ -8,7 +8,7 @@
     right: 0;
     height: 50vh;
     width: 100%;
-    box-shadow: shadow("card");
+    box-shadow: var(--shadow-card);
     z-index: z("header") + 2;
     max-width: 100vw;
     box-sizing: border-box;