Fix custom heading background style. (#7751)

Move custom CSS from the theme.json to style.css and apply color variables, so that it works better with color variations.

craftfully/style.css

@@ -46,4 +46,10 @@ a {
  */
 .wp-block-navigation ul {
 	padding: unset;
+}
+
+/* Custom gradient background for headings */
+.heading-bg {
+	background: var(--wp--preset--color--base);
+	background: linear-gradient(180deg, var(--wp--preset--color--base) 0%, var(--wp--preset--color--base) 50%, var(--wp--preset--color--accent-5) 50%, var(--wp--preset--color--accent-5) 100%);
 }

craftfully/theme.json

@@ -634,7 +634,7 @@
 			"background": "var(--wp--preset--color--base)",
 			"text": "var(--wp--preset--color--contrast)"
 		},
-		"css": "/* Remove block gap between first-level blocks */ :where(.wp-site-blocks) > * { margin-block-start: 0; margin-block-end: 0; }\n\n.heading-bg {background: rgb(255,255,255);\nbackground: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(206,227,226,1) 50%, rgba(206,227,226,1) 100%);}",
+		"css": "/* Remove block gap between first-level blocks */ :where(.wp-site-blocks) > * { margin-block-start: 0; margin-block-end: 0; }",
 		"elements": {
 			"button": {
 				":active": {