Keep logo gold consistent across themes

e2e/navegacion.e2e.ts

@@ -41,6 +41,19 @@ test.describe('Navegación', () => {
 		await expect(ultimo).toHaveAttribute('aria-label', /tema/);
 	});
 
+	test('el logo conserva el mismo metal al cambiar al tema claro', async ({ page }) => {
+		await page.goto('/');
+
+		const logo = page.locator('header .marca');
+		const oroOscuro = await logo.evaluate((elemento) => getComputedStyle(elemento).backgroundImage);
+
+		await page.getByRole('button', { name: 'Cambiar al tema claro' }).click();
+		await expect(page.locator('html')).toHaveAttribute('data-tema', 'claro');
+
+		const oroClaro = await logo.evaluate((elemento) => getComputedStyle(elemento).backgroundImage);
+		expect(oroClaro).toBe(oroOscuro);
+	});
+
 	test('la música se presenta por estilos', async ({ page }) => {
 		await page.goto('/musica');
 

src/app.css

@@ -38,7 +38,16 @@
 	 * El oro. El plano de antes tiraba a amarillo; este baja de claridad y sube
 	 * de croma, que es lo que separa un metal de un color de rotulador.
 	 */
-	--c-accent: oklch(0.8 0.145 84);
+	/*
+	 * El metal de la marca no cambia con el tema. Los acentos funcionales sí
+	 * pueden adaptarse al fondo claro, pero el logotipo conserva estas tres
+	 * tintas exactas en ambos modos.
+	 */
+	--c-marca-oro: oklch(0.8 0.145 84);
+	--c-marca-oro-brillo: oklch(0.94 0.095 96);
+	--c-marca-oro-sombra: oklch(0.63 0.13 72);
+
+	--c-accent: var(--c-marca-oro);
 	--c-accent-text: oklch(0.16 0.042 264);
 	/*
 	 * El dorado como superficie va aparte del dorado como texto, porque no
@@ -47,10 +56,10 @@
 	 * En el tema oscuro coinciden; en el claro no, y por eso existe la
 	 * distinción.
 	 */
-	--c-accent-superficie: oklch(0.8 0.145 84);
+	--c-accent-superficie: var(--c-marca-oro);
 	/* Los dos extremos del reflejo: la luz que lo cruza y la sombra del canto. */
-	--c-accent-brillo: oklch(0.94 0.095 96);
+	--c-accent-brillo: var(--c-marca-oro-brillo);
-	--c-accent-sombra: oklch(0.63 0.13 72);
+	--c-accent-sombra: var(--c-marca-oro-sombra);
 
 	/*
 	 * El verdemar: el tercer color de la paleta, para datos.
@@ -118,16 +127,18 @@
 	);
 
 	/*
-	 * El mismo metal, pero para recortarlo sobre unas letras.
+	 * El metal propio del logotipo. Usa los colores fijos de marca en vez de los
-	 *
+	 * acentos funcionales del tema: cambiar el fondo no debe convertir el logo en
-	 * El dorado hace dos trabajos y no puede ser el mismo valor en los dos: de
+	 * otro dorado ni aplanar su banda de luz.
-	 * relleno tiene que ser claro para que encima se lea el marino, y escrito
-	 * tiene que ser hondo para leerse sobre el fondo. Sobre marino las cinco
-	 * paradas de `--oro` valen —la peor da 5,4 de contraste—, así que aquí es
-	 * literalmente el mismo. En claro no: ahí el brillo se queda en 1,26 y la
-	 * marca desaparece, y por eso el tema claro lo redefine.
 	 */
-	--oro-escrito: var(--oro);
+	--oro-escrito: linear-gradient(
+		166deg,
+		var(--c-marca-oro-sombra) 0%,
+		var(--c-marca-oro) 24%,
+		var(--c-marca-oro-brillo) 46%,
+		var(--c-marca-oro) 64%,
+		var(--c-marca-oro-sombra) 100%
+	);
 
 	/*
 	 * Dos radios y no más, para que nada se vea de otra familia:
@@ -225,27 +236,6 @@
 	--c-accent-brillo: oklch(0.9 0.1 92);
 	--c-accent-sombra: oklch(0.6 0.12 74);
 
-	/*
-	 * El oro escrito, sobre papel.
-	 *
-	 * Aquí la banda va al revés que en el botón: el punto más claro es el propio
-	 * `--c-accent` y los extremos se oscurecen. Medido contra este fondo, el
-	 * acento da 5,29 de contraste y las tres paradas del oro de relleno dan
-	 * 1,26, 2,05 y 3,79 —las tres por debajo del mínimo—, así que un degradado
-	 * que subiera del acento dejaría el centro de las letras ilegible.
-	 *
-	 * Sigue pareciendo metal porque lo que hace el efecto es la banda que cruza,
-	 * no que llegue a brillar.
-	 */
-	--oro-escrito: linear-gradient(
-		166deg,
-		color-mix(in oklab, var(--c-accent) 68%, black) 0%,
-		color-mix(in oklab, var(--c-accent) 84%, black) 24%,
-		var(--c-accent) 46%,
-		color-mix(in oklab, var(--c-accent) 84%, black) 64%,
-		color-mix(in oklab, var(--c-accent) 68%, black) 100%
-	);
-
 	/* En claro se invierten: el dato pintado tiene que ser oscuro sobre papel. */
 	--c-dato: oklch(0.5 0.085 200);
 	/* El mismo tono, un paso por debajo: «también se canta aquí», no otro dato. */

src/lib/components/Cabecera.svelte

@@ -235,7 +235,7 @@
 		font-weight: 600;
 		line-height: 1.15;
 		letter-spacing: 0.01em;
-		color: var(--c-accent);
+		color: var(--c-marca-oro);
 		text-decoration: none;
 	}