4 files changed, 16 insertions, 22 deletions
diff --git a/src/styles/card.css b/src/styles/card.css
index 07a62fcd..9af777c5 100644
--- a/src/styles/card.css
+++ b/src/styles/card.css
@@ -2,30 +2,15 @@
 
 details,
 .card {
-	box-shadow: rgba(0, 0, 11, 0.1) 0px 7px 29px 0px;
-}
-
-@media (prefers-color-scheme: light) {
-	details,
-	.card {
-		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
-	}
+	box-shadow: var(--shadow-card);
 }
 
 .header {
 	box-shadow:
-		rgba(0, 0, 11, 0.2) 0px 7px 29px 0px,
+		var(--shadow-card-emphasized),
 		0 0 0 5px var(--base02);
 }
 
-@media (prefers-color-scheme: light) {
-	.header {
-		box-shadow:
-			rgba(100, 100, 111, 0.2) 0px 7px 29px 0px,
-			0 0 0 5px var(--base02);
-	}
-}
-
 .card {
 	background-color: var(--base0011);
 	padding: 1rem;
diff --git a/src/styles/colours.css b/src/styles/colours.css
index 0442fee4..84669a0d 100644
--- a/src/styles/colours.css
+++ b/src/styles/colours.css
@@ -17,6 +17,14 @@
 	--base0D: #7cafc2;
 	--base0E: #ba8baf;
 	--base0F: #a16946;
+
+	--shadow-card: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+	--shadow-card-emphasized: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+	--shadow-cta: 0 4px 20px rgba(0, 0, 0, 0.15);
+
+	--scrim: rgba(0, 0, 0, 0.6);
+	--scrim-soft: rgba(0, 0, 0, 0.5);
+	--scrim-banner: rgba(0, 0, 0, 0.468);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -39,6 +47,9 @@
 		--base0D: #7baeb1;
 		--base0E: #b98aae;
 		--base0F: #a06845;
+
+		--shadow-card: rgba(0, 0, 11, 0.1) 0px 7px 29px 0px;
+		--shadow-card-emphasized: rgba(0, 0, 11, 0.2) 0px 7px 29px 0px;
 	}
 }
 
diff --git a/src/styles/input.css b/src/styles/input.css
index 41b8af06..a46c9b13 100644
--- a/src/styles/input.css
+++ b/src/styles/input.css
@@ -14,8 +14,7 @@ textarea {
 	transition:
 		background-color 0.15s ease-in-out,
 		transform 0.15s ease-in-out;
-	/* box-shadow: 0 4px 30px var(--base01); */
-	box-shadow: rgba(0, 0, 11, 0.1) 0px 7px 29px 0px;
+	box-shadow: var(--shadow-card);
 }
 
 input,
@@ -110,8 +109,7 @@ button {
 	transition:
 		background-color 0.15s ease-in-out,
 		transform 0.15s ease-in-out;
-	/* box-shadow: 0 4px 30px var(--base01); */
-	box-shadow: rgba(0, 0, 11, 0.1) 0px 7px 29px 0px;
+	box-shadow: var(--shadow-card);
 }
 
 button:hover {
diff --git a/src/styles/popup.scss b/src/styles/popup.scss
index 97b2e3d1..463a17d8 100644
--- a/src/styles/popup.scss
+++ b/src/styles/popup.scss
@@ -13,7 +13,7 @@
 .popup-fullscreen {
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: var(--scrim-soft);
   z-index: 3;
   backdrop-filter: blur(8px);
 }