refactor(colours): tokenise card shadows and scrims

Introduce --shadow-card, --shadow-card-emphasized, --shadow-cta,
--scrim, --scrim-soft, and --scrim-banner. Migrate 14 inline
literals (card.css, input.css, Notification, MediaRoulette, the
two Landing CTA buttons, the popup overlay, the palette and
roulette scrims, three identity banners, the user profile cover
art shadow) onto the tokens, with light/dark adaptation handled
by the existing prefers-color-scheme blocks instead of duplicated
inline. Two single-use Landing demo-focus values stay inline.

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);
 }