Change design

src/styles/_panel.scss

@@ -1,3 +1,4 @@
+@use "sass:color" as sass-color;
 @use "@styles/color";
 @use "@styles/var";
 
@@ -102,14 +103,17 @@
 	gap: var.$text-spacing;
 	padding: 0.55rem 1.1rem;
 	border-radius: var.$block-radius;
-	color: #fff6e6;
-	background-color: color.$ribbon;
+	//The gold ribbon with the wordmark brown on it, exactly as the two sit
+	//together in the mark. Gold is the palette's one colour for things that
+	//have to be reached for; the lilac ribbon belongs to the book
+	color: color.$ink;
+	background-color: color.$amber;
 	box-shadow: var.$shadow-elem;
 	transition: background-color var.$trans-quick;
 
 	&:hover:not(:disabled),
 	&:focus-visible {
-		background-color: color.$ribbon-deep;
+		background-color: sass-color.adjust(color.$amber, $lightness: 6%);
 	}
 
 	&:disabled {
@@ -132,12 +136,12 @@
 }
 
 .text-button--bad {
-	color: color.$ribbon;
+	color: color.$bad;
 
 	&:hover,
 	&:focus-visible {
-		color: color.$ribbon-deep;
-		background-color: rgba(163, 55, 47, 0.08);
+		color: color.$bad;
+		background-color: rgba(155, 70, 49, 0.09);
 	}
 }
 
@@ -148,7 +152,7 @@
 	align-items: center;
 	gap: 0.4rem;
 	font-size: 0.78rem;
-	color: rgba(255, 238, 210, 0.5);
+	color: color.$ink-faint;
 	padding: 0.35rem 0.5rem;
 	white-space: nowrap;
 	transition: color var.$trans-quick;
@@ -156,11 +160,11 @@
 
 .saver--saving,
 .saver--pending {
-	color: rgba(255, 238, 210, 0.75);
+	color: color.$ink-soft;
 }
 
 .saver--failed {
-	color: #f0b6ae;
+	color: color.$bad;
 }
 
 .saver__dot {
@@ -226,9 +230,9 @@
 
 //The one in use: a ruled line under the sample, like the page itself
 .hand-picker__option--on {
-	border-color: color.$caramel;
+	border-color: color.$amber;
 	background-color: color.$paper-shade;
-	box-shadow: inset 0 0 0 1px color.$caramel;
+	box-shadow: inset 0 0 0 1px color.$amber;
 }
 
 .hand-picker__sample {