/* ==========================================================================
   MODO OSCURO — sobreescribe las mismas variables --wp--preset--color--*
   que ya usa el resto del tema (cards.css, layout.css, landing.css, los
   estilos de bloque nativos de theme.json...), así que no hace falta ningún
   estilo "oscuro" adicional en ningún otro sitio: todo lo que ya usa var()
   se adapta solo. html[data-theme="dark"] tiene más especificidad que el
   :root donde WordPress define los valores claros, así que gana siempre,
   sin depender del orden de carga de las hojas de estilo.

   "brand"/"brand-on-brand" se invierten a propósito (claro/oscuro), no solo
   se aclaran: en el sitio claro son un botón oscuro con texto claro y una
   tarjeta de precio "destacada" con fondo oscuro; en modo oscuro deben
   seguir siendo el color que contrasta con el fondo general, así que pasan
   a ser claro/oscuro respectivamente — mismo papel, polaridad invertida.
   ========================================================================== */
html[data-theme="dark"] {
	--wp--preset--color--background: #121212;
	--wp--preset--color--background-secondary: #1c1c1c;
	--wp--preset--color--foreground: #f0f0f0;
	--wp--preset--color--foreground-secondary: #b0b0b0;
	--wp--preset--color--foreground-tertiary: #6e6e6e;
	--wp--preset--color--border: #333333;
	--wp--preset--color--border-secondary: #595959;
	--wp--preset--color--brand: #f0f0f0;
	--wp--preset--color--brand-on-brand: #1e1e1e;
	--wp--preset--color--placeholder: #2a2a2a;
}

/* Único color del tema escrito a mano fuera del sistema de variables
   (aviso de error del formulario de contacto, assets/css/landing.css) —
   el rosa/rojo claro original no se adapta solo, necesita su propia
   variante oscura. */
html[data-theme="dark"] .hdv-contact-form__notice--error {
	background-color: #3a1f1d;
	color: #f5a89e;
}

/* Cambio de color instantáneo en los elementos sin transición no se ve mal,
   pero un fundido corto en fondo/texto hace que el cambio de modo se note
   intencional en vez de brusco. */
body,
.hdv-header,
.hdv-footer {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ----- Botón de modo oscuro/claro ----- */
.hdv-theme-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	background-color: transparent;
	color: var(--wp--preset--color--foreground);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.hdv-theme-toggle:hover {
	background-color: var(--wp--preset--color--background-secondary);
}

.hdv-theme-toggle__icon {
	width: 20px;
	height: 20px;
}

/* Solo se muestra el icono que representa la acción disponible: luna (pasar
   a oscuro) en modo claro, sol (pasar a claro) en modo oscuro. */
.hdv-theme-toggle__icon--sun {
	display: none;
}

html[data-theme="dark"] .hdv-theme-toggle__icon--moon {
	display: none;
}

html[data-theme="dark"] .hdv-theme-toggle__icon--sun {
	display: block;
}