fix: use semantic color for prayer section backgrounds in light mode

Replace var(--accent-dark) with var(--color-bg-secondary) which maps
to the correct color in both modes, removing dead @media overrides
that referenced the undefined var(--accent-light). Also match rosary
cross fill to Benedictus medal color in light mode.

src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte

@@ -856,18 +856,12 @@ onMount(() => {
 	scroll-snap-align: start;
 	padding: 2rem;
 	margin-bottom: 2rem;
-	background: var(--accent-dark);
+	background: var(--color-bg-secondary);
 	border-radius: 8px;
 	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 	position: relative;
 }
 
-@media(prefers-color-scheme: light) {
-	.prayer-section {
-		background: var(--accent-light);
-	}
-}
-
 .prayer-section.decade {
 	scroll-snap-align: start;
 	min-height: 50vh; /* Only decades need minimum height for scroll-snap */
@@ -940,6 +934,12 @@ onMount(() => {
 	transition: all 0.3s ease;
 }
 
+@media (prefers-color-scheme: light) {
+	.rosary-visualization :global(.cross-symbol) {
+		fill: var(--nord3);
+	}
+}
+
 .rosary-visualization :global(.hitboxes) {
 	fill: transparent;
 }