7 files changed, 8 insertions, 8 deletions
diff --git a/src/lib/CommandPalette/CommandPalette.svelte b/src/lib/CommandPalette/CommandPalette.svelte
index ca3513f4..faa739a4 100644
--- a/src/lib/CommandPalette/CommandPalette.svelte
+++ b/src/lib/CommandPalette/CommandPalette.svelte
@@ -268,7 +268,7 @@ const handleGlobalKey = (e: KeyboardEvent) => {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.6);
+    background-color: var(--scrim);
     z-index: 100;
     backdrop-filter: blur(3px);
     cursor: pointer;
diff --git a/src/lib/Events/Event.svelte b/src/lib/Events/Event.svelte
index a1d6cf42..d93bc9d0 100644
--- a/src/lib/Events/Event.svelte
+++ b/src/lib/Events/Event.svelte
@@ -43,7 +43,7 @@ let { event, avatar = false }: { event: Event; avatar?: boolean } = $props();
     display: flex;
     flex-wrap: wrap;
     column-gap: 1.5em;
-    background-color: rgba(0, 0, 0, 0.468);
+    background-color: var(--scrim-banner);
     color: #d8d8d8;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
diff --git a/src/lib/Events/Group.svelte b/src/lib/Events/Group.svelte
index 9b0ddba5..28aef6c1 100644
--- a/src/lib/Events/Group.svelte
+++ b/src/lib/Events/Group.svelte
@@ -56,7 +56,7 @@ let { group }: { group: Group } = $props();
     display: flex;
     flex-wrap: wrap;
     column-gap: 1.5em;
-    background-color: rgba(0, 0, 0, 0.468);
+    background-color: var(--scrim-banner);
     color: #d8d8d8;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
diff --git a/src/lib/Landing.svelte b/src/lib/Landing.svelte
index 319e8a48..bca1554c 100644
--- a/src/lib/Landing.svelte
+++ b/src/lib/Landing.svelte
@@ -450,7 +450,7 @@ $effect(() => {
   .cta:hover {
     text-decoration: none;
     transform: translateY(-2px);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--shadow-cta);
   }
 
   .demo-overlay {
diff --git a/src/lib/LandingHero.svelte b/src/lib/LandingHero.svelte
index c1d8a5aa..f080f156 100644
--- a/src/lib/LandingHero.svelte
+++ b/src/lib/LandingHero.svelte
@@ -125,7 +125,7 @@ const scrollPastHero = () => {
   .cta:hover {
     text-decoration: none;
     transform: translateY(-2px);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--shadow-cta);
   }
 
   .cta:active {
diff --git a/src/lib/List/MediaRoulette.svelte b/src/lib/List/MediaRoulette.svelte
index d6e33d7a..3fbc89d6 100644
--- a/src/lib/List/MediaRoulette.svelte
+++ b/src/lib/List/MediaRoulette.svelte
@@ -163,7 +163,7 @@ const handleOverlayClick = (e: MouseEvent) => {
     left: 0;
     right: 0;
     bottom: 0;
-    background: rgba(0, 0, 0, 0.6);
+    background: var(--scrim);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -320,7 +320,7 @@ const handleOverlayClick = (e: MouseEvent) => {
     margin: 0 auto 1rem;
     border-radius: 8px;
     overflow: hidden;
-    box-shadow: rgba(0, 0, 11, 0.1) 0px 7px 29px 0px;
+    box-shadow: var(--shadow-card);
   }
 
   .cover-wrapper :global(.roulette-cover) {
diff --git a/src/lib/Notification/Notification.svelte b/src/lib/Notification/Notification.svelte
index a3271d58..1543f3b9 100644
--- a/src/lib/Notification/Notification.svelte
+++ b/src/lib/Notification/Notification.svelte
@@ -65,7 +65,7 @@ const remove = () => {
   #notification {
     background-color: var(--base001);
     box-shadow:
-      rgba(0, 0, 11, 0.2) 0px 7px 29px 0px,
+      var(--shadow-card-emphasized),
       0 0 0 4px var(--base0E);
 
     widows: 100%;